/* Học Kế Toán AI. Bố cục: trang sổ kế toán. Nền giấy kẻ dòng, lề đỏ; việc của AI viết bút xanh, việc người kiểm viết bút đỏ. */
:root{
  --paper:#ECF1EA; --sheet:#FAFCF8; --ink:#13231B; --muted:#53665B; --rule:#C8D7C7; --rule-soft:#DCE6DA;
  --red:#B32F29; --red-soft:#F5DEDA; --blue:#1C4E8A; --blue-soft:#DBE5F2;
  --ok:#22693F; --ok-soft:#DBEEE1; --warn:#865700; --warn-soft:#F5EAD2;
  --gold:#8A6A00; --gold-soft:#F4ECCF;
  --on-ink:#ECF1EA; --on-red:#FFFFFF; --shade:rgba(19,35,27,.10);
  --f-display:"Barlow Condensed","Be Vietnam Pro",system-ui,sans-serif;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --f-pen:"Patrick Hand","Be Vietnam Pro",cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1613; --sheet:#151F1A; --ink:#E3ECE5; --muted:#9AAFA3; --rule:#2C3C34; --rule-soft:#212F28;
    --red:#EE7A6F; --red-soft:#3A1D1A; --blue:#88B7EC; --blue-soft:#172739;
    --ok:#6CC795; --ok-soft:#15301F; --warn:#E2B04F; --warn-soft:#33270F;
    --gold:#E2C35C; --gold-soft:#302810;
    --on-ink:#0F1613; --on-red:#1A0D0B; --shade:rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1613; --sheet:#151F1A; --ink:#E3ECE5; --muted:#9AAFA3; --rule:#2C3C34; --rule-soft:#212F28;
  --red:#EE7A6F; --red-soft:#3A1D1A; --blue:#88B7EC; --blue-soft:#172739;
  --ok:#6CC795; --ok-soft:#15301F; --warn:#E2B04F; --warn-soft:#33270F;
  --gold:#E2C35C; --gold-soft:#302810;
  --on-ink:#0F1613; --on-red:#1A0D0B; --shade:rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--blue)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
.mono{font-family:var(--f-mono)}
.pen-b{font-family:var(--f-pen);color:var(--blue)}
.pen-r{font-family:var(--f-pen);color:var(--red)}
.num{font-variant-numeric:tabular-nums}
.kicker{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:700}
.muted{color:var(--muted)}
.sub{color:var(--muted);max-width:66ch}

/* nút */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none;border:1px solid var(--ink);cursor:pointer;background:transparent;color:var(--ink);font-size:.93rem;line-height:1.2}
.btn.solid{background:var(--ink);color:var(--on-ink)}
.btn.red{background:var(--red);border-color:var(--red);color:var(--on-red)}
.btn.ghost{border-color:var(--rule)}
.btn.small{padding:6px 11px;font-size:.84rem}
.btn:hover:not([disabled]){transform:translateY(-1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid var(--rule);border-radius:999px;font-size:.8rem;background:var(--sheet);white-space:nowrap}
.chip.ok{border-color:var(--ok);color:var(--ok)}
.chip.red{border-color:var(--red);color:var(--red)}
.chip.blue{border-color:var(--blue);color:var(--blue)}
.chip.gold{border-color:var(--gold);color:var(--gold)}

/* thanh trên */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:16px;height:58px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:1.3rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand .tk{font-family:var(--f-mono);color:var(--red);font-size:1rem}
.tabs-top{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
.tabs-top::-webkit-scrollbar{display:none}
.tabs-top a{white-space:nowrap;text-decoration:none;color:var(--muted);font-size:.9rem;font-weight:500;padding:7px 11px;border-radius:7px}
.tabs-top a:hover{color:var(--ink);background:var(--rule-soft)}
.tabs-top a[aria-current="page"]{color:var(--ink);background:var(--sheet);box-shadow:inset 0 -2px 0 var(--red)}
.user{display:flex;align-items:center;gap:12px;font-size:.84rem;color:var(--muted);white-space:nowrap;flex:none}
.user a{color:var(--ink);font-weight:600;text-decoration:none}
@media (max-width:720px){.user .ten{display:none}}

main.app{padding-block:28px 80px;min-height:60vh}
.view-head{display:grid;gap:8px;margin-bottom:26px}
.view-head h1{font-size:clamp(2.2rem,6vw,3.4rem)}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:18px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
.empty{border:1px dashed var(--rule);border-radius:10px;padding:22px;background:var(--sheet);color:var(--muted)}
.loading{color:var(--muted);padding:20px 0}
.err{color:var(--red);font-size:.88rem}

/* lộ trình */
.prog-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin-bottom:30px}
.prog-sum div{padding:12px 12px 12px 0;min-width:0}
.prog-sum div+div{padding-left:14px;border-left:1px solid var(--rule)}
.prog-sum b{display:block;font-family:var(--f-display);font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.prog-sum span{font-size:.84rem;color:var(--muted)}
@media (max-width:640px){.prog-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.prog-sum div:nth-child(3){padding-left:0;border-left:0}.prog-sum div:nth-child(n+3){border-top:1px solid var(--rule)}}
.level{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;padding:22px 0;border-top:1px solid var(--rule)}
.level:first-of-type{border-top:2px solid var(--ink)}
.level .lv-n{font-family:var(--f-mono);font-size:.75rem;color:var(--red);font-weight:700}
.level h2{font-size:1.9rem;margin:4px 0 6px}
.level .lv-d{font-size:.88rem;color:var(--muted)}
.level .lv-bar{height:5px;background:var(--rule);border-radius:3px;margin-top:12px;overflow:hidden}
.level .lv-bar i{display:block;height:100%;background:var(--ok)}
.lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:900px){.level{grid-template-columns:minmax(0,1fr);gap:12px}}
@media (max-width:640px){.lessons{grid-template-columns:minmax(0,1fr)}}
.les{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--rule);border-radius:9px;background:var(--sheet);text-decoration:none;color:var(--ink);min-width:0}
.les:hover{border-color:var(--ink)}
.les .so{font-family:var(--f-mono);font-size:.82rem;color:var(--red);font-weight:700}
.les .t{font-weight:600;font-size:.94rem;line-height:1.35}
.les .m{font-size:.76rem;color:var(--muted)}
.les .st{font-family:var(--f-mono);font-size:.8rem;white-space:nowrap}
.les.lock{opacity:.55;cursor:not-allowed}
.les.soon{opacity:.7}
.les .st.ok{color:var(--ok)}
.test-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}

