/* Kiến Học Toán — giao diện
   Ý tưởng: góc học tập của học sinh Việt Nam — mực tím, vở ô li, bút dạ quang vàng, bút đỏ chấm điểm. */
@font-face{font-family:"Be Vietnam Pro";src:url(fonts/bevietnampro-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(fonts/bevietnampro-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(fonts/bevietnampro-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(fonts/bevietnampro-700.woff) format("woff");font-weight:700 750;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(fonts/bevietnampro-800.woff) format("woff");font-weight:800 900;font-display:swap}
@font-face{font-family:"Patrick Hand";src:url(fonts/patrickhand.woff) format("woff");font-weight:400;font-display:swap}
:root{
  --bg:#f5f4fa; --surface:#ffffff; --surface-2:#f2f0f9; --ink:#1d1934; --ink-2:#4a4566; --ink-3:#77728f;
  --line:#e4e0f0; --line-2:#cfc9e3;
  --brand:#4527a0; --brand-2:#5b3fd0; --brand-soft:#ebe6fb; --brand-deep:#2f1a73;
  --accent:#ffd23f; --accent-2:#f4bd00; --accent-soft:#fff5cc; --on-accent:#1d1934;
  --pen:#d3302c; --mark-bg:#4527a0;
  --ok:#1d7a47; --ok-soft:#e1f3e8; --bad:#c62828; --bad-soft:#fbe5e4; --warn:#a86400; --warn-soft:#fdf0d8;
  --radar-1:#4527a0; --radar-2:#e09b00;
  --grid:rgba(69,39,160,.09); --grid-strong:rgba(69,39,160,.16);
  --shadow:0 1px 0 rgba(29,25,52,.04),0 8px 24px -12px rgba(29,25,52,.18);
  --on-brand:#ffffff; --r:16px; --r-s:10px;
  --font:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --hand:"Patrick Hand","Comic Sans MS",cursive;
  --serif:"Times New Roman","Noto Serif",Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14111f; --surface:#1c182c; --surface-2:#18142a; --ink:#ece9f8; --ink-2:#bdb7d8; --ink-3:#8d87aa;
    --line:#2b2543; --line-2:#3a3358; --brand:#a894ff; --brand-2:#bcadff; --brand-soft:#28214a; --brand-deep:#1b1338;
    --accent:#ffd23f; --accent-2:#ffdf6e; --accent-soft:#352c10; --on-accent:#1d1934;
    --pen:#ff6a62;
    --ok:#4cc985; --ok-soft:#14301f; --bad:#ff7b72; --bad-soft:#3a1a1c; --warn:#f0b54a; --warn-soft:#352812;
    --radar-1:#a894ff; --radar-2:#ffd23f; --grid:rgba(168,148,255,.08); --grid-strong:rgba(168,148,255,.14);
    --on-brand:#14111f; --shadow:0 1px 0 rgba(0,0,0,.3),0 10px 28px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#14111f; --surface:#1c182c; --surface-2:#18142a; --ink:#ece9f8; --ink-2:#bdb7d8; --ink-3:#8d87aa;
  --line:#2b2543; --line-2:#3a3358; --brand:#a894ff; --brand-2:#bcadff; --brand-soft:#28214a; --brand-deep:#1b1338;
  --accent:#ffd23f; --accent-2:#ffdf6e; --accent-soft:#352c10; --on-accent:#1d1934;
  --pen:#ff6a62;
  --ok:#4cc985; --ok-soft:#14301f; --bad:#ff7b72; --bad-soft:#3a1a1c; --warn:#f0b54a; --warn-soft:#352812;
  --radar-1:#a894ff; --radar-2:#ffd23f; --grid:rgba(168,148,255,.08); --grid-strong:rgba(168,148,255,.14);
  --on-brand:#14111f; --shadow:0 1px 0 rgba(0,0,0,.3),0 10px 28px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
@media (max-width:600px){.wrap{padding:0 16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* vở ô li: ô vuông nhỏ, cứ 4 ô có 1 đường đậm */
.oli{background-color:var(--surface);
  background-image:linear-gradient(var(--grid-strong) 1px,transparent 1px),linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,10px 10px,10px 10px}

/* ---------- logo ---------- */
.mark{width:38px;height:38px;border-radius:11px;background:var(--mark-bg,#4527a0);color:var(--accent);display:grid;place-items:center;flex:none}
.mark svg{width:72%;height:72%}
.mark.sm{width:26px;height:26px;border-radius:8px}
.mark.lg{width:56px;height:56px;border-radius:16px;background:var(--accent);color:var(--brand-deep)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;height:64px}
.logo{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;cursor:pointer;min-width:0}
.logo .t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.logo .t b{font-weight:800;font-size:17px;letter-spacing:.2px;color:var(--brand);white-space:nowrap}
.logo .t small{font-size:12.5px;color:var(--ink-3);font-weight:500;white-space:nowrap}
.top .sp{flex:1}
.hphone{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--accent-soft);color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hphone svg{width:15px;height:15px;color:var(--brand)}
.hphone:hover{background:var(--accent)}
.student{display:flex;align-items:center;gap:8px}
.iconbtn{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;width:38px;height:38px;display:grid;place-items:center;flex:none;color:var(--ink-2)}
.iconbtn:hover{color:var(--brand);border-color:var(--brand)}
@media (max-width:860px){.hphone span{display:none}.hphone{padding:9px}}
@media (max-width:600px){.logo .t small{display:none}.logo .t b{font-size:15.5px}}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--surface);margin-top:40px}
.site-foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;font-size:14px;color:var(--ink-2)}
.f-brand{display:flex;align-items:center;gap:9px}
.f-brand b{color:var(--brand);font-weight:800}
.f-contact{display:flex;gap:16px;align-items:center}
.f-contact a{font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}

/* ---------- đăng nhập ---------- */
.center{display:grid;place-items:center;padding:36px 0}
.auth{width:100%;max-width:880px;display:grid;grid-template-columns:1.05fr 1fr;border-radius:22px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.brandpanel{position:relative;background:var(--brand-deep);color:#f3f0ff;padding:36px 34px;display:flex;flex-direction:column;gap:14px;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px,44px 44px,11px 11px,11px 11px}
.bp-logo{display:flex;align-items:center;gap:14px}
.bp-name{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:.2px;color:#fff}
.bp-saying{font-family:var(--hand);font-size:30px;line-height:1.15;color:var(--accent);margin:18px 0 0;transform:rotate(-2deg);transform-origin:left}
.bp-text{margin:0;color:rgba(243,240,255,.82);font-size:15px;max-width:34ch}
.bp-contact{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bp-contact b{font-size:16px;color:#fff}
.bp-call{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:800;font-size:18px;padding:10px 18px;border-radius:999px;font-variant-numeric:tabular-nums}
.bp-call svg{width:18px;height:18px}
.bp-call:hover{background:#fff}
.auth .login{width:100%;display:flex;flex-direction:column;gap:6px;padding:36px 34px;border:0;border-radius:0;box-shadow:none;background:var(--surface)}
.login h1{margin:0;font-size:26px;font-weight:800}
.login label{font-size:13.5px;color:var(--ink-2);margin-top:10px;font-weight:600}
.login .sub{margin:2px 0 4px;color:var(--ink-3);font-size:14px}
.login input,.form input,.form select,.form textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--surface-2);font-size:16px}
.login input:focus,.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.login .btn{margin-top:16px;padding:12px;font-size:16px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px;margin:12px 0 2px}
.roles>*{border:0;background:none;padding:8px 10px;border-radius:999px;text-align:center;font-weight:700;font-size:15px;color:var(--ink-2);text-decoration:none;cursor:pointer}
.roles>*:hover{color:var(--brand)}
.roles .on{background:var(--brand);color:var(--on-brand);cursor:default}
.roles .on:hover{color:var(--on-brand)}
@media (max-width:760px){
  .center{padding:16px 0}
  .auth{grid-template-columns:1fr;border-radius:18px}
  .brandpanel{padding:24px 22px;gap:8px}
  .bp-name{font-size:24px}.mark.lg{width:46px;height:46px}
  .bp-saying{font-size:24px;margin-top:8px}
  .bp-text{display:none}
  .bp-contact{padding-top:10px;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 14px}
  .bp-call{font-size:16px;padding:8px 14px}
  .auth .login{padding:24px 22px}
}

/* ---------- trang chủ học sinh ---------- */
.hero{margin:26px 0 6px;padding:26px 28px;border-radius:var(--r);border:1px solid var(--line)}
.hero{background-color:var(--surface);
  background-image:linear-gradient(var(--grid-strong) 1px,transparent 1px),linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,10px 10px,10px 10px;background-position:-1px -1px}
.hero h1{font-size:32px;line-height:1.2;margin:0 0 6px;font-weight:800;letter-spacing:-.3px;color:var(--brand)}
.hero p{margin:0;color:var(--ink-2);max-width:62ch}
@media (max-width:600px){.hero{padding:20px 18px;margin-top:16px}.hero h1{font-size:26px}}
.grades{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.grade{position:relative;border:1.5px solid var(--line-2);background:var(--surface);padding:8px 18px;border-radius:999px;font-weight:700;min-width:84px;color:var(--ink-2)}
.grade:hover:not([disabled]){border-color:var(--brand);color:var(--brand)}
.grade.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.grade[disabled]{opacity:.5;cursor:not-allowed}
.grade small{display:block;font-size:10.5px;font-weight:500;opacity:.8;line-height:1}
.bankinfo{font-size:13.5px;color:var(--ink-3);margin:6px 0 0}

.section-t{font-size:20px;letter-spacing:-.1px;color:var(--ink);font-weight:800;margin:34px 0 12px;display:flex;align-items:center;gap:10px}
.section-t::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--accent)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;text-align:left}
.card:hover{border-color:var(--line-2)}
.card h3{margin:0;font-size:18px;line-height:1.3;font-weight:750}
.card p{margin:0;color:var(--ink-2);font-size:14px}
.card .meta{font-size:13px;color:var(--ink-3)}
.card .row{display:flex;gap:8px;align-items:center;margin-top:auto;flex-wrap:wrap}
.card .row.stack{flex-direction:column;align-items:stretch}
.card .row.stack select{flex:none;width:100%}
.card select{flex:1;min-width:0;padding:9px 10px;border-radius:var(--r-s);border:1.5px solid var(--line-2);background:var(--surface-2)}
.card .tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand);align-self:flex-start}
.card .tag.acc{background:var(--accent-soft);color:var(--ink)}
.card.disabled{opacity:.6}
.btn{border:0;border-radius:var(--r-s);padding:10px 16px;font-weight:700;background:var(--brand);color:var(--on-brand);transition:background .15s,transform .05s}
.btn:hover{background:var(--brand-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;background:var(--brand)}
.btn.ghost{background:transparent;color:var(--brand);border:1.5px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--brand);background:var(--brand-soft)}
.btn.acc{background:var(--accent);color:var(--on-accent)}
.btn.acc:hover{background:var(--accent-2)}
.btn.acc[disabled]{background:var(--accent)}
.btn.sm{padding:7px 12px;font-size:14px}
.terms{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.terms .btn{width:100%}

/* ---------- hồ sơ ---------- */
.profile{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
@media (max-width:820px){.profile{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.panel h3{margin:0 0 4px;font-size:17px;font-weight:750}
.panel .sub{color:var(--ink-3);font-size:13.5px;margin:0 0 10px}
.hist{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto}
.hist li{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.hist li:last-child{border-bottom:0}
.hist .sc{font-family:var(--hand);color:var(--pen);font-size:24px;line-height:1;width:50px;text-align:center;font-variant-numeric:tabular-nums}
.hist .ti{flex:1;min-width:0}
.hist .ti b{display:block;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist .ti span{font-size:12.5px;color:var(--ink-3)}
.empty{color:var(--ink-3);font-size:14px;padding:18px 0;text-align:center}

/* ---------- làm bài ---------- */
.exam-head{position:sticky;top:64px;z-index:15;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);padding:12px 0;border-bottom:1px solid var(--line)}
.exam-head .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.exam-head h2{margin:0;font-size:18px;flex:1;min-width:200px;font-weight:750}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:19px;padding:6px 14px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.timer.low{background:var(--bad-soft);color:var(--bad)}
.prog{font-size:14px;color:var(--ink-2)}
.exam-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;padding:20px 0 60px;align-items:start}
@media (max-width:900px){.exam-grid{grid-template-columns:1fr}.navbox{position:static!important;order:-1}}
.part-t{font-weight:800;font-size:16px;margin:20px 0 10px;color:var(--brand)}
.part-t small{font-weight:500;color:var(--ink-3);font-size:13px;margin-left:6px}
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:14px;scroll-margin-top:150px}
.q .qh{display:flex;gap:8px;align-items:baseline;margin-bottom:8px;flex-wrap:wrap}
.q .qn{font-weight:800;color:var(--brand)}
.q .lvl{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3)}
.q .flag{margin-left:auto;border:0;background:none;color:var(--ink-3);font-size:13px;border-radius:6px;padding:2px 6px}
.q .flag.on{color:var(--on-accent);background:var(--accent);font-weight:700}
.qtext{font-family:var(--serif);font-size:18px;line-height:1.6;overflow-wrap:anywhere}
.qtext .c,.sol .c{text-align:center}
.qtext ul,.qtext ol{margin:4px 0;padding-left:22px}
img.fig{max-width:100%;height:auto;background:#fff;border-radius:6px;padding:4px;display:inline-block;vertical-align:middle}
.qtext .katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.opts.one{grid-template-columns:1fr}
@media (max-width:640px){.opts{grid-template-columns:1fr}}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1.5px solid var(--line);background:var(--surface-2);border-radius:var(--r-s);padding:9px 12px;font-family:var(--serif);font-size:17.5px;min-width:0;transition:border-color .12s,background .12s}
.opt:hover:not([disabled]){border-color:var(--brand-2)}
.opt .L{flex:none;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-family:var(--font);font-weight:800;font-size:13.5px;border:1.5px solid var(--line-2);color:var(--ink-2);background:var(--surface)}
.opt .v{min-width:0;overflow-wrap:anywhere;padding-top:1px}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt.sel .L{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .L{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .L{background:var(--bad);border-color:var(--bad);color:#fff}
.tf{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.tf .r{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tf .r:last-child{border-bottom:0}
.tf .k{font-weight:800;color:var(--ink-2)}
.tf .v{font-family:var(--serif);font-size:17.5px;overflow-wrap:anywhere;min-width:0}
.tf .sw{display:flex;gap:6px}
.tf .sw button{border:1.5px solid var(--line-2);background:var(--surface);border-radius:8px;padding:5px 13px;font-weight:700;font-size:14px}
.tf .sw button.on.t{background:var(--ok);border-color:var(--ok);color:#fff}
.tf .sw button.on.f{background:var(--bad);border-color:var(--bad);color:#fff}
.tf .r.right{background:var(--ok-soft)}
.tf .r.wrong{background:var(--bad-soft)}
.tf .key{font-size:12.5px;font-weight:700;margin-left:6px}
@media (max-width:520px){.tf .r{grid-template-columns:24px minmax(0,1fr)}.tf .sw{grid-column:2}}
.sa{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sa input{width:200px;padding:9px 12px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--surface-2);font-size:17px;font-variant-numeric:tabular-nums}
.sa input:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.sa .hint{font-size:13px;color:var(--ink-3)}
.navbox{position:sticky;top:150px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.navbox h4{margin:0 0 10px;font-size:14px;color:var(--ink-2);font-weight:750}
.navgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}
.navgrid button{border:1px solid var(--line-2);background:var(--surface-2);border-radius:8px;height:34px;font-size:13.5px;font-weight:700;padding:0}
.navgrid button.done{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.navgrid button.flagged{box-shadow:inset 0 -4px 0 var(--accent)}
.navgrid button.right{background:var(--ok);border-color:var(--ok);color:#fff}
.navgrid button.wrong{background:var(--bad);border-color:var(--bad);color:#fff}
.navgrid button.part{background:var(--warn);border-color:var(--warn);color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--ink-3);margin-bottom:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.navbox .btn{width:100%}

/* ---------- kết quả: điểm chấm bằng bút đỏ trên giấy ô li ---------- */
.res-top{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;margin:22px 0 16px}
@media (max-width:760px){.res-top{grid-template-columns:1fr}}
.score{position:relative;border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line);color:var(--ink);
  background-color:var(--surface);
  background-image:linear-gradient(var(--grid-strong) 1px,transparent 1px),linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,10px 10px,10px 10px}
.score .big{font-family:var(--hand);color:var(--pen);font-size:86px;line-height:.9;font-variant-numeric:tabular-nums;align-self:flex-start;
  padding:10px 22px 4px 18px;border:3px solid var(--pen);border-radius:52% 48% 55% 45% / 58% 50% 50% 42%;transform:rotate(-5deg);margin:4px 0 8px 4px;animation:penIn .5s ease-out both}
.score .big small{font-size:30px;opacity:.85}
.score .lab{color:var(--ink-2);font-size:14px;margin-top:6px}
.score .rank{margin-top:4px;font-family:var(--hand);color:var(--pen);font-size:26px;line-height:1.1}
@keyframes penIn{from{opacity:0;transform:rotate(-5deg) scale(1.25)}to{opacity:1;transform:rotate(-5deg) scale(1)}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .n{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.kpi .l{font-size:13px;color:var(--ink-3)}
.kpi .bar{height:6px;border-radius:9px;background:var(--line);margin-top:8px;overflow:hidden}
.kpi .bar i{display:block;height:100%;background:var(--brand-2);border-radius:9px}
.radars{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){.radars{grid-template-columns:1fr}}
.radar-box svg{width:100%;height:auto;display:block}
.radar-box .lg{display:flex;gap:14px;font-size:12.5px;color:var(--ink-2);margin-top:4px;flex-wrap:wrap}
.radar-box .lg i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;vertical-align:3px}
.radar-axis{font-size:11.5px;fill:var(--ink-2);font-family:var(--font)}
.radar-val{font-size:10.5px;fill:var(--ink-3);font-family:var(--font);font-variant-numeric:tabular-nums}
.sw-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:820px){.sw-list{grid-template-columns:1fr}}
.sw-list ul{list-style:none;padding:0;margin:0}
.sw-list li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.sw-list li:last-child{border-bottom:0}
.sw-list .pct{font-weight:800;width:48px;text-align:right;font-variant-numeric:tabular-nums}
.sw-list .nm{flex:1;min-width:0}
.recs{display:grid;gap:10px;margin-top:6px}
.rec{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--r-s);padding:12px 14px;background:var(--surface)}
.rec .tx{flex:1;min-width:0}
.rec .tx b{display:block}
.rec .tx span{font-size:13.5px;color:var(--ink-2)}
@media (max-width:560px){.rec{flex-direction:column;align-items:stretch}}
.review-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.review-t .sp{flex:1}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1.5px solid var(--line-2);background:var(--surface);border-radius:999px;padding:5px 13px;font-size:13.5px;font-weight:600}
.filters button.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.verdict{font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px}
.verdict.ok{background:var(--ok-soft);color:var(--ok)}
.verdict.bad{background:var(--bad-soft);color:var(--bad)}
.verdict.part{background:var(--warn-soft);color:var(--warn)}
.verdict.skip{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.keyline{margin-top:10px;font-size:14.5px;color:var(--ink-2)}
.keyline b{color:var(--ok)}
details.sol{margin-top:10px;border-top:1px dashed var(--line-2);padding-top:8px}
details.sol summary{cursor:pointer;color:var(--brand);font-size:14px;font-weight:700}
details.sol div{font-family:var(--serif);font-size:17px;margin-top:6px}
.qsrc{font-size:11.5px;color:var(--ink-3);margin-left:auto}

/* ---------- hộp thoại, thông báo ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(20,14,40,.5);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--surface);border-radius:18px;max-width:520px;width:100%;padding:24px;box-shadow:0 24px 70px rgba(10,6,30,.35);max-height:90vh;overflow:auto}
.modal h3{margin:0 0 6px;font-size:20px;font-weight:800}
.modal p{color:var(--ink-2);margin:0 0 12px}
.modal .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.modal label{font-size:12.5px;color:var(--ink-2);display:block;margin-bottom:3px;font-weight:600}
.modal input[type=number]{width:100%;padding:9px 10px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--surface-2)}
.modal .avail{font-size:12px;color:var(--ink-3);margin-top:2px}
.modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.modal.wide{max-width:980px}
.note{font-size:13.5px;background:var(--warn-soft);color:var(--warn);padding:9px 12px;border-radius:var(--r-s);margin:8px 0}
.note.bad{background:var(--bad-soft);color:var(--bad)}
.foot{color:var(--ink-3);font-size:12.5px;text-align:center;padding:30px 0 10px}
.hidden{display:none!important}
.loading{padding:60px 0;text-align:center;color:var(--ink-3)}
.who-n{display:flex;flex-direction:column;line-height:1.2;text-align:right;margin-right:4px}
.who-n b{font-weight:700}
.who-n small{color:var(--ink-3);font-size:12px}
@media (max-width:600px){.who-n small{display:none}.who-n b{font-size:13px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.info{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.hist li.click{cursor:pointer;border-radius:8px}
.hist li.click:hover{background:var(--surface-2)}
.savest{font-size:13px;color:var(--ink-3)}
.savest.ok{color:var(--ok)}
.savest.bad{color:var(--bad);font-weight:700}
.bars{list-style:none;margin:0;padding:0}
.bars li{padding:7px 0}
.bars .bl{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.bar{height:6px;border-radius:9px;background:var(--line);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand-2);border-radius:9px}
.toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:80;width:min(92vw,460px)}
.toast{background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:12px;box-shadow:var(--shadow);font-size:14.5px}
.toast.bad{background:var(--bad);color:#fff}
.toast.ok{background:var(--ok);color:#fff}

/* ---------- giáo viên ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:20px 0 20px;overflow-x:auto}
.tabs button{border:0;background:none;padding:11px 15px;font-weight:700;color:var(--ink-3);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--brand)}
.tabs button.on{color:var(--brand);border-bottom-color:var(--accent)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}
.form label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:4px;font-weight:600}
.form .full{grid-column:1/-1}
.form textarea{min-height:150px;font-family:var(--font)}
.chk{display:flex;gap:8px;align-items:center;font-size:14.5px}
.chk input{width:auto;accent-color:var(--brand)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.tbl{border-collapse:collapse;width:100%;font-size:14.5px}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th{font-size:12.5px;font-weight:700;color:var(--ink-2);background:var(--surface-2);position:sticky;top:0}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--brand-soft)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:14px}
.prog-mini{display:inline-block;width:80px;height:6px;background:var(--line);border-radius:9px;vertical-align:middle;margin-right:6px;overflow:hidden}
.prog-mini i{display:block;height:100%;background:var(--accent-2)}
.hist-bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:10px}
.hist-bars div{flex:1;background:var(--brand-2);border-radius:5px 5px 0 0;position:relative;min-height:2px}
.hist-bars span{position:absolute;top:-17px;left:0;right:0;text-align:center;font-size:11px;color:var(--ink-2)}
.hist-x{display:flex;gap:6px;font-size:11px;color:var(--ink-3)}
.hist-x span{flex:1;text-align:center}
.lesson-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 14px;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s);padding:10px;background:var(--surface-2)}
.progress{height:10px;background:var(--line);border-radius:9px;overflow:hidden;margin:10px 0}
.progress i{display:block;height:100%;background:var(--ok);width:0;transition:width .2s}
.qmini{font-family:var(--serif);font-size:15.5px;max-height:120px;overflow:hidden;white-space:normal;min-width:320px}
.qmini img.fig{max-height:80px;width:auto!important}
.cards-print{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cards-print div{border:1px dashed #999;border-radius:8px;padding:10px;font-size:13px;break-inside:avoid;color:#000;background:#fff}
.cards-print b{font-size:15px}
@media print{.top,.tabs,.noprint,.site-foot{display:none!important}body{background:#fff}}
/* chỉnh cho điện thoại */
.btn{white-space:nowrap}
.grade.on:hover:not([disabled]){color:var(--on-brand);border-color:var(--brand)}
@media (max-width:600px){
  .top:has(.who-n) .logo .t,.top:has(.who-n) .hphone{display:none}
  .top .wrap{gap:8px}
  .kpi .n{font-size:20px}
  .score .big{font-size:72px}
}

/* ---------- nhiệm vụ hôm nay + sổ câu sai ---------- */
.today{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin-top:16px}
@media (max-width:820px){.today{grid-template-columns:1fr}}
.today h2{margin:0;font-size:20px;font-weight:800}
.today .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.mission,.book{border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px}
.mission{background:var(--brand-deep);color:#f3f0ff;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px}
.mission h2{color:#fff}
.mission p{margin:6px 0 0;color:rgba(243,240,255,.85);font-size:14.5px;max-width:52ch}
.mission .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.mission .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.m-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.streak{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:92px;height:92px;border-radius:50%;background:var(--accent);color:var(--on-accent);text-align:center;transform:rotate(-4deg)}
.streak b{font-family:var(--hand);font-size:40px;line-height:.9}
.streak span{font-size:11px;font-weight:700;line-height:1.15;max-width:70px}
.mission.done .streak{box-shadow:0 0 0 4px rgba(255,210,63,.35)}
.book{background:var(--surface);border:1px solid var(--line)}
.book p{margin:0;color:var(--ink-2);font-size:14px}
.bk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bk-stat{background:var(--surface-2);border-radius:var(--r-s);padding:10px 12px;display:flex;flex-direction:column}
.bk-stat b{font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.bk-stat span{font-size:12.5px;color:var(--ink-3)}
.bk-stat.due{background:var(--accent-soft)}
.bk-stat.due b{color:var(--ink)}
.bk-stat.ok b{color:var(--ok)}
.book .bk-cw{color:var(--pen);font-weight:600;font-size:13.5px}
.book .bk-next{font-size:13.5px;color:var(--ink-3)}
.bknote{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--brand-soft);border-radius:var(--r-s);padding:10px 14px;margin:0 0 6px;font-size:14px;color:var(--ink)}
.booklist{display:grid;gap:10px;margin-top:14px}
.bk-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.bk-item.done{opacity:.7}
.bk-item .qmini{min-width:0;max-height:none;margin-top:8px;font-size:16.5px;line-height:1.55}
.bk-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.bk-meta b{color:var(--ink);font-size:14px}
.bk-meta .sp{flex:1}
.bk-meta .lvl{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.boxes{display:inline-flex;gap:3px}
.boxes i{width:10px;height:10px;border-radius:3px;background:var(--line)}
.boxes i.on{background:var(--ok)}

/* ---------- mức chắc chắn ---------- */
.confrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--ink-3)}
.confrow>span{margin-right:2px}
.cf{border:1.5px solid var(--line-2);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.cf:hover{border-color:var(--brand);color:var(--brand)}
.cf.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.q .rvtag{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
.conftag{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.conftag.cw{background:transparent;border:1.5px solid var(--pen);color:var(--pen);font-family:var(--hand);font-size:15px;font-weight:400;padding:0 9px;transform:rotate(-2deg)}
.confgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:820px){.confgrid{grid-template-columns:1fr 1fr}}
.cq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.cq b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.cq span{font-weight:700;font-size:14px}
.cq small{color:var(--ink-3);font-size:12.5px}
.cq.ok b{color:var(--ok)}
.cq.cw{border:2px solid var(--pen)}
.cq.cw b{color:var(--pen);font-family:var(--hand);font-weight:400;font-size:34px;line-height:1}
.cq.guess b{color:var(--warn)}
.cq.bad b{color:var(--ink-3)}

/* ---------- thăng cấp ---------- */
.hero{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero-tx{flex:1 1 320px;min-width:0}
.lvbadge{position:relative;display:inline-grid;place-items:center;width:64px;height:70px;flex:none}
.lvbadge svg{position:absolute;inset:0;width:100%;height:100%}
.lvbadge .hx{stroke-width:3;stroke-linejoin:round}
.lvbadge b{position:relative;color:#fff;font-weight:800;font-size:24px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.lvbadge.sm{width:34px;height:37px}.lvbadge.sm b{font-size:14px}
.lvbadge.xs{width:24px;height:26px}.lvbadge.xs b{font-size:11px}.lvbadge.xs .hx,.lvbadge.sm .hx{stroke-width:4}
.lvbadge.xl{width:110px;height:120px}.lvbadge.xl b{font-size:44px}
.lvbadge.t0{--lvc:#9a8fd6;--lvs:#d9d3f5}.lvbadge.t1{--lvc:#6a4fd0;--lvs:#c9bdf7}.lvbadge.t2{--lvc:#4527a0;--lvs:#ffd23f}
.lvbadge.t3{--lvc:#17798c;--lvs:#9fe3ef}.lvbadge.t4{--lvc:#1d7a47;--lvs:#9be3b8}.lvbadge.t5{--lvc:#c26a00;--lvs:#ffd23f}
.lvbadge.t6{--lvc:#c62828;--lvs:#ffd23f}.lvbadge.t7{--lvc:#a87900;--lvs:#fff1a8}.lvbadge.t8{--lvc:#1d1934;--lvs:#ffd23f}
.lvcard{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;min-width:280px;max-width:380px;flex:1 1 300px}
.lv-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.lv-tx small{color:var(--ink-3);font-weight:600;font-size:12.5px}
.lv-tx b{font-size:18px;font-weight:800;color:var(--brand);line-height:1.2}
.lv-tx span{font-size:12.5px;color:var(--ink-2)}
.lv-tx .lv-next{color:var(--ink-3)}
.lv-tx .lv-rank{color:var(--ink);font-weight:700}
.xpbar{height:8px;border-radius:9px;background:var(--line);overflow:hidden;margin:3px 0 1px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-2),var(--accent-2));border-radius:9px}
@media (max-width:600px){.lvcard{max-width:none}}

.fame{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.fame-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px}
.fame-me{font-size:13.5px;color:var(--ink-2);font-weight:600}
.ranks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ranks li{display:grid;grid-template-columns:30px auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 6px;border-radius:10px}
.ranks li:nth-child(odd){background:var(--surface-2)}
.ranks .rk{font-weight:800;font-size:16px;color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums}
.ranks .nm{display:flex;flex-direction:column;min-width:0}
.ranks .nm b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranks .nm small{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranks .xpv{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ranks .xpv small{font-weight:600;color:var(--ink-3)}
.ranks li.top1 .rk,.ranks li.top2 .rk,.ranks li.top3 .rk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:#fff}
.ranks li.top1 .rk{background:#d4a400}.ranks li.top2 .rk{background:#8f97a8}.ranks li.top3 .rk{background:#b06a3b}
.ranks li.top1{background:var(--accent-soft)}
.fame-public{width:100%;max-width:880px;margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.fame-public h2{margin:0 0 10px;font-size:18px;font-weight:800}

.xpgain{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--brand-deep);color:#f3f0ff;border-radius:var(--r);padding:14px 20px;margin:0 0 16px}
.xg-n{font-family:var(--hand);font-size:40px;line-height:1;color:var(--accent)}
.xg-n small{font-family:var(--font);font-size:14px;color:rgba(243,240,255,.85)}
.xg-lv{display:flex;gap:12px;align-items:center;flex:1;min-width:240px}
.xg-lv>div{flex:1;display:flex;flex-direction:column;gap:2px}
.xg-lv b{color:#fff}
.xg-lv small{color:rgba(243,240,255,.75);font-size:12.5px}
.xpgain .xpbar{background:rgba(255,255,255,.18)}

.lvup{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px}
.lvup h3{font-size:26px!important;margin:6px 0 0!important}
.lvup p{margin:0!important}
.lvup .acts{justify-content:center!important;width:100%}
.lvup .lvbadge{animation:lvPop .6s cubic-bezier(.2,1.6,.4,1) both}
.lvup-burst{position:absolute;top:62px;left:50%;width:0;height:0}
.lvup-burst i{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--accent-2);transform:rotate(var(--a)) translateY(0);animation:burst .9s ease-out .15s both}
.lvup-burst i:nth-child(3n){background:var(--brand-2)}.lvup-burst i:nth-child(3n+1){background:var(--pen)}
@keyframes lvPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes burst{from{transform:rotate(var(--a)) translateY(0);opacity:1}to{transform:rotate(var(--a)) translateY(-90px);opacity:0}}
.lvcell{display:inline-flex;gap:8px;align-items:center}

/* ---------- tự đăng ký ---------- */
.auth .login select{width:100%;padding:11px 13px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--surface-2);font-size:16px}
.auth .login select:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.auth .login .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth .login .two label{display:block}
.reg-link{margin:14px 0 0;text-align:center;font-size:14.5px;color:var(--ink-2)}
.linkbtn{border:0;background:none;padding:0;color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.linkbtn:hover{color:var(--brand-2)}
.regdone{align-items:flex-start}
.regdone p{margin:4px 0;color:var(--ink-2)}
.regcode{font-family:var(--hand);font-size:52px;line-height:1;color:var(--pen);border:3px solid var(--pen);border-radius:52% 48% 55% 45%/58% 50% 50% 42%;padding:10px 26px 6px;margin:6px 0 10px;transform:rotate(-3deg);letter-spacing:1px}
.tabbadge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--pen);color:#fff;font-size:12px;font-weight:800;margin-left:4px;vertical-align:1px}
.panel.pending{margin-bottom:16px;border-color:var(--accent-2)}
select.mini{padding:6px 8px;border:1.5px solid var(--line-2);border-radius:8px;background:var(--surface-2);font-size:14px}

/* ---------- giao đề theo ID ---------- */
.tagbox{border:1px dashed var(--line-2);border-radius:var(--r-s);padding:12px 14px;background:var(--surface-2)}
.tag-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 14px;max-height:260px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px}
.tag-row{align-items:baseline;padding:3px 0;font-size:14px}
.tag-row b{font-size:13.5px}
.tag-row small{color:var(--ink-3);font-size:12px}
.prev-q{border-bottom:1px solid var(--line);padding:12px 0}
.prev-q .qmini{max-height:none;min-width:0;margin-top:6px}
.prev-o{margin:6px 0 0;padding-left:26px;font-family:var(--serif);font-size:15.5px}
.tag-list .tag-row{display:flex;gap:4px 8px;flex-wrap:wrap;margin:0}

/* ---------- biểu đồ & thống kê ---------- */
.ktip{position:fixed;z-index:100;display:none;max-width:260px;background:var(--ink);color:var(--bg);font-size:13px;line-height:1.4;padding:7px 10px;border-radius:8px;pointer-events:none;box-shadow:var(--shadow)}
.ktip b{font-weight:800}
.muted{color:var(--ink-3);font-size:13.5px}
.panel h3 + .muted{margin:-4px 0 10px}
.hbars{display:flex;flex-direction:column;gap:9px}
.hb{display:grid;grid-template-columns:minmax(120px,2fr) 3fr auto;gap:10px;align-items:center;border-radius:8px;padding:2px 4px;outline-offset:1px}
.hb:hover{background:var(--surface-2)}
.hb-l{min-width:0}
.hb-l span{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-l small{display:block;font-size:12px;color:var(--ink-3)}
.hb-t{height:12px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.hb-t i{display:block;height:100%;border-radius:0 4px 4px 0}
.hb-t i.ok,.chart .bar.ok,.chart-legend .sw.ok{background:var(--ok);fill:var(--ok)}
.hb-t i.warn,.chart .bar.warn,.chart-legend .sw.warn{background:var(--warn);fill:var(--warn)}
.hb-t i.bad,.chart .bar.bad,.chart-legend .sw.bad{background:var(--bad);fill:var(--bad)}
.hb-t i.brand{background:var(--brand-2)}
.hb-v{font-weight:800;font-variant-numeric:tabular-nums;font-size:14px;text-align:right;min-width:86px}
.hb-v .st{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.hb-v .st.ok{background:var(--ok-soft);color:var(--ok)}.hb-v .st.warn{background:var(--warn-soft);color:var(--warn)}.hb-v .st.bad{background:var(--bad-soft);color:var(--bad)}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-2)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .base{stroke:var(--line-2);stroke-width:1.5}
.chart .ax{fill:var(--ink-3);font-size:12px;font-family:var(--font)}
.chart .hit{cursor:default;outline:none}
.chart .hit .bg{fill:transparent}
.chart .hit:hover .bg,.chart .hit:focus .bg{fill:var(--surface-2)}
.chart .ln{fill:none;stroke:var(--brand-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--brand-2);stroke:var(--surface);stroke-width:2}
.chart .hz{fill:transparent}
.chart .xh{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.chart .hit:hover .xh,.chart .hit:focus .xh{opacity:1}
.chart .hit:hover .dot,.chart .hit:focus .dot{r:6}
.spark{display:inline-block;vertical-align:middle}
.spark svg path{fill:none;stroke:var(--brand-2);stroke-width:2;stroke-linejoin:round}
.spark svg circle{fill:var(--brand-2)}
.filters-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters-row > div{display:flex;flex-direction:column;gap:4px;min-width:160px}
.filters-row .grow{flex:1;min-width:200px}
.filters-row label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.st-kpis{margin-bottom:14px}
.kpi.warn .n{color:var(--warn)}
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.st-grid h3{margin:0 0 6px}
@media (max-width:820px){.st-grid{grid-template-columns:1fr}}
@media (max-width:560px){.hb{grid-template-columns:1fr auto}.hb-t{grid-column:1 / -1;order:3}.hb-v{min-width:0}}
.sc-pill{display:inline-block;min-width:42px;text-align:center;font-weight:800;padding:2px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.sc-pill.ok{background:var(--ok-soft);color:var(--ok)}.sc-pill.warn{background:var(--warn-soft);color:var(--warn)}.sc-pill.bad{background:var(--bad-soft);color:var(--bad)}
.weakcell{display:flex;gap:5px;flex-wrap:wrap}
.weakcell .wk{font-size:12px;font-weight:700;background:var(--bad-soft);color:var(--bad);padding:2px 8px;border-radius:999px;white-space:nowrap}
td .pill + .pill{margin-left:4px}

/* ---------- bài bổ sung ---------- */
.remblock{border:2px solid var(--warn);background:var(--warn-soft);border-radius:var(--r);padding:16px 18px;margin:18px 0 6px}
.remblock h2{margin:0;font-size:19px}
.remblock .rb-head p{margin:2px 0 10px;color:var(--ink-2);font-size:14px}
.rb-item{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:var(--r-s);padding:10px 14px;margin-top:8px}
.rb-item .tx{flex:1;min-width:0}
.rb-item .tx b{display:block}
.rb-item .tx span{font-size:13px;color:var(--ink-3)}
.remcard{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border:2px solid var(--warn);background:var(--warn-soft);border-radius:var(--r);padding:16px 18px;margin:16px 0}
.remcard .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--warn);color:var(--surface);font-weight:900;font-size:20px;flex:none}
.remcard .tx{flex:1;min-width:220px}
.remcard h3{margin:0 0 4px;font-size:18px}
.remcard p{margin:0 0 4px}
.remcard.done{border-color:var(--ok);background:var(--ok-soft)}
.remcard.done .ic{background:var(--ok)}
.filters-row select,.review-t select{padding:9px 10px;border-radius:var(--r-s);border:1.5px solid var(--line-2);background:var(--surface-2);color:var(--ink);font:inherit;font-size:14.5px}
.wide-bars .hb{grid-template-columns:minmax(220px,1.3fr) 3fr auto}
.hb-v .st{white-space:nowrap}
@media (max-width:560px){.wide-bars .hb{grid-template-columns:1fr auto}}

/* báo lỗi câu hỏi */
.q .repbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:12px;border-radius:999px;padding:2px 10px;cursor:pointer;white-space:nowrap}
.q .repbtn:hover:not(:disabled){border-color:var(--bad);color:var(--bad)}
.q .repbtn.done{color:var(--ok);border-color:transparent;background:transparent;cursor:default}
.rep-kinds{display:grid;gap:6px;margin:10px 0}
.rep-pick{margin:6px 0 10px}
.rep-pick > label{display:block;margin-bottom:6px}
.rep-mc{display:flex;gap:8px;flex-wrap:wrap}
.rep-mc .opt.sm{width:auto;min-width:48px;justify-content:center;padding:8px 14px}
.rep-tf{display:flex;align-items:center;gap:8px;margin:4px 0}
.rep-tf b{width:22px}
.rep-tf button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 14px;color:var(--ink)}
.rep-tf button.t.on{background:var(--ok);border-color:var(--ok);color:#fff}
.rep-tf button.f.on{background:var(--bad);border-color:var(--bad);color:#fff}
.rep-pick input,.modal textarea{width:100%}
/* giáo viên: câu bị báo lỗi */
.repcard{margin-bottom:16px}
.rc-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:13px;color:var(--ink-2);margin-bottom:10px}
.rc-head b{color:var(--ink)}
.rc-src{margin-left:auto;font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.rc-opts{display:grid;gap:6px;margin:10px 0}
.rc-opt{display:grid;grid-template-columns:28px 1fr minmax(110px,180px);gap:10px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:10px}
.rc-opt.key{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.rc-opt.key .L{color:var(--ok)}.rc-opt.key .L::after{content:"✓";margin-left:2px}
.rc-opt .L{white-space:nowrap}
.rc-opt .L{font-weight:750}
.rc-bar{position:relative;height:18px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.rc-bar i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.rc-bar em{position:relative;font-style:normal;font-size:12px;padding-left:6px;line-height:18px}
.rc-tf{font-size:13px}
.rc-sa,.rc-meta{font-size:13.5px;margin:8px 0}
.rc-meta{color:var(--ink-3)}
.rc-reps{list-style:none;padding:0;margin:10px 0;display:grid;gap:8px;font-size:13.5px}
.rc-reps li{padding:8px 10px;background:var(--surface-2);border-radius:10px}
.rc-note{margin-top:4px;color:var(--ink-2)}
.rc-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.rc-edit{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;min-width:36px;padding:6px 10px;font-weight:700}
.kbtn.on{background:var(--ok);border-color:var(--ok);color:#fff}
.kgrp{display:inline-flex;gap:4px;align-items:center;margin-right:8px}
.rc-btns{display:flex;flex-wrap:wrap;gap:8px}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
@media (max-width:640px){.rc-opt{grid-template-columns:24px 1fr}.rc-opt .rc-bar,.rc-opt .rc-tf{grid-column:2}.rc-src{margin-left:0}}

/* video ôn tập */
.vframe{position:relative;width:100%;max-width:340px;aspect-ratio:9/16;margin:0 auto;border-radius:14px;overflow:hidden;background:#000}
.vframe.wide{max-width:none;aspect-ratio:16/9}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.vhead h3{margin:0}
.vwrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:start}
.vwrap.one{grid-template-columns:1fr}
.vcap{display:flex;flex-direction:column;gap:2px;margin-top:10px;font-size:13.5px;text-align:center}
.vcap span{color:var(--ink-3)}
.vcap a{color:var(--brand);font-weight:650}
.vidlist{display:grid;gap:6px;max-height:min(62vh,600px);overflow:auto}
.vidlist button{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;color:var(--ink);cursor:pointer}
.vidlist button.on{border-color:var(--brand);background:var(--brand-soft)}
.vidlist button b{display:block;font-size:13.5px}
.vidlist button small{color:var(--ink-3);font-size:12px}
.vidlist .vi{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:12px}
.vbtn{white-space:nowrap}
.vchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.vcard{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;color:var(--ink)}
.vcard:hover{border-color:var(--brand)}
.vcard .vi{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff}
.vcard b{display:block;font-size:14px}
.vcard small{color:var(--ink-3)}
@media (max-width:720px){.vwrap{grid-template-columns:1fr}.vidlist{max-height:none}}
.rb-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.remcard .rb-acts{flex:none}
.vslot:empty{display:none}
.vtip{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.vch{margin:16px 0 8px;font-size:14px;color:var(--ink-2)}
.vprev{margin-top:12px}
.vprev .vframe{max-width:260px;margin:0}

/* ---------- thi thử ĐGNL: đoạn văn / bảng số liệu dùng chung ---------- */
.part-big{font-weight:800;font-size:18px;margin:28px 0 4px;padding:10px 14px;border-radius:10px;background:var(--surface-2);border-left:4px solid var(--accent)}
.passage{margin:12px 0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);overflow:hidden}
.passage .ps-h{font-size:13px;font-weight:700;color:var(--ink-3);padding:8px 14px;border-bottom:1px solid var(--line-2);text-transform:uppercase;letter-spacing:.03em}
.passage .ps-b{padding:12px 16px;line-height:1.65;overflow-x:auto}
.passage ul,.passage ol{margin:6px 0;padding-left:22px}
table.tb{border-collapse:collapse;margin:8px auto;font-size:14.5px}
table.tb td{border:1px solid var(--line-2);padding:5px 10px;text-align:center;vertical-align:middle}
table.tb tr:first-child td{font-weight:700;background:var(--surface)}
.card.dgnl .row.stack select{min-width:0}

/* ---------- chống gian lận ---------- */
body.nocopy .exam-grid, body.nocopy .exam-head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.nocopy input, body.nocopy textarea { -webkit-user-select: text; user-select: text; }
.guard { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.guard.on { color: var(--bad); font-weight: 700; }
.flagchips { display: flex; flex-wrap: wrap; gap: 4px; }
.flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); white-space: nowrap; }
.flag.hi { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.flagbox { border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); background: color-mix(in srgb, var(--bad) 6%, transparent);
  border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; }
.flagbox ul { margin: 6px 0 0; padding-left: 20px; }
.flagbox li { margin: 2px 0; }
tr.sus td { background: color-mix(in srgb, var(--bad) 5%, transparent); }

/* ---------- làm bài từng câu ---------- */
.one-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 8px;flex-wrap:wrap}
.one-sec{font-weight:800;color:var(--brand);font-size:15px}
.one-pos{font-size:13px;font-weight:700;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.one-nav{display:flex;align-items:center;gap:12px;margin:14px 0 30px;flex-wrap:wrap}
.one-nav .onehint{flex:1;min-width:160px;font-size:13px;color:var(--ink-3);text-align:center}
.one-nav .btn{min-width:150px}
.navgrid button.cur{outline:2.5px solid var(--accent);outline-offset:1px}
.navgrid button.locked{opacity:.35;cursor:not-allowed}
@media (max-width:640px){.one-nav .btn{min-width:0;flex:1}.one-nav .onehint{order:3;flex-basis:100%}}
@media (max-width:900px){.exam-grid .navbox{order:2}.exam-grid .navgrid{grid-template-columns:repeat(8,1fr)}}

/* ================================================================ LỚP HỌC LIVE */
.lv-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.08em;padding:4px 11px;border-radius:999px;background:#e5243b;color:#fff;white-space:nowrap}
.lv-badge i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:lvpulse 1.4s infinite}
.lv-badge.soon{background:var(--accent);color:var(--on-accent)}
.lv-badge.off{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
@keyframes lvpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.lv-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e5243b;margin-right:6px;vertical-align:1px}
.lv-chip{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}

/* trang chủ */
.lv-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:18px 0 6px;padding:22px 26px;border-radius:var(--r);
  color:#fff;background:radial-gradient(120% 140% at 0% 0%,#7b5cff 0%,var(--brand) 45%,var(--brand-deep) 100%);box-shadow:0 14px 40px -18px rgba(69,39,160,.7)}
.lv-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,210,63,.18)}
.lv-hero-l{flex:1;min-width:220px;position:relative;z-index:1}
.lv-hero h2{margin:10px 0 6px;font-size:22px;line-height:1.25}
.lv-hero p{margin:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;opacity:.92;font-size:14px}
.lv-hero .lv-chip{background:rgba(255,255,255,.16);color:#fff}
.lv-join{position:relative;z-index:1;background:var(--accent);color:var(--on-accent);font-size:16px;padding:13px 26px;border:0;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.lv-join:hover{background:var(--accent-2)}
.lv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.lv-card,.lv-tcard{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.lv-card.near{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-soft)}
.lv-card.past{opacity:.8}
.lv-card.on{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.14)}
.lv-card.on .lv-date{background:#e5484d;color:#fff;gap:5px}
.lv-card.on .lv-date i{width:9px;height:9px;border-radius:50%;background:#fff;animation:lvdot 1.4s ease-in-out infinite}
.lv-card.on .lv-date span{margin:0;font-size:12.5px}
.lv-card .lv-join,.lv-card .lv-join:is(*){flex:none;width:auto;font-size:14px;padding:9px 16px;box-shadow:none}
@keyframes lvdot{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lv-card.on .lv-date i{animation:none}}
.lv-date{flex:none;width:52px;height:56px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand)}
.lv-date b{font-size:21px;line-height:1}.lv-date span{font-size:11.5px;font-weight:700;margin-top:3px}
.lv-card-tx,.lv-tcard-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lv-card-tx b,.lv-tcard-tx b{font-size:15px}
.lv-card-tx span,.lv-tcard-tx span{font-size:13px;color:var(--ink-3)}
.lv-left{color:var(--brand)!important;font-weight:700}

/* phòng học */
.lv-room{padding-top:16px;padding-bottom:40px}
.lv-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.lv-top-t{flex:1;min-width:0}
.lv-top h1{margin:0;font-size:21px;line-height:1.25}
.lv-meta{display:flex;align-items:center;gap:10px;margin-top:5px;font-size:13px;color:var(--ink-3)}
.lv-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.lv-stage{border-radius:var(--r);overflow:hidden;background:#0d0a1a;box-shadow:0 18px 50px -24px rgba(20,10,60,.7)}
.lv-video{position:relative;aspect-ratio:16/9;background:#000}
.lv-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lv-video.sm{border-radius:var(--r-s);overflow:hidden}
.lv-video.empty{display:flex;align-items:center;justify-content:center;text-align:center;color:#c9c3e8;font-size:14px;background:#1b1533}
.lv-wm{position:absolute;z-index:2;pointer-events:none;user-select:none;color:#fff;opacity:.28;font-weight:700;font-size:13px;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.8);transition:left 2.5s ease,top 2.5s ease;white-space:nowrap}
.lv-wait{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;color:#fff;
  background:radial-gradient(90% 120% at 50% 0%,#5b3fd0 0%,#2f1a73 55%,#140c33 100%)}
.lv-wait h2{margin:4px 0 0;font-size:24px;max-width:640px}
.lv-wait p{margin:0;opacity:.85}.lv-wait .sub{color:#cfc8f3;font-size:13px}
.lv-wait .lv-chip{background:rgba(255,255,255,.14);color:#fff}
.lv-count{display:flex;gap:10px;margin:8px 0}
.lv-count div{min-width:70px;padding:10px 8px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column}
.lv-count b{font-size:32px;line-height:1;font-variant-numeric:tabular-nums}.lv-count span{font-size:11.5px;opacity:.8;margin-top:4px}
.lv-wait.ended{background:radial-gradient(90% 120% at 50% 0%,#2d6a4f 0%,#163a2b 60%,#0b1f17 100%)}
.lv-wait-ic{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:28px}
.lv-stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:8px 0 6px}
.lv-stats div{min-width:120px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.1);display:flex;flex-direction:column}
.lv-stats b{font-size:24px}.lv-stats span{font-size:12px;opacity:.8}
.lv-under{margin-top:12px}
.lv-info{display:flex;flex-direction:column;gap:6px}.lv-info p{margin:0}
.lv-side{position:sticky;top:76px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 92px)}
.lv-side-h{display:flex;align-items:baseline;gap:8px;padding:0 4px}
.lv-pane{display:flex;flex-direction:column;min-height:0;flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lv-chat{flex:1;min-height:220px;max-height:52vh;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.lv-chat.t{max-height:360px;min-height:160px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);margin:8px 0}
.lv-empty{margin:auto;color:var(--ink-3);font-size:13px}
.lv-msg{max-width:88%;padding:7px 11px;border-radius:14px 14px 14px 4px;background:var(--surface-2);border:1px solid var(--line);font-size:14px}
.lv-msg.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--brand-soft);border-color:transparent}
.lv-msg.t{max-width:100%;background:var(--accent-soft);border-color:var(--accent-2)}
.lv-msg.hid{opacity:.45;text-decoration:line-through}
.lv-msg-h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);margin-bottom:2px}
.lv-msg-h b{color:var(--ink-2)}
.lv-msg-h time{margin-left:auto}
.lv-msg-b{white-space:pre-wrap;word-break:break-word}
.lv-tbadge{font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;background:var(--brand);color:#fff}
.lv-hide{border:0;background:none;color:var(--brand);font-size:12px;cursor:pointer;padding:0}
.lv-quick{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px;border-top:1px solid var(--line)}
.lv-quick button{font-size:12.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.lv-quick button:hover{border-color:var(--brand);color:var(--brand)}
.lv-send{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.lv-send input{flex:1;min-width:0;padding:9px 12px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--surface-2);font-size:15px}
.lv-tchat .lv-send{padding:0;border:0}

/* câu hỏi nhanh (học sinh) */
.lv-poll{position:relative;overflow:hidden;padding:14px 16px 16px;border-radius:var(--r);background:var(--surface);border:2px solid var(--accent-2);box-shadow:0 14px 34px -18px rgba(244,189,0,.8)}
.lv-poll.pop{animation:lvpop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes lvpop{0%{transform:scale(.9);opacity:0}100%{transform:none;opacity:1}}
.lv-poll-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;color:var(--warn);margin-bottom:8px}
.lv-poll-st{font-size:12.5px;color:var(--ink-3);font-weight:600}
.lv-ring{width:44px;height:44px;transform:rotate(-90deg)}
.lv-ring circle{fill:none;stroke-width:4}.lv-ring .bg{stroke:var(--line)}.lv-ring .fg{stroke:var(--brand);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.lv-ring text{transform:rotate(90deg);transform-origin:20px 20px;font-size:13px;font-weight:800;fill:var(--ink)}
.lv-ring.low .fg{stroke:var(--bad)}
.lv-poll-q{font-size:15px;margin-bottom:10px;line-height:1.55}
.lv-opts{display:flex;flex-direction:column;gap:8px}
.lv-opts.letters{display:grid;grid-template-columns:repeat(4,1fr)}
.lv-opt{position:relative;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface-2);cursor:pointer;font-size:14.5px;color:var(--ink);overflow:hidden}
.lv-opts.letters .lv-opt{justify-content:center;padding:16px 0;flex-direction:column;gap:4px}
.lv-opts.letters .lv-opt .L{width:42px;height:42px;font-size:20px}
.lv-opt .L{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--surface);border:1.5px solid var(--line-2);position:relative;z-index:1}
.lv-opt-t{position:relative;z-index:1;flex:1}
.lv-opt:not(:disabled):hover{border-color:var(--brand)}
.lv-opt.sel{border-color:var(--brand);background:var(--brand-soft)}.lv-opt.sel .L{background:var(--brand);color:#fff;border-color:var(--brand)}
.lv-opt.ok{border-color:var(--ok);background:var(--ok-soft)}.lv-opt.ok .L{background:var(--ok);color:#fff;border-color:var(--ok)}
.lv-opt.bad{border-color:var(--bad);background:var(--bad-soft)}.lv-opt.bad .L{background:var(--bad);color:#fff;border-color:var(--bad)}
.lv-opt:disabled{cursor:default;color:var(--ink)}
.lv-bar{position:absolute;left:0;top:0;bottom:0;z-index:0;width:100%}.lv-bar i{display:block;height:100%;background:color-mix(in srgb,var(--brand) 12%,transparent);transition:width .6s}
.lv-pc{position:relative;z-index:1;margin-left:auto;font-weight:800;font-size:13px;color:var(--ink-2)}
.lv-opts.letters .lv-pc{margin:0}
.lv-res{margin-top:10px;padding:9px 12px;border-radius:10px;font-weight:700;font-size:14px;background:var(--surface-2)}
.lv-res.ok{background:var(--ok-soft);color:var(--ok)}.lv-res.bad{background:var(--bad-soft);color:var(--bad)}.lv-res.wait{background:var(--brand-soft);color:var(--brand)}
.lv-confetti{position:absolute;inset:0;pointer-events:none}
.lv-confetti i{position:absolute;top:-10px;width:7px;height:12px;border-radius:2px;animation:lvfall 1.6s ease-in forwards}
@keyframes lvfall{to{top:110%;transform:rotate(720deg)}}

/* giáo viên */
.lv-guide summary{cursor:pointer;font-weight:700}
.lv-guide ol{margin:10px 0 0;padding-left:22px;line-height:1.7}
.lv-tlist{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lv-tcard.live{border-color:#e5243b;box-shadow:0 0 0 3px rgba(229,36,59,.12)}
.lv-tcard.ended{opacity:.85}
.lv-tcard-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lv-cls{display:flex;gap:6px 16px;flex-wrap:wrap}
.lv-cgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start;margin-top:12px}
.lv-row2{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px;align-items:stretch;margin-bottom:14px}
.lv-ctrl{display:flex;flex-direction:column;gap:10px}
.lv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lv-kpis div{padding:10px 6px;border-radius:12px;background:var(--surface);border:1px solid var(--line);text-align:center;display:flex;flex-direction:column}
.lv-kpis b{font-size:20px}.lv-kpis span{font-size:11.5px;color:var(--ink-3)}
.lv-go{background:#e5243b;color:#fff;border:0;font-size:16px;padding:14px}.lv-go:hover{background:#c81d31}
.lv-stop{background:var(--ink);color:var(--bg);border:0;padding:12px}
.lv-tpoll{margin-bottom:14px;border:2px solid var(--accent-2)}
.lv-tpoll.revealed{border-color:var(--ok)}
.lv-tpoll-h{display:flex;align-items:center;gap:12px;font-weight:800;margin-bottom:8px}
.lv-tleft{color:var(--warn);font-variant-numeric:tabular-nums}
.lv-ans{font-size:14px;font-weight:600;color:var(--ink-2)}.lv-ans b{font-size:20px;color:var(--brand)}
.lv-tbars{display:flex;flex-direction:column;gap:7px;margin:10px 0}
.lv-tbar{display:grid;grid-template-columns:30px minmax(0,1.2fr) minmax(0,2fr) 40px;gap:10px;align-items:center}
.lv-tbar .L{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--surface-2);border:1.5px solid var(--line-2)}
.lv-tbar.ok .L{background:var(--ok);color:#fff;border-color:var(--ok)}
.lv-tbar-o{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-tbar-b{height:14px;border-radius:999px;background:var(--surface-2);overflow:hidden}.lv-tbar-b i{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width .5s}
.lv-tbar.ok .lv-tbar-b i{background:var(--ok)}
.lv-tbar>b{text-align:right}
.lv-tpoll-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lv-tok{font-weight:700;color:var(--ok)}
.lv-ltabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px;margin:8px 0 10px;width:fit-content}
.lv-ltabs button{border:0;background:none;padding:7px 14px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.lv-ltabs button.on{background:var(--surface);color:var(--brand);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.lv-secs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.chipbtn{border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:600;cursor:pointer}
.chipbtn.on{border-color:var(--brand);background:var(--brand);color:#fff}
.lv-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 12px;max-width:420px}
.lv-key{padding:14px 0;border-radius:14px;border:2px solid var(--line-2);background:var(--surface-2);font-size:22px;font-weight:800;cursor:pointer;color:var(--ink)}
.lv-key.on{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.lv-launch textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--surface-2);font-size:15px}
.lv-typeo{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.lv-typerow{display:flex;align-items:center;gap:8px}
.lv-typerow input[type=text]{flex:1;padding:8px 10px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--surface-2);font-size:14.5px}
.lv-bsel{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.lv-bsel select{padding:8px 10px;border-radius:var(--r-s);border:1.5px solid var(--line-2);background:var(--surface-2);max-width:100%}
.lv-bank{max-height:460px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.lv-bq{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.lv-bq-m{display:flex;align-items:center;gap:8px;margin-bottom:4px}.lv-bq-m .btn{margin-left:auto}
.lv-bq .prev-o li.ok{color:var(--ok);font-weight:700}
.lv-hist{margin-top:6px}
.lv-hrow{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:14px}
.lv-hq{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.lv-people h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lv-plist{display:flex;flex-direction:column;max-height:420px;overflow-y:auto}
.lv-p{display:grid;grid-template-columns:12px minmax(0,1fr) auto 48px 36px;gap:8px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.lv-p .dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.lv-p.on .dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.lv-p.left .dot{background:var(--warn)}
.lv-p.no{opacity:.55}
.lv-p-n{display:flex;flex-direction:column;min-width:0}.lv-p-n b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lv-p-n span{font-size:12px;color:var(--ink-3)}
.lv-p-s{font-size:12.5px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:1000px){.lv-grid,.lv-cgrid{grid-template-columns:1fr}.lv-side{position:static;max-height:none}.lv-row2{grid-template-columns:1fr}}
@media (max-width:640px){.lv-hero{padding:18px}.lv-hero h2{font-size:19px}.lv-join{width:100%}.lv-count b{font-size:24px}.lv-count div{min-width:56px}.lv-wait h2{font-size:19px}.lv-wait{aspect-ratio:auto;min-height:260px}.lv-cards{grid-template-columns:1fr}.lv-tbar{grid-template-columns:30px 0 minmax(0,1fr) 34px}.lv-tbar-o{display:none}}
.tabs button{padding:11px 11px;font-size:14.5px}
.lv-closed{padding:12px;text-align:center;font-size:13px;color:var(--ink-3);border-top:1px solid var(--line)}.lv-chat .lv-empty{margin:auto}


/* ================================================================ DANH HIỆU & THẺ HỒ SƠ */
.lvbadge .hx-in{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.4}
.lvbadge .ico path,.lvbadge .ico circle{fill:none;stroke:#fff;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round}
.lvbadge b{margin-top:14px}
.lvbadge.sm .ico,.lvbadge.xs .ico,.lvbadge.sm .hx-in,.lvbadge.xs .hx-in{display:none}
.lvbadge.sm b,.lvbadge.xs b{margin-top:0}
.lvbadge.md{width:46px;height:51px}.lvbadge.md b{font-size:15px;margin-top:11px}
.lvbadge.lg{width:86px;height:94px}.lvbadge.lg b{font-size:30px;margin-top:22px}
.lvbadge.xl b{margin-top:28px}
.lvbadge{filter:drop-shadow(0 4px 8px rgba(20,10,60,.25));transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.lvbadge.t5,.lvbadge.t6{filter:drop-shadow(0 0 8px color-mix(in srgb,#ff8a00 55%,transparent))}
.lvbadge.t7{filter:drop-shadow(0 0 10px rgba(255,210,63,.75))}
.lvbadge.t8{filter:drop-shadow(0 0 12px rgba(155,92,255,.85))}
.lvbadge.t8::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.35),transparent 65%);z-index:-1}
.lv-crown{position:absolute;top:-17%;left:50%;width:44%;height:22%;transform:translateX(-50%);
  background:linear-gradient(#ffe07a,#e0a400);clip-path:polygon(0 100%,0 30%,25% 60%,50% 0,75% 60%,100% 30%,100% 100%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.lvbadge.sm .lv-crown,.lvbadge.xs .lv-crown{top:-22%}
@keyframes lvspin{to{transform:rotate(360deg)}}

/* bảng màu từng bậc */
.pt0{--a:#a79ff0;--b:#5d54b8;--c:#3c3484}.pt1{--a:#8a6dff;--b:#4527a0;--c:#2c1670}.pt2{--a:#22b8d6;--b:#0b5f7a;--c:#073d50}
.pt3{--a:#2fbf71;--b:#0f6a3d;--c:#08452a}.pt4{--a:#5b7cff;--b:#1d2c8f;--c:#111a5c}.pt5{--a:#ff9a1f;--b:#b84a00;--c:#7a2f00}
.pt6{--a:#ff4d4d;--b:#8e0e1e;--c:#5c0712}.pt7{--a:#ffd23f;--b:#b37400;--c:#6e4400}.pt8{--a:#9b5cff;--b:#2a1a4f;--c:#120b26}

.pcard{position:relative;overflow:hidden;isolation:isolate;flex:1 1 340px;max-width:430px;min-width:290px;padding:18px 20px 14px;border-radius:20px;color:#fff;cursor:pointer;
  background:radial-gradient(120% 140% at 0% 0%,var(--a) 0%,var(--b) 55%,var(--c) 100%);
  box-shadow:0 18px 40px -20px var(--b),inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .35s cubic-bezier(.2,1.2,.4,1),box-shadow .35s}
.pcard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.4px);background-size:16px 16px;mask-image:linear-gradient(160deg,#000,transparent 70%)}
.pcard:hover{transform:translateY(-2px);box-shadow:0 26px 50px -22px var(--b),inset 0 0 0 1px rgba(255,255,255,.22)}

.pcard:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pc-shine{position:absolute;top:-50%;left:-60%;width:40%;height:200%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:rotate(18deg);animation:pcshine 6s ease-in-out infinite}
@keyframes pcshine{0%,62%{left:-60%}100%{left:130%}}
.pc-spark i{position:absolute;bottom:-6px;left:var(--x);width:5px;height:5px;border-radius:50%;background:#fff6c8;box-shadow:0 0 6px #ffd23f;opacity:0;animation:pcspark 3.6s ease-in var(--d) infinite}
@keyframes pcspark{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-150px);opacity:0}}
.pc-top{position:relative;display:flex;gap:16px;align-items:center}
.pc-id{display:flex;flex-direction:column;min-width:0}
.pc-lv{font-size:11.5px;font-weight:800;letter-spacing:.12em;opacity:.85}
.pc-title{font-size:24px;line-height:1.15;font-weight:850;letter-spacing:-.2px;text-shadow:0 2px 10px rgba(0,0,0,.25);margin:2px 0}
.pc-name{font-size:13px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-xp{position:relative;margin:14px 0 10px}
.pc-xp span{font-size:12.5px;opacity:.92}
.pc-bar{height:10px;border-radius:99px;background:rgba(0,0,0,.25);overflow:hidden;margin-bottom:5px;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.pc-bar i{position:relative;display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#fff7c2,#ffd23f);transition:width 1.3s cubic-bezier(.2,.8,.2,1);overflow:hidden}

@keyframes pcbar{to{transform:translateX(100%)}}
.pc-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pc-stats div{display:flex;flex-direction:column;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.12);backdrop-filter:blur(4px)}
.pc-stats b{font-size:19px;font-weight:850;font-variant-numeric:tabular-nums}
.pc-stats span{font-size:11.5px;opacity:.85}
.pc-foot{position:relative;margin-top:10px;font-size:12.5px;font-weight:700;opacity:.9}
.pt7 .pc-title,.pt7 .pc-lv,.pt7 .pc-name,.pt7 .pc-xp span,.pt7 .pc-foot,.pt7 .pc-stats{color:#2b1a00;text-shadow:none}
.pt7 .pc-stats div{background:rgba(255,255,255,.3)}

/* hành trình danh hiệu */
.tj-head h3{margin:0 0 4px}
.tj{list-style:none;margin:12px 0 4px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}
.tj li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);
  animation:rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms)}
.tj-tx{display:flex;flex-direction:column}.tj-tx b{font-size:15.5px}.tj-tx span{font-size:12.5px;color:var(--ink-3)}
.tj-st{font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.tj-done .tj-st{color:var(--ok)}
.tj-now{border:2px solid var(--brand);background:var(--brand-soft);box-shadow:0 8px 20px -14px var(--brand)}
.tj-now .tj-st{color:var(--brand)}
.tj-lock .lvbadge{filter:grayscale(1) opacity(.45)}
.tj-lock .tj-tx b{color:var(--ink-3)}

.fame-note{margin:10px 2px 0;font-size:12.5px;color:var(--ink-3)}
.lvup.pt7 .lvbadge,.lvup.pt8 .lvbadge,.lvup.pt6 .lvbadge,.lvup.pt5 .lvbadge{animation:lvPop .6s cubic-bezier(.2,1.6,.4,1) both,lvglow 2s ease-in-out .6s infinite}
@keyframes lvglow{50%{filter:drop-shadow(0 0 18px var(--a))}}

/* ================================================================ PHẢN HỒI THAO TÁC */
.btn{transition:transform .15s,box-shadow .2s,background-color .2s}
.btn:not(:disabled):active{transform:scale(.97)}
.card{transition:border-color .2s}.card:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.ranks li.top1 .rk{box-shadow:0 0 0 3px rgba(212,164,0,.22)}
@media (max-width:600px){.pcard{max-width:none;min-width:0}.pc-title{font-size:21px}.lvbadge.lg{width:72px;height:79px}.lvbadge.lg b{font-size:25px;margin-top:18px}}
/* ================================================================ TRANG VỞ: LỜI CHÀO + VIỆC CẦN LÀM
   Ý tưởng: phần đầu trang là một trang vở ô li có lề đỏ; lời chào viết tay bằng mực tím,
   việc cần làm là những dòng có ô vuông, khi xong hết thì có một dấu tích đỏ như thầy chấm bài. */
.hero.nb{position:relative;align-items:flex-start;padding:30px 30px 26px 74px}
.hero.nb::before{content:"";position:absolute;left:52px;top:0;bottom:0;width:2px;background:color-mix(in srgb,var(--pen) 55%,transparent)}
.hero.nb .hero-tx{display:flex;flex-direction:column;gap:4px;flex:1 1 380px;min-width:0}
.nb-greet{font-family:var(--hand)!important;font-weight:400!important;font-size:44px!important;line-height:1.05!important;letter-spacing:0!important;color:var(--brand)!important;
  margin:0 0 4px!important;animation:nbwrite 1.1s steps(28,end) both}
@keyframes nbwrite{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.todo{max-width:600px}
.todo-h{margin:0 0 10px;font-family:var(--hand);font-size:22px;line-height:1.3;color:var(--ink-2);animation:rise .5s .9s both}
.todo-h b{color:var(--pen);font-weight:400}
.todo-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--grid-strong)}
.todo-i{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 6px 11px 2px;cursor:pointer;
  border-bottom:1px solid var(--grid-strong);animation:rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(1.05s + var(--i) * 110ms)}
.todo-box{width:22px;height:22px;border:2px solid var(--brand);border-radius:4px;background:var(--surface);transition:background-color .15s}
.todo-i:hover .todo-box,.todo-i:focus-visible .todo-box{background:var(--accent-soft)}
.todo-i:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.todo-tx{display:flex;flex-direction:column;min-width:0}
.todo-tx b{font-size:15.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-tx small{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-i.urgent small{color:var(--pen);font-weight:600}
.todo-i.urgent .todo-box,.todo-i.rem .todo-box{border-color:var(--pen)}
.todo-i.live .todo-box{border-color:#e5243b;background:#e5243b;animation:lvpulseBox 1.4s infinite}
@keyframes lvpulseBox{0%{box-shadow:0 0 0 0 rgba(229,36,59,.5)}70%{box-shadow:0 0 0 7px rgba(229,36,59,0)}100%{box-shadow:0 0 0 0 rgba(229,36,59,0)}}
.todo-go{font-size:13.5px;font-weight:700;color:var(--brand);padding:6px 12px;border-radius:999px;border:1.5px solid var(--brand);white-space:nowrap;transition:background-color .15s,color .15s}
.todo-i:hover .todo-go,.todo-i:focus-visible .todo-go{background:var(--brand);color:var(--on-brand)}
.todo-i.live .todo-go,.todo-i.urgent .todo-go{background:var(--accent);border-color:var(--accent-2);color:var(--on-accent)}
.todo.clear .todo-h{display:flex;gap:14px;align-items:center;font-family:var(--font);font-size:15px}
.todo.clear .todo-h b{display:block;color:var(--ink);font-weight:400;font-family:var(--hand);font-size:26px}
.todo.clear .todo-h span span{color:var(--ink-3);font-size:13.5px}
.todo-done{flex:none;width:58px;height:48px}
.todo-done svg{width:100%;height:100%}
.todo-done path{fill:none;stroke:var(--pen);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;animation:nbtick .7s .4s ease-out forwards}
@keyframes nbtick{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:700px){
  .hero.nb{padding:22px 16px 18px 40px}.hero.nb::before{left:26px}
  .nb-greet{font-size:34px!important}.todo-h{font-size:19px}
  .todo-i{grid-template-columns:22px minmax(0,1fr);gap:10px}.todo-go{grid-column:2;justify-self:start;margin-top:2px;padding:4px 10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.nb-greet,.todo-h,.todo-i,.todo-done path,.todo-i.live .todo-box{animation:none!important;stroke-dashoffset:0!important;clip-path:none!important}}
.pc-lv{font-size:13px;font-weight:600;letter-spacing:0;opacity:.88}
.pc-foot{font-weight:600}
.pc-more{position:relative;display:inline-block;margin-top:6px;font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;opacity:.9}
.lv-badge{letter-spacing:0;font-size:12.5px}

/* ===================== MÁY TÍNH CẦM TAY ===================== */
.khc-open svg{width:18px;height:18px;flex:none}
.khc-open{display:inline-flex;align-items:center;gap:6px}
@media (max-width:640px){.khc-open span{display:none}.khc-open{padding:8px 9px}}
.khc{--kb:#1d2033;--kb2:#262a40;--kf:#33384f;--kf-t:#f1f2f8;--kn:#e4e5ec;--kn-t:#191b28;--ks:#f2c14e;--ka:#ff8a98;--lcd:#cbd5c1;--lcd-t:#18210f;
  position:fixed;right:24px;bottom:16px;z-index:45;width:372px;max-height:calc(100vh - 24px);overflow-y:auto;scrollbar-width:none;border-radius:22px;background:linear-gradient(180deg,var(--kb2),var(--kb));
  box-shadow:0 30px 60px -20px rgba(10,8,30,.55),0 0 0 1px rgba(255,255,255,.06) inset;color:var(--kf-t);font-family:var(--font);
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .18s ease,transform .18s ease;outline:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.khc.show{opacity:1;transform:none}
.khc[hidden]{display:none}
.khc-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 12px 0 18px;cursor:grab}
.khc-bar:active{cursor:grabbing}
.khc-grip{font-size:12.5px;font-weight:600;color:#9da1bb}
.khc-x{background:none;border:0;color:#c9cce0;font:600 13px var(--font);padding:6px 10px;border-radius:8px;cursor:pointer}
.khc-x:hover{background:rgba(255,255,255,.08)}
.khc-x:focus-visible,.khc .k:focus-visible,.khc .pd:focus-visible,.khc button:focus-visible{outline:2px solid var(--ks);outline-offset:2px}
.khc-body{padding:2px 16px 16px}
.khc-brand{display:flex;align-items:baseline;gap:8px;margin:2px 2px 8px}
.khc-brand b{font-family:var(--hand);font-weight:400;font-size:21px;color:var(--ks);letter-spacing:.01em}
.khc-brand span{font-size:12px;color:#8e93ad}
.khc-screen{background:linear-gradient(180deg,#d3dcc9,var(--lcd));color:var(--lcd-t);border-radius:10px;padding:6px 10px 7px;
  box-shadow:0 0 0 5px #11131f,0 0 0 6px #3a3f58,inset 0 2px 6px rgba(0,0,0,.18);margin:6px 6px 12px}
.khc-ind{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;height:14px;opacity:.9}
.khc-ind .ci{opacity:.13}.khc-ind .ci.on{opacity:1}
.khc-ind .ci-mode{margin-left:auto;font-weight:600;font-size:10.5px;opacity:.75}
.khc-lcd{height:118px;display:flex;flex-direction:column;justify-content:space-between;gap:2px;overflow:hidden;font-size:19px;line-height:1.25}
.khc-hint{font-size:11px;line-height:1.3;min-height:15px;opacity:.72;border-top:1px solid rgba(24,33,15,.15);padding-top:3px;margin-top:3px}
/* màn hình: các dòng */
.c-line{white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2px 1px}
.c-line::-webkit-scrollbar{display:none}
.c-in{min-height:30px;flex:1}
.c-small{font-size:14px;opacity:.85;flex:none}
.c-out{text-align:right;font-size:24px;white-space:nowrap;overflow-x:auto;scrollbar-width:none;font-weight:500}
.c-out::-webkit-scrollbar{display:none}
.c-lab,.c-pl{font-size:14px;margin-right:6px;opacity:.8;font-weight:600}
.c-solve{display:flex;justify-content:space-between;align-items:center}
.c-sub{text-align:right;font-size:13px;opacity:.8}
.c-prompt{font-size:21px;flex:1;display:flex;align-items:center}
.c-err{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.c-err b{font-size:18px}.c-err span{font-size:12px;opacity:.75}
.c-title{font-size:13px;font-weight:700;opacity:.85;flex:none}
.c-hint{font-size:12px;opacity:.75}
.c-vars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px 10px;font-size:13px;overflow:auto}
.c-var b{font-weight:700;margin-right:4px}
.c-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;height:100%}
.c-mi,.c-li{all:unset;cursor:pointer;box-sizing:border-box;border-radius:6px}
.c-mi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid rgba(24,33,15,.22);padding:3px;text-align:center}
.c-mi:hover,.c-li:hover{background:rgba(24,33,15,.08)}
.c-mic{font-size:15px;font-weight:700;white-space:pre;line-height:1}
.c-min{font-size:10.5px;line-height:1.15}
.c-list{display:flex;flex-direction:column;gap:1px;overflow:auto;flex:1}
.c-li{display:flex;gap:8px;align-items:center;font-size:14px;padding:3px 4px}
.c-li b{width:18px;height:18px;border-radius:4px;background:var(--lcd-t);color:var(--lcd);display:grid;place-items:center;font-size:11px;flex:none}
.c-grid{display:grid;gap:2px 4px;font-size:15px;align-items:center;overflow:auto;flex:1;align-content:start}
.c-gh{font-size:11px;font-weight:700;text-align:center;opacity:.7}
.c-cell{border-bottom:1px dotted rgba(24,33,15,.35);text-align:right;padding:1px 3px;white-space:nowrap;overflow-x:auto;scrollbar-width:none;min-height:24px;cursor:pointer}
.c-cell::-webkit-scrollbar{display:none}
.c-cell.on{background:var(--lcd-t);color:var(--lcd);border-radius:3px}
.c-cell.on .m-empty{border-color:var(--lcd)}
.c-cell.on .m-cur{background:var(--lcd)}
.c-res{overflow:auto;flex:1;display:flex;flex-direction:column;gap:1px;scrollbar-width:thin}
.c-rl{display:flex;align-items:center;gap:4px;font-size:18px;white-space:nowrap}
.c-rl .c-pl{min-width:46px}
.c-two .c-rl{font-size:16px;justify-content:space-between}
.c-note{font-size:12px;opacity:.75;margin-top:2px;white-space:normal;line-height:1.3}
.c-form{display:flex;flex-direction:column;gap:4px;flex:1}
.c-fr{display:flex;align-items:center;white-space:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:4px;padding:1px 3px;font-size:18px}
.c-fr::-webkit-scrollbar{display:none}
.c-fr .c-pl{flex:none}
.c-fr:not(.on){opacity:.6}
.c-table{overflow:auto;flex:1;font-size:13.5px;font-variant-numeric:tabular-nums;scrollbar-width:thin}
.c-tr{display:grid;grid-template-columns:1fr 1.3fr;gap:6px;padding:1px 3px;border-radius:3px;cursor:pointer}
.c-table.two .c-tr{grid-template-columns:.9fr 1.2fr 1.2fr}
.c-stat .c-tr{grid-template-columns:22px 1fr 1fr}
.c-tr span{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-th{position:sticky;top:0;background:var(--lcd);font-weight:700;font-size:11.5px;cursor:default}
.c-tr.on{background:var(--lcd-t);color:var(--lcd)}
.c-stat .c-tr span.on{background:var(--lcd-t);color:var(--lcd);border-radius:3px;overflow-x:auto;text-overflow:clip}
.c-stat .c-rn{font-size:11px;opacity:.6;text-align:left}
/* hiển thị toán dạng tự nhiên */
.m-row{display:inline-flex;align-items:center;white-space:nowrap}
.m-c{display:inline-block}
.m-op{margin:0 .12em}
.m-fnn{margin-right:.03em}
.m-x10 span{font-size:.75em}
.m-empty{min-width:.62em;min-height:.95em;border:1px dashed rgba(24,33,15,.55);border-radius:2px;margin:0 .06em;justify-content:center}
.m-cur{display:inline-block;width:2px;height:1.08em;background:var(--lcd-t);margin:0 -1px;animation:mcur 1s steps(1) infinite;vertical-align:middle}
@keyframes mcur{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.m-cur{animation:none}}
.m-frac{display:inline-flex;flex-direction:column;align-items:stretch;vertical-align:middle;margin:0 .1em;font-size:.86em;text-align:center}
.m-num{display:flex;justify-content:center;border-bottom:1.5px solid currentColor;padding:0 .12em .04em}
.m-den{display:flex;justify-content:center;padding:.06em .12em 0}
.m-dd{font-size:.72em}
.m-sqrt{display:inline-flex;align-items:stretch}
.m-sqrt svg{width:.62em;flex:none;margin-right:-1px;overflow:visible}
.m-rad{display:inline-flex;align-items:center;border-top:1.5px solid currentColor;padding:.1em .1em 0 .06em}
.m-root{display:inline-flex;align-items:flex-start}
.m-idx{font-size:.6em;margin-right:-.4em;margin-top:.05em;position:relative;z-index:1}
.m-sup{display:inline-flex;font-size:.68em;align-self:flex-start;margin-top:-.15em;margin-left:.04em}
.m-sub{display:inline-flex;font-size:.68em;align-self:flex-end;margin-bottom:-.2em}
.m-abs{display:inline-flex;border-left:1.5px solid currentColor;border-right:1.5px solid currentColor;padding:0 .14em;margin:0 .08em}
.m-grp{display:inline-flex;align-items:center}
.m-at{display:inline-flex;border-left:1.5px solid currentColor;padding-left:.12em;margin-left:.05em;align-self:stretch;align-items:flex-end}
.m-big{display:inline-flex;flex-direction:column;align-items:center;margin-right:.1em;line-height:1}
.m-big .m-hi,.m-big .m-lo{font-size:.56em;display:inline-flex}
.m-big .m-sym{font-size:1.3em;line-height:.95}
.m-int .m-sym{font-style:italic}
.m-dxs{margin-left:.15em}
/* phím */
.khc-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:0 2px 8px}
.khc-tl{display:flex;gap:8px}.khc-tr{display:flex;justify-content:flex-end}
.khc-tl .kw,.khc-tr .kw{width:62px}
.khc-pad{position:relative;width:118px;height:66px;border-radius:40px;background:#2c3047;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 0 #11131f}
.pd{position:absolute;border:0;background:none;color:#d4d7ea;font-size:12px;cursor:pointer;display:grid;place-items:center;border-radius:12px}
.pd:hover{background:rgba(255,255,255,.07)}
.pd:active{background:rgba(255,255,255,.14)}
.pd-U{left:34px;right:34px;top:1px;height:26px}.pd-D{left:34px;right:34px;bottom:1px;height:26px}
.pd-L{left:4px;top:12px;bottom:12px;width:38px}.pd-R{right:4px;top:12px;bottom:12px;width:38px}
.khc-fn{display:grid;grid-template-columns:repeat(6,1fr);gap:2px 7px;margin-bottom:8px}
.khc-num{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px 8px}
.kw{display:flex;flex-direction:column;min-width:0}
.kt{display:flex;justify-content:space-between;align-items:flex-end;height:14px;font-size:9.5px;font-weight:700;line-height:1;gap:2px;padding:0 1px;white-space:nowrap}
.kt-s{color:var(--ks)}.kt-a{color:var(--ka)}
.kt .kl{display:inline-flex;align-items:center}
.k{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:9px;font:600 13px var(--font);
  background:var(--kf);color:var(--kf-t);height:28px;box-shadow:0 3px 0 #12141f,inset 0 1px 0 rgba(255,255,255,.1);transition:transform .05s,box-shadow .05s}
.k.down,.k:active{transform:translateY(2px);box-shadow:0 1px 0 #12141f,inset 0 1px 0 rgba(255,255,255,.06)}
.khc-num .k{height:38px;font-size:19px;font-weight:600;background:var(--kn);color:var(--kn-t);box-shadow:0 3px 0 #8b8ea3,inset 0 1px 0 #fff}
.khc-num .k.down,.khc-num .k:active{box-shadow:0 1px 0 #8b8ea3}
.khc-num .k.k-del,.khc-num .k.k-ac{background:#e0574b;color:#fff;font-size:15px;box-shadow:0 3px 0 #8f2c24,inset 0 1px 0 rgba(255,255,255,.3)}
.khc-num .k.k-eq{background:var(--ks);color:#1c1606;box-shadow:0 3px 0 #9c7716,inset 0 1px 0 rgba(255,255,255,.5)}
.khc-num .kw:nth-child(n+4):nth-child(-n+5) .k,.khc-num .kw:nth-child(n+9):nth-child(-n+10) .k,.khc-num .kw:nth-child(n+14):nth-child(-n+15) .k{font-size:20px}
.khc-num .kw:nth-child(18) .k,.khc-num .kw:nth-child(19) .k{font-size:15px}
.k-shift{color:var(--ks)}.k-alpha{color:var(--ka)}
.k-shift,.k-alpha,.k-menu{font-size:11.5px;letter-spacing:0}
.k-shift.on{background:var(--ks);color:#1c1606}
.k-alpha.on{background:var(--ka);color:#2a0b10}
.khc.is-shift .kt-s{text-shadow:0 0 8px rgba(242,193,78,.7)}
.khc.is-alpha .kt-a{text-shadow:0 0 8px rgba(255,138,152,.7)}
.kl sup,.kl sub{font-size:.7em;line-height:0;display:inline-flex}
.kl sup{align-self:flex-start}
.kb{display:inline-block;width:.62em;height:.72em;border:1px solid currentColor;border-radius:1.5px;margin:0 .06em;opacity:.85}
.kb.sm{width:.5em;height:.6em}
.kfr{display:inline-flex;flex-direction:column;gap:2px;align-items:center}
.kfr .kb{width:.6em;height:.5em}
.kfr .kfl{display:block;width:.95em;height:1.5px;background:currentColor}
@media (max-width:640px){
  .khc{left:0;right:0;bottom:0;width:auto;max-width:440px;margin:0 auto;border-radius:20px 20px 0 0;max-height:100dvh;overflow-y:auto;transform:translateY(30px)}
  .khc-body{padding:2px 12px calc(14px + env(safe-area-inset-bottom))}
  .khc-bar{cursor:default}
  .khc-brand{display:none}
  .khc-bar{padding-top:6px}
  .khc-lcd{height:112px}
  .khc-num .k{height:42px}
  .k{height:30px}
  .khc-pad{height:60px}.pd-U,.pd-D{height:22px}.pd-L,.pd-R{top:10px;bottom:10px}
  .khc-top{margin-bottom:4px}
}
@media (max-height:700px) and (max-width:640px){.khc-brand{display:none}.khc-lcd{height:112px}.khc-num .k{height:40px}.k{height:28px}.khc-top{margin-bottom:4px}.khc-pad{height:64px}.pd-U,.pd-D{height:24px}.pd-L,.pd-R{top:10px;bottom:10px}}
.c-ovl{display:inline-block;border-top:1.5px solid currentColor;line-height:1;padding-top:1px}

/* =====================================================================
   GIAO DIỆN 2026: Modern EdTech. Lớp phủ lên các kiểu cũ, không đổi cấu trúc HTML.
   Mã màu: tím chàm (thương hiệu) + vàng (điểm nhấn). Chiều sâu bằng 3 mức đổ bóng.
   ===================================================================== */
:root{
  --grad-brand:linear-gradient(135deg,#6a4be0 0%,#4527a0 52%,#2f1a73 100%);
  --grad-night:radial-gradient(120% 90% at 0% 0%,#5b3fd0 0%,rgba(91,63,208,0) 55%),radial-gradient(90% 80% at 100% 100%,#7a2fb8 0%,rgba(122,47,184,0) 60%),#23125e;
  --sh-1:0 1px 2px rgba(29,25,52,.05),0 1px 1px rgba(29,25,52,.03);
  --sh-2:0 1px 2px rgba(29,25,52,.05),0 10px 24px -14px rgba(52,30,140,.28);
  --sh-3:0 2px 6px rgba(29,25,52,.06),0 26px 50px -22px rgba(52,30,140,.42);
  --ring:0 0 0 3px color-mix(in srgb,var(--brand-2) 28%,transparent);
  --ease:cubic-bezier(.2,.75,.2,1);
  --glass:color-mix(in srgb,var(--surface) 78%,transparent);
  --r:18px; --r-s:11px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 1px 2px rgba(0,0,0,.4),0 12px 28px -14px rgba(0,0,0,.7);--sh-3:0 2px 6px rgba(0,0,0,.4),0 28px 56px -22px rgba(0,0,0,.8);
  --grad-brand:linear-gradient(135deg,#bcadff 0%,#a894ff 50%,#8d74f5 100%);--glass:color-mix(in srgb,var(--surface) 72%,transparent)}}
:root[data-theme="dark"]{
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 1px 2px rgba(0,0,0,.4),0 12px 28px -14px rgba(0,0,0,.7);--sh-3:0 2px 6px rgba(0,0,0,.4),0 28px 56px -22px rgba(0,0,0,.8);
  --grad-brand:linear-gradient(135deg,#bcadff 0%,#a894ff 50%,#8d74f5 100%);--glass:color-mix(in srgb,var(--surface) 72%,transparent)}

h1,h2,h3{letter-spacing:-.015em}
::selection{background:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--brand-2);outline-offset:2px;border-radius:6px}

/* ---------- header kính mờ ---------- */
.top{background:var(--glass);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom-color:transparent;transition:box-shadow .25s var(--ease),border-color .25s}
.top.scrolled{box-shadow:0 8px 24px -16px rgba(29,25,52,.35);border-bottom-color:var(--line)}
.top .wrap{transition:height .25s var(--ease)}
.top.scrolled .wrap{height:58px}
.logo .mark{background:var(--grad-brand);box-shadow:0 6px 14px -6px rgba(69,39,160,.6);transition:transform .3s var(--ease)}
.logo:hover .mark{transform:rotate(-8deg) scale(1.05)}
.hphone,.iconbtn,.who-n+.btn{transition:background .18s,color .18s,border-color .18s,transform .18s var(--ease)}
.iconbtn:hover{transform:translateY(-1px)}
.navtoggle{display:none}
.navtoggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.navtoggle path{transition:transform .25s var(--ease),opacity .2s;transform-origin:12px 12px}
.top.navopen .navtoggle .l1{transform:translateY(5px) rotate(45deg)}
.top.navopen .navtoggle .l2{opacity:0}
.top.navopen .navtoggle .l3{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:700px){
  .top.has-who:not(.has-umenu) .navtoggle{display:grid}
  .top.has-who:not(.has-umenu) .student{position:absolute;top:calc(100% + 8px);right:12px;left:12px;flex-direction:column;align-items:stretch;gap:10px;padding:16px;
    background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-3);
    opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;visibility:hidden;transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s .25s}
  .top.has-who:not(.has-umenu).navopen .student{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s var(--ease),transform .25s var(--ease)}
  .top.has-who:not(.has-umenu) .student .who-n{display:flex !important;flex-direction:column;align-items:flex-start;text-align:left;max-width:none;padding:0 2px 12px;border-bottom:1px solid var(--line)}
  .top.has-who:not(.has-umenu) .student .who-n small{display:block !important;font-size:13px}
  .top.has-who:not(.has-umenu) .student .who-n b{font-size:17px;white-space:normal;max-width:none}
  .top.has-who:not(.has-umenu) .logo .t{display:flex !important}
  .top.has-who:not(.has-umenu) .student .btn{width:100%;justify-content:center;padding:11px}
  .top.has-who:not(.has-umenu) .student .khc-open span{display:inline}
  .top .wrap{position:relative}
}

/* ---------- nút: chuyển màu, nâng nhẹ, nhấn lún, đang xử lí ---------- */
.btn{position:relative;background:var(--grad-brand);background-size:140% 140%;background-position:0 0;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px rgba(69,39,160,.7);
  transition:background-position .4s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),color .15s,border-color .15s;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn:hover{background:var(--grad-brand);background-size:140% 140%;background-position:100% 100%;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 22px -10px rgba(69,39,160,.85)}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 3px 8px -6px rgba(69,39,160,.8)}
.btn[disabled],.btn[disabled]:hover{transform:none;background:var(--grad-brand);box-shadow:none}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--brand-soft);border-color:var(--brand);box-shadow:var(--sh-2)}
.btn.acc{background:linear-gradient(135deg,#ffe170,#ffd23f 45%,#f4bd00);color:var(--on-accent);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 6px 16px -8px rgba(196,140,0,.8)}
.btn.acc:hover{background:linear-gradient(135deg,#ffe170,#ffd23f 45%,#f4bd00);filter:brightness(1.04);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 22px -10px rgba(196,140,0,.9)}
.btn.is-loading{color:transparent !important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2.5px solid currentColor;border-color:var(--on-brand) var(--on-brand) transparent transparent;animation:spin .7s linear infinite}
.btn.ghost.is-loading::after{border-color:var(--brand) var(--brand) transparent transparent}
.btn.acc.is-loading::after{border-color:var(--on-accent) var(--on-accent) transparent transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- ô nhập ---------- */
.login input,.form input,.form select,.form textarea,.card select,input.mini,select.mini{transition:border-color .15s,box-shadow .2s,background .15s}
.login input:focus,.form input:focus,.form select:focus,.form textarea:focus,.card select:focus{box-shadow:var(--ring)}

/* ---------- thẻ & khung: chiều sâu, nâng nhẹ khi rê chuột ---------- */
.panel,.kpi,.tbl-wrap{box-shadow:var(--sh-1);border-color:color-mix(in srgb,var(--line) 80%,transparent)}
.card,.lv-card{box-shadow:var(--sh-1);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s}
.card:hover,.lv-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:color-mix(in srgb,var(--brand-2) 30%,var(--line))}
.kpi{position:relative;overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.kpi::before{content:"";position:absolute;left:16px;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--grad-brand)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.kpi .n{letter-spacing:-.02em}
.section-t::before{background:linear-gradient(180deg,#ffe170,var(--accent-2))}

/* ---------- thanh tab: vạch chạy, mờ hai mép khi tràn ---------- */
.tabs{position:relative;scrollbar-width:none;gap:2px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border-bottom:0;padding:12px 15px;border-radius:10px 10px 0 0;transition:color .2s,background .2s}
.tabs button:hover{background:color-mix(in srgb,var(--brand-soft) 60%,transparent)}
.tabs button.on{border-bottom:0}
.tabs-bar{position:absolute;left:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#ffe170,var(--accent-2));transition:transform .35s var(--ease),width .35s var(--ease),opacity .2s;pointer-events:none}
.tabs.fade-r{mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.tabs.fade-l{mask-image:linear-gradient(90deg,transparent,#000 48px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px)}
.tabs.fade-l.fade-r{mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}

/* ---------- bảng ---------- */
.tbl tbody tr td{transition:background .15s}
.tbl tbody tr:hover td{background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
.tbl tr.click:hover td{background:var(--brand-soft)}

/* ---------- chuyển trang & hiện dần khi cuộn ---------- */
#app.pg-in{animation:pgIn .32s var(--ease) both}
@keyframes pgIn{from{opacity:0}to{opacity:1}}
.rv{opacity:0;transform:translateY(16px)}
.rv.rv-in{opacity:1;transform:none;transition:opacity .55s var(--ease) var(--rv-d,0ms),transform .6s var(--ease) var(--rv-d,0ms)}
.card.rv.rv-in:hover,.lv-card.rv.rv-in:hover{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s}

/* ---------- hộp thoại & thông báo ---------- */
.modal-bg{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .2s var(--ease) both}
.modal{animation:popIn .28s var(--ease) both;box-shadow:var(--sh-3),0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
.modal-bg.out{animation:fadeOut .17s ease both}
.modal-bg.out .modal{animation:popOut .17s ease both}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes popOut{to{opacity:0;transform:translateY(6px) scale(.98)}}
.toast{animation:toastIn .32s var(--ease) both;box-shadow:var(--sh-3);display:flex;align-items:center;gap:10px}
.toast::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.toast.ok::before{background:#4cc985}
.toast.bad::before{background:#fff}
.toast.out{animation:toastOut .22s ease both}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}

/* ---------- đang tải ---------- */
.loading{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:14px;font-weight:600}
.loading::before{content:"";width:34px;height:34px;border-radius:50%;border:3px solid var(--brand-soft);border-top-color:var(--brand);border-right-color:var(--accent-2);animation:spin .8s linear infinite}

/* ---------- trang đăng nhập: nền chuyển màu + khung kính ---------- */
body.page-auth{background:
  radial-gradient(60% 50% at 12% 8%,color-mix(in srgb,#7b5cf0 22%,transparent),transparent 70%),
  radial-gradient(50% 45% at 92% 18%,color-mix(in srgb,#ffd23f 22%,transparent),transparent 70%),
  radial-gradient(70% 60% at 70% 100%,color-mix(in srgb,#5b3fd0 16%,transparent),transparent 70%),var(--bg)}
body.page-auth .top:not(.scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.page-auth .center{padding:48px 0 30px}
.auth{max-width:960px;border-radius:28px;box-shadow:var(--sh-3);border:1px solid color-mix(in srgb,#fff 50%,transparent);background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.auth .login{background:transparent;padding:44px 40px}
.login h1{font-size:30px}
.brandpanel{background:var(--grad-night);overflow:hidden;isolation:isolate;padding:42px 40px;min-height:540px}
.brandpanel::before{opacity:.5}
.brandpanel>*:not(.bp-sky){position:relative;z-index:1}
.bp-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.bp-g{position:absolute;color:#fff;font-family:var(--serif);font-style:italic;font-weight:600;opacity:.13;white-space:nowrap;
  transform:translate(calc(var(--px,0) * var(--dz) * 1px),calc(var(--py,0) * var(--dz) * 1px));transition:transform .6s var(--ease)}
.bp-g:nth-child(1){left:72%;top:8%;font-size:64px;--dz:46}
.bp-g:nth-child(2){left:84%;top:40%;font-size:44px;--dz:30}
.bp-g:nth-child(3){left:60%;top:30%;font-size:30px;--dz:18;opacity:.18}
.bp-g:nth-child(4){left:66%;top:60%;font-size:38px;--dz:36}
.bp-g:nth-child(5){left:78%;top:74%;font-size:26px;--dz:16;opacity:.2}
.bp-g:nth-child(6){left:88%;top:88%;font-size:34px;--dz:26}
.bp-g:nth-child(7){left:52%;top:84%;font-size:28px;--dz:22}
.bp-g:nth-child(8){left:90%;top:4%;font-size:30px;--dz:14;opacity:.2;color:#ffd23f}
.bp-g:nth-child(9){left:46%;top:12%;font-size:24px;--dz:12}
.bp-g:nth-child(10){left:56%;top:48%;font-size:22px;--dz:10;opacity:.16}
.bp-g:nth-child(11){left:74%;top:52%;font-size:20px;--dz:8;opacity:.22;color:#ffd23f}
.bp-g:nth-child(12){left:40%;top:94%;font-size:22px;--dz:20}
@media (prefers-reduced-motion:no-preference){
  .bp-g{animation:drift 14s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.3s)}
  @keyframes drift{from{translate:0 0}to{translate:0 -14px}}
}
.bp-name{font-size:32px}
.bp-saying{font-size:32px}
.bp-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 22px;margin-top:22px;padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);width:fit-content}
.bp-st{display:flex;flex-direction:column;line-height:1.2}
.bp-st b{font-size:24px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bp-st span{font-size:12.5px;color:rgba(243,240,255,.7)}
.bp-call{box-shadow:0 10px 24px -10px rgba(255,210,63,.7);transition:transform .2s var(--ease),background .2s}
.bp-call:hover{transform:translateY(-2px)}
.roles{position:relative}
.roles .on{background:var(--grad-brand);box-shadow:0 6px 14px -8px rgba(69,39,160,.8)}
.fame-public{margin-top:22px;max-width:960px}
@media (max-width:760px){
  .brandpanel{min-height:0;padding:28px 24px}
  .bp-stats{grid-template-columns:repeat(3,1fr);width:100%;gap:6px 12px}
  .bp-st b{font-size:20px}
  .auth .login{padding:28px 22px}
  .bp-g{opacity:.09}
}

/* ---------- chân trang ---------- */
.site-foot{background:var(--surface);border-top:1px solid var(--line);margin-top:56px}
.site-foot .f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px;padding-top:34px;padding-bottom:26px;align-items:start}
.f-col{display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.f-col a{color:var(--ink-2);text-decoration:none;width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s var(--ease),color .2s;font-weight:600}
.f-col a:hover{color:var(--brand);background-size:100% 1.5px}
.f-h{font-size:13px;color:var(--ink);font-weight:800;margin-bottom:2px}
.f-about p{margin:6px 0 0;color:var(--ink-3);max-width:46ch;line-height:1.6}
.site-foot .f-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;padding-bottom:18px;font-size:13px;color:var(--ink-3)}
@media (max-width:700px){.site-foot .f-grid{grid-template-columns:1fr 1fr;gap:20px}.f-about{grid-column:1/-1}}

/* ---------- tôn trọng giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .card:hover,.lv-card:hover,.kpi:hover,.btn:hover{transform:none}
}
/* các nút có màu riêng giữ nguyên màu */
.btn.lv-join,.btn.lv-join:hover{background:linear-gradient(135deg,#ffe170,#ffd23f 45%,#f4bd00);color:var(--on-accent)}
.btn.lv-go,.btn.lv-go:hover{background:linear-gradient(135deg,#ff4d5e,#e5243b);color:#fff}
.btn.lv-stop,.btn.lv-stop:hover{background:var(--ink);color:var(--bg)}
.btn.lv-join.is-loading::after{border-color:var(--on-accent) var(--on-accent) transparent transparent}

/* ---------- trang giáo viên: dải tổng quan ---------- */
.dash-head{position:relative;overflow:hidden;isolation:isolate;margin:24px 0 4px;padding:24px 28px;border-radius:24px;background:var(--grad-night);color:#f3f0ff;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;box-shadow:var(--sh-3)}
.dash-head::after{content:"∑";position:absolute;right:-10px;top:-46px;font:italic 600 210px/1 var(--serif);color:#fff;opacity:.05;z-index:-1;pointer-events:none}
.dh-tx h1{margin:0;font-size:26px;font-weight:800;color:#fff;line-height:1.2}
.dh-tx p{margin:6px 0 0;color:rgba(243,240,255,.75);font-size:14.5px}
.dh-ks{display:grid;grid-template-columns:repeat(4,minmax(96px,1fr));gap:10px}
.dh-k{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:default;transition:background .2s,transform .25s var(--ease),border-color .2s}
button.dh-k{cursor:pointer}
button.dh-k:hover{background:rgba(255,255,255,.14);border-color:rgba(255,210,63,.55);transform:translateY(-2px)}
button.dh-k:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.dh-k b{font-size:26px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.dh-k span{font-size:12.5px;color:rgba(243,240,255,.72)}
.dash-head+.tabs{margin-top:14px}
@media (max-width:900px){.dash-head{grid-template-columns:1fr}.dh-ks{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.dash-head{padding:18px;border-radius:20px;margin-top:16px}.dh-tx h1{font-size:21px}.dh-ks{grid-template-columns:repeat(2,1fr)}.dh-k b{font-size:22px}}

.radars{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.radars{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   KHU HỌC SINH: điều hướng 5 mục, bảng điều khiển, nhiệm vụ, bài kiểm tra, sổ câu sai, thành tích
   ===================================================================== */
.si{display:inline-grid;place-items:center;flex:none}
.si svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ---------- điều hướng trên (máy tính) ---------- */
.snav{display:none;align-items:center;gap:2px;margin-left:18px}
.snav a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:12px;color:var(--ink-2);text-decoration:none;font-weight:650;font-size:14.5px;white-space:nowrap;transition:color .18s,background .18s}
.snav a .si svg{width:18px;height:18px}
.snav a:hover{color:var(--brand);background:color-mix(in srgb,var(--brand-soft) 70%,transparent)}
.snav a.on{color:var(--brand);background:var(--brand-soft)}
.snav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-11px;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#ffe170,var(--accent-2))}
.top.scrolled .snav a.on::after{bottom:-8px}
.nbdg{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e5484d;color:#fff;font:700 10.5px/17px var(--font);font-style:normal;text-align:center}
.snav .nbdg{position:static;margin-left:2px}
body.has-nav .snav{display:flex}
.top.has-umenu .hphone{display:none}
.top.has-umenu .khc-open span{display:none}
.top.has-umenu .khc-open{width:38px;height:38px;padding:0;border-radius:999px;justify-content:center}
/* ---------- điều hướng dưới (điện thoại, máy tính bảng) ---------- */
.bnav{display:none}
@media (max-width:1060px){
  body.has-nav .snav{display:none}
  body.has-nav .bnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);
    background:var(--glass);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px -18px rgba(29,25,52,.4)}
  body.has-nav{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  body.has-nav .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
  .bnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:14px;color:var(--ink-3);text-decoration:none;font-size:11.5px;font-weight:650;min-height:52px;justify-content:center;transition:color .18s}
  .bnav a .si{width:46px;height:28px;border-radius:999px;transition:background .25s var(--ease),color .2s}
  .bnav a.on{color:var(--brand)}
  .bnav a.on .si{background:var(--brand-soft)}
  .bnav a:active .si{transform:scale(.92)}
  .bnav .nbdg{top:2px;right:calc(50% - 26px)}
}
/* ---------- chuông, máy tính, ảnh đại diện + menu thả xuống ---------- */
.ddw{position:relative}
.bellbtn{position:relative}
.bellbtn .si svg{width:19px;height:19px}
.bellbtn .bdg{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font:700 11px/18px var(--font);font-style:normal;box-shadow:0 0 0 2px var(--surface)}
.avbtn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:background .18s,border-color .18s}
.avbtn:hover,.ddw.open .avbtn{background:var(--surface-2);border-color:var(--line)}
.avbtn:focus-visible{outline:2.5px solid var(--brand-2);outline-offset:2px}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;flex:none;background:var(--grad-brand);box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--brand-2) 35%,transparent)}
.av.lg{width:48px;height:48px;font-size:19px}
.av.pt7,.av.pt8{background:linear-gradient(135deg,#ffe170,#f4a800);color:#3a2600}
.av-n{display:flex;flex-direction:column;line-height:1.2;max-width:150px}
.av-n b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-n small{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avbtn .chev svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.ddw.open .avbtn .chev svg{transform:rotate(180deg)}
@media (max-width:1240px){.av-n,.avbtn .chev{display:none}.avbtn{padding:2px}}
.dd{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:320px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-3);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .18s var(--ease),transform .22s var(--ease),visibility 0s .22s}
.ddw.open .dd{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ease),transform .22s var(--ease)}
.dd-h{font-size:13px;font-weight:800;color:var(--ink-2);padding:8px 10px 6px}
.dd-i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:12px;cursor:pointer;color:var(--ink);transition:background .15s}
.dd-i:hover,.dd-i:focus-visible{background:var(--brand-soft)}
.dd-i:focus-visible{outline:2px solid var(--brand-2);outline-offset:-2px}
.dd-i .si svg{width:18px;height:18px;color:var(--ink-2)}
.dd-t{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.dd-t b{font-size:14px;font-weight:650}
.dd-t small{font-size:12.5px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dd-ic{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:var(--brand-soft);color:var(--brand)}
.dd-ic.m-live,.dd-ic.m-rem{background:var(--bad-soft);color:var(--bad)}
.dd-ic.m-asg{background:var(--accent-soft);color:var(--warn)}
.dd-ic.m-rev{background:var(--ok-soft);color:var(--ok)}
.dd-empty{margin:6px 10px 10px;color:var(--ink-3);font-size:14px}
.dd-more{all:unset;box-sizing:border-box;display:block;width:100%;text-align:center;padding:9px;margin-top:4px;border-top:1px solid var(--line);color:var(--brand);font-weight:700;font-size:13.5px;cursor:pointer;border-radius:0 0 12px 12px}
.dd-more:hover{background:var(--surface-2)}
.dd-prof{display:flex;gap:12px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.dd-prof>div{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.dd-prof b{font-size:15.5px}
.dd-prof small{font-size:12.5px;color:var(--ink-3)}
.dd-sep{height:1px;background:var(--line);margin:6px 4px}
@media (max-width:700px){
  .top.has-umenu .logo .t small{display:none}
  .top.has-umenu .logo .t{display:flex !important}
  .top.has-umenu .student{gap:6px}
  .dd{position:fixed;top:66px;left:12px;right:12px;width:auto;max-width:none;transform-origin:top center}
}

/* ---------- tiêu đề khu vực ---------- */
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.sec-h h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.015em}
.sec-h p{margin:4px 0 0;color:var(--ink-3);font-size:14px;max-width:70ch}
.view>.sec-h:first-child{margin-top:28px}
.empty-state{grid-column:1/-1;text-align:center;padding:34px 20px;border:1.5px dashed var(--line-2);border-radius:var(--r);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.empty-state h3,.empty-state h2{margin:0 0 6px;font-size:17px}
.empty-state p{margin:0 auto 14px;color:var(--ink-3);max-width:46ch;font-size:14.5px}
.kpi-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* ---------- lời chào ---------- */
.dhero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:stretch;margin-top:24px;padding:26px;border-radius:26px;
  background:radial-gradient(80% 120% at 0% 0%,color-mix(in srgb,var(--brand-2) 16%,transparent),transparent 60%),radial-gradient(60% 90% at 100% 100%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-2)}
.dhero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='260' viewBox='0 0 640 260' fill='none' stroke='%236a4be0' stroke-opacity='.18' stroke-width='1.5'%3E%3Ccircle cx='520' cy='40' r='70'/%3E%3Cpath d='M380 230 460 110 540 230z'/%3E%3Cpath d='M0 200 Q160 60 320 200' stroke-dasharray='4 6'/%3E%3Crect x='260' y='20' width='54' height='54' rx='6' transform='rotate(18 287 47)'/%3E%3C/svg%3E") right top/640px auto no-repeat}
.dh-main{display:flex;flex-direction:column;justify-content:center;min-width:0}
.dh-date{margin:0;font-size:13.5px;font-weight:700;color:var(--brand)}
.dhero h1{margin:6px 0 4px;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.wave{display:inline-block;transform-origin:70% 80%}
@media (prefers-reduced-motion:no-preference){.wave{animation:wave 2.2s ease-in-out .6s 2}@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}}
.dh-sub{margin:0 0 16px;color:var(--ink-2);font-size:15.5px;max-width:52ch}
.wgoal{background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);border-radius:16px;padding:12px 14px;max-width:460px}
.wg-h{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:10px}
.wg-h span{color:var(--ink-3);font-weight:650;font-variant-numeric:tabular-nums}
.wg-days{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wg-days li{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ink-3)}
.wg-days i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--line-2);color:#fff}
.wg-days i .si svg{width:16px;height:16px;stroke-width:2.6}
.wg-days li.on i{border:0;background:var(--grad-brand);box-shadow:0 4px 10px -4px rgba(69,39,160,.7)}
.wg-days li.is-today{color:var(--brand)}
.wg-days li.is-today:not(.on) i{border-style:solid;border-color:var(--brand-2)}
.wg-days li.fut i{opacity:.55}
@media (max-width:900px){.dhero{grid-template-columns:1fr;padding:20px}.dhero h1{font-size:27px}}

/* ---------- thẻ nhiệm vụ ---------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.mcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s;overflow:hidden}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:color-mix(in srgb,var(--brand-2) 30%,var(--line))}
.mcard::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--mcol,var(--brand-2))}
.m-rem,.m-live{--mcol:#e5484d}.m-asg{--mcol:var(--accent-2)}.m-rev{--mcol:#1d9a5b}.m-mis{--mcol:var(--brand-2)}.m-doing{--mcol:#2fa4ff}
.mc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mc-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;background:var(--mcol,var(--brand-2))}
.m-asg .mc-ic{color:#3a2600}
.mc-st{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.mcard.urgent .mc-st,.m-live .mc-st,.m-rem .mc-st{background:var(--bad-soft);color:var(--bad)}
.mcard h3{margin:4px 0 0;font-size:16.5px;line-height:1.3;font-weight:750}
.mcard p{margin:0;color:var(--ink-3);font-size:13.5px;line-height:1.5;flex:1}
.mc-prog{height:7px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.mc-prog i{display:block;height:100%;width:var(--w);border-radius:9px;background:var(--grad-brand);transform-origin:left;animation:growX .9s var(--ease) .25s both}
@keyframes growX{from{transform:scaleX(0)}}
.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;flex-wrap:wrap}
.mc-xp{font-size:12.5px;font-weight:750;color:var(--warn);background:var(--accent-soft);padding:4px 10px;border-radius:999px}
.mc-end{display:flex;gap:8px;align-items:center}
.mc-done{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:13.5px;color:var(--ok)}
.mc-done .si{width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff}
.mc-done .si svg{width:15px;height:15px;stroke-width:3;stroke-dasharray:24;stroke-dashoffset:24;animation:drawCk .6s var(--ease) .4s forwards}
@keyframes drawCk{to{stroke-dashoffset:0}}
.mcard.done{background:linear-gradient(180deg,color-mix(in srgb,var(--ok-soft) 60%,var(--surface)),var(--surface))}
.mcard.done::before{background:var(--ok)}
.mcard.done .mc-ic{background:var(--ok)}
.mcard.done .mc-st{background:var(--ok-soft);color:var(--ok)}

/* ---------- bài kiểm tra ---------- */
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.tb-r{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tb-r select{padding:9px 12px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface);font-size:14px;max-width:260px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-weight:650;font-size:13.5px;transition:all .18s}
.chips button b{font-size:12px;min-width:20px;padding:1px 6px;border-radius:9px;background:var(--surface-2);color:var(--ink-3)}
.chips button:hover{border-color:var(--brand);color:var(--brand)}
.chips button.on{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 6px 14px -8px rgba(69,39,160,.8)}
.chips button.on b{background:rgba(255,255,255,.22);color:#fff}
.search{padding:9px 14px 9px 38px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377728f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 12px 50%/18px no-repeat;font-size:14.5px;min-width:220px;transition:border-color .15s,box-shadow .2s}
.search:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
@media (min-width:1000px){.tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.tgrid{grid-template-columns:minmax(0,1fr)}.search{min-width:0;flex:1}}
.tcard{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s;border-top:4px solid var(--tcol,var(--line-2))}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.st-todo{--tcol:var(--brand-2)}.st-doing,.st-rem{--tcol:var(--accent-2)}.st-done{--tcol:#1d9a5b}.st-late{--tcol:#e5484d}.st-closed,.st-soon{--tcol:var(--line-2)}
.tc-top{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.tcard .tag{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.pill.info{background:var(--brand-soft);color:var(--brand)}
.tcard h3{margin:0;font-size:17px;line-height:1.3;font-weight:750}
.tc-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0}
.tc-meta div{display:flex;flex-direction:column}
.tc-meta dt{font-size:11.5px;color:var(--ink-3);font-weight:650}
.tc-meta dd{margin:0;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.tc-time{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-3);font-weight:650}
.tc-bar{height:6px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.tc-bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--brand-2),var(--accent-2));border-radius:9px;transform-origin:left;animation:growX .9s var(--ease) .2s both}
.tc-score{margin:0;font-size:14px;color:var(--ink-2)}
.tc-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.tc-act .btn{flex:1;min-width:120px}

/* ---------- sổ câu sai ---------- */
.book-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:stretch}
.book-top .kpis{grid-template-columns:repeat(2,1fr)}
.kpi.k-due .n{color:var(--warn)}.kpi.k-ok .n{color:var(--ok)}
.book-cta{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.book-cta>div{display:flex;flex-direction:column;gap:4px}
.book-cta b{font-size:19px}
.book-cta span{color:var(--ink-3);font-size:14px}
.book-cta.hot{background:var(--grad-night);color:#fff;border-color:transparent;box-shadow:var(--sh-3)}
.book-cta.hot span{color:rgba(243,240,255,.75)}
.btn.lg{padding:14px 22px;font-size:17px;border-radius:14px;align-self:flex-start}
.book-charts{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;margin-top:14px}
.cbars{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.cb{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 32px;gap:10px;align-items:center;font-size:13.5px;outline:none;border-radius:8px}
.cb:focus-visible{outline:2px solid var(--brand-2)}
.cb-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.cb-t{height:10px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.cb-t i{display:block;height:100%;width:var(--w);border-radius:9px;background:var(--grad-brand);transform-origin:left;animation:growX .8s var(--ease) both}
.cb b{text-align:right;font-variant-numeric:tabular-nums}
.lvchips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.lvc{padding:12px;border-radius:14px;background:var(--surface-2);display:flex;flex-direction:column}
.lvc b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.lvc span{font-size:12.5px;color:var(--ink-3)}
.lvc.lv-VD b{color:var(--warn)}.lvc.lv-VDC b{color:var(--bad)}
@media (max-width:800px){.book-top,.book-charts{grid-template-columns:minmax(0,1fr)}.cb{grid-template-columns:minmax(0,1fr) 90px 28px}}

/* ---------- thành tích ---------- */
.ach-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.ach-l{display:flex;flex-direction:column;gap:16px}
.jpanel .tj{max-height:470px;overflow:auto;margin-top:10px;padding-right:4px}
.streakp .sp-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sp-fire{font-size:38px;line-height:1;filter:drop-shadow(0 6px 10px rgba(255,140,0,.35))}
.sp-top b{display:block;font-size:30px;font-weight:800;line-height:1}
.sp-top span{font-size:13.5px;color:var(--ink-3)}
.streakp .wgoal{max-width:none;margin-bottom:6px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.badge{display:grid;grid-template-columns:54px minmax(0,1fr);gap:4px 14px;align-items:center;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.badge:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.bd-ic{grid-row:span 2;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:var(--surface-2);color:var(--ink-3);filter:grayscale(1);opacity:.75;position:relative}
.badge.ok .bd-ic{background:linear-gradient(135deg,#ffe170,#f4b400);color:#3a2600;filter:none;opacity:1;box-shadow:0 8px 18px -8px rgba(196,140,0,.8)}
@media (prefers-reduced-motion:no-preference){.badge.ok.rv-in .bd-ic{animation:unlock .7s var(--ease) both}@keyframes unlock{0%{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:none}}}
.bd-tx{display:flex;flex-direction:column;min-width:0}
.bd-tx b{font-size:15px}
.bd-tx span{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.bd-st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--ok)}
.bd-st .si svg{width:15px;height:15px;stroke-width:2.6}
.bd-prog{display:flex;flex-direction:column;gap:4px}
.bd-prog span{font-size:12px;color:var(--ink-3);font-weight:650}
.stat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px}
.stat-grid .chart-legend{grid-column:1/-1}
.v-achieve .profile{margin-top:14px}
@media (max-width:900px){.ach-top,.stat-grid{grid-template-columns:minmax(0,1fr)}}
/* bục vinh danh */
.podium{list-style:none;margin:16px 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.pd{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 10px 0;position:relative}
.pd b{font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd small{font-size:12px;color:var(--ink-3)}
.pd-xp{font-weight:800;font-variant-numeric:tabular-nums;font-size:14px}
.pd-rk{position:absolute;top:0;left:50%;transform:translate(-50%,-40%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;z-index:1}
.p1 .pd-rk{background:linear-gradient(135deg,#ffe170,#e0a800);color:#3a2600}.p2 .pd-rk{background:linear-gradient(135deg,#d9dde8,#9aa1b5)}.p3 .pd-rk{background:linear-gradient(135deg,#f0b27a,#b8692c)}
.pd-step{display:block;width:100%;margin-top:10px;border-radius:14px 14px 0 0;background:linear-gradient(180deg,var(--brand-soft),transparent)}
.p1 .pd-step{height:84px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 45%,transparent),transparent)}
.p2 .pd-step{height:56px}.p3 .pd-step{height:40px}
.p1 .lvbadge{transform:scale(1.15)}

/* ---------- khung chờ tải ---------- */
.view-skel{padding-top:24px}
.skel{border-radius:20px;background:linear-gradient(90deg,var(--surface-2) 25%,color-mix(in srgb,var(--surface) 80%,var(--surface-2)) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;min-height:130px}
.sk-hero{height:240px;margin-bottom:22px}
.sk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.sk-wide{height:180px}
@keyframes shimmer{to{background-position:-200% 0}}
@media (max-width:640px){.sk-row{grid-template-columns:1fr}.sk-row .skel:nth-child(n+2){display:none}}

/* ---------- pháo giấy ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confetti i{position:absolute;top:-16px;width:8px;height:14px;border-radius:2px;animation:fall 2s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}

/* ---------- phông viết tay chỉ dùng để trang trí ---------- */
.nb-greet{font-family:var(--font)}
@media (prefers-reduced-motion:reduce){.mcard:hover,.tcard:hover,.badge:hover{transform:none}.skel{animation:none}}

.podium .pd b{color:var(--ink)}.podium .pd-xp{color:var(--ink)}.podium .pd small{color:var(--ink-3)}
@media (max-width:1439px){body.has-nav .top .logo .t{display:none}}
body.has-nav .top .wrap{gap:10px}
/* chữ viết tay chỉ để trang trí: số điểm, mã, xếp loại dùng phông chính cho dễ đọc */
.hist .sc,.score .big,.score .rank,.xg-n,.regcode,.cq.cw b,.streak b,.conftag.cw{font-family:var(--font);font-weight:800;letter-spacing:-.02em}
.score .big{font-size:72px}
.score .rank{font-size:20px;font-weight:750;letter-spacing:0}
.hist .sc{font-size:20px}
.xg-n{font-size:34px}
.regcode{font-size:40px}
.conftag.cw{font-weight:700;font-size:12px;transform:none;letter-spacing:0}
@media (max-width:380px){.top.has-umenu .logo .t{display:none !important}}
.xpbar i{transform-origin:left;animation:growX 1.1s var(--ease) .35s both}

/* =====================================================================
   BẢNG HỒ SƠ HỌC SINH (Trang chủ)
   ===================================================================== */
body:has(.v-home){background:
  radial-gradient(55% 40% at 0% 0%,color-mix(in srgb,#b9a3ff 30%,transparent),transparent 70%),
  radial-gradient(45% 35% at 100% 10%,color-mix(in srgb,#f3a6d6 26%,transparent),transparent 70%),
  radial-gradient(60% 45% at 80% 100%,color-mix(in srgb,#9d8cff 22%,transparent),transparent 70%),var(--bg)}
.wrap.v-home{max-width:1320px}
.ds{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px;margin-top:22px;align-items:start}
.dcard,.ds-side{position:relative;border-radius:28px;padding:20px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--brand-soft) 55%,var(--surface)));
  border:1px solid color-mix(in srgb,#fff 60%,var(--line));box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 22px 44px -28px rgba(69,39,160,.45),0 2px 6px -2px rgba(69,39,160,.12)}
.dcard{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.dcard:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 30px 54px -28px rgba(69,39,160,.55),0 2px 6px -2px rgba(69,39,160,.12)}
:root[data-theme="dark"] .dcard,:root[data-theme="dark"] .ds-side{border-color:var(--line);box-shadow:0 22px 44px -28px rgba(0,0,0,.8)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dcard,:root:not([data-theme="light"]) .ds-side{border-color:var(--line);box-shadow:0 22px 44px -28px rgba(0,0,0,.8)}}
/* cột hồ sơ */
.ds-side{position:sticky;top:80px;display:flex;flex-direction:column;gap:18px;padding:26px 20px}
.ds-prof{display:flex;flex-direction:column;align-items:center;text-align:center}
.ds-av{position:relative;width:112px;height:112px;border-radius:50%;padding:6px;background:conic-gradient(from 210deg,#ffd23f calc(var(--p) * 1%),color-mix(in srgb,var(--brand-2) 18%,transparent) 0);box-shadow:0 14px 30px -14px rgba(69,39,160,.6)}
.ds-av>span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--grad-brand);color:#fff;font-size:40px;font-weight:800;border:4px solid var(--surface)}
.ds-av.pt7>span,.ds-av.pt8>span{background:linear-gradient(135deg,#ffe170,#f4a800);color:#3a2600}
.ds-lv{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);min-width:34px;height:26px;padding:0 9px;border-radius:13px;background:linear-gradient(135deg,#ffe170,#f4b400);color:#3a2600;font:800 13px/26px var(--font);font-style:normal;box-shadow:0 0 0 3px var(--surface)}
.ds-prof h2{margin:16px 0 2px;font-size:20px;font-weight:800;line-height:1.25}
.ds-title{margin:0;color:var(--brand);font-weight:700;font-size:14px}
.ds-meta{margin:2px 0 0;color:var(--ink-3);font-size:13px}
.ds-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;margin-top:14px}
.ds-mini div{display:flex;flex-direction:column;padding:8px 4px;border-radius:14px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.ds-mini b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.ds-mini span{font-size:11px;color:var(--ink-3);line-height:1.3}
.ds-links{display:flex;flex-direction:column;gap:2px}
.ds-link{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;color:var(--ink-2);font-weight:650;font-size:14.5px;transition:background .18s,color .18s,transform .18s var(--ease)}
.ds-link .si svg{width:19px;height:19px}
.ds-link:hover{background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--brand);transform:translateX(3px)}
.ds-link:focus-visible{outline:2.5px solid var(--brand-2)}
.ds-n{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:10px;background:#e5484d;color:#fff;font-size:11.5px;text-align:center}
.ds-promo{position:relative;padding:34px 16px 16px;margin-top:12px;border-radius:22px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--brand-2) 22%,var(--surface)),color-mix(in srgb,var(--brand-2) 8%,var(--surface)));border:1px solid color-mix(in srgb,var(--brand-2) 20%,transparent)}
.ds-promo-ic{position:absolute;top:-22px;left:50%;transform:translateX(-50%) rotate(-8deg);width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:24px;font-weight:800;color:#fff;background:linear-gradient(135deg,#8b6cf2,#4527a0);box-shadow:0 12px 22px -10px rgba(69,39,160,.8)}
.ds-promo.done .ds-promo-ic{background:linear-gradient(135deg,#4cc985,#1d7a47)}
@media (prefers-reduced-motion:no-preference){.ds-promo-ic{animation:bob 3.4s ease-in-out infinite}@keyframes bob{50%{transform:translateX(-50%) rotate(6deg) translateY(-4px)}}}
.ds-promo b{display:block;font-size:15px}
.ds-promo p{margin:4px 0 12px;font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* phần chính */
.ds-hello{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:4px 4px 18px}
.ds-hello h1{margin:4px 0 0;font-size:36px;line-height:1.15;font-weight:800;letter-spacing:-.03em}
.ds-hello h1 em{font-style:italic;background:linear-gradient(90deg,#6a4be0,#c04fd0);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.ds-hsub{margin:0;color:var(--ink-2);font-weight:600;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--line)}
.ds-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:18px;align-items:start}
.ds-c1,.ds-c2{display:flex;flex-direction:column;gap:18px;min-width:0}
.ds-row2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px}
.dc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.dc-h h3{margin:0;font-size:19px;font-weight:750;letter-spacing:-.015em}
.dc-sub{margin:3px 0 0;font-size:12.5px;color:var(--ink-3)}
.dc-more{all:unset;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-3);padding:4px 8px;border-radius:8px;white-space:nowrap}
.dc-more:hover{color:var(--brand);background:var(--brand-soft)}
.dc-more:focus-visible{outline:2px solid var(--brand-2)}
/* tiến độ cấp độ */
.d-level{cursor:pointer}
.lv-row{display:flex;flex-direction:column;align-items:center;gap:14px}
.ring-box{padding:14px;border-radius:30px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--brand-soft) 70%,var(--surface)));box-shadow:10px 12px 26px -10px rgba(69,39,160,.35),-8px -8px 20px -8px rgba(255,255,255,.9)}
.ring{position:relative;width:132px;height:132px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rg-bg{fill:none;stroke:color-mix(in srgb,var(--brand-2) 14%,transparent);stroke-width:11}
.rg-fg{fill:none;stroke-width:11;stroke-linecap:round;animation:ringIn 1.5s var(--ease) .3s forwards;filter:drop-shadow(0 3px 6px rgba(69,39,160,.35))}
@keyframes ringIn{to{stroke-dashoffset:var(--off)}}
.rg-tx{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px;font-variant-numeric:tabular-nums}
.rg-tx b{font-size:34px;font-weight:700;color:var(--ink-2);letter-spacing:-.03em}
.rg-tx span{font-size:17px;font-weight:700;color:var(--ink-3);margin-top:8px}
.lv-tx{width:100%;text-align:center}
.lv-from{display:inline-flex;align-items:center;gap:8px;font-weight:800}
.lv-from>span:not(.lvbadge){display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.lv-from small{font-size:12px;color:var(--brand);font-weight:700}
.lv-tx p{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
.lv-tx .lv-next{margin-top:2px;color:var(--ink-3);font-size:12px}
/* bài cần làm */
.hw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.hw-i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px 11px 16px;border-radius:18px;cursor:pointer;
  background:color-mix(in srgb,var(--brand-2) 14%,var(--surface));color:var(--ink);transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.hw-i:hover{background:color-mix(in srgb,var(--brand-2) 24%,var(--surface));transform:translateX(3px);box-shadow:0 8px 18px -12px rgba(69,39,160,.6)}
.hw-i:focus-visible{outline:2.5px solid var(--brand-2)}
.hw-i.urgent,.hw-i.m-rem,.hw-i.m-live{background:color-mix(in srgb,#e5484d 14%,var(--surface))}
.hw-tx{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.hw-tx b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-tx small{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-go svg,.co-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block}
.hw-go{color:var(--ink-3);transition:transform .2s var(--ease)}
.hw-i:hover .hw-go{transform:translateX(3px);color:var(--brand)}
.hw-empty{display:flex;flex-direction:column;padding:16px;border-radius:18px;background:color-mix(in srgb,var(--ok) 10%,var(--surface));font-size:13px;color:var(--ink-3)}
.hw-empty b{color:var(--ok);font-size:14px}
/* hoạt động học tập */
.seg{display:inline-flex;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--brand-2) 14%,var(--surface))}
.seg button{border:0;background:none;padding:6px 12px;border-radius:999px;font-weight:700;font-size:12.5px;color:var(--ink-2);transition:background .2s,color .2s}
.seg button.on{background:var(--grad-brand);color:#fff;box-shadow:0 4px 10px -4px rgba(69,39,160,.7)}
.schart svg{width:100%;height:auto;display:block;overflow:visible}
.schart .gl{stroke:color-mix(in srgb,var(--brand-2) 14%,transparent);stroke-width:1}
.schart .ax{fill:var(--ink-3);font-size:11.5px;font-family:var(--font)}
.sc-ln{fill:none;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:drawLn 1.8s var(--ease) .25s forwards;filter:drop-shadow(0 6px 8px rgba(160,70,210,.35))}
@keyframes drawLn{to{stroke-dashoffset:0}}
.sc-area{opacity:0;animation:fadeIn2 .9s ease 1.2s forwards}
@keyframes fadeIn2{to{opacity:1}}
.schart .hit .xh{stroke:var(--brand-2);stroke-dasharray:3 4;opacity:0;transition:opacity .15s}
.schart .hit .dot{fill:var(--surface);stroke:#8b4fe0;stroke-width:2.5;opacity:0;transition:opacity .15s,r .15s}
.schart .hit:hover .xh,.schart .hit:focus .xh,.schart .hit:hover .dot,.schart .hit:focus .dot{opacity:1}
.schart .hit{outline:none}
/* chương đang học */
.course{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:24px;margin-bottom:12px;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 30px -18px var(--c2);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.course:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 24px 40px -18px var(--c2)}
.course:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.course.c0{--c1:#9b7ae6;--c2:#5b3fd0}.course.c1{--c1:#c483c9;--c2:#7d4fc0}.course.c2{--c1:#7f8ff0;--c2:#4a4fc8}
.co-ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#4527a0;font:800 18px var(--serif);box-shadow:0 8px 16px -8px rgba(0,0,0,.4)}
.co-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.co-tx b{font-size:15.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co-tx small{font-size:12px;opacity:.85}
.co-bar{height:6px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:4px}
.co-bar i{display:block;height:100%;width:var(--w);border-radius:9px;background:#fff;transform-origin:left;animation:growX 1s var(--ease) .3s both}
.co-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;opacity:.8;margin-top:2px}
.co-go{flex:none;opacity:.85;transition:transform .2s var(--ease)}
.course:hover .co-go{transform:translateX(4px)}
.course-add{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px;border-radius:22px;cursor:pointer;font-weight:700;color:var(--brand);
  background:color-mix(in srgb,var(--brand-2) 16%,var(--surface));transition:background .2s,transform .2s var(--ease)}
.course-add span{font-size:22px;line-height:1;font-weight:400}
.course-add:hover{background:color-mix(in srgb,var(--brand-2) 26%,var(--surface));transform:translateY(-2px)}
.course-add:focus-visible{outline:2.5px solid var(--brand-2)}
/* nên luyện thêm */
.sug-i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:18px;cursor:pointer;margin-bottom:8px;background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--line);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.sug-i:hover{transform:translateX(3px);border-color:var(--brand-2);box-shadow:0 10px 20px -14px rgba(69,39,160,.6)}
.sug-i:focus-visible{outline:2.5px solid var(--brand-2)}
.sug-pct{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:14px}
.sug-pct.bad{background:var(--bad-soft);color:var(--bad)}.sug-pct.warn{background:var(--warn-soft);color:var(--warn)}.sug-pct.ok{background:var(--ok-soft);color:var(--ok)}
.sug-tx{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.sug-tx b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-tx small{font-size:12px;color:var(--ink-3)}
.sug-i .co-go{color:var(--ink-3)}
/* huy hiệu */
.d-ach .dc-h{align-items:center}
.d-ach .dc-h .dc-sub{margin:0 auto 0 0;padding-left:10px}
.ach-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.achi{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 10px;border-radius:20px;background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--line);transition:transform .25s var(--ease)}
.achi:hover{transform:translateY(-3px)}
.achi .bd-ic{width:50px;height:50px;font-size:24px}
.achi.ok .bd-ic{background:linear-gradient(135deg,#ffe170,#f4b400);color:#3a2600;filter:none;opacity:1;box-shadow:0 8px 18px -8px rgba(196,140,0,.8)}
.achi b{font-size:13px;line-height:1.3}
.achi small{font-size:11.5px;color:var(--ok);font-weight:700}
.achi .mc-prog{width:80%;height:5px}
/* nhỏ dần */
@media (max-width:1180px){.ds{grid-template-columns:230px minmax(0,1fr)}.ds-grid{grid-template-columns:minmax(0,1fr)}.ds-c2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (max-width:900px){
  .ds{grid-template-columns:minmax(0,1fr)}
  .ds-side{position:static;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:18px}
  .ds-prof{display:contents}
  .ds-av{grid-row:span 4;width:92px;height:92px}
  .ds-av>span{font-size:32px}
  .ds-prof h2,.ds-title,.ds-meta{text-align:left;margin:0}
  .ds-prof h2{font-size:18px}
  .ds-mini{grid-column:1/-1;margin-top:0}
  .ds-links{display:none}
  .ds-promo{grid-column:1/-1;margin-top:20px}
  .ds-c2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){.ds-row2{grid-template-columns:minmax(0,1fr)}.ds-hello h1{font-size:28px}.ach-row{grid-template-columns:repeat(2,minmax(0,1fr))}.dcard{padding:16px;border-radius:24px}}
/* thanh điều hướng dưới: dạng viên thuốc nổi */
@media (max-width:1060px){
  body.has-nav .bnav{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:6px;border-radius:24px;border:0;
    background:linear-gradient(135deg,#7a5ce8,#4527a0);box-shadow:0 18px 36px -14px rgba(69,39,160,.8);max-width:620px;margin:0 auto}
  .bnav a{color:rgba(255,255,255,.72)}
  .bnav a.on{color:#fff}
  .bnav a.on .si{background:rgba(255,255,255,.2)}
  .bnav .nbdg{box-shadow:0 0 0 2px #5b3fd0}
  body.has-nav{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.rg-fg{animation:none;stroke-dashoffset:var(--off)}.sc-ln{animation:none;stroke-dashoffset:0}.sc-area{animation:none;opacity:1}.dcard:hover,.course:hover{transform:none}}

body.has-nav .top .logo .t{display:none}
.seg button{white-space:nowrap}
@media (max-width:900px){
  .ds{display:flex;flex-direction:column;gap:18px}
  .ds-main{display:contents}
  .ds-hello{order:0;margin:0 2px}
  .ds-side{order:1}
  .ds-grid{order:2}
}
@media (max-width:900px){.ds-side,.ds-grid,.ds-hello{width:100%;align-self:stretch}}

/* thanh dưới: 6 mục (thêm Linh thú) */
@media (max-width:1060px){
  body.has-nav .bnav{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bnav a{font-size:10.5px;line-height:1.15;text-align:center;padding:6px 0}
  .bnav a span:not(.si){max-width:100%;overflow-wrap:anywhere}
  .bnav a .si{width:40px}
  .bnav .nbdg{right:calc(50% - 24px)}
}

/* ===== video bắt buộc sau khi đăng nhập ===== */
body.gate-on{overflow:hidden}
.gate{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;overflow-y:auto;
  background:radial-gradient(80% 60% at 50% 0%,rgba(122,92,232,.55),transparent 70%),rgba(16,12,40,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:gatein .3s ease-out}
@keyframes gatein{from{opacity:0}}
.gate-card{width:min(640px,100%);background:var(--surface);color:var(--ink);border-radius:28px;padding:clamp(18px,4vw,30px);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);text-align:center;animation:gmpop .35s ease-out}
.gate-from{margin:0;font-size:.85rem;font-weight:700;color:var(--brand)}
.gate-card h2{margin:6px 0 4px;font-size:clamp(1.4rem,4vw,1.9rem);font-weight:850;letter-spacing:-.01em;line-height:1.2}
.gate-sub{margin:0 auto 14px;color:var(--ink-2);max-width:46ch;line-height:1.5}
.gate-stage:not(:empty){margin:0 auto 14px;border-radius:18px;overflow:hidden;background:#000}
.gate-stage .vframe{margin:0 auto}
.gate-acts{display:flex;justify-content:center}
.gate-open{font-size:1.05rem;padding:14px 26px;text-decoration:none}
.gate-prog{display:flex;align-items:center;gap:12px;margin:18px 0 6px}
.gate-bar{flex:1;height:10px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.gate-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7a5ce8,#ffd23f);transition:width 1s linear}
.gate-clock{font-variant-numeric:tabular-nums;font-size:1.05rem;min-width:52px;text-align:right}
.gate-st{margin:4px 0 14px;font-size:.88rem;color:var(--ink-3)}
.gate-card>.btn.acc{min-width:220px}
.gate-card>.btn:disabled{opacity:.45;cursor:not-allowed}
.gate-out{display:block;margin:14px auto 0;background:none;border:0;color:var(--ink-3);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer}
.gate-list{columns:2;font-size:.88rem;line-height:1.6;padding-left:1.1rem}
@media (max-width:620px){.gate-list{columns:1}}