/* Layout: app shell một cột, đầu trang dính, thanh điều hướng dưới (mobile-first); thẻ bài học mở toàn màn hình */
:root{
  --bg:#F5F9F9; --surface:#FFFFFF; --ink:#2A1C12; --mute:#6B5E55; --line:#E1E8E9;
  --teal:#4AAFB9; --teal-d:#2B8790; --teal-l:#E3F2F4; --brown:#3B2014;
  --orange:#E97B2C; --orange-l:#FDEEE2; --ok:#2E8B5A; --ok-l:#E3F4EA; --bad:#C2462E; --bad-l:#FBE7E2;
  --brown-l:#F4EDE8; --on-teal:#FFFFFF; --shadow:0 1px 2px rgba(43,135,144,.08),0 6px 18px rgba(43,135,144,.06);
  --f:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1718; --surface:#172224; --ink:#ECF2F1; --mute:#A2B0AF; --line:#283638;
  --teal:#5BC2CC; --teal-d:#86D6DD; --teal-l:#1A3134; --brown:#F0DCCB;
  --orange:#F2944E; --orange-l:#3A291B; --ok:#5CC28A; --ok-l:#16302A; --bad:#EE8A73; --bad-l:#3A201B;
  --brown-l:#2A211B; --on-teal:#0F1718; --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1718; --surface:#172224; --ink:#ECF2F1; --mute:#A2B0AF; --line:#283638;
  --teal:#5BC2CC; --teal-d:#86D6DD; --teal-l:#1A3134; --brown:#F0DCCB;
  --orange:#F2944E; --orange-l:#3A291B; --ok:#5CC28A; --ok-l:#16302A; --bad:#EE8A73; --bad-l:#3A201B;
  --brown-l:#2A211B; --on-teal:#0F1718; --shadow:none; color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{font-family:var(--f);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
h1,h2,h3{color:var(--brown);line-height:1.25;text-wrap:balance;margin:0}
.wrap{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:12px 110px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .in{max-width:760px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo b{font-size:22px;font-weight:800;letter-spacing:2px;color:var(--teal)}
.logo small{font-size:8.5px;font-weight:700;letter-spacing:2.2px;color:var(--brown);margin-top:3px}
.top .app{font-size:12px;color:var(--mute);border-left:1px solid var(--line);padding-left:12px}
.top .me{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);min-width:0}
.top .me span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.av{width:32px;height:32px;border-radius:50%;background:var(--teal);color:var(--on-teal);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav .in{max-width:760px;margin:0 auto;display:flex}
.nav button{flex:1;background:none;border:0;padding:9px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--mute)}
.nav button svg{width:22px;height:22px}
.nav button[aria-current="page"]{color:var(--teal-d)}
.nav button[aria-current="page"] svg{color:var(--orange)}

/* common */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal-d)}
.muted{color:var(--mute)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--ok-l);color:var(--ok)}
.pill.bad{background:var(--bad-l);color:var(--bad)}
.pill.new{background:var(--teal-l);color:var(--teal-d)}
.pill.wk{background:var(--orange-l);color:var(--orange)}
.btn{border:0;border-radius:10px;padding:11px 16px;font-weight:700;background:var(--teal);color:var(--on-teal)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn.orange{background:var(--orange);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.block{width:100%}
.banner{font-size:12.5px;padding:9px 12px;border-radius:10px;background:var(--orange-l);color:var(--ink)}
.banner b{color:var(--orange)}

/* home */
.hello h1{font-size:24px;margin-top:4px}
.hello p{margin:4px 0 0}
.remind{background:var(--teal);color:var(--on-teal);border-radius:16px;padding:18px}
.remind .eyebrow{color:var(--on-teal);opacity:.8}
.remind p{margin:8px 0 0;font-size:17px;font-weight:600;line-height:1.45}
.prog{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.ring{width:84px;height:84px}
.ring text{fill:var(--brown);font-weight:800;font-size:20px;font-family:var(--f)}
.next{display:flex;gap:12px;align-items:center;border:1.5px solid var(--teal);background:var(--teal-l);border-radius:14px;padding:14px;text-align:left;width:100%}
.next .ic{width:40px;height:40px;border-radius:10px;background:var(--teal);color:var(--on-teal);display:grid;place-items:center;flex:none;font-weight:800}
.next .tx{min-width:0;flex:1}
.next b{display:block;color:var(--brown)}
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stage{border-radius:12px;padding:10px;background:var(--surface);border:1px solid var(--line);min-width:0}
.stage .k{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--orange);text-transform:uppercase}
.stage .t{font-size:12.5px;font-weight:600;margin-top:2px}
.stage .bar{height:5px;border-radius:5px;background:var(--line);margin-top:8px;overflow:hidden}
.stage .bar i{display:block;height:100%;background:var(--teal)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
.fact .eyebrow{color:var(--orange)}
.fact b{display:block;color:var(--brown);margin-top:3px;font-size:14px}

/* path */
.group h2{font-size:16px;margin-bottom:8px;display:flex;gap:8px;align-items:baseline}
.group h2 small{font-size:12px;color:var(--mute);font-weight:500}
.mod{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.mod + .mod{margin-top:8px}
.mod .no{width:34px;height:34px;border-radius:9px;background:var(--teal-l);color:var(--teal-d);font-weight:800;display:grid;place-items:center;flex:none;font-size:13px}
.mod.done .no{background:var(--ok);color:#fff}
.mod .tx{flex:1;min-width:0}
.mod .tx b{display:block;font-size:14.5px}
.mod .tx span{font-size:12px;color:var(--mute)}

/* lesson overlay */
.sheet{position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet .bar{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:2}
.sheet .bar .in{max-width:720px;margin:0 auto;padding:10px 16px;display:flex;gap:10px;align-items:center}
.sheet .bar button{background:none;border:0;display:flex;align-items:center;gap:4px;font-weight:600;color:var(--teal-d);padding:6px 0}
.sheet .body{max-width:720px;margin:0 auto;padding-inline:16px;padding-block:18px 60px}
.lesson h1{font-size:23px;margin:6px 0 4px}
.sec{margin-top:22px}
.sec h3{font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sec h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
.sec p{margin:0 0 10px;max-width:65ch}
.sec ul,.sec ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.sec ul li::marker{color:var(--orange)}
.sec ol{list-style:none;padding:0;counter-reset:s}
.sec ol li{counter-increment:s;position:relative;padding-left:36px;min-height:26px}
.sec ol li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--on-teal);font-weight:800;font-size:13px;display:grid;place-items:center}
.quote{border-left:4px solid var(--teal);padding:4px 0 4px 14px;font-size:16.5px;font-weight:600;color:var(--brown)}
.note{background:var(--orange-l);border-radius:10px;padding:11px 14px;font-size:14px}
.never{background:var(--bad-l);border-radius:10px;padding:12px 14px}
.never b{color:var(--bad);font-size:12px;letter-spacing:1px;text-transform:uppercase}
.never ul{margin-top:6px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;background:var(--teal);color:var(--on-teal);font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;padding:8px 12px}
.tbl td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl td:first-child{font-weight:700;color:var(--brown);white-space:nowrap}
.vals{display:grid;gap:10px}
.val{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.val .h{display:flex;gap:12px;align-items:center;background:var(--teal);color:var(--on-teal);padding:10px 14px}
.val .L{width:34px;height:34px;border-radius:50%;background:var(--surface);color:var(--orange);font-weight:800;display:grid;place-items:center;font-size:17px;flex:none}
.val .h b{display:block}
.val .h i{font-size:12.5px;opacity:.9;font-style:normal}
.val .b{padding:10px 14px 12px;font-size:14px}
.val .b ul{padding-left:18px;margin:0 0 8px;display:flex;flex-direction:column;gap:4px}
.val .x{color:var(--bad);font-size:13.5px}
.letter p{font-size:15.5px;line-height:1.7}

/* quiz */
.qhead{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mute)}
.qbar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:8px}
.qbar i{display:block;height:100%;background:var(--orange);transition:width .3s}
.q{font-size:18px;font-weight:700;color:var(--brown);margin:18px 0 14px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.opt .k{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;color:var(--mute)}
.opt.right{border-color:var(--ok);background:var(--ok-l)}
.opt.right .k{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-l)}
.opt.wrong .k{background:var(--bad);border-color:var(--bad);color:#fff}
.opt:disabled{cursor:default}
.why{margin-top:14px;border-radius:12px;padding:12px 14px;font-size:14px}
.why.ok{background:var(--ok-l)} .why.bad{background:var(--bad-l)}
.why b{display:block;margin-bottom:2px}
.result{text-align:center;padding:24px 8px}
.result .big{font-size:56px;font-weight:800;color:var(--brown);line-height:1;font-variant-numeric:tabular-nums}

/* grow */
.levels{display:grid;gap:10px}
.lv{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.lv .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none;background:var(--line);color:var(--mute)}
.lv.on .n{background:var(--orange);color:#fff}
.lv .tx{flex:1;min-width:0}
.lv .tx b{color:var(--brown)}
.lv .tx p{margin:2px 0 0;font-size:13px;color:var(--mute)}
.scores .s{display:grid;grid-template-columns:1fr 110px 44px;gap:10px;align-items:center;font-size:13.5px;padding:7px 0;border-top:1px solid var(--line)}
.scores .s:first-child{border-top:0}
.scores .s span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb{height:7px;border-radius:7px;background:var(--line);overflow:hidden}
.mb i{display:block;height:100%;background:var(--teal)}
.scores .s em{font-style:normal;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.obs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.obs div{border-radius:10px;padding:8px;text-align:center;font-size:12px;border:1px solid var(--line)}
.obs div b{display:block;font-size:18px;color:var(--orange)}
label{font-size:13px;font-weight:600;display:block;margin-bottom:5px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px}
textarea{min-height:64px;resize:vertical}
.form{display:grid;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600}
.chip[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-l);color:var(--teal-d)}

/* admin */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
.tile b{display:block;font-size:24px;font-weight:800;color:var(--brown);font-variant-numeric:tabular-nums}
.tile span{font-size:12px;color:var(--mute)}
.staff{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.staff table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
.staff th{text-align:left;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--mute);padding:9px 12px;border-bottom:1px solid var(--line)}
.staff td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
.staff td b{color:var(--brown)}
.staff .mb{width:90px;display:inline-block;vertical-align:middle;margin-right:6px}
.miss{display:flex;flex-direction:column;gap:8px}
.miss div{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.miss em{font-style:normal;font-weight:800;color:var(--bad);min-width:42px;font-variant-numeric:tabular-nums}
.sample{font-size:11px;font-weight:700;color:var(--orange);letter-spacing:1px;text-transform:uppercase}
.modal{position:fixed;inset:0;z-index:60;background:rgba(10,20,20,.45);display:grid;place-items:end center;padding:16px}
.modal .card{width:100%;max-width:520px;max-height:90vh;overflow-y:auto}
.obsedit{display:grid;gap:10px}
.obsedit .r{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:7px 11px;font-size:12.5px;font-weight:600}
.seg button[aria-pressed="true"].y{background:var(--ok);color:#fff}
.seg button[aria-pressed="true"].n{background:var(--orange);color:#fff}
.empty{text-align:center;padding:28px 16px}
.empty b{display:block;color:var(--brown);font-size:16px}
.skel{height:14px;border-radius:7px;background:var(--line);margin:8px 0}

@media (max-width:560px){
  .tiles{grid-template-columns:1fr 1fr}
  .journey{grid-template-columns:1fr 1fr}
  .obs{grid-template-columns:1fr 1fr}
  .top .app{display:none}
  .scores .s{grid-template-columns:1fr 70px 40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- bổ sung cho bản chính thức ---------- */
html,body{margin:0}
a{color:var(--teal-d)}
body.auth .nav,body.auth .top .me{display:none}
.auth-wrap{max-width:420px;margin:0 auto;padding-top:18px;display:flex;flex-direction:column;gap:14px}
.auth-brand{text-align:center;padding:10px 0 4px}
.auth-brand .logo{align-items:center}
.logo.big b{font-size:34px;letter-spacing:4px}
.logo.big small{font-size:10px;letter-spacing:3px;margin-top:5px}
.auth-brand .pname{font-size:20px;font-weight:800;color:var(--brown);margin-top:14px}
.auth-brand .muted{font-size:13.5px}
.auth-msg{background:var(--bad-l);color:var(--bad);border-radius:10px;padding:10px 14px;font-size:14px;font-weight:600}
.linkbtn{background:none;border:0;color:var(--teal-d);font-weight:600;font-size:14px;padding:6px;align-self:center}
.mebtn{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--mute);font-size:12.5px;min-width:0}
.mebtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.danger{color:var(--bad);border-color:var(--bad-l)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:70;background:var(--brown);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13.5px;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.people{display:flex;flex-direction:column;gap:8px}
.person{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.person .tx{flex:1;min-width:0}
.person .tx b{display:block;color:var(--brown);font-size:14.5px}
.person .tx>span{font-size:12px;color:var(--mute)}
.person .sm{font-size:12px;color:var(--mute)}
.person .pill{flex:none}
.pend{display:flex;flex-direction:column}
.pend .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.pend .r:first-child{border-top:0}
.pend .r b{display:block;font-size:14px}
.pend .r span{font-size:12px;color:var(--mute)}
ul.plain{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.person .chev{font-size:22px;color:var(--mute);flex:none}
.top .logo{flex:none;white-space:nowrap}
.next.warn{border-color:var(--orange);background:var(--orange-l)}
.next.warn .ic{background:var(--orange);color:#fff}
.next .sm{display:block;font-size:12px;color:var(--mute)}
.checks{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ckb{display:flex;gap:10px;align-items:flex-start;text-align:left;background:none;border:0;padding:6px 2px;font-size:14px}
.ckb .bx{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.ckb[aria-pressed="true"] .bx{background:var(--ok);border-color:var(--ok)}
.ckb[aria-pressed="true"] span:last-child{color:var(--mute);text-decoration:line-through}
.ckl{display:flex;flex-direction:column}
.tick{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14px}
.tick input{width:20px;height:20px;flex:none;margin-top:1px}
.sbtn{width:100%;background:none;border:0;text-align:left;padding:7px 0;border-top:1px solid var(--line)}
.scores .sbtn:first-child{border-top:0}
.tdl .r,.tde .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.tdl .r:first-child,.tde .r:first-child{border-top:0}
.tdl em{font-style:normal;font-weight:700;color:var(--brown);flex:none}
.tde .r span{flex:1;min-width:0}
.tde .seg button.m[aria-pressed="true"]{background:var(--teal);color:#fff}
.tde .seg button.n[aria-pressed="true"]{background:var(--bad);color:#fff}
.tde .seg button.y[aria-pressed="true"]{background:var(--ok);color:#fff}
.tde .seg button{min-width:38px}
.tde .r{flex-wrap:wrap}
.ckrow{width:100%;background:none;border:0;text-align:left;cursor:pointer}
.ckrow>div{flex:1;min-width:0}
.cktext{font-size:14.5px;line-height:1.6;white-space:normal;overflow-wrap:anywhere}
.chips.sm .chip{padding:4px 10px;font-size:12px}
.nops{display:flex;flex-direction:column;margin-top:8px}
.nopr{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 0}
.nopr:first-child{border-top:0}
.nopr .tx{flex:1;min-width:0}.nopr .tx b{display:block;font-size:14px;color:var(--brown)}.nopr .tx > span{display:block;font-size:12px;color:var(--mute)}.nopr .nst{margin-top:4px}
.tl3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tl3>div{background:var(--teal-l);border-radius:10px;padding:10px 6px;min-width:0;text-align:center;display:flex;flex-direction:column;justify-content:center}
.tl3 b{display:block;font-size:17px;color:var(--brown);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl3 span{font-size:11.5px;color:var(--mute);line-height:1.3;display:block}
.teps{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.tep{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--surface);min-width:0}
.tep .th{width:44px;height:44px;border-radius:8px;background:var(--line) center/cover no-repeat;flex:none}
.tep .th.doc{display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--teal-d);background:var(--teal-l)}
.tep .nm{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x{background:none;border:0;font-size:20px;line-height:1;color:var(--bad);padding:4px 8px}
.lk{display:block;font-size:13px;overflow-wrap:anywhere;margin:4px 0}
.rws{display:flex;flex-direction:column;gap:10px}
.rw{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px}
.rwh{display:flex;justify-content:space-between;align-items:center}.rwh b{color:var(--orange)}
.iss{display:flex;flex-direction:column;gap:8px}
.is{border-top:1px solid var(--line);padding-top:8px}.is:first-child{border-top:0}
.ish{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13.5px;flex-wrap:wrap}.ish span{flex:1;min-width:160px}
.is textarea{margin-top:6px}
.iss .seg button.n[aria-pressed="true"]{background:var(--orange);color:#fff}
.iss .seg button.y[aria-pressed="true"]{background:var(--ok);color:#fff}
.lvs{display:flex;flex-wrap:wrap;gap:8px}
.rvi{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:8px;background:var(--surface)}
.rvh{display:flex;justify-content:space-between;gap:8px;align-items:center}.rvh b{color:var(--brown);font-size:14.5px}
.rvb{margin-top:8px;font-size:14px}
.rv{border-top:1px dashed var(--line);padding:6px 0}.rv:first-child{border-top:0}
.rvs{margin-top:10px;gap:8px}
small.gy{display:block;font-size:11.5px;color:var(--teal-d);margin-top:2px}
@media (max-width:420px){.tl3 b{font-size:14px}.tl3>div{padding:8px}}
.misa{border:1.5px dashed var(--orange);border-radius:12px;padding:12px;display:grid;gap:8px}
.misa ol.plain{margin:0;padding-left:20px;font-size:14px}
.bg-nochon{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bgp{position:fixed;inset:0;z-index:70;background:#0B1112;color:#ECF2F1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.bgp.co-loi{grid-template-columns:minmax(0,1fr) minmax(260px,30%)}
.bgp-cho{grid-column:1/-1;align-self:center;justify-self:center;text-align:center;color:#A2B0AF;padding:20px}
.bgp-san{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;cursor:pointer}
.bgp-k{position:relative;width:min(100%,calc((100vh - 64px) * 16 / 9));aspect-ratio:16/9;background-size:100% 100%;background-color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.bgp:fullscreen .bgp-k{width:min(100%,calc((100vh - 0px) * 16 / 9))}
.bgp-k.vao{animation:bgVao .35s ease}
.bgp-l{position:absolute;background-size:100% 100%;opacity:0;pointer-events:none;transform-origin:center}
.bgp-l.on{animation:bgF .45s ease forwards}
.bgp-l.on[data-e="z"]{animation-name:bgZ}
.bgp-l.on[data-e="y"]{animation-name:bgY}
.bgp-l.on[data-e="r"]{animation:bgR .7s cubic-bezier(.3,.6,.4,1) both}
.bgp-l.on.tinh{animation:none;opacity:1}
/* chuyển cảnh Tiếng Việt RMON: slide trượt nhẹ vào, dải chữ cái và sao lướt từ phải sang trái */
.bgp-k.tv-vao{animation:tvVao .6s cubic-bezier(.2,.8,.2,1)}
@keyframes tvVao{from{opacity:.15;transform:translateX(5%) scale(.97)}to{opacity:1;transform:none}}
.bg-chuyen{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
.bg-chuyen span{position:absolute;left:105%;font-family:'HP001',sans-serif;font-weight:700;font-size:var(--co);line-height:1;opacity:0;
  text-shadow:0 .15cqw .5cqw rgba(0,0,0,.18);animation:tvLuot .9s cubic-bezier(.3,.6,.4,1) var(--tre) forwards}
.bg-chuyen span.sao{font-family:sans-serif}
@keyframes tvLuot{0%{left:105%;opacity:0;transform:rotate(-20deg) scale(.6)}15%{opacity:1}80%{opacity:1}100%{left:-12%;opacity:0;transform:rotate(25deg) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.bgp-k.tv-vao{animation:none}.bg-chuyen{display:none}}
.bgp-clip{position:absolute;object-fit:contain;cursor:pointer;z-index:2;background:#fff;border-radius:.4cqw} /* clip cô viết mẫu: chồng đúng lên ảnh chữ của slide */
.bgp-v{position:absolute;background:transparent;border:0;border-radius:12px;cursor:pointer;padding:0}
.bgp-v:focus-visible{outline:3px solid #F2944E}
.bgp-wm{position:absolute;left:1.2%;bottom:1.1%;font-size:1.2cqw;font-weight:700;color:#6E4A2E;pointer-events:none;z-index:4;line-height:1}
.bgp-wm.toi{color:#FFE7B0}
.bgd.ke .bgp-wm{left:10%}
/* logo RMON nằm trong cột nhân vật, không nền */
.bgd.ke::after{content:"";position:absolute;left:0;top:0;width:18%;height:11%;z-index:3;pointer-events:none;background:url(icons/logo.png) no-repeat center 55% / 58% auto}
.bgd.ke .bgd-loi{margin-top:7.6cqw;overflow:visible}
.mm-ben::before{content:"";position:absolute;left:0;right:0;top:0;height:11%;background:url(icons/logo.png) no-repeat center 55% / 58% auto}
.mm-ben{padding-top:7.6cqw!important;justify-content:flex-start!important}
.bmm .bgp-wm{left:20%;bottom:2%;z-index:6;color:#FFE7B0}
.bmm .bgm-bs{z-index:6;bottom:6%;right:2.5%}
.bgp-loi{grid-row:1/3;grid-column:2;display:none;background:#152022;border-left:1px solid #253336;padding:14px 16px;overflow-y:auto}
.bgp.co-loi .bgp-loi{display:block}
.bgp-loi .eyebrow{color:#86D6DD}
.bgp-loi p{margin:8px 0 0;font-size:15px;line-height:1.6}
.bgp-x{background:none;border:0;color:#A2B0AF;font-size:16px}
.bgp-dk{grid-column:1;display:flex;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#0B1112;transition:opacity .3s}
.bgp-dk button{flex:none;min-width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:18px;padding:0 12px;font-weight:600}
.bgp-dk button[aria-pressed="true"]{background:#5BC2CC;color:#0B1112}
.bgp-dk button:disabled{opacity:.3}
.bgp-tt{flex:1;min-width:0;font-size:13.5px;color:#A2B0AF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgp-tt b{color:#ECF2F1}
.bgp:fullscreen{grid-template-rows:1fr}
.bgp:fullscreen .bgp-dk{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.bgp:fullscreen.co-loi .bgp-dk{right:auto;width:70%}
.bgp.an .bgp-dk{opacity:0;pointer-events:none}
.bgp.an .bgp-san{cursor:none}
.bgs .bgp-san{cursor:default;padding:10px}
.bgs-tr{position:relative;width:min(100%,calc((100vh - 84px) * 210 / 297));aspect-ratio:210/297;background-size:100% 100%;background-color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.bgp:fullscreen .bgs-tr{width:min(100%,calc(100vh * 210 / 297))}
.bgm{container-type:inline-size;background:radial-gradient(circle at 50% 120%,#FFF5D9 0,transparent 55%),linear-gradient(180deg,#E3F4F3 0%,#FFFFFF 70%);overflow:hidden;cursor:default}
.bgm-sao i{position:absolute;font-style:normal;font-size:2.4cqw;opacity:.55;animation:bgTroi 4s ease-in-out infinite}
.bgm-tit{position:absolute;top:4.5%;left:0;right:0;text-align:center;line-height:1.15}
.bgm-tit>span{display:block;font-size:1.9cqw;font-weight:700;color:#E97B2C;letter-spacing:.2cqw;text-transform:uppercase}
.bgm-tit b{display:inline-flex;align-items:center;gap:1.2cqw;font-size:4.6cqw;font-weight:800;color:#0B4F57}
.bgm-rmon{position:absolute;top:18%;left:0;right:0;display:flex;justify-content:center;gap:1.4cqw}
.bgm-rmon i{font-style:normal;width:5cqw;height:5cqw;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:2.8cqw;opacity:.35;transform:scale(.8);transition:all .25s}
.bgm-rmon i.bat,.bgm.xong .bgm-rmon i{opacity:1;transform:scale(1.15)}
.bgm-nv{position:absolute;left:4%;right:4%;top:27%;height:52%;display:flex;justify-content:space-around;align-items:flex-end}
.bgm-c{display:flex;flex-direction:column;align-items:center;width:22%;animation:bgVaoNv .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--tre)}
.bgm-a{width:100%;aspect-ratio:400/560;max-height:100%;background-size:contain;background-repeat:no-repeat;background-position:center bottom;transform-origin:50% 100%;animation:bgLac calc(var(--nhip) * 2) ease-in-out infinite;animation-delay:var(--tre)}
.bgm-c b{font-size:2.2cqw;font-weight:800;margin-top:.3cqw}
.bgm-c.hat .bgm-a{animation:bgNhay var(--nhip) ease-in-out infinite}
.bgm.dang-hat .bgm-c:not(.hat){opacity:.75}
.bgm-loi{position:absolute;left:3%;right:3%;bottom:4%;height:15%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4cqw;background:rgba(255,255,255,.85);border-radius:1.6cqw;box-shadow:0 .4cqw 1.6cqw rgba(11,79,87,.12)}
.bgm-d{display:none;font-weight:800;color:#5E7174;text-align:center}
.bgm-d.on{display:block;font-size:3.3cqw;line-height:1.15;color:#1E3436}
.bgm-d span{transition:color .1s}
.bgm-d span.da{color:#E97B2C}
.bgm:not(.dang-hat) .bgm-loi{visibility:hidden}
.bgm-play{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);border:0;border-radius:99px;background:#E97B2C;color:#fff;font-weight:800;font-size:2.6cqw;padding:1.2cqw 3.4cqw;box-shadow:0 .6cqw 1.8cqw rgba(233,123,44,.4);animation:bgDap 1.6s ease-in-out infinite;cursor:pointer}
.bgm.dang-hat .bgm-play{display:none}
.bgm.xong .bgm-play{display:block}
.bgm-bs{position:absolute;right:1.2%;bottom:.6%;font-size:1.1cqw;font-weight:700;color:#6E4A2E;pointer-events:none}
.bmm .bgm-bs{color:#FFE7B0}
.bgm-bum{position:absolute;left:50%;top:40%;font-size:9cqw;transform:translate(-50%,-50%);animation:bgBum .7s ease-out forwards;pointer-events:none}
.bgm-rm{display:inline-flex;gap:.6cqw}
.bgm-rm i{font-style:normal;display:inline-grid;place-items:center;width:6.4cqw;height:6.4cqw;border-radius:50%;color:#fff;font-size:3.8cqw;box-shadow:0 .3cqw .8cqw rgba(0,0,0,.15)}
.bgm-bay{position:absolute;top:4.5%;left:1.2%;z-index:2;display:flex;align-items:center;gap:.6cqw;padding:.55cqw 1.6cqw .55cqw 1cqw;border-radius:3cqw;background:linear-gradient(135deg,#FF8A3D,#FF5E8A 55%,#B07CF0);color:#fff;font-weight:800;font-size:1.35cqw;box-shadow:0 .5cqw 1.4cqw rgba(255,94,138,.35),inset 0 0 0 .22cqw rgba(255,255,255,.55);animation:bgBay 3.2s ease-in-out infinite;transform-origin:20% 50%}
.bgm-bay span{display:flex;white-space:nowrap}
.bgm-bay span b{display:inline-block;font-weight:800;animation:bgSong 1.4s ease-in-out infinite;animation-delay:calc(var(--q) * .06s)}
.bay-not{font-style:normal;display:grid;place-items:center;width:2.4cqw;height:2.4cqw;border-radius:50%;background:#fff;color:#FF5E8A;font-size:1.5cqw;animation:bgNot .9s ease-in-out infinite}
.bay-sao{position:absolute;font-style:normal;color:#FFE07A;font-size:1.3cqw;animation:bgLap 1.2s ease-in-out infinite}
.bay-sao.s1{right:-.6cqw;top:-.9cqw}.bay-sao.s2{left:40%;bottom:-1cqw;font-size:1cqw;animation-delay:.6s}
@keyframes bgBay{0%,100%{transform:translate(0,0) rotate(-7deg)}25%{transform:translate(.6cqw,-.5cqw) rotate(-3deg)}50%{transform:translate(1cqw,.5cqw) rotate(-10deg)}75%{transform:translate(.3cqw,.8cqw) rotate(-5deg)}}
@keyframes bgSong{0%,100%{transform:translateY(0)}30%{transform:translateY(-22%)}60%{transform:translateY(6%)}}
@keyframes bgNot{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(12deg) scale(1.15)}}
@keyframes bgLap{0%,100%{opacity:.3;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}}
.bgm-rm i.nay{animation:bgNay .5s ease}
.bgm-nv{transition:opacity .35s,transform .35s}
.bgm.dang-hat:not([data-canh="tat_ca"]):not([data-canh=""]) .bgm-nv{opacity:0;transform:scale(.9)}
.bgm-canh{position:absolute;left:5%;right:5%;top:23%;height:56%;display:flex;align-items:stretch;gap:2%;opacity:0;pointer-events:none;transition:opacity .35s}
.bgm.dang-hat .bgm-canh.on{opacity:1}
.bgm-solo{width:30%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.bgm-solo .bgm-a{width:88%;flex:1 1 0;min-height:0;aspect-ratio:auto;max-height:none;background-size:contain;animation:bgNhay var(--nhip) ease-in-out infinite}
.bgm-solo b{font-size:2.6cqw;font-weight:800}
.bgm-canh.on .bgm-solo{animation:bgVaoNv .5s cubic-bezier(.3,1.5,.5,1) both}
.bgm-viec{flex:1;position:relative;background:rgba(255,255,255,.7);border-radius:2cqw;box-shadow:0 .4cqw 1.4cqw rgba(11,79,87,.1)}
.bgm-canh [data-j]{opacity:0;transform:scale(.4)}
.bgm-canh [data-j].hien{animation:bgPop .45s cubic-bezier(.3,1.6,.5,1) forwards}
.vc-chu{position:absolute;left:0;right:0;bottom:5%;text-align:center;font-size:3cqw;font-weight:800;color:#E97B2C}
.vr-day{position:absolute;left:6%;right:6%;top:26%;display:flex;justify-content:space-between;align-items:center}
.vr-day>i{width:7cqw;height:7cqw;border-radius:50%;box-shadow:inset 0 -.5cqw 0 rgba(0,0,0,.15)}
.vr-hoi{position:relative;background:#fff!important;border:.35cqw dashed #E97B2C;display:grid;place-items:center;box-shadow:none!important}
.vr-hoi b{font-size:4cqw;color:#E97B2C}
.vr-hoi em{position:absolute;inset:-.35cqw;border-radius:50%}
.vr-kinh{position:absolute;top:16%;left:2%;width:11cqw;height:11cqw;border:1cqw solid #6B4430;border-radius:50%;background:rgba(227,244,243,.45)}
.vr-kinh::after{content:"";position:absolute;width:1.4cqw;height:6cqw;background:#6B4430;border-radius:1cqw;right:-2.6cqw;bottom:-5.4cqw;transform:rotate(-45deg)}
.bgm-canh.on .vr-kinh{animation:bgSoi var(--dong) ease-in-out forwards}
.vm-so{position:absolute;left:4%;right:4%;top:12%;display:flex;justify-content:space-between}
.vm-so>div{display:flex;flex-direction:column;align-items:center;gap:1cqw;width:18%}
.vm-so b{width:7.5cqw;height:7.5cqw;border-radius:50%;background:#4AB1BB;color:#fff;font-size:4.6cqw;font-weight:800;display:grid;place-items:center}
.vm-so span{display:flex;flex-wrap:wrap;justify-content:center;gap:.5cqw;width:100%}
.vm-so span i{width:2cqw;height:2cqw;border-radius:50%;background:#FFC23C}
.vo-thap{position:absolute;inset:6% 10% 18% 10%}
.vo-thap i{position:absolute;width:24%;height:11.5%;margin-left:-12%;border-radius:.6cqw;box-shadow:inset 0 -.6cqw 0 rgba(0,0,0,.18)}
.vo-thap i.hien{animation:bgRoi .45s cubic-bezier(.3,1.4,.5,1) forwards}
.bgm-canh.on .vo-thap i[data-j="9"].hien{animation:bgRoi .45s cubic-bezier(.3,1.4,.5,1) forwards,bgLac .8s .5s ease-in-out 2}
.vn-thuoc{position:absolute;left:6%;top:10%;width:58%;height:20%}
.vn-vach{position:absolute;inset:0;background:#FFC23C repeating-linear-gradient(90deg,#6B4430 0 .25cqw,transparent .25cqw 3.6cqw);background-size:100% 40%;background-repeat:no-repeat;border-radius:.6cqw;box-shadow:inset 0 0 0 .3cqw #E5A21C}
.vn-do{position:absolute;left:0;bottom:-55%;height:40%;width:0;background:#9C86E6;border-radius:.6cqw}
.vn-thuoc.hien .vn-do{animation:bgDo 1.6s .2s ease-out forwards}
.vn-lich{position:absolute;right:6%;top:8%;width:24%;aspect-ratio:1;background:#fff;border-radius:1cqw;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column}
.vn-lich b{background:#E4572E;color:#fff;text-align:center;font-size:1.8cqw;padding:.4cqw}
.vn-lich span{flex:1;display:grid;place-items:center;font-size:6cqw;font-weight:800;color:#1E3436}
.vn-dh{position:absolute;left:12%;bottom:20%;width:13cqw;height:13cqw;border-radius:50%;background:#fff;border:.8cqw solid #9C86E6}
.vn-dh i{position:absolute;left:50%;bottom:50%;width:.7cqw;border-radius:.4cqw;background:#1E3436;transform-origin:50% 100%;margin-left:-.35cqw}
.vn-dh .kim-g{height:28%}.vn-dh .kim-p{height:40%;background:#E4572E}
.vn-dh.hien .kim-p{animation:bgQuay 1.6s ease-in-out forwards}.vn-dh.hien .kim-g{animation:bgQuay 1.6s ease-in-out forwards;animation-duration:3.2s}
@keyframes bgNay{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-18%) scale(1.35)}}
@keyframes bgPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes bgRoi{from{opacity:0;transform:translateY(-220%)}to{opacity:1;transform:none}}
@keyframes bgSoi{0%{left:2%}70%{left:62%}100%{left:76%}}
@keyframes bgDo{to{width:85%}}
@keyframes bgQuay{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.bgm.xong .bgm-canh{opacity:0}
.bgm-c.hat[data-than="vay"] .bgm-a,.bgm-solo[data-than="vay"] .bgm-a{animation:mv_vay calc(var(--nhip) * 2) ease-in-out infinite}
@keyframes mv_vay{0%,100%{transform:rotate(-8deg) translateX(-3%)}50%{transform:rotate(8deg) translateX(3%)}}
.bgm-c.hat[data-than="nhay"] .bgm-a,.bgm-solo[data-than="nhay"] .bgm-a{animation:mv_nhay var(--nhip) cubic-bezier(.3,.7,.4,1) infinite}
@keyframes mv_nhay{0%,100%{transform:translateY(0) scale(1.05,.95)}40%{transform:translateY(-14%) scale(.97,1.05)}}
.bgm-c.hat[data-than="soi"] .bgm-a,.bgm-solo[data-than="soi"] .bgm-a{animation:mv_soi calc(var(--nhip) * 4) ease-in-out infinite}
@keyframes mv_soi{0%,100%{transform:translateX(-8%) rotate(-8deg)}50%{transform:translateX(8%) rotate(8deg)}}
.bgm-c.hat[data-than="gat"] .bgm-a,.bgm-solo[data-than="gat"] .bgm-a{animation:mv_gat var(--nhip) ease-in-out infinite}
@keyframes mv_gat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%) rotate(2deg)}}
.bgm-c.hat[data-than="dem"] .bgm-a,.bgm-solo[data-than="dem"] .bgm-a{animation:mv_dem calc(var(--nhip) / 2) ease-out infinite}
@keyframes mv_dem{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7%) scale(1.04)}}
.bgm-c.hat[data-than="xay"] .bgm-a,.bgm-solo[data-than="xay"] .bgm-a{animation:mv_xay calc(var(--nhip) * 2.5) steps(5) infinite}
@keyframes mv_xay{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-15%) scale(1.08)}}
.bgm-c.hat[data-than="do"] .bgm-a,.bgm-solo[data-than="do"] .bgm-a{animation:mv_do calc(var(--nhip) * 2) ease-in-out infinite}
@keyframes mv_do{0%,100%{transform:scaleX(1) rotate(0)}25%{transform:scaleX(1.1) rotate(-4deg)}75%{transform:scaleX(1.1) rotate(4deg)}}
.bgm-c.hat[data-than="quay"] .bgm-a,.bgm-solo[data-than="quay"] .bgm-a{animation:mv_quay calc(var(--nhip) * 2) ease-in-out infinite}
@keyframes mv_quay{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.bgm-c.hat[data-than="bat"] .bgm-a,.bgm-solo[data-than="bat"] .bgm-a{animation:mv_bat var(--nhip) cubic-bezier(.2,.8,.3,1) infinite}
@keyframes mv_bat{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-18%) scale(1.06)}}
.bgm-c.hat[data-than="lac"] .bgm-a,.bgm-solo[data-than="lac"] .bgm-a{animation:mv_lac var(--nhip) ease-in-out infinite}
@keyframes mv_lac{0%,100%{transform:translateX(-5%) rotate(-5deg)}50%{transform:translateX(5%) rotate(5deg)}}
.bgm-c.hat[data-than="nghi"] .bgm-a,.bgm-solo[data-than="nghi"] .bgm-a{animation:mv_nghi calc(var(--nhip) * 2) ease-in-out infinite}
@keyframes mv_nghi{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-2%)}}
.bgm-c.hat[data-than="tim"] .bgm-a,.bgm-solo[data-than="tim"] .bgm-a{animation:mv_tim var(--nhip) ease-in-out infinite}
@keyframes mv_tim{0%,100%{transform:scale(1)}20%{transform:scale(1.12)}40%{transform:scale(1)}60%{transform:scale(1.08)}}
.bgm-c.hat[data-than="vo"] .bgm-a,.bgm-solo[data-than="vo"] .bgm-a{animation:mv_vo calc(var(--nhip) / 2) ease-in-out infinite}
@keyframes mv_vo{0%,100%{transform:scale(1)}50%{transform:scale(1.1,1.04) translateY(-3%)}}
.bgm-c.hat[data-than="dam"] .bgm-a,.bgm-solo[data-than="dam"] .bgm-a{animation:mv_dam calc(var(--nhip) / 2) ease-in-out infinite}
@keyframes mv_dam{0%,100%{transform:scale(1,1)}50%{transform:scale(1.08,.88) translateY(4%)}}
.bgm-goi{position:absolute;left:50%;top:17.5%;transform:translateX(-50%);z-index:3;white-space:nowrap;background:#fff;color:#C2462E;font-weight:800;font-size:1.7cqw;padding:.35cqw 1.3cqw;border-radius:3cqw;border:.2cqw solid #FFB37A;box-shadow:0 .4cqw 1.2cqw rgba(233,123,44,.25);opacity:0;pointer-events:none}
.bgm-goi.on{animation:bgGoi .5s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes bgGoi{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.bgm.dang-hat .bgm-canh,.bgm.dang-hat .bgm-nv{top:26%}
.nv{width:100%;height:100%;overflow:visible}
.nv .ta,.nv .ch,.nv .dau,.nv .mat,.nv .than{transform-box:view-box}
.nv .ta,.nv .ch{transition:transform .22s ease}
.nv .ta-l{transform:rotate(15deg)}.nv .ta-r{transform:rotate(-15deg)}
.nv .ng,.nv .tim,.nv .vo-sao,.nv .mi-o{opacity:0;transition:opacity .15s}
.nv .mat{animation:matChop 4s infinite}
.nv .sang{opacity:0;transition:opacity .2s}
:is(.bgm,.bgd) [data-mv]:not([data-mv=""]) .nv .sang{animation:tayDen var(--nhip) ease-in-out infinite}
@keyframes tayDen{0%,100%{opacity:.25}50%{opacity:.65}}
:is(.bgm,.bgd) [data-mv="kinh"] .nv .ban{fill:none;stroke-width:7;stroke-opacity:.9}
.nv-ruby .ta-l .ban{}
.nv .ban{transition:stroke-width .2s}
@keyframes matChop{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
:is(.bgm,.bgd) [data-mv="vay"] .nv .ta-l{transform:rotate(15deg)}
:is(.bgm,.bgd) [data-mv="yeah"] .nv .ta-l{transform:rotate(150deg)}
:is(.bgm,.bgd) [data-mv="yeah"] .nv .ta-r{transform:rotate(-150deg)}
:is(.bgm,.bgd) [data-mv="yeah"] .nv .mi-o{opacity:1}
:is(.bgm,.bgd) [data-mv="yeah"] .nv .mi-cuoi{opacity:0}
:is(.bgm,.bgd) [data-mv="kinh"] .nv .ta-l{transform:rotate(185deg)}
:is(.bgm,.bgd) [data-mv="kinh"] .nv .ta-r{transform:rotate(175deg)}
:is(.bgm,.bgd) [data-mv="chi"] .nv .ta-l{transform:rotate(15deg)}
:is(.bgm,.bgd) [data-mv="chi"] .nv .ta-r{transform:rotate(-95deg)}
:is(.bgm,.bgd) [data-mv="dem"] .nv .ta-l{transform:rotate(15deg)}
:is(.bgm,.bgd) [data-mv="dem"] .nv .ta-r{transform:rotate(-155deg)}
:is(.bgm,.bgd) [data-mv="xay1"] .nv .ta-l{transform:rotate(-30deg)}
:is(.bgm,.bgd) [data-mv="xay1"] .nv .ta-r{transform:rotate(30deg)}
:is(.bgm,.bgd) [data-mv="xay2"] .nv .ta-l{transform:rotate(-140deg)}
:is(.bgm,.bgd) [data-mv="xay2"] .nv .ta-r{transform:rotate(140deg)}
:is(.bgm,.bgd) [data-mv="dang"] .nv .ta-l{transform:rotate(90deg)}
:is(.bgm,.bgd) [data-mv="dang"] .nv .ta-r{transform:rotate(-90deg)}
:is(.bgm,.bgd) [data-mv="kim"] .nv .ta-l{transform:rotate(180deg)}
:is(.bgm,.bgd) [data-mv="trai"] .nv .ta-l{transform:rotate(150deg)}
:is(.bgm,.bgd) [data-mv="trai"] .nv .ta-r{transform:rotate(-15deg)}
:is(.bgm,.bgd) [data-mv="phai"] .nv .ta-l{transform:rotate(15deg)}
:is(.bgm,.bgd) [data-mv="phai"] .nv .ta-r{transform:rotate(-150deg)}
:is(.bgm,.bgd) [data-mv="cheer"] .nv .ta-l{transform:rotate(150deg)}
:is(.bgm,.bgd) [data-mv="cheer"] .nv .ta-r{transform:rotate(-150deg)}
:is(.bgm,.bgd) [data-mv="cheer"] .nv .mi-o{opacity:1}
:is(.bgm,.bgd) [data-mv="cheer"] .nv .mi-cuoi{opacity:0}
:is(.bgm,.bgd) [data-mv="nghi"] .nv .ta-l{transform:rotate(15deg)}
:is(.bgm,.bgd) [data-mv="nghi"] .nv .ta-r{transform:rotate(143deg)}
:is(.bgm,.bgd) [data-mv="nghi2"] .nv .ta-l{transform:rotate(-150deg)}
:is(.bgm,.bgd) [data-mv="nghi2"] .nv .ta-r{transform:rotate(-15deg)}
:is(.bgm,.bgd) [data-mv="tim"] .nv .ta-l{transform:rotate(-70deg)}
:is(.bgm,.bgd) [data-mv="tim"] .nv .ta-r{transform:rotate(70deg)}
:is(.bgm,.bgd) [data-mv="tim"] .nv .tim{opacity:1;animation:timDap var(--nhip) ease-in-out infinite}
:is(.bgm,.bgd) [data-mv="vo"] .nv .vo-sao{animation:voSao var(--nhip) ease-out infinite}
:is(.bgm,.bgd) [data-mv="dam"] .nv .ta-l{transform:rotate(28deg)}
:is(.bgm,.bgd) [data-mv="dam"] .nv .ta-r{transform:rotate(-28deg)}
:is(.bgm,.bgd) [data-mv="vay"] .nv .ta-r,:is(.bgm,.bgd) [data-mv="vay2"] .nv .ta-r{animation:tayVayR calc(var(--nhip) * 2) ease-in-out infinite}
:is(.bgm,.bgd) [data-mv="vay2"] .nv .ta-l{animation:tayVayL calc(var(--nhip) * 2) ease-in-out infinite}
:is(.bgm,.bgd) [data-mv="kim"] .nv .ta-r{animation:tayKim calc(var(--nhip) * 4) linear infinite}
:is(.bgm,.bgd) [data-mv="vo"] .nv .ta-l{animation:voL var(--nhip) ease-in-out infinite}
:is(.bgm,.bgd) [data-mv="vo"] .nv .ta-r{animation:voR var(--nhip) ease-in-out infinite}
:is(.bgm,.bgd) [data-mv="dam"] .nv .ch-l{animation:damL calc(var(--nhip) * 2) ease-in-out infinite}
:is(.bgm,.bgd) [data-mv="dam"] .nv .ch-r{animation:damL calc(var(--nhip) * 2) ease-in-out infinite;animation-delay:calc(var(--nhip) * -1)}
:is(.bgm,.bgd) [data-mv="nghi"] .nv .dau{transform:rotate(-6deg)}:is(.bgm,.bgd) [data-mv="nghi2"] .nv .dau{transform:rotate(6deg)}
.nv .dau{transition:transform .3s ease}
:is(.bgm,.bgd) [data-dem="1"] .nv .ng1{opacity:1}
:is(.bgm,.bgd) [data-dem="2"] .nv .ng1,:is(.bgm,.bgd) [data-dem="2"] .nv .ng2{opacity:1}
:is(.bgm,.bgd) [data-dem="3"] .nv .ng1,:is(.bgm,.bgd) [data-dem="3"] .nv .ng2,:is(.bgm,.bgd) [data-dem="3"] .nv .ng3{opacity:1}
:is(.bgm,.bgd) [data-dem="4"] .nv .ng1,:is(.bgm,.bgd) [data-dem="4"] .nv .ng2,:is(.bgm,.bgd) [data-dem="4"] .nv .ng3,:is(.bgm,.bgd) [data-dem="4"] .nv .ng4{opacity:1}
:is(.bgm,.bgd) [data-dem="5"] .nv .ng1,:is(.bgm,.bgd) [data-dem="5"] .nv .ng2,:is(.bgm,.bgd) [data-dem="5"] .nv .ng3,:is(.bgm,.bgd) [data-dem="5"] .nv .ng4,:is(.bgm,.bgd) [data-dem="5"] .nv .ng5{opacity:1}
:is(.bgm,.bgd) [data-mv^="xep"] .nv .ta-l{animation:xepL var(--nhip) ease-in-out infinite}
:is(.bgm,.bgd) [data-mv^="xep"] .nv .ta-r{animation:xepR var(--nhip) ease-in-out infinite}
:is(.bgm,.bgd) [data-mv="xep"]{--gl:-36deg;--gr:36deg}
:is(.bgm,.bgd) [data-mv="xep2"]{--gl:-72deg;--gr:72deg}
:is(.bgm,.bgd) [data-mv="xep3"]{--gl:-138deg;--gr:138deg}
:is(.bgm,.bgd) [data-mv="xep4"]{--gl:162deg;--gr:-162deg}
@keyframes xepL{0%,100%{transform:translateY(0) rotate(var(--gl))}50%{transform:translateY(-16px) rotate(var(--gl))}}
@keyframes xepR{0%,100%{transform:translateY(-16px) rotate(var(--gr))}50%{transform:translateY(0) rotate(var(--gr))}}
:is(.bgm,.bgd) [data-mv="moi"] .nv .ta-l{transform:rotate(62deg)}:is(.bgm,.bgd) [data-mv="moi"] .nv .ta-r{transform:rotate(-62deg)}
.bgm-moi{position:absolute;left:50%;bottom:6.5%;transform:translateX(-50%);z-index:4;display:none;align-items:center;gap:1cqw;white-space:nowrap;background:#FFF6D6;border:.3cqw solid #FFC23C;border-radius:3cqw;padding:1cqw 2.4cqw;box-shadow:0 .6cqw 1.6cqw rgba(229,162,28,.3);font-weight:800;font-style:italic;font-size:2.6cqw;color:#0B4F57}
.bgm-moi::after{content:"";position:absolute;left:50%;top:-1.4cqw;margin-left:-1.2cqw;border:1.2cqw solid transparent;border-bottom-color:#FFC23C;border-top:0}
.bgm.moi-on .bgm-loi{visibility:hidden}
.bgm.moi-on .bgm-moi{display:flex;animation:bgGoiVao .5s cubic-bezier(.3,1.5,.5,1) both}
.bgm-moi b{font-weight:800;opacity:0;display:inline-block;animation:moiChu .35s ease-out forwards;animation-delay:calc(.25s + var(--q) * .045s)}
.bgm-moi i{font-style:normal;font-size:3cqw;animation:bgNot .8s ease-in-out infinite}
.bgm.moi-on .bgm-goi{opacity:0!important}
@keyframes moiChu{from{opacity:0;transform:translateY(60%) scale(.6)}to{opacity:1;transform:none}}
@keyframes bgGoiVao{from{opacity:0;transform:translateX(-50%) scale(.5)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes tayVayR{0%,100%{transform:rotate(-120deg)}50%{transform:rotate(-178deg)}}
@keyframes tayVayL{0%,100%{transform:rotate(178deg)}50%{transform:rotate(120deg)}}
@keyframes tayKim{from{transform:rotate(-90deg)}to{transform:rotate(-450deg)}}
@keyframes voL{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-36deg)}}
@keyframes voR{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(36deg)}}
@keyframes damL{0%,40%,100%{transform:translateY(0)}20%{transform:translateY(-44px)}}
@keyframes timDap{0%,100%{transform:scale(1)}30%{transform:scale(1.25)}}
@keyframes voSao{0%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1.15)}100%{opacity:0}}
.nv .tim,.nv .vo-sao{transform-box:view-box}
@keyframes bgLac{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-2%) rotate(1.5deg)}}
@keyframes bgNhay{0%,100%{transform:translateY(0) scale(1.08,1.08)}40%{transform:translateY(-9%) scale(1.06,1.12)}70%{transform:translateY(0) scale(1.12,1.02)}}
@keyframes bgVaoNv{from{opacity:0;transform:translateY(40%) scale(.6)}to{opacity:1;transform:none}}
@keyframes bgTroi{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.8cqw) rotate(12deg)}}
@keyframes bgDap{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
@keyframes bgBum{from{opacity:1;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-70%) scale(1.4)}}
@keyframes bgF{from{opacity:0}to{opacity:1}}
@keyframes bgZ{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.08)}80%{transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@keyframes bgR{0%{opacity:0;transform:translateY(-140%) scale(.9)}55%{opacity:1;transform:translateY(6%) scale(1.04,.94)}75%{transform:translateY(-6%)}100%{opacity:1;transform:none}}
@keyframes bgY{from{opacity:0;transform:translateY(12%)}to{opacity:1;transform:none}}
@keyframes bgVao{from{opacity:.2}to{opacity:1}}
@media (max-width:700px){.bgp.co-loi{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.bgp.co-loi .bgp-loi{grid-row:2;grid-column:1;border-left:0;border-top:1px solid #253336}.bgp.co-loi .bgp-san{grid-row:1}.bgp.co-loi .bgp-dk{grid-row:3}.bgp-tt{font-size:12px}}
a.btn{text-decoration:none;display:inline-block}
.ok-note{background:var(--ok-l)}
.phpage{max-width:640px;margin:0 auto;padding-block:20px 40px}
.phpage .logo{align-items:flex-start}
.phpage h1{font-size:24px;margin-top:6px}
.phimg{display:grid;gap:10px;margin-top:16px}
.phimg img{width:100%;border-radius:12px;border:1px solid var(--line)}
.misa.ph textarea{font-size:13px}
/* Nhân sự: chấm công, bảng công, hồ sơ, lương */
.ccbig{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto;font-size:34px;font-weight:800;color:#fff}
.ccbig.ok{background:var(--ok)}.ccbig.bad{background:var(--bad)}
.bc{display:flex;flex-direction:column}
.bc .r{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px;min-width:0}
.bc .r:first-child{border-top:0}
.bc .d{width:74px;flex:none;color:var(--mute)}.bc .d b{color:var(--brown)}
.bc .v{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.bc em{font-style:normal;font-size:11.5px;border-radius:6px;padding:1px 6px;margin-left:4px;white-space:nowrap}
.bc em.mu{background:var(--orange-l);color:var(--orange)}.bc em.sua{background:var(--teal-l);color:var(--teal-d)}
.bc .bc-vang .v{color:var(--bad);font-weight:600}.bc .bc-le .v,.bc .bc-phep .v,.bc .bc-doi_t7 .v{color:var(--teal-d)}
.bc .bc-chua{opacity:.5}
.blt{overflow-x:auto;margin-top:12px;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.blt table{border-collapse:collapse;font-size:13px;min-width:640px;width:100%}
.blt th,.blt td{padding:8px 10px;text-align:right;border-top:1px solid var(--line);white-space:nowrap;vertical-align:top}
.blt th{border-top:0;background:var(--teal-l);color:var(--brown);font-size:12px;position:sticky;top:0}
.blt th:first-child,.blt td:first-child{text-align:left;white-space:normal;min-width:150px}
.blt tbody tr{cursor:pointer}.blt tbody tr:hover{background:var(--teal-l)}
.phieu{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:4px 12px}
.phieu .r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.phieu .r:first-child{border-top:0}
.phieu .r span{color:var(--mute);min-width:0}.phieu .r b{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.phieu .r.dam span,.phieu .r.dam b{color:var(--brown);font-weight:800;font-size:15px}
.qrbox{display:grid;place-items:center;padding:12px;background:#fff;border-radius:12px;min-height:244px}
.qrbox img,.qrbox canvas{max-width:100%;height:auto}
.pcs{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.pcs .pc{gap:6px;align-items:center}
.hs-h{font-size:15px;color:var(--teal-d);margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.vals4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vals4>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;min-width:0}
.vals4 b{display:block;font-size:22px;color:var(--orange);line-height:1.1}
.vals4 span{font-size:12px;color:var(--brown);font-weight:600}
.nav button{min-width:0;padding:9px 1px 10px;font-size:11px;letter-spacing:-.1px}
.nav button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nav .n6 button{font-size:10.2px;letter-spacing:-.2px}
/* RMON Passport: con dấu */
.passport{background:linear-gradient(160deg,var(--surface),var(--teal-l))}
.pp-t{display:block;font-size:17px;color:var(--brown);margin-top:2px}
.stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;margin-top:10px}
.pp-sec{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line)}
.cap-track{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.cap-track::before{content:"";position:absolute;top:17px;left:10%;right:10%;height:2px;background:var(--line)}
.cap-track::after{content:"";position:absolute;top:17px;left:10%;height:2px;background:var(--teal);width:calc(max(0, var(--dat) - 1) * 20%)}
.cap-track li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.cap-track .cd{position:relative;width:36px;height:36px;border-radius:50%;border:2px dashed var(--mute);background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--mute)}
.cap-track b{margin-top:6px;font-size:10.5px;line-height:1.2;color:var(--mute);font-weight:600;white-space:nowrap;letter-spacing:-.01em}
@media (max-width:380px){.cap-track b{font-size:9.5px}}
.cap-track li.on .cd{border-style:solid;color:#fff;background:var(--teal);border-color:var(--teal)}
.cap-track li.on.orange .cd{background:var(--orange);border-color:var(--orange)}
.cap-track li.on.brown .cd{background:var(--brown);border-color:var(--brown)}
.cap-track li.on b{color:var(--ink);font-weight:700}
.cap-track .sn{position:absolute;top:-8px;right:-12px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--orange);color:#fff;font-style:normal;font-weight:800;font-size:10.5px;line-height:20px;box-shadow:0 0 0 2px var(--surface)}
.stamp{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;opacity:.45;filter:grayscale(1)}
.stamp .sd{width:58px;height:58px;border-radius:50%;border:2px dashed var(--mute);display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--mute);transform:rotate(var(--r));margin-bottom:4px}
.stamp b{font-size:12px;line-height:1.25;color:var(--ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.stamp span{font-size:10.5px;color:var(--mute);line-height:1.25;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.stamp.on{opacity:1;filter:none}
.stamp.on .sd{border-style:double;border-width:4px;box-shadow:inset 0 0 0 2px var(--surface)}
.stamp.on.teal .sd{border-color:var(--teal);color:var(--teal-d);background:var(--teal-l)}
.stamp.on.orange .sd{border-color:var(--orange);color:var(--orange);background:var(--orange-l)}
.stamp.on.brown .sd{border-color:var(--brown);color:var(--brown);background:var(--surface)}
@media (prefers-color-scheme: dark){.stamp.on.brown .sd{border-color:var(--mute);color:var(--ink)}}
.letter .sign{text-align:right;font-weight:700;color:var(--brown);margin-top:14px}
/* Phiếu đánh giá trình bày */
.ptf{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.ptr{border-top:1px solid var(--line);padding-top:8px}
.ptg{font-size:12px;font-weight:700;color:var(--teal-d);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.ptn{margin-top:6px;font-size:13px;padding:6px 10px}
.ptb{display:flex;flex-direction:column;gap:8px}
.ptb-l{display:grid;gap:2px;margin-top:4px}
.ptb-l>div{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:13px;gap:2px 8px}
.ptb-l em{flex-basis:100%;font-style:normal;color:var(--mute);font-size:12px}
/* Đề mục chính màu xanh logo RMON (dùng sắc đậm để đủ tương phản khi đọc) */
.group h2,.lesson h3{color:var(--teal-d)}
.group h2{border-left:4px solid var(--teal);padding-left:8px}
/* Logo thật của trường + tên app màu nâu cà phê */
:root{--coffee:#5C3A21}
.logo-img{display:block;height:34px;width:auto;flex:none}
.logo-img.big{height:56px;margin-bottom:6px}
.auth-brand{padding:28px 0 8px}
.auth-brand .pname{font-size:28px;font-weight:800;color:var(--coffee);margin:0;letter-spacing:.3px}
.auth-brand .muted{font-size:14px;margin-top:4px;color:var(--coffee);opacity:.75}
@media (prefers-color-scheme: dark){.logo-img{background:#fff;border-radius:8px;padding:3px 6px;box-sizing:content-box}:root{--coffee:#D9B99B}}
.lvs{display:flex;flex-direction:column;gap:8px}
.lvo{display:flex;flex-direction:column;gap:4px;text-align:left;width:100%;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 12px;color:var(--ink)}
.lvo-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.lvo-h b{color:var(--brown);font-size:15px}.lvo-h em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--teal-d);white-space:nowrap}
.lvo-d{font-size:13px;color:var(--mute);line-height:1.45}
.lvo[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-l);box-shadow:0 0 0 1px var(--teal)}
.lvo[aria-pressed="true"] .lvo-h b::before{content:"✓ ";color:var(--teal-d)}
/* Khu ngoại khoá */
.nk-l{display:flex;flex-direction:column;min-width:0}
.nk-l b{font-size:14.5px;color:var(--brown)}
.nk-t{font-size:12px;font-weight:700;color:var(--teal-d);letter-spacing:.3px}
.nk-ok{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.nk-an{opacity:.5}
.nk-card{border-left:4px solid var(--orange)}
.blt.nk table{min-width:560px}.blt.nk th,.blt.nk td{padding:8px 6px}
/* Logo RMON (không slogan) + chữ Passport; lời chào chạy chữ */
.brand{display:flex;align-items:center;gap:8px;flex:none}
.brand .logo-img{height:28px}
.brand-p{font-weight:800;font-size:19px;color:var(--coffee);letter-spacing:.2px;line-height:1;transform:translateY(2px)}
.brand.big{justify-content:center;gap:12px}
.brand.big .logo-img{height:46px}
.brand.big .brand-p{font-size:30px;transform:translateY(4px)}
.welcome{margin:16px auto 0;min-height:52px;max-width:320px;font-size:17px;line-height:1.5;font-weight:600;color:var(--teal-d)}
.welcome .caret{display:inline-block;width:2px;height:1.05em;background:var(--orange);margin-left:2px;vertical-align:-2px;animation:nhay 1s steps(1) infinite}
@keyframes nhay{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.welcome .caret{display:none}}
@media (prefers-color-scheme: dark){.brand .logo-img{background:#fff;border-radius:8px;padding:3px 6px;box-sizing:content-box}}
.qv-wrap{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:1/1}
.qv-wrap video{width:100%;height:100%;object-fit:cover;display:block}
.qv-khung{position:absolute;inset:18%;border:3px solid rgba(255,255,255,.85);border-radius:16px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.nk-thue{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--cream,#f7f2ea);font-size:13.5px}
.nk-thue span{color:var(--muted,#6b6b6b)}.nk-thue b{text-align:right}

.tcc{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink);background:var(--mint-l,#E4F3F5);border-radius:8px;padding:6px 9px}
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}.qchips .chip{font-size:12.5px;padding:5px 9px}.qchips .qg{font-size:11.5px;color:var(--muted,#7a6a5d);margin-left:4px}
.lvd{margin-top:8px;font-size:13px}.lvd summary{cursor:pointer;color:var(--teal-d,#2E8B94);font-weight:600}.lvd p{margin:6px 0}
.kqp{display:grid;grid-template-columns:1fr auto;gap:3px 12px;margin-top:10px;font-size:13.5px}.kqp div{display:contents}.kqp span{color:var(--muted,#7a6a5d)}
.blt.kqt table{min-width:620px}.blt.kqt td,.blt.kqt th{padding:7px 6px;text-align:center}.blt.kqt td:first-child,.blt.kqt th:first-child{text-align:left}.blt.kqt tr[data-kbr]{cursor:pointer}
.sheet-back{margin:24px auto 8px;max-width:560px}

.lv .dk{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.lv .dk li{display:flex;gap:8px;font-size:13.5px;line-height:1.4;color:var(--ink)}
.lv .dk li i{font-style:normal;flex:none;width:18px;text-align:center;color:var(--mute);font-weight:800}
.lv .dk li.ok i{color:var(--teal-d)}
.lv .dk li em{display:block;font-style:normal;font-size:12.5px;color:var(--orange)}
.lv .dk li.ok em{color:var(--mute)}
.tile-btn{text-align:left;font:inherit;cursor:pointer;border-color:var(--orange)}
.list{display:grid;gap:8px}
.list .item{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;font:inherit;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--ink)}
.obsr{display:block!important}
.obs-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.obs-tc{margin-top:6px;font-size:13px}
.obs-tc summary{color:var(--brown);cursor:pointer;font-weight:600}
.obs-tc ul{margin:6px 0 0;padding-left:18px}
.obs-x{margin:6px 0 0;color:var(--orange)}
.val .vy{margin:0 0 8px;font-style:italic;color:var(--brown)}
.val .x ul{margin:4px 0 0}
.qs-tong{position:sticky;top:-1px;z-index:2;background:var(--teal-l);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--brown)}
.qs-tong b{font-size:20px}
.qs-gt{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:10px}
.qs-gh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qs-gh b{color:var(--orange);font-size:17px}
.qs-hv p{margin:0 0 6px;font-size:13.5px;line-height:1.45}
.qs-hv .seg{display:flex}
.qs-hv .seg button{flex:1}
.qs-x{font-size:13px;color:var(--bad);display:grid;gap:4px}
.qs-x .tick{font-size:13px;color:var(--ink)}
.qs-hv .seg button.m[aria-pressed="true"]{background:var(--teal);color:#fff}
.dau-an{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dau-an li{display:grid;gap:2px;border-left:3px solid var(--orange);padding:2px 0 2px 10px}
.dau-an li b{color:var(--brown);font-size:14px}
.dau-an li span{font-size:12.5px;color:var(--mute)}
.lv .tx p.lv-v{color:var(--orange);font-weight:700;font-size:13px;margin-top:2px}
.stamp .sdw{position:relative}
.stamp .sn{position:absolute;top:-6px;right:-14px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:var(--orange);color:#fff;font-style:normal;font-weight:800;font-size:13px;line-height:26px;box-shadow:0 0 0 2px var(--surface),0 2px 6px rgba(0,0,0,.18)}
.stamp.teal .sn{background:var(--teal-d)}
.stamp.brown .sn{background:var(--brown)}
.letter .sign{display:table;margin:16px 0 0 auto;text-align:center}
.tbl th:not(:first-child){text-align:center}
.tbl td:first-child{white-space:normal;min-width:96px}
.tbl.t2 td:first-child{width:38%}
.dk-ok{color:var(--ok);font-weight:800}
.dk-no{color:var(--bad);font-weight:800}
.muc{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.muc i{display:inline-block;width:22px;height:12px;border-radius:3px}
.muc.do i{background:#D93A2B}.muc.cam i{background:#F08A24}.muc.vang i{background:#F2C230}
.val .x{line-height:1.55}
.val .x ul{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.val .b ul{gap:7px}
.minhhoa{margin:0 0 12px;border-radius:18px;overflow:hidden;line-height:0}
.minhhoa svg{width:100%;height:auto;max-height:150px;display:block}
.chuoi .lua{font-size:18px;color:var(--orange)}
.cds{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:10px}
.cd{display:block;aspect-ratio:1;border-radius:50%;border:2px dashed var(--line)}
.cd.ok{background:var(--ok);border:0}
.cd.no{background:var(--orange);border:0}
details.lv{display:block;padding:0}
details.lv>summary{display:flex;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none}
details.lv>summary::-webkit-details-marker{display:none}
details.lv .lv-mo{margin-left:auto;color:var(--mute);transition:transform .2s;flex:none}
details.lv[open] .lv-mo{transform:rotate(180deg)}
details.lv .lv-ct{padding:0 14px 12px 62px}
details.lv .lv-ct>p{margin:0;font-size:13px;color:var(--mute)}
.exam-hero{position:relative;background:linear-gradient(135deg,#E97B2C 0%,#F2A65A 100%);color:#fff;border:0;box-shadow:0 8px 22px rgba(233,123,44,.35);overflow:hidden}
.exam-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14)}
.exam-hero .eh-ic{font-size:30px;line-height:1;margin-bottom:6px}
.exam-hero .eh-t{font-size:19px;font-weight:800;margin-bottom:10px;line-height:1.3;position:relative;z-index:1}
.exam-hero .muted,.exam-hero p{color:rgba(255,255,255,.92)!important}
.exam-hero .tl3>div{background:rgba(255,255,255,.2)}
.exam-hero .tl3 b{color:#fff}.exam-hero .tl3 span{color:rgba(255,255,255,.9)}
.exam-hero .kqp div{border-color:rgba(255,255,255,.3)!important;color:#fff}
.exam-hero .note{background:rgba(255,255,255,.18);color:#fff}
.exam-hero .eh-btn{background:#fff;color:#C65A12;font-weight:800;border:0;width:100%;font-size:16px;padding:13px;position:relative;z-index:1}
.exam-hero .kqp span,.exam-hero .kqp b{color:#fff}
#nav button.khoa{opacity:.38;filter:grayscale(1)}

/* ---- Mục nổi bật theo màu (tab Phát triển) ---- */
.h1-hl{color:var(--teal-d)}
.sec{--c:var(--teal);border-top:4px solid var(--c);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,var(--surface)) 0,var(--surface) 76px)}
/* Phần con nối tiếp mục trên: không kẻ viền, tiêu đề nhỏ */
.sec.cont{border-top:0;background:none;margin-top:16px}
.sec.cont h4{font-size:14.5px;margin:0 0 8px;color:var(--teal-ink,var(--teal))}
.sec>.eyebrow,.sec>.row>.eyebrow{display:flex;align-items:center;gap:8px;color:var(--c-t,var(--c));font-size:12px;letter-spacing:1.2px}
.sec-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px;letter-spacing:0;background:color-mix(in srgb,var(--c) 18%,var(--surface))}
.sec-teal{--c:#2E9AA6;--c-t:#1F7F8A}
.sec-orange{--c:#EE8434;--c-t:#C9651A}
.sec-brown{--c:#8A5A3B;--c-t:#6E4429}
.sec-rose{--c:#D9667A;--c-t:#B8475C}
.sec-blue{--c:#3F7FC4;--c-t:#2C66A6}
.sec-green{--c:#3E9B6E;--c-t:#2A7D55}
.sec-plum{--c:#8A5BA8;--c-t:#6F428D}
.sec-gold{--c:#D4A12A;--c-t:#9E7412}
@media (prefers-color-scheme: dark){.sec{--c-t:var(--c)}.sec-brown{--c:#C08A66}}
.hello h1.h1-1d{white-space:nowrap;font-size:min(24px,4.7vw)}
.exam-hero .eh-t{white-space:nowrap;font-size:min(19px,4.9vw)}
.exam-hero .eh-sub{position:relative;z-index:1;margin:-6px 0 10px;font-weight:700;font-size:14px;color:rgba(255,255,255,.92)}

/* ---- Bài thi: tách từng phần theo màu ---- */
.xlock{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--orange-l);color:var(--brown);font-weight:700;font-size:14px}
.xpart{margin-top:20px;border-radius:14px;padding:12px;background:color-mix(in srgb,var(--c) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 22%,var(--surface))}
.xp-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.xp-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center}
.xp-t{flex:1;min-width:0}
.xp-t b{display:block;font-size:16px;color:var(--c-t,var(--c));line-height:1.25}
.xp-t span{font-size:12px;color:var(--mute)}
.xp-d{flex:none;font-size:12.5px;font-weight:800;color:#fff;background:var(--c);border-radius:999px;padding:4px 10px}
.xm{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;padding:11px 12px;color:inherit;font:inherit}
.xm + .xm{margin-top:8px}
.xm-top{display:flex;align-items:baseline;gap:8px}
.xm-top b{flex:1;min-width:0;font-size:14.5px;line-height:1.3;color:var(--ink)}
.xm-top em{flex:none;font-style:normal;font-weight:800;font-size:12.5px;color:var(--c-t,var(--c))}
.xm-g{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--mute)}
.xm-st{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.xm-st .chev{font-size:20px;color:var(--mute);line-height:1}
.lesson h1.h1-1d{white-space:nowrap;font-size:min(23px,5vw)}
.remind p,.letter p,.lesson .sec>p,.lesson .quote,.lesson .note,.lesson .sec li,.val .b li,.val .vy{text-align:justify;text-justify:inter-word;hyphens:manual}
/* Danh sách bài: biểu tượng + 4 màu RMON (trắng, xanh mint, nâu, cam) */
.group{--gc:var(--teal);--gcl:var(--teal-l);--gct:var(--teal-d)}
.group.g-vh,.group.g-qc{--gc:var(--orange);--gcl:var(--orange-l);--gct:#C65A12}
.group.g-vt{--gc:var(--brown);--gcl:#F1E9E4;--gct:var(--brown)}
.group h2{display:flex;align-items:center;gap:8px;border-left-color:var(--gc)!important}
.group h2 .gi{width:30px;height:30px;border-radius:9px;background:var(--gc);color:#fff;display:grid;place-items:center;flex:none}
.group h2 .gi .ico{width:18px;height:18px}
.mod .no{position:relative;width:42px;height:42px;border-radius:12px;background:var(--gcl,var(--teal-l));color:var(--gct,var(--teal-d))}
.mod .no .ico{width:22px;height:22px}
.mod .no .so{position:absolute;right:-6px;bottom:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--gc,var(--teal));color:#fff;font-style:normal;font-size:11px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.mod.done .no{background:var(--teal-l);color:var(--teal-d)}
.mod.done .no .so{background:var(--teal)}
.mod{border-left:4px solid var(--gc,var(--teal))}
.group .mod .pill.ok{background:var(--teal-l);color:var(--teal-d)}
.group .mod .pill.bad{background:var(--orange-l);color:#C65A12}
.group .mod .pill.new{background:var(--gcl);color:var(--gct)}
.group h2{border-left:0!important;padding-left:0!important;color:var(--gct)!important}
/* Phối màu biểu tượng và khung theo nhóm: ô biểu tượng tô đặc, khung viền và nền nhạt cùng tông */
.group .mod{border:1.5px solid color-mix(in srgb,var(--gc) 28%,var(--line));border-left:5px solid var(--gc);background:linear-gradient(90deg,color-mix(in srgb,var(--gcl) 70%,var(--surface)) 0,var(--surface) 46%);box-shadow:0 2px 8px color-mix(in srgb,var(--gc) 10%,transparent)}
.group .mod .no{background:var(--gc);color:#fff;box-shadow:0 3px 8px color-mix(in srgb,var(--gc) 35%,transparent)}
.group .mod .no .so{background:var(--surface);color:var(--gct);box-shadow:0 0 0 2px var(--gc)}
.group .mod .tx b{color:var(--brown)}
.group .mod.done{border-left-color:var(--teal);background:linear-gradient(90deg,var(--teal-l) 0,var(--surface) 46%)}
.group .mod.done .no{background:var(--teal);color:#fff}
.group .mod.done .no .so{color:var(--teal-d);box-shadow:0 0 0 2px var(--teal)}
.group h2 .gi{box-shadow:0 3px 8px color-mix(in srgb,var(--gc) 35%,transparent)}
.next{border-width:2px;box-shadow:0 4px 14px color-mix(in srgb,var(--teal) 22%,transparent)}
/* Bảng so sánh 2 cột cân đối (Làm việc · Phụng sự) */
.tbl.vs table{table-layout:fixed}
.tbl.vs th{text-align:center}
.tbl.vs th:first-child{background:var(--brown);color:var(--surface)}
.tbl.vs td{width:50%;text-align:center;vertical-align:middle;padding:11px 12px}
.tbl.vs td:first-child{width:50%;min-width:0;font-weight:500;color:var(--mute);background:color-mix(in srgb,var(--brown) 6%,transparent);border-right:1px solid var(--line)}
.tbl.vs td:last-child{font-weight:600;color:var(--teal-d,var(--teal))}
/* Chữ ký: hai dòng căn giữa với nhau, khối lùi vào giữa một chút */
.letter p.sign{display:table;margin:18px 10% 0 auto;text-align:center!important;text-align-last:center!important}

.tbl td ul.cl{margin:0;padding:0;list-style:none;text-align:left;hyphens:none}
.tbl td ul.cl li{position:relative;padding-left:12px;margin:0 0 4px;text-align:left}
.tbl td ul.cl li:last-child{margin-bottom:0}
.tbl.phang td ul.cl li{padding-left:0;margin-bottom:6px}
.tbl.phang td ul.cl li::before{display:none}
.tbl td ul.cl li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--teal)}
/* Bộ Quy chế gói gọn trong một khung, bấm để mở, ký nhận ở cuối */
details.qcbox{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gc);border-radius:14px;padding:12px 12px 4px}
details.qcbox>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding-bottom:8px}
details.qcbox>summary::-webkit-details-marker{display:none}
details.qcbox>summary h2{margin:0;border-left:0!important;padding-left:0}
details.qcbox .qcs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);padding-left:38px}
details.qcbox .qcs i{margin-left:auto;font-style:normal;color:var(--gct);transition:transform .2s}
details.qcbox[open] .qcs i{transform:rotate(180deg)}
/* Bảng lịch 3 cột: cột giờ hẹp để hai cột việc rộng hơn */
.tbl.hep table{table-layout:fixed}
.tbl.hep th:first-child,.tbl.hep td:first-child{width:64px;min-width:0;padding-right:4px;font-size:12.5px}
.tbl.hep td{padding:9px 8px;font-size:13.5px}
/* Bảng 2 cột: cột nhãn hẹp lại để cột nội dung rộng, đỡ dài */
.tbl.t2:not(.vs) table{table-layout:fixed}
.tbl.t2:not(.vs) th:first-child,.tbl.t2:not(.vs) td:first-child{width:30%;min-width:0;padding-right:6px}

/* Bài giảng chuyên môn: danh sách tuần, thẻ tiết, trình xem slide */
#bg-root .sheet{z-index:55}
.bg-tuan{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.bg-tuan button{flex:none;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--mute);font-weight:700}
.bg-tuan button.co{border-color:var(--teal);color:var(--teal-d)}
.bg-tuan button[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.bg-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bg-meta span{font-size:12px;font-weight:600;color:var(--teal-d);background:var(--teal-l);border-radius:999px;padding:3px 9px}
a.btn{text-decoration:none;display:inline-flex;align-items:center}
a.next{text-decoration:none;color:inherit}


/* Sân khấu dẫn chuyện: cột nhân vật bên trái, slide, dải lời thoại bên dưới */
.bgd{position:relative;container-type:inline-size;width:min(100%,calc((100vh - 64px) * 16 / 9));aspect-ratio:16/9;display:grid;grid-template-columns:22% 78%;grid-template-rows:78% 22%;background:radial-gradient(circle at 10% 100%,#FFF5D9 0,transparent 45%),linear-gradient(180deg,#E3F4F3,#FFFFFF);box-shadow:0 10px 40px rgba(0,0,0,.45);overflow:hidden;--nhip:.5s}
.bgp:fullscreen .bgd{width:min(100%,calc(100vh * 16 / 9))}
.bgd.vao{animation:bgVao .35s ease}
.bgd>.bgp-k{grid-column:2;grid-row:1;width:100%;box-shadow:none;border-left:1px solid #D7E6E5;border-bottom:1px solid #D7E6E5}
.bgd-nv{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 4% 6%;position:relative}
.bgd-nv::before{content:"";position:absolute;bottom:7%;left:14%;right:14%;height:4%;border-radius:50%;background:rgba(11,79,87,.12)}
.bgd-a{width:100%;flex:0 1 auto;position:relative}
.bgd-a svg{width:100%;height:auto;display:block}
.bgd-a.noi{animation:bgNoi .9s ease-in-out infinite}
.bgd-a.noi .nv .mi-o{animation:mieng .32s steps(1) infinite}
.bgd-a.noi .nv .mi-cuoi{animation:mieng .32s steps(1) infinite reverse}
.bgd-nv b{font-size:2.4cqw;font-weight:800;margin-top:.4cqw}
.bgd-nv[data-ai="ruby"] b{color:#FF7A59}.bgd-nv[data-ai="mio"] b{color:#4AB1BB}.bgd-nv[data-ai="ollie"] b{color:#E5A21C}.bgd-nv[data-ai="nina"] b{color:#9C86E6}
.bgd-nv.doi .bgd-a{animation:bgVaoNv .55s cubic-bezier(.3,1.5,.5,1) both}
.bgd-loi{grid-column:2;grid-row:2;display:flex;align-items:center;gap:1.2cqw;padding:1cqw 1.6cqw 1.2cqw 1.2cqw;cursor:default}
.bgd-bb{flex:1;min-width:0;height:100%;position:relative;background:#fff;border:.3cqw solid var(--mau,#4AB1BB);border-radius:1.6cqw;padding:1cqw 1.6cqw;display:flex;flex-direction:column;justify-content:center;box-shadow:0 .4cqw 1.2cqw rgba(11,79,87,.12)}
.bgd-bb::before{content:"";position:absolute;left:-1.5cqw;top:28%;border:.9cqw solid transparent;border-right:1.2cqw solid var(--mau,#4AB1BB)}
.bgd-bb[data-ai="ruby"]{--mau:#FF7A59}.bgd-bb[data-ai="mio"]{--mau:#4AB1BB}.bgd-bb[data-ai="ollie"]{--mau:#E5A21C}.bgd-bb[data-ai="nina"]{--mau:#9C86E6}
.bgd-ten{position:absolute;top:-1.3cqw;left:1.4cqw;background:var(--mau,#4AB1BB);color:#fff;font-weight:800;font-size:1.3cqw;padding:.2cqw 1cqw;border-radius:2cqw}
#bgd-txt{margin:0;font-size:2.05cqw;line-height:1.35;font-weight:700;color:#173A3D;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
#bgd-txt.vao{animation:bgChu .35s ease}
#bgd-txt.dai{font-size:1.68cqw}
.bgd-goi{position:absolute;right:1.4cqw;bottom:-1.2cqw;background:#FFF4D6;color:#8A5A00;border:.15cqw solid #E8A91E;font-weight:700;font-size:1.05cqw;padding:.15cqw .9cqw;border-radius:2cqw}
.bgd-goi:empty{display:none}
#bgd-txt.dai2{font-size:1.42cqw;-webkit-line-clamp:4}
.bgd-nut{display:flex;flex-direction:column;gap:.6cqw}
.bgd-nut button{width:4cqw;height:4cqw;min-width:28px;min-height:28px;border-radius:50%;border:0;background:#fff;box-shadow:0 .2cqw .8cqw rgba(11,79,87,.18);font-size:1.7cqw;cursor:pointer}
.bgd-che{position:absolute;inset:0;background:#173A3D;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.bgd-che span{color:#fff;font-size:3.4cqw;font-weight:800}
.bgp-k.che .bgd-che{opacity:1}
@keyframes bgNoi{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5%)}}
@keyframes mieng{0%{opacity:1}50%{opacity:0}}
@keyframes bgChu{from{opacity:0;transform:translateY(20%)}to{opacity:1;transform:none}}
.bgp.co-loi .bgd{width:min(100%,calc((100vh - 64px) * 16 / 9))}

/* Đánh giá sau bài học và báo cáo */
.dg-mt{margin:0;padding-left:20px;font-size:14px;line-height:1.55}
.dg-tre,.dg-ds{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dg-tre li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line,#E2EAEA)}
.dg-stt{color:var(--mute,#6B7F80);font-size:13px;text-align:right}
.dg-chon{display:flex;gap:4px;flex-wrap:wrap}
.dg-chon button{border:1px solid var(--line,#D5E1E1);background:#fff;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:600;color:#4A5D5E;min-height:36px}
.dg-chon button.vt[aria-pressed="true"]{background:#F28C28;border-color:#F28C28;color:#fff}
.dg-chon button.dat[aria-pressed="true"]{background:#2B8790;border-color:#2B8790;color:#fff}
.dg-chon button.ht[aria-pressed="true"]{background:#9A6A45;border-color:#9A6A45;color:#fff}
.dg-chon button.vang[aria-pressed="true"]{background:#8A9A9B;border-color:#8A9A9B;color:#fff}
.dg-tong{display:flex;gap:6px;flex-wrap:wrap}
.dg-m{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#EEF3F3}
.dg-m.vt,.dg-so .vt b{color:#C96A12}.dg-m.dat,.dg-so .dat b{color:#2B8790}.dg-m.ht,.dg-so .ht b{color:#9A6A45}.dg-m.vang{color:#6B7F80}
.dg-giai{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:13px;line-height:1.45}
.dg-giai b{display:inline-block;min-width:86px;margin-right:6px}.dg-giai .vt{color:#C96A12}.dg-giai .dat{color:#2B8790}.dg-giai .ht{color:#9A6A45}.dg-giai .vang{color:#6B7F80}
.dg-ds li{display:flex;gap:8px;align-items:center}.dg-ds li input{flex:1;min-width:0}.dg-ds li.nghi input{opacity:.5;text-decoration:line-through}
.btn.sm{padding:6px 12px;font-size:13px;min-height:36px}
.dg-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:10px}
.dg-so div{background:#F5F9F9;border-radius:12px;padding:10px 12px}.dg-so b{display:block;font-size:22px}.dg-so span{font-size:12.5px;color:var(--mute,#6B7F80)}
.dg-thanh{display:flex;height:10px;border-radius:6px;overflow:hidden;background:#EEF3F3;margin-top:12px}
.dg-thanh i.vt{background:#F28C28}.dg-thanh i.dat{background:#2B8790}.dg-thanh i.ht{background:#9A6A45}
.dg-cuon{overflow-x:auto;margin-top:8px}
.dg-bang{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
.dg-bang th,.dg-bang td{border-bottom:1px solid var(--line,#E2EAEA);padding:7px 6px;text-align:left;vertical-align:top}
.dg-bang th{font-size:12px;color:var(--mute,#6B7F80);font-weight:700;white-space:nowrap}
.dg-bang th small,.dg-ghi{display:block;font-size:11.5px;color:var(--mute,#6B7F80);font-weight:500}
.dg-tre-bang td:not(:first-child):not(:last-child),.dg-tre-bang th:not(:first-child):not(:last-child){text-align:center}
.dg-tre-bang td:first-child{white-space:nowrap}
.dg-o{display:inline-block;min-width:28px;padding:2px 5px;border-radius:8px;font-size:11.5px;font-weight:800;color:#fff}
.dg-o.vt{background:#F28C28}.dg-o.dat{background:#2B8790}.dg-o.ht{background:#9A6A45}.dg-o.vang{background:#A9B6B7}
.dg-nx{min-width:180px;font-size:13px}.dg-nx.ht{color:#9A6A45;font-weight:700}.dg-nx.on{color:#9A6A45}.dg-nx.vt{color:#C96A12;font-weight:700}.dg-nx.dat{color:#2B8790}
@media (max-width:560px){.dg-tre li{grid-template-columns:22px minmax(0,1fr)}.dg-tre .dg-chon{grid-column:1/-1}}
#dg-root .sheet{z-index:75}

/* Phòng thu Biệt đội */
#pt-root .sheet{z-index:76}
.pt-ds{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pt-sl{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute,#6B7F80);margin-top:8px}
.pt-c{background:#fff;border:1px solid var(--line,#E2EAEA);border-left:6px solid var(--mau,#4AB1BB);border-radius:14px;padding:12px 14px}
.pt-c[data-ai="ruby"]{--mau:#FF7A59}.pt-c[data-ai="mio"]{--mau:#4AB1BB}.pt-c[data-ai="ollie"]{--mau:#E5A21C}.pt-c[data-ai="nina"]{--mau:#9C86E6}
.pt-c.da{background:#F6FBF8}
.pt-c.dang{box-shadow:0 0 0 3px rgba(228,87,46,.35)}
.pt-c p{margin:6px 0 10px;font-size:17px;line-height:1.45;font-weight:600;color:#173A3D}
.pt-dau{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pt-ai{background:var(--mau);color:#fff;font-weight:800;font-size:12.5px;padding:2px 10px;border-radius:999px}
.pt-cx{font-size:12.5px;color:var(--mute,#6B7F80);font-style:italic}
.pt-ok{margin-left:auto;font-size:12.5px;font-weight:700;color:#2E9E5B}
.pt-nut{display:flex;gap:8px;flex-wrap:wrap}
.pt-dung{background:#E4572E!important;border-color:#E4572E!important;animation:ptNhay 1s ease-in-out infinite}
.pt-nhi{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px}
.pt-nhi input{width:20px;height:20px}
@keyframes ptNhay{50%{opacity:.6}}

/* Phim mở màn: Đài ngắm sao của Bà Mây */
.bmm{container-type:inline-size;background:linear-gradient(180deg,#0A1430 0%,#16285A 55%,#24477A 100%);overflow:hidden;cursor:default}
.bmm::after{content:"";position:absolute;inset:0;background:#02040C;opacity:0;transition:opacity 1.2s ease;z-index:2;pointer-events:none}
.bmm.c4::after{opacity:.35}.bmm.c5::after{opacity:.2}
.mm-nho{position:absolute;inset:0;pointer-events:none}
.bg-modau{border:2px solid #F2C14E;background:linear-gradient(180deg,#FFF8E6,#fff)}
.mm-kinh{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 44%,transparent 0 22cqw,rgba(255,255,255,.28) 22cqw 22.5cqw,#050A18 23.2cqw);transition:opacity 1.4s ease,transform 1.4s ease}
.bmm.c4 .mm-kinh{opacity:0;transform:scale(1.6)}
.mm-trong{position:absolute;width:5.2cqw;opacity:0;transform:translate(-50%,-50%)}
.mm-trong svg{width:100%;display:block;fill:none;stroke:#FFE08A;stroke-width:1;stroke-dasharray:2 1.6}
.bmm.c3 .mm-trong{animation:mmTrong 1s ease calc(1.6s + var(--i) * .12s) forwards}
@keyframes mmTrong{to{opacity:.85}}
.mm-ba{position:absolute;left:4%;bottom:-60%;width:16cqw;z-index:3;transition:bottom 1.2s cubic-bezier(.25,.8,.35,1)}
.mm-ba svg{width:100%;display:block}
.bmm.c5 .mm-ba{bottom:16%}
.mm-nho b{position:absolute;width:.34cqw;height:.34cqw;border-radius:50%;background:#fff;opacity:.55;animation:mmNhay 2.6s ease-in-out infinite}
.mm-dat{position:absolute;left:-10%;right:-10%;bottom:-6%;height:30%;background:radial-gradient(ellipse at 30% 0,#2F5D50 0,#1D3B35 55%,#12261F 100%);border-radius:50% 50% 0 0}
.mm-sao{position:absolute;width:5.2cqw;opacity:0;transform:translate(-50%,-50%) scale(.3)}
.mm-sao svg{width:100%;display:block;fill:#FFD54A;filter:drop-shadow(0 0 1.2cqw rgba(255,214,90,.9))}
.bmm.c1 .mm-sao{animation:mmHien .9s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .14s) forwards}
.bmm.c1 .mm-sao svg{animation:mmLap 1.8s ease-in-out calc(var(--i) * .2s) infinite}
.bmm.c3 .mm-sao{animation:mmRoi 1.7s ease-in calc(var(--i) * .12s) forwards}
.mm-gio{position:absolute;width:30cqw;left:-40%;top:16%;z-index:1}
.mm-gio svg{width:100%;display:block}
.bmm.c2 .mm-gio{animation:mmGio 5.2s ease-in-out forwards}
.bmm.c2 .gio-than{animation:mmPhong .5s ease-in-out infinite alternate;transform-origin:50% 50%}
.mm-tieu{position:absolute;right:2.5%;top:50%;transform:translateY(-50%);width:23%;z-index:4;color:#fff;transition:opacity .6s;text-align:left}
.mm-tieu span{display:inline-block;background:#FF7A59;border-radius:2cqw;padding:.3cqw 1.4cqw;font-weight:800;font-size:1.5cqw}
.mm-tieu b{display:block;font-size:3.4cqw;line-height:1.15;margin-top:.6cqw;text-shadow:0 .3cqw 1.4cqw rgba(0,0,0,.5)}
.bmm.chay:not(.xong) .mm-tieu{opacity:0}
.mm-ben{position:absolute;left:0;top:0;bottom:0;width:18%;z-index:5;background:linear-gradient(180deg,#EEF9F7,#D6F0EB);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;padding:1.2cqw .9cqw;box-sizing:border-box;transform:translateX(-100%);transition:transform .5s ease}
.mm-ben.on{transform:none}
.mm-loi{position:relative;width:100%;box-sizing:border-box;background:#fff;border-radius:1.2cqw;padding:.8cqw .9cqw;border:.25cqw solid #4AB1BB;box-shadow:0 .3cqw 1cqw rgba(110,74,46,.15)}
.mm-loi::after{content:"";position:absolute;left:50%;bottom:-1cqw;transform:translateX(-50%);border:1cqw solid transparent;border-top-color:#4AB1BB;border-bottom:0}
.mm-hinh{width:78%}.mm-hinh svg{width:100%;display:block}
.mm-ten{font-size:1.6cqw;font-weight:800;color:#4AB1BB}
.mm-ben[data-ai="gio"] .mm-ten{color:#3C8FC4}
.mm-ba{display:none}
.mm-loi[data-ai="gio"]{border-color:#6FB7E6}
.mm-loi em{display:inline-block;font-style:normal;background:#4AB1BB;color:#fff;font-weight:800;font-size:1.1cqw;padding:.2cqw 1cqw;border-radius:2cqw;margin-bottom:.4cqw}
.mm-loi[data-ai="gio"] em{background:#4AB1BB}
.mm-loi span{display:block;font-size:1.4cqw;font-weight:700;color:#4A3426;line-height:1.35}
.mm-nut{z-index:5;bottom:2.5%!important;font-size:2.2cqw!important}
.bmm.chay .mm-nut{display:none}
.bmm.nhanh .mm-sao{animation:none!important;opacity:0}
.bmm.nhanh .mm-gio{animation:none;left:110%}
.bmm.nhanh .mm-trong{animation:none;opacity:.85}
.bmm.nhanh .mm-kinh{transition:none}
.bmm.nhanh .mm-ba{transition:none}
@keyframes mmNhay{50%{opacity:.15}}
@keyframes mmHien{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes mmLap{50%{transform:scale(.82);opacity:.75}}
.mm-sn{position:absolute;width:var(--d);transform:translate(-50%,-50%);z-index:1;transition:opacity 1.6s ease;animation:mmSn 2.2s ease-in-out infinite}
.mm-sn svg{width:100%;display:block;fill:#FFF3C4;filter:drop-shadow(0 0 .5cqw rgba(255,236,170,.9))}
.bmm.c3 .mm-sn{opacity:.35}.bmm.c5 .mm-sn{opacity:.6}
@keyframes mmSn{50%{transform:translate(-50%,-50%) scale(.55) rotate(20deg);filter:brightness(.7)}}
@keyframes mmRoi{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}25%{opacity:1;transform:translate(-10%,-110%) scale(1.15) rotate(50deg)}100%{opacity:0;transform:translate(1400%,-420%) scale(.5) rotate(200deg)}}
@keyframes mmGio{0%{left:-40%;transform:rotate(-6deg)}30%{left:18%;transform:rotate(4deg)}55%{left:30%;transform:rotate(-3deg) scale(1.08)}100%{left:115%;transform:rotate(6deg)}}
@keyframes mmPhong{to{transform:scale(1.05,.96)}}
@keyframes mmThu{0%{top:-75%;transform:translate(-50%,0) rotate(-12deg)}35%{transform:translate(-62%,0) rotate(8deg)}65%{transform:translate(-40%,0) rotate(-5deg)}100%{top:22%;transform:translate(-50%,0) rotate(0)}}
@keyframes mmSang{to{filter:drop-shadow(0 0 3.4cqw rgba(255,236,170,1))}}
/* Bà Mây, Gió Tinh Nghịch trên sân khấu dẫn chuyện */
.bgd-nv[data-ai="ba"] b{color:#9A6A45}.bgd-nv[data-ai="gio"] b{color:#4AB1BB}
.bgd-bb[data-ai="ba"]{--mau:#9A6A45}.bgd-bb[data-ai="gio"]{--mau:#4AB1BB}
.bgd-nv[data-ai="gio"] .bgd-a{margin-bottom:30%}
.bgd-a.noi .gio .gio-mieng{animation:mieng .32s steps(1) infinite}
.pt-c[data-ai="ba"]{--mau:#9A6A45}.pt-c[data-ai="gio"]{--mau:#4AB1BB}

/* Cả Biệt đội cùng nói */
.nv-doi{display:grid;grid-template-columns:1fr 1fr;gap:2%;width:100%}
.nv-doi svg{width:100%;height:auto;display:block}
.bgd-nv[data-ai="doi"] b{color:#4AB1BB}.bgd-bb[data-ai="doi"]{--mau:#4AB1BB}.pt-c[data-ai="doi"]{--mau:#4AB1BB}

/* Nhân vật trong bài vè luôn nằm gọn trong khung, không trùm lên tiêu đề */
.bgm-a{display:flex;align-items:flex-end;justify-content:center}
.bgm-a>svg{height:100%;width:auto;max-width:100%;display:block}

/* Từ tiết 1 (cô dẫn chuyện): slide to, nhân vật bên trái, bong bóng lời ngay trên đầu nhân vật */
.bgd.ke{grid-template-columns:18% 82%;grid-template-rows:minmax(0,1fr) auto;background:#FFFFFF}
.bgd.ke::before{content:"";position:absolute;left:0;top:0;bottom:0;width:18%;background:#E6F7F4;z-index:2;box-shadow:.3cqw 0 1.2cqw rgba(90,58,40,.12)}
.bgd.ke .bgd-loi,.bgd.ke .bgd-nv{position:relative;z-index:3}
.bgd.ke>.bgp-k{grid-column:2;grid-row:1/3;align-self:stretch;justify-self:center;height:100%;width:auto;aspect-ratio:16/9;border:0;border-radius:0;box-shadow:none;z-index:1} /* phủ kín chiều cao, phần mép trái phải của slide nằm dưới cột nhân vật */
.bgd.ke .bgd-loi{grid-column:1;grid-row:1;align-self:end;padding:1.4cqw .9cqw 0 1.1cqw}
.bgd.ke .bgd-nv{grid-column:1;grid-row:2;padding:0 8% 1.2cqw}
.bgd.ke .bgd-nv b{font-size:1.9cqw}
.bgd.ke .bgd-a{width:86%}
.bgd.ke .bgd-bb{height:auto;min-height:8cqw;padding:1.6cqw 1.1cqw 1.3cqw;border-radius:2cqw;border-width:.25cqw;box-shadow:0 .5cqw 1.6cqw rgba(122,92,62,.16)}
.bgd.ke .bgd-bb::before{left:50%;top:auto;bottom:-2.1cqw;margin-left:-1.1cqw;border:1.1cqw solid transparent;border-top:1.2cqw solid var(--mau,#4AB1BB)}
.bgd.ke #bgd-txt{font-size:1.5cqw;line-height:1.4;color:#4A3426;display:block;-webkit-line-clamp:unset;overflow:visible}
.bgd.ke #bgd-txt.dai{font-size:1.38cqw}
.bgd.ke #bgd-txt.dai2{font-size:1.25cqw}
.bgd.ke .bgd-ten{top:-1.4cqw;left:1.2cqw;font-size:1.25cqw}
.bgd.ke .bgd-goi{position:static;display:inline-block;margin-top:.9cqw;align-self:flex-start;font-size:1cqw}
.bgd.ke .bgd-goi:empty{display:none}
.bgd.ke .bgd-a{transition:opacity .3s}
.bgd.ke .bgd-bb[data-ai="ruby"]{--mau:#F28C28}.bgd.ke .bgd-bb[data-ai="mio"]{--mau:#4AB1BB}.bgd.ke .bgd-bb[data-ai="ollie"]{--mau:#C98A4B}.bgd.ke .bgd-bb[data-ai="nina"]{--mau:#9A6A45}.bgd.ke .bgd-bb[data-ai="ba"]{--mau:#7A5233}.bgd.ke .bgd-bb[data-ai="gio"]{--mau:#4AB1BB}.bgd.ke .bgd-bb[data-ai="doi"]{--mau:#4AB1BB}
.bgd.ke .bgd-goi{background:#FFF1E3;color:#B4600F;border-color:#F28C28}
/* Mèo con (Luyện Viết): đuôi vẫy nhẹ */
.nv-meo .duoi{transform-box:view-box;animation:duoiVay 2.6s ease-in-out infinite}
@keyframes duoiVay{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
/* Công việc: chuẩn bị môi trường (thu gọn), bài giảng theo lớp, báo cáo tháng */
.ktdau{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:0}
.ktdau .tx{flex:1;min-width:0}.ktdau .tx b{display:block;font-size:15px;color:var(--brown);margin-top:2px}
.ktdau .chev{color:var(--mute);font-size:18px;line-height:1}
.nopr .tk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--mute)}
.nopr .tk.on{background:var(--ok);border-color:var(--ok);color:#fff}
.nopr.soan{opacity:.8}
.nopr .chev{color:var(--mute);font-size:20px}
.bgcard .nopr .bgic{width:34px;height:34px;border-radius:10px;background:var(--teal-l);color:var(--teal-d);display:grid;place-items:center;flex:none}
.bgcard .nopr .bgic svg{width:19px;height:19px}
.hdbox{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.hdbox legend{font-weight:700;font-size:13px;color:var(--teal-d);padding:0 6px}
div.hdbox{gap:4px;margin-top:8px}

/* Tab Công việc: cùng kiểu thẻ với Văn hoá (nhóm có biểu tượng, dòng thẻ nhạt có viền màu) */
.group.g-bg{--gc:var(--orange);--gcl:var(--orange-l);--gct:#C65A12}
.group.g-bc{--gc:var(--brown);--gcl:#F1E9E4;--gct:var(--brown)}
.group .mod .tx .pill{display:flex;width:fit-content;margin-top:6px;font-style:normal}
.group.g-bc .mod .no{background:#F1E9E4;color:var(--brown);box-shadow:none}
.group .mod.done .no{background:var(--gcl);color:var(--gct)}
.group .mod.done .no .so{background:var(--teal)}
.group .mod.soan{opacity:.85}
.group .mod.khoa .no{background:#F1E9E4;color:var(--brown)}
.group .mod .pill.wk{background:#F1E9E4;color:var(--brown)}
.mod .kyt{font-weight:800;font-size:15px}
.mo-chev{color:var(--gct);font-size:13px;margin-left:-4px}
.ktlist{margin:6px 0 4px 18px;padding:6px 12px;border-left:3px solid var(--gcl);display:flex;flex-direction:column}
.ktlist .ckb[aria-pressed="true"] .bx{background:var(--teal);border-color:var(--teal)}
.kt-all{align-self:flex-start;margin-top:8px;background:var(--teal);color:#fff;border:0;border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;font-family:inherit}
.kt-all:active{transform:scale(.97)}
.lopchon{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.lopb{display:flex;flex-direction:column;align-items:center;border:1.5px solid color-mix(in srgb,var(--orange) 28%,var(--line));background:var(--surface);border-radius:12px;padding:8px 2px 7px;line-height:1.2;box-shadow:0 2px 8px color-mix(in srgb,var(--orange) 8%,transparent)}
.lopb-so{font-size:18px;font-weight:800;color:#C65A12}
.lopb-tuoi{font-size:11px;color:var(--mute);margin-top:2px}
.lopb[aria-pressed="true"]{background:var(--orange-l);border:2px solid var(--orange)}
.lopb[aria-pressed="true"] .lopb-tuoi{color:#C65A12;font-weight:600}

/* Công việc · màn chính: 3 ô lớn, gọn */
.viec-ds{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.viec-o{--oc:var(--teal);--ocl:var(--teal-l);display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--oc) 30%,var(--line));border-radius:18px;padding:18px 16px;box-shadow:0 4px 14px color-mix(in srgb,var(--oc) 12%,transparent)}
.viec-o.o-bg,.v-bg{--oc:var(--orange);--ocl:var(--orange-l)}
.viec-o.o-bc,.v-bc{--oc:var(--brown);--ocl:#F1E9E4}
.v-mt{--oc:var(--teal);--ocl:var(--teal-l)}
.viec-ic{width:54px;height:54px;border-radius:16px;background:var(--oc);color:#fff;display:grid;place-items:center;flex:none}
.viec-ic .ico{width:28px;height:28px}
.viec-tx{flex:1;min-width:0}.viec-tx b{display:block;font-size:17.5px;color:var(--brown);line-height:1.3}
.viec-tx span{display:block;font-size:13.5px;color:var(--mute);margin-top:3px}
.viec-go{width:32px;height:32px;border-radius:50%;background:var(--ocl);color:var(--oc);display:grid;place-items:center;font-size:20px;font-weight:700;flex:none}
.viec-lui{align-self:flex-start;background:none;border:0;padding:4px 0;font-weight:700;color:var(--teal-d);font-size:15px}
.viec-dau{display:flex;align-items:center;gap:12px}
.viec-dau .viec-ic{width:44px;height:44px;border-radius:13px}.viec-dau .viec-ic .ico{width:24px;height:24px}
.viec-dau h1{font-size:22px}
.viec-goi{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--mute)}

/* Lời chúc cuối màn Công việc */
.viec-loi{position:relative;margin:0;padding:20px 18px 16px;border-radius:18px;background:linear-gradient(135deg,var(--teal-l) 0%,var(--surface) 55%,var(--orange-l) 100%);border:1.5px solid color-mix(in srgb,var(--teal) 25%,var(--line));text-align:center;overflow:hidden}
.viec-ngoac{position:absolute;top:-14px;left:12px;font-size:84px;line-height:1;font-family:Georgia,serif;color:var(--orange);opacity:.35}
.viec-loi blockquote{margin:0;font-size:17px;line-height:1.55;font-weight:600;font-style:italic;color:var(--brown);text-wrap:balance}
.viec-loi figcaption{margin-top:8px;font-size:13px;font-weight:700;color:var(--orange);letter-spacing:.3px}
.viec-loi figcaption::before{content:"— "}
.viec-chuc{margin:12px auto 0;padding-top:10px;border-top:1px dashed color-mix(in srgb,var(--teal) 35%,var(--line));font-size:15px;font-weight:700;color:var(--teal-d);max-width:30ch}

/* Phim kết · Đêm hội Ngàn Sao: sao bay từ dưới lên đúng chỗ trống, Gió bay vào làm bạn, chòm sao Vương miện, pháo sao, Biệt đội đứng dưới bầu trời */
.bmm.ket .mm-trong{opacity:.85;animation:none!important}
.bmm.ket .mm-sao{animation:none!important;opacity:0;transform:translate(-50%,900%) scale(.4);transition:transform 1.1s cubic-bezier(.3,1.25,.5,1),opacity .5s ease}
.bmm.ket .mm-sao.ve{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bmm.ket .mm-sn{opacity:.25}.bmm.ket.sang .mm-sn{opacity:.95}
.bmm.ket.c4::after,.bmm.ket.c5::after{opacity:0}
.bmm.ket.c4{background:linear-gradient(180deg,#14275C 0%,#2A4C8A 60%,#3E6FA0 100%)}
.bmm.ket .mm-gio{z-index:4;left:-40%;top:8%;width:22cqw;animation:none!important;transition:left 2.4s cubic-bezier(.3,.9,.4,1)}
.bmm.ket.c3 .mm-gio{left:66%}
.mm-chom{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.mm-chom line{stroke:#FFE7B0;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:0;transition:opacity .5s ease calc(var(--k) * .22s)}
.bmm.ket.c4 .mm-chom line{opacity:.9}
.mm-phao{position:absolute;inset:0;z-index:1;pointer-events:none}
.mm-phao i{position:absolute;width:0;height:0}
.mm-phao b{position:absolute;left:-.3cqw;top:-.3cqw;width:.6cqw;height:.6cqw;border-radius:50%;background:#FFD54A;opacity:0;box-shadow:0 0 .8cqw currentColor}
.mm-phao i:nth-child(2n) b{background:#7FE0D2}.mm-phao i:nth-child(3n) b{background:#FFB49A}
.bmm.ket.c4 .mm-phao b{animation:mmPhao 1.7s ease-out calc(var(--j) * .45s) 2 both}
@keyframes mmPhao{0%{opacity:1;transform:rotate(var(--a)) translateX(0)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(7cqw)}}
.mm-doi{position:absolute;left:21%;width:46%;height:30%;bottom:-40%;z-index:3;display:flex;justify-content:space-around;align-items:flex-end;transition:bottom 1.2s cubic-bezier(.3,1.2,.5,1)}
.mm-doi i{height:100%;display:flex;align-items:flex-end}.mm-doi svg{height:100%;width:auto;display:block}
.bmm.ket.c5 .mm-doi{bottom:3%}
.bmm.ket .mm-tieu{top:66%}
.mm-tieu em{display:block;font-style:normal;font-weight:800;font-size:1.7cqw;color:#FFE7B0;margin-top:.6cqw}
.bmm.ket.nhanh .mm-sao,.bmm.ket.nhanh .mm-gio,.bmm.ket.nhanh .mm-doi,.bmm.ket.nhanh .mm-chom line{transition:none}
.mm-hinh .nv-doi{gap:4%}

/* Chữ ẩn tại Lời cô: bóng nói trên màn hình ẩn đi, lời nhân vật đang nói hiện nổi ở đầu khung Lời cô */
.bgd.chu-an .bgd-loi,.bgd.chu-an .bgd-nv{display:none!important}
/* chế độ chữ trong Lời cô: bỏ hẳn cột nhân vật bên trái, slide bài học chiếm trọn màn hình */
.bgd.chu-an,.bgd.ke.chu-an{grid-template-columns:100%!important;grid-template-rows:minmax(0,1fr)!important;background:#fff}
.bgd.ke.chu-an::before{display:none}
.bgd.chu-an>.bgp-k,.bgd.ke.chu-an>.bgp-k{grid-column:1!important;grid-row:1!important;justify-self:center;align-self:center;height:auto!important;max-height:100%;width:min(100%,calc((100vh - 52px) * 16 / 9))!important;aspect-ratio:16/9}
.bgp-nay{display:none;margin:10px 0 12px;padding:12px 14px;border-radius:14px;background:#E6F4F5;border-left:5px solid #2F8F99}
.bgp-nay span{display:block;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#2F8F99;margin-bottom:4px}
.bgp-nay p{margin:0;font-size:17px;font-weight:700;line-height:1.45;color:#3B2015}
.bgp:has(.bgd.chu-an) .bgp-nay.on{display:block}
/* Tuần hè: tiết của nhóm nâng cao, nhóm ôn */
.bg-nhom{display:inline-block;padding:1px 8px;border-radius:9px;font-size:11px;font-weight:800;letter-spacing:.3px}
.bg-nhom.nang_cao{background:#F1E6DB;color:#5A3A28}.bg-nhom.on{background:#E6F4F5;color:#2F8F99}
/* chế độ chữ trong Lời cô: slide chiếm trọn màn hình nên bỏ logo ở góc (logo chỉ thuộc cột nhân vật), không đè nhãn đội của slide */
.bgd.ke.chu-an::after{display:none}

   Giấy chấm bi, viền chấm tròn, ảnh của con trong khung tròn, toàn bộ chữ viết tay HP001. */
=======
/* tên nhân vật dài (Gió Tinh Nghịch) ở cột trái: một dòng, chữ nhỏ lại cho vừa */
.bgd-nv b{white-space:nowrap}
.bgd-nv[data-ai="gio"] b{font-size:1.75cqw}
.bgd.ke .bgd-nv[data-ai="gio"] b{font-size:1.4cqw}
/* ================= Album “Hành trình của con” · trang A4 ngang (đơn vị cqw = % bề rộng trang) ================= */
@font-face{font-family:"HP001";src:url("fonts/hp001.ttf") format("truetype");font-display:swap}
@font-face{font-family:"HP001";src:url("fonts/hp001b.ttf") format("truetype");font-weight:700;font-display:swap}
.htp-wrap{container-type:inline-size;width:100%}
.htp{position:relative;width:100cqw;height:70.7cqw;overflow:hidden;color:#3B2014;font-family:"HP001",cursive;border-radius:1.2cqw;box-shadow:0 4px 18px rgba(59,32,20,.12);
  background-color:#FCF4EA;background-image:radial-gradient(var(--c2l) .42cqw,transparent .48cqw),radial-gradient(var(--cl) .42cqw,transparent .48cqw);background-size:2.6cqw 2.6cqw;background-position:0 0,1.3cqw 1.3cqw}
.htp *{margin:0;font-family:inherit}
.htp-giay{position:absolute;inset:2.2cqw;border-radius:3cqw;background:#FFFDF8;border:.38cqw dotted var(--c);box-shadow:0 0 0 .7cqw #FFFDF8}
.htp-bong{position:absolute;border-radius:50%;display:block}
.htp-bong.vong{background:none;border:.22cqw solid}
.htp-dau{position:absolute;left:4.6cqw;top:4.4cqw;width:62cqw}
.htp-dau h2{font-weight:700;font-size:3.5cqw;line-height:1.15;color:var(--c);white-space:nowrap;-webkit-text-stroke:.06cqw currentColor}
.htp-dau p{margin-top:.2cqw;font-size:1.35cqw;color:#7A6656}
.htp-ky{position:absolute;left:4.8cqw;top:8.3cqw;z-index:3;font-size:1.2cqw;color:#7A6656}
.htp-ky span{color:var(--c2)}
.htp-dau h2 b{color:var(--c2)}
.htp-hoa{position:absolute;right:4.4cqw;top:3.4cqw;width:8cqw;height:8cqw}
.htp-hoa .canh i{position:absolute;left:2.6cqw;top:2.6cqw;width:2.8cqw;height:2.8cqw;border-radius:50%;background:var(--c2l);border:.18cqw solid var(--c2)}
.htp-hoa .nhuy{position:absolute;left:1.7cqw;top:1.7cqw;width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--c2);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 .3cqw #FFFDF8}
.htp-hoa small{font-size:.85cqw}.htp-hoa b{font-size:2.3cqw;font-weight:700}
.htp-hoa em{position:absolute;top:8.6cqw;left:-4cqw;width:16cqw;text-align:center;font-style:normal;font-size:1.15cqw;color:var(--c)}
.htp-nhan{position:absolute;z-index:3;font-size:1.25cqw;font-weight:700;color:#fff;background:var(--c);padding:.15cqw 1.1cqw .3cqw;border-radius:5cqw;box-shadow:0 0 0 .25cqw #FFFDF8}
.htp-nhan.cam{background:#E97B2C}.htp-nhan.nau{background:#3B2014}
.htp-k,.htp-o,.htp-m,.htp-vuong{position:absolute;display:flex;flex-direction:column;align-items:center}
.htp-m{filter:drop-shadow(0 0 .12cqw var(--c2)) drop-shadow(0 0 .1cqw var(--c2)) drop-shadow(0 .5cqw .6cqw rgba(59,32,20,.16))}
.htp-m .khung{position:relative;width:100%;height:var(--h);background:#fff;-webkit-mask:var(--mk) center/100% 100% no-repeat;mask:var(--mk) center/100% 100% no-repeat}
.htp-m .khung>img,.htp-m .khung>.htp-trong{position:absolute;left:.6cqw;top:.6cqw;width:calc(100% - 1.2cqw);height:calc(100% - 1.2cqw);object-fit:cover;-webkit-mask:var(--mk) center/100% 100% no-repeat;mask:var(--mk) center/100% 100% no-repeat}
.htp-vuong .khung{position:relative;width:100%;height:var(--h);background:#fff;padding:.7cqw .7cqw 2.9cqw;border-radius:.4cqw;box-shadow:0 0 0 .15cqw var(--cl),0 .5cqw 1.2cqw rgba(59,32,20,.16)}
.htp-vuong .khung::before{content:"";position:absolute;left:50%;top:-1cqw;width:5.4cqw;height:1.8cqw;margin-left:-2.7cqw;background:var(--c2l);border:.12cqw dashed var(--c2);transform:rotate(-4deg);z-index:2}
.htp-vuong img,.htp-vuong .htp-trong{display:block;width:100%;height:100%;object-fit:cover}
.htp-vuong figcaption{position:absolute;left:0;right:0;bottom:.7cqw;text-align:center;font-size:1.2cqw;color:#3B2014;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .8cqw}
.htp-k .khung{width:100%;height:var(--h);border-radius:2.2cqw;overflow:hidden;background:#F4ECE3;border:.55cqw solid #fff;box-shadow:0 0 0 .2cqw var(--cl),0 .5cqw 1.2cqw rgba(59,32,20,.14)}
.htp-o .khung{width:100%;height:var(--h);border-radius:50%;overflow:hidden;background:#F4ECE3;border:.55cqw solid #fff;box-shadow:0 0 0 .22cqw var(--c2),0 0 0 .55cqw #FFFDF8,0 0 0 .75cqw var(--c2l),0 .5cqw 1.2cqw rgba(59,32,20,.14)}
.htp-k img,.htp-o img{display:block;width:100%;height:100%;object-fit:cover}
.htp-k figcaption,.htp-o figcaption,.htp-m figcaption{position:relative;z-index:2;margin-top:-1.1cqw;max-width:96%;font-size:1.2cqw;line-height:1.2;background:#fff;color:#3B2014;padding:.25cqw 1cqw .4cqw;border-radius:5cqw;box-shadow:0 .2cqw .6cqw rgba(59,32,20,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htp-trong{width:100%;height:100%;display:grid;place-items:center;font-size:1.3cqw;color:#B09A88;background:repeating-radial-gradient(circle at 50% 50%,#FBF4EC 0 .7cqw,#F6ECE1 .7cqw 1.4cqw)}
.htp-loi{position:absolute;background:#fff;border-radius:3cqw;padding:1cqw 1.8cqw;border:.3cqw dotted var(--c2);overflow:visible}
.htp-loi .duoi1,.htp-loi .duoi2{position:absolute;border-radius:50%;background:#fff;border:.3cqw dotted var(--c2)}
.htp-loi .duoi1{left:-1.8cqw;top:2.4cqw;width:1.6cqw;height:1.6cqw}.htp-loi .duoi2{left:-3.1cqw;top:.6cqw;width:1cqw;height:1cqw}
.htp-loi.phai .duoi1{left:auto;right:-1.8cqw}.htp-loi.phai .duoi2{left:auto;right:-3.1cqw}
.htp-hinh{position:absolute;display:block;z-index:1;overflow:visible;filter:drop-shadow(0 .2cqw .3cqw rgba(59,32,20,.12))}
.htp-loi h3{font-size:1.25cqw;font-weight:700;color:var(--c)}
.htp-loi h3.kn{margin-top:.5cqw}
.htp-viet{font-size:1.55cqw;line-height:1.45;color:#3B2014}
.htp-kn{display:flex;flex-wrap:wrap;gap:.3cqw 1cqw;margin-top:.2cqw}
.htp-kn span{display:inline-flex;align-items:center;gap:.4cqw;font-size:1.2cqw}
.htp-kn i{width:1.7cqw;height:1.7cqw;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-size:.95cqw;background:var(--c2)}
.htp-chan{position:absolute;left:4.6cqw;bottom:3.1cqw;font-size:1cqw;color:#A8968A}
/* bìa */
.htp-bia .bia-tron{position:absolute;border-radius:50%;display:block}
.htp-bia .t1{right:-6cqw;top:-10cqw;width:52cqw;height:52cqw;background:#4AAFB933}
.htp-bia .t2{right:4cqw;bottom:-12cqw;width:30cqw;height:30cqw;background:#E97B2C2E}
.htp-bia .t3{left:-5cqw;bottom:-6cqw;width:18cqw;height:18cqw;background:#2B87901F}
.htp-bia .t4{left:36cqw;top:-4cqw;width:12cqw;height:12cqw;background:#E97B2C24}
.htp-logo{position:absolute;left:7cqw;top:7cqw;width:15cqw}
.bia-nho{position:absolute;left:7cqw;top:15.4cqw;font-size:1.6cqw;font-weight:700;color:#fff;background:var(--c);padding:.2cqw 1.4cqw .4cqw;border-radius:5cqw}
.htp-bia h1{position:absolute;left:4cqw;top:21cqw;width:46cqw;text-align:center;font-weight:700;line-height:1.15;color:var(--c2);-webkit-text-stroke:.08cqw currentColor}
.htp-bia h1 span{display:block;white-space:nowrap}
.htp-bia h1 small{display:block;font-size:2.9cqw;font-weight:700;color:var(--c);-webkit-text-stroke:0;margin-bottom:.8cqw}
.bia-lop{position:absolute;left:7cqw;top:43.2cqw;display:flex;gap:.8cqw}
.bia-lop span{font-size:1.5cqw;color:var(--c);border:.22cqw dotted var(--c);border-radius:5cqw;padding:.1cqw 1.2cqw .3cqw;background:#fff}
.bia-tranh{position:absolute;left:0;top:0;width:100cqw;height:70.7cqw;overflow:visible;font-family:"HP001",cursive}
.bia-vong{position:absolute;left:0;top:0;width:100cqw;height:70.7cqw;overflow:visible;pointer-events:none;font-family:"HP001",cursive}
.bv-cau{font-size:26px;font-weight:700;letter-spacing:1px}
.bt-may{font-size:13px;font-weight:700;fill:#fff;font-family:"HP001",cursive;letter-spacing:1px}
.bt-bang{font-size:19.5px;font-weight:700}
.bia-anh{position:absolute;right:9cqw;top:11cqw;width:34cqw;height:34cqw}
.bia-anh .vien{position:absolute;inset:-2cqw;border-radius:50%;border:.45cqw dotted var(--c2)}
.bia-anh .khung{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:1cqw solid #fff;box-shadow:0 0 0 .35cqw var(--c),0 1cqw 2.4cqw rgba(59,32,20,.2);background:#F4ECE3}
.bia-anh img{width:100%;height:100%;object-fit:cover}
.bia-tem{position:absolute;right:7cqw;top:50cqw;width:22cqw;font-size:1.45cqw;line-height:1.3;text-align:center;color:#fff;background:var(--c2);border-radius:5cqw;padding:.6cqw 1.2cqw .8cqw;transform:rotate(-4deg);box-shadow:0 0 0 .3cqw #FFFDF8,0 0 0 .5cqw var(--c2)}
.htp-kyyeu .bia-tem{width:28cqw}
/* trang cuối */
.htp-cuoi .htp-logo{left:6cqw;top:5.4cqw;width:11cqw}
.htp-bia .htp-logo{left:19.5cqw}
.htp-bia .bia-nho{left:27cqw;transform:translateX(-50%);white-space:nowrap}
.cuoi-h{position:absolute;left:22cqw;right:22cqw;top:4.4cqw;text-align:center;font-weight:700;font-size:4.4cqw;color:var(--c2);-webkit-text-stroke:.07cqw currentColor}
.cuoi-p{position:absolute;left:22cqw;right:22cqw;top:10.4cqw;text-align:center;font-size:1.7cqw;color:#7A6656}.cuoi-p b{color:var(--c)}
.cuoi-kn,.cuoi-loi{position:absolute;top:34.6cqw;height:21.4cqw;background:#fff;border-radius:3cqw;padding:1.4cqw 2cqw;border:.3cqw dotted var(--c)}
.cuoi-kn{left:6cqw;width:46cqw}.cuoi-loi{left:55cqw;width:39cqw;border-color:var(--c2)}
.cuoi-kn h3,.cuoi-loi h3{font-size:1.7cqw;font-weight:700;color:var(--c);margin-bottom:.6cqw}.cuoi-loi h3{color:var(--c2)}
.cuoi-kn div{display:grid;grid-template-columns:1fr 1fr;gap:.5cqw 1.4cqw}
.cuoi-kn span{display:flex;align-items:center;gap:.6cqw;font-size:1.35cqw}
.cuoi-kn i{flex:none;width:1.9cqw;height:1.9cqw;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-size:1cqw;background:var(--c2)}
.cuoi-loi p{font-size:1.55cqw;line-height:1.5}
.cuoi-loi .ky{position:absolute;left:2cqw;right:2cqw;bottom:1.4cqw;display:flex;justify-content:space-between}
.cuoi-loi .ky span{width:44%;text-align:center;font-size:1.2cqw;color:#7A6656;border-top:.18cqw dashed #C9B8AA;padding-top:.4cqw}
.cuoi-rmon{position:absolute;left:25cqw;right:25cqw;bottom:3.6cqw;text-align:center;font-size:1.5cqw;font-weight:700;color:var(--c)}
/* màn soạn album */
.ht-ky{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ht-ky button small{line-height:1}
.ht-ky button{display:flex;flex-direction:column;align-items:center;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:6px 2px;line-height:1.2}
.ht-ky button b{font-size:18px;line-height:1.1;color:var(--brown)}.ht-ky button small{font-size:10.5px;color:var(--mute)}
.ht-ky button[aria-pressed="true"]{border:2px solid var(--orange);background:var(--orange-l)}
.ht-anh-dong{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;margin-top:8px}
.ht-anh-dong img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none;background:var(--line)}
.ht-anh-dong .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ht-anh-dong .tx input,.ht-anh-dong .tx select{font-size:13.5px;padding:6px 8px}
.ht-anh-dong .tx span{font-size:12px;color:var(--mute)}
.ht-chk{display:flex;gap:10px;align-items:center;padding:6px 2px;font-size:14px;font-weight:500;color:var(--ink)}
.ht-chk input[type=checkbox]{width:20px;height:20px;flex:none;margin:0}
.ht-chk img{width:48px;height:48px;object-fit:cover;border-radius:8px}
.ht-gan{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;max-height:40vh;overflow:auto}
.ht-xem-truoc{border-radius:12px;overflow:hidden}
label.dang{opacity:.6;pointer-events:none}
.ht-xem{position:fixed;inset:0;z-index:70;background:#EFE8DF;overflow:auto}
.ht-xem-bar{position:sticky;top:0;z-index:2;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 16px;background:#3B2014;color:#fff}
.ht-xem-bar button{color:#fff;background:none;border:0;font-weight:700}
.ht-xem-bar .btn{background:var(--orange);border-radius:999px;padding:6px 14px}
.ht-xem-bar b{font-size:14px;flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht-trangs{max-width:1100px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:18px}
@media print{
  @page{size:A4 landscape;margin:0}
  body.in-album>*:not(#ht-in){display:none!important}
  body.in-album{background:#fff}
  body.in-album .ht-xem{position:static;background:#fff;overflow:visible}
  body.in-album .ht-xem-bar{display:none}
  body.in-album .ht-trangs{max-width:none;padding:0;gap:0;display:block}
  body.in-album .htp-wrap{width:297mm;break-after:page;page-break-after:always}
  body.in-album .htp{border-radius:0;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* nhập danh sách trẻ từ Excel */
.nx-o{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.nx-o .muted{font-size:13px;flex:1;min-width:200px}
.nx-bang{width:100%;border-collapse:collapse;font-size:14px}.nx-bang th,.nx-bang td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}.nx-bang th{color:var(--mute);font-weight:600;font-size:12.5px}.nx-bang td:not(:first-child),.nx-bang th:not(:first-child){text-align:right}

/* báo cáo tiến độ học tập (trang 2 báo cáo tháng) */
.tdp .tdp-logo{position:absolute;left:4.6cqw;top:4.2cqw;width:10cqw}
.tdp-dau{position:absolute;left:16.4cqw;top:3.6cqw}
.tdp-dau h2{font-weight:700;font-size:3.2cqw;line-height:1.15;color:var(--c);-webkit-text-stroke:.05cqw currentColor}
.tdp-dau p{font-size:1.4cqw;color:var(--c2);margin-top:.1cqw}
.tdp-tt{position:absolute;left:4.4cqw;right:15cqw;top:10.6cqw;display:flex;gap:1cqw;flex-wrap:wrap}
.tdp-tt span{display:flex;align-items:baseline;gap:.6cqw;background:#fff;border:.18cqw dotted var(--c);border-radius:5cqw;padding:.25cqw 1.3cqw .35cqw}
.tdp-tt small{font-size:1.05cqw;color:#7A6656}.tdp-tt b{font-size:1.35cqw;color:#3B2014;font-weight:700}
.tdp-than{position:absolute;left:4cqw;right:4cqw;top:15.2cqw;bottom:8.6cqw;display:flex;flex-direction:column}
.tdp-than .htp-nhan{position:relative;align-self:flex-start;margin-left:.6cqw}
.tdp-n2{margin-top:1.4cqw}
.tdp-o{flex:1;display:flex;margin-top:.6cqw;min-height:0}
.tdp-bang{width:100%;height:100%;border-collapse:separate;border-spacing:0;font-family:var(--f);background:#fff;border-radius:1.6cqw;overflow:hidden;box-shadow:0 0 0 .18cqw var(--cl)}
.tdp-bang thead th{font-family:"HP001",cursive;font-weight:700;font-size:1.2cqw;color:#fff;background:var(--c);padding:.55cqw .8cqw;text-align:left;line-height:1.2}
.tdp-bang thead th:first-child{width:13%}.tdp-bang thead th:nth-child(2),.tdp-bang thead th:nth-child(3){width:21%}.tdp-bang thead th:nth-child(4){width:17%}
.tdp-bang tbody th{font-family:"HP001",cursive;font-weight:700;font-size:1.25cqw;color:var(--m);text-align:left;padding:.5cqw .8cqw;border-left:.6cqw solid var(--m);background:color-mix(in srgb,var(--m) 7%,#fff)}
.tdp-bang tbody th i{display:none}
.tdp-bang td{font-size:1.05cqw;line-height:1.35;color:#3B2014;padding:.45cqw .8cqw;vertical-align:top;border-top:.1cqw solid #EFE5DA}
.tdp-bang tbody tr:first-child td,.tdp-bang tbody tr:first-child th{border-top:0}
.tdp-bang tbody tr:nth-child(even) td{background:#FFFBF6}
.tdp-bang ul{margin:0;padding:0;list-style:none}.tdp-bang li{position:relative;padding-left:1cqw}
.tdp-bang li::before{content:"";position:absolute;left:0;top:.5cqw;width:.45cqw;height:.45cqw;border-radius:50%;background:var(--m)}
.tdp-nx{font-style:italic;color:#5A4636}
.tdp-trong{color:#C9B8AA}
.tdp-kh{margin-top:.6cqw;display:grid;grid-template-columns:repeat(5,1fr);gap:.8cqw}
.tdp-kh div{background:#fff;border-radius:1.4cqw;border-top:.5cqw solid var(--m);padding:.6cqw .8cqw;display:flex;flex-direction:column;gap:.25cqw;min-height:7cqw;font-family:var(--f)}
.tdp-kh b{font-family:"HP001",cursive;font-size:1.2cqw;color:var(--m)}
.tdp-kh span{font-size:1cqw;line-height:1.3;color:#3B2014;display:flex;justify-content:space-between;gap:.5cqw}
.tdp-kh em{font-style:normal;font-weight:700;font-size:.85cqw;color:#fff;border-radius:2cqw;padding:0 .5cqw;height:1.3cqw;line-height:1.3cqw;flex:none;background:#2B8790}
.tdp-kh em.l-P{background:#E97B2C}.tdp-kh em.l-R{background:#B5541A}
.tdp-chu{position:absolute;left:4.6cqw;bottom:3.2cqw;width:62cqw;font-family:var(--f);font-size:.9cqw;line-height:1.45;color:#8A7666}
.tdp-chu b{color:var(--c)}
.tdp-ky{position:absolute;right:5cqw;bottom:3cqw;text-align:center;display:flex;flex-direction:column;min-width:20cqw;border-top:.18cqw dashed #C9B8AA;padding-top:.4cqw}
.tdp-ky small{font-size:1cqw;color:#7A6656}.tdp-ky b{font-size:1.5cqw;color:var(--c);font-weight:700}

/* ghi tiến độ học tập */
.td-lv{border-left:4px solid var(--m);background:var(--surface);border-radius:12px;padding:10px 12px;margin-top:10px}
.td-lv>b{color:var(--m);font-size:15px}.td-tom{margin:2px 0 6px;font-size:13px;color:var(--mute)}
.td-lv label{font-size:13px;margin-top:6px}.td-lv textarea{font-size:14px}
.td-tab{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.td-tab button{flex:none;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;color:var(--m)}
.td-tab button[aria-selected="true"]{background:var(--m);border-color:var(--m);color:#fff}
.td-nhom h4{font-size:13px;margin:10px 0 2px;color:var(--teal-d)}
.td-nhom{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 12px 10px}
.td-nhom summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;padding:8px 0}
.td-nhom summary::-webkit-details-marker{display:none}
.td-nhom summary::after{content:'▾';color:var(--mute);margin-left:6px}.td-nhom:not([open]) summary::after{content:'▸'}
.td-nhom summary span{margin-left:auto;font-size:12.5px;color:var(--mute);font-weight:600}
.td-nhom summary h3{margin:0!important}
.td-nhom h3{font-size:14px;margin:6px 0 4px;color:var(--brown);text-transform:uppercase;letter-spacing:.04em}
.td-bai{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-top:6px;flex-wrap:wrap}
.td-bai .tx{flex:1;min-width:150px;display:flex;flex-direction:column}.td-bai .tx small{color:var(--mute);font-size:12px}
.td-ms{display:flex;gap:5px}
.td-m{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-size:12.5px;font-weight:700;color:var(--mute);white-space:nowrap}
.td-m.cu{border-style:dashed}
.td-m.m1.on{background:#2B8790;border-color:#2B8790;color:#fff}.td-m.m1.cu{border-color:#2B8790;color:#2B8790}
.td-m.m2.on{background:#E97B2C;border-color:#E97B2C;color:#fff}.td-m.m2.cu{border-color:#E97B2C;color:#E97B2C}
.td-m.m3.on{background:#3B2014;border-color:#3B2014;color:#fff}.td-m.m3.cu{border-color:#3B2014;color:#3B2014}

/* album: 3 mục chọn */
.ht-muc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ht-muc button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 10px 9px;min-height:84px}
.ht-muc b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--teal-l,#E3F2F3);color:var(--teal-d);font-size:13px}
.ht-muc span{font-weight:700;font-size:13.5px;line-height:1.25;color:var(--brown)}
.ht-muc small{font-size:11.5px;color:var(--mute)}
.ht-muc button[aria-selected="true"]{background:var(--teal);border-color:var(--teal)}
.ht-muc button[aria-selected="true"] span,.ht-muc button[aria-selected="true"] small{color:#fff}
.ht-muc button[aria-selected="true"] b{background:#fff;color:var(--teal-d)}
.ht-goi{margin:0 0 8px;font-size:13.5px;color:var(--mute)}

/* Hoạt động Montessori cá nhân: lộ trình từng bé */
#mt-root .sheet{z-index:57}
.mt-be{align-items:center}.mt-be .tx{gap:2px}
.mt-vachs{display:flex;gap:6px;margin-top:6px;width:100%}
.mt-vach{position:relative;flex:1;height:7px;border-radius:4px;background:color-mix(in srgb,var(--m) 12%,#fff);overflow:hidden;display:flex}
.mt-vach i{display:block;height:100%;background:var(--m)}.mt-vach b{display:block;height:100%;background:color-mix(in srgb,var(--m) 40%,#fff)}
.mt-chu{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--mute)}.mt-chu span{display:inline-flex;align-items:center;gap:5px}.mt-chu i{width:10px;height:10px;border-radius:3px;display:inline-block}
.mt-chu-g{flex-basis:100%}
.mt-loc{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;align-self:flex-start}
.mt-loc button{border:0;background:none;border-radius:999px;padding:7px 16px;font-weight:700;font-size:14px;color:var(--mute)}
.mt-loc button[aria-pressed="true"]{background:var(--brown);color:#fff}
.mt-huong{font-size:12.5px;color:var(--mute);margin:0;line-height:1.7}
.mt-huong b{font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap}
.mt-huong b.t0{background:#fff;border:1px solid var(--line)}.mt-huong b.t1{background:#2B8790;color:#fff}.mt-huong b.t2{background:#E97B2C;color:#fff}.mt-huong b.t3{background:#3B2014;color:#fff}
.mt-tien{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin:-2px 0 6px}.mt-tien i{display:block;height:100%;background:var(--teal-d)}
.mt-dong{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-top:6px}
.mt-dong.goiy{border:1.5px dashed #E97B2C;background:#FFF8F1}
.mt-dong .tx{flex:1;min-width:0;display:flex;flex-direction:column}.mt-dong .tx small{color:var(--mute);font-size:12px}
.mt-tt{flex:none;min-width:118px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;color:var(--mute);white-space:nowrap}
.mt-tt.t1{background:#2B8790;border-color:#2B8790;color:#fff}.mt-tt.t2{background:#E97B2C;border-color:#E97B2C;color:#fff}.mt-tt.t3{background:#3B2014;border-color:#3B2014;color:#fff}
.mt-tt.cu{opacity:.75;border-style:dashed}
.mt-tt.goiy.t0{border:1.5px dashed #E97B2C;color:#B5541A;background:#fff}
.mt-xong{margin:6px 0 0;font-size:13px;color:var(--teal-d);font-weight:600}
.td-nhom h4 small{color:var(--mute);font-weight:600;margin-left:4px}
.mt-bai-dong{display:flex;width:100%;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:6px}
.mt-bai-dong .tx{flex:1;display:flex;flex-direction:column}.mt-bai-dong .tx small{color:var(--mute);font-size:12px}
.mt-dem{display:flex;flex-direction:column;align-items:flex-end;gap:3px}.mt-dem i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--mute)}
.mt-dem i.t2{color:#E97B2C}.mt-dem i.t3{color:#3B2014}
.mt-san{font-style:normal;font-size:12px;color:#B5541A;font-weight:700}
#mt-bao{position:fixed;left:50%;bottom:-120px;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:12px;width:min(440px,calc(100% - 32px));background:var(--brown);color:#fff;border-radius:14px;padding:10px 12px 10px 16px;max-width:calc(100% - 32px);box-shadow:0 8px 24px rgba(0,0,0,.25);transition:bottom .25s;font-size:14px}
#mt-bao.hien{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
#mt-bao span{flex:1;min-width:0}
#mt-bao button{border:0;background:#fff;color:var(--brown);font-weight:800;border-radius:999px;padding:6px 12px;flex:none}
@media (prefers-color-scheme: dark){.mt-dong,.mt-bai-dong{background:var(--surface)}.mt-dong.goiy{background:#3a2a1c}}

/* Nhật ký quan sát hằng ngày */
.mt-che{grid-template-columns:repeat(3,1fr)}
.mt-tt.tr{background:#fff;border:1.5px solid #B5541A;color:#B5541A}
.nk-dau{display:flex;flex-direction:column;gap:8px}
.nk-ten{display:flex;gap:6px;overflow-x:auto;padding:6px 0;position:sticky;top:0;z-index:3;background:var(--bg)}
.nk-ten a{flex:none;text-decoration:none;font-size:13px;font-weight:700;color:var(--brown);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px}
.nk-ten a.xong{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)}
.mt-huong b.gR{background:#B5541A;color:#fff}.mt-huong b.gP{background:#E97B2C;color:#fff}.mt-huong b.gN{background:#fff;border:1.5px dashed #E97B2C;color:#B5541A}
.nk-be{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;scroll-margin-top:120px}
.nk-be.xong{border-left-color:var(--teal)}
.nk-be header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.nk-be header b{font-size:16px}.nk-be header small{color:var(--mute);font-size:12.5px}.nk-be header em{margin-left:auto}
.nk-ghi{background:#fff;border:1px solid var(--line);border-left:4px solid var(--m);border-radius:10px;padding:7px 9px;display:flex;flex-direction:column;gap:6px}
.nk-ghi .tx{display:flex;flex-direction:column}.nk-ghi .tx small{font-size:11.5px;color:var(--mute)}
.nk-muc{display:flex;gap:4px;flex-wrap:wrap}
.nk-muc button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-size:12.5px;font-weight:700;color:var(--mute)}
.nk-muc .m1[aria-pressed="true"]{background:#2B8790;border-color:#2B8790;color:#fff}.nk-muc .m2[aria-pressed="true"]{background:#E97B2C;border-color:#E97B2C;color:#fff}
.nk-muc .m3[aria-pressed="true"]{background:#3B2014;border-color:#3B2014;color:#fff}.nk-muc .m0[aria-pressed="true"]{background:#B5541A;border-color:#B5541A;color:#fff}
.nk-muc .nk-xoa{margin-left:auto;border:0;font-size:18px;line-height:1;padding:4px 8px}
.nk-goi{display:flex;flex-wrap:wrap;gap:6px}
.nk-goi button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 10px 5px 5px;font-size:13px;font-weight:600;color:var(--brown);text-align:left}
.nk-goi i{font-style:normal;font-size:11px;font-weight:800;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#E97B2C;flex:none}
.nk-goi .lR{border-color:#B5541A}.nk-goi .lR i{background:#B5541A}.nk-goi .lN{border-style:dashed;border-color:#E97B2C}.nk-goi .lN i{background:#fff;color:#B5541A;border:1.5px dashed #E97B2C}
.nk-tim{position:relative}.nk-tim input{width:100%;font-size:14px}
.nk-kq{position:absolute;left:0;right:0;top:100%;z-index:5;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14);overflow:hidden}
.nk-kq:empty{display:none}.nk-kq p{margin:8px 12px}
.nk-kq button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;padding:9px 12px;text-align:left}
.nk-kq button small{color:var(--mute);font-size:12px}
.nk-gc summary{font-size:13px;color:var(--teal-d);font-weight:700;cursor:pointer}.nk-gc textarea{margin-top:6px;font-size:14px}
@media (min-width:900px){.mt .body{max-width:1100px}}

/* Bảng nhật ký quan sát (như mẫu giấy) */
.nk-dau{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.nk-moi{font-size:12.5px;color:var(--mute)}.nk-moi .lk{border:0;background:none;color:var(--teal-d);font-weight:700;padding:0;text-decoration:underline}
.mt-huong b.tR{background:#fff;border:1.5px solid #B5541A;color:#B5541A}
.nk-cuon{overflow:auto;max-height:calc(100vh - 150px);border:1px solid var(--line);border-radius:14px;background:var(--surface);-webkit-overflow-scrolling:touch}
.nk-bang{border-collapse:separate;border-spacing:0;min-width:100%;font-size:13px}
.nk-bang thead th{position:sticky;top:0;z-index:3;background:var(--brown);color:#fff;font-weight:700;font-size:13px;text-align:left;padding:9px 10px;border-bottom:3px solid var(--m,var(--teal));white-space:nowrap}
.nk-bang th.nk-tenc{position:sticky;left:0;z-index:2;background:var(--surface);min-width:132px;max-width:150px;text-align:left;vertical-align:top;padding:9px 10px;border-right:1px solid var(--line)}
.nk-bang thead th.nk-tenc{z-index:4;background:var(--brown)}
.nk-bang tbody th.nk-tenc b{display:block;font-size:14px;line-height:1.25;color:var(--brown)}.nk-bang tbody th.nk-tenc small{color:var(--mute);font-weight:500;font-size:11.5px}
.nk-bang tbody th.nk-tenc i{font-style:normal;color:var(--teal-d);font-weight:800;margin-left:4px}
.nk-bang tbody tr.xong th.nk-tenc{box-shadow:inset 4px 0 0 var(--teal)}
.nk-bang td{vertical-align:top;padding:6px;border-top:1px solid var(--line);border-left:1px solid var(--line);min-width:190px;background:color-mix(in srgb,var(--m,#fff) 4%,#fff)}
.nk-bang tbody tr:first-child td,.nk-bang tbody tr:first-child th{border-top:0}
.nk-o{display:flex;flex-direction:column;gap:4px}
.nk-c{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:1.5px solid transparent;border-radius:9px;padding:5px 8px;font-size:12.5px;line-height:1.25;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.nk-c b{flex:1;font-weight:600}.nk-c small{flex:none;font-size:10.5px;font-weight:800;opacity:.9}
.nk-c.m1{background:#2B8790;color:#fff}.nk-c.m2{background:#E97B2C;color:#fff}.nk-c.m3{background:#3B2014;color:#fff}.nk-c.m0,.nk-c.mr{background:#fff;border-color:#B5541A;color:#B5541A}
.nk-c.goi{background:#fff;border:1.5px dashed #D9C8B8;color:#8A7666}
.nk-c.goi i{font-style:normal;font-size:10px;font-weight:800;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:#E97B2C}
.nk-c.goi.lR{border-color:#B5541A}.nk-c.goi.lR i{background:#B5541A}.nk-c.goi.lN i{background:#fff;color:#B5541A;border:1.5px dashed #E97B2C}
.nk-them{align-self:flex-start;border:1.5px dashed var(--line);background:none;border-radius:9px;width:34px;height:28px;font-size:17px;font-weight:700;color:var(--mute);line-height:1}
.nk-bang td.nk-gcc{min-width:200px;background:#fff}.nk-bang td.nk-gcc textarea{width:100%;min-height:64px;font-size:13px;border-radius:8px;padding:6px 8px}
.nk-bang thead th.nk-gcc{background:var(--brown)}
.nk-pop{position:fixed;inset:0;z-index:110;background:rgba(10,20,20,.35);display:flex;align-items:flex-end;justify-content:center}
.nk-pop[hidden]{display:none}
.nk-pop-in{width:min(560px,100%);max-height:75vh;overflow:auto;background:var(--bg);border-radius:18px 18px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.nk-pop-in header{display:flex;align-items:flex-start;gap:10px}.nk-pop-in header div{flex:1;display:flex;flex-direction:column}.nk-pop-in header b{font-size:16px}.nk-pop-in header small{color:var(--mute)}
.nk-pop-in header button{border:0;background:none;font-size:24px;line-height:1;color:var(--mute)}
.nk-pop .nk-kq{position:static;box-shadow:none;border:1px solid var(--line)}
@media (prefers-color-scheme: dark){.nk-bang td,.nk-bang td.nk-gcc{background:var(--surface)}.nk-c.goi,.nk-c.m0,.nk-c.mr{background:transparent}}
.nk-cum{display:flex;flex-direction:column;gap:2px;justify-content:flex-end;padding-bottom:4px}
.nk-cum .ht-chk{font-size:14px}
.mt-che button{min-height:0;padding:8px 12px}
.nk-moi{white-space:nowrap}

/* ===== Checklist bài học Montessori (26/10) ===== */
.mt-bechon{display:flex;gap:8px;align-items:center}
.mt-bechon select{flex:1;min-width:0;font-weight:700;font-size:16px}
.mt-bechon .btn{flex:none;min-height:0;padding:9px 14px;font-size:16px}
.ck-tong{padding:14px 16px}
.ck-so{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media (min-width:560px){.ck-so{grid-template-columns:repeat(4,1fr)}}
.ck-so span{display:flex;align-items:center;gap:8px;border-radius:12px;padding:8px 12px;font-size:13px;font-weight:600;background:#F6F1EA;color:var(--mute);white-space:nowrap}
.ck-so b{font-size:20px;line-height:1;color:var(--ink);min-width:1.6em}
.ck-so .t3 b{color:#3B2014}.ck-so .t2 b{color:#E97B2C}.ck-so .tR b{color:#B5541A}.ck-so .t0 b{color:#9A8B7E}
.ck-vach{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.ck-vach button{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t s" "v v";gap:3px 10px;align-items:center;border:0;background:none;padding:2px 0;text-align:left;font-size:13.5px;font-weight:600;color:var(--ink)}
.ck-vach button>span:first-child{grid-area:t}.ck-vach .mt-vach{grid-area:v}
.ck-vach small{grid-area:s;font-size:12px;color:var(--mute);text-align:right}
.ck-h3{font-size:14px;margin:14px 0 6px;color:var(--teal-d)}
.ck-khs{display:flex;flex-wrap:wrap;gap:6px}
.ck-khc{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px 4px 4px;font-size:13px;background:#F6F1EA}
.ck-khc i,.ck-kh{font-style:normal;font-weight:800;font-size:11px;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff;background:#2B8790}
.ck-khc.lP i,.ck-kh.lP{background:#E97B2C}.ck-khc.lR i,.ck-kh.lR{background:#B5541A}.ck-khc.lN i,.ck-kh.lN{background:#fff;color:#B5541A;border:1.5px dashed #E97B2C}
.ck-kh{width:18px;height:18px;font-size:10px;margin-right:6px;vertical-align:1px}
.ck-lv{scroll-margin-top:70px;display:flex;flex-direction:column;gap:6px}
.ck-lv h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:6px 0 0;font-size:18px;color:var(--m);border-left:5px solid var(--m);padding-left:10px}
.ck-lv h2 small{font-size:12.5px;color:var(--mute);font-weight:600}
.ck-lv .mt-tien i{background:var(--m)}

/* ===== Báo cáo tiến độ học tập quý (26/10) ===== */
.tq-lv{--gct:var(--m);background:var(--surface,#fff);border:1px solid var(--line);border-left:5px solid var(--m);border-radius:14px;padding:12px 14px}
section.group.tq-lv h2{color:var(--m);font-size:17px;margin:0 0 8px;border-left:0;padding-left:0}
.tq-lv textarea{margin-top:4px}
.tq-dong{margin:0 0 6px;font-size:14px;line-height:1.45}
.tq-dong small{display:block;font-size:12px;font-weight:700;color:var(--mute);text-transform:none}
.tq-kh{display:inline-flex;align-items:center;gap:5px;margin:3px 6px 0 0;padding:3px 10px 3px 3px;border-radius:999px;background:#F6F1EA;font-size:13px}
.tq-kh em{font-style:normal;font-weight:800;font-size:11px;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:#2B8790}
.tq-kh.l-P em{background:#E97B2C}.tq-kh.l-R em{background:#B5541A}
.tq-lai{margin-top:6px}
.tq .tq-so{position:absolute;right:13.5cqw;top:5.4cqw;font-size:1.05cqw;color:#8A7666;font-family:var(--f)}
.tq .tdp-bang td{font-size:calc(1.05cqw * var(--k,1))}
.tq .tdp-bang li::before{top:calc(.5cqw * var(--k,1))}
.tq-bang thead th:first-child{width:12%}.tq-bang thead th:nth-child(2),.tq-bang thead th:nth-child(3),.tq-bang thead th:nth-child(4){width:19%}
.tq-bang tbody th{vertical-align:top}
.tq-bang .tdp-nx{font-size:calc(1.1cqw * var(--k,1));line-height:1.4}
.tq-bang tbody tr{height:auto}
.tq2 .tdp-kh{margin-top:.8cqw}
.tq2 .tdp-kh span{font-size:calc(1.05cqw * var(--k,1))}
.tq2 .tdp-kh div{min-height:0}
.tq-chung{flex:1;min-height:6cqw;margin-top:.8cqw;background:#fff;border-radius:1.6cqw;box-shadow:0 0 0 .18cqw var(--c2l);padding:1.2cqw 1.6cqw;font-family:var(--f);font-size:calc(1.25cqw * var(--k,1));line-height:1.55;color:#3B2014;white-space:pre-line}
.tq2 .tdp-than{bottom:11cqw}
.tq2 .tdp-chu{width:48cqw}
.tq-ky{position:absolute;right:4.6cqw;bottom:2.8cqw;display:flex;gap:3cqw}
.tq-ky .tdp-ky{position:static;min-width:17cqw}
/* Checklist: dòng gọn như tờ checklist giấy, máy tính bảng chia 2 cột */
.ck-ds{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface,#fff)}
.ck-ds .mt-dong{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:8px 10px 8px 12px;min-height:0;gap:10px}
.ck-ds .mt-dong:last-child{border-bottom:0}
.ck-ds .mt-dong .tx b{font-size:14.5px;line-height:1.3}
.ck-ds .mt-dong .tx small{font-size:12px}
.ck-ds .mt-tt{min-width:104px;padding:6px 10px;font-size:13px;min-height:34px}
@media (min-width:900px){.ck-ds{grid-template-columns:1fr 1fr}.ck-ds .mt-dong:nth-last-child(2):nth-child(odd){border-bottom:0}.ck-ds .mt-dong:nth-child(odd){border-right:1px solid var(--line)}}
.mt .body{max-width:1100px}
/* Checklist cả lớp: cột bài học và hàng tên bé đóng băng */
.ck-nhay{display:flex;gap:6px;flex-wrap:wrap}
.ck-nhay button{border:1.5px solid var(--m);color:var(--m);background:#fff;border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px}
.ck-mt{overflow:auto;max-height:calc(100dvh - 150px);min-height:360px;border:1px solid var(--line);border-radius:14px;background:#fff;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ck-bang{border-collapse:separate;border-spacing:0;font-size:13px}
.ck-bang th,.ck-bang td{border-bottom:1px solid #EFE7DD;padding:0}
.ck-bang thead th{position:sticky;top:0;z-index:3;background:#3B2014;color:#fff;vertical-align:bottom}
.ck-bang thead th button{display:flex;flex-direction:column;align-items:center;gap:1px;width:62px;padding:8px 3px 6px;border:0;background:none;color:#fff;font:inherit;cursor:pointer}
.ck-bang thead th button b{font-size:12px;line-height:1.2;text-align:center;white-space:normal;overflow-wrap:anywhere}
.ck-bang thead th button small{font-size:11px;opacity:.75}
.ck-bang .ck-goc{left:0;z-index:4;text-align:left;padding:8px 10px;font-size:13px}
.ck-goc small{display:block;font-weight:500;opacity:.75;font-size:11px}
.ck-bang tbody th{position:sticky;left:0;z-index:2;background:#fff;text-align:left;font-weight:600;padding:6px 10px;width:min(46vw,300px);min-width:min(46vw,300px);max-width:min(46vw,300px);line-height:1.3;border-right:2px solid #E6DCD0;box-shadow:inset 3px 0 0 var(--m)}
.ck-bang tbody td{text-align:center;border-right:1px solid #F3EDE6}
.ck-r-lv th{background:var(--m)!important;color:#fff;font-size:14px;font-weight:800;box-shadow:none!important}
.ck-r-lv td{background:var(--m)}
.ck-r-nh th{background:color-mix(in srgb,var(--m) 14%,#fff)!important;color:var(--m);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.ck-r-nh td{background:color-mix(in srgb,var(--m) 14%,#fff)}
.ck-r-mc th{background:#FBF8F4!important;color:var(--mute);font-size:12px;font-weight:700;padding-top:4px;padding-bottom:4px}
.ck-r-mc td{background:#FBF8F4}
.ck-o{width:62px;height:38px;border:0;background:none;font-weight:800;font-size:12.5px;cursor:pointer;color:#C9B8AA}
.ck-o.k1{color:#2B8790;background:#2B87901A}
.ck-o.k2{color:#fff;background:#E97B2C}
.ck-o.k3{color:#fff;background:#3B2014;font-size:15px}
.ck-o.kr{color:#B5541A;background:#fff;box-shadow:inset 0 0 0 2px #B5541A}
.ck-o.kn{color:#E97B2C;box-shadow:inset 0 0 0 1.5px #F2A66A;border-radius:0;background:repeating-linear-gradient(45deg,#FFF8F1 0 4px,#fff 4px 8px)}
.ck-o:active{filter:brightness(.92)}
.mt-huong b.ck-l1{background:#2B87901A;color:#2B8790}.mt-huong b.ck-l2{background:#E97B2C;color:#fff}.mt-huong b.ck-l3{background:#3B2014;color:#fff}
.mt-huong b.ck-lr{background:#fff;border:1.5px solid #B5541A;color:#B5541A}.mt-huong b.ck-ln{background:#FFF8F1;border:1.5px dashed #F2A66A;color:#E97B2C}
.ck-bang{min-width:100%}
@media (max-width:600px){
  .ck-bang tbody th{width:38vw;min-width:38vw;max-width:38vw;font-size:12.5px;padding:5px 8px}
  .ck-bang thead th button{width:52px}
  .ck-o{width:52px;height:34px;font-size:12px}
  .ck-r-lv th{font-size:13px}
  .ck-mt{max-height:calc(100dvh - 110px)}
}
.ck-o{width:100%;min-width:62px;display:block}
.ck-bang thead th button{width:100%;min-width:62px}
@media (max-width:600px){.ck-o,.ck-bang thead th button{min-width:52px}}

/* ===== Điều khiển trình chiếu bằng điện thoại (26/10) ===== */
.dk-ma{position:fixed;inset:0;z-index:95;background:rgba(21,32,34,.82);display:grid;place-items:center;padding:16px}
.dk-ma-in{background:#fff;border-radius:22px;padding:26px 28px;max-width:560px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.dk-ma-in h2{margin:0 0 8px;font-size:24px;color:var(--teal-d)}
.dk-ma-in p{margin:0 0 10px;line-height:1.5;color:var(--ink)}
.dk-so{display:flex;justify-content:center;gap:12px;margin:16px 0}
.dk-so span{width:72px;height:88px;border-radius:16px;background:#3B2014;color:#fff;font-size:52px;font-weight:800;display:grid;place-items:center}
.dk-phu{font-size:13.5px;color:var(--mute)!important}
.dk-nut{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
[data-bgp-dt][aria-pressed="true"]{background:#2B8790!important;color:#fff!important}
.dk-buoc{margin:0;padding-left:20px;line-height:1.6;font-size:14.5px}
.dkp .body{padding-bottom:110px}
.dk-tt{display:flex;flex-direction:column;gap:4px}
.dk-tt .pill{align-self:flex-start}
.dk-tt b{font-size:18px;color:var(--ink)}.dk-tt small{color:var(--mute);font-size:13px}
.dk-loi{background:#152022;color:#EAF3F3;border-radius:16px;padding:16px 18px}
.dk-loi .eyebrow{color:#7FC7CE}
.dk-loi p{margin:8px 0 0;font-size:18px;line-height:1.55}
.dk-thoai{background:#22393C;border-radius:12px;padding:10px 12px;font-weight:700}
.dk-nay{color:#F2A66A;font-weight:700}
.dk-dk{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
.dk-dk .btn{min-height:64px;font-size:20px;border-radius:16px}
/* Cửa sổ Người trình bày (1 máy tính 2 màn hình) */
.tb{display:grid;grid-template-rows:auto 1fr auto;height:100vh}
.tb-dau{display:flex;align-items:center;gap:14px;padding:10px 18px;background:#152022;border-bottom:1px solid #253336}
.tb-dau div{flex:1;display:flex;flex-direction:column;min-width:0}.tb-dau b{font-size:17px}.tb-dau small{color:#9FB7BA;font-size:13px}
.tb-gio{font-size:26px;font-weight:800;color:#F2A66A;font-variant-numeric:tabular-nums}
.tb-x{background:none;border:1px solid #3A4E51;color:#EAF3F3;border-radius:999px;padding:6px 14px;cursor:pointer}
.tb-than{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;padding:16px 18px;min-height:0}
.tb-trai{display:flex;flex-direction:column;gap:8px;min-height:0}
.tb-khung{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 0 0 2px #2B8790}
.tb-slide{position:absolute;inset:0;container-type:inline-size;pointer-events:none}
.tb-slide>*{position:absolute;inset:0}
.tb-goi{margin:0;color:#9FB7BA;font-size:13px}
.tb-loi{overflow-y:auto;background:#152022;border-radius:14px;padding:16px 20px}
.tb-loi .eyebrow{color:#7FC7CE}
.tb-loi p{margin:10px 0 0;font-size:22px;line-height:1.55}
.tb-dk{display:grid;grid-template-columns:1fr 2fr;gap:12px;padding:12px 18px;background:#152022;border-top:1px solid #253336}
.tb-dk button{min-height:64px;font-size:22px;font-weight:800;border-radius:16px;border:0;cursor:pointer;background:#2B3F42;color:#fff}
.tb-dk #tb-tiep{background:#E97B2C}
@media (max-width:800px){.tb-than{grid-template-columns:1fr}}
[data-bgp-tb][aria-pressed="true"]{background:#2B8790!important;color:#fff!important}

/* Toán tư duy: lộ trình dạng danh sách dọc */
.lt-tong .lt-ke{margin-top:8px;font-size:14.5px}
.lt-tt{font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:12px}
.lt-tt.tot{background:var(--teal-l);color:var(--teal-d)} .lt-tt.cham{background:#FDEBD9;color:#B25A00}
.lt-chu{display:flex;gap:6px;overflow-x:auto;padding:12px 0 2px;position:sticky;top:0;z-index:2;background:var(--bg)}
.lt-chu button{flex:none;display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:12.5px;font-weight:700;padding:4px 10px 4px 5px;border-radius:20px;background:var(--surface);border:1.5px solid var(--mau);color:var(--ink);cursor:pointer}
.lt-chu i{font-style:normal;font-size:14px}
.lt-chang{scroll-margin-top:56px}
.lt-chang.xong{opacity:.85}
.lt-thanh{height:6px;margin:0 12px 6px;border-radius:4px;background:var(--line);overflow:hidden} .lt-thanh i{display:block;height:100%;background:var(--mau)}
.lt-tuan{display:flex;align-items:center;gap:8px;padding:10px 6px 4px;font-size:13px;color:var(--mute);scroll-margin-top:60px;flex-wrap:wrap}
.lt-tuan b{color:var(--mau);font-size:13.5px;text-transform:uppercase;letter-spacing:.03em}
.lt-tuan em{font-style:normal;font-weight:800;color:#fff;background:var(--mau);padding:1px 8px;border-radius:10px;font-size:12px}
.lt-tuan.nay{color:var(--ink)}
.lt-on{font-weight:700;color:var(--ink)}
.lt-bai.tiep{background:color-mix(in srgb,var(--mau) 9%,transparent);border-radius:8px}
.lt-nhan{flex:none;font-size:11.5px;font-weight:800;color:#fff;background:var(--mau);padding:2px 7px;border-radius:10px}
.lt-chang{margin-top:14px;border-left:4px solid var(--mau);border-radius:12px;background:var(--surface);box-shadow:0 1px 0 var(--line)}
.lt-dau{display:flex;align-items:center;gap:10px;padding:10px 12px 8px}
.lt-dau b{display:block;font-size:17px} .lt-dau div > span{display:block;font-size:13px;color:var(--mute)} .lt-dau .eyebrow{color:var(--mau)}
.lt-ky{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:color-mix(in srgb,var(--mau) 16%,var(--surface))}
.lt-ky.sm{width:28px;height:28px;font-size:15px}
.lt-tien{margin-left:auto;font-size:13px;font-weight:800;color:var(--mau);background:color-mix(in srgb,var(--mau) 12%,var(--surface));padding:3px 9px;border-radius:12px}
.lt-ds{padding:0 6px 6px}
.lt-bai{border-top:1px solid var(--line)}
.lt-dong,.lt-modau summary{width:100%;display:flex;align-items:center;gap:10px;padding:9px 6px;background:none;border:0;text-align:left;font:inherit;color:var(--ink);cursor:pointer;list-style:none}
.lt-modau summary::-webkit-details-marker{display:none}
.lt-so{flex:none;min-width:58px;font-weight:800;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.lt-ten{flex:1;font-weight:600;font-size:15px;line-height:1.3}
.lt-ok{flex:none;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.lt-mui{flex:none;color:var(--mute);transition:transform .15s}
.lt-bai.mo .lt-mui{transform:rotate(90deg)}
.lt-bai.xong .lt-ten{color:var(--mute)}
.lt-bai .bg-tiet{margin:2px 4px 10px}
.lt-modau{margin-top:12px;background:var(--surface);border-radius:12px;border-left:4px solid #F2C14E;padding:0 6px}
.lt-modau[open]{padding-bottom:8px}
/* Thanh điều khiển bài giảng trên điện thoại: xuống dòng thay vì tràn ngang; chế độ Người trình bày chỉ dùng trên máy tính */
@media (max-width:700px){.bgp-dk{flex-wrap:wrap;row-gap:6px}.bgp-dk [data-bgp-tb]{display:none}}
/* Hướng dẫn triển khai bài học: thu gọn, bấm mới mở */
.bg-hd{padding:0;font-size:13.5px}
.bg-hd summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:11px 14px;font-weight:800}
.bg-hd summary::-webkit-details-marker{display:none}
.bg-hd summary::before{content:'ℹ️'}
.bg-hd summary::after{content:'›';margin-left:auto;font-size:18px;transition:transform .15s}
.bg-hd[open] summary::after{transform:rotate(90deg)}
.bg-hd p{margin:0;padding:0 14px 12px}
/* Dải tuần: nền màu điểm đến, chữ trắng, tách hẳn với dòng bài học */
.lt-tuan{margin:12px 2px 2px;padding:7px 12px;border-radius:9px;background:var(--mau);color:#fff;gap:10px}
.lt-tuan b{color:#fff;font-size:14px}
.lt-tuan span{color:#fff;font-weight:700;opacity:.95}
.lt-tuan em{background:#fff;color:var(--mau);margin-left:auto}
.lt-tuan.nay{color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--mau) 30%,transparent)}
.lt-on{color:#fff}
.lt-tuan + .lt-bai{border-top:0}
/* Thanh chọn gọn: cơ sở, lớp, ngày cùng một hàng; lọc và làm mới một hàng ngay dưới (26/10 tối) */
.mt-chon{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:8px;align-items:end}
.mt-chon>div:not(.nk-cum){min-width:0}
.mt-chon label{font-size:12.5px;margin-bottom:3px}
.mt-chon select,.mt-chon input[type=date]{width:100%;min-width:0;padding:8px 10px;font-size:15px;min-height:42px}
.mt-chon .nk-cum{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:nowrap;margin:2px 0 0}
.mt-chon .nk-cum .ht-chk{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nk-moi{flex:none;border:1px solid var(--line);background:var(--surface,#fff);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;color:var(--teal-d);white-space:nowrap}
.nk-hd summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none}
.nk-hd summary::-webkit-details-marker{display:none}
.nk-hd summary .mt-huong{margin:0;display:flex;flex-wrap:wrap;gap:4px}
.nk-hd summary em{flex:none;font-style:normal;font-size:12.5px;color:var(--teal-d);font-weight:700}
.nk-hd>p{margin:6px 0 0}
.mt-chon .nk-cum{flex-direction:row;padding:0}
.mt-chon .nk-cum .ht-chk{display:flex;align-items:center;gap:8px;flex:1}
.mt-chon .nk-cum .ht-chk input{flex:none;margin:0}
.mt-chon input[type=date]{padding:8px 6px;font-size:14px}
.nk-hd summary .mt-huong b{font-size:12px;padding:1px 7px}
/* Hiệu ứng chuyển cảnh: vật bay từ chỗ cũ tới chỗ mới (đồ chơi về hộp), bóng vật bay đi (gió lấy sao) */
.bgp-l.nhom.on{animation:none;opacity:1}
.bgp-c{position:absolute;display:block;background-size:100% 100%;pointer-events:none}
.bgp-l.on .bgp-c.bay{animation:bgBay .9s cubic-bezier(.45,.05,.35,1) both}
.bgp-l.on .bgp-c.di{animation:bgDi 1s ease-in both}
.bgp-l.on.tinh .bgp-c{animation:none}
.bgp-l.on.tinh .bgp-c.di{display:none}
@keyframes bgBay{0%{transform:translate(calc(var(--dx) * 1%),calc(var(--dy) * 1%))}50%{transform:translate(calc(var(--dx) * .5%),calc(var(--dy) * .5% - 45%)) rotate(-8deg) scale(1.12)}82%{transform:translate(0,-8%) rotate(3deg)}100%{transform:none}}
@keyframes bgDi{0%{transform:none;opacity:1}25%{transform:translate(10%,-35%) rotate(-10deg) scale(1.1);opacity:1}100%{transform:translate(260%,-320%) rotate(35deg) scale(.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.bgp-l.on .bgp-c{animation:none}.bgp-l.on .bgp-c.di{display:none}}

/* ===== Tài nguyên công việc (28/10) ===== */
.tn-dau{background:linear-gradient(135deg,#2B8790,#4AAFB9 60%,#F2A66A);color:#fff;border-radius:20px;padding:20px 20px 18px}
.tn-dau .eyebrow{color:#E6F6F7}
.tn-dau h1{color:#fff;font-size:26px;margin:4px 0 6px}
.tn-dau p{margin:0;font-size:14.5px;line-height:1.5;opacity:.95}
.tn-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tn-the{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 16px 14px;cursor:pointer;box-shadow:0 2px 10px rgba(59,32,20,.05);transition:transform .15s,box-shadow .15s}
.tn-the:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(59,32,20,.12)}
.tn-the em{position:absolute;top:12px;right:12px;font-style:normal;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#fff;background:var(--m);border-radius:999px;padding:3px 9px}
.tn-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:28px;background:color-mix(in srgb,var(--m) 14%,#fff);margin-bottom:6px}
.tn-the b{font-size:16.5px;color:var(--ink);line-height:1.25}
.tn-the small{font-size:13px;color:var(--mute);line-height:1.45}
.tn-mo{margin-top:8px;font-weight:800;font-size:13.5px;color:var(--m)}
.tn-xem{display:flex;flex-direction:column}
.tn-xem .bar .in{display:flex;align-items:center;gap:10px}
.tn-ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.tn-ngoai{flex:none;text-decoration:none;font-weight:800;font-size:18px;padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.tn-khung{flex:1;width:100%;border:0;background:#fff;min-height:0}
/* Kiểm tra vệ sinh đột xuất */
.vs-ds{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.vs-card{background:#fff;border:1.5px solid #F2C9A8;border-left:5px solid var(--orange);border-radius:14px;padding:12px 14px}
.vs-card.vs-3{border-color:#E9A3A3;border-left-color:#C0392B;background:#FFF8F7}
.vs-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.vs-h b{color:var(--brown);font-size:15px}
.vs-sub{color:var(--mute);font-size:13px;margin-top:2px}
.vs-lan{font-size:13px;font-weight:700;color:var(--orange);margin-top:4px}
.vs-3 .vs-lan{color:#C0392B}
.vs-muc{margin:6px 0 0;padding-left:20px;font-size:14px}
.vs-note{margin:6px 0 0;font-size:14px}
.vs-nhan{font-size:12px;font-weight:700;color:var(--mute);margin:8px 0 4px;text-transform:uppercase;letter-spacing:.03em}
.vs-tai{display:inline-flex;margin-top:10px;cursor:pointer}
.vs-ai,.vs-mucs{display:flex;flex-direction:column}
.vs-sm{display:block;color:var(--mute);font-size:12.5px;font-weight:400}
.vs-datick{color:var(--orange);font-weight:700}
.vs-xem{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vs-th{position:relative;width:72px;height:72px;border-radius:10px;background:#eee center/cover}
.vs-th button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--brown);color:#fff;font-size:14px;line-height:1}

/* Chấm công mã động */
.cc-canh{margin-top:8px;background:#FFF1EC;border:1px solid #F2B8A2;border-radius:10px;padding:8px 10px;font-size:13px;color:#8A2F12}
.cc-canh p{margin:0}
.cc-dong-hop{background:var(--tealbg,#E8F5F6);border-radius:12px;padding:12px;font-size:14px}
.cc-dong-hop p{margin:4px 0 8px;font-size:13.5px}
.md-man{position:fixed;inset:0;z-index:999;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.md-trong{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:640px}
.md-logo{font-weight:800;color:var(--teal);font-size:22px}
.md-trong h2{margin:0;font-size:28px;color:var(--brown)}
.md-cs{font-size:18px;color:var(--mute)}
.md-qr{padding:14px;background:#fff;border:3px solid var(--teal);border-radius:18px;min-width:120px;min-height:120px}
.md-qr img,.md-qr canvas{display:block}
.md-dem{font-size:20px;font-weight:700;color:var(--orange);min-height:26px}
.md-hd{margin:0;color:var(--mute);font-size:15px}

/* Kiểm tra vệ sinh: nhãn nổi bật, ghi chú cả lớp */
.vs-nhan-lon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.vs-nhan-lon h3{margin:0;font-size:18px;font-weight:800;color:var(--brown);letter-spacing:.01em}
.vs-bien{background:var(--orange);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.vs-nut{border:2px solid var(--orange);border-left-width:6px;background:var(--orange-l)}
#vs-ql{border:2px solid var(--orange);border-left-width:6px}
.vs-chung{font-size:13px;color:var(--teal-d);font-weight:600;margin-top:4px}
#vs-lop{width:100%}

/* Quản lý: màn hình nhóm tính năng, bộ chọn cơ sở, trang từng nhóm */
.adm-lb{margin:6px 0 -2px;color:var(--mute)}
.adm-menu{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.adm-card{position:relative;text-align:left;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:14px;padding:14px 30px 14px 14px;display:flex;flex-direction:column;gap:4px;min-height:118px;box-shadow:var(--shadow)}
.adm-t{font-weight:800;font-size:16px;color:var(--brown);line-height:1.25}
.adm-d{font-size:12.5px;color:var(--mute);line-height:1.35}
.adm-b{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--orange)}
.adm-b.ok{color:var(--mute);font-weight:500}
.adm-go{position:absolute;right:12px;top:12px;font-size:22px;color:var(--mute)}
.adm-top{display:flex;gap:12px;align-items:flex-start}
.adm-top h2{font-size:22px;margin:0}.adm-top p{margin:2px 0 0;font-size:13px}
.adm-cs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-cs-l{font-size:12px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.adm-cs-seg{display:inline-flex;flex-wrap:wrap;background:var(--line);border-radius:10px;padding:3px;gap:2px}
#cf .chip{border:0;background:transparent;border-radius:8px;padding:6px 10px;font-size:12.5px}
#cf .chip[aria-pressed="true"]{background:var(--surface);color:var(--brown);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.xc-bar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;background:var(--brown-l);border-radius:12px;padding:10px}
.xc-bar>div{flex:1;min-width:180px}
.xc-list{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto}
.xc-r{display:flex;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0}
.xc-n{display:flex;flex-direction:column;min-width:0;flex:1}.xc-n span{font-size:12px;color:var(--mute)}
.xc-r select{flex:1.2;min-width:140px}
@media (max-width:420px){.adm-menu{grid-template-columns:1fr}}
.adm-top h2{font-size:24px}

/* Màn Quản lý: thẻ nhóm có biểu tượng, chỉ dùng màu RMON (ngọc, nâu, cam điểm nhấn) */
.adm-menu{grid-template-columns:1fr;gap:10px}
.adm-card{flex-direction:row;align-items:center;gap:14px;min-height:0;padding:14px 34px 14px 14px;border-left:1px solid var(--line);background:var(--surface)}
.adm-ic{flex:none;width:52px;height:52px;border-radius:14px;background:var(--teal-l);color:var(--teal-d);display:grid;place-items:center}
.adm-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.adm-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.adm-t{font-weight:800;font-size:17px;color:var(--brown);line-height:1.25}
.adm-d{font-size:12.5px;color:var(--mute);line-height:1.35}
.adm-b{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--orange)}
.adm-b.ok{display:none}
.adm-go{top:50%;transform:translateY(-50%)}
.adm-top{align-items:center;padding:10px 12px;border-radius:14px;background:var(--teal-l);border-left:0}
.adm-top .adm-ic{width:44px;height:44px;background:var(--surface)}
.adm-top h2{color:var(--brown);font-size:20px}
@media (min-width:700px){.adm-menu{grid-template-columns:1fr 1fr}}
.adm-top .btn{white-space:nowrap;flex:none}

/* Biểu tượng đặc, luân phiên ba màu RMON: ngọc, cam, nâu */
.adm-ic{background:var(--teal);color:#fff}
.adm-card{border-left:5px solid var(--teal)}
.adm-card.m1{border-left-color:var(--orange)}.adm-card.m1 .adm-ic{background:var(--orange)}
.adm-card.m2{border-left-color:var(--brown)}.adm-card.m2 .adm-ic{background:var(--brown);color:var(--bg)}
.adm-top{background:var(--teal-l);border-left:5px solid var(--teal)}
.adm-top .adm-ic{background:var(--teal);color:#fff}
.adm-top.m1{background:var(--orange-l);border-left-color:var(--orange)}.adm-top.m1 .adm-ic{background:var(--orange)}
.adm-top.m2{background:var(--brown-l);border-left-color:var(--brown)}.adm-top.m2 .adm-ic{background:var(--brown);color:var(--bg)}