/* bài giảng */
.lesson-wrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:36px;align-items:start}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);display:grid;gap:4px;font-size:.86rem;max-height:calc(100vh - 100px);overflow:auto}
.toc a{color:var(--muted);text-decoration:none;padding:4px 8px;border-left:2px solid var(--rule)}
.toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.toc .kicker{margin:10px 0 4px}
@media (max-width:1000px){.lesson-wrap{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.l-head{display:grid;gap:10px;padding-bottom:22px;border-bottom:2px solid var(--ink);margin-bottom:28px}
.l-head h1{font-size:clamp(2.2rem,6vw,3.6rem)}
.l-meta{display:flex;flex-wrap:wrap;gap:8px}
.l-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.opener{position:relative;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:18px 20px 18px 48px;margin-bottom:24px;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,var(--rule-soft) 29px,var(--rule-soft) 30px)}
.opener::before{content:"";position:absolute;top:0;bottom:0;left:28px;width:5px;border-left:1.5px solid var(--red);border-right:1.5px solid var(--red);opacity:.5}
.opener .kicker{margin-bottom:4px}
.opener p{font-size:1.04rem;line-height:1.85}
.goals{display:grid;gap:6px;margin:0 0 30px;padding:0;list-style:none}
.goals li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px}
.goals li::before{content:"✓";font-family:var(--f-mono);color:var(--red);font-weight:700}
.sec{padding-block:26px;border-top:1px solid var(--rule);scroll-margin-top:80px}
.sec > h2{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:14px;display:flex;gap:12px;align-items:baseline}
.sec > h2 .n{font-family:var(--f-mono);font-size:.85rem;color:var(--red)}
.prose{display:grid;gap:12px;max-width:72ch}
.prose p{font-size:1.02rem}
.bullets{margin:12px 0 0;padding-left:20px;display:grid;gap:5px;max-width:72ch}
.tbl{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);margin-top:14px}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--rule)}
th{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--paper)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
.diagram{margin-top:16px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:16px;overflow-x:auto}
.diagram .cap{font-size:.86rem;color:var(--muted);margin-top:8px}
.diagram svg{max-width:100%;height:auto;display:block;margin:0 auto}
.diagram pre{white-space:pre-wrap;font-family:var(--f-mono);font-size:.78rem;color:var(--muted);margin:0}
.example{margin-top:16px;border:1px solid var(--blue);border-radius:10px;overflow:hidden;background:var(--sheet)}
.example > header{background:var(--blue-soft);padding:10px 16px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.example > header b{font-family:var(--f-display);font-size:1.25rem}
.example .ex-body{padding:14px 16px;display:grid;gap:10px}
.example ol{margin:0;padding-left:22px;display:grid;gap:5px}
.journal td.tk{font-family:var(--f-mono);white-space:nowrap}
.journal td.tk small{display:block;font-family:var(--f-body);color:var(--muted);font-size:.74rem;white-space:normal}
.journal tfoot td{font-weight:700;border-top:1.5px solid var(--ink)}
.conclude{font-family:var(--f-pen);font-size:1.15rem;color:var(--blue)}
.note{margin-top:14px;padding:12px 16px;border-radius:8px;background:var(--warn-soft);font-size:.95rem;max-width:76ch}
.note b{color:var(--warn)}
.mindmap-box{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:16px;overflow-x:auto}
.ai-box{border:1px solid var(--blue);border-radius:10px;background:var(--sheet);display:grid;gap:12px;padding:18px}
.ai-box pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--f-mono);font-size:.8rem;line-height:1.6;color:var(--blue);background:var(--blue-soft);padding:14px;border-radius:8px}
.ai-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ai-cols h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.ai-cols ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.93rem}
.ai-cols .k h4{color:var(--red)} .ai-cols .x h4{color:var(--muted)}
@media (max-width:640px){.ai-cols{grid-template-columns:minmax(0,1fr)}}
.summary{display:grid;gap:8px;padding:0;margin:0;list-style:none;counter-reset:s}
.summary li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;counter-increment:s}
.summary li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);color:var(--red);font-weight:700}
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.terms div{border-left:2px solid var(--rule);padding-left:12px}
.terms b{display:block}
.terms span{font-size:.9rem;color:var(--muted)}
@media (max-width:640px){.terms{grid-template-columns:minmax(0,1fr)}}
.law{display:grid;gap:8px;font-size:.9rem}
.law div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) auto;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.law b{font-weight:600}
@media (max-width:640px){.law div{grid-template-columns:minmax(0,1fr)}}
.teacher{border:2px dashed var(--gold);border-radius:10px;padding:16px 18px;background:var(--gold-soft);margin-bottom:26px}
.teacher summary{cursor:pointer;font-family:var(--f-display);font-size:1.4rem;font-weight:700;color:var(--gold)}
.teacher .tg{display:grid;gap:14px;margin-top:12px}
.teacher h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.teacher ul{margin:0;padding-left:18px;display:grid;gap:3px;font-size:.93rem}

