/* =====================================================================
   Tiếng Trung DICHI · Msutong — giao diện bài giảng
   Tông màu theo logo: xanh navy · trắng · vàng
   ===================================================================== */
:root{
  --navy:#0D4576; --navy-2:#0A3A64; --navy-dk:#072A4A; --blue:#1F6FC5; --sky:#3E9BE9;
  --ice:#EAF3FC; --ice-2:#F5F9FE; --line:#D5E3F1; --line-2:#E6EEF7;
  --yellow:#FFD92E; --yellow-dk:#E6B800; --cream:#FFF8D6; --cream-2:#FFFCEB;
  --ink:#13263A; --muted:#5D7086; --ok:#1E9E5A; --ok-bg:#E6F7EE; --bad:#D64545; --bad-bg:#FDECEC;
  --r1:#E25B45; --r2:#1F6FC5; --r3:#1E9E5A; /* màu S - V - O */
  --ui:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --cjk-sans:"Noto Sans SC","Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;
  --cjk-serif:"Noto Serif SC","SimSun","Songti SC","Noto Serif CJK SC",serif;
  --cjk-kai:"KaiTi","STKaiti","Kaiti SC","Noto Serif SC",serif;
  --cjk:var(--cjk-sans);
  --shadow:0 10px 30px rgba(13,69,118,.12);
  --shadow-s:0 4px 14px rgba(13,69,118,.10);
}
body.f-serif{--cjk:var(--cjk-serif)} body.f-kai{--cjk:var(--cjk-kai)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--ui);color:var(--ink);background:#F2F6FB;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none!important}
.sp{flex:1}
.cn,.zh{font-family:var(--cjk)}

