@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
:root{color-scheme:light}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: one notebook sheet on ô-ly grid paper. Students pick a name, work through numbered questions, and send a result code; the teacher gets tabs for assignments, results and classes. */
:root{
  --bg:#EAF1F8; --grid:#D5E3F0; --sheet:#FFFFFF; --ink:#14213D; --ink2:#4B5B76; --line:#D3DEEA;
  --pen:#2450D6; --pen-ink:#FFFFFF; --pen-soft:#E8EEFC;
  --red:#C73232; --red-soft:#FCEBEB; --green:#157A52; --green-soft:#E3F4EC; --amber:#8F5C00; --amber-soft:#FFF1CF; --star:#F2A900;
  --margin:#EE8B8B;
  --f-display:'Baloo 2','Be Vietnam Pro',system-ui,sans-serif;
  --f-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101C19; --grid:#182824; --sheet:#182623; --ink:#EDF3EF; --ink2:#A7BBB3; --line:#2A3F3A;
    --pen:#8DB0FF; --pen-ink:#0B1530; --pen-soft:#1D2D52;
    --red:#FF8A8A; --red-soft:#3B2020; --green:#6FE0A8; --green-soft:#183A2C; --amber:#FFCB5C; --amber-soft:#3A2F12; --star:#FFC947;
    --margin:#B85A5A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101C19; --grid:#182824; --sheet:#182623; --ink:#EDF3EF; --ink2:#A7BBB3; --line:#2A3F3A;
  --pen:#8DB0FF; --pen-ink:#0B1530; --pen-soft:#1D2D52;
  --red:#FF8A8A; --red-soft:#3B2020; --green:#6FE0A8; --green-soft:#183A2C; --amber:#FFCB5C; --amber-soft:#3A2F12; --star:#FFC947;
  --margin:#B85A5A; color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; background-color:var(--bg); color:var(--ink);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  font:400 16px/1.55 var(--f-body); padding-inline:16px; padding-block:22px 64px;
}
.wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(30px,7vw,42px)}
h1::after{content:"";display:block;width:70px;height:6px;margin-top:8px;border-top:2px solid var(--red);border-bottom:2px solid var(--red)}
h2{font-size:22px} h3{font-size:18px}
p{margin:0}
.kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}
.sheet.flush{padding:0}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}
.muted{color:var(--ink2)} .small{font-size:14px}
:focus-visible{outline:3px solid var(--pen);outline-offset:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:10px;border:1.5px solid var(--pen);background:var(--pen);color:var(--pen-ink);font:600 15px/1.2 var(--f-body);cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--pen)}
.btn.quiet{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.danger{background:transparent;border-color:var(--red);color:var(--red)}
.btn.sm{min-height:36px;padding:6px 11px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.ico{display:inline-flex;font-size:1.15em;line-height:0}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:13px;font-weight:600;background:var(--pen-soft);color:var(--pen);white-space:nowrap}
.chip.red{background:var(--red-soft);color:var(--red)} .chip.green{background:var(--green-soft);color:var(--green)}
.chip.amber{background:var(--amber-soft);color:var(--amber)} .chip.mute{background:transparent;border:1px solid var(--line);color:var(--ink2)}

label.f{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
label.f .hint{font-weight:400;color:var(--ink2);font-size:13px}
.in,select.in,textarea.in{font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--sheet);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-height:44px}
textarea.in{resize:vertical;min-height:84px}
.in:focus{border-color:var(--pen)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--pen)}

.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);overflow-x:auto}
.tab{font:600 15px var(--f-body);padding:11px 16px;border:0;background:transparent;color:var(--ink2);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--pen);border-bottom-color:var(--pen)}

.banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:var(--amber-soft);color:var(--amber);font-weight:600;font-size:14px}

/* student: tasks */
.task{display:grid;grid-template-columns:1fr auto;gap:12px 16px;align-items:center;padding:16px 0;border-top:1.5px dashed var(--line)}
.task:first-child{border-top:0;padding-top:0}
.task:last-child{padding-bottom:0}
.task h3{margin-bottom:4px}
.task .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--ink2)}
.task .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){.task{grid-template-columns:1fr}.task .acts{justify-content:flex-start}}

/* runner */
.runbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--sheet);border:1px solid var(--line);border-radius:14px}
.runbar .run-title{font:700 17px var(--f-display);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.passage{white-space:pre-line;margin:0 0 6px;padding:14px 16px;border:1.5px dashed var(--line);border-radius:12px;background:var(--pen-soft);font-size:17px;line-height:1.7}
.note{color:var(--ink2);font-size:15px}
.q{display:flex;gap:14px;padding:20px;min-width:0}
.q + .q{border-top:1.5px dashed var(--line)}
.num{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--pen);color:var(--pen);font:700 17px var(--f-display);display:grid;place-items:center}
.qbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.qlabel{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.qtext{font-size:18px;line-height:1.7}
.gap{display:inline-block;width:3.2em;border-bottom:2px solid var(--ink2);margin:0 2px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:12px;align-items:center;width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--sheet);color:var(--ink);font:500 17px/1.35 var(--f-body);text-align:left;cursor:pointer;min-height:48px}
.opt .l{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink2);display:grid;place-items:center;font:700 14px var(--f-display);color:var(--ink2)}
.opt[aria-checked="true"]{border-color:var(--pen);background:var(--pen-soft)}
.opt[aria-checked="true"] .l{background:var(--pen);border-color:var(--pen);color:var(--pen-ink)}
.tfrow{display:flex;gap:10px;flex-wrap:wrap}
.tfrow .opt{width:auto;min-width:130px;justify-content:center}
.blank{font:600 18px var(--f-body);color:var(--pen);border:0;border-bottom:2px solid var(--pen);background:transparent;width:9ch;min-width:6ch;max-width:100%;padding:2px 4px;text-align:center;border-radius:0;margin:0 3px}
.blank:focus{outline:none;background:var(--pen-soft)}
.answerline{min-height:58px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 2px;border-bottom:2px solid var(--ink2)}
.pool{min-height:58px;display:flex;gap:8px;flex-wrap:wrap;padding:10px;border:1.5px dashed var(--line);border-radius:12px}
.tile{min-height:44px;padding:8px 14px;border:1.5px solid var(--pen);border-radius:10px;background:var(--pen-soft);color:var(--ink);font:600 17px var(--f-body);cursor:pointer}
.tile.on{background:var(--pen);color:var(--pen-ink)}
.wc{font-size:13px;color:var(--ink2)}
.submitbar{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:20px}