/* luyện tập */
.practice{display:grid;gap:22px}
.quiz{border:1px solid var(--rule);border-radius:10px;background:var(--sheet);padding:18px;display:grid;gap:12px}
.quiz-top{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.quiz-bar{height:5px;background:var(--rule);border-radius:3px;overflow:hidden;flex:1;min-width:80px}
.quiz-bar i{display:block;height:100%;background:var(--red);transition:width .25s}
.q-text{font-size:1.08rem;font-weight:600}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:start;text-align:left;padding:11px 14px;border:1px solid var(--rule);border-radius:9px;background:var(--paper);cursor:pointer;width:100%}
.opt .l{font-family:var(--f-mono);font-weight:700;color:var(--muted)}
.opt:hover:not([disabled]){border-color:var(--ink)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--red);background:var(--red-soft)}
.opt[disabled]{cursor:default}
.fb{border-radius:8px;padding:11px 14px;font-size:.94rem}
.fb.ok{background:var(--ok-soft)} .fb.no{background:var(--red-soft)} .fb.info{background:var(--blue-soft)}
.score-big{font-family:var(--f-display);font-size:3.4rem;line-height:1;font-variant-numeric:tabular-nums}
.ts-list{display:grid;gap:8px}
.ts-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--rule);border-radius:9px;background:var(--sheet)}
.ts-item .act{display:flex;gap:6px}
.ts-item .exp{grid-column:1/-1;font-size:.9rem}
.situation textarea{width:100%;min-height:180px;padding:12px;border-radius:8px;border:1px solid var(--rule);background:var(--paper);resize:vertical}
.grade{display:grid;gap:10px;border-radius:10px;padding:14px 16px;background:var(--blue-soft)}
.grade h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.grade ul{margin:0;padding-left:18px}

