/* Học Vật Lý unified design system — theme 2.0 */
:root{--blue:#075ee8;--blue-dark:#064bbd;--navy:#05275d;--ink:#071c43;--muted:#607089;--line:#e2e9f3;--bg:#f5f8fc;--surface:#fff;--green:#11865b;--orange:#f59e0b;--radius-sm:12px;--radius:18px;--radius-lg:26px;--shadow-sm:0 6px 18px rgba(12,42,88,.06);--shadow:0 18px 48px rgba(12,42,88,.10)}
body{background:var(--surface);font-family:Inter,"Segoe UI",Arial,sans-serif;text-rendering:optimizeLegibility}.site-header{height:72px;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(226,233,243,.9)}.header-inner{height:72px;max-width:1320px;padding:0 24px;gap:22px}.brand{display:flex;align-items:center;flex:0 0 auto}.brand picture{display:flex}.brand img,.custom-logo{max-height:50px;max-width:180px}.main-nav{min-width:0}.main-nav ul{gap:4px}.main-nav a{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:10px;font-size:12px;letter-spacing:.015em}.main-nav a:hover,.main-nav .current-menu-item>a{background:#edf4ff;color:var(--blue)}.main-nav .menu-hatquiz>a{background:var(--navy);color:#fff}.main-nav .menu-hatquiz>a:hover{background:var(--blue);color:#fff}.header-actions{gap:8px}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;color:var(--navy)}.account-link{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:11px;background:var(--blue);color:#fff;font-size:12px;font-weight:850}.account-link .ui-icon{width:18px;height:18px}.menu-toggle{width:42px;height:42px;padding:10px;border:1px solid var(--line);border-radius:11px;background:#fff}.menu-toggle span{display:block;height:2px;margin:4px 0;border-radius:2px;background:var(--navy);transition:.2s}.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.home-main{overflow:hidden;background:linear-gradient(#fff 0,#f8fbff 720px,#fff 1100px)}.home-main .hero{position:relative;max-width:1320px;min-height:540px;padding:76px 36px 64px;grid-template-columns:minmax(0,1.04fr) minmax(430px,.96fr);gap:58px;background:transparent}.hero-copy{position:relative;z-index:2}.eyebrow{display:inline-flex;margin-bottom:18px;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.15em}.home-main .hero h1{max-width:720px;margin:0;font-size:clamp(46px,6vw,76px);line-height:.94;letter-spacing:-3px;color:var(--navy)}.home-main .hero h2{margin:18px 0 10px;font-size:clamp(20px,2.1vw,28px);font-weight:800;color:var(--blue)}.home-main .hero p{max-width:610px;margin:0;color:var(--muted);font-size:17px;line-height:1.75}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.btn{gap:9px;min-height:48px;border-radius:12px;padding:12px 20px;box-shadow:0 10px 24px rgba(7,94,232,.18);transition:transform .18s,box-shadow .18s}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(7,94,232,.24)}.btn .ui-icon{width:19px;height:19px}.btn.secondary{border-color:#cbd9ec;box-shadow:none}.hero-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.hero-trust span{padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#6a7890;font-size:11px;font-weight:750}
.learning-map{position:relative;min-height:390px;border:1px solid #dce8f7;border-radius:34px;background:radial-gradient(circle at 50% 45%,#fff 0,#eef6ff 58%,#e4f0ff 100%);box-shadow:var(--shadow);overflow:hidden}.learning-map:before,.learning-map:after{content:"";position:absolute;border:1px solid rgba(7,94,232,.15);border-radius:50%}.learning-map:before{width:310px;height:310px;right:-90px;top:-110px}.learning-map:after{width:190px;height:190px;left:-70px;bottom:-80px}.map-orbit{position:absolute;left:50%;top:50%;width:225px;height:225px;border:1px dashed rgba(7,94,232,.3);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg)}.map-orbit:before{content:"E = mc²";position:absolute;inset:55px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font:800 24px/1 Georgia,serif;box-shadow:0 16px 35px rgba(5,39,93,.25)}.map-card{position:absolute;z-index:2;width:230px;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.9);border-radius:15px;background:rgba(255,255,255,.95);box-shadow:0 12px 28px rgba(12,42,88,.12)}.map-card i{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:#eaf3ff;color:var(--blue)}.map-card i .ui-icon{width:21px;height:21px}.map-card small,.map-card strong{display:block}.map-card small{color:var(--blue);font-size:9px;font-weight:900;letter-spacing:.1em}.map-card strong{margin-top:2px;color:var(--navy);font-size:13px}.map-course{left:25px;top:34px}.map-practice{right:22px;top:148px}.map-result{left:42px;bottom:29px}.map-result i{background:#fff4d9;color:#a86400}
.journey-grid{position:relative;z-index:3;max-width:1240px;margin:-26px auto 0;padding:0 22px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.journey-card{min-width:0;padding:20px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);transition:.18s}.journey-card:hover{transform:translateY(-3px);border-color:#bad3f5;box-shadow:var(--shadow)}.journey-icon{width:42px;height:42px;display:grid;place-items:center;margin-bottom:14px;border-radius:12px;background:#edf5ff;color:var(--blue)}.journey-icon .ui-icon{width:22px;height:22px}.journey-card strong,.journey-card small{display:block}.journey-card strong{font-size:14px;color:var(--navy)}.journey-card small{margin-top:3px;color:var(--muted);font-size:11px}.journey-card:nth-child(3){background:var(--navy);border-color:var(--navy)}.journey-card:nth-child(3) .journey-icon{background:rgba(255,255,255,.12);color:#ffcf70}.journey-card:nth-child(3) strong{color:#fff}.journey-card:nth-child(3) small{color:#b7cae8}
.home-section{max-width:1240px;margin:0 auto;padding:82px 22px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:26px}.section-heading>div>span,.hatquiz-copy>span{color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.14em}.section-heading h2{margin:4px 0;font-size:clamp(28px,4vw,42px);line-height:1.12;color:var(--navy);letter-spacing:-.7px}.section-heading p{margin:0;color:var(--muted)}.section-heading>a{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--blue);font-size:13px;font-weight:850}.section-heading>a .ui-icon{width:17px;height:17px}
.home-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.home-course-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);transition:.2s}.home-course-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.course-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#dcecff,#f3f8ff)}.course-cover img{width:100%;height:100%;object-fit:cover}.course-cover>span{position:absolute;inset:0;display:grid;place-items:center;color:var(--blue)}.course-cover>span .ui-icon{width:64px;height:64px}.course-cover>b{position:absolute;left:14px;top:14px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--blue);font-size:10px;letter-spacing:.06em}.home-course-card>div{padding:19px}.home-course-card>div>span{color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.1em}.home-course-card h3{margin:5px 0 8px;font-size:19px;line-height:1.35;color:var(--navy)}.home-course-card p{min-height:46px;margin:0 0 16px;color:var(--muted);font-size:13px}.home-course-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line)}.home-course-card footer small{color:var(--muted);font-size:11px}.home-course-card footer a{display:flex;align-items:center;gap:4px;color:var(--blue);font-size:12px;font-weight:850}.home-course-card footer .ui-icon{width:15px;height:15px}.course-empty{padding:50px 22px;border:1px dashed #c6d5e8;border-radius:20px;background:#f9fbfe;text-align:center}.course-empty>div{color:var(--blue)}.course-empty>div .ui-icon{width:50px;height:50px}.course-empty h3{margin:9px 0 3px;color:var(--navy)}.course-empty p{margin:0 0 18px;color:var(--muted)}
.hatquiz-showcase{max-width:1240px;margin:15px auto 0;padding:50px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;border-radius:28px;background:linear-gradient(130deg,#05275d,#064da5);color:#fff;box-shadow:0 22px 50px rgba(5,39,93,.20)}.hatquiz-copy>span{color:#80b8ff}.hatquiz-copy h2{margin:8px 0 15px;font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-1px}.hatquiz-copy p{max-width:590px;color:#c4d6ef;line-height:1.7}.btn.light{margin-top:10px;background:#fff;color:var(--navy)!important;box-shadow:none}.hatquiz-flow{display:grid;gap:10px}.hatquiz-flow article{display:flex;align-items:center;gap:15px;padding:15px 17px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.07)}.hatquiz-flow b{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:#fff;color:var(--blue);font-size:11px}.hatquiz-flow strong,.hatquiz-flow small{display:block}.hatquiz-flow strong{font-size:14px}.hatquiz-flow small{margin-top:2px;color:#b8ccea;font-size:11px}
.recent-section{padding-top:88px}.recent-section .posts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.post-card{border-radius:17px;box-shadow:var(--shadow-sm);transition:.2s}.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.post-card>a{display:block}.post-card img,.post-placeholder{width:100%;aspect-ratio:16/9;border-radius:0;object-fit:cover}.post-placeholder{display:grid;place-items:center;background:#eaf3ff;color:var(--blue)}.post-placeholder .ui-icon{width:45px;height:45px}.post-card>a>div{padding:16px}.post-card time{color:var(--blue);font-size:10px;font-weight:850}.post-card h3,.post-card p,.post-card strong{margin-left:0;margin-right:0}.post-card h3{margin-top:5px}.post-card p{min-height:42px}.post-card strong{display:flex;align-items:center;gap:5px;color:var(--blue);font-size:12px}.post-card strong .ui-icon{width:15px;height:15px}
.learning-shell{min-height:60vh;background:var(--bg)}.hvl-learning-page .site-header{box-shadow:0 5px 18px rgba(11,36,84,.04)}.hvl-learning-page .hvl-lms-course,.hvl-learning-page .hvl-lesson-view{max-width:1320px}.hvl-learning-page .hvl-course-hero{background:linear-gradient(125deg,var(--navy),#0756b8)}.hvl-learning-page .hvl-course-sidebar{top:88px}.hvl-learning-page .hvl-lesson-tabs{top:82px}.hvl-learning-page .site-footer{margin-top:0}.hvl-hatquiz-shell{min-height:calc(100vh - 72px);background:var(--bg)}.hvl-app-page .site-header{box-shadow:none}.hvl-app-page .header-inner{max-width:none}.hvl-app-page #hatquiz-2027-root{min-height:calc(100vh - 72px)}
.site-footer{margin-top:0;padding:48px 28px 20px;background:linear-gradient(120deg,#05275d,#031a42)}.footer-grid{max-width:1240px;grid-template-columns:1.7fr repeat(3,1fr);gap:55px}.footer-logo{max-width:170px}.footer-grid h4{font-size:13px;letter-spacing:.04em}.footer-grid a{margin:7px 0}.copyright{padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:1100px){.header-inner{padding:0 18px}.main-nav a{padding:0 7px;font-size:11px}.account-link span{display:none}.account-link{width:40px;padding:0;justify-content:center}.home-main .hero{grid-template-columns:1fr .85fr;gap:28px}.journey-card{padding:16px 12px}}
@media(max-width:900px){body{padding-bottom:68px}.site-header,.header-inner{height:64px}.site-header{backdrop-filter:none}.header-inner{padding:0 14px}.brand img,.custom-logo{max-height:44px;max-width:145px}.menu-toggle{display:block;margin-left:auto}.main-nav{display:block;position:fixed;z-index:80;top:64px;left:0;right:0;bottom:0;padding:14px 18px 90px;background:rgba(255,255,255,.98);transform:translateX(105%);transition:transform .23s;overflow:auto}.admin-bar .main-nav{top:96px}.main-nav.open{transform:translateX(0)}body.hvl-menu-open{overflow:hidden;height:100vh}.main-nav ul{display:grid;gap:5px}.main-nav li{padding:0}.main-nav a{min-height:48px;padding:0 14px;font-size:13px}.header-actions{margin-left:0}.icon-button{display:grid}.home-main .hero{min-height:auto;padding:48px 22px 42px;grid-template-columns:1fr;text-align:left}.home-main .hero h1{font-size:52px}.learning-map{min-height:350px}.journey-grid{margin:0;grid-template-columns:repeat(3,1fr);padding:8px 16px 0}.home-section{padding:64px 16px}.home-course-grid{grid-template-columns:repeat(2,1fr)}.hatquiz-showcase{margin:0 16px;padding:36px 28px;grid-template-columns:1fr;gap:30px}.recent-section .posts-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{display:none}.mobile-bottom{height:68px;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 24px rgba(12,42,88,.08)}.mobile-bottom a{font-size:inherit}.mobile-bottom .ui-icon{width:22px;height:22px}.hatquiz-mobile{position:relative;top:-10px}.hatquiz-mobile .ui-icon{width:27px;height:27px;padding:7px;box-sizing:content-box;border-radius:15px;background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(7,94,232,.3)}.hatquiz-mobile span{color:var(--blue);font-weight:850}.hvl-hatquiz-shell{min-height:calc(100vh - 64px)}.hvl-app-page{padding-bottom:0}.hvl-app-page .site-header{display:none}.hvl-app-page .hvl-hatquiz-shell,.hvl-app-page #hatquiz-2027-root{min-height:100vh}}
@media(max-width:620px){.home-main .hero{padding:38px 17px 34px}.eyebrow{font-size:9px}.home-main .hero h1{font-size:42px;letter-spacing:-2px}.home-main .hero h2{font-size:18px}.home-main .hero p{font-size:14px}.hero-actions{display:grid}.hero-actions .btn{width:100%}.learning-map{min-height:315px;border-radius:24px}.map-orbit{width:185px;height:185px}.map-orbit:before{inset:46px;font-size:18px}.map-card{width:196px;padding:11px}.map-card i{width:35px;height:35px}.map-card strong{font-size:11px}.map-course{left:12px;top:22px}.map-practice{right:10px;top:125px}.map-result{left:22px;bottom:18px}.journey-grid{grid-template-columns:repeat(2,1fr);gap:9px}.journey-card{padding:14px 12px}.journey-card:nth-child(5){grid-column:1/-1}.journey-icon{width:37px;height:37px;margin-bottom:10px}.journey-card strong{font-size:13px}.section-heading{align-items:flex-start}.section-heading>a{display:none}.home-section{padding:54px 14px}.home-course-grid{grid-template-columns:1fr}.home-course-card p{min-height:0}.hatquiz-showcase{margin:0 12px;padding:28px 20px;border-radius:20px}.hatquiz-copy h2{font-size:29px}.hatquiz-copy p{font-size:14px}.hatquiz-flow article{padding:12px}.recent-section .posts-grid{grid-template-columns:1fr}.post-card p{min-height:0}.footer-grid{grid-template-columns:1fr}.footer-grid>div:not(.footer-brand){display:none}.site-footer{padding:38px 22px 90px}.footer-brand{text-align:center}.footer-brand p{margin-left:auto;margin-right:auto}.footer-logo{margin:auto}}