/* result */
.scorebox{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.score{font:700 76px/1 var(--f-display);color:var(--pen)}
.score small{font-size:26px;color:var(--ink2);margin-left:4px}
.stars{display:flex;gap:4px;font-size:34px}
.star{color:var(--line);display:inline-flex}.star.on{color:var(--star)}
.mark{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px}
.mark.ok{color:var(--green)}.mark.bad{color:var(--red)}.mark.wait{color:var(--amber)}
.rev{display:flex;gap:14px;padding:16px 0;border-top:1.5px dashed var(--line)}
.rev:first-child{border-top:0}
.rev .ans{font-size:16px}
.rev .fix{color:var(--red);font-weight:600}
.msgbox{width:100%;font:500 14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border:1.5px solid var(--line);border-radius:10px;padding:12px;background:var(--bg);color:var(--ink);min-height:128px;resize:vertical;word-break:break-all}
ol.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}

/* teacher */
.card-row{display:grid;grid-template-columns:1fr auto;gap:12px 18px;align-items:center;padding:16px 0;border-top:1.5px dashed var(--line)}
.card-row:first-child{border-top:0;padding-top:0}.card-row:last-child{padding-bottom:0}
.card-row .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.card-row{grid-template-columns:1fr}.card-row .acts{justify-content:flex-start}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat b{display:block;font:700 30px/1.1 var(--f-display)}
.stat span{font-size:13px;color:var(--ink2)}
.scroll-x{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.tbl th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding:8px 10px;border-bottom:2px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl td.num2,.tbl th.num2{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.det td{background:var(--bg)}
.bar{display:grid;grid-template-columns:52px minmax(0,1fr) 92px;align-items:center;gap:10px;font-size:14px}
.bar .txt{grid-column:1/-1;color:var(--ink2);font-size:13px;margin-top:-4px;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track{height:12px;border-radius:6px;background:var(--line);overflow:hidden}
.fillbar{height:100%;border-radius:6px}
.fillbar.g{background:var(--green)}.fillbar.a{background:var(--star)}.fillbar.r{background:var(--red)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
/* chọn nhiều tháng (học phí) */
.fmwrap{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.fmpick summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-weight:400}
.fmpick summary::-webkit-details-marker{display:none}
.fmpick summary::after{content:"▾";color:var(--ink2);flex:none}
.fmpick[open] summary{border-color:var(--pen)}
.fmpanel{margin-top:8px;padding:14px;border:1.5px solid var(--line);border-radius:12px;background:var(--sheet);font-weight:400}
.fmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.fmopt{align-items:center;white-space:nowrap;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;min-height:44px}
.fmopt input{margin-top:0}
.fmopt.on{border-color:var(--pen);background:var(--pen-soft)}

/* editor */
.qe{border:1.5px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--sheet)}
.qe-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qe-head select{width:auto;min-height:38px;padding:6px 10px;font-size:15px}
.oprow{display:flex;gap:8px;align-items:center}
.oprow input[type=radio]{width:20px;height:20px;accent-color:var(--pen);flex:none}
.fillans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.errs{margin:0;padding:12px 14px 12px 32px;border-radius:12px;background:var(--red-soft);color:var(--red);font-weight:600;font-size:14px}
.help{border:1.5px dashed var(--line);border-radius:12px;padding:14px}

.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;max-width:calc(100vw - 32px);padding:11px 18px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast.bad{background:var(--red);color:#fff}
.busy{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(10,20,30,.45);color:#fff;font:700 20px var(--f-display)}
@media (prefers-reduced-motion:no-preference){.btn,.opt,.tile{transition:background .12s,border-color .12s,filter .12s}}
@media (max-width:520px){.q{padding:16px 14px;gap:10px}.sheet{padding:16px}.score{font-size:60px}}

/* speak (đọc to) */
.speak{display:flex;flex-direction:column;gap:10px}
.speak-word{font:700 28px/1.25 var(--f-display);color:var(--pen);overflow-wrap:anywhere}
.speak .row{display:flex;flex-wrap:wrap;gap:8px}
.btn.mic.rec{background:var(--red);border-color:var(--red);color:var(--sheet)}
.speak-status{font-size:15px;font-weight:600;color:var(--ink2);min-height:1.2em}
.speak-status.ok{color:var(--green)}.speak-status.bad{color:var(--red)}
.speak-heard{font-size:14px;color:var(--ink2)}

/* ---- giao diện lớp học: nền xanh ngọc, cờ treo, kệ sách, bàn học ---- */
:root{--bg:#5CC6BD;--rainbow:linear-gradient(90deg,#FF7A9A,#FFB347,#FFD84D,#7ED87A,#5BC0F8,#B08CFF)}
body{position:relative;min-height:100vh;background-color:var(--bg);background-image:radial-gradient(900px 600px at 50% 40%,rgba(255,255,255,.22),transparent 70%);background-size:auto;background-repeat:no-repeat;background-attachment:fixed;padding-block:150px 190px}
body::before,body::after{content:"";position:absolute;left:0;right:0;pointer-events:none;background-repeat:repeat-x;z-index:0}
body::before{top:0;height:150px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22150%22 viewBox=%220 0 600 150%22%3E%3Cpath d=%22M0 12Q150 40 300 12T600 12%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%223%22/%3E%3Cpath d=%22M13 16.0L47 16.0L30 51.0z%22 fill=%22%23FF7A9A%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M73 22.8L107 22.8L90 57.8z%22 fill=%22%23FFB347%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M133 25.0L167 25.0L150 60.0z%22 fill=%22%23FFD84D%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M193 22.8L227 22.8L210 57.8z%22 fill=%22%237ED87A%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M253 16.0L287 16.0L270 51.0z%22 fill=%22%235BC0F8%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M313 16.0L347 16.0L330 51.0z%22 fill=%22%23B08CFF%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M373 22.8L407 22.8L390 57.8z%22 fill=%22%23FF7A9A%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M433 25.0L467 25.0L450 60.0z%22 fill=%22%23FFB347%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M493 22.8L527 22.8L510 57.8z%22 fill=%22%23FFD84D%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M553 16.0L587 16.0L570 51.0z%22 fill=%22%237ED87A%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Crect x=%220%22 y=%22126%22 width=%22600%22 height=%2212%22 fill=%22%23B9793E%22/%3E%3Crect x=%220%22 y=%22136%22 width=%22600%22 height=%223%22 fill=%22%238F5A2B%22/%3E%3Crect x=%2218%22 y=%2264%22 width=%2220%22 height=%2262%22 rx=%223%22 fill=%22%23F26B6B%22/%3E%3Crect x=%2240%22 y=%2276%22 width=%2218%22 height=%2250%22 rx=%223%22 fill=%22%23FFC857%22/%3E%3Crect x=%2260%22 y=%2258%22 width=%2222%22 height=%2268%22 rx=%223%22 fill=%22%234D96FF%22/%3E%3Crect x=%2284%22 y=%2282%22 width=%2216%22 height=%2244%22 rx=%223%22 fill=%22%236BCB77%22/%3E%3Crect x=%2222%22 y=%2272%22 width=%2212%22 height=%224%22 fill=%22%23fff%22 opacity=%22.7%22/%3E%3Crect x=%2264%22 y=%2268%22 width=%2214%22 height=%224%22 fill=%22%23fff%22 opacity=%22.7%22/%3E%3Crect x=%22124%22 y=%2284%22 width=%2246%22 height=%2242%22 rx=%226%22 fill=%22%239B7BFF%22/%3E%3Crect x=%22130%22 y=%2266%22 width=%227%22 height=%2222%22 rx=%222%22 fill=%22%23FF7A9A%22/%3E%3Crect x=%22140%22 y=%2258%22 width=%227%22 height=%2230%22 rx=%222%22 fill=%22%23FFD84D%22/%3E%3Crect x=%22150%22 y=%2264%22 width=%227%22 height=%2224%22 rx=%222%22 fill=%22%237ED87A%22/%3E%3Ccircle cx=%22214%22 cy=%22108%22 r=%2217%22 fill=%22%23FF5A5A%22/%3E%3Cpath d=%22M214 92q2-10 10-12%22 stroke=%22%235A8F3C%22 stroke-width=%224%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22224%22 cy=%2286%22 rx=%227%22 ry=%224%22 fill=%22%236BCB77%22/%3E%3Crect x=%22262%22 y=%2270%22 width=%2264%22 height=%2256%22 rx=%226%22 fill=%22%23FFE08A%22/%3E%3Crect x=%22272%22 y=%2282%22 width=%2244%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.8%22/%3E%3Crect x=%22272%22 y=%2296%22 width=%2230%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.8%22/%3E%3Crect x=%22348%22 y=%2260%22 width=%2220%22 height=%2266%22 rx=%223%22 fill=%22%235BC0F8%22/%3E%3Crect x=%22370%22 y=%2274%22 width=%2218%22 height=%2252%22 rx=%223%22 fill=%22%23FF7A9A%22/%3E%3Crect x=%22390%22 y=%2266%22 width=%2222%22 height=%2260%22 rx=%223%22 fill=%22%237ED87A%22/%3E%3Crect x=%22414%22 y=%2286%22 width=%2216%22 height=%2240%22 rx=%223%22 fill=%22%23FFB347%22/%3E%3Cg transform=%22translate(470 126)%22%3E%3Cpath d=%22M0 0h36l-4-26h-28z%22 fill=%22%23F08A4B%22/%3E%3Cpath d=%22M18-26q-14-10-22-26M18-26q0-20 6-34M18-26q16-8 26-24%22 stroke=%22%234DA35A%22 stroke-width=%225%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22-4%22 cy=%22-52%22 rx=%229%22 ry=%225%22 fill=%22%236BCB77%22/%3E%3Cellipse cx=%2225%22 cy=%22-62%22 rx=%229%22 ry=%225%22 fill=%22%236BCB77%22/%3E%3Cellipse cx=%2245%22 cy=%22-50%22 rx=%229%22 ry=%225%22 fill=%22%236BCB77%22/%3E%3C/g%3E%3Cg transform=%22translate(540 126)%22%3E%3Ccircle cx=%2220%22 cy=%22-40%22 r=%2226%22 fill=%22%235BC0F8%22/%3E%3Cpath d=%22M6-50q10-10 22-4q-6 12 2 18q-14 6-24-14z%22 fill=%22%237ED87A%22/%3E%3Crect x=%2216%22 y=%22-14%22 width=%228%22 height=%2212%22 fill=%22%238F5A2B%22/%3E%3Crect x=%226%22 y=%22-4%22 width=%2228%22 height=%225%22 rx=%222%22 fill=%22%238F5A2B%22/%3E%3C/g%3E%3C/svg%3E");background-size:600px 150px;background-position:center top}
body::after{bottom:0;height:120px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22120%22 viewBox=%220 0 600 120%22%3E%3Crect x=%220%22 y=%2292%22 width=%22600%22 height=%2228%22 fill=%22%23B9793E%22/%3E%3Crect x=%220%22 y=%2292%22 width=%22600%22 height=%224%22 fill=%22%23D79A5E%22/%3E%3Cpath d=%22M10 92l40-46 70 0-34 46z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M26 76h50M34 66h50M42 56h50%22 stroke=%22%239DB7D8%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cg transform=%22rotate(-18 190 80)%22%3E%3Crect x=%22140%22 y=%2270%22 width=%22110%22 height=%2212%22 rx=%223%22 fill=%22%23FFD84D%22/%3E%3Cpath d=%22M250 70l16 6-16 6z%22 fill=%22%23E8B887%22/%3E%3Crect x=%22140%22 y=%2270%22 width=%2212%22 height=%2212%22 fill=%22%23FF7A9A%22/%3E%3C/g%3E%3Cg transform=%22rotate(8 300 80)%22%3E%3Crect x=%22262%22 y=%2272%22 width=%2290%22 height=%2212%22 rx=%223%22 fill=%22%235BC0F8%22/%3E%3Cpath d=%22M352 72l14 6-14 6z%22 fill=%22%23E8B887%22/%3E%3Crect x=%22262%22 y=%2272%22 width=%2212%22 height=%2212%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3Crect x=%22380%22 y=%2264%22 width=%2242%22 height=%2228%22 rx=%225%22 fill=%22%23F26B6B%22/%3E%3Crect x=%22388%22 y=%2272%22 width=%2226%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.8%22/%3E%3Cg transform=%22translate(446 92)%22%3E%3Crect x=%220%22 y=%22-12%22 width=%2296%22 height=%2212%22 rx=%222%22 fill=%22%23FFE08A%22 stroke=%22%23E0B94A%22 stroke-width=%222%22/%3E%3Cpath d=%22M12 -12v6M24 -12v8M36 -12v6M48 -12v8M60 -12v6M72 -12v8M84 -12v6%22 stroke=%22%23B88A1A%22 stroke-width=%222%22/%3E%3C/g%3E%3Cg transform=%22translate(540 92)%22%3E%3Cpath d=%22M0 0c-2-34 6-60 28-62c22 2 30 28 28 62z%22 fill=%22%23FFB347%22/%3E%3Crect x=%2212%22 y=%22-26%22 width=%2232%22 height=%2220%22 rx=%225%22 fill=%22%23FF8F1F%22/%3E%3Cpath d=%22M12-62q16-18 32 0%22 stroke=%22%23D96B00%22 stroke-width=%225%22 fill=%22none%22/%3E%3Crect x=%2222%22 y=%22-18%22 width=%2212%22 height=%226%22 rx=%222%22 fill=%22%23FFD84D%22/%3E%3C/g%3E%3Ccircle cx=%2220%22 cy=%2230%22 r=%225%22 fill=%22%23FFD84D%22/%3E%3Ccircle cx=%22170%22 cy=%2240%22 r=%224%22 fill=%22%23FF7A9A%22/%3E%3Ccircle cx=%22410%22 cy=%2236%22 r=%224%22 fill=%22%23B08CFF%22/%3E%3C/svg%3E");background-size:600px 120px;background-position:center bottom}
.wrap{position:relative;z-index:1}
.sheet{border:3px solid #FFFFFF;box-shadow:0 6px 0 rgba(0,90,85,.18);border-radius:20px}
h1{color:#fff;text-shadow:0 3px 0 rgba(0,90,85,.45)}
h1::after{width:110px;height:8px;border:0;border-radius:99px;background:var(--rainbow);margin-top:10px}
.kicker{display:inline-block;padding:3px 14px;border-radius:99px;background:#FFE08A;color:#5A3B00;letter-spacing:.1em;box-shadow:0 2px 0 rgba(0,90,85,.25)}
.top .btn{background:#fff;color:var(--pen);border-color:#fff}
.btn{border-radius:12px}
:root[data-theme="dark"]{--bg:#1F6F6A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#1F6F6A}}
@media (max-width:560px){body{padding-block:120px 150px}body::before{height:120px;background-size:480px 120px}body::after{height:96px;background-size:480px 96px}}
.wrap>p.note>a{color:#fff;font-weight:600}
/* học phí: dải ô theo tháng */
.ftbl td,.ftbl th{vertical-align:middle}
.ftbl th.fmc,.ftbl td.fmc{text-align:center;padding:6px 3px;width:54px}
.fcell{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:44px;border-radius:10px;border:1.5px solid transparent;line-height:1.05}
.fcell b{font:700 16px/1 var(--f-display)}
.fcell span{font-size:11px;font-weight:700;margin-top:2px}
.fcell.paid{background:var(--green-soft);color:var(--green)}
.fcell.part{background:var(--amber-soft);color:var(--amber);border-color:var(--amber)}
.fcell.open{background:var(--sheet);color:var(--amber);border-color:var(--amber);border-style:dashed}
.fcell.free{background:var(--pen-soft);color:var(--pen)}
.fcell.none{background:transparent;color:var(--ink2);border-color:var(--line);opacity:.55}
.fcell.mini{width:22px;height:18px;border-radius:6px;font-style:normal;font-size:11px;font-weight:700;flex-direction:row;margin-right:6px;vertical-align:middle}
.flegend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink2)}
.flegend span{display:inline-flex;align-items:center}
.fsub{font-size:12px;color:var(--ink2);margin-top:2px}
.fstate{display:inline-block;padding:4px 10px;border-radius:99px;font-weight:700;font-size:13px;white-space:nowrap}
.fstate.due{background:var(--amber-soft);color:var(--amber)}
.fstate.ok{background:var(--green-soft);color:var(--green)}
.fstate.ahead,.fstate.free{background:var(--pen-soft);color:var(--pen)}
.fstate.none{color:var(--ink2)}
.fact{flex-wrap:nowrap;gap:6px}
.fact .btn{white-space:nowrap}
.ftbl td:first-child{min-width:150px}
.fsub{white-space:nowrap}
.stat.fst-due b{color:var(--amber)} .stat.fst-ok b{color:var(--green)}
.fstview{max-width:640px}
.audbox{border:2px solid var(--pen)}
.audplay{width:100%;max-width:560px}
u.ul{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700}
.fcell.hasx b{font-size:15px}
.exlist{display:flex;flex-direction:column;gap:4px;max-width:420px}
.exitem{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--sheet)}
.exitem.extot{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.cell{display:inline-block;min-width:54px;padding:2px 8px;border-radius:99px;font-weight:700;font-size:13px;text-align:center}
.cell.g,.cell.ok{background:var(--green-soft);color:var(--green)}
.cell.m{background:var(--pen-soft);color:var(--pen)}
.cell.a{background:var(--amber-soft);color:var(--amber)}
.cell.no{background:var(--red-soft);color:var(--red);font-weight:600}
.tbl.ov th{white-space:nowrap}
.attrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px dashed var(--line)}
.attbtns{display:flex;gap:6px;flex-wrap:wrap}
.attbtn{min-height:40px;padding:6px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--sheet);color:var(--ink);font:600 14px var(--f-body);cursor:pointer}
.attbtn[aria-checked="true"].p{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.attbtn[aria-checked="true"].e{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.attbtn[aria-checked="true"].a{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.payitem{padding:10px 0;border-bottom:1px dashed var(--line)}
.tbl tr.det td{background:var(--sheet)}
.subtabs{display:flex;gap:12px;flex-wrap:wrap;padding:6px 2px 10px}
.subtab{min-height:46px;padding:8px 22px;border-radius:16px;border:3px solid #fff;background:linear-gradient(#fff,#EAF8F6);color:#0B5F59;font:700 17px/1.1 var(--f-display);letter-spacing:.2px;cursor:pointer;box-shadow:0 5px 0 rgba(0,90,85,.30),0 9px 14px rgba(0,60,56,.18);transition:transform .12s,box-shadow .12s}
.subtab:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(0,90,85,.30),0 12px 16px rgba(0,60,56,.2)}
.subtab:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,90,85,.30)}
.subtab:focus-visible{outline:3px solid #FFD84D;outline-offset:2px}
.subtab[aria-selected="true"]{background:linear-gradient(#FFE27A,#FFC93C);color:#5A3A00;border-color:#fff;box-shadow:0 5px 0 rgba(150,95,0,.40),0 9px 14px rgba(0,60,56,.2)}
.tab{font-size:16px}
.tbl tr.sumrow td{border-top:2px solid var(--ink2)}
.tabs{border-bottom-color:rgba(255,255,255,.7)}
.tab{color:#0B3B37}
.tab[aria-selected="true"]{color:#fff;border-bottom-color:#fff;text-shadow:0 2px 0 rgba(0,90,85,.4)}

.tbl.ov .avgc{background:rgba(255,216,77,.28);font-weight:700}

.chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2)}
.chk input{width:18px;height:18px}
#printdoc{display:none}
@media print{
  body{background:#fff!important;padding:0!important}
  body::before,body::after{display:none!important}
  body > *:not(#printdoc){display:none!important}
  #printdoc{display:block;color:#000;font:13pt/1.5 'Times New Roman',serif}
  #printdoc h1{color:#000;text-shadow:none;text-align:center;font:700 20pt 'Times New Roman',serif;margin:0 0 8pt}
  #printdoc h1::after{display:none}
  #printdoc h2{color:#000;text-shadow:none;font:700 14pt 'Times New Roman',serif;margin:18pt 0 6pt;page-break-before:always}
  #printdoc p{margin:0 0 4pt;color:#000}
  #printdoc .pw{margin-bottom:14pt}
  #printdoc .pq{margin-top:9pt;page-break-after:avoid}
  #printdoc .po{margin-left:22pt}
  #printdoc .p-extra{margin-left:22pt;font-weight:700}
  #printdoc .p-note{font-style:italic}
  #printdoc .p-passage{margin:6pt 0 10pt;white-space:pre-wrap}
  #printdoc .pl{border-bottom:1px solid #888;height:20pt}
  #printdoc .p-key{margin:0 0 2pt}
  @page{size:A4;margin:16mm}
}

.card-row{grid-template-columns:1fr}.card-row .acts{justify-content:flex-start}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.lcard h3{font-size:19px}
.lfacts{display:grid;gap:10px;margin-top:6px}
.lf{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--bg2,rgba(0,0,0,.04));border-left:4px solid var(--pen)}
.lf.prep{background:#FFF4CC;border-left-color:#E8A400;color:#4A3500}
.lf.homew{border-left-color:#2E9E5B}
.lf.homew .lk{color:var(--green)}
.lk{font:700 12px var(--f-body);letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.lv{white-space:pre-wrap;line-height:1.5}
.llast,.lplan{display:grid;gap:8px;padding:12px 14px;border-radius:14px;border:1.5px dashed var(--line)}
.lplan{border-color:#E8A400;background:rgba(255,216,77,.12)}
.llast .btn,.lplan .btn{justify-self:start}

#printdoc .ph{color:#000;font:700 14pt 'Times New Roman',serif;margin:12pt 0 4pt}
#printdoc .pul{margin:0 0 4pt;padding-left:20pt}#printdoc .pul li{margin:0 0 2pt;color:#000}

.rpt{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.rpt svg{display:block;width:100%;height:auto}
#printdoc .psvg svg{display:block;width:auto;max-width:100%;max-height:262mm;margin:0 auto}
.listen{margin:.4rem 0 .6rem;gap:.5rem;flex-wrap:wrap}
/* main tabs: coloured floating keycaps */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border-bottom:0;overflow:visible;padding:8px 2px 16px}
.tab{--c:#2450D6;--c2:#5B86F5;--cd:#173A9E;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:86px;padding:12px 8px;margin:0;border:3px solid #fff;border-radius:20px;background:linear-gradient(#fff,#EEF3FB);color:var(--cd);font:700 16px/1.15 var(--f-display);text-align:center;white-space:normal;cursor:pointer;box-shadow:0 6px 0 var(--cd),0 12px 18px rgba(0,50,60,.22);transition:transform .12s,box-shadow .12s}
.tab[data-k="att"]{--c:#12926B;--c2:#3CC89A;--cd:#0A6347}
.tab[data-k="classes"]{--c:#E07A12;--c2:#FFAA3D;--cd:#9A5008}
.tab[data-k="log"]{--c:#7B4FD6;--c2:#A584F0;--cd:#52308F}
.tico{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--c);font-size:21px;line-height:1;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.tab:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--cd),0 15px 20px rgba(0,50,60,.24)}
.tab:active{transform:translateY(4px);box-shadow:0 2px 0 var(--cd),0 4px 8px rgba(0,50,60,.2)}
.tab:focus-visible{outline:3px solid #FFD84D;outline-offset:3px}
.tab[aria-selected="true"]{background:linear-gradient(var(--c2),var(--c));color:#fff;border-color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);transform:translateY(3px);box-shadow:0 3px 0 var(--cd),0 6px 12px rgba(0,50,60,.25)}
.tab[aria-selected="true"] .tico{background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.15)}
@media (max-width:620px){.tabs{grid-template-columns:repeat(2,1fr);gap:12px}.tab{min-height:78px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.tab{transition:none}}
/* main tabs: five keycaps */
.tabs{grid-template-columns:repeat(5,1fr)}
.tab[data-k="wheel"]{--c:#D6407F;--c2:#FF7AAE;--cd:#8F1F52}
@media (max-width:760px){.tabs{grid-template-columns:repeat(2,1fr)}.tab:last-child:nth-child(odd){grid-column:1/-1}}
/* lucky wheel */
.wgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.wgrid{grid-template-columns:1fr}}
.wleft{display:flex;flex-direction:column;gap:12px;align-items:center}
.wstage{position:relative;width:100%;max-width:560px;aspect-ratio:1;filter:drop-shadow(0 12px 18px rgba(0,40,50,.35))}
.wsvg{width:100%;height:100%;display:block}
.wptr{position:absolute;left:50%;top:-1%;width:0;height:0;transform:translateX(-50%);border-left:20px solid transparent;border-right:20px solid transparent;border-top:42px solid #FFD84D;filter:drop-shadow(0 3px 0 #8F5C00)}
.wgo{position:absolute;left:50%;top:50%;width:17.5%;height:17.5%;transform:translate(-50%,-50%);border-radius:50%;border:0;background:linear-gradient(#FFE27A,#FFB400);color:#5A3A00;font:800 clamp(13px,3.2vw,22px)/1 var(--f-display);cursor:pointer;box-shadow:0 5px 0 #A66A00}
.wgo:hover:not(:disabled){filter:brightness(1.06)}
.wgo:active:not(:disabled){transform:translate(-50%,-47%);box-shadow:0 2px 0 #A66A00}
.wgo:disabled{cursor:default;opacity:.8}
.wbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.wside{min-width:0}
.wstu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 10px;max-height:260px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:10px}
.wchk.done{opacity:.55;text-decoration:line-through}
.wrecent{margin:0;padding-left:20px}
.wmodal{position:fixed;inset:0;z-index:1200;background:rgba(10,25,40,.62);display:grid;place-items:center;padding:16px;overflow:hidden}
.wcard{background:#fff;color:#14213D;border-radius:28px;border:5px solid #FFD84D;padding:28px 26px;text-align:center;min-width:min(92vw,420px);max-width:92vw;box-shadow:0 10px 0 #C79400,0 24px 40px rgba(0,0,0,.4);animation:wpop .45s cubic-bezier(.2,1.5,.4,1)}
.wlabel{font:700 15px var(--f-body);color:#4B5B76;letter-spacing:.5px;text-transform:uppercase}
.wname{font:800 clamp(34px,9vw,76px)/1.1 var(--f-display);margin:12px 0 18px;overflow-wrap:anywhere;color:#2450D6}
.wacts{justify-content:center;gap:10px}
@keyframes wpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.conf{position:absolute;top:-14px;width:10px;height:16px;border-radius:2px;animation:wfall linear forwards;pointer-events:none}
@keyframes wfall{to{top:105%;transform:translateX(40px) rotate(720deg)}}
.wheelwrap.wfull{position:fixed;inset:0;z-index:1000;overflow:auto;padding:20px;background:radial-gradient(circle at 50% 30%,#2F6F9F,#0F2740)}
.wheelwrap.wfull .wgrid{grid-template-columns:1fr}
.wheelwrap.wfull .wside{display:none}
.wheelwrap.wfull .wstage{max-width:min(86vh,92vw)}
.wexit{position:fixed;right:16px;top:16px;z-index:1100}
@media (prefers-reduced-motion:reduce){.wcard{animation:none}.conf{display:none}}
/* six main tabs */
.tabs{grid-template-columns:repeat(3,1fr)}
@media (min-width:1080px){.tabs{grid-template-columns:repeat(6,1fr)}}
@media (max-width:760px){.tabs{grid-template-columns:repeat(2,1fr)}.tab:last-child:nth-child(odd){grid-column:auto}}
.tab[data-k="honor"]{--c:#D4A017;--c2:#FFD34D;--cd:#8A6500}
/* bảng thành tích */
.hwkbar{flex-wrap:wrap;gap:10px}
.hwk{font:700 17px var(--f-display);padding:0 6px}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:stretch}
@media (max-width:820px){.hgrid{grid-template-columns:1fr}}
.hlab{font:700 14px var(--f-body);letter-spacing:.3px;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.hbest{border-radius:18px;padding:16px 18px;background:linear-gradient(160deg,#FFF3C4,#FFE08A);color:#4A3200;border:3px solid #fff;box-shadow:0 5px 0 rgba(150,100,0,.35)}
.hbest .hlab{color:#7A5400}
.hbest.empty{background:var(--sheet);color:var(--ink);box-shadow:none;border:1px dashed var(--line)}
.hname{font:800 clamp(24px,4vw,34px)/1.1 var(--f-display);overflow-wrap:anywhere;margin-bottom:6px}
.hscore{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
.hscore strong{font:800 40px/1 var(--f-display)}
.hworst{border-radius:18px;padding:14px 16px;background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 28%,transparent)}
.hworst .hlab{color:var(--red)}
.hw{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line)}
.hw:first-of-type{border-top:0}
.hrank{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:var(--sheet);font-weight:800}
.hw .stack{flex:1;min-width:0;gap:6px}
.hpts{font-weight:700;color:var(--red)}
.tbl td.hot{background:var(--red-soft);font-weight:700;color:var(--red)}
.tbl td.muted{color:var(--ink2)}
.f.inl{flex-direction:row;align-items:center;gap:8px}

.qrbox{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;align-items:start}
.qrfig{margin:0;display:grid;gap:8px;justify-items:center}
.qrimg{width:100%;max-width:300px;height:auto;background:#fff;border:1px solid var(--line);border-radius:14px}
.qrfig figcaption{font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--ink2);text-align:center;overflow-wrap:anywhere}
.qrinfo textarea{resize:vertical;line-height:1.5}
.qrinfo input[readonly]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:640px){.qrbox{grid-template-columns:1fr}.qrfig{justify-items:center}}

.alf{align-items:center}
.alf .f.inl{flex-direction:row;align-items:center;gap:8px}
.chk.hidecl{font-weight:600;color:var(--ink);padding:6px 12px;border:1.5px solid var(--line);border-radius:99px;background:var(--sheet);cursor:pointer}
.chk.hidecl input{width:17px;height:17px;accent-color:var(--pen)}
.rvq .num{flex:none}
.rvopts{display:grid;gap:8px}
.rvopt{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1.5px solid var(--line);border-radius:12px}
.rvopt.good{border-color:var(--green);background:var(--green-soft)}
.rvopt .l{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--line);font-weight:800;font-size:13px;flex:none}
.rvn{margin-left:auto;font-size:13px;color:var(--ink2);white-space:nowrap}
.rvfill{color:var(--green);border-bottom:2px solid var(--green);padding:0 2px}
.rvh{color:var(--red)}
.rvwrong{display:flex;flex-wrap:wrap;gap:8px}
.rvchip{padding:6px 10px;border-radius:10px;background:var(--red-soft);color:var(--ink);font-size:14px;overflow-wrap:anywhere}
.rvchip.full{background:var(--bg2,rgba(0,0,0,.04));flex:1 1 100%}
.rvwr summary,.rvsay summary{cursor:pointer;font-weight:700;color:var(--ink2)}
.rvbig .qtext{font-size:26px;line-height:1.5}
.rvbig .rvopt{font-size:22px;padding:12px 16px}
.rvbig .rvchip{font-size:18px}
.rvbig .ans.fix{font-size:22px}

/* 7 main tabs + class practice + pronunciation pictures */
.tab[data-k="practice"]{--c:#1596A8;--c2:#4FD0E0;--cd:#0A6572}
.tabs{grid-template-columns:repeat(4,1fr)}
@media (min-width:1360px){.tabs{grid-template-columns:repeat(7,1fr)}}
@media (max-width:760px){.tabs{grid-template-columns:repeat(2,1fr)}.tab:last-child:nth-child(odd){grid-column:1/-1}}
.practice{border:2px solid #4FD0E0}
.pimg{display:block;max-width:100%;width:240px;height:auto;background:#fff;border:1px solid var(--line);border-radius:14px;margin:4px auto}
.pimg.sm{width:120px;margin:0}
.speak-word.revealed{font-weight:800}
.pscore{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;font-weight:700}
.pscore:empty{display:none}
.pscore .pnum{font:800 38px/1 var(--f-display)}
.pscore .pof{color:var(--ink2)}
.pscore .pverdict{font-size:15px;margin-left:6px}
.pscore.pass{background:var(--green-soft);color:var(--green)}
.pscore.fail{background:var(--red-soft);color:var(--red)}

/* board (on-the-wall) mode */
.boardmode .wrap{max-width:1180px}
.boardwho{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.boardwho strong{font:800 34px/1.1 var(--f-display)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.bstu{display:grid;gap:4px;text-align:left;padding:14px 16px;border:2px solid var(--line);border-radius:16px;background:var(--sheet);color:var(--ink);cursor:pointer;font:inherit;box-shadow:0 3px 0 var(--line)}
.bstu:hover{border-color:#1596A8}
.bstu .bname{font:800 20px/1.2 var(--f-display);overflow-wrap:anywhere}
.bstu .bsc{font-size:14px;color:var(--ink2);font-weight:700}
.bstu.done{background:var(--green-soft)}
.bstu.done .bsc{color:var(--green)}
.bstu.hl{background:#FFE27A;border-color:#E8A400;transform:scale(1.04)}
.boardmode .qtext{font-size:24px;line-height:1.5}
.boardmode .pimg{width:min(360px,70%)}
.boardmode .speak-word{font-size:40px}
.boardmode .btn{font-size:18px;padding:12px 20px}
.boardmode .btn.sm{font-size:16px}
.boardmode .pscore .pnum{font-size:64px}
.boardmode .pscore .pverdict{font-size:22px}
.boardmode .scorebox .score{font-size:84px}
.boardmode .opt{font-size:22px}

/* board review (chữa bài trực tiếp) */
.boardhead .bscore{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bbig{font:800 78px/1 var(--f-display);color:#2447D0}
.bof{font-size:22px;color:var(--ink2);align-self:flex-end;padding-bottom:10px}
.btxt{gap:4px}
.bstrip{display:flex;gap:8px;flex-wrap:wrap}
.bnum{width:46px;height:46px;border-radius:14px;border:2px solid var(--line);background:var(--sheet);color:var(--ink);font:800 18px var(--f-display);cursor:pointer}
.bnum.ok{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.bnum.bad,.bnum.skip{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.bnum.wait{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.bnum.cur{outline:4px solid #1596A8;outline-offset:2px}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.segb{border:0;background:var(--sheet);color:var(--ink);padding:10px 16px;font:700 15px var(--f-body);cursor:pointer}
.segb.on{background:#1596A8;color:#fff}
.bq{border-left:8px solid var(--line)}
.bq.ok{border-left-color:var(--green)}
.bq.bad,.bq.skip{border-left-color:var(--red)}
.bq.wait{border-left-color:var(--amber)}
.bpill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-weight:800}
.bpill.ok{background:var(--green-soft);color:var(--green)}
.bpill.bad{background:var(--red-soft);color:var(--red)}
.bpill.wait{background:var(--amber-soft);color:var(--amber)}
.bans{padding:12px 16px;border-radius:14px;font-weight:700;font-size:1.15em;overflow-wrap:anywhere;white-space:pre-wrap}
.bans.ok{background:var(--green-soft);color:var(--green)}
.bans.bad{background:var(--red-soft);color:var(--red)}
.bans.wait{background:var(--amber-soft);color:var(--ink)}
.bkey{padding:12px 16px;border-radius:14px;background:var(--green-soft);color:var(--green);font:800 1.4em var(--f-display);overflow-wrap:anywhere}
.rvopt.wrongpick{border-color:var(--red);background:var(--red-soft)}
.bact .btn{min-height:44px}
.bnav{position:sticky;bottom:8px}
.bfs0{font-size:15px}.bfs1{font-size:18px}.bfs2{font-size:23px}.bfs3{font-size:30px}
.bfs0 .qtext,.bfs1 .qtext,.bfs2 .qtext,.bfs3 .qtext{font-size:1.45em}
.bfs2 .rvopt,.bfs3 .rvopt{font-size:1.1em}
.bnav{background:#fff;border-radius:16px;padding:8px 10px;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:5}
.qbody>.pimg{width:190px}.boardmode .qbody>.pimg{width:min(260px,60%)}
.pscore.star{background:#FFF3C4;color:#8A5A00}.pscore.star .pverdict{color:#8A5A00}
.zalo{background:var(--bg2,#F4F8FB);border:1.5px dashed var(--line);border-radius:14px;padding:14px}.zta{width:100%;font:14px/1.5 var(--f-body,inherit);white-space:pre-wrap;resize:vertical}
.btn.zl{background:#0A7CFF;border-color:#0A7CFF;color:#fff}
.idhint{text-align:center;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.bstu.admin{border-style:dashed;background:#FFF8DC}
.bulk{background:#F4F8FB;border:1.5px dashed var(--line);border-radius:14px;padding:12px 14px}
.bulkrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.rowpick{width:22px;height:22px;flex:none;accent-color:#2547d0}
.card-row.picked{background:#EEF3FF;border-radius:12px}
.card-row.closed>div:first-child{opacity:.5}
.chip.expired{background:#FDE3E3;color:#C62828;border-color:#F3B4B4;font-weight:700}
.ovpick{display:grid;gap:6px;max-height:260px;overflow:auto;padding:8px 10px;background:#F4F8FB;border-radius:12px}.ovitem.closed{opacity:.6}

/* student passwords */
.pin{letter-spacing:.5em;text-align:center;font-size:1.4rem;max-width:11rem}
.pinlist{display:grid;gap:6px}
.pinrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--line,#e5e0d6)}
.pinname{min-width:0;overflow-wrap:anywhere}
.pinedit{width:6rem;text-align:center;letter-spacing:.2em;font-variant-numeric:tabular-nums}

.accbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.acc{font:inherit;font-size:.85rem;padding:5px 12px;border-radius:999px;border:1.5px solid var(--line,#d8d2c4);background:transparent;color:inherit;cursor:pointer}
.acc.on{background:var(--accent,#2f6f5e);border-color:var(--accent,#2f6f5e);color:#fff;font-weight:600}

/* student analysis */
.anlist{display:grid;gap:6px}
.anrow{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:4px 10px;align-items:center;text-align:left;font:inherit;color:inherit;background:transparent;border:1.5px solid var(--line,#d8d2c4);border-radius:12px;padding:10px 12px;cursor:pointer}
.anrow.sel{border-color:var(--accent,#2f6f5e);background:color-mix(in srgb,var(--accent,#2f6f5e) 8%,transparent)}
.anname{font-weight:600;min-width:0;overflow-wrap:anywhere}
.anpts{font-variant-numeric:tabular-nums;font-weight:700}
.anmini{grid-column:2/-1;font-size:.82rem;opacity:.75}
.antr{min-width:1em;font-size:.9rem}
.anlv{font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap}
.lv-xs{color:#9a6b00}.lv-tot{color:#1f7a4d}.lv-kha{color:#2b5fb4}.lv-cg{color:#b4472b}.lv-none{color:#777}
.antiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.antile{border:1.5px solid var(--line,#d8d2c4);border-radius:12px;padding:10px;text-align:center}
.ant-v{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}.ant-l{font-size:.78rem;opacity:.75}
.anverd{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.anv{border:1.5px solid var(--line,#d8d2c4);border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.anv-q{font-size:.8rem;opacity:.75;text-transform:uppercase;letter-spacing:.04em}.anv-a{font-size:1.2rem;font-weight:700}.anv-t{font-size:.9rem}
.pg-up .anv-a,.ol-great .anv-a,.ol-good .anv-a{color:#1f7a4d}.pg-down .anv-a,.ol-care .anv-a{color:#b4472b}.pg-flat .anv-a,.ol-ok .anv-a{color:#2b5fb4}
.anskills{display:grid;gap:6px}
.ansk{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:10px;align-items:center}
.ansk-bar{height:14px;border-radius:99px;background:color-mix(in srgb,currentColor 12%,transparent);overflow:hidden}
.ansk-bar i{display:block;height:100%;border-radius:99px}.ansk-bar i.g{background:#2e9e6a}.ansk-bar i.y{background:#d9a21b}.ansk-bar i.r{background:#d0553a}
.ansk-v{font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.anline svg{width:100%;height:auto;max-width:560px}
.antwo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.anrows{display:grid;gap:4px}
.anr{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line,#e5e0d6);font-size:.9rem}
.anr-t{min-width:0;overflow-wrap:anywhere}.anr-s{white-space:nowrap;font-variant-numeric:tabular-nums}.anr.missed .anr-s{color:#b4472b;font-weight:600}.anr.pending{opacity:.65}
@media(max-width:520px){.ansk{grid-template-columns:1fr}.anr{flex-direction:column;gap:2px}}

/* video bài nói */
.vtop{position:relative;border-radius:14px;overflow:hidden;background:#111;max-width:420px;margin-inline:auto;width:100%;aspect-ratio:4/3}
.vlive,.vplay{width:100%;display:block;background:#111;border-radius:14px;max-height:60vh}
.vlive{height:100%;object-fit:cover;transform:scaleX(-1)}
.vplay{max-width:480px;margin-inline:auto}
.vrec{position:absolute;top:8px;left:8px;background:rgba(199,50,50,.92);color:#fff;font-weight:700;font-size:14px;padding:3px 10px;border-radius:999px}
.vrows{display:flex;flex-direction:column;gap:6px}
.vline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--sheet);font-size:17px;line-height:1.35}
.vline .vtxt{min-width:0;overflow-wrap:anywhere}
.vline small{display:block;color:var(--ink2);font-size:13px}
.vline.cue{background:var(--bg);color:var(--ink2);border-style:dashed}
.vline.cur{border-color:var(--pen);background:var(--pen-soft);box-shadow:0 0 0 3px var(--pen-soft);font-weight:700}
.vline.v-fail{border-color:var(--red);background:var(--red-soft)}
.vline.v-pass{border-color:var(--green);background:var(--green-soft)}
.vline.v-star{border-color:var(--star);background:#FFF3C4}
.vsc{font:800 20px/1 var(--f-display);flex:none}
.vtag{font-size:12px;font-weight:700;flex:none}
.chipbtn{border:2px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-weight:600;cursor:pointer}
.chipbtn.on{border-color:var(--pen);background:var(--pen-soft);color:var(--pen)}
.vdetail{padding:8px 0}
.note.bad{color:var(--red)}
/* 8 tab chính: luôn 4 tab một dòng (dòng trên: buổi học; dòng dưới: bài tập, kết quả, lớp) */
.tab[data-k="video"]{--c:#D6402F;--c2:#FF7B66;--cd:#8F2217}
@media (min-width:761px){.tabs{grid-template-columns:repeat(4,1fr)!important}}

/* video: câu đã nói thì mờ đi, câu đến lượt có ký hiệu 👉 nhấp nháy */
.vline.past{opacity:.38;filter:grayscale(.5);transform:scale(.98)}
.vline.past .vtxt{text-decoration:line-through;text-decoration-thickness:1px}
.vline{transition:opacity .35s,transform .35s}
.vmark{flex:none;font-size:22px;line-height:1;width:28px;text-align:center}
.vline.cur .vmark{animation:vpoint .7s ease-in-out infinite alternate}
.vline.mine{border-style:solid;border-width:3px;font-size:19px}
.vline.hear{border-style:dashed}
.vtag.go{background:var(--pen);color:var(--pen-ink);padding:3px 10px;border-radius:999px;font-size:13px}
.vline.hear .vtag.go{background:var(--ink2)}
@keyframes vpoint{from{transform:translateX(-3px)}to{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.vline.cur .vmark{animation:none}}
.vline .vtxt{flex:1}

.vtop+.row{justify-content:center}

/* ghi âm: bảng micro thay cho hình camera */
.vtop{aspect-ratio:auto}
.vlive.vmic{height:auto;min-height:120px;transform:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;background:#17202e;color:#e8eefc;object-fit:initial}
.vmic-i{font-size:42px;line-height:1}
.vmic.on .vmic-i{animation:vmicp 1.2s ease-in-out infinite}
.vmic-t{font-size:14px;font-weight:600}
audio.vplay{height:48px;max-height:none;background:transparent}
@keyframes vmicp{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.vmic.on .vmic-i{animation:none}}

/* ô tìm tên học sinh */
.nsrch{max-width:320px}
.namesearch{width:100%}
.selrow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.selrow>label{flex:1 1 220px;margin:0}.selrow>.nsrch{max-width:none}.nschips{align-items:center;flex-wrap:wrap}
.ovcls{margin:8px 0 0;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.andims{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.andim{border:1.5px solid var(--line,#d8d2c4);border-left-width:5px;border-radius:12px;padding:10px 12px;display:grid;gap:3px}
.andim.g{border-left-color:#2e9e6a}.andim.y{border-left-color:#d9a21b}.andim.r{border-left-color:#d0553a}.andim.b{border-left-color:#2b5fb4}
.andim-a{font-size:1.05rem;font-weight:700}
.anconf{font-size:.78rem;opacity:.7;margin-top:2px}
.anbasis{margin:4px 0 0;padding-left:1.1em;font-size:.85rem;display:grid;gap:2px}
.anfc{font-size:.88rem;margin-top:4px;padding:6px 8px;border-radius:8px;background:color-mix(in srgb,currentColor 7%,transparent)}
.anflags{display:grid;gap:6px}
.anflag{font-size:.9rem;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line,#d8d2c4)}
.anflag.warn{border-color:#d0553a;background:color-mix(in srgb,#d0553a 9%,transparent)}

/* màn hình máy tính: trang giáo viên dùng khổ rộng, điện thoại giữ nguyên một cột như cũ */
@media (min-width:1024px){
  body{padding-inline:28px}
  .wrap{max-width:980px}
  .wrap.wide{max-width:min(1480px,100%)}
  .wrap.wide .sheet{padding:24px 28px}
  .wrap.wide .tbl{font-size:15px}
  .wrap.wide .fact{flex-wrap:wrap;max-width:470px}
}
@media (min-width:1440px){
  .wrap.wide{font-size:17px}
}