/* định khoản */
.dk{border:1px solid var(--rule);border-radius:10px;background:var(--sheet);padding:18px;display:grid;gap:14px}
.dk-case{font-size:1.04rem;font-weight:600}
.dk-pool{display:flex;flex-wrap:wrap;gap:8px}
.acc{border:1px solid var(--rule);background:var(--paper);border-radius:8px;padding:7px 11px;cursor:pointer;font-size:.88rem;display:grid;text-align:left;min-width:0}
.acc b{font-family:var(--f-mono)}
.acc small{color:var(--muted);font-size:.72rem;line-height:1.25}
.acc.no{border-color:var(--blue);background:var(--blue-soft)}
.acc.co{border-color:var(--red);background:var(--red-soft)}
.acc.wrongpick{outline:2px solid var(--red)}
.acc.miss{outline:2px dashed var(--ok)}
.dk-zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dk-zones div{border:1px dashed var(--rule);border-radius:9px;padding:10px 12px;min-height:58px}
.dk-zones h4{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.dk-zones .zn h4{color:var(--blue)} .dk-zones .zc h4{color:var(--red)}

/* trò chơi */
.games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.games{grid-template-columns:minmax(0,1fr)}}
.game-card{display:grid;gap:8px;align-content:start;padding:18px;border:1px solid var(--rule);border-radius:12px;background:var(--sheet);text-decoration:none;color:var(--ink);min-height:180px}
.game-card:hover{border-color:var(--ink)}
.game-card .ic{font-family:var(--f-mono);font-size:1.6rem;color:var(--red);font-weight:700}
.game-card h3{font-size:1.6rem}
.game-card p{font-size:.9rem;color:var(--muted)}
.game-card .best{font-family:var(--f-mono);font-size:.78rem;color:var(--ok);margin-top:auto}
.arena{max-width:780px;display:grid;gap:16px}
.hud{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-family:var(--f-mono);font-size:.86rem}
.hud b{font-size:1.2rem}
.timer{height:6px;background:var(--rule);border-radius:3px;overflow:hidden}
.timer i{display:block;height:100%;background:var(--red);transition:width .1s linear}
.tf-card{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:26px;font-size:1.2rem;font-weight:600;min-height:140px;display:grid;place-items:center;text-align:center}
.tf-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tf-btns .btn{padding:16px;font-size:1.1rem}
.match{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.match{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mcard{min-height:92px;padding:10px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet);cursor:pointer;font-size:.88rem;display:grid;place-items:center;text-align:center;line-height:1.35}
.mcard.term{font-weight:700;font-family:var(--f-body)}
.mcard.sel{border-color:var(--blue);background:var(--blue-soft)}
.mcard.done{border-color:var(--ok);background:var(--ok-soft);cursor:default;opacity:.75}
.mcard.bad{border-color:var(--red);background:var(--red-soft)}
.flash{perspective:1000px}
.flash-in{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;min-height:220px;padding:26px;display:grid;place-items:center;text-align:center;cursor:pointer}
.flash-in .front{font-family:var(--f-display);font-size:2.2rem;font-weight:700}
.flash-in .back{font-size:1.05rem}
.boxes{display:flex;gap:10px;flex-wrap:wrap}

/* trình chiếu */
.deck-shell{display:grid;gap:12px}
.deck-shell:fullscreen{background:var(--paper);padding:2vh 2vw;align-content:center;justify-items:center}
.deck-shell:fullscreen .deck{width:min(96vw,calc((92vh - 70px)*16/9))}
.deck-shell:fullscreen .deck-notes{display:none}
.deck{position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;overflow:hidden;box-shadow:0 24px 50px -30px var(--shade)}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:2.2cqw;padding:4.5cqw 6cqw 4.5cqw 9cqw;overflow:hidden;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(4.6cqw - 1px),var(--rule-soft) calc(4.6cqw - 1px),var(--rule-soft) 4.6cqw)}
.slide::before{content:"";position:absolute;top:0;bottom:0;left:5.6cqw;width:.7cqw;border-left:2px solid var(--red);border-right:2px solid var(--red);opacity:.45}
.s-k{font-family:var(--f-mono);font-size:13px;font-size:1.35cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700}
.s-t{font-family:var(--f-display);font-weight:700;font-size:44px;font-size:5cqw;line-height:1.03;max-width:24ch}
.s-xl{font-family:var(--f-display);font-weight:700;font-size:64px;font-size:7.6cqw;line-height:.96}
.s-list{display:grid;gap:1.2cqw;margin:0;padding:0;list-style:none;font-size:19px;font-size:2.15cqw;line-height:1.35;max-width:58ch}
.s-list li{display:grid;grid-template-columns:3.2cqw minmax(0,1fr);gap:1cqw}
.s-list li::before{content:"✓";font-family:var(--f-mono);color:var(--red);font-weight:700}
.s-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3cqw;align-items:center}
.s-dia{background:var(--paper);border:1px solid var(--rule);border-radius:1cqw;padding:1.2cqw;max-height:30cqw;overflow:hidden;display:grid;place-items:center}
.s-dia svg{max-width:100%;max-height:28cqw;height:auto}
.s-pre{font-family:var(--f-mono);font-size:12px;font-size:1.25cqw;white-space:pre-wrap;color:var(--blue);background:var(--blue-soft);padding:1.6cqw;border-radius:1cqw;max-height:30cqw;overflow:hidden}
.s-pen{font-family:var(--f-pen);font-size:24px;font-size:2.5cqw;line-height:1.2}
.deck-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.deck-count{font-family:var(--f-mono);font-size:.85rem;color:var(--muted);min-width:64px;text-align:center}
.deck-prog{flex:1;min-width:80px;height:4px;background:var(--rule);border-radius:2px;overflow:hidden}
.deck-prog i{display:block;height:100%;width:0;background:var(--red);transition:width .25s}
.deck-notes{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:16px 18px;display:grid;gap:8px}
.deck-notes h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
@media (max-width:640px){
  .deck{aspect-ratio:4/5}
  .slide{padding:7cqw 6cqw 7cqw 11cqw;gap:3.6cqw;justify-content:flex-start;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(8cqw - 1px),var(--rule-soft) calc(8cqw - 1px),var(--rule-soft) 8cqw)}
  .slide::before{left:6.5cqw;width:1.2cqw}
  .s-k{font-size:2.8cqw}.s-t{font-size:8.6cqw}.s-xl{font-size:12cqw}.s-list{font-size:4.2cqw;gap:2.4cqw}.s-list li{grid-template-columns:6cqw minmax(0,1fr)}
  .s-row{grid-template-columns:minmax(0,1fr)}.s-dia{max-height:60cqw}.s-dia svg{max-height:56cqw}.s-pre{font-size:2.8cqw;max-height:70cqw}.s-pen{font-size:5cqw}
}

