/* =========================================================
   MS HẠ ĐOAN — V8 WOW UI
   UI-only override. No application logic lives in this file.
   Mobile-first modern EdTech visual system.
   ========================================================= */
:root{
  --wow-ink:#102338;
  --wow-ink-2:#1e3650;
  --wow-muted:#6f8092;
  --wow-primary:#1f6fff;
  --wow-primary-2:#5a7cff;
  --wow-cyan:#22c7e8;
  --wow-violet:#7b61ff;
  --wow-green:#23b980;
  --wow-amber:#f3a83b;
  --wow-bg:#f6f8fc;
  --wow-card:rgba(255,255,255,.88);
  --wow-line:rgba(20,50,78,.09);
  --wow-shadow:0 18px 60px rgba(20,51,82,.10);
  --wow-shadow-lg:0 30px 90px rgba(13,43,72,.16);
}
html{background:var(--wow-bg)}
body{
  color:var(--wow-ink)!important;
  background:
    radial-gradient(900px 480px at 8% -8%,rgba(31,111,255,.11),transparent 64%),
    radial-gradient(720px 420px at 96% 8%,rgba(123,97,255,.10),transparent 60%),
    linear-gradient(180deg,#fbfcff 0%,#f7f9fd 54%,#fff 100%)!important;
  letter-spacing:-.008em;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(30,65,100,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(30,65,100,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 48%);
}
.wrap{max-width:1240px!important}
.topnote{
  background:linear-gradient(90deg,#0c2842,#123c61 50%,#132d50)!important;
  border:0!important;
}
.topnote .wrap{min-height:35px!important;color:#d8e9f7!important}
header{
  background:rgba(255,255,255,.76)!important;
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border-bottom:1px solid rgba(20,53,83,.07)!important;
  box-shadow:0 8px 30px rgba(27,63,99,.045)!important;
}
nav.wrap{height:80px!important}
.brand img{border-radius:18px!important;box-shadow:0 8px 26px rgba(15,55,90,.12)!important}
.brand b{font-size:18px!important;color:var(--wow-ink)!important;letter-spacing:-.4px!important}
.brand small{color:#8291a2!important;letter-spacing:1.35px!important}
.navlinks>a{color:#586b7e!important;font-weight:850!important}
.navlinks>a:hover{color:var(--wow-primary)!important;background:#f2f6ff!important}
.btn{border-radius:14px!important;font-weight:900!important;letter-spacing:-.01em!important;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important}
.btn.primary,.nav-study,.hero-main-cta{
  background:linear-gradient(135deg,var(--wow-primary),#4968ff)!important;
  box-shadow:0 10px 30px rgba(31,111,255,.23)!important;
}
.btn.primary:hover,.nav-study:hover,.hero-main-cta:hover{transform:translateY(-1px)!important;box-shadow:0 15px 38px rgba(31,111,255,.28)!important}
.btn.white{border-color:rgba(20,53,83,.10)!important;background:rgba(255,255,255,.92)!important}
.btn.soft{background:#edf3ff!important;color:#245cd7!important}

/* Quick launch */
.quick-access{padding:18px 0 0!important}
.quick-grid{
  position:relative;overflow:hidden;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;padding:10px!important;border-radius:26px!important;
  background:rgba(255,255,255,.66)!important;
  border:1px solid rgba(20,53,83,.08)!important;
  box-shadow:0 18px 55px rgba(23,60,98,.08)!important;
  backdrop-filter:blur(22px);
}
.quick-grid:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(31,111,255,.025),rgba(123,97,255,.025));pointer-events:none}
.quick-card,.quick-card:nth-child(1),.quick-card:nth-child(2),.quick-card:nth-child(3),.quick-card.teacher-entry{
  min-height:94px!important;padding:15px!important;border-radius:19px!important;
  background:rgba(248,250,254,.94)!important;border:1px solid transparent!important;
}
.quick-card:hover{transform:translateY(-2px)!important;background:#fff!important;border-color:rgba(31,111,255,.13)!important;box-shadow:0 12px 30px rgba(18,62,101,.08)!important}
.quick-card.is-primary{background:linear-gradient(145deg,#1259e8,#2784ff)!important;box-shadow:0 13px 30px rgba(31,111,255,.20)!important}
.quick-card.teacher-entry{background:linear-gradient(145deg,#fff9eb,#fffdf8)!important;border-color:rgba(211,156,62,.18)!important}
.quick-icon{width:44px!important;height:44px!important;border-radius:15px!important;background:rgba(255,255,255,.9)!important;box-shadow:0 5px 15px rgba(20,53,83,.07)!important}
.quick-copy b{font-size:15px!important}.quick-copy span{font-size:10.5px!important;color:#7b8b9b!important}.quick-arrow{color:#91a1b2!important}

/* Hero */
.hero{padding:62px 0 52px!important;position:relative}
.hero:after{content:"";position:absolute;right:-10%;top:4%;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(54,126,255,.12),transparent 66%);filter:blur(8px);pointer-events:none}
.hero-grid{grid-template-columns:1.06fr .94fr!important;gap:74px!important}
.kicker{
  background:rgba(255,255,255,.72)!important;color:#2f6698!important;border:1px solid rgba(31,111,255,.14)!important;
  box-shadow:0 8px 24px rgba(31,111,255,.07);backdrop-filter:blur(14px);
  font-size:10px!important;padding:8px 13px!important;border-radius:999px!important;
}
h1,.hero h1{
  color:var(--wow-ink)!important;font-size:clamp(49px,5.8vw,78px)!important;line-height:.99!important;
  letter-spacing:-3.8px!important;margin:20px 0 21px!important;max-width:780px!important;
}
.hero h1 em{
  font-style:normal!important;color:transparent!important;
  background:linear-gradient(100deg,#1e71ff 0%,#6d61ff 52%,#1cabc7 100%);background-clip:text;-webkit-background-clip:text;
}
.hero p{font-size:17px!important;line-height:1.75!important;color:#65788b!important;max-width:650px!important}
.hero p strong{color:var(--wow-ink-2)!important}
.hero-actions{margin-top:28px!important}
.hero-actions .btn{min-height:50px!important;padding:13px 19px!important}
.stats{margin-top:34px!important;gap:10px!important}
.stat{
  background:rgba(255,255,255,.76)!important;border:1px solid var(--wow-line)!important;border-radius:18px!important;
  box-shadow:0 12px 35px rgba(20,55,88,.055)!important;backdrop-filter:blur(12px);padding:13px 15px!important
}
.stat b{color:var(--wow-ink)!important}.stat span{color:#8291a0!important}
.hero-visual{min-height:560px!important}
.hero-photo{
  inset:4px 34px 4px 34px!important;border-radius:40px!important;border:8px solid rgba(255,255,255,.94)!important;
  box-shadow:0 35px 90px rgba(18,58,91,.20)!important;overflow:hidden!important
}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,38,61,.12));pointer-events:none}
.float-card{
  background:rgba(255,255,255,.84)!important;border:1px solid rgba(255,255,255,.80)!important;border-radius:20px!important;
  backdrop-filter:blur(18px);box-shadow:0 18px 48px rgba(14,49,80,.13)!important;padding:14px 16px!important
}
.float-card b{color:var(--wow-ink)!important}.float-card span{color:#718397!important}.fc-index{color:var(--wow-primary)!important}

/* Learning path and public content */
.class-path{padding:4px 0 52px!important}
.class-path-head h2,.section-head h2,.about-copy h2{color:var(--wow-ink)!important;letter-spacing:-1.15px!important}
.class-path-head>a{color:var(--wow-primary)!important}
.class-path-grid{gap:12px!important}
.class-chip{
  border-radius:20px!important;border:1px solid var(--wow-line)!important;background:rgba(255,255,255,.76)!important;
  box-shadow:0 12px 34px rgba(21,58,92,.055)!important;transition:.2s ease!important
}
.class-chip:hover{transform:translateY(-3px);background:#fff!important;box-shadow:0 18px 42px rgba(21,58,92,.09)!important}
.class-chip>span{color:#9aa7b5!important}.class-chip b{color:var(--wow-ink)!important}
section{padding:74px 0!important}
.eyebrow{color:var(--wow-primary)!important;letter-spacing:.14em!important}
.program,.promise,.flow-step,.fee,.feedback-card,.profile-badge,.principle{
  border-radius:22px!important;border:1px solid var(--wow-line)!important;background:rgba(255,255,255,.82)!important;
  box-shadow:0 14px 38px rgba(18,58,92,.055)!important
}
.program:hover,.promise:hover,.flow-step:hover{transform:translateY(-3px)!important;box-shadow:0 18px 46px rgba(18,58,92,.09)!important}
.program:nth-child(n){background:rgba(255,255,255,.82)!important}
.grade{background:linear-gradient(135deg,#edf4ff,#f3f0ff)!important;color:#315ee8!important}
.about-photo,.lesson-photo,.feedback-shot,.gitem{border-radius:28px!important;box-shadow:0 22px 60px rgba(18,58,92,.11)!important}
.quote{border-radius:20px!important;background:linear-gradient(135deg,#f2f7ff,#f8f5ff)!important;border-color:rgba(66,102,210,.10)!important}

/* Homework / student portal */
#homework{
  background:linear-gradient(180deg,#f2f6ff 0%,#f8fbff 100%)!important;
  border-top:1px solid rgba(31,111,255,.06)!important;border-bottom:1px solid rgba(31,111,255,.06)!important
}
.homework-wrap{border-radius:30px!important;border:1px solid rgba(31,72,112,.08)!important;box-shadow:0 28px 90px rgba(23,61,98,.12)!important;background:rgba(255,255,255,.82)!important;backdrop-filter:blur(20px)}
.hw-side{background:linear-gradient(145deg,#0d2f4a,#124c79 56%,#1d6db3)!important;border-radius:26px!important;box-shadow:0 22px 60px rgba(12,50,82,.18)!important}
.hw-side h3{font-size:27px!important}.hw-side p,.hw-point{color:#d8eaf7!important}
.hw-login{border-radius:26px!important;background:#fff!important;border:1px solid rgba(20,53,83,.08)!important;padding:26px!important}
.hw-login h3{color:var(--wow-ink)!important;font-size:25px!important;letter-spacing:-.7px!important}
.hw-login input,input,select,textarea{
  border-radius:14px!important;border:1px solid rgba(25,60,92,.12)!important;background:#fbfcfe!important;color:var(--wow-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important
}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:rgba(31,111,255,.46)!important;box-shadow:0 0 0 4px rgba(31,111,255,.09)!important}
#studentIdentity{background:linear-gradient(135deg,#eef5ff,#f4f1ff)!important;border:1px solid rgba(31,111,255,.08)!important;color:#2455a4!important}
.hw-message.ok{background:#effbf5!important;color:#25734f!important}.hw-message.error{background:#fff3f2!important;color:#a34c45!important}

/* Quiz / result */
.quiz-panel{
  border-radius:28px!important;border:1px solid var(--wow-line)!important;background:#fff!important;
  box-shadow:0 26px 80px rgba(20,55,88,.10)!important;padding:28px!important
}
.quiz-head{border-bottom-color:rgba(20,53,83,.07)!important}.quiz-head h3{color:var(--wow-ink)!important;letter-spacing:-.7px!important}.quiz-badge{background:#eef4ff!important;color:#2d63df!important}
.question{border-radius:20px!important;border:1px solid rgba(20,53,83,.08)!important;background:#fbfcff!important;padding:18px!important;margin:12px 0!important}
.option{border-radius:14px!important;border-color:rgba(20,53,83,.09)!important;background:#fff!important;transition:.15s!important}.option:hover{border-color:rgba(31,111,255,.24)!important;background:#f7faff!important}
.score-box{border-radius:22px!important;background:linear-gradient(135deg,#effaf5,#f4fbff)!important;border:1px solid rgba(35,185,128,.15)!important;padding:22px!important}
.score-number{color:#18875d!important;font-size:42px!important;letter-spacing:-2px!important}
.student-review{border-radius:20px!important;background:#fbfcff!important;border-color:rgba(20,53,83,.08)!important}

/* Parent + news portals */
.portal-modal{background:rgba(7,27,46,.54)!important;backdrop-filter:blur(12px)!important}
.portal-card{border-radius:30px!important;border:1px solid rgba(255,255,255,.55)!important;background:rgba(255,255,255,.96)!important;box-shadow:0 32px 100px rgba(4,28,50,.26)!important;padding:24px!important}
.portal-head h3{color:var(--wow-ink)!important;letter-spacing:-.6px!important}.portal-close{border-radius:13px!important;background:#f7f9fc!important}
.portal-box{background:#f5f8fd!important;border:1px solid rgba(20,53,83,.06)!important;border-radius:16px!important}
.parent-summary-grid article,.parent-progress-card,.parent-results-list{
  border-radius:18px!important;background:#fff!important;border:1px solid rgba(20,53,83,.08)!important;box-shadow:0 10px 30px rgba(20,55,88,.05)!important
}
.parent-summary-grid strong{color:var(--wow-primary)!important}.parent-progress-track i{background:linear-gradient(90deg,var(--wow-primary),var(--wow-cyan))!important}

/* Teacher workspace */
#teacherResultsPanel,.admin-panel{
  border-radius:28px!important;border:1px solid rgba(20,53,83,.08)!important;background:#f8faff!important;
  box-shadow:0 28px 90px rgba(20,55,88,.12)!important
}
.teacher-admin-head{border-radius:22px!important;border-color:rgba(20,53,83,.07)!important;box-shadow:0 10px 30px rgba(20,55,88,.04)!important}
.teacher-overview{gap:12px!important}.teacher-overview-card,.teacher-stat{
  border-radius:18px!important;border:1px solid rgba(20,53,83,.07)!important;background:#fff!important;
  box-shadow:0 10px 28px rgba(20,55,88,.045)!important;padding:15px!important
}
.teacher-overview-card b,.teacher-stat b{color:var(--wow-primary)!important;font-size:22px!important}
.clean-tabs{background:#edf2f8!important;border:0!important;border-radius:18px!important;padding:6px!important}
.clean-tabs .admin-tab{border:0!important;background:transparent!important;color:#6e7e8f!important;border-radius:13px!important}
.clean-tabs .admin-tab.active{background:#fff!important;color:var(--wow-primary)!important;box-shadow:0 7px 20px rgba(25,61,98,.09)!important}
.admin-collapsible,.admin-list-row,.admin-card{border-radius:18px!important;border-color:rgba(20,53,83,.075)!important;box-shadow:0 8px 24px rgba(20,55,88,.035)!important}
.admin-list-title{color:var(--wow-ink)!important}.admin-status-pill.on{background:#eafaf2!important;color:#16815b!important}.admin-status-pill.off{background:#fff6e8!important;color:#966221!important}
.teacher-results-toolbar{gap:10px!important}.teacher-results-toolbar input,.teacher-results-toolbar select{background:#fff!important}

/* Mobile */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr!important;gap:30px!important}.hero-visual{max-width:690px!important}
}
@media(max-width:700px),(max-device-width:700px){
  body{padding-bottom:94px!important;background:linear-gradient(180deg,#f9fbff 0%,#f5f8fd 100%)!important}
  .wrap{width:calc(100% - 28px)!important}
  .topnote{display:none!important}
  header{position:sticky!important;top:0!important;background:rgba(255,255,255,.88)!important;backdrop-filter:blur(20px)!important}
  nav.wrap{height:68px!important}.brand img{width:43px!important;height:43px!important;border-radius:14px!important}.brand b{font-size:14px!important}.brand small{font-size:8px!important}.menu{border-radius:13px!important}
  .quick-access{padding:10px 0 0!important}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;border-radius:22px!important;padding:7px!important;gap:7px!important;background:rgba(255,255,255,.76)!important}
  .quick-card{min-height:78px!important;border-radius:16px!important;padding:10px!important}.quick-icon{width:36px!important;height:36px!important;border-radius:12px!important}.quick-copy b{font-size:12.5px!important}.quick-copy span{font-size:9px!important;line-height:1.25!important}
  .hero{padding:38px 0 30px!important}.hero-grid{gap:26px!important}.kicker{font-size:8.5px!important;padding:7px 10px!important}
  h1,.hero h1{font-size:43px!important;line-height:1.00!important;letter-spacing:-2.3px!important;margin:17px 0 16px!important}
  .hero p{font-size:14px!important;line-height:1.65!important}.hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.hero-actions .btn:first-child{grid-column:1/-1}.hero-actions .btn{min-height:47px!important;padding:11px 10px!important;font-size:11.5px!important}
  .stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin-top:22px!important}.stat{min-width:0!important;border-radius:14px!important;padding:10px 8px!important}.stat b{font-size:12.5px!important}.stat span{font-size:8px!important;line-height:1.25!important}
  .hero-visual{min-height:410px!important}.hero-photo{inset:2px 18px!important;border-radius:28px!important;border-width:5px!important}.float-card{max-width:170px!important;border-radius:16px!important;padding:10px 11px!important}.fc1{left:0!important;top:32px!important}.fc2{right:0!important;bottom:30px!important}
  .class-path{padding:5px 0 34px!important}.class-path-head h2{font-size:20px!important}.class-path-grid{display:flex!important;overflow-x:auto!important;gap:9px!important;padding-bottom:7px!important}.class-chip{min-width:158px!important;min-height:104px!important;border-radius:17px!important}
  section{padding:54px 0!important}.section-head h2,.about-copy h2{font-size:29px!important;line-height:1.08!important;letter-spacing:-1px!important}
  .homework-wrap{padding:10px!important;border-radius:24px!important}.hw-side,.hw-login{border-radius:20px!important;padding:18px!important}.hw-login h3{font-size:22px!important}.hw-login input{min-height:54px!important;font-size:16px!important}.hw-login>.btn{min-height:54px!important}
  .quiz-panel{border-radius:22px!important;padding:16px!important}.quiz-head{display:block!important}.quiz-badge{display:inline-flex!important;margin-top:10px!important}.question{border-radius:17px!important;padding:14px!important}.score-number{font-size:38px!important}
  #teacherResultsPanel,.admin-panel{border-radius:22px!important;padding:12px!important}.teacher-admin-head{border-radius:18px!important;padding:14px!important}.teacher-overview{grid-template-columns:repeat(2,minmax(0,1fr))!important}.teacher-overview-card b,.teacher-stat b{font-size:20px!important}.clean-tabs{display:flex!important;overflow-x:auto!important;padding:5px!important}.clean-tabs .admin-tab{min-width:86px!important}
  .portal-modal{padding:10px!important}.portal-card{border-radius:24px!important;padding:17px!important;max-height:90vh!important}.portal-head h3{font-size:21px!important}
  .mobile-dock{
    left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.90)!important;border:1px solid rgba(20,53,83,.08)!important;
    border-radius:24px!important;padding:7px!important;box-shadow:0 20px 60px rgba(12,43,72,.18)!important;backdrop-filter:blur(22px) saturate(145%)!important
  }
  .mobile-dock a,.mobile-dock button{min-height:52px!important;border-radius:16px!important;color:#718294!important}.mobile-dock button:nth-child(2){background:linear-gradient(135deg,#eef4ff,#f3f1ff)!important;color:#235bd7!important}.mobile-dock span{font-size:19px!important}.mobile-dock b{font-size:9px!important}
  .float-btn{display:none!important}
}