/* ---------------- views ---------------- */
#player{display:none;height:100vh;height:100dvh;height:var(--app-h,100dvh);flex-direction:column;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.view-player #home{display:none}
body.view-player #player{display:flex}
body.view-player{overflow:hidden;background:radial-gradient(1200px 700px at 50% 0%,#F7FAFE 0%,#DFE9F4 100%)}

/* =================== HOME =================== */
#home{min-height:100vh}
.h-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:calc(12px + env(safe-area-inset-top)) max(20px,4vw,env(safe-area-inset-right)) 12px max(20px,4vw,env(safe-area-inset-left));background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.h-logo{width:46px;height:46px;border-radius:12px}
.h-brand b{display:block;font-size:18px;color:var(--navy);font-weight:800}
.h-brand small{color:var(--muted);font-size:12.5px}
.hbtn{border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:700;border-radius:999px;padding:9px 16px;font-size:14px}
.hbtn:hover{background:var(--ice)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--yellow);color:var(--navy);font-size:11.5px;font-weight:800;margin-left:4px}
.h-hero{position:relative;overflow:hidden;margin:22px max(20px,4vw) 8px;border-radius:28px;background:linear-gradient(120deg,var(--navy-dk),var(--navy) 55%,var(--blue));color:#fff;display:flex;align-items:center;min-height:300px;box-shadow:var(--shadow)}
.h-hero-txt{position:relative;z-index:2;padding:40px 46px;max-width:640px}
.h-kicker{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:800;font-size:12.5px;letter-spacing:1px;padding:6px 14px;border-radius:999px}
.h-hero h1{font-size:clamp(28px,3.4vw,42px);line-height:1.18;margin:16px 0 12px;font-weight:800}
.h-hero h1 span{color:var(--yellow)}
.h-hero p{margin:0;color:#D6E6F7;font-size:16px;line-height:1.6;max-width:560px}
.h-teacher{display:flex;align-items:center;gap:12px;margin-top:22px}
.h-av{width:48px;height:48px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-weight:900}
.h-teacher small{display:block;color:#A9C6E6;font-size:12px}
.h-teacher b{font-size:17px}
.h-hero-art{position:absolute;right:3%;top:0;bottom:0;width:44%;pointer-events:none}
.tzg{position:absolute;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);display:grid;place-items:center;font-family:var(--cjk-kai);color:rgba(255,255,255,.92)}
.tzg::before,.tzg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) center/100% 1px no-repeat,linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.22)) center/1px 100% no-repeat}
.tzg span{position:relative;z-index:1;line-height:1}
.tzg.big{width:190px;height:190px;right:150px;top:46px;font-size:150px;transform:rotate(-6deg)}
.tzg.mid{width:120px;height:120px;right:28px;top:40px;font-size:94px;color:var(--yellow);transform:rotate(7deg)}
.tzg.sm{width:96px;height:96px;right:60px;top:178px;font-size:74px;transform:rotate(-4deg)}
.tzg.xs{width:76px;height:76px;right:370px;top:190px;font-size:58px;color:var(--yellow);transform:rotate(9deg)}
#library{padding:10px max(20px,4vw) 40px}
.book{margin-top:28px}
.book-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.book-h h2{margin:0;font-size:24px;color:var(--navy)}
.book-h .bz{font-family:var(--cjk);color:var(--blue);font-size:18px;font-weight:700}
.book-h .lv{background:var(--ice);color:var(--navy);font-weight:700;font-size:12.5px;padding:4px 12px;border-radius:999px}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.lcard{position:relative;text-align:left;border:1px solid var(--line);background:#fff;border-radius:20px;padding:18px 18px 16px;min-height:150px;box-shadow:var(--shadow-s);transition:transform .18s,box-shadow .18s;overflow:hidden;color:inherit;font:inherit}
.lcard.ready:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.lcard.ready::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--cream)}
.lcard .no{position:relative;z-index:1;display:inline-block;background:var(--navy);color:#fff;font-weight:800;font-size:12.5px;border-radius:999px;padding:4px 12px}
.lcard .lz{position:relative;z-index:1;font-family:var(--cjk);font-size:24px;font-weight:700;color:var(--navy);margin:12px 0 2px;line-height:1.25}
.lcard .lp{font-size:13px;color:var(--muted);font-style:italic}
.lcard .lv2{font-size:14.5px;font-weight:600;margin-top:6px}
.lcard .go{position:absolute;right:16px;bottom:14px;font-weight:800;color:var(--navy);font-size:13px;background:var(--yellow);padding:6px 12px;border-radius:999px}
.lcard.soon{opacity:.62;cursor:default;background:var(--ice-2)}
.lcard.soon .no{background:#93A8BF}
.lcard.soon .go{background:#E3EAF2;color:var(--muted)}
.h-foot{padding:26px max(20px,4vw) 40px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}

/* =================== PLAYER BAR =================== */
.bar{flex:none;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;background:var(--navy);color:#fff;box-shadow:0 4px 16px rgba(7,42,74,.25);z-index:30}
.ibtn{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:19px}
.ibtn:hover{background:rgba(255,255,255,.2)}
.bar-logo{width:38px;height:38px;border-radius:10px}
.bar-ttl b{display:block;font-size:15px;line-height:1.2;font-family:var(--ui)}
.bar-ttl small{color:#AFCBE8;font-size:12px}
.tbtn{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.tbtn:hover{background:rgba(255,255,255,.2)}
.tbtn.hl{background:var(--yellow);color:var(--navy);border-color:var(--yellow);font-weight:800}
.tgl{display:flex;background:rgba(255,255,255,.1);border-radius:999px;padding:3px;border:1px solid rgba(255,255,255,.22)}
.tgl button{border:none;background:transparent;color:#BFD4EA;border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700;white-space:nowrap}
.tgl button.on{background:#fff;color:var(--navy)}
#tPy{font-family:var(--cjk)}

/* =================== STAGE =================== */
#stageWrap{flex:1;position:relative;overflow:hidden}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:center center;border-radius:18px;box-shadow:0 24px 60px rgba(7,42,74,.22);background:#fff;overflow:hidden;overflow:clip}
#slides{position:absolute;inset:0;overflow:hidden;overflow:clip}
#ink{position:absolute;inset:0;width:1280px;height:720px;z-index:40;pointer-events:none;touch-action:none}
body.pen-on #ink{pointer-events:auto;cursor:crosshair}
body.pen-on.mode-laser #ink{cursor:none}
body.ink-hidden #ink{visibility:hidden}
#laser{position:absolute;z-index:41;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:radial-gradient(circle,#ff3b3b 0 35%,rgba(255,40,40,.35) 55%,transparent 70%);pointer-events:none;display:none}
#blackout{position:absolute;inset:0;z-index:60;background:#000;display:none}
body.blk #blackout{display:block}
body.wht #blackout{display:block;background:#fff}

/* nav */
.nav{flex:none;display:flex;align-items:center;gap:12px;padding:8px 18px 10px;justify-content:center}
.nbtn{width:44px;height:44px;border-radius:50%;border:none;background:var(--navy);color:#fff;font-size:24px;line-height:1;box-shadow:var(--shadow-s)}
.nbtn:hover{background:var(--blue)}
.nbtn:disabled{background:#B9C7D6;cursor:default}
.progress{display:flex;gap:4px;align-items:center;flex:0 1 760px;min-width:120px}
.progress i{flex:1;height:8px;border-radius:6px;background:#C9D7E6;cursor:pointer;transition:background .2s,transform .15s;position:relative}
.progress i:hover{transform:scaleY(1.5)}
.progress i.done{background:#8DB3DA}
.progress i.on{background:var(--yellow);box-shadow:0 0 0 2px var(--navy)}
.progress i.sec{margin-left:6px}
.counter{font-weight:800;color:var(--navy);min-width:62px;text-align:center;font-size:14px}

/* pens */
.pens{position:fixed;left:calc(12px + env(safe-area-inset-left));top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:8px;align-items:center}
.pens>button,.pengroup button{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:#fff;font-size:18px;box-shadow:var(--shadow-s);display:grid;place-items:center}
#penToggle.on{background:var(--navy);border-color:var(--navy)}
.pengroup{display:none;flex-direction:column;gap:7px;background:rgba(255,255,255,.94);padding:8px;border-radius:16px;box-shadow:var(--shadow)}
body.pen-on .pengroup{display:flex}
.pengroup .sw{background:var(--c)!important;border:3px solid #fff!important;box-shadow:0 0 0 1px var(--line)!important;width:32px!important;height:32px!important;border-radius:50%!important;margin:0 auto}
.pengroup .sw.on{box-shadow:0 0 0 3px var(--yellow)!important}
.pengroup .tool.on{background:var(--cream);border-color:var(--yellow-dk)}
#penW{width:40px;height:70px;writing-mode:vertical-lr;direction:rtl;accent-color:var(--navy);margin:2px auto}

/* present mode */
body.present .bar,body.present .nav{display:none}
body.present #stageWrap{background:#000;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.present #player{padding:0;background:#000}
body.present #stage{border-radius:0;box-shadow:none}
body.present .pens{opacity:.18;transition:opacity .2s}
body.present .pens:hover,body.present.pen-on .pens{opacity:1}
.pctrl{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;display:none;align-items:center;gap:6px;background:rgba(7,42,74,.82);color:#fff;padding:6px 10px;border-radius:999px;transition:opacity .35s;backdrop-filter:blur(6px)}
body.present .pctrl{display:flex}
body.present.idle .pctrl{opacity:0;pointer-events:none}
body.present.idle{cursor:none}
.pctrl button{background:none;border:none;color:#fff;font-size:17px;width:36px;height:36px;border-radius:50%}
.pctrl button:hover{background:rgba(255,255,255,.18)}
.pctrl span{font-weight:700;font-size:13px;min-width:54px;text-align:center}

/* =================== SLIDE BASE =================== */
.slide{position:absolute;inset:0;display:none;background:#fff;overflow:hidden;overflow:clip;color:var(--ink);font-size:20px}
.slide.on{display:block}
body.anim .slide.on{animation:sIn .45s cubic-bezier(.2,.8,.25,1)}
@keyframes sIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.slide::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:linear-gradient(var(--navy),var(--blue))}
.slide::after{content:"";position:absolute;left:0;top:40px;width:12px;height:56px;background:var(--yellow)}
.slide.dark::before,.slide.dark::after,.slide.bare::before,.slide.bare::after{display:none}
.s-deco{position:absolute;right:-90px;bottom:-110px;width:330px;height:330px;border-radius:50%;background:var(--ice-2);z-index:0}
.s-deco2{position:absolute;right:120px;top:-60px;width:150px;height:150px;border-radius:50%;background:var(--cream-2);z-index:0}
.hd{position:absolute;left:52px;right:130px;top:30px;display:flex;align-items:center;gap:16px;z-index:2}
.chip{flex:none;background:var(--navy);color:#fff;font-weight:800;font-size:14px;letter-spacing:.6px;padding:7px 16px;border-radius:999px;text-transform:uppercase}
.chip b{color:var(--yellow);font-family:var(--cjk);font-weight:700;margin-right:6px;letter-spacing:0}
.hd h2{margin:0;font-size:33px;line-height:1.15;font-weight:800;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd h2 .cn{font-weight:700}
.hd .sub{font-size:16px;color:var(--muted);font-weight:500;margin-left:4px;white-space:nowrap}
.s-logo{position:absolute;top:22px;right:34px;width:58px;height:58px;border-radius:14px;z-index:2;box-shadow:var(--shadow-s)}
.bd{position:absolute;left:52px;right:52px;top:100px;bottom:58px;z-index:1}
.ft{position:absolute;left:0;right:0;bottom:0;height:42px;display:flex;align-items:center;gap:10px;padding:0 34px 0 52px;font-size:13px;color:var(--muted);border-top:1px solid var(--line-2);background:#fff;z-index:2}
.ft b{color:var(--navy)}
.ft .pg{margin-left:auto;font-weight:800;color:var(--navy);background:var(--ice);border-radius:999px;padding:3px 12px}
.ft .dot{width:5px;height:5px;border-radius:50%;background:var(--yellow-dk)}
.inst{display:inline-flex;align-items:center;gap:8px;background:var(--cream);border:1px solid #F3DF8A;color:#6B5600;border-radius:12px;padding:7px 14px;font-size:16px;font-weight:600}
.inst .cn{color:#6B5600}

/* text helpers inside slides */
.zh{cursor:pointer;border-radius:5px;transition:background .12s,box-shadow .12s}
body:not(.pen-on) .zh:hover{background:var(--cream);box-shadow:0 0 0 2px var(--cream)}
.zh.zh-on{background:var(--yellow)!important;box-shadow:0 0 0 2px var(--yellow)!important}
body.no-py .py{visibility:hidden}
body.no-vi .vi{visibility:hidden}
.spk{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:15px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(13,69,118,.08)}
.spk:hover{background:var(--navy);color:#fff}
.spk.sm{width:32px;height:32px;font-size:13px}
.spk.playing{background:var(--yellow);border-color:var(--yellow-dk);color:var(--navy)}
.pill{display:inline-block;border-radius:999px;padding:3px 12px;font-size:14px;font-weight:700}
.pill.pos{background:var(--ice);color:var(--navy);font-family:var(--cjk)}
.pill.hv{background:var(--navy);color:var(--yellow);letter-spacing:1px}
.btn{border:none;border-radius:999px;padding:10px 20px;font-weight:800;font-size:16px;background:var(--navy);color:#fff;box-shadow:var(--shadow-s)}
.btn:hover{background:var(--blue)}
.btn.y{background:var(--yellow);color:var(--navy)}
.btn.y:hover{background:#FFE46A}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--ice)}
.btn.sm{padding:7px 14px;font-size:14px}

/* audio bar */
.abar{display:flex;align-items:center;gap:12px;background:var(--ice);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px}
.abar .play{width:46px;height:46px;border-radius:50%;border:none;background:var(--navy);color:#fff;font-size:17px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(13,69,118,.3)}
.abar .play:hover{background:var(--blue)}
.abar .lbl{font-weight:800;color:var(--navy);font-size:15px;white-space:nowrap}
.abar .trk{flex:1;min-width:90px;height:8px;border-radius:6px;background:#C9DAEC;cursor:pointer;overflow:hidden}
.abar .trk i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--navy),var(--sky));border-radius:6px}
.abar .tm{font-size:13px;font-weight:700;color:var(--muted);min-width:38px;text-align:right}
.abar .spd{border:1px solid var(--line);background:#fff;border-radius:999px;font-weight:800;color:var(--navy);font-size:12.5px;padding:4px 9px}

/* ---------- COVER ---------- */
.slide.t-cover{background:linear-gradient(125deg,var(--navy-dk) 0%,var(--navy) 50%,#155A98 100%);color:#fff}
.cv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:60px 60px}
.cv-left{position:absolute;left:84px;top:70px;width:660px;z-index:2}
.cv-brand{display:flex;align-items:center;gap:14px}
.cv-brand img{width:62px;height:62px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.cv-brand b{display:block;font-size:20px}
.cv-brand small{color:#A9C6E6;font-size:14px}
.cv-tag{display:inline-flex;gap:10px;align-items:center;margin-top:46px;background:var(--yellow);color:var(--navy);font-weight:800;padding:8px 18px;border-radius:999px;font-size:17px}
.cv-tag .cn{font-weight:700}
.cv-zh{font-family:var(--cjk);font-size:86px;font-weight:900;line-height:1.1;margin:22px 0 6px;letter-spacing:2px}
.cv-py{font-size:30px;color:var(--yellow);font-weight:600;font-style:italic}
.cv-vi{font-size:28px;margin-top:6px;font-weight:600;color:#E2EEFA}
.cv-teacher{position:absolute;left:84px;bottom:64px;display:flex;align-items:center;gap:14px;z-index:2}
.cv-teacher .av{width:54px;height:54px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-weight:900;font-size:19px}
.cv-teacher small{display:block;color:#A9C6E6;font-size:14px}
.cv-teacher b{font-size:21px}
.cv-right{position:absolute;right:70px;top:120px;width:430px;z-index:2}
.cv-photo{background:#fff;border-radius:26px;padding:14px;box-shadow:0 24px 50px rgba(0,0,0,.35);transform:rotate(3deg)}
.cv-photo img{display:block;width:100%;border-radius:16px}
.cv-circle{position:absolute;right:-70px;top:-90px;width:300px;height:300px;border-radius:50%;background:var(--yellow);opacity:.95}
.cv-circle2{position:absolute;left:520px;bottom:-140px;width:280px;height:280px;border-radius:50%;border:40px solid rgba(255,217,46,.18)}
.cv-lesson{position:absolute;right:86px;bottom:60px;z-index:2;text-align:right}
.cv-lesson .n{font-family:var(--cjk);font-size:46px;font-weight:900;color:var(--yellow);line-height:1}
.cv-lesson small{display:block;color:#A9C6E6;font-size:15px;margin-top:4px}

/* ---------- SECTION ---------- */
.slide.t-section{background:linear-gradient(135deg,var(--navy-dk),var(--navy) 60%,#1A64A8);color:#fff}
.sc-wm{position:absolute;right:-30px;bottom:-90px;font-family:var(--cjk);font-size:430px;font-weight:900;color:rgba(255,255,255,.06);line-height:1}
.sc-box{position:absolute;left:120px;top:50%;transform:translateY(-50%);z-index:2}
.sc-no{width:120px;height:120px;border-radius:30px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-family:var(--cjk);font-size:68px;font-weight:900;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.sc-zh{font-family:var(--cjk);font-size:40px;font-weight:700;color:var(--yellow);margin-top:30px}
.sc-zh .p{font-family:var(--ui);font-size:22px;color:#A9C6E6;font-style:italic;font-weight:500;margin-left:12px}
.sc-vi{font-size:64px;font-weight:900;margin-top:2px;letter-spacing:.5px}
.sc-sub{font-size:22px;color:#CFE0F2;margin-top:12px;max-width:760px;line-height:1.5}
.sc-list{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.sc-list>span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 16px;font-size:17px}

/* ---------- GOALS ---------- */
.goals{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.goal{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 24px;box-shadow:var(--shadow-s);min-height:236px}
.goal .gi{flex:none;width:72px;height:72px;border-radius:20px;background:var(--ice);display:grid;place-items:center;font-size:36px}
.goal:nth-child(2) .gi,.goal:nth-child(3) .gi{background:var(--cream)}
.goal h3{margin:4px 0 12px;font-size:26px;color:var(--navy)}
.goal h3 .cn{color:var(--blue);font-weight:700;margin-right:6px}
.goal p{margin:6px 0;font-size:21px;line-height:1.5}
.goal .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.goal .tags>span{background:var(--ice);color:var(--navy);font-weight:800;border-radius:12px;padding:6px 14px;font-size:22px}

/* ---------- WARM-UP ---------- */
.warm{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
.wcard{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-s);cursor:pointer;transition:transform .2s,box-shadow .2s;text-align:center}
.wcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.wcard .img{height:260px;background:#f3f6fa center/cover no-repeat}
.wcard .wp{font-size:34px;font-weight:800;color:var(--navy);margin:14px 0 2px}
.wcard .wz{font-family:var(--cjk);font-size:46px;font-weight:700;color:var(--blue);height:60px;line-height:60px;transition:opacity .3s,transform .3s}
.wcard .wv{font-size:20px;font-weight:600;color:var(--muted);height:28px;margin-bottom:14px}
.wcard:not(.open) .wz,.wcard:not(.open) .wv{opacity:0;transform:translateY(8px)}
.wcard .hint{font-size:15px;color:var(--muted);margin-top:-30px;padding-bottom:12px}
.wcard.open .hint{display:none}

/* ---------- VOCAB LIST ---------- */
.vl{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;height:100%}
.vtab{border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-s);background:#fff;align-self:start}
.vtab .th{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;padding:10px 16px;font-weight:800;font-size:16px}
.vtab .th .cn{color:var(--yellow)}
.vrow{display:grid;grid-template-columns:34px 112px 1fr 64px 1.2fr 40px;align-items:center;gap:8px;padding:6px 14px;border-top:1px solid var(--line-2)}
.vrow:nth-child(odd){background:var(--ice-2)}
.vrow .n{font-weight:800;color:var(--muted);font-size:14px}
.vrow .w{font-family:var(--cjk);font-size:30px;font-weight:700;color:var(--navy);line-height:1.15}
.vrow .p{font-size:18px;font-weight:600}
.vrow .vi{font-size:17px}
.vtab.pn .vrow{grid-template-columns:34px 112px 1fr 1fr 40px}

/* ---------- WORD ---------- */
.word{display:flex;flex-direction:column;gap:10px;height:100%}
.w-top{display:flex;gap:16px;align-items:stretch}
.wl{flex:0 0 280px;background:linear-gradient(165deg,#fff 0%,var(--ice) 100%);border:1px solid var(--line);border-radius:24px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-s);position:relative;overflow:hidden}
.wl .big{font-family:var(--cjk);font-size:118px;font-weight:700;color:var(--navy);line-height:1.08;letter-spacing:4px}
.wl .big.len3{font-size:74px}
.wl .wpy{font-size:30px;font-weight:700;margin-top:2px}
.wl .row{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.wl .mean{font-size:23px;font-weight:800;margin-top:10px;line-height:1.3;color:var(--ink)}
.wl .spk{position:absolute;right:12px;top:12px}
.w-write{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.w-pic{flex:0 0 240px;display:flex;flex-direction:column;gap:8px}
.wpic{flex:1;min-height:200px;border-radius:20px;border:1px solid var(--line);background:#fff center/contain no-repeat;box-shadow:var(--shadow-s)}
.wside{display:flex;flex-direction:column;gap:8px}
.wside .it{background:#fff;border:1px solid var(--line);border-left:5px solid var(--yellow);border-radius:14px;padding:8px 12px;box-shadow:var(--shadow-s)}
.wside .it .cn{font-size:26px;font-weight:700;color:var(--navy);line-height:1.2}
.wside .it .cn small{font-family:var(--ui);font-size:15px;color:var(--muted);font-weight:600}
.wside .it .vi{font-size:15px}
.wsec{font-size:14.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:8px}
.wsec::after{content:"";flex:1;height:1px;background:var(--line)}
.writes{display:flex;gap:14px;flex-wrap:nowrap}
.cblock{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow-s)}
.cb-top{display:flex;gap:12px}
.cblock .ci{display:flex;flex-direction:column;gap:3px;min-width:104px;font-size:14.5px}
.cblock .ci .c1{font-family:var(--cjk);font-size:34px;font-weight:700;color:var(--navy);line-height:1}
.cblock .ci .c2{color:var(--ink);font-weight:700;font-size:17px}
.cblock .ci b{color:var(--navy)}
.cblock .ci .bt{display:flex;gap:6px;margin-top:auto}
.cblock .ci .bt button{border:1px solid var(--yellow-dk);background:var(--yellow);border-radius:10px;padding:6px 10px;font-size:13.5px;font-weight:800;color:var(--navy)}
.cblock .ci .bt button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.fan{display:flex;gap:4px;flex-wrap:wrap;max-width:300px}
.fan svg{width:30px;height:30px;border:1px solid var(--line);border-radius:6px;background:#fff}
.tzbox{position:relative;flex:none;background:#fff;border:2px solid #E2A79E;border-radius:4px}
.tzbox svg.grid{position:absolute;inset:0;width:100%;height:100%}
.tzbox .hw{position:absolute;inset:0}
.tzbox .hw svg{display:block}
.tzbox.blue{border-color:#8FB6DE}
.exs3{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:12px}
.exs{display:flex;flex-direction:column;gap:9px}
.ex{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:6px solid var(--navy);border-radius:16px;padding:14px 14px;box-shadow:var(--shadow-s)}
.ex .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--cream);color:var(--navy);font-weight:800;display:grid;place-items:center;font-size:14px}
.ex .b{flex:1;min-width:0}
.ex .py{font-size:16px;color:var(--muted)}
.ex .cn{font-size:30px;font-weight:700;color:var(--navy);line-height:1.25}
.ex .vi{font-size:17px;color:var(--ink)}
.tip{background:var(--cream);border:1px solid #F2DD86;border-radius:14px;padding:10px 16px;font-size:18px;line-height:1.45}
.tip b{color:var(--navy)}
.tip .zh{font-weight:700;color:var(--navy)}

/* ---------- NAMES / COUNTRIES ---------- */
.names{display:grid;grid-template-columns:1fr 1fr;gap:24px;height:100%}
.ncol h3{margin:0 0 10px;font-size:18px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.ncard{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:11px 16px;margin-bottom:10px;box-shadow:var(--shadow-s)}
.ncard .flag{flex:none;width:88px;height:66px;border-radius:8px;background:#eee center/cover;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ncard .av{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:var(--ice)}
.ncard .w{font-family:var(--cjk);font-size:36px;font-weight:700;color:var(--navy);min-width:110px}
.ncard .p{font-size:19px;font-weight:600}
.ncard .vi{font-size:17px;color:var(--muted)}
.ncard .b{flex:1}
.ncard .tag{font-family:var(--cjk);font-size:18px;background:var(--cream);color:var(--navy);border-radius:10px;padding:4px 10px;font-weight:700}
.qa{background:var(--ice-2);border:1px dashed #A9C6E6;border-radius:16px;padding:10px 16px;margin-top:8px}
.qa .ln{display:flex;align-items:center;gap:10px;margin:4px 0}
.qa .ln .who{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px}
.qa .ln .who.b{background:var(--yellow);color:var(--navy)}
.qa .cn{font-size:25px;font-weight:700;color:var(--navy)}
.qa .py{font-size:15px;color:var(--muted)}

/* ---------- NOTE (姓名) ---------- */
.ntab{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-s)}
.ntab th{background:var(--navy);color:#fff;font-size:18px;padding:12px;font-weight:700}
.ntab th .cn{color:var(--yellow);font-size:22px;margin-right:6px}
.ntab td{text-align:center;padding:10px;border-top:1px solid var(--line-2);font-size:18px}
.ntab td .cn{font-size:34px;font-weight:700;color:var(--navy);display:block}
.ntab td .py{font-size:16px;color:var(--muted)}
.ntab tr:nth-child(even) td{background:var(--ice-2)}
.ntab td.x{color:var(--muted);font-size:15px}
.lead{font-size:20px;line-height:1.55;margin:0 0 16px}
.lead b{color:var(--navy)}

/* ---------- GRAMMAR ---------- */
.formula{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 18px}
.formula .f{border-radius:16px;padding:10px 24px;font-weight:800;font-size:24px;color:#fff;text-align:center;box-shadow:var(--shadow-s)}
.formula .f small{display:block;font-size:14px;font-weight:600;opacity:.9}
.formula .f.s{background:var(--r1)} .formula .f.v{background:var(--r2)} .formula .f.o{background:var(--r3)} .formula .f.neg{background:#7B5CC4}
.formula .plus{font-size:30px;font-weight:900;color:var(--muted)}
.gtab{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-s);background:#fff}
.gtab .gh{padding:10px;text-align:center;font-weight:800;color:#fff;font-size:18px}
.gtab .gh:nth-child(1){background:var(--r1)} .gtab .gh:nth-child(2){background:var(--r2)} .gtab .gh:nth-child(3){background:var(--r3)}
.gtab .gc{text-align:center;padding:8px 6px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center}
.gtab .gc .py{font-size:15px;color:var(--muted)}
.gtab .gc .cn{font-size:30px;font-weight:700}
.gtab .gc.s .cn{color:var(--r1)} .gtab .gc.v .cn{color:var(--r2)} .gtab .gc.o .cn{color:var(--r3)}
.gtab .gc .vi{font-size:14px;color:var(--muted)}
.gnote{display:flex;gap:16px;margin-top:16px}
.gnote>div{flex:1}
.sent{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;justify-content:center}
.tok{display:inline-flex;flex-direction:column;align-items:center;border-radius:12px;padding:4px 10px;background:#fff;border:1.5px solid var(--line)}
.tok .py{font-size:14px;color:var(--muted)}
.tok .cn{font-size:28px;font-weight:700;line-height:1.15}
.tok .role{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.tok.s{border-color:var(--r1)} .tok.s .cn,.tok.s .role{color:var(--r1)}
.tok.v{border-color:var(--r2)} .tok.v .cn,.tok.v .role{color:var(--r2)}
.tok.o{border-color:var(--r3)} .tok.o .cn,.tok.o .role{color:var(--r3)}
.tok.neg{border-color:#7B5CC4} .tok.neg .cn,.tok.neg .role{color:#7B5CC4}
.tok.q{background:var(--cream);border-color:var(--yellow-dk)}
.tok.p{border:none;background:none;padding:4px 0}
.transform{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px 14px;margin-bottom:9px;box-shadow:var(--shadow-s)}
.transform .arr{font-size:34px;color:var(--yellow-dk);text-align:center;font-weight:900}
.transform .vi{text-align:center;font-size:15px;color:var(--muted);margin-top:4px}

/* ---------- ORDER EXERCISE ---------- */
.ord{display:flex;flex-direction:column;gap:14px}
.oitem{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:var(--shadow-s)}
.oitem .oh{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.oitem .oh .n{width:30px;height:30px;border-radius:9px;background:var(--navy);color:#fff;font-weight:800;display:grid;place-items:center}
.oitem .oh .vi{font-size:16px;color:var(--muted)}
.oitem .oh .sp{flex:1}
.orow{display:grid;grid-template-columns:1fr 40px 1.15fr;gap:8px;align-items:center}
.oarr{font-size:26px;color:var(--yellow-dk);text-align:center;font-weight:900}
.opool,.oans{display:flex;gap:10px;flex-wrap:wrap;min-height:76px;align-items:center;border-radius:14px;padding:6px}
.oans{background:var(--ice-2);border:2px dashed #A9C6E6}
.oans:empty::before{content:"Bấm các từ bên trên theo đúng thứ tự…";color:#9AB0C6;font-size:16px;padding-left:8px}
.otok{display:inline-flex;flex-direction:column;align-items:center;border:2px solid var(--line);background:#fff;border-radius:14px;padding:5px 14px;cursor:pointer;transition:transform .15s,border-color .15s}
.otok:hover{transform:translateY(-2px);border-color:var(--navy)}
.otok .py{font-size:14px;color:var(--muted)}
.otok .cn{font-size:28px;font-weight:700;color:var(--navy);pointer-events:none}
.oitem.ok .oans{border-color:var(--ok);background:var(--ok-bg)}
.oitem.bad .oans{border-color:var(--bad);background:var(--bad-bg);animation:shake .4s}
.ofb{font-weight:800;font-size:17px;min-width:120px;text-align:right}
.ofb.ok{color:var(--ok)} .ofb.bad{color:var(--bad)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}

/* ---------- 呢 ---------- */
.ne{display:flex;flex-direction:column;gap:14px}
.ne .eq{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 18px;box-shadow:var(--shadow-s)}
.ne .eq .side{flex:1;text-align:center}
.ne .eq .side .cn{font-size:30px;font-weight:700;color:var(--navy)}
.ne .eq .side .py{font-size:15px;color:var(--muted)}
.ne .eq .side .vi{font-size:16px}
.ne .eq .is{font-size:34px;font-weight:900;color:var(--yellow-dk)}
.ne .eq .side .cn .hl{background:var(--cream);border-radius:6px;padding:0 4px;color:#B03A2E}
.rule{background:var(--navy);color:#fff;border-radius:18px;padding:14px 20px;font-size:20px;line-height:1.5}
.rule b{color:var(--yellow)}
.rule .cn{color:var(--yellow);font-weight:700}

/* ---------- DIALOGUE ---------- */
.dlg{display:grid;grid-template-columns:350px 1fr;gap:22px;height:100%}
.dl-left{display:flex;flex-direction:column;gap:12px}
.dl-img{border-radius:20px;border:1px solid var(--line);background:#fff center/contain no-repeat;height:250px;box-shadow:var(--shadow-s)}
.dl-roles{display:flex;gap:8px;flex-wrap:wrap}
.dl-roles button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:700;color:var(--navy)}
.dl-roles button.on{background:var(--navy);color:#fff}
.dl-scene{font-size:16px;color:var(--muted);line-height:1.5;background:var(--ice-2);border-radius:14px;padding:10px 14px}
.dl-scene b{color:var(--navy)}
.lines{display:flex;flex-direction:column;gap:7px;overflow:hidden}
.line{display:grid;grid-template-columns:64px minmax(0,1fr) 225px 34px;align-items:center;gap:10px;border-radius:16px;padding:5px 10px 5px 4px;border:1.5px solid transparent;transition:background .2s,border-color .2s,transform .2s}
.line.A{background:var(--ice-2)}
.line.B{background:#FFFDF2}
.line .who{text-align:center}
.line .who i{display:grid;place-items:center;width:38px;height:38px;margin:0 auto;border-radius:50%;background:var(--navy);color:#fff;font-style:normal;font-weight:800;font-size:17px}
.line.B .who i{background:var(--yellow);color:var(--navy)}
.line .who small{display:block;font-family:var(--cjk);font-size:13px;color:var(--muted);margin-top:2px;white-space:nowrap}
.line .b{flex:1;min-width:0}
.line .py{font-size:15px;color:var(--muted);line-height:1.3}
.line .cn{font-size:27px;font-weight:700;color:var(--navy);line-height:1.25}
.line .vi{font-size:15.5px;line-height:1.3;color:var(--ink)}
.line.now{border-color:var(--yellow-dk);background:var(--cream);transform:translateX(6px)}
.lines.hideA .line.A .b,.lines.hideB .line.B .b,.lines.hideA .line.A .vi,.lines.hideB .line.B .vi{filter:blur(7px);opacity:.6}
.lines.hideA .line.A .b:hover,.lines.hideB .line.B .b:hover{filter:none;opacity:1}

/* ---------- PHONETICS ---------- */
.finals{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:20px}
.fin{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px 10px 22px;text-align:center;cursor:pointer;box-shadow:var(--shadow-s);transition:transform .15s,background .2s}
.fin:hover{transform:translateY(-3px);background:var(--ice-2)}
.fin.playing{background:var(--cream);border-color:var(--yellow-dk)}
.fin .f{font-size:64px;font-weight:800;color:var(--navy);line-height:1.1}
.fin .like{font-size:17px;color:var(--muted);margin-top:6px}
.fin .like b{color:#B03A2E}
.fin .exw{font-size:19px;margin-top:10px}
.fin .exw .cn{font-size:28px;font-weight:700;color:var(--blue)}
.fin.tipcard{background:var(--navy);color:#fff;cursor:default;display:flex;flex-direction:column;justify-content:center;text-align:left;padding:16px 18px;font-size:17px;line-height:1.45}
.fin.tipcard b{color:var(--yellow)}
.syl{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:18px}
.srow{display:grid;grid-template-columns:40px 1fr 1fr;gap:10px;align-items:center}
.srow .n{font-weight:800;color:var(--muted);font-size:17px}
.scell{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 12px;cursor:pointer;transition:background .15s}
.scell:hover{background:var(--ice-2)}
.scell.playing{background:var(--cream);border-color:var(--yellow-dk)}
.scell .p{font-size:27px;font-weight:800;color:var(--navy);min-width:74px}
.scell .cn{font-size:30px;font-weight:700;color:var(--blue);min-width:34px}
.scell .vi{font-size:17px;color:var(--muted)}
body.hide-hz .scell .cn{visibility:hidden}
.w2{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-top:10px}
.w2 .scell{display:grid;grid-template-columns:38px 140px 100px 1fr;gap:8px;padding:3px 12px}
.w2 .scell .p{font-size:21px;min-width:0}
.w2 .scell .cn{font-size:25px}
.w2 .scell .vi{font-size:16px}
.w2 .scell .n{font-weight:800;color:var(--muted);font-size:13px}
.dict6{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:22px}
.dcell{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 14px 12px;text-align:center;box-shadow:var(--shadow-s)}
.dcell .top{display:flex;justify-content:space-between;align-items:center}
.dcell .n{font-weight:800;color:var(--muted)}
.dcell .fill{display:flex;align-items:center;justify-content:center;gap:2px;margin:18px 0 8px}
.dcell .ini{font-size:40px;font-weight:800;color:var(--navy)}
.dcell input{width:104px;font:inherit;font-size:38px;font-weight:800;color:#B03A2E;border:none;border-bottom:3px solid var(--line);text-align:center;background:transparent;outline:none;padding:2px 0}
.dcell input:focus{border-color:var(--navy)}
.dcell.ok{background:var(--ok-bg);border-color:var(--ok)}
.dcell.ok input{color:var(--ok);border-color:var(--ok)}
.dcell.bad{background:var(--bad-bg);border-color:var(--bad)}
.dcell .ans{font-size:15px;color:var(--ok);font-weight:800;min-height:20px}
.tonepad{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:26px;flex-wrap:wrap}
.tonepad .lbl{font-size:15px;color:var(--muted);font-weight:600}
.tonepad button{border:1px solid var(--line);background:#fff;border-radius:10px;font-size:22px;font-weight:800;color:var(--navy);width:44px;height:40px}
.tonepad button:hover{background:var(--ice)}

/* ---------- RADICALS / WRITING ---------- */
.rads{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.rad{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-s)}
.rad .rh{background:var(--navy);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:14px}
.rad .rh .r{width:84px;height:84px;border-radius:18px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-family:var(--cjk);font-size:58px;font-weight:700}
.rad .rh b{font-size:24px;display:block}
.rad .rh .cn{color:var(--yellow);font-size:19px}
.rad .rh small{color:#AFCBE8;font-size:14px}
.rad .rb{display:flex;gap:16px;padding:18px 14px 12px;justify-content:center}
.rad .rx{text-align:center}
.rad .rx .cn{font-size:24px;font-weight:700;color:var(--navy);margin-top:4px}
.rad .rx .vi{font-size:15px;color:var(--muted)}
.rad .rmean{padding:4px 18px 18px;font-size:17px;color:var(--muted);line-height:1.45}
.wtab{display:flex;flex-direction:column;gap:9px}
.wrow{display:grid;grid-template-columns:84px 64px 1fr 412px 124px;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 12px;box-shadow:var(--shadow-s)}
.wrow .meta{font-size:15px;color:var(--muted);text-align:center}
.wrow .meta b{display:block;font-size:22px;color:var(--navy)}
.wrow .meta .cn{font-size:18px}
.wrow .fan{max-width:none;margin:0}
.wrow .trace{display:flex;gap:6px}
.wrow .trace .tzbox span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--cjk-kai);font-size:60px;line-height:1;color:#D9D9D9;z-index:1}
.wrow .trace .tzbox span.k2{color:#ECECEC}

/* ---------- ACTIVITIES ---------- */
.act{display:grid;grid-template-columns:1fr 1fr;gap:24px;height:100%}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 20px;box-shadow:var(--shadow-s)}
.card h3{margin:0 0 10px;font-size:20px;color:var(--navy);display:flex;align-items:center;gap:8px}
.card p{margin:6px 0;font-size:18px;line-height:1.5}
.fld{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.fld label{font-size:14.5px;font-weight:700;color:var(--muted)}
.fld input,.fld select{font:inherit;font-size:22px;padding:12px 16px;border:2px solid var(--line);border-radius:14px;outline:none;background:#fff;color:var(--ink)}
.fld input:focus,.fld select:focus{border-color:var(--navy)}
.nameout{text-align:center;background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff;border-radius:20px;padding:18px;margin-top:10px;min-height:210px;display:flex;flex-direction:column;justify-content:center}
.nameout .cn{font-size:64px;font-weight:700;line-height:1.1;color:#fff}
.nameout .py{font-size:22px;color:var(--yellow);font-weight:600}
.nameout .vi{font-size:15px;color:#CFE0F2;margin-top:4px}
.nameout .say{margin-top:10px;font-size:22px;color:#fff;font-family:var(--cjk)}
.nameout.empty .cn{font-size:20px;font-family:var(--ui);color:#CFE0F2;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chips button{border:1px solid var(--line);background:var(--ice-2);border-radius:999px;padding:4px 10px;font-size:14px;color:var(--navy);font-weight:600}
.chips button:hover{background:var(--navy);color:#fff}
.chips button .cn{font-weight:700}
.tmpl{font-size:28px;line-height:1.9;font-family:var(--cjk);color:var(--navy);font-weight:700}
.tmpl .blank{display:inline-block;min-width:150px;border-bottom:3px solid var(--yellow-dk);text-align:center;color:#B03A2E;padding:0 6px}
.tmpl .pyl{display:block;font-family:var(--ui);font-size:16px;color:var(--muted);font-weight:500;line-height:1.3}
.seg2{display:inline-flex;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.seg2 button{border:none;background:#fff;padding:8px 18px;font-family:var(--cjk);font-size:20px;font-weight:700;color:var(--navy)}
.seg2 button.on{background:var(--navy);color:#fff}
.ctry{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.cty{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 12px;cursor:pointer;transition:background .15s,transform .15s}
.cty:hover{background:var(--ice-2);transform:translateY(-2px)}
.cty .flag{flex:none;width:58px;height:43px;border-radius:5px;background:#eee center/cover;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.cty .cn{font-size:25px;font-weight:700;color:var(--navy);line-height:1.15}
.cty .py{font-size:13px;color:var(--muted)}
.cty .vi{font-size:13.5px;font-weight:600}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pd .card .ln{display:flex;align-items:center;gap:10px;margin:8px 0}
.pd .card .ln .who{flex:none;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px}
.pd .card .ln .who.b{background:var(--yellow);color:var(--navy)}
.pd .card .ln .cn{font-size:26px;font-weight:700;color:var(--navy)}
.pd .card .ln .py{font-size:14.5px;color:var(--muted)}
.ime{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.ime>span{background:var(--ice);border-radius:10px;padding:6px 12px;font-size:15px;color:var(--navy);font-weight:600}

/* ---------- PROVERBS / CULTURE ---------- */
.prov{display:flex;flex-direction:column;gap:18px}
.pv{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 24px;box-shadow:var(--shadow-s)}
.pv .n{flex:none;width:58px;height:58px;border-radius:16px;font-size:28px!important;background:var(--navy);color:var(--yellow);display:grid;place-items:center;font-family:var(--cjk);font-size:24px;font-weight:700}
.pv .b{flex:1}
.pv .py{font-size:18px;color:var(--muted)}
.pv .cn{font-size:44px;font-weight:700;color:var(--navy);letter-spacing:3px;font-family:var(--cjk-kai)}
.pv .vi{font-size:19px}
.pv .vi i{color:var(--muted)}
.cult{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;height:100%}
.dia{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dia .d{background:#fff;border:1px solid var(--line);border-radius:16px;padding:9px 12px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow-s)}
.dia .d .k{flex:none;width:40px;height:40px;border-radius:12px;background:var(--ice);display:grid;place-items:center;font-weight:800;color:var(--navy);font-family:var(--cjk);font-size:20px}
.dia .d.big{grid-column:1/-1;background:var(--navy);color:#fff}
.dia .d.big .k{background:var(--yellow)}
.dia .d .cn{font-size:21px;font-weight:700;color:var(--navy)}
.dia .d.big .cn{color:var(--yellow)}
.dia .d .vi{font-size:14.5px;color:var(--muted);line-height:1.35}
.dia .d.big .vi{color:#D6E6F7}
.bar7{display:flex;flex-direction:column;gap:8px}
.bar7 .r{display:grid;grid-template-columns:150px 1fr 56px;align-items:center;gap:10px;font-size:15px}
.bar7 .r .t{font-weight:700;color:var(--navy)}
.bar7 .r .t .cn{font-weight:700}
.bar7 .r .bg{height:16px;border-radius:9px;background:var(--line-2);overflow:hidden}
.bar7 .r .bg i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--navy),var(--sky))}
.bar7 .r:first-child .bg i{background:linear-gradient(90deg,var(--yellow-dk),var(--yellow))}
.bar7 .r .pc{font-weight:800;color:var(--navy);text-align:right}

/* ---------- QUIZ ---------- */
.quiz{max-width:980px;margin:0 auto}
.qtop{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.qbar{flex:1;height:12px;border-radius:8px;background:var(--line-2);overflow:hidden}
.qbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow-dk),var(--yellow));transition:width .5s}
.qmeta{font-weight:800;color:var(--navy);font-size:17px;white-space:nowrap}
.qq{font-size:34px;font-weight:800;color:var(--ink);margin:14px 0 22px;line-height:1.4;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qq .cn{color:var(--navy);font-weight:700}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.qopt{display:flex;align-items:center;gap:16px;text-align:left;padding:20px 22px;border:2px solid var(--line);border-radius:20px;background:#fff;font-size:26px;font-weight:700;color:var(--ink);transition:transform .14s,border-color .2s,background .2s;box-shadow:var(--shadow-s)}
.qopt:hover{transform:translateY(-2px);border-color:var(--navy)}
.qopt .k{flex:none;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800}
.qopt .cn{font-weight:700}
.qopt.right{border-color:var(--ok);background:var(--ok-bg)} .qopt.right .k{background:var(--ok)}
.qopt.wrong{border-color:var(--bad);background:var(--bad-bg);animation:shake .4s} .qopt.wrong .k{background:var(--bad)}
.qopt.lock{pointer-events:none}
.qfb{min-height:30px;margin-top:18px;font-size:21px;font-weight:700}
.qfb .ok{color:var(--ok)} .qfb .no{color:var(--bad)}
.qfb .ex{display:block;font-weight:500;color:var(--ink);font-size:17px;margin-top:4px}
.qnext{margin-top:10px}
.qdone{text-align:center;padding:20px}
.qdone .big{font-size:80px}
.qdone .res{font-size:30px;font-weight:800;color:var(--navy);margin:10px 0 18px}
.confetti{position:fixed;width:10px;height:10px;border-radius:2px;z-index:999;pointer-events:none;animation:cf 1s ease-out forwards}
@keyframes cf{to{transform:translate(var(--dx),var(--dy)) rotate(260deg) scale(.4);opacity:0}}

/* ---------- SUMMARY / END ---------- */
.slide.t-end{background:linear-gradient(135deg,var(--navy-dk),var(--navy) 60%,#1A64A8);color:#fff}
.end-wrap{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr 1fr;gap:30px;padding:60px 70px}
.end-wrap h2{margin:0 0 6px;font-size:40px;font-weight:900}
.end-wrap h2 span{color:var(--yellow)}
.recap{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px}
.recap li{display:flex;gap:12px;align-items:flex-start;font-size:19px;line-height:1.4;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:9px 14px}
.recap li .ck{flex:none;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-weight:900;font-size:15px}
.recap li .cn{color:var(--yellow);font-weight:700}
.hwk{background:#fff;color:var(--ink);border-radius:22px;padding:18px 22px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.hwk h3{margin:0 0 10px;color:var(--navy);font-size:21px}
.hwk ol{margin:0;padding-left:22px;font-size:17px;line-height:1.6}
.bye{text-align:center;margin-top:20px}
.bye .cn{font-size:56px;font-weight:900;color:var(--yellow);line-height:1.15}
.bye .cn2{font-size:30px;font-weight:700;color:#fff}
.bye small{display:block;color:#A9C6E6;font-size:15px;margin-top:6px}

/* =================== POPUP / PANELS / MODALS =================== */
.wpop{position:fixed;z-index:350;width:410px;max-width:96vw;background:#fff;border-radius:20px;box-shadow:0 22px 60px rgba(7,42,74,.32);border:1px solid var(--line);overflow:hidden;animation:popIn .16s ease-out;display:flex;flex-direction:column;max-height:94vh}
@keyframes popIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.wp-head{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;background:linear-gradient(160deg,var(--ice-2),var(--ice))}
.wp-say{flex:none;width:40px;height:40px;border-radius:50%;border:none;background:var(--navy);color:#fff;font-size:17px;box-shadow:0 4px 12px rgba(13,69,118,.3)}
.wp-say:hover{background:var(--blue)}
.wp-w{font-family:var(--cjk);font-size:40px;font-weight:700;color:var(--navy);line-height:1.1;max-width:190px;word-break:break-all}
.wp-w.long{font-size:30px}
.wp-w.xl{font-size:21px;max-width:220px}
.wp-meta{flex:1;min-width:0}
.wp-py{font-size:18px;font-weight:700;color:var(--ink);line-height:1.25}
.wp-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.wp-tags span{font-size:11.5px;font-weight:800;border-radius:999px;padding:2px 9px;letter-spacing:.3px}
.wp-tags .t-hv{background:var(--navy);color:var(--yellow);letter-spacing:.8px}
.wp-tags .t-pos{background:#fff;color:var(--navy);border:1px solid var(--line);font-family:var(--cjk)}
.wp-tags .t-hsk{background:var(--cream);color:#6B5600}
.wp-tags .t-rad{background:#fff;color:var(--muted);border:1px solid var(--line)}
.wp-x{align-self:flex-start;border:none;background:none;font-size:24px;color:var(--muted);line-height:1}
.wp-head.sent{flex-wrap:wrap;align-items:flex-start}
.wp-head.sent .wp-w{flex:1;max-width:none;order:1}
.wp-head.sent .wp-say{order:0}
.wp-head.sent .wp-x{order:2}
.wp-head.sent .wp-meta{order:3;flex-basis:100%;padding-left:50px}
.wp-head.sent .wp-py{font-size:15px;font-weight:600;color:var(--muted)}
.wp-body{padding:8px 14px 2px;max-height:190px;overflow:auto}
.wp-vi{font-size:15px;line-height:1.45}
.wp-vi b{color:var(--navy)}
.wp-vi .sense{display:block;margin:1px 0}
.wp-chars{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.wp-chars:empty{display:none}
.wc{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--ice-2);border-radius:11px;padding:4px 9px;min-width:64px;max-width:132px;font:inherit;cursor:pointer}
.wc:hover{background:var(--cream);border-color:var(--yellow-dk)}
.wc b{font-family:var(--cjk);font-size:21px;color:var(--navy);line-height:1.15}
.wc span{font-size:12.5px;font-weight:700;color:var(--ink)}
.wc small{font-size:11px;color:var(--muted);max-width:114px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-extra{padding:0 14px;font-size:13.5px;color:var(--muted)}
.wp-extra .gt{margin:6px 0 2px;color:#1350A8;background:#EEF4FF;border-radius:10px;padding:7px 10px;font-size:14px;line-height:1.45}
.wp-extra:empty{display:none}
.wp-acts{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:8px 10px 8px}
.wp-acts button{display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:6px 2px;font-size:11.5px;font-weight:700;color:var(--navy)}
.wp-acts button i{font-style:normal;font-size:17px;line-height:1.2}
.wp-acts button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.wp-tabs{display:flex;gap:2px;padding:0 8px;border-bottom:1px solid var(--line);background:#fff}
.wp-tabs button{flex:1;border:none;background:none;padding:9px 2px 8px;font-weight:800;font-size:12.5px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.wp-tabs button:hover{color:var(--navy)}
.wp-tabs button.on{color:var(--navy);border-bottom-color:var(--yellow)}
.wp-pane{padding:10px 10px 12px;overflow:auto;min-height:0}
.wp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wl-btn{display:grid;grid-template-columns:26px 1fr;column-gap:6px;align-items:center;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:6px 8px;text-decoration:none;color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.wl-btn:hover{background:var(--ice);border-color:#A9C6E6}
.wl-btn i{grid-row:1/3;font-style:normal;font-size:18px;text-align:center}
.wl-btn b{font-size:13px;color:var(--navy);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-btn small{font-size:11px;color:var(--muted);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-gt{margin-top:8px;background:#EEF4FF;color:#1350A8;border-radius:10px;padding:8px 10px;font-size:14px;line-height:1.45}
.wp-gt small{color:var(--muted)}
.ai-modes{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.ai-modes button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;color:var(--navy)}
.ai-modes button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.ai-provs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ai-p{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:7px 2px 6px;font-size:11.5px;font-weight:700;color:var(--ink)}
.ai-p i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:900;font-size:14px}
.ai-p:hover{background:var(--ice);border-color:#A9C6E6}
.ai-p.last{border-color:var(--yellow-dk);box-shadow:0 0 0 2px var(--cream)}
.ai-ask{display:flex;gap:6px;margin-top:8px}
.ai-ask input{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;outline:none}
.ai-ask input:focus{border-color:var(--navy)}
.ai-ask button{border:none;background:var(--yellow);color:var(--navy);font-weight:800;border-radius:10px;padding:0 12px;font-size:13px;white-space:nowrap}
.ai-note{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.45}
.ai-note a{color:var(--blue);font-weight:700;text-decoration:none;white-space:nowrap}
.hsk{display:inline-block;background:var(--cream);color:#6B5600;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:800;margin-left:6px}

/* ảnh minh hoạ chèn vào slide */
#pins{position:absolute;inset:0;z-index:35;pointer-events:none}
.pin{position:absolute;pointer-events:auto;background:#fff;border-radius:14px;border:4px solid #fff;box-shadow:0 14px 34px rgba(7,42,74,.32);cursor:grab;touch-action:none}
.pin.drag{cursor:grabbing;box-shadow:0 22px 46px rgba(7,42,74,.42)}
.pin img{display:block;width:100%;border-radius:10px;pointer-events:none;user-select:none}
.pin-bar{position:absolute;left:6px;right:6px;top:6px;display:flex;align-items:center;gap:4px;background:rgba(7,42,74,.82);color:#fff;border-radius:10px;padding:4px 6px;opacity:0;transition:opacity .15s}
.pin:hover .pin-bar{opacity:1}
.pin-bar span{flex:1;font-family:var(--cjk);font-weight:700;font-size:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pin-bar button{border:none;background:rgba(255,255,255,.18);color:#fff;width:30px;height:28px;border-radius:7px;font-size:16px;font-weight:800}
.pin-bar button:hover{background:var(--yellow);color:var(--navy)}
.pin-rs{position:absolute;right:-12px;bottom:-12px;width:26px;height:26px;border-radius:50%;background:var(--yellow);border:4px solid #fff;cursor:nwse-resize;box-shadow:0 2px 8px rgba(0,0,0,.3)}
body.pen-on #pins,body.pen-on .pin{pointer-events:none}

.panel{position:fixed;top:0;right:0;height:100vh;height:var(--app-h,100vh);padding-bottom:env(safe-area-inset-bottom);width:400px;max-width:94vw;background:#fff;z-index:150;box-shadow:-16px 0 50px rgba(7,42,74,.2);transform:translateX(105%);transition:transform .26s ease;display:flex;flex-direction:column}
.panel.left{left:0;right:auto;transform:translateX(-105%);box-shadow:16px 0 50px rgba(7,42,74,.2)}
.panel.open{transform:none}
.panel .ph{display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;padding:14px 16px}
.panel .ph b{font-size:16px}
.panel .px{border:none;background:rgba(255,255,255,.14);color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1}
.panel .pin{padding:12px 14px 6px}
.panel .pin.row{display:flex;gap:8px;flex-wrap:wrap}
.panel .pc{flex:1;overflow:auto;padding:8px 14px 20px}
#dictQ{width:100%;font:inherit;font-size:16px;padding:10px 14px;border:2px solid var(--line);border-radius:14px;outline:none}
#dictQ:focus{border-color:var(--navy)}
.empty{color:var(--muted);text-align:center;padding:30px 10px;font-size:14.5px;line-height:1.6}
.dr{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:9px}
.dr .w{font-family:var(--cjk);font-size:26px;font-weight:700;color:var(--navy)}
.dr .p{font-size:14px;color:var(--ink);font-weight:600;margin-left:8px}
.dr .h{display:inline-block;font-size:11.5px;font-weight:800;color:var(--yellow);background:var(--navy);border-radius:999px;padding:1px 8px;margin-left:6px;letter-spacing:.6px}
.dr .v{font-size:14px;margin-top:4px;line-height:1.45}
.dr .a{display:flex;gap:6px;margin-top:7px}
.dr .a button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:4px 9px;font-size:12.5px;font-weight:700;color:var(--navy)}
.dr .a button:hover{background:var(--ice)}
.sbtn{border:1px solid var(--line);background:var(--ice);color:var(--navy);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700}
.sbtn.ghost{background:#fff;color:var(--muted)}
.toc-sec{font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin:14px 4px 6px}
.toc-it{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:none;background:none;border-radius:12px;padding:8px 10px;font-size:14.5px;color:var(--ink)}
.toc-it:hover{background:var(--ice)}
.toc-it.on{background:var(--cream);font-weight:700}
.toc-it .n{flex:none;width:28px;height:28px;border-radius:8px;background:var(--ice);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:12.5px}
.toc-it.on .n{background:var(--yellow)}
.toc-it .cn{font-weight:700;color:var(--navy)}

.modal{position:fixed;inset:0;z-index:300;background:rgba(7,30,52,.55);display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.mbox{background:#fff;border-radius:24px;width:640px;max-width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.mbox.wide{width:980px}
.mh{display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;padding:14px 18px}
.mh b{font-size:17px}
.mh-sub{color:#AFCBE8;font-size:14px}
.mx{margin-left:auto;border:none;background:rgba(255,255,255,.14);color:#fff;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1}
.mc{padding:18px 20px;overflow:auto}
.help ul{margin:0;padding-left:20px;line-height:1.7;font-size:15.5px}
.help b{color:var(--navy)}
.sk{display:grid;grid-template-columns:auto 1fr;gap:20px;border:1px solid var(--line);border-radius:20px;padding:14px;margin-bottom:14px}
.sk .stage-col{display:flex;flex-direction:column;gap:10px;align-items:center}
.sk .ctrls{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sk .ctrls button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 11px;font-size:13.5px;font-weight:700;color:var(--navy)}
.sk .ctrls button:hover,.sk .ctrls button.on{background:var(--navy);color:#fff}
.sk .info .c{font-family:var(--cjk);font-size:44px;font-weight:700;color:var(--navy);line-height:1}
.sk .info .py{font-size:22px;font-weight:700;margin-left:10px}
.sk .info p{margin:8px 0;font-size:15.5px;line-height:1.5}
.sk .info p b{color:var(--navy)}
.sk .fan{max-width:none}
.sk .fan svg{width:42px;height:42px}
.sk .qmsg{font-size:14.5px;font-weight:700;min-height:22px;text-align:center;color:var(--navy)}
.sk .qmsg.ok{color:var(--ok)}
.fc{display:flex;flex-direction:column;align-items:center;gap:16px}
.fc .cardx{width:100%;height:280px;perspective:1200px;cursor:pointer}
.fc .inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.fc .cardx.flip .inner{transform:rotateY(180deg)}
.fc .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);box-shadow:var(--shadow)}
.fc .front{background:linear-gradient(160deg,#fff,var(--ice))}
.fc .front .cn{font-size:90px;font-weight:700;color:var(--navy)}
.fc .back{background:var(--navy);color:#fff;transform:rotateY(180deg);padding:20px;text-align:center}
.fc .back .py{font-size:30px;color:var(--yellow);font-weight:700}
.fc .back .v{font-size:20px;margin-top:10px;line-height:1.5}
.fc .nav2{display:flex;gap:10px;align-items:center}

.pop{position:fixed;top:58px;right:14px;z-index:160;width:330px;max-width:94vw;background:#fff;border-radius:18px;padding:16px;box-shadow:0 20px 50px rgba(7,42,74,.28);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.pop-h{font-weight:800;color:var(--navy);font-size:16px}
.pop .row{display:flex;flex-direction:column;gap:4px}
.pop .row span{font-weight:700;color:var(--muted);font-size:13px}
.pop select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.pop .chk{display:flex;gap:8px;align-items:center;cursor:pointer}
.timer{position:fixed;right:20px;bottom:76px;z-index:170;background:var(--navy);color:#fff;border-radius:20px;padding:12px 14px;box-shadow:0 20px 50px rgba(7,42,74,.4);text-align:center;min-width:200px}
.tm-disp{font-size:46px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:1px}
.timer.warn .tm-disp{color:var(--yellow)}
.timer.over{animation:shake .5s 3}
.tm-row{display:flex;gap:6px;justify-content:center;margin-top:6px}
.tm-row button{border:none;background:rgba(255,255,255,.14);color:#fff;border-radius:10px;padding:6px 10px;font-weight:800;font-size:14px}
.tm-row button:hover{background:var(--yellow);color:var(--navy)}
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);background:var(--navy);color:#fff;padding:10px 20px;border-radius:999px;font-size:14.5px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;z-index:400;pointer-events:none;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translateX(-50%)}
#loading{position:fixed;inset:0;z-index:500;background:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px}
body.loading #loading{display:flex}
.ld-logo img{width:96px;height:96px;border-radius:24px;animation:pulse 1.1s infinite}
.ld-txt{font-weight:700;color:var(--navy)}
@keyframes pulse{50%{transform:scale(.92)}}

/* tính năng (trang chủ) */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px max(20px,4vw) 0}
.feat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:4px}
.feat span{font-size:26px}
.feat b{color:var(--navy);font-size:16px}
.feat small{color:var(--muted);font-size:13.5px;line-height:1.45}
.rotate-hint{display:none;position:absolute;left:50%;top:14px;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;white-space:nowrap;z-index:5}
@media (max-width:700px) and (orientation:portrait){.rotate-hint{display:block}}
/* điện thoại xoay ngang / màn hình thấp: thu gọn thanh trên, đưa nút chuyển slide ra hai bên */
@media (max-height:520px){
  .bar{gap:6px;padding:calc(4px + env(safe-area-inset-top)) 8px 4px}
  .bar-logo,.bar-ttl small,#btnTimer,#btnHelp{display:none}
  .bar-ttl b{font-size:13px;max-width:34vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ibtn{width:32px;height:32px;font-size:16px;border-radius:10px}
  .tbtn{padding:5px 9px;font-size:12px}
  .tgl button{padding:3px 8px;font-size:12px}
  .bar .lb{display:none}
  .nav{position:fixed;inset:0;pointer-events:none;padding:0;z-index:45}
  .nav .progress{display:none}
  .nav .nbtn{position:fixed;top:55%;transform:translateY(-50%);width:40px;height:40px;font-size:22px;pointer-events:auto;opacity:.92}
  #prev{left:calc(8px + env(safe-area-inset-left))}
  #next{right:calc(8px + env(safe-area-inset-right))}
  .nav .counter{position:fixed;right:calc(8px + env(safe-area-inset-right));bottom:calc(6px + env(safe-area-inset-bottom));min-width:0;font-size:12px;background:rgba(255,255,255,.9);border-radius:999px;padding:3px 9px;pointer-events:auto}
  body .pens{top:auto;bottom:calc(8px + env(safe-area-inset-bottom));left:calc(8px + env(safe-area-inset-left));transform:none}
  .pens>button,.pengroup button{width:36px;height:36px;font-size:15px}
  body.pen-on .pengroup{position:fixed;left:calc(52px + env(safe-area-inset-left));bottom:calc(8px + env(safe-area-inset-bottom));flex-direction:row;flex-wrap:wrap;max-width:70vw}
  #penW{writing-mode:horizontal-tb;direction:ltr;width:70px;height:36px}
  #toast{bottom:calc(14px + env(safe-area-inset-bottom))}
  .timer{bottom:calc(10px + env(safe-area-inset-bottom));right:calc(56px + env(safe-area-inset-right))}
  /* popup tra từ: chia 2 cột cho vừa màn hình thấp */
  body .wpop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto minmax(0,1fr) auto;width:min(780px,calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(var(--app-h,100vh) - 16px - env(safe-area-inset-bottom) - env(safe-area-inset-top));height:auto}
  body .wpop.has-ans{height:calc(var(--app-h,100vh) - 16px - env(safe-area-inset-bottom) - env(safe-area-inset-top));width:min(820px,calc(100vw - 16px))}
  body .wpop .wp-head{grid-column:1;grid-row:1;padding:8px 10px}
  body .wpop .wp-body{grid-column:1;grid-row:2;max-height:none;overflow:auto;min-height:0}
  body .wpop .wp-acts{grid-column:1;grid-row:3;grid-template-columns:repeat(6,1fr);padding:6px 8px}
  body .wpop .wp-tabs{grid-column:2;grid-row:1;align-self:end;border-left:1px solid var(--line)}
  body .wpop .wp-pane{grid-column:2;grid-row:2/4;min-height:0;overflow:auto;border-left:1px solid var(--line)}
  body .wpop .wp-w{font-size:30px}
  body .wpop .wp-say{width:34px;height:34px;font-size:15px}
  body .wpop.has-ans .wp-body{max-height:none}
  body .wpop .wp-acts button{white-space:nowrap;font-size:10.5px;padding:4px 1px}
}
/* responsive bar */
@media (max-width:1100px){.bar .tbtn{padding:6px 9px;font-size:12px}.bar-ttl small{display:none}}
@media (max-width:1180px){.bar .lb{display:none}}
@media (max-width:860px){.bar-ttl,.bar-logo,#btnTimer,#btnHelp{display:none}.pens{top:auto;bottom:calc(70px + env(safe-area-inset-bottom));transform:none}.feats{grid-template-columns:1fr 1fr}.h-hero-art{opacity:.25}}
@media (max-width:700px){.bar{gap:6px;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;overflow-x:auto}.progress{display:none}.tgl button{padding:4px 8px;white-space:nowrap}.tbtn{padding:6px 9px}.h-hero-txt{padding:28px 24px}}
@media print{.bar,.nav,.pens,.pctrl{display:none}}

/* 田字格 */
.tzbox svg.grid line{stroke:#EDB7AE;stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.tzbox.blue svg.grid line{stroke:#B9D2EC}
.tzbox>svg:not(.grid){position:absolute;inset:0;margin:auto}
.rx .tzbox{margin:0 auto}

.blist{margin:6px 0 0;padding-left:20px;font-size:17px;line-height:1.55}
.blist li{margin:6px 0}
.blist b{color:var(--navy)}

.cv-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;justify-content:center}
.cv-topics>span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:6px 14px;font-size:16px;font-weight:600}
.recap .zh{color:var(--yellow);font-weight:700}
.t-extend .tmpl{font-size:36px!important}
.t-extend .card{display:flex;flex-direction:column}
.t-extend .card .btn{align-self:flex-start}
.t-vocablist .vrow{padding:7px 14px}

.trace1{justify-content:flex-start}
.trace1 .tr-h{font-size:13.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.trace1 .tr{display:grid;grid-template-columns:96px 96px;gap:8px}
.trace1 .tzbox span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--cjk-kai);font-size:76px;line-height:1;color:#D7D7D7;z-index:1}
.trace1 .tzbox span.k2{color:#EBEBEB}
.rmore{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 18px 18px;font-size:15px;color:var(--muted)}
.rmore b{font-family:var(--cjk);font-size:26px;color:var(--navy);background:var(--ice);border-radius:10px;padding:2px 10px}
.t-syllables .scell{padding:16px 12px}
.t-nameact .card p{font-size:19px}

/* ===== Hỏi AI trong popup ===== */
.ai-main{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.ai-go{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:none;border-radius:12px;padding:8px 10px;background:var(--navy);color:#fff;min-width:0}
.ai-go b{font-size:13.5px}
.ai-go small{font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ai-go:hover{background:var(--blue)}
.ai-go.alt{background:var(--yellow);color:var(--navy)}
.ai-go.alt:hover{background:#FFE46A}
.ai-provs{grid-template-columns:repeat(5,1fr)!important;gap:5px!important}
.ai-p{padding:6px 1px 5px!important;font-size:11px!important}
.ai-p i{width:24px!important;height:24px!important;font-size:12.5px!important}
.ai-ans-wrap:empty{display:none}
.ai-ans{margin-top:8px;border:1.5px solid #A9C6E6;border-radius:14px;overflow:hidden;background:#fff}
.ai-ans-h{display:flex;align-items:center;gap:4px;background:var(--ice);padding:5px 8px;font-size:11.5px;font-weight:800;color:var(--navy)}
.ai-ans-h span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.ai-ans-h button{border:none;background:#fff;border-radius:7px;padding:3px 8px;font-size:12px;font-weight:800;color:var(--navy)}
.ai-ans-h button:hover{background:var(--navy);color:#fff}
.ai-ans-b{max-height:280px;overflow:auto;padding:8px 12px;font-size:14px;line-height:1.55}
.ai-ans-b p{margin:2px 0}.ai-ans-b ul{margin:4px 0;padding-left:18px}.ai-ans-b li{margin:2px 0}
.ai-ans-b h4{margin:8px 0 4px;color:var(--navy);font-size:14.5px}
.ai-ans-b .zh,.ai-big .zh{color:var(--navy);font-weight:700}
.ai-ans-b code,.ai-big code{background:var(--ice);border-radius:5px;padding:0 4px}
.ai-ans-b hr,.ai-big hr{border:none;border-top:1px dashed var(--line);margin:8px 0}
.sp6{height:6px}
.ai-err{color:var(--bad);background:var(--bad-bg);border-radius:9px;padding:7px 10px;font-weight:600;margin-bottom:6px}
.ai-wait{color:var(--muted);font-weight:600;display:flex;align-items:center;gap:4px}
.ai-wait i{width:7px;height:7px;border-radius:50%;background:var(--navy);animation:aiDot 1s infinite}
.ai-wait i:nth-child(2){animation-delay:.15s}.ai-wait i:nth-child(3){animation-delay:.3s;margin-right:6px}
@keyframes aiDot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.ai-big{font-size:17px;line-height:1.65}
.ai-big p{margin:4px 0}.ai-big ul{padding-left:22px}.ai-big h4{color:var(--navy);font-size:18px;margin:12px 0 6px}
.ai-set-p{font-size:14.5px;line-height:1.55;margin:0 0 8px}
.ai-set-p b{color:var(--navy)}
.ai-set-note{font-size:13px;color:var(--muted);margin:-4px 0 6px;line-height:1.45}
.ai-set-note a{color:var(--blue);font-weight:700}
.ai-set-in{width:100%;font:inherit;font-size:16px;padding:9px 12px;border:2px solid var(--line);border-radius:12px;margin:-4px 0 8px}
#aiSetBody .fld select,#aiSetBody .fld input{font-size:16px;padding:9px 12px}
.ai-key{display:flex;gap:6px}.ai-key input{flex:1;min-width:0}
.ai-key button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 10px}
.ai-set-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.ai-set-st{margin-top:10px;font-size:14px;color:var(--ink);background:var(--ice-2);border-radius:10px;padding:8px 12px;line-height:1.5}
/* ===== Cấu tạo chữ ===== */
.hzi{border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin:8px 0;background:var(--ice-2)}
.hzi-r{display:grid;grid-template-columns:118px 1fr;gap:8px;padding:4px 0;border-top:1px dashed var(--line);font-size:14.5px;line-height:1.5}
.hzi-r:first-child{border-top:none}
.hzi-r>span{font-weight:800;color:var(--muted);font-size:13px}
.hzi-r b{color:var(--navy)}
.hzi-r .cn{font-weight:700;color:var(--navy)}
.hzi-r em{font-style:normal;font-size:11.5px;font-weight:800;color:#6B5600;background:var(--cream);border-radius:999px;padding:1px 7px;margin-left:2px}
.hzi-ids{color:var(--muted)!important;font-weight:500!important;margin-left:4px}
.hzi-p{display:inline-block;margin:0 10px 2px 0}
.hzi-p .zh{font-family:var(--cjk);font-size:20px}
.hzi-src{font-size:11.5px;color:var(--muted);margin-top:4px;text-align:right}
.hzi-c{margin:6px 0 2px;font-size:13.5px;line-height:1.5;color:var(--ink);background:var(--cream);border-radius:10px;padding:6px 10px}
.hzi-c .hzi-t{font-weight:800;color:#6B5600;margin-right:6px}
.hzi-c b{font-family:var(--cjk);font-size:17px;color:var(--navy)}
.hzi-c i{font-style:normal;color:var(--muted);margin:0 3px}
.hzi .zh,.hzi-c .zh{cursor:pointer}
#mAI,#mAIBig{z-index:400}

.wpop>*{flex:none}
.wpop .wp-pane{flex:1 1 auto;min-height:140px;overflow:auto}
.wpop.has-ans{width:500px}
.wpop.has-ans .wp-body{max-height:92px}
.wpop.has-ans{height:min(880px,94vh)}
.wpop.has-ans .wp-pane{display:flex;flex-direction:column;min-height:0}
.wpop.has-ans .wp-pane>*{flex:none}
.wpop.has-ans .ai-ans-wrap{flex:1 1 auto;min-height:0;display:flex}
.wpop.has-ans .ai-ans{flex:1;display:flex;flex-direction:column;min-height:0}
.wpop.has-ans .ai-ans-b{flex:1;min-height:0;max-height:none}
.wpop.has-ans .ai-note{display:none}
.wpop.has-ans .ai-provs{grid-template-columns:repeat(10,1fr)!important;gap:4px!important}
.wpop.has-ans .ai-p{font-size:0!important;padding:5px 0!important}
.wpop.has-ans .ai-main{margin-bottom:6px}
.wpop.has-ans .ai-modes{margin-bottom:6px}
.wpop.has-ans .wp-acts button{padding:4px 2px}
.wpop.has-ans .wp-acts button i{font-size:15px}
.ai-ans-b li.nb,.ai-big li.nb{list-style:none;margin-left:-16px}
.ai-ans-b b,.ai-big b{color:var(--navy)}
.t-namenote .ntab td{padding:8px 10px}

/* ===== mở app trên điện thoại ===== */
.ai-share{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;border:2px dashed var(--yellow-dk);background:var(--cream);color:var(--navy);border-radius:12px;padding:8px 12px;margin-bottom:8px}
.ai-share b{font-size:14px}.ai-share small{font-size:11.5px;color:#6B5600}
.ai-p i{position:relative}
.ai-p i u{position:absolute;right:-7px;bottom:-6px;font-size:10px;text-decoration:none;background:#fff;border-radius:50%;line-height:1;padding:1px}
.wl-btn b em{font-style:normal;font-size:10px;font-weight:800;color:#fff;background:var(--ok);border-radius:999px;padding:0 6px;margin-left:3px;vertical-align:1px}

/* ===== trang chủ: các bài chưa có ===== */
.more-soon{display:none;border:1px dashed #A9C6E6;background:var(--ice-2);color:var(--navy);font-weight:700;border-radius:999px;padding:8px 16px;font-size:14px;margin:0 0 12px}

/* ===== trang chủ trên điện thoại: vào thẳng danh sách bài ===== */
@media (max-width:700px){
  #home{display:flex;flex-direction:column}
  #home .h-top{order:0;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px}
  #home .h-hero{order:1}
  #home #library{order:2}
  #home .feats{order:3}
  #home .h-foot{order:4}
  .h-logo{width:38px;height:38px;border-radius:10px}
  .h-brand b{font-size:16px;white-space:nowrap}
  .h-brand small{font-size:11.5px;white-space:nowrap}
  .h-top .hbtn{padding:0;width:42px;height:42px;border-radius:50%;font-size:18px;position:relative;display:grid;place-items:center}
  .h-top .hbtn .lb{display:none}
  .h-top .hbtn .badge{position:absolute;right:-4px;top:-4px;margin:0;min-width:18px;height:18px;font-size:10.5px}
  .h-hero{margin:10px 12px 0;border-radius:20px;min-height:0}
  .h-hero-txt{padding:16px 18px}
  .h-kicker{font-size:10.5px;padding:4px 10px}
  .h-hero h1{font-size:21px;margin:8px 0 4px;line-height:1.25}
  .h-hero h1 br{display:none}
  .h-desc{display:none}
  .h-teacher{margin-top:10px;gap:10px}
  .h-av{width:36px;height:36px;font-size:13px}
  .h-teacher b{font-size:15px}
  .h-hero-art{opacity:.18;width:60%;right:-10px}
  .tzg.big{width:120px;height:120px;font-size:96px;right:70px;top:14px}
  .tzg.mid{width:74px;height:74px;font-size:58px;right:6px;top:10px}
  .tzg.sm,.tzg.xs{display:none}
  #library{padding:4px 12px 20px}
  #library>.card{margin-top:12px!important;padding:12px 14px;gap:10px}
  .book{margin-top:16px}
  .book-h{margin-bottom:10px;gap:8px}
  .book-h h2{font-size:20px}
  .book-h .bz{font-size:15px}
  .book-h .lv{font-size:11.5px;padding:3px 9px}
  .lgrid{grid-template-columns:1fr;gap:10px}
  .lcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;row-gap:1px;min-height:0;padding:12px 14px;border-radius:16px}
  .lcard .no{grid-column:1;grid-row:1/4;padding:6px 9px;font-size:12px}
  .lcard .lz{grid-column:2;margin:0;font-size:19px}
  .lcard .lp{grid-column:2;font-size:12px}
  .lcard .lv2{grid-column:2;margin:0;font-size:13.5px}
  .lcard .go{grid-column:3;grid-row:1/4;position:static;font-size:12px;padding:6px 10px;white-space:nowrap;z-index:1}
  .book.no-ready:not(.show-soon) .lgrid{display:none}
  .more-soon{margin:10px 0 0}
  .lcard.ready::after{width:70px;height:70px;right:-20px;top:-20px}
  .more-soon{display:inline-block}
  .book .lcard.soon{display:none}
  .book.show-soon .lcard.soon{display:grid}
  .feats{grid-template-columns:1fr 1fr;gap:10px;margin:18px 12px 0}
  .feat{padding:12px}
  .feat b{font-size:14px}
  .feat small{font-size:12px}
  .h-foot{padding:18px 14px 28px;font-size:12px}
}

/* =====================================================================
   ĐỢT 1 — CÔNG CỤ GIẢNG DẠY · Ô LUYỆN · SUBLINGO
   ===================================================================== */
a.hbtn{text-decoration:none;display:inline-flex;align-items:center}
body.view-study #home,body.view-study #player{display:none}
#study{display:none;min-height:100vh}
body.view-study #study{display:block}
kbd{font:700 10.5px/1 var(--ui);background:var(--ice);color:var(--navy);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 5px}
.hint,.card p.hint{color:var(--muted);font-size:13.5px;line-height:1.5;margin:8px 0 0}
.hint b{color:var(--navy)}

/* thanh bút: 2 cột trên máy tính để đủ chỗ cho công cụ mới */
.pengroup{display:none;grid-template-columns:repeat(2,42px);gap:6px}
body.pen-on .pengroup{display:grid}
.pengroup .sw{margin:5px auto!important}
.pengroup .tool.tx,.tp-grid i.tx{font:900 20px/1 Georgia,serif;color:var(--navy)}
#penW{grid-column:1/3;writing-mode:horizontal-tb;direction:ltr;width:88px;height:24px;margin:2px auto}
body.pen-on.mode-text #ink{cursor:text}
@media (max-height:760px) and (min-height:521px){.pens>button,.pengroup button{width:36px;height:36px;font-size:15px}.pengroup{grid-template-columns:repeat(2,36px);gap:5px;padding:6px}.pengroup .sw{width:26px!important;height:26px!important}#penW{width:76px}}
@media (max-height:520px){body.pen-on .pengroup{display:flex}}

/* chữ gõ & ghi chú vàng trên slide */
#tnotes{position:absolute;inset:0;z-index:37;pointer-events:none}
body.mode-text #tnotes{z-index:42}
.tn{position:absolute;pointer-events:auto;cursor:grab;touch-action:none;line-height:1.25;font-weight:700;font-family:var(--ui);border-radius:10px;padding:2px 6px;white-space:nowrap}
.tn-text{text-shadow:0 0 3px #fff,0 0 6px #fff}
.tn .zh{font-family:var(--cjk)}
.tn ruby{ruby-position:over}
.tn rt{font-family:var(--ui);font-size:.42em;font-weight:600;letter-spacing:.02em;opacity:.9}
body.no-py .tn rt{visibility:hidden}
.tn:hover,.tn.sel{outline:2px dashed rgba(31,111,197,.55);outline-offset:2px}
.tn.drag{cursor:grabbing;opacity:.9}
.tn-sticky{background:#FFF38A;color:#3A3000;white-space:normal;padding:14px 16px 16px;border-radius:4px 4px 18px 4px;box-shadow:0 12px 26px rgba(80,60,0,.28);font-weight:600;border-top:14px solid #FFE14D}
.tn-sticky .tn-c{word-break:break-word}
.tn-ph{opacity:.4;font-style:italic;font-weight:500}
.tn-bar{position:absolute;left:0;bottom:100%;margin-bottom:6px;display:none;gap:3px;background:rgba(7,42,74,.92);padding:4px;border-radius:10px;white-space:nowrap;font-size:13px;z-index:2;text-shadow:none}
.tn:hover .tn-bar,.tn.sel .tn-bar,.tn.editing .tn-bar{display:flex}
.tn-bar button{border:none;background:rgba(255,255,255,.14);color:#fff;min-width:28px;height:26px;border-radius:7px;font:700 13px var(--ui);padding:0 6px;display:grid;place-items:center}
.tn-bar button:hover,.tn-bar button.on{background:var(--yellow);color:var(--navy)}
.tn-bar button i{display:block;width:14px;height:14px;border-radius:50%;border:2px solid #fff}
.tn-rs{position:absolute;right:-10px;bottom:-10px;width:22px;height:22px;border-radius:50%;background:var(--navy);border:3px solid #fff;cursor:ew-resize}
.tn-ed{display:block;font:inherit;color:inherit;background:rgba(255,255,255,.92);border:2px solid var(--yellow-dk);border-radius:8px;padding:4px 8px;resize:none;overflow:hidden;min-width:220px;line-height:1.3;outline:none}
.tn-sticky .tn-ed{width:100%;background:rgba(255,255,255,.5);border-color:#E0B800}

/* màn che · đèn rọi · phóng to */
#curtain{position:absolute;left:0;right:0;bottom:0;top:120px;z-index:55;background:repeating-linear-gradient(135deg,#0D4576 0 22px,#0F4C82 22px 44px);box-shadow:0 -8px 24px rgba(0,0,0,.35);touch-action:none;cursor:ns-resize}
.ct-grip{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:var(--yellow);color:var(--navy);font-weight:800;font-size:16px;padding:8px 22px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.3);white-space:nowrap}
#spot{position:absolute;inset:0;z-index:56;pointer-events:none}
#zoomCatch{position:absolute;inset:0;z-index:57;cursor:zoom-in;touch-action:none}
#stage.zoomed #zoomCatch{cursor:move}
#stage>#slides,#stage>#pins,#stage>#tnotes,#stage>#ink{transform-origin:0 0;transition:transform .25s ease}
#stage.zoomed>#slides,#stage.zoomed>#pins,#stage.zoomed>#tnotes,#stage.zoomed>#ink{transform:var(--zt)}

/* menu công cụ */
.tools-pop{width:360px;right:14px;top:58px}
.tp-sec{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tp-grid button{position:relative;border:1px solid var(--line);background:var(--ice-2);border-radius:12px;padding:9px 4px 7px;font:700 12.5px var(--ui);color:var(--navy);display:flex;flex-direction:column;align-items:center;gap:3px}
.tp-grid button i{font-style:normal;font-size:20px}
.tp-grid button kbd{position:absolute;top:4px;right:4px;font-size:9.5px;padding:1px 4px}
.tp-grid button:hover{background:var(--cream);border-color:var(--yellow-dk)}
.tp-grid button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.edit-chip{background:var(--yellow)!important;color:var(--navy)!important;border-color:var(--yellow)!important;font-weight:800}
.edit-pop{width:330px;right:120px}
.edit-pop .sbtn{align-self:flex-start}

/* hộp thoại: chèn / sửa slide */
.tmodal .mbox{max-height:94vh}
.ins{display:grid;grid-template-columns:220px 1fr;gap:16px;min-height:360px}
.ins-types{display:flex;flex-direction:column;gap:6px}
.ins-types button{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:8px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:8px 10px;font-family:var(--ui)}
.ins-types button i{grid-row:1/3;font-style:normal;font-size:24px;display:grid;place-items:center;font-family:var(--cjk);color:var(--navy)}
.ins-types button b{color:var(--navy);font-size:14.5px}
.ins-types button small{color:var(--muted);font-size:12px}
.ins-types button.on{background:var(--cream);border-color:var(--yellow-dk);box-shadow:0 0 0 2px var(--yellow) inset}
.ins-form{display:flex;flex-direction:column;gap:10px;min-width:0}
.fl{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.fl>span{font-size:12.5px;font-weight:700;color:var(--muted)}
.fl.ok>span{color:var(--ok)}
.fl input,.fl select,.fl textarea,.tmodal textarea{font:15px var(--ui);padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
.fl textarea,#eJson{resize:vertical}
#eJson{font:12.5px/1.45 ui-monospace,Consolas,monospace}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:2px solid var(--sky);border-color:transparent}
.fl-row{display:flex;gap:10px;flex-wrap:wrap}
.tmodal .chk,.st-sec .chk{display:flex;gap:8px;align-items:center;font-size:14.5px;cursor:pointer}
.seg3{display:flex;gap:4px;background:var(--ice);border-radius:999px;padding:4px;flex-wrap:wrap}
.seg3 button{flex:1;border:none;background:transparent;border-radius:999px;padding:7px 12px;font:700 13.5px var(--ui);color:var(--navy);white-space:nowrap}
.seg3 button.on{background:#fff;box-shadow:var(--shadow-s)}
.chips label{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);background:var(--ice-2);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer}
.chips label:has(input:checked){background:var(--cream);border-color:var(--yellow-dk)}
.qblk{border:1px dashed var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.qblk>b{color:var(--navy)}
.ins-prev img{max-width:100%;max-height:180px;border-radius:12px;border:1px solid var(--line)}
.ins-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}
.edf{display:flex;flex-direction:column;gap:12px}
.edf details{border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.edf summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:14px}
.edf details[open] summary{margin-bottom:8px}
.edf details .fl{margin-bottom:8px}
@media (max-width:760px){.ins{grid-template-columns:1fr}.ins-types{flex-direction:row;overflow-x:auto}.ins-types button{flex:none;width:170px}}

/* slide chèn thêm */
.bd-grid{display:grid;gap:8px;justify-content:center;align-content:center;height:100%}
.bd-grid .tzbox{position:relative;background:#fff;border:1.5px solid #E7A79C}
.bd-c{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--cjk-kai);color:var(--navy);line-height:1}
.bd-c.tr{color:#D7DFE8}
.bd-paper{position:absolute;inset:0;border-radius:18px;border:1px solid var(--line);background-color:#fff;overflow:hidden}
.bd-text{padding:22px 30px;font-size:40px;line-height:1.6;color:var(--navy);font-family:var(--cjk)}
.em-box{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#000;box-shadow:var(--shadow)}
.em-box iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.em-box.web{background:#fff;border:1px solid var(--line)}
.em-open{position:absolute;right:12px;bottom:12px;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-s)}
.bd .tip+.em-box,.em-box:has(+.tip){bottom:60px}
.im-box{position:absolute;inset:0 0 50px;display:grid;place-items:center}
.im-box img{max-width:100%;max-height:100%;border-radius:16px;box-shadow:var(--shadow);object-fit:contain}
.im-cap{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:24px;color:var(--navy);font-weight:600}
.tx-box{display:flex;flex-direction:column;gap:6px;max-height:100%;overflow:hidden;padding:6px 10px}
.tx-l .py{font-size:20px;color:var(--blue);font-weight:600}
.tx-l .cn{font-size:38px;line-height:1.35;color:var(--ink)}
.tx-sp{height:14px}

/* gọi tên ngẫu nhiên */
.pk{display:grid;grid-template-columns:1fr 1.2fr;gap:18px}
.pk-used{display:flex;flex-wrap:wrap;gap:4px;font-size:13px;color:var(--muted);margin-top:8px;align-items:center}
.pk-used span{background:var(--ice);color:var(--navy);border-radius:999px;padding:2px 9px;font-weight:600}
.pk-r{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(140deg,var(--navy-dk),var(--navy));border-radius:20px;padding:24px;color:#fff;min-height:300px}
.pk-show{font-size:48px;font-weight:900;text-align:center;line-height:1.15;min-height:60px;word-break:break-word}
.pk-show.done{color:var(--yellow);animation:pkpop .5s}
@keyframes pkpop{40%{transform:scale(1.18)}}
.pk-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pk-num{font-size:13px;color:#AFCBE8}
@media (max-width:760px){.pk{grid-template-columns:1fr}}

/* bảng điểm đội */
.scorebox{position:fixed;top:70px;right:14px;z-index:170;background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(7,42,74,.3);border:1px solid var(--line);min-width:280px;overflow:hidden;user-select:none}
.sc-h{display:flex;align-items:center;gap:4px;background:var(--navy);color:#fff;font-weight:800;font-size:14px;padding:7px 8px 7px 12px;cursor:move;touch-action:none}
.sc-h button{border:none;background:rgba(255,255,255,.15);color:#fff;width:28px;height:28px;border-radius:8px;font-size:15px;font-weight:800}
.sc-t{display:flex;align-items:center;gap:6px;padding:8px 10px;border-left:6px solid var(--c);border-bottom:1px solid var(--line-2)}
.sc-n{flex:1;font-weight:700;font-size:14.5px;color:var(--ink);cursor:text;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.sc-t button{border:1px solid var(--line);background:var(--ice-2);width:32px;height:32px;border-radius:10px;font-size:18px;font-weight:800;color:var(--navy)}
.sc-t button:hover{background:var(--c);color:#fff}
.sc-t .sc-rm{width:22px;height:22px;font-size:11px;border:none;background:none;color:var(--muted)}
.sc-s{min-width:44px;text-align:center;font-size:30px;font-weight:900;color:var(--c);font-variant-numeric:tabular-nums}
.sc-s.bumped{animation:pkpop .45s}

/* mã QR */
.qr{display:flex;flex-direction:column;align-items:center;gap:12px}
.qr-box{width:min(360px,80vw);aspect-ratio:1;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;cursor:zoom-in}
.qr-box svg{width:100%;height:100%}
.qr-url{font-size:12.5px;color:var(--muted);word-break:break-all;text-align:center;max-width:100%}
.qr-acts{display:flex;gap:8px}
#mQR.qr-big .mbox{width:min(96vw,96vh);max-width:none}
#mQR.qr-big .qr-box{width:min(86vw,72vh);cursor:zoom-out}

/* màn hình giảng viên (cửa sổ riêng) */
body.pvw{background:#0B2440;color:#fff;height:100vh;margin:0;display:flex;flex-direction:column;overflow:hidden;font-family:var(--ui)}
.pv-top{display:flex;align-items:center;gap:12px;padding:8px 14px;background:#072A4A}
.pv-top img{width:34px;height:34px;border-radius:9px}
.pv-top b{font-size:16px}
.pv-tm{font-size:15px;color:#AFCBE8}
.pv-tm b{font-size:22px;color:var(--yellow);font-variant-numeric:tabular-nums}
.pv-tm button,.pv-h button{border:none;background:rgba(255,255,255,.14);color:#fff;border-radius:8px;padding:3px 8px;font-size:13px;cursor:pointer}
.pv-clock{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.pv-main{flex:1;display:grid;grid-template-columns:1.75fr 1fr;gap:14px;padding:14px;min-height:0}
.pv-cur,.pv-side{display:flex;flex-direction:column;gap:8px;min-height:0}
.pv-frame{position:relative;width:100%;aspect-ratio:16/9;background:#fff;border-radius:10px;overflow:hidden;flex:none}
.pv-stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;pointer-events:none}
.pv-end{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-weight:700}
.pv-h{font-size:13px;font-weight:800;color:#AFCBE8;text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:8px}
.pv-note{flex:1;overflow:auto;background:#0F3155;border-radius:12px;padding:14px 16px;font-size:20px;line-height:1.55;min-height:80px}
.pv-empty{color:#7F9BB8;font-size:15px}
.pv-nav{display:flex;align-items:center;gap:10px;padding:8px 14px 12px}
.pv-nav button{border:none;background:var(--yellow);color:var(--navy);font-weight:800;font-size:16px;border-radius:999px;padding:9px 20px;cursor:pointer}
.pv-nav #pvBlk,.pv-nav #pvPres{background:rgba(255,255,255,.14);color:#fff}
.pv-nav span{font-weight:700}
.pv-tip{margin:0;padding:0 14px 10px;font-size:12px;color:#7F9BB8}

/* =================== ÔN LUYỆN =================== */
.st-top .st-back{width:42px;height:42px;padding:0;font-size:24px;display:grid;place-items:center;border-radius:50%}
.st-main{max-width:1100px;margin:0 auto;padding:18px max(16px,3vw) 40px;display:flex;flex-direction:column;gap:16px}
.st-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ss{background:linear-gradient(140deg,var(--navy-dk),var(--navy));color:#fff;border-radius:20px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;box-shadow:var(--shadow-s)}
.ss i{grid-row:1/3;font-style:normal;font-size:30px}
.ss b{font-size:28px;font-weight:900;color:var(--yellow);line-height:1}
.ss small{color:#BFD4EA;font-size:13px}
.st-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.st-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--shadow-s);transition:transform .15s,box-shadow .15s}
.st-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.st-card i{font-style:normal;font-size:30px}
.st-card b{font-size:17px;color:var(--navy)}
.st-card small{color:var(--muted);font-size:13.5px;line-height:1.45;flex:1}
.st-card span{align-self:flex-start;background:var(--yellow);color:var(--navy);font-weight:800;font-size:12.5px;border-radius:999px;padding:4px 12px}
.st-sec h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.st-sec h3 small{font-size:13px;color:var(--muted);font-weight:600}
.heat{display:grid;grid-template-rows:repeat(7,14px);grid-auto-flow:column;grid-auto-columns:14px;gap:3px;overflow-x:auto;padding-bottom:4px}
.heat i{border-radius:3px;background:#E6EEF7}
.heat i.h1{background:#BFD9F2}.heat i.h2{background:#7FB2E5}.heat i.h3{background:#3E8AD6}.heat i.h4{background:var(--navy)}
.bdg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bdg{border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center;display:flex;flex-direction:column;gap:3px;filter:grayscale(1);opacity:.55}
.bdg.got{filter:none;opacity:1;background:var(--cream-2);border-color:#F2DD86}
.bdg i{font-style:normal;font-size:30px}
.bdg b{font-size:13.5px;color:var(--navy)}
.bdg small{font-size:11.5px;color:var(--muted)}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.modes button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:12px 10px;text-align:center;display:flex;flex-direction:column;gap:3px;font-family:var(--ui)}
.modes button i{font-style:normal;font-size:24px}
.modes button b{color:var(--navy);font-size:14.5px}
.modes button small{color:var(--muted);font-size:12px}
.modes button.on{background:var(--cream);border-color:var(--yellow-dk);box-shadow:0 0 0 2px var(--yellow) inset}
.decks{display:flex;flex-direction:column;gap:8px}
.deck{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px 14px;text-decoration:none;color:inherit;background:#fff}
.deck:hover{background:var(--ice-2);border-color:#A9C6E6}
.deck b{color:var(--navy);font-size:15.5px}
.deck small{display:block;color:var(--muted);font-size:12.5px}
.dk-n{display:flex;gap:6px}
.dk-n span{min-width:34px;text-align:center;border-radius:999px;padding:3px 8px;font-weight:800;font-size:13px}
.dk-n .due{background:#FDECEC;color:var(--bad)}.dk-n .new{background:var(--ice);color:var(--blue)}.dk-n .lrn{background:var(--ok-bg);color:var(--ok)}
.dk-bar{grid-column:1/3;height:5px;border-radius:5px;background:var(--line-2);overflow:hidden}
.dk-bar i{display:block;height:100%;background:var(--ok)}
.srs,.drill{max-width:760px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.srs-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);font-weight:600}
.srs-top select{font:600 13px var(--ui);border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--navy);background:#fff}
.srs-bar{flex:1;min-width:120px;height:8px;border-radius:8px;background:var(--line-2);overflow:hidden}
.srs-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--sky));transition:width .3s}
.tg{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800}
.tg.new{background:var(--ice);color:var(--blue)}.tg.lrn{background:var(--cream);color:#9A7400}.tg.rev{background:var(--ok-bg);color:var(--ok)}
.srs-card{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 20px;gap:10px;text-align:center}
.fc-front,.fc-back{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.fc-back{border-top:2px dashed var(--line);padding-top:14px;margin-top:4px}
.fc-zh{font-size:84px;font-weight:700;color:var(--navy);line-height:1.1}
.fc-zh.sm{font-size:52px}
.fc-zh .zh{cursor:pointer}
.fc-py{font-size:30px;color:var(--blue);font-weight:700}
.fc-hv{background:var(--navy);color:var(--yellow);font-weight:800;letter-spacing:1px;border-radius:999px;padding:3px 14px;font-size:14px}
.fc-vi{font-size:30px;font-weight:700;color:var(--ink);line-height:1.35}
.fc-vi.sm{font-size:21px;font-weight:600;color:var(--muted)}
.fc-hint{color:var(--muted);font-size:14px}
.fc-say{width:96px;height:96px;border-radius:50%;border:none;background:var(--navy);color:#fff;font-size:42px;box-shadow:var(--shadow)}
.fc-say.sm{width:44px;height:44px;font-size:20px}
.fc-say:hover{background:var(--blue)}
.fc-type{display:flex;gap:8px;width:100%;max-width:480px}
.fc-type input{flex:1;font:600 20px var(--ui);padding:12px 14px;border:2px solid var(--line);border-radius:14px;text-align:center}
.fc-type input:focus{outline:none;border-color:var(--sky)}
.fc-res{min-height:24px;font-weight:700;font-size:16px}
.c-ok{color:var(--ok)}.c-no{color:var(--bad)}.c-mid{color:#B07B00}
.fc-tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.srs-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.srs-acts .btn.big{grid-column:1/5;padding:16px;font-size:18px}
.srs-acts .btn kbd{margin-left:8px;vertical-align:2px}
.gr{position:relative;border:none;border-radius:16px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font-family:var(--ui);box-shadow:var(--shadow-s)}
.gr b{font-size:17px}.gr small{font-size:12px;opacity:.9}
.gr kbd{position:absolute;top:5px;right:6px;background:rgba(255,255,255,.25);color:#fff;border-color:transparent;font-size:9.5px}
.gr.g1{background:#D64545}.gr.g2{background:#E08A00}.gr.g3{background:#1E9E5A}.gr.g4{background:#1F6FC5}
.gr.sug{outline:4px solid var(--yellow);outline-offset:2px}
.srs-done{text-align:center;padding:30px 10px;display:flex;flex-direction:column;align-items:center;gap:10px}
.srs-done .big{font-size:64px}
.srs-done h2{margin:0;color:var(--navy)}
.srs-done p{margin:0;color:var(--muted)}
.srs-done .btn{text-decoration:none;display:inline-block}
.dr-q{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)}
.dr-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dr-opts button{position:relative;border:2px solid var(--line);background:#fff;border-radius:18px;padding:16px 10px;font-family:var(--ui);display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--navy);box-shadow:var(--shadow-s)}
.dr-opts button b{font-size:24px}
.dr-opts.zh-opts button b{font-size:32px;font-family:var(--cjk)}
.dr-opts button small{color:var(--muted);font-weight:700}
.dr-opts button kbd{position:absolute;top:6px;right:8px}
.dr-opts button .k{position:absolute;top:8px;left:10px;font-weight:900;color:var(--muted);font-size:13px}
.dr-opts button:hover:not(:disabled){border-color:var(--sky);background:var(--ice-2)}
.dr-opts button.right{border-color:var(--ok);background:var(--ok-bg)}
.dr-opts button.wrong{border-color:var(--bad);background:var(--bad-bg)}
.dr-opts button:disabled{cursor:default}
.dr-fb{min-height:40px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-weight:700;font-size:16px}
.dr-fb .cn{font-size:20px}
.dr-fb .fb-ex{font-weight:500;color:var(--ink)}
.tones{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tone{border:1px solid var(--line);background:#fff;border-radius:18px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--ui)}
.tone:hover{background:var(--ice-2)}
.tone-svg{width:100%;max-width:120px;height:64px}
.tone b{font-size:26px;color:var(--navy)}
.tone .cn{font-size:28px}
.tone small{color:var(--muted);font-size:12px}
.ptab{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.ptab button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;font-family:var(--ui)}
.ptab button:hover{background:var(--cream);border-color:var(--yellow-dk)}
.ptab b{font-size:19px;color:var(--navy)}
.ptab .cn{font-size:20px}
.ptab small{font-size:11.5px;color:var(--muted)}
.test .tq{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 0 6px;text-align:center}
.tq-t{font-size:22px;font-weight:700;color:var(--ink);line-height:1.45}
.tq-t .zh{font-weight:700;color:var(--navy)}
.t-clock{background:var(--navy);color:#fff;border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
.t-clock.warn{background:var(--bad)}
.thist{width:100%;border-collapse:collapse;font-size:14px}
.thist th,.thist td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line-2)}
.thist th{color:var(--muted);font-size:12.5px}
.t-wrong{margin:6px 0 0;padding-left:22px;line-height:1.6;font-size:15px}
.t-wrong li{margin-bottom:8px}
.t-wrong .zh{color:var(--navy)}
.sl-hero{background:linear-gradient(120deg,#0B2C4E,var(--navy) 55%,#2C7FD0);color:#fff;border-radius:26px;padding:26px 30px;box-shadow:var(--shadow)}
.sl-hero h1{margin:10px 0 6px;font-size:32px}
.sl-hero p{margin:0;max-width:720px;color:#D4E4F5;line-height:1.55}
.sl-ver{margin-top:12px;font-size:13px;color:var(--yellow);font-weight:700}
.sl-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sl-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sl-app{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-s)}
.sl-app i{font-style:normal;font-size:30px}
.sl-app b{color:var(--navy);font-size:16px}
.sl-app small{color:var(--muted);font-size:13.5px;line-height:1.45;flex:1}
.sl-app .btn{text-decoration:none;align-self:flex-start;font-size:14px;padding:9px 16px}
.sl-na{font-size:12.5px;color:var(--muted);background:var(--ice-2);border:1px dashed var(--line);border-radius:12px;padding:8px 10px}
.sl-ls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sl-steps{margin:10px 0 0;padding-left:22px;line-height:1.65;font-size:14.5px}
.sl-steps code{background:var(--ice);border-radius:6px;padding:1px 6px;font-size:13px}
.st-sec .btn{margin-top:10px}
#tSetup .fl-row{margin:12px 0}
#tSetup .fl{max-width:220px}

/* trang chủ: mục ôn luyện + SubLingo */
#homeStudy{margin:24px max(20px,4vw) 0}
.hs-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hs-h h2{margin:0;font-size:24px;color:var(--navy)}
.hs-streak{background:var(--cream);border:1px solid #F2DD86;color:#8A6200;font-weight:800;border-radius:999px;padding:4px 12px;font-size:14px}
.hs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hs-it{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;text-decoration:none;color:inherit;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;box-shadow:var(--shadow-s)}
.hs-it:hover{background:var(--ice-2)}
.hs-it i{grid-row:1/3;font-style:normal;font-size:28px}
.hs-it b{color:var(--navy);font-size:15.5px}
.hs-it small{color:var(--muted);font-size:12.5px}
.hs-it small em{font-style:normal;color:var(--bad);font-weight:800}
.hs-sub{margin-top:12px;display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#0B2C4E,var(--navy));color:#fff;border-radius:18px;padding:14px 18px;text-decoration:none;box-shadow:var(--shadow-s)}
.hs-sub i{font-style:normal;font-size:30px}
.hs-sub div{flex:1;font-size:14.5px;line-height:1.45;color:#D4E4F5}
.hs-sub b{color:#fff;font-size:16px}
.hs-sub small{display:block;color:#9FC0E2;font-size:12.5px}
.hs-sub span{background:var(--yellow);color:var(--navy);font-weight:800;border-radius:999px;padding:6px 14px;font-size:13.5px;white-space:nowrap}

@media (max-width:860px){.st-stats{grid-template-columns:1fr 1fr}.modes{grid-template-columns:1fr 1fr}.sl-feats{grid-template-columns:1fr 1fr}.sl-apps{grid-template-columns:1fr}.hs-grid{grid-template-columns:1fr 1fr}.tones{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
  #home #homeStudy{order:2;margin:18px 12px 0}
  .hs-h h2{font-size:20px}
  .hs-grid{gap:8px}
  .hs-it{padding:10px 12px;column-gap:8px}
  .hs-it i{font-size:22px}
  .hs-it b{font-size:14px}
  .hs-sub{padding:12px 14px;gap:10px}
  .hs-sub div{font-size:13px}
  .hs-sub small{display:none}
  .st-top .h-brand small{display:none}
  .st-top .hbtn{padding:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative}
  .st-top .hbtn .lb{display:none}
  .st-top .hbtn .badge{position:absolute;right:-4px;top:-4px;margin:0}
  .st-main{padding:12px 12px 30px;gap:12px}
  .ss{padding:10px 12px}.ss b{font-size:22px}.ss i{font-size:24px}
  .fc-zh{font-size:64px}.fc-vi{font-size:24px}
  .srs-card{min-height:260px;padding:18px 12px}
  .gr{padding:10px 2px}.gr b{font-size:15px}
  .sl-hero{padding:18px}.sl-hero h1{font-size:24px}
  .tools-pop{right:6px;left:6px;width:auto;top:52px}
  .edit-pop{right:6px;left:6px;width:auto}
}
@media (max-height:520px){.tools-pop{top:44px;max-height:calc(var(--app-h,100vh) - 54px);overflow:auto}.tp-grid{grid-template-columns:repeat(6,1fr)}.tp-grid button{font-size:10.5px;padding:6px 2px}.tp-grid button kbd{display:none}.tools-pop{width:min(620px,96vw)}}
@media print{#tnotes .tn-bar,#curtain,#spot,#zoomCatch,.scorebox{display:none}}