/* trò chuyện AI */
.chat{display:grid;gap:10px}
.log{display:grid;gap:10px;max-height:460px;overflow:auto;padding:14px;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.bub{max-width:82%;padding:10px 14px;border-radius:12px;font-size:.95rem;white-space:pre-wrap;word-break:break-word}
.bub small{display:block;font-family:var(--f-mono);font-size:.66rem;opacity:.75;margin-bottom:2px}
.bub.ai{background:var(--blue-soft);justify-self:start;border-bottom-left-radius:2px}
.bub.me{background:var(--sheet);border:1px solid var(--rule);justify-self:end;border-bottom-right-radius:2px}
.chat textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--rule);background:var(--sheet);resize:vertical;min-height:70px}
.chat-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.status{font-size:.86rem;color:var(--muted);min-height:1.3em}
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;border-radius:999px;padding:12px 18px;box-shadow:0 10px 30px -10px var(--shade)}
.drawer{position:fixed;right:18px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:41;width:min(420px,calc(100vw - 36px));max-height:min(620px,calc(100vh - 120px));background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:14px;box-shadow:0 20px 60px -20px var(--shade);display:grid;gap:10px;grid-template-rows:auto minmax(0,1fr) auto}
.drawer .log{max-height:none;min-height:200px}
.drawer header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.drawer header b{font-family:var(--f-display);font-size:1.3rem}

/* quản lý */
.ql{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:960px){.ql{grid-template-columns:minmax(0,1fr)}}
.ql-form{display:grid;gap:10px}
.ql-form label{font-weight:600;font-size:.88rem}
.ql-form input[type=text],.ql-form input[type=password],.ql-form select{padding:9px 11px;border-radius:8px;border:1px solid var(--rule);background:var(--paper);width:100%}
.ql-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ql-row > div{display:grid;gap:4px;min-width:0}
@media (max-width:560px){.ql-row{grid-template-columns:minmax(0,1fr)}}
.ql-bai{display:grid;gap:12px;max-height:420px;overflow:auto;border:1px solid var(--rule);border-radius:8px;padding:12px;background:var(--paper)}
.ql-nhom{border:0;padding:0;margin:0;display:grid;gap:4px;min-width:0}
.ql-nhom legend{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:4px}
.ql-nhom label{font-weight:400;font-size:.86rem;display:flex;gap:8px;align-items:baseline;cursor:pointer}
.mini{border:1px solid var(--rule);background:var(--sheet);border-radius:999px;padding:2px 10px;font-size:.74rem;cursor:pointer;margin-left:6px}
.msg{font-size:.9rem;min-height:1.4em}
.msg.ok{color:var(--ok)} .msg.no{color:var(--red)}
.pill{display:inline-block;font-size:.74rem;padding:2px 9px;border-radius:999px;background:var(--rule-soft);white-space:nowrap}
.pill.off{background:var(--red-soft);color:var(--red)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.btn:hover{transform:none}*{transition:none!important}}

/* trang giới thiệu */
.tc-hero{padding-block:52px 18px}
.tc-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
@media (max-width:920px){.tc-grid{grid-template-columns:minmax(0,1fr);gap:30px}}
.tc-h1{font-size:clamp(3.4rem,10vw,7rem);line-height:.92;letter-spacing:-.01em;margin-top:10px}
.tc-h1 .tk{color:var(--red);font-family:var(--f-mono);font-size:.42em;vertical-align:.9em;margin-left:.1em}
.tc-lead{font-size:1.18rem;margin-top:18px;max-width:40ch}
.tc-lead b{font-weight:600}
.tc-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:.9rem;color:var(--muted)}
.tc-legend span{display:inline-flex;align-items:center;gap:8px}
.tc-legend i{width:26px;height:3px;border-radius:2px;display:inline-block}
.tc-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tc-ledger{position:relative;margin:0;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;box-shadow:0 18px 40px -22px var(--shade);padding:18px 16px 16px 44px;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,var(--rule-soft) 33px,var(--rule-soft) 34px);background-position:0 50px;min-width:0}
.tc-ledger::before{content:"";position:absolute;top:0;bottom:0;left:28px;width:5px;border-left:1.5px solid var(--red);border-right:1.5px solid var(--red);opacity:.55}
.tl-h{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;height:34px;align-items:center}
.tl-r{display:grid;grid-template-columns:44px minmax(0,1fr) 42px 50px 92px 18px;gap:6px;align-items:center;height:34px;font-size:.84rem}
.tl-r span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-r span:nth-child(1),.tl-r span:nth-child(3),.tl-r span:nth-child(4),.tl-r span:nth-child(5){font-family:var(--f-mono);font-size:.76rem}
.tl-r span:nth-child(5){text-align:right}
.tl-r .tk{color:var(--red);font-family:var(--f-mono);font-weight:700}
.tl-th span{font-family:var(--f-mono)!important;font-size:.64rem!important;color:var(--muted);text-transform:uppercase}
.tl-notes{display:grid;gap:6px;margin-top:12px}
.tl-notes p{font-size:1.04rem;line-height:1.3}
@media (max-width:520px){.tl-r{grid-template-columns:40px minmax(0,1fr) 38px 46px 84px 14px;font-size:.78rem}}
.tc-stats{margin-top:40px}
.tc-sec{padding-block:64px 6px}
.tc-h2{font-size:clamp(2rem,5vw,3rem);margin:8px 0 10px;max-width:24ch}
.tc-h3{font-size:1.5rem;margin-bottom:6px}
.tc-levels{display:grid;gap:0;border-top:2px solid var(--ink);margin-top:24px}
.tc-level{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
@media (max-width:820px){.tc-level{grid-template-columns:minmax(0,1fr);gap:10px}}
.tc-level .n{font-family:var(--f-mono);font-size:.74rem;color:var(--red);font-weight:700}
.tc-level h3{font-size:1.8rem;margin:4px 0 6px}
.tc-level p{font-size:.9rem;color:var(--muted)}
.tc-level ol{margin:0;padding-left:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;font-size:.93rem}
.tc-level li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px}
.tc-level li span{font-family:var(--f-mono);font-size:.8rem;color:var(--red)}
@media (max-width:640px){.tc-level ol{grid-template-columns:minmax(0,1fr)}}
.tc-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--ink);margin-top:22px}
.tc-feat div{padding:18px 18px 18px 0;border-bottom:1px solid var(--rule);min-width:0}
.tc-feat div:not(:nth-child(4n+1)){padding-left:18px;border-left:1px solid var(--rule)}
.tc-feat b{font-family:var(--f-mono);color:var(--red);font-size:.8rem}
.tc-feat h3{font-size:1.4rem;margin:6px 0}
.tc-feat p{font-size:.9rem;color:var(--muted)}
@media (max-width:900px){.tc-feat{grid-template-columns:repeat(2,minmax(0,1fr))}.tc-feat div:not(:nth-child(4n+1)){padding-left:0;border-left:0}.tc-feat div:nth-child(2n){padding-left:18px;border-left:1px solid var(--rule)}}
@media (max-width:520px){.tc-feat{grid-template-columns:minmax(0,1fr)}.tc-feat div:nth-child(2n){padding-left:0;border-left:0}}
.tc-shifts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.tc-shifts div{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule);display:grid;gap:2px;min-width:0}
.tc-shifts div:not(:nth-child(3n+1)){padding-left:16px;border-left:1px solid var(--rule)}
.tc-shifts s{font-family:var(--f-display);font-size:1.2rem;color:var(--muted);text-decoration-color:var(--red);text-decoration-thickness:2px}
.tc-shifts b{font-family:var(--f-pen);font-size:1.7rem;font-weight:400;line-height:1.05}
.tc-shifts p{font-size:.88rem;color:var(--muted);margin-top:4px}
@media (max-width:820px){.tc-shifts{grid-template-columns:minmax(0,1fr)}.tc-shifts div:not(:nth-child(3n+1)){padding-left:0;border-left:0}}
.tc-games{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:20px}
.tc-games div{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:14px;display:grid;gap:4px;align-content:start;min-width:0}
.tc-games b{font-family:var(--f-mono);color:var(--red);font-size:1.1rem}
.tc-games h3{font-size:1.2rem}
.tc-games p{font-size:.82rem;color:var(--muted)}
@media (max-width:960px){.tc-games{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tc-games{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tc-foot{margin-top:72px;border-top:1px solid var(--rule);padding-block:22px 48px;font-size:.86rem;color:var(--muted)}
.tc-foot p+p{margin-top:6px}
@media (max-width:1000px){
  .nav .wrap{height:auto;flex-wrap:wrap;gap:4px 12px;padding-block:8px 6px}
  .nav .brand{flex:1}
  .tabs-top{order:3;flex:0 0 100%;flex-wrap:wrap;overflow:visible}
}