/* Cổng học Ngọc Tỉnh — full-screen learning portal.
   Layout: mobile-first app shell (top bar + bottom tabs); left rail from 960px. Study and test screens run in focus mode without navigation. */
:root{
  --navy:#003d82; --navy-2:#0b4f9e; --navy-deep:#012453; --orange:#fb8f2c; --orange-2:#ff9f45; --orange-ink:#3a1c00;
  --bg:#f2f5fa; --surface:#ffffff; --surface-2:#eaf0f8; --surface-3:#f7f9fc; --line:#dbe3ee; --ink:#12223a; --muted:#5b6a83; --faint:#8c99ae;
  --ok:#14995a; --ok-bg:#e2f6ec; --bad:#d23b2f; --bad-bg:#fde8e6; --warn:#b06200; --warn-bg:#fff2de;
  --mark:#ffe2c2; --mark-ink:#5a2700; --gold:#f2a51a;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --r:16px; --r-lg:22px; --shadow:0 1px 2px rgba(1,36,83,.06),0 6px 20px rgba(1,36,83,.06);
  --tabbar:64px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--navy)}
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0;line-height:1.25;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
mark{background:var(--mark);color:var(--mark-ink);border-radius:5px;padding:0 3px;font-weight:600}
.serif{font-family:var(--serif)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.boot{min-height:100vh;display:grid;place-items:center;background:var(--navy)}
.boot-mark{width:64px;height:64px;border-radius:18px;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;font-weight:800;font-size:22px;letter-spacing:-.02em;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.92);opacity:.8}}

/* ---------- shell ---------- */
.shell{min-height:100vh;padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom,0px))}
.topbar{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;padding-top:env(safe-area-inset-top,0px)}
.topbar-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:12px;height:58px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-width:0}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-txt b{display:block;font-weight:700;font-size:15px;white-space:nowrap;line-height:1.2}
.brand-txt span{font-size:12px;opacity:.75;display:block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt{min-width:0}
.top-stats{margin-left:auto;display:flex;gap:8px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.12);font-weight:700;font-size:14px;white-space:nowrap}
.pill svg{width:16px;height:16px}
.pill.flame{color:#ffd29e}
.main{max-width:1120px;margin:0 auto;padding:18px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
.tab{flex:1;max-width:120px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;color:var(--faint);font-size:11.5px;font-weight:600;text-decoration:none}
.tab svg{width:24px;height:24px}
.tab.on{color:var(--navy)}
.tab.on .tab-ic{background:var(--surface-2)}
.tab-ic{display:grid;place-items:center;width:52px;height:30px;border-radius:99px}
@media (min-width:960px){
  .shell{padding-bottom:0;padding-left:220px}
  .topbar{margin-left:-220px;padding-left:0}
  .tabbar{top:58px;bottom:0;right:auto;width:220px;flex-direction:column;justify-content:flex-start;gap:4px;border-top:0;border-right:1px solid var(--line);padding:16px 12px}
  .tab{flex:none;max-width:none;flex-direction:row;gap:12px;font-size:15px;padding:10px 12px;color:var(--muted)}
  .tab-ic{width:auto;height:auto;background:none!important}
  .tab.on{background:var(--surface-2)}
}

/* ---------- generic ---------- */
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;align-items:center}
.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:860px){.grid2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);min-width:0}
.card h3{font-size:17px;font-weight:700}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:14px;padding:12px 18px;font-weight:700;font-size:16px;min-height:48px;text-decoration:none;transition:transform .08s ease,background .15s}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px}
.btn-primary{background:var(--orange);color:var(--orange-ink);box-shadow:0 3px 0 #d87412}
.btn-primary:hover{background:var(--orange-2)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 3px 0 var(--navy-deep)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-quiet{background:none;color:var(--navy);padding:8px 10px;min-height:0}
.btn-danger{background:var(--surface);border-color:#f2c3bf;color:var(--bad)}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:7px 12px;font-size:14px;border-radius:10px;box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 12px;font-size:14px;font-weight:600;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap}
.t-word{background:#e4edfb;color:#163c74} .t-colloc{background:#ffeedd;color:#7a3b00} .t-phrasal{background:#e1f4ea;color:#155c38} .t-expr{background:#efe7fb;color:#4b2a86}
.st{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.st-new{background:var(--surface-2);color:var(--muted)} .st-learn{background:#e4edfb;color:#163c74} .st-good{background:var(--ok-bg);color:var(--ok)} .st-done{background:var(--ok);color:#fff} .st-weak{background:var(--bad-bg);color:var(--bad)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:14px}
.input,.select,textarea.input{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;font-size:16px;min-height:48px}
.input:focus,.select:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(0,61,130,.15)}
.hint{font-size:13px;color:var(--muted)}
.err{background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:10px 14px;font-weight:600;font-size:14px}
.okmsg{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:10px 14px;font-weight:600;font-size:14px}
.okmsg svg,.err svg{width:18px;height:18px;vertical-align:-3px;display:inline-block}
.empty{padding:28px 12px;text-align:center;color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--navy)}
.bar.ok i{background:var(--ok)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.li:last-child{border-bottom:0}
.li-main{flex:1;min-width:0}
.li-main b{display:block;font-weight:700}
.li-main span{display:block;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
svg.chev{width:18px;height:18px;color:var(--faint);flex:none}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar) + 20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;z-index:90;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.back{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--navy);text-decoration:none;font-size:15px;background:none;border:0;padding:4px 0}
.back svg{width:18px;height:18px}
.page-title{font-size:24px;font-weight:800;letter-spacing:-.01em}
.tbl{overflow-x:auto;margin:0 -6px}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700}
td{padding:10px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer} tr.click:hover td{background:var(--surface-3)}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.login-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:calc(36px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 88px max(20px,env(safe-area-inset-left,0px));position:relative;overflow:hidden}
.login-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:34px solid rgba(251,143,44,.22)}
.login-hero .brand-mark{width:48px;height:48px;border-radius:14px;font-size:16px}
.login-hero h1{font-size:30px;font-weight:800;margin-top:22px;letter-spacing:-.02em;max-width:14ch}
.login-hero p{opacity:.85;margin-top:8px;max-width:36ch}
.login-card{margin:-56px auto 0;width:min(440px,calc(100% - 32px));position:relative;z-index:2}
.pw{position:relative}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:13px;font-weight:700;padding:8px}
.check{display:flex;align-items:center;gap:10px;font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--navy)}
.login-foot{text-align:center;margin:20px auto 32px;color:var(--muted);font-size:14px;max-width:440px;padding:0 16px}

/* ---------- home ---------- */
.hero{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;border-radius:var(--r-lg);padding:20px;display:flex;gap:16px;align-items:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:-40px;bottom:-70px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.05)}
.hero h2{font-size:22px;font-weight:800}
.hero .sub{opacity:.85;font-size:14px;margin-top:4px}
.ring{width:96px;height:96px;flex:none;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .ring-val{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.ring .ring-val b{font-size:22px;font-weight:800;display:block}
.ring .ring-val span{font-size:11px;opacity:.85}
.streak{display:flex;align-items:center;gap:8px;margin-top:12px}
.streak .fl{width:34px;height:34px;border-radius:10px;background:rgba(251,143,44,.2);display:grid;place-items:center;color:var(--orange)}
.streak .fl svg{width:20px;height:20px}
.streak b{font-size:18px}
.go-card{display:flex;flex-direction:column;gap:14px}
.go-top{display:flex;gap:14px;align-items:center}
.go-num{font-size:44px;font-weight:800;line-height:1;color:var(--navy);letter-spacing:-.03em}
.go-sub{font-size:14px;color:var(--muted)}
.mini-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.banner{text-decoration:none;color:inherit;display:flex;gap:12px;align-items:center;border-radius:var(--r);padding:14px;background:var(--warn-bg);border:1px solid #f6d3a5}
.banner .ic{width:40px;height:40px;border-radius:12px;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;flex:none}
.banner .ic svg{width:22px;height:22px}
.week{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:8px}
.week .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.week .col i{display:block;width:100%;max-width:34px;border-radius:8px 8px 4px 4px;background:var(--surface-2);min-height:4px}
.week .col.hit i{background:var(--navy)}
.week .col.today i{background:var(--orange)}
.week .col span{font-size:12px;color:var(--muted);font-weight:600}
.week .col em{font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.goal-line{position:relative}
.rank{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:12px}
.rank.me{background:var(--warn-bg)}
.rank .pos{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--surface-2);color:var(--muted);flex:none}
.rank .pos.p1{background:#ffd56b;color:#5a3d00} .rank .pos.p2{background:#d9e1ec;color:#33435c} .rank .pos.p3{background:#f3c09b;color:#5c2c06}
.rank .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .xp{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.setrow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.setrow:last-child{border-bottom:0}
.setrow .bk{width:44px;height:44px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;font-weight:800;color:var(--navy);font-size:13px;flex:none;line-height:1.05;text-align:center}
.setrow .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.setrow .mid b{font-size:15px}
.setrow .mid .bar{height:6px}
.setrow .ct{font-size:13px;color:var(--muted);white-space:nowrap}

/* ---------- study (focus mode) ---------- */
.focus{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.focus-top{position:sticky;top:0;z-index:10;background:var(--bg);padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.focus-top-in{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:12px}
.x{width:40px;height:40px;border-radius:12px;border:0;background:var(--surface);display:grid;place-items:center;color:var(--muted);flex:none;box-shadow:var(--shadow)}
.x svg{width:20px;height:20px}
.prog{flex:1;height:12px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--orange-2));border-radius:99px;transition:width .35s ease}
.xpbox{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;font-size:15px;display:flex;align-items:center;gap:4px;min-width:62px;justify-content:flex-end}
.xpbox svg{width:16px;height:16px;color:var(--gold)}
.combo{font-size:12px;font-weight:800;color:var(--orange);background:var(--warn-bg);border-radius:99px;padding:3px 8px;white-space:nowrap}
.focus-body{flex:1;width:100%;max-width:680px;margin:0 auto;padding:6px max(16px,env(safe-area-inset-right,0px)) 140px max(16px,env(safe-area-inset-left,0px))}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;animation:rise .25s ease}
@keyframes rise{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}
.qlabel{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.qlabel .dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.qlabel.new{color:var(--orange)}
.term{font-size:clamp(28px,7vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--navy)}
.term-row{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.ipa{font-family:var(--serif);color:var(--muted);font-size:17px;margin-top:2px}
.say{width:44px;height:44px;border-radius:50%;border:0;background:var(--surface-2);color:var(--navy);display:grid;place-items:center;flex:none}
.say svg{width:22px;height:22px}
.say.sm{width:34px;height:34px}
.say.sm svg{width:17px;height:17px}
.say.on{background:var(--navy);color:#fff}
.vi{font-size:18px;font-weight:600}
.scene{border-radius:var(--r);background:var(--surface-3);border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.scene-cap{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:15px}
.scene-cap svg{width:22px;height:22px;color:var(--orange);flex:none;margin-top:1px}
.ex{font-family:var(--serif);font-size:20px;line-height:1.55;color:var(--ink)}
.ex-row{display:flex;gap:10px;align-items:flex-start}
.ex-row .ex{flex:1}
.trap{border-radius:var(--r);background:var(--warn-bg);padding:12px 14px;font-size:15px;display:flex;gap:10px}
.trap svg{width:20px;height:20px;color:var(--warn);flex:none;margin-top:2px}
.trap s{color:var(--bad);text-decoration-thickness:2px}
.src{border-left:4px solid var(--navy);padding:2px 0 2px 14px;display:flex;flex-direction:column;gap:6px}
.src.new{border-left-color:var(--orange)}
.src .ex{font-size:19px}
.ref{font-size:13px;color:var(--muted);font-weight:500}
.q{font-weight:700;font-size:17px}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:14px 16px;font-size:17px;font-weight:500;line-height:1.4;box-shadow:0 2px 0 var(--line);transition:border-color .12s,background .12s,transform .08s}
.opt:hover:not(:disabled){border-color:#9db6d8}
.opt:active:not(:disabled){transform:translateY(1px);box-shadow:none}
.opt .k{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--muted);flex:none}
.opt.sel{border-color:var(--navy);background:#eef4fc}
.opt.sel .k{background:var(--navy);border-color:var(--navy);color:#fff}
.opt.right{border-color:var(--ok);background:var(--ok-bg);box-shadow:0 2px 0 #9fdcbc}
.opt.right .k{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);box-shadow:0 2px 0 #f2b6b1;animation:shake .3s}
.opt.wrong .k{background:var(--bad);border-color:var(--bad);color:#fff}
.opt:disabled{cursor:default}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.blank{display:inline-block;min-width:96px;border-bottom:3px solid var(--orange);margin:0 3px;transform:translateY(-3px)}
.typein{display:flex;flex-direction:column;gap:10px}
.typein .input{font-size:20px;font-weight:600;text-align:center;min-height:58px;border-width:2px;border-radius:16px}
.typein .input.right{border-color:var(--ok);background:var(--ok-bg)}
.typein .input.wrong{border-color:var(--bad);background:var(--bad-bg)}
.hintline{font-family:var(--serif);text-align:center;font-size:20px;letter-spacing:.2em;color:var(--muted)}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(242,245,250,0),var(--bg) 30%)}
.dock-in{max-width:680px;margin:0 auto;display:flex;gap:10px}
.dock-in .btn{flex:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;border-radius:24px 24px 0 0;padding:18px max(18px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));animation:up .22s ease;box-shadow:0 -10px 30px rgba(1,36,83,.12)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet-in{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.sheet.ok{background:#dff5e9} .sheet.no{background:#fde6e3}
.sheet .verdict{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800}
.sheet.ok .verdict{color:var(--ok)} .sheet.no .verdict{color:var(--bad)}
.verdict .vi-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff}
.sheet.ok .vi-ic{background:var(--ok)} .sheet.no .vi-ic{background:var(--bad)}
.vi-ic svg{width:20px;height:20px}
.sheet .gain{margin-left:auto;font-size:15px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:4px}
.sheet .gain svg{width:16px;height:16px;color:var(--gold)}
.sheet .ex{font-size:17px}
.sheet .btn{width:100%}
.sheet .btn-ok{background:var(--ok);color:#fff;box-shadow:0 3px 0 #0d6e40}
.sheet .btn-no{background:var(--bad);color:#fff;box-shadow:0 3px 0 #9e2a21}
.autobar{height:3px;border-radius:2px;background:rgba(0,0,0,.08);overflow:hidden;margin-top:-4px}
.autobar i{display:block;height:100%;width:100%;background:var(--ok);transform-origin:left;animation:drain 1.6s linear forwards}
@keyframes drain{to{transform:scaleX(0)}}
.done-hero{text-align:center;padding:24px 10px 6px;display:flex;flex-direction:column;align-items:center;gap:8px}
.done-badge{width:92px;height:92px;border-radius:28px;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;box-shadow:0 6px 0 #d87412;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.done-badge svg{width:46px;height:46px}
@keyframes pop{from{transform:scale(.4) rotate(-12deg)}to{transform:none}}
.done-hero h2{font-size:26px;font-weight:800;margin-top:10px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;text-align:center}
.kpi b{display:block;font-size:24px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.2}
.kpi span{font-size:12.5px;color:var(--muted)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:fall 1.8s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}

/* ---------- tests ---------- */
.tcard{display:flex;flex-direction:column;gap:10px}
.tmeta{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.timer{font-weight:800;font-variant-numeric:tabular-nums;font-size:17px;padding:6px 12px;border-radius:99px;background:var(--surface);box-shadow:var(--shadow);color:var(--navy);display:flex;align-items:center;gap:6px}
.timer svg{width:16px;height:16px}
.timer.low{background:var(--warn-bg);color:var(--warn)} .timer.crit{background:var(--bad);color:#fff}
.qnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:8px}
.qnav button{height:42px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;font-variant-numeric:tabular-nums}
.qnav button.ans{background:var(--surface-2);border-color:#b9cbe4;color:var(--navy)}
.qnav button.cur{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.score-big{font-size:56px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em}
.review{display:flex;flex-direction:column;gap:10px}
.rv{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.rv.ok{border-left:5px solid var(--ok)} .rv.no{border-left:5px solid var(--bad)}
.rv .ex{font-size:16.5px}

/* ---------- words ---------- */
.search{position:relative}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--faint)}
.search .input{padding-left:44px}
.wrow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left}
.wrow .w{flex:1;min-width:0}
.wrow .w b{display:block;font-weight:700;color:var(--navy)}
.wrow .w span{display:block;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.overlay{position:fixed;inset:0;background:rgba(1,24,56,.45);z-index:70;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:var(--bg);width:min(680px,100%);max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:up .22s ease}
@media (min-width:760px){.overlay{align-items:center}.modal{border-radius:24px;max-height:86vh}}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

/* ---------- teacher ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:860px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.tile b{display:block;font-size:26px;font-weight:800;color:var(--navy);line-height:1.2;font-variant-numeric:tabular-nums}
.tile span{font-size:13px;color:var(--muted)}
.days7{display:flex;gap:3px}
.days7 i{width:11px;height:11px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line)}
.days7 i.on{background:var(--navy);border-color:var(--navy)}
.alert{background:var(--warn-bg);border-radius:12px;padding:10px 12px;font-size:14px;width:100%;text-align:left;border:0}
.alert b{color:var(--warn)}
.hard{display:flex;flex-direction:column;gap:4px;padding:10px 4px;border-bottom:1px solid var(--line);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0}
.hard:last-child{border-bottom:0}
.hard .hr{display:flex;justify-content:space-between;gap:8px}
.hard .bar i{background:var(--bad)}
.hist{display:flex;flex-wrap:wrap;gap:3px}
.hist span{font-size:11px;padding:1px 6px;border-radius:5px;background:var(--ok-bg);color:var(--ok);white-space:nowrap;font-weight:600}
.hist span.x{background:var(--bad-bg);color:var(--bad)} .hist span.l{background:var(--surface-2);color:var(--muted)}
.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px;overflow-x:auto}
.seg button{flex:1;border:0;background:none;border-radius:9px;padding:8px 12px;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--navy);box-shadow:var(--shadow)}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer}
.switch input{appearance:none;width:46px;height:28px;border-radius:99px;background:var(--line);position:relative;transition:background .15s;flex:none;cursor:pointer;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.switch input:checked{background:var(--ok)}
.switch input:checked::after{transform:translateX(18px)}
.books{display:flex;flex-direction:column;gap:12px}
.book{border:1px solid var(--line);border-radius:var(--r);padding:12px}
.book-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.book-sets{display:flex;flex-wrap:wrap;gap:8px}
.creds{background:var(--surface-3);border:1.5px dashed var(--orange);border-radius:var(--r);padding:14px}
.creds pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;white-space:pre-wrap;margin:8px 0;background:var(--surface);border-radius:10px;padding:10px;border:1px solid var(--line)}
.lib-item{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.lib-item .ex{font-size:16px}
.cols2{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:760px){.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.more{width:100%;margin-top:6px}
.hard .bar.ok i{background:var(--ok)}

/* =================== Xưởng bài tập =================== */
:root{--g0:#fb8f2c;--g0b:#fff1e3;--g1:#003d82;--g1b:#e6eef9;--g2:#14995a;--g2b:#e2f6ec;--g3:#7a4cc2;--g3b:#f0e9fb;--g4:#d23b2f;--g4b:#fde8e6;--g5:#0f8a96;--g5b:#e0f4f6}
.g0{--gc:var(--g0);--gb:var(--g0b)} .g1{--gc:var(--g1);--gb:var(--g1b)} .g2{--gc:var(--g2);--gb:var(--g2b)} .g3{--gc:var(--g3);--gb:var(--g3b)} .g4{--gc:var(--g4);--gb:var(--g4b)} .g5{--gc:var(--g5);--gb:var(--g5b)}
.mode-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--g1b);color:var(--navy);margin-bottom:4px}
.mode-tag.test{background:var(--g0b);color:#a24e00}
.acard{text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
.acard:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(1,36,83,.06),0 12px 28px rgba(1,36,83,.1)}
.acard h3{font-size:17px}
.star{color:var(--gold);display:inline-flex;vertical-align:-3px;margin-right:4px} .star svg{width:18px;height:18px}
.tchips{display:flex;gap:4px;flex-wrap:wrap}
.tchip{width:28px;height:28px;border-radius:8px;background:var(--surface-2);color:var(--navy);display:grid;place-items:center}
.tchip svg{width:16px;height:16px}
.warnc{color:var(--warn);font-weight:600}
.note{display:flex;gap:10px;background:var(--surface-3);border:1px dashed var(--line);border-radius:14px;padding:12px 14px;font-size:15px}
.note svg{width:20px;height:20px;color:var(--navy);flex:none;margin-top:2px}
.li-ic{width:16px;height:16px;vertical-align:-3px;margin-right:6px;color:var(--navy)}
.cols-2,.cols-3{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:640px){.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* editor */
.ed{max-width:860px}
.eblk{display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--orange)}
.eblk-h{display:flex;align-items:center;gap:8px}
.eblk-h .sp{flex:1}
.eblk-n{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.blk-type{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.blk-type svg{width:16px;height:16px}
.ib{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--muted);flex:none;padding:0}
.ib svg{width:18px;height:18px}
.ib:hover:not(:disabled){border-color:#9db6d8;color:var(--navy)}
.ib:disabled{opacity:.35;cursor:default}
.ib.danger:hover{border-color:#f2c3bf;color:var(--bad)}
.erows{display:flex;flex-direction:column;gap:10px}
.erow{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-3)}
.erow-n{width:24px;height:24px;border-radius:7px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none;margin-top:12px}
.erow-n.g0,.erow-n.g1,.erow-n.g2,.erow-n.g3,.erow-n.g4{background:var(--gc)}
.erow-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.erow .ib{margin-top:6px}
.input.sm{min-height:40px;padding:8px 12px;font-size:14px}
.input.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;line-height:1.6}
.input.serif,.serif.input{font-family:var(--serif);font-size:16px;line-height:1.6}
textarea.input{resize:vertical;line-height:1.5}
.eopts{display:flex;flex-direction:column;gap:6px}
.eopt{display:flex;gap:8px;align-items:center}
.cor{display:grid;place-items:center;cursor:pointer;flex:none}
.cor input{position:absolute;opacity:0;width:1px;height:1px}
.cor span{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;font-weight:800;color:var(--muted)}
.cor input:checked+span{background:var(--ok);border-color:var(--ok);color:#fff}
.cor input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.tf-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px}
details.more{border-top:1px dashed var(--line);padding-top:10px}
details.more summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--navy)}
.etools{gap:6px}
.addblk{border-style:dashed;border-width:2px;min-height:56px;color:var(--navy)}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tpick{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;transition:border-color .12s,transform .12s}
.tpick:hover{border-color:var(--orange);transform:translateY(-2px)}
.tpick b{font-size:15px;line-height:1.3}
.tpick span:last-child{font-size:13px;color:var(--muted);line-height:1.4}
.tpick-ic{width:40px;height:40px;border-radius:12px;background:var(--g0b);color:#c25d00;display:grid;place-items:center}
.tpick-ic svg{width:22px;height:22px}
.modal.wide{width:min(900px,100%)}

/* player & review blocks */
.act-body{max-width:760px}
.act-focus .focus-top-in,.act-focus .dock-in{max-width:760px}
.act-title{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.blk-dots{display:flex;gap:6px;flex-wrap:wrap}
.blk-dots button{min-width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-weight:800;font-size:13px;color:var(--muted);padding:0 8px}
.blk-dots button.full{border-color:#9db6d8;color:var(--navy)}
.blk-dots button.chk{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.blk-dots button.cur{background:var(--navy);border-color:var(--navy);color:#fff}
.blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;animation:rise .25s ease;min-width:0}
.blk-head{display:flex;flex-direction:column;gap:6px}
.blk-head h3{font-size:19px;line-height:1.4}
.blk-img{max-width:100%;border-radius:14px;border:1px solid var(--line)}
.blk-audio{width:100%}
.blk-yt{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000}
.blk-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.passage{background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:17px;line-height:1.7;max-height:52vh;overflow:auto}
.passage p{margin:0 0 10px} .passage p:last-child{margin:0}
.aq,.oq{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.blk .aq:first-of-type,.blk .oq:first-of-type{border-top:0;padding-top:0}
.aq-q{display:flex;gap:10px;align-items:flex-start;font-size:17px;line-height:1.5}
.aq-n{width:26px;height:26px;border-radius:8px;background:var(--surface-2);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;margin-top:1px}
.aq.ok .aq-n,.oq.ok .aq-n,.mrow.ok .aq-n{background:var(--ok);color:#fff}
.aq.no .aq-n,.oq.no .aq-n,.mrow.no .aq-n{background:var(--bad);color:#fff}
.aq.wait .aq-n{background:var(--warn-bg);color:var(--warn)}
.blk .opt{font-size:16px;padding:12px 14px}
.fb{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;padding:8px 12px;border-radius:10px}
.fb svg{width:16px;height:16px;flex:none}
.fb.ok{background:var(--ok-bg);color:var(--ok)}
.fb.no{background:var(--bad-bg);color:#9c2219}
.fb.no b{color:var(--ink)}
.fb.wait{background:var(--warn-bg);color:var(--warn)}
.fb-ex{font-size:14px;color:var(--muted);padding:0 12px}
.mk{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.explain{display:flex;gap:10px;background:#fff8ee;border:1px solid #f6d3a5;border-radius:14px;padding:12px 14px;font-size:15px}
.explain svg{width:22px;height:22px;color:#c25d00;flex:none}
/* gap fill */
.bank{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-radius:14px;background:var(--surface-2);position:sticky;top:64px;z-index:2}
.wchip{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 12px;font-weight:600;font-size:15px;box-shadow:0 2px 0 var(--line)}
.wchip.used{opacity:.4;text-decoration:line-through;box-shadow:none}
.gaptext{font-family:var(--serif);font-size:18px;line-height:2.3}
.gwrap{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.gnum{font-family:var(--sans);font-size:11px;font-weight:800;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:1px 5px;line-height:1.4}
.gin{font-family:var(--sans);font-size:16px;border:0;border-bottom:2px solid var(--navy);background:#f3f7fd;border-radius:6px 6px 0 0;padding:3px 6px;min-width:5ch;max-width:100%;color:var(--navy);font-weight:600}
.gin:focus{outline:none;background:#e6eef9;border-bottom-color:var(--orange)}
.gwrap.ok .gin{border-bottom-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.gwrap.no .gin{border-bottom-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.gfbs{display:flex;flex-direction:column;gap:6px}
.gfb{display:flex;gap:8px;align-items:flex-start}
.gfb .gnum{margin-top:8px}
.gfb>div{flex:1}
/* match */
.mlist{display:flex;flex-direction:column;gap:10px}
.mrow{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px;border:1.5px solid var(--line);border-radius:14px}
@media (min-width:640px){.mrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mrow .fb,.mrow .fb-ex{grid-column:1/-1}}
.mleft{display:flex;gap:10px;align-items:center;font-weight:600}
.mrow.ok{border-color:var(--ok)} .mrow.no{border-color:var(--bad)}
/* order */
.oans{flex:1;display:flex;flex-wrap:wrap;gap:6px;min-height:46px;padding:6px;border:2px dashed var(--line);border-radius:12px;align-items:center}
.oq.ok .oans{border-color:var(--ok);border-style:solid} .oq.no .oans{border-color:var(--bad);border-style:solid}
.opool{display:flex;flex-wrap:wrap;gap:8px;padding-left:36px;align-items:center}
.tok{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px;font-size:16px;font-weight:600;box-shadow:0 2px 0 var(--line);transition:transform .1s}
.tok:active{transform:translateY(1px);box-shadow:none}
.tok.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 0 var(--navy-deep)}
.tok:disabled{cursor:default}
/* T/F/NG */
.tfb{display:flex;gap:8px;flex-wrap:wrap;padding-left:36px}
.tfb button{flex:1;min-width:90px;border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 8px;font-weight:800;font-size:14px;letter-spacing:.03em;color:var(--muted)}
.tfb button.sel{border-color:var(--navy);background:var(--navy);color:#fff}
/* sort */
.slist{display:flex;flex-direction:column;gap:8px}
.srow{display:flex;flex-direction:column;gap:8px;padding:12px;border:1.5px solid var(--line);border-radius:14px}
@media (min-width:640px){.srow{flex-direction:row;align-items:center;flex-wrap:wrap}.srow .stext{flex:1}.srow .fb,.srow .fb-ex{flex-basis:100%}}
.srow.ok{border-color:var(--ok)} .srow.no{border-color:var(--bad)}
.stext{font-weight:700;font-size:17px}
.sgs{display:flex;gap:6px;flex-wrap:wrap}
.sg{border:2px solid var(--gc);color:var(--gc);background:var(--surface);border-radius:10px;padding:7px 12px;font-weight:700;font-size:14px}
.sg.sel{background:var(--gc);color:#fff}
/* write */
.wline{display:flex;gap:8px;align-items:flex-start;padding-left:36px;flex-wrap:wrap}
.wstart{font-weight:700;color:var(--navy);padding-top:12px}
.wline .win{flex:1;min-width:200px}
/* cards */
.fc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fc{position:relative;min-height:150px;border-radius:16px;border:1.5px solid var(--line);background:linear-gradient(160deg,#fff,#f3f7fd);padding:16px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;box-shadow:0 3px 0 var(--line);transition:transform .15s}
.fc:active{transform:scale(.98)}
.fc .term{font-size:22px}
.fc .say{position:absolute;top:8px;right:8px}
.fc-tap{font-size:12px;color:var(--faint);margin-top:8px}
.fc-back{display:none;flex-direction:column;gap:8px}
.fc-back .vi{font-size:16px;font-weight:700;color:var(--navy)}
.fc-back .ex{font-size:15px}
.fc.flip{background:linear-gradient(160deg,#fff8ee,#fff)}
.fc.flip .fc-front{display:none} .fc.flip .fc-back{display:flex}
@media (max-width:520px){.hide-sm{display:none}.opool,.tfb,.wline{padding-left:0}}

/* results, boards */
.res-hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.res-txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.res-txt h2{font-size:24px}
.ring-big{position:relative;width:120px;height:120px;flex:none}
.ring-big svg{width:100%;height:100%}
.ring-big>div{position:absolute;inset:0;display:grid;place-items:center}
.ring-big b{font-size:30px;font-weight:800;color:var(--navy)}
.xp-pill{background:var(--g0b);color:#a24e00;margin-top:6px}
.act-intro{display:flex;flex-direction:column;gap:12px}
.best{display:flex;align-items:center;gap:12px;background:var(--ok-bg);border-radius:14px;padding:12px 14px;flex-wrap:wrap}
.best span{flex:1;font-weight:600;color:var(--ok)} .best b{font-size:24px;color:var(--ok)} .best a{font-weight:700}
.gboard{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:640px){.gboard{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gcard{border-radius:16px;padding:14px;background:var(--gb);border:2px solid transparent;display:flex;flex-direction:column;gap:8px}
.gcard.me{border-color:var(--gc)}
.gtop{display:flex;align-items:center;gap:10px}
.gtop b{flex:1;font-size:17px;color:var(--gc)}
.gtop .pos,.pg-top .pos,.pr .pos{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:#fff;color:var(--muted);flex:none}
.pos.p1{background:#ffd56b!important;color:#5a3d00!important} .pos.p2{background:#d9e1ec!important;color:#33435c!important} .pos.p3{background:#f3c09b!important;color:#5c2c06!important}
.gavg{font-size:24px;font-weight:800;color:var(--gc)}
.gbar{height:10px;border-radius:99px;background:rgba(255,255,255,.8);overflow:hidden}
.gbar i{display:block;height:100%;background:var(--gc);border-radius:99px;transition:width .6s}
.gmem{display:flex;flex-wrap:wrap;gap:6px}
.mchip{background:#fff;border-radius:99px;padding:3px 10px;font-size:13px}
.mchip.me{outline:2px solid var(--gc)}
.mchip.none{opacity:.6}
.gtag{display:inline-block;background:var(--gb);color:var(--gc);font-weight:700;font-size:12px;border-radius:99px;padding:2px 9px}
/* group editor */
.gnames{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:640px){.gnames{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gname{display:flex;align-items:center;gap:8px;background:var(--gb);border-radius:14px;padding:8px}
.gname .input{min-height:40px;padding:8px 10px;border-color:transparent;font-weight:700;color:var(--gc)}
.gdot{width:28px;height:28px;border-radius:50%;background:var(--gc);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.gpeople{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gp{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line)}
.gp:first-child{border-top:0}
.gp .nm{flex:1;min-width:0;font-weight:600}
.gpick{display:flex;gap:4px}
.gbtn{width:34px;height:34px;border-radius:50%;border:2px solid var(--gc);color:var(--gc);background:var(--surface);font-weight:800;font-size:13px;padding:0}
.gbtn.on{background:var(--gc);color:#fff}
/* projector */
.proj{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 20% 0%,#0b4f9e,#012453 70%);color:#fff;overflow:auto;padding:32px}
.proj .x{position:fixed;top:16px;right:16px;color:#fff;background:rgba(255,255,255,.12)}
.proj-in{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.proj-in .eyebrow{color:rgba(255,255,255,.7)}
.proj-in h1{font-size:clamp(28px,4vw,48px)}
.proj-sub{color:rgba(255,255,255,.7);margin-bottom:12px}
.proj-rows{display:flex;flex-direction:column;gap:10px}
.pr{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.08);border-radius:16px;padding:12px 18px;font-size:clamp(18px,2.4vw,28px);animation:rise .3s ease}
.pr b{flex:1}
.pr .hint{color:rgba(255,255,255,.6)}
.pr .pct{font-weight:800;color:#ffd29e}
.pr .pos{width:44px;height:44px;font-size:20px;background:rgba(255,255,255,.15);color:#fff}
.proj-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.pg{background:rgba(255,255,255,.96);color:var(--ink);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;border-top:8px solid var(--gc)}
.pg-top{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2.4vw,30px)}
.pg-top b{flex:1;color:var(--gc)}
.pg-top .num{font-weight:800;color:var(--gc)}
.pg .gbar{background:var(--gb);height:14px}
.pg-m{display:flex;flex-wrap:wrap;gap:8px;font-size:16px}
.pg-m span{background:var(--gb);border-radius:99px;padding:4px 12px}

.act-focus #ap{flex:0 0 56px;padding:12px}
@media (min-width:640px){.act-focus #ap{flex:0 0 auto;padding:12px 18px}}
.act-intro .mode-tag,.acard .mode-tag{align-self:flex-start}
.gtag{white-space:nowrap}

/* =================== Chơi trên lớp (live) =================== */
.live-banner{background:linear-gradient(120deg,#003d82,#0b4f9e);border-color:#003d82;color:#fff}
.live-banner .hint{color:rgba(255,255,255,.75)}
.live-banner .btn{flex:none}
.lv{min-height:100vh;background:radial-gradient(circle at 15% -10%,#1660b8 0%,#003d82 35%,#012453 100%);color:#fff;display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lv .hint{color:rgba(255,255,255,.7)}
.lv-top{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:720px;width:100%;margin:0 auto 10px}
.lv-me{font-weight:700;opacity:.9}
.lv-score{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);padding:6px 12px;border-radius:99px;font-weight:800}
.lv-score svg{width:16px;height:16px;color:#ffd29e}
.lv-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;max-width:720px;width:100%;margin:0 auto}
.lv-center h1{font-size:clamp(28px,6vw,44px)}
.lv-sub{color:rgba(255,255,255,.75);font-size:16px}
.lv-pulse{width:96px;height:96px;border-radius:50%;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;animation:lvp 1.6s ease-in-out infinite}
.lv-pulse svg{width:48px;height:48px}
.lv-pulse.ok{background:var(--ok);color:#fff}
@keyframes lvp{50%{transform:scale(.9);box-shadow:0 0 0 18px rgba(251,143,44,.15)}}
.lv-team{padding:8px 16px;border-radius:99px;background:var(--gb);color:var(--gc);font-size:18px}
.lv-count{font-size:clamp(90px,22vw,180px);font-weight:800;line-height:1;color:var(--orange);animation:lvc .9s ease infinite}
@keyframes lvc{0%{transform:scale(1.15);opacity:.6}30%{transform:scale(1);opacity:1}}
.lv-play{max-width:720px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:14px;flex:1}
.lv-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.lv-bar i{display:block;height:100%;width:100%;background:var(--orange);border-radius:99px;transition:width .25s linear}
.lv-bar.low i{background:#ff5a4e}
.lv-bar.big{height:14px}
.lv-meta{display:flex;justify-content:space-between;font-weight:700;color:rgba(255,255,255,.8)}
.lv-time b{font-size:22px;color:#fff}
.lv-inst{color:rgba(255,255,255,.7);font-size:14px;font-weight:600}
.lv-q{font-size:clamp(20px,4.6vw,30px);line-height:1.35;font-weight:700}
.lv-q.long{font-size:clamp(17px,3.6vw,24px);font-family:var(--serif);font-weight:500}
.lv-blank{color:var(--orange);font-weight:800;letter-spacing:.05em}
.lv-img{max-width:100%;max-height:34vh;border-radius:16px;align-self:center}
.lv-ctx{background:rgba(255,255,255,.08);border-radius:14px;padding:10px 14px;text-align:left}
.lv-ctx summary{cursor:pointer;font-weight:700}
.lv-ctx .serif{margin-top:8px;font-size:16px;line-height:1.6;max-height:30vh;overflow:auto}
.lv-ctx p{margin:0 0 8px}
.lv-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lv-opts.tf{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.lv-tile{position:relative;display:flex;align-items:center;gap:10px;min-height:84px;padding:14px;border:0;border-radius:18px;color:#fff;font-size:18px;font-weight:700;text-align:left;box-shadow:0 5px 0 rgba(0,0,0,.25);transition:transform .1s,opacity .2s}
.lv-tile:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.lv-tile.t0{background:#f07a12} .lv-tile.t1{background:#1f6fd1} .lv-tile.t2{background:#13a362} .lv-tile.t3{background:#8b55d6} .lv-tile.t4{background:#d9433a} .lv-tile.t5{background:#0f97a3}
.lv-k{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:800;flex:none}
.lv-t{flex:1;min-width:0;line-height:1.3}
.lv-tile.sel{outline:4px solid #fff;outline-offset:2px}
.lv-tile.dim{opacity:.28}
.lv-tile.ans{outline:4px solid #fff;outline-offset:2px;transform:scale(1.02)}
.lv-tile:disabled{cursor:default}
.lv-chk{width:26px;height:26px;border-radius:8px;border:2px solid rgba(255,255,255,.7);display:grid;place-items:center}
.lv-chk svg{width:16px;height:16px;opacity:0}
.lv-tile.sel .lv-chk svg{opacity:1}
.lv-cnt{position:absolute;top:8px;right:10px;background:rgba(0,0,0,.25);border-radius:99px;padding:2px 10px;font-size:15px}
.lv-send{margin-top:auto}
.lv-type{display:flex;gap:8px;align-items:center}
.lv-type span{font-weight:700}
.lv-type .input{font-size:18px;min-height:56px}
.lv-order .oans{border-color:rgba(255,255,255,.35);min-height:60px}
.lv-order .opool{padding-left:0;margin-top:10px}
.lv .tok{color:var(--ink)}
.lv .tok.on{color:#fff}
.lv-res.good .lv-pulse{background:var(--ok);color:#fff}
.lv-res.bad .lv-pulse{background:#d9433a;color:#fff}
.lv-res.none .lv-pulse{background:rgba(255,255,255,.2);color:#fff}
.lv-res .lv-pulse{animation:none}
.lv-pts{font-size:44px;font-weight:800;color:#ffd29e}
.lv-rank{font-size:18px}
.lv-rank b{font-size:26px;color:#ffd29e}
.lv-groups{display:flex;flex-direction:column;gap:8px;width:100%;max-width:560px}
.lv-g{display:flex;align-items:center;gap:12px;background:#fff;color:var(--gc);border-radius:16px;padding:10px 14px;border-left:8px solid var(--gc);font-size:18px}
.lv-g b{flex:1;text-align:left}
.lv-g .num{font-weight:800}
.lv-g.me{outline:3px solid #ffd29e}
.lv-g .pos,.lv-r .pos{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--surface-2);color:var(--muted);flex:none}
.lv-ranks{display:flex;flex-direction:column;gap:8px;width:100%}
.lv-r{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border-radius:16px;padding:12px 18px;font-size:clamp(18px,2.4vw,28px);animation:rise .3s ease both}
.lv-r b{flex:1}
.lv-r .num{font-weight:800;color:#ffd29e}
.lv-r:nth-child(2){animation-delay:.06s}.lv-r:nth-child(3){animation-delay:.12s}.lv-r:nth-child(4){animation-delay:.18s}.lv-r:nth-child(5){animation-delay:.24s}
.lv-final{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:520px}
.lv-final div{background:rgba(255,255,255,.1);border-radius:16px;padding:14px 8px;display:flex;flex-direction:column}
.lv-final b{font-size:28px;color:#ffd29e}
.lv-final span{font-size:13px;color:rgba(255,255,255,.75)}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;width:100%;max-width:620px;margin:10px auto}
.pd{display:flex;flex-direction:column;align-items:center;gap:6px}
.pd-name{font-size:clamp(16px,2.6vw,26px);text-align:center}
.pd-score{font-weight:800;color:#ffd29e}
.pd-col{width:100%;border-radius:16px 16px 6px 6px;display:grid;place-items:center;font-size:clamp(28px,5vw,54px);font-weight:800;color:#5a3d00}
.pd.p1 .pd-col{height:clamp(120px,22vh,220px);background:linear-gradient(#ffe08a,#f2b42c)}
.pd.p2 .pd-col{height:clamp(90px,16vh,160px);background:linear-gradient(#eef2f7,#b9c6d8);color:#33435c}
.pd.p3 .pd-col{height:clamp(70px,12vh,120px);background:linear-gradient(#f8d2b4,#e09a63);color:#5c2c06}
.card .podium .pd-name{color:var(--ink)} .card .podium .pd-score{color:var(--navy)}
/* host */
.lv.host{padding:clamp(16px,3vw,40px)}
.lv-host-in{flex:1;width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(12px,2vh,22px)}
.lv.host .eyebrow{color:rgba(255,255,255,.7)}
.lv-title{font-size:clamp(30px,4.5vw,60px)}
.lv-join{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.lv-step{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border-radius:18px;padding:18px;font-size:clamp(18px,2.2vw,28px)}
.lv-step span{width:48px;height:48px;border-radius:50%;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;font-weight:800;flex:none}
.lv-step b{color:#ffd29e;white-space:nowrap}
.lv-big{font-size:clamp(20px,2.6vw,32px)}
.lv-big b{font-size:1.6em;color:#ffd29e}
.lv-names{display:flex;flex-wrap:wrap;gap:10px}
.lv-names span{background:#fff;color:var(--navy);font-weight:700;border-radius:99px;padding:8px 16px;font-size:clamp(15px,1.6vw,20px);animation:rise .3s ease}
.lv-lobby-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.lv-lg{background:#fff;border-radius:18px;padding:14px;border-top:8px solid var(--gc);color:var(--ink)}
.lv-lg b{color:var(--gc);font-size:20px;display:flex;justify-content:space-between}
.lv-lg div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lv-lg span{background:var(--gb);border-radius:99px;padding:4px 10px;font-weight:600}
.lv-hq-top{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:rgba(255,255,255,.8);font-size:clamp(15px,1.6vw,20px);flex-wrap:wrap;gap:10px}
.lv-ans{display:inline-flex;align-items:center;gap:8px}
.lv-ans svg{width:22px;height:22px}
.lv-ans b{font-size:1.4em;color:#ffd29e}
.lv-hq{display:flex;gap:clamp(14px,2vw,30px);align-items:flex-start}
.lv-ring{width:clamp(80px,9vw,120px);height:clamp(80px,9vw,120px);border-radius:50%;border:8px solid var(--orange);display:grid;place-items:center;flex:none}
.lv-ring .lv-time b{font-size:clamp(30px,4vw,52px)}
.lv-hq-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(12px,2vh,20px)}
.lv.host .lv-q{font-size:clamp(24px,3.4vw,46px)}
.lv.host .lv-q.long{font-size:clamp(20px,2.6vw,34px)}
.lv.host .lv-tile{min-height:clamp(80px,12vh,130px);font-size:clamp(18px,2.2vw,30px)}
.lv.host .lv-k{width:44px;height:44px;font-size:20px}
.lv-tokens{display:flex;flex-wrap:wrap;gap:10px}
.lv-tokens .tok{font-size:clamp(18px,2vw,26px)}
.lv-correct{display:flex;align-items:center;gap:14px;background:var(--ok);border-radius:18px;padding:18px 22px;font-size:clamp(20px,2.6vw,34px)}
.lv-correct svg{width:36px;height:36px;flex:none}
.lv-explain{display:flex;gap:12px;background:rgba(255,255,255,.1);border-radius:16px;padding:14px 18px;font-size:clamp(15px,1.6vw,20px)}
.lv-explain svg{width:26px;height:26px;color:#ffd29e;flex:none}
.lv-ctl{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;width:100%;max-width:1200px;margin:16px auto 0}
.lv-main{min-width:200px;font-size:20px;min-height:58px}
.lv-ghost{background:rgba(255,255,255,.1)!important;color:#fff!important;border-color:rgba(255,255,255,.2)!important}
.lv.host .lv-groups{max-width:none}
.lv.host .lv-g{font-size:clamp(18px,2.2vw,28px);padding:14px 20px}
.upl{display:flex;gap:6px;align-items:center}
.upl .input{flex:1;min-width:0}
.upl .btn{flex:none;cursor:pointer}
.upl .btn.busy{opacity:.5;pointer-events:none}
@media (max-width:520px){.lv-opts{grid-template-columns:minmax(0,1fr)}.lv-tile{min-height:64px}.lv-hq{flex-direction:column}}

/* =================== Speaking, notes, AI =================== */
.cue{margin-top:8px;padding:10px 12px;border-left:4px solid var(--orange);background:var(--surface-3);border-radius:0 10px 10px 0;font-size:15px;color:var(--muted)}
.rec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-left:36px}
.rec-audio{width:100%;max-width:420px;height:44px}
.recbar{display:flex;align-items:center;gap:10px;background:var(--bad-bg);border-radius:14px;padding:10px 14px;flex-wrap:wrap}
.recbar.prep{background:var(--warn-bg)}
.recbar b.num{font-size:22px}
.recdot{width:14px;height:14px;border-radius:50%;background:var(--bad);animation:recp 1s ease-in-out infinite}
@keyframes recp{50%{opacity:.25}}
.tnote{display:flex;gap:10px;background:#eef4fc;border:1px solid #cfdcf0;border-radius:14px;padding:12px 14px;font-size:15px}
.tnote svg{width:20px;height:20px;color:var(--navy);flex:none;margin-top:2px}
.band{display:inline-block;background:var(--navy);color:#fff;border-radius:99px;padding:1px 10px;font-size:13px;font-weight:700;margin-left:6px}
.tnote-ed{display:flex;flex-direction:column;gap:8px;border:1.5px dashed #9db6d8;border-radius:14px;padding:12px;background:#f7faff}
.select.sm{min-height:40px;padding:8px 12px;font-size:14px;max-width:240px}
.addrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.addblk.ai{color:#a24e00;border-color:#f6c999;background:#fff8ee}
@media (max-width:520px){.rec{padding-left:0}}

.login-eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffd29e;margin:10px 0 -4px}

/* =================== choose words / flags =================== */
.flag-btn{margin-top:8px;color:#a24e00;border-color:#f6c999;background:#fff8ee}
.flagmark{display:inline-flex;color:var(--orange);vertical-align:-2px}
.flagmark svg{width:15px;height:15px}
.wact{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0;align-items:center;position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));background:var(--bg);padding:10px 0 calc(20px + env(safe-area-inset-bottom,0px));z-index:2;box-shadow:0 -12px 14px -12px rgba(0,40,90,.22)}
.slist2{display:flex;flex-direction:column}
.srow2{display:flex;align-items:center;gap:10px;padding:10px 4px;border-top:1px solid var(--line)}
.srow2:first-child{border-top:0}
.srow2.on{background:#fff8ee;border-radius:12px}
.srow2 .w{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;display:flex;flex-direction:column}
.srow2 .w b{font-size:16px}
.srow2 .w span{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvtag{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:2px 6px;white-space:nowrap}
.selbox{position:relative;flex:none;cursor:pointer}
.selbox input{position:absolute;opacity:0;width:1px;height:1px}
.selbox span{display:block;width:28px;height:28px;border-radius:8px;border:2px solid var(--line);background:var(--surface)}
.selbox input:checked+span{background:var(--orange);border-color:var(--orange);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a1c00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");background-size:20px;background-position:center;background-repeat:no-repeat}
.selbox input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
@media (max-width:420px){.srow2 .lvtag{display:none}}
.wact .btn{white-space:nowrap;padding-left:10px;padding-right:10px;font-size:15px}
.knote{display:flex;gap:10px;align-items:flex-start;background:#fff4e6;border:2px solid var(--orange,#FB8F2C);border-radius:16px;padding:12px 14px;margin:0 0 14px;color:#1d2b45;font-size:14.5px;line-height:1.45}
.knote>svg{width:26px;height:26px;color:#FB8F2C;flex:none;margin-top:2px}
.knote b{color:#003d82}
.knote>div>b:first-child{display:block;font-size:16.5px;margin-bottom:4px}
.knote p{margin:4px 0 0}
.knote mark{background:#ffd9ad;color:#7a3a00;padding:1px 3px;border-radius:4px;font-weight:700;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kres{background:rgba(255,255,255,.65);border-radius:10px;padding:8px 12px;font-size:15px}
.chip .lvno{font-weight:800;color:#FB8F2C;margin-right:2px}.chip[aria-pressed="true"] .lvno{color:#ffc58f}
.tline{display:flex;align-items:center;gap:6px;margin:6px 0 0}.tline svg{width:16px;height:16px;flex:none}

/* Nút về trang chủ website */
.home-link{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--orange);color:var(--orange-ink);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;flex:none;margin-left:8px;transition:filter .15s}
.home-link:hover,.home-link:focus-visible{filter:brightness(1.08)}
.home-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.home-link svg{width:16px;height:16px}
.brand+.home-link{margin-left:auto}
.home-link.on-hero{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));z-index:2;margin:0}
@media (max-width:400px){.topbar .home-link span{display:none}.topbar .home-link{padding:7px}}

/* Viết bài (Writing) */
.eprompt{font-size:17px;line-height:1.6}
.eprompt p{margin:0 0 8px}
.essay-in{min-height:320px;font-size:17px;line-height:1.7;resize:vertical;margin-top:10px}
.ewc{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:14px}
.ewc b.ok{color:var(--ok)} .ewc b.low{color:var(--warn)}
.essay-view{background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:10px;font-size:17px;line-height:1.7}
.essay-view p{margin:0 0 10px}
.aiw{display:block;background:#f3f0ff;border:1px solid #d9d0ff;border-radius:14px;padding:12px 14px;margin-top:12px;font-size:14px}
.aiw.wait{display:flex;gap:10px;align-items:flex-start;background:var(--surface-3);border-color:var(--line)}
.aiw svg{width:18px;height:18px;flex:none;color:#5b3fd1}
.aiw-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.aiw-band{background:#5b3fd1;color:#fff;border-radius:8px;padding:1px 9px;font-weight:800}
.aiw-c{display:grid;gap:8px;margin-bottom:8px}
@media (min-width:760px){.aiw-c{grid-template-columns:1fr 1fr}}
.aiw-c>div{background:#fff;border-radius:10px;padding:8px 10px}
.aiw-c .aiw-k{font-size:12px;color:var(--muted);font-weight:600;margin-right:6px}
.aiw-c p{margin:4px 0 0}
.aiw-errs{display:grid;gap:4px;margin-top:6px}
.aiw-errs .o{color:var(--bad);text-decoration:line-through;text-decoration-color:rgba(210,59,47,.4)}
.aiw-errs .f{color:var(--ok);font-weight:600}

/* ---------- Luyện đề Reading ---------- */
.mk-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.mk-row:first-of-type{border-top:0}
.mk-row>span:first-child{display:flex;flex-direction:column;min-width:0}
.mk-sc{display:flex;align-items:center;gap:8px;flex:none}
.mk-band,.mk-bandbig b{background:var(--orange);color:var(--orange-ink);border-radius:99px;padding:2px 10px;font-weight:800;font-size:13px}
.mk-bandbig{margin:6px 0 4px;font-weight:600}
.mk-bandbig b{font-size:18px;padding:3px 14px}
.mk-tests{display:grid;gap:12px}
@media (min-width:720px){.mk-tests{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.mk-tests{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mk-test{border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--surface-3)}
.mk-test-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mk-titles{margin:0;padding-left:20px;font-size:14px;display:grid;gap:6px;flex:1}
.mk-titles a{color:var(--navy);text-decoration:none;font-weight:600}
.mk-titles a:hover{text-decoration:underline}
.mkx{min-height:100vh;background:var(--bg);display:flex;flex-direction:column;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.mk-top{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px))}
.mk-top .ib{color:#fff;background:rgba(255,255,255,.12);border-color:transparent}
.mk-ttl{display:flex;flex-direction:column;min-width:0;flex:1}
.mk-ttl b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ttl span{font-size:12px;opacity:.75}
.mk-timer{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:var(--orange-ink);border-radius:99px;padding:6px 12px;font-weight:800;font-variant-numeric:tabular-nums}
.mk-timer svg{width:16px;height:16px}
.mk-timer.low{background:#ffd8d4;color:var(--bad)}
.mk-ptabs{display:flex;gap:8px;align-items:center;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:20}
.mk-ptabs button{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:7px 14px;font-weight:700;font-size:14px;white-space:nowrap}
.mk-ptabs button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.mk-hlhint{margin-left:auto;white-space:nowrap}
.mk-split{display:grid;gap:14px;padding:14px 16px;max-width:1400px;width:100%;margin:0 auto}
.mk-pass{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;font-size:17.5px;line-height:1.75}
.mk-pass h2{font-family:var(--serif);font-size:24px;margin-bottom:6px}
.mk-pass p{margin:0 0 14px}
.mk-intro{font-style:italic;color:var(--muted)}
.mk-pl{font-family:var(--sans);color:var(--navy);margin-right:8px}
.mk-foot{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.mk-img{display:block;max-width:100%;height:auto;margin:10px auto;border-radius:8px}
mark.mk-hl{background:#ffe58a;color:inherit;border-radius:3px;padding:0 1px;cursor:pointer}
.mk-hlbtn{position:absolute;z-index:80;background:var(--navy-deep);color:#fff;border:0;border-radius:10px;padding:8px 12px;font-weight:700;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.mk-qs{display:flex;flex-direction:column;gap:12px}
.mk-grp{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.mk-instr{background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:600;color:var(--navy-deep);margin-bottom:12px}
.mk-q{padding:10px 0;border-top:1px solid var(--line);scroll-margin-top:140px}
.mk-instr+.mk-q,.mk-box+.mk-q{border-top:0}
.mk-qt{display:flex;gap:10px;align-items:flex-start;font-size:16px}
.mk-n{flex:none;min-width:30px;height:28px;border-radius:9px;background:var(--navy);color:#fff;display:inline-grid;place-items:center;font-weight:800;font-size:13px;padding:0 6px}
.mk-ch{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0 40px}
.mk-ch button{border:1.5px solid var(--line);background:var(--surface-3);border-radius:10px;padding:6px 12px;font-weight:700;font-size:13px;min-height:38px}
.mk-ch button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.mk-opts{display:grid;gap:6px;margin:8px 0 0 40px}
.mk-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1.5px solid var(--line);background:var(--surface-3);border-radius:12px;padding:9px 12px;font-size:15px}
.mk-opt i{font-style:normal;font-weight:800;color:var(--muted);min-width:16px}
.mk-opt.on{border-color:var(--navy);background:#e8f0fb}
.mk-opt.on i{color:var(--navy)}
.mk-box{border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:10px;font-size:15px;display:grid;gap:4px}
.mk-k{display:inline-block;min-width:34px;font-weight:800;color:var(--navy)}
.mk-mrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.mk-mrow .mk-qt{flex:1 1 260px}
.mk-sel{border:1.5px solid var(--line);border-radius:10px;padding:6px 8px;min-height:38px;background:#fff;font-size:15px;max-width:100%}
.mk-notes{font-size:16px;line-height:2}
.mk-notes h4{font-size:17px;margin:0 0 6px;text-align:center}
.mk-notes h5{font-size:15px;margin:10px 0 0}
.mk-notes p{margin:0 0 4px}
.mk-notes p.bul{padding-left:18px;position:relative}
.mk-notes p.bul::before{content:"•";position:absolute;left:4px}
.mk-gap{display:inline-block;width:150px;max-width:56%;min-height:34px;padding:3px 8px;margin:0 3px;border:1.5px solid #b9c7da;border-radius:8px;font-size:15px;vertical-align:baseline;background:#fff}
.mk-gap:focus,.mk-sel:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,61,130,.15)}
.mk-tbl{border-collapse:collapse;width:100%;font-size:15px;line-height:1.6}
.mk-tbl th,.mk-tbl td{border:1px solid var(--line);padding:6px 8px;vertical-align:top;text-align:left}
.mk-nav{position:fixed;left:0;right:0;bottom:0;z-index:25;background:rgba(255,255,255,.97);border-top:1px solid var(--line);display:flex;gap:4px;overflow-x:auto;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
.mk-nav button{flex:none;width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13px;color:var(--muted)}
.mk-nav button.here{border-color:#9fb3cf;color:var(--ink)}
.mk-nav button.ans{background:var(--navy);border-color:var(--navy);color:#fff}
.mk-switch{display:none}
@media (min-width:960px){
  .mk-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .mk-split .mk-pass,.mk-split .mk-qs{position:sticky;top:120px;max-height:calc(100vh - 190px);overflow:auto}
}
@media (max-width:959px){
  .mk-hlhint{display:none}
  .mk-switch{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(60px + env(safe-area-inset-bottom,0px));z-index:26;background:var(--navy-deep);border-radius:99px;padding:4px;box-shadow:0 6px 20px rgba(1,36,83,.3)}
  .mk-switch button{border:0;background:none;color:#fff;font-weight:700;font-size:14px;padding:8px 16px;border-radius:99px}
  .mk-switch button.on{background:var(--orange);color:var(--orange-ink)}
  .mk-split[data-view="q"] .mk-pass{display:none}
  .mk-split[data-view="p"] .mk-qs{display:none}
  .mk-split{padding-bottom:60px}
  .mk-ch,.mk-opts{margin-left:0}
  .mk-ttl b{font-size:14px}
}
.mk-res tr.ok td:last-child{color:var(--ok)} .mk-res tr.no td:last-child{color:var(--bad)}
.mk-res tr.no td:nth-child(2){color:var(--bad)}
.mk-res td svg{width:18px;height:18px}
@media (min-width:960px){.mk-nav{flex-wrap:wrap;justify-content:center}}

/* ---------- Luyện tập: ô chọn & phát âm IPA ---------- */
.page-sub{font-size:20px;margin:6px 0 4px}
.lt-tiles{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.lt-tile{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);border-width:2px}
.lt-tile.on{border-color:var(--navy)}
.lt-tile span:last-child{font-size:13px;color:var(--muted)}
.lt-ic{width:40px;height:40px;border-radius:12px;background:var(--surface-2);color:var(--navy);display:grid;place-items:center;margin-bottom:4px}
.lt-ic svg{width:22px;height:22px}
.note-warn{background:var(--warn-bg);color:#6b3b00;border-radius:12px;padding:10px 14px;font-size:14px}
.ipa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.ipa-cell{display:flex;flex-direction:column;align-items:center;gap:2px;border:1.5px solid var(--line);background:var(--surface-3);border-radius:14px;padding:10px 6px}
.ipa-cell:hover{border-color:var(--navy)}
.ipa-cell b{font-family:var(--serif);font-size:24px;color:var(--navy);font-weight:600}
.ipa-cell span{font-size:13px;color:var(--muted)}
.ipa-sym{font-family:var(--serif);font-size:34px;color:var(--navy)}
.ipa-tip{font-size:16px;line-height:1.6;background:var(--surface-2);border-radius:12px;padding:12px 14px}
.ipa-words{display:grid;gap:10px}
.ipa-w{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ipa-out{flex-basis:100%;font-size:14px;min-height:20px}
.ipa-ok,.ipa-no{display:inline-flex;gap:6px;align-items:center;font-weight:600}
.ipa-ok{color:var(--ok)} .ipa-no{color:var(--bad)}
.ipa-ok svg,.ipa-no svg{width:18px;height:18px}
.rec-on{background:var(--bad-bg)!important;color:var(--bad)!important}
.ipa-pairs{display:grid;gap:8px}
@media (min-width:640px){.ipa-pairs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ipa-pairs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ipa-pair{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;text-decoration:none;color:var(--ink);position:relative}
.ipa-pair:hover{border-color:var(--navy)}
.ipa-pair b{font-family:var(--serif);font-size:18px;color:var(--navy)}
.ipa-pair .st{position:absolute;right:10px;top:10px}
.ipa-q .card{max-width:560px;margin:0 auto;width:100%}
.ipa-play{font-size:18px;min-height:60px;padding:14px 28px;align-self:center}
.ipa-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ipa-choice .btn{font-size:20px;min-height:64px;font-family:var(--serif)}
.mk-tbl th,.mk-tbl td{white-space:normal;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);line-height:1.9}
.mk-tbl th{font-weight:700;background:var(--surface-3)}

/* ---------- Phòng thi IELTS trên máy (bố cục theo giao diện thi máy tính BC/IDP – Inspera) ---------- */
.ix{--ixbg:#fff;--ixink:#1a1a1a;--ixmut:#535353;--ixline:#d4d4d4;--ixstrip:#f1f1ee;--ixpane:#fff;--ixacc:#003d82;--ixdone:#fb8f2c;--ixhl:#ffe08a;--ixfs:16px;
  position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--ixbg);color:var(--ixink);font:var(--ixfs)/1.5 Arial,Helvetica,sans-serif;overflow:hidden}
.ix.ixs-l{--ixfs:19px}.ix.ixs-xl{--ixfs:22px}
.ix.ixc-wb{--ixbg:#000;--ixink:#fff;--ixmut:#ddd;--ixline:#777;--ixstrip:#1b1b1b;--ixpane:#000;--ixacc:#7fb2ff;--ixhl:#665200}
.ix.ixc-yb{--ixbg:#000;--ixink:#ffe600;--ixmut:#ffe600;--ixline:#8a7d00;--ixstrip:#141400;--ixpane:#000;--ixacc:#ffe600;--ixhl:#5a4a00}
.ix button{font:inherit;color:inherit}
.ix svg{width:22px;height:22px;flex:none}
.ix-top{height:56px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--ixline);background:var(--ixbg)}
.ix-brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.ix-logo{display:flex;align-items:baseline;gap:5px;flex:none}
.ix-logo img{height:30px;width:auto;align-self:center;border-radius:6px}
.ix-logo b{font-size:22px;font-weight:900;letter-spacing:-.5px;color:#003d82}
.ix-logo i{font-style:normal;font-weight:700;font-size:13px;color:#fb8f2c}
.ixc-wb .ix-logo b,.ixc-yb .ix-logo b{color:var(--ixink)}
.ix-cand{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ix-cand b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-cand span{font-size:12.5px;color:var(--ixmut);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-cand span svg{width:15px;height:15px}
.ix-timer{border:0;background:none;cursor:pointer;font-size:15px;padding:6px 10px;border-radius:6px;white-space:nowrap;color:var(--ixink)}
.ix-timer b{font-size:17px}
.ix-timer.low{color:#c8102e}
.ixc-wb .ix-timer.low,.ixc-yb .ix-timer.low{color:#ff6b6b}
.ix-timer.flash{animation:ixflash 1s steps(2,start) 10}
@keyframes ixflash{50%{background:#c8102e;color:#fff}}
.ix-tshow{font-size:13px;color:var(--ixmut);text-decoration:underline}
.ix-tools{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:6px}
.ix-ib{position:relative;border:0;background:none;width:40px;height:40px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--ixink)}
.ix-ib:hover{background:rgba(0,61,130,.08)}
.ix-nb{position:absolute;top:2px;right:2px;min-width:17px;height:17px;border-radius:9px;background:#fb8f2c;color:#fff;font:700 11px/17px Arial;font-style:normal;text-align:center;padding:0 4px}
.ix-nb[hidden]{display:none}
.ix-vol{display:flex;align-items:center;gap:6px;color:var(--ixink)}
.ix-actl{display:flex;align-items:center;gap:4px;margin-right:8px;padding:2px 8px 2px 4px;border:1px solid var(--ixline);border-radius:10px;background:var(--ixbg)}
.ix-actl .ix-ib{position:relative}
.ix-actl .ix-ib:disabled{opacity:.35;cursor:default}
.ix-aback small{position:absolute;right:1px;bottom:0;font:700 9px/1 system-ui,sans-serif}
.ix-pp.on{background:#003d82;color:#fff;border-radius:8px}
.ix-atime{font:600 13px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ixink);min-width:76px;text-align:right}
.ix-vol input{width:110px;accent-color:#003d82}
.ix-strip{flex:none;margin:10px 14px 0;background:var(--ixstrip);border:1px solid var(--ixline);border-radius:4px;padding:10px 14px;display:flex;flex-direction:column;font-size:.94em}
.ix-strip b{font-weight:700}
.ix-main{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 0 0}
.ix-split{flex:1;min-height:0;display:grid;grid-template-columns:var(--ixl,50%) 18px 1fr}
.ix-pane{overflow-y:auto;min-height:0;padding:16px 22px 90px;background:var(--ixpane);scrollbar-width:auto;scrollbar-color:#9a9a9a #ececec}
.ix-pane::-webkit-scrollbar{width:14px}.ix-pane::-webkit-scrollbar-track{background:#ececec}.ix-pane::-webkit-scrollbar-thumb{background:#9a9a9a;border:2px solid #ececec}
.ix-one{flex:1;padding:6px 22px 100px}
.ix-one>.ix-grp{max-width:1000px}
.ix-div{position:relative;background:var(--ixstrip);border-left:1px solid var(--ixline);border-right:1px solid var(--ixline);cursor:col-resize;touch-action:none}
.ix-div span{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border:1px solid #8c8c8c;background:var(--ixbg);border-radius:3px;display:grid;place-items:center;font-size:17px;line-height:1;color:var(--ixink)}
.ix-ptitle{font:700 1.3em/1.3 Arial,Helvetica,sans-serif;margin:4px 0 12px}
.ix-intro{font-style:italic}
.ix-left p{margin:0 0 1em}
.ix-pl{font-weight:700;margin-right:4px}
.ix-foot-n{font-size:.85em;color:var(--ixmut);border-top:1px solid var(--ixline);padding-top:8px}
.ix-img{max-width:100%;height:auto;display:block;margin:10px 0;background:#fff}
.ix-grp{margin:0 0 30px}
.ix-grp h4{font:700 1em Arial,Helvetica,sans-serif;margin:0 0 6px}
.ix-ins p{margin:0 0 6px}
.ix-ins{margin-bottom:14px}
.ix-item{margin:0 0 18px}
.ix-stem{display:flex;gap:10px;align-items:flex-start;margin:0 0 6px}
.ix-num{flex:none;min-width:26px;height:26px;padding:0 4px;display:inline-grid;place-items:center;font-weight:700;border:2px solid transparent;border-radius:2px;line-height:1}
.ix-num.cur{border-color:var(--ixacc)}
.ix-radios{display:flex;flex-direction:column;gap:2px;margin-left:36px}
.ix-opt{display:flex;align-items:flex-start;gap:10px;padding:6px 8px;border-radius:4px;cursor:pointer}
.ix-opt:hover{background:rgba(0,61,130,.06)}
.ix-opt input{margin:4px 0 0;width:16px;height:16px;flex:none;accent-color:#003d82}
.ix-let{display:inline-block;min-width:20px;font-weight:700}
.ix-gap{width:150px;max-width:100%;height:30px;border:1px solid #6d6d6d;border-radius:3px;text-align:center;font:inherit;font-weight:400;padding:0 6px;margin:2px 2px;background:var(--ixbg);color:var(--ixink);vertical-align:middle}
.ix-gap::placeholder{color:var(--ixink);font-weight:700;opacity:1}
.ix-gap:focus::placeholder{color:transparent}
.ix-gap:focus{outline:2px solid var(--ixacc);outline-offset:0;border-color:var(--ixacc)}
.ix-notes h5{font:700 1.08em Arial,Helvetica,sans-serif;margin:10px 0}
.ix-notes h6{font:700 1em Arial,Helvetica,sans-serif;margin:14px 0 6px}
.ix-notes p{margin:0 0 10px;line-height:2}
.ix-notes p.bul{padding-left:18px;position:relative}
.ix-notes p.bul:before{content:"•";position:absolute;left:4px}
.ix-tblw{overflow-x:auto}
.ix-tbl,.ix-grid,.ix-list{border-collapse:collapse;margin:8px 0 14px}
.ix-tbl th,.ix-tbl td{border:1px solid #8c8c8c;padding:8px 10px;vertical-align:top;line-height:2;text-align:left}
.ix-tbl th{background:var(--ixstrip)}
.ix-gridw{overflow-x:auto;border:1px solid var(--ixline);padding:10px;display:inline-block;max-width:100%}
.ix-grid th{font-weight:700;padding:4px 8px;text-align:center;border-left:1px solid #8c8c8c;min-width:30px}
.ix-grid td{padding:8px;border-top:1px solid #8c8c8c}
.ix-grid td+td{border-left:1px solid #8c8c8c;text-align:center}
.ix-gq{display:flex;gap:10px;align-items:flex-start;min-width:180px}
.ix-cell{display:grid;place-items:center;cursor:pointer;width:100%;height:100%}
.ix-cell input{width:15px;height:15px;margin:0;accent-color:#003d82}
.ix-list{border:1px solid #8c8c8c;margin-top:16px}
.ix-list th{text-align:left;padding:8px 10px;border-bottom:1px solid #8c8c8c}
.ix-list td{padding:6px 10px;vertical-align:top}
.ix-ltitle{margin:4px 0 8px}
.ix-pool{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:10px 0}
.ix-chip{display:inline-block;max-width:100%;border:1px solid #8c8c8c;border-radius:3px;padding:3px 8px;font-weight:700;background:var(--ixbg);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;line-height:1.35}
.ix-chip:hover{border-color:var(--ixacc)}
.ix-chip.gone{visibility:hidden}
.ix-chip.lift{opacity:.35}
.ix-chip.pick{outline:2px solid #fb8f2c;outline-offset:1px}
.ix-ghost{position:fixed;z-index:9999;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:.95;background:#fff;color:#1a1a1a}
.ix-drop{display:inline-flex;align-items:center;justify-content:center;min-width:150px;min-height:28px;border:1.5px dashed #7a9cc6;border-radius:3px;padding:1px 6px;vertical-align:middle;cursor:pointer;margin:2px}
.ix-drop>b{font-weight:700}
.ix-drop.full{border-style:solid;border-color:#8c8c8c;padding:0;justify-content:flex-start;min-width:0}
.ix-drop.full .ix-chip{border:0}
.ix-drop.over,.ix-drop:focus{outline:2px solid var(--ixacc);outline-offset:1px}
.ix-hz{margin:0 0 6px}
.ix-hz .ix-drop{display:flex;width:100%}
.ix-ddrow{display:flex;flex-direction:column;gap:4px}
.ix-ddrow .ix-drop{min-width:min(420px,100%)}
.ix-wprompt{font-weight:700}
.ix-wprompt p{margin:0 0 1em}
.ix-wta{display:block;width:100%;min-height:160px;resize:none;overflow:hidden;border:1px solid #8c8c8c;border-radius:2px;padding:10px 12px;font:inherit;line-height:1.6;background:var(--ixbg);color:var(--ixink)}
.ix-wta:focus{outline:2px solid var(--ixacc);outline-offset:0}
.ix-wc{text-align:right;margin:6px 0 0;font-size:.92em}
mark.ix-hl{background:var(--ixhl);color:inherit;padding:0}
mark.ix-hn{border-bottom:2px solid #fb8f2c;cursor:help}
mark.blink{outline:2px solid #fb8f2c}
.ix-menu{position:fixed;z-index:9998;display:flex;background:#fff;border:1px solid #bdbdbd;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.18);padding:3px;font:13px Arial,Helvetica,sans-serif}
.ix-menu button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;cursor:pointer;border-radius:3px;color:#333;font:inherit}
.ix-menu button:hover{background:#eef3fa}
.ix-menu svg{width:18px;height:18px}
.ix-sw{display:block;width:18px;height:14px;background:#ffd54a;border:1px solid #c9a400;border-radius:2px;margin:2px 0}
.ix-nbox{position:fixed;z-index:9998;width:300px;max-width:calc(100vw - 12px);background:#fff;border:1px solid #bdbdbd;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:10px;font:14px Arial,Helvetica,sans-serif;color:#1a1a1a}
.ix-nbox textarea{width:100%;border:1px solid #9a9a9a;border-radius:3px;padding:6px;font:inherit;resize:vertical}
.ix-nbox div{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
.ix-nbox button{border:1px solid #9a9a9a;background:#fff;border-radius:3px;padding:5px 12px;cursor:pointer}
.ix-nbox button.pri{background:#003d82;border-color:#003d82;color:#fff}
.ix-nq{margin:0 0 6px;color:#666;font-size:12.5px;font-style:italic}
.ix-arrows{position:absolute;right:16px;bottom:66px;display:flex;gap:4px;z-index:5}
.ix-arrows button{width:50px;height:50px;border:0;border-radius:3px;display:grid;place-items:center;cursor:pointer;color:#fff}
.ix-arrows svg{width:26px;height:26px;stroke-width:2.6}
.ix-prev{background:#5f6368}
.ix-next{background:#003d82}
.ix-arrows button:disabled{background:#d5d5d5;color:#fff;cursor:default}
.ix-foot{flex:none;height:56px;display:flex;align-items:stretch;border-top:1px solid var(--ixline);background:var(--ixbg);color:var(--ixmut);overflow-x:auto;scrollbar-width:none}
.ix-foot::-webkit-scrollbar{display:none}
.ix-fp{flex:1 1 0;min-width:max-content;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 14px;border:0;background:none;cursor:pointer;white-space:nowrap;font-size:14.5px;color:var(--ixmut)}
.ix-fp b{color:var(--ixink);font-weight:400}
.ix-fp.on{flex:3 1 auto;cursor:default}
.ix-fp.on b{font-weight:700}
.ix-fp:not(.on):hover{background:rgba(0,61,130,.05)}
.ix-qs{display:flex;gap:2px;align-items:center}
.ix-q{position:relative;border:2px solid transparent;background:none;min-width:24px;height:28px;padding:0 3px;cursor:pointer;font-size:14.5px;color:var(--ixink);border-radius:2px}
.ix-q:before{content:"";position:absolute;left:1px;right:1px;top:-9px;height:4px;background:#d9d9d9}
.ix-q.done:before{background:var(--ixdone)}
.ix-q.cur{border-color:var(--ixacc)}
.ix-q:hover{background:rgba(0,61,130,.06)}
.ix-sub{flex:none;width:68px;border:0;border-left:1px solid var(--ixline);background:#e9e9e9;cursor:pointer;display:grid;place-items:center;color:#003d82}
.ixc-wb .ix-sub,.ixc-yb .ix-sub{background:#222;color:var(--ixink)}
.ix-sub:hover{background:#dcdcdc}
.ix-sub svg{width:26px;height:26px;stroke-width:2.6}
.ix-layer{position:absolute;inset:56px 0 0;z-index:20;background:rgba(0,0,0,.35);display:flex;justify-content:center;align-items:flex-start;overflow:auto}
.ix-layer.full{inset:0;background:rgba(40,40,40,.55);align-items:center}
.ix-layer.side{justify-content:flex-end;background:rgba(0,0,0,.2)}
.ix-layer.opts{inset:0;background:var(--ixbg)}
.ix-opts{width:min(560px,100%);padding:14px 16px}
.ix-oh{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;margin-bottom:16px}
.ix-oh h3{text-align:center;font:400 22px Arial,Helvetica,sans-serif;margin:0}
.ix-olist{border:1px solid var(--ixline);border-radius:3px;margin-bottom:12px}
.ix-orow{display:flex;align-items:center;gap:14px;width:100%;border:0;border-top:1px solid var(--ixline);background:var(--ixbg);padding:14px 18px;cursor:pointer;text-align:left;font-size:15px}
.ix-olist .ix-orow:first-child{border-top:0}
.ix-orow span{flex:1}
.ix-orow svg{width:18px;height:18px;color:#8c8c8c}
.ix-orow svg:last-child{color:var(--ixink)}
.ix-ogo{background:#003d82;color:#fff;border:0;border-radius:3px;margin-bottom:12px}
.ix-ogo svg,.ix-ogo svg:last-child{color:#fff}
.ix-rb{flex:none!important;width:18px;height:18px;border:2px solid #8c8c8c;border-radius:50%;position:relative}
.ix-rb.on{border-color:#003d82}.ix-rb.on:after{content:"";position:absolute;inset:3px;border-radius:50%;background:#003d82}
.ix-sheet{width:min(420px,100%);height:100%;background:var(--ixbg);border-left:1px solid var(--ixline);padding:14px;overflow:auto}
.ix-sh{display:flex;justify-content:space-between;align-items:center}
.ix-sh h3{font:700 18px Arial,Helvetica,sans-serif;margin:0}
.ix-nrow{display:flex;gap:6px;border-top:1px solid var(--ixline);padding:10px 0}
.ix-ngo{flex:1;border:0;background:none;text-align:left;display:flex;flex-direction:column;gap:3px;cursor:pointer;font-size:14px}
.ix-empty{color:var(--ixmut);font-size:14px}
.ix-subp{width:min(760px,calc(100% - 24px));background:var(--ixbg);border-radius:6px;padding:24px;max-height:calc(100% - 24px);overflow:auto}
.ix-subp h2{font:700 24px Arial,Helvetica,sans-serif;margin:0 0 6px}
.ix-warn{color:#c8102e;font-weight:700}
.ix-rv{border-top:1px solid var(--ixline);padding:12px 0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.ix-rv>span{color:var(--ixmut)}
.ix-rvq{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px 4px;padding-top:10px}
.ix-subb{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:18px}
.ix-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #8c8c8c;background:var(--ixbg);border-radius:3px;padding:10px 18px;cursor:pointer;font-size:15px}
.ix-btn.pri{background:#003d82;border-color:#003d82;color:#fff}
.ix-btn svg{width:18px;height:18px}
.ix-hint{font-size:13px;color:var(--ixmut);margin:10px 0 0}
.ix-gate{width:min(640px,calc(100% - 24px));text-align:center;color:#fff}
.ix-gbox{display:flex;flex-direction:column;align-items:center;gap:6px}
.ix-gbox>svg{width:84px;height:84px;stroke-width:1.6}
.ix-gbox p{margin:4px 0;font-size:15px}
.ix-gate .ix-hint{color:#e8e8e8}
.ix-play{background:#000!important;border-color:#000!important;margin-top:10px;padding:9px 18px}
.ix-play svg{width:22px;height:22px;color:#fff}
@media (max-width:820px){
  .ix-split{display:flex;flex-direction:column}
  .ix-left{flex:0 0 46%;border-bottom:3px solid var(--ixline)}
  .ix-right{flex:1}
  .ix-div{display:none}
  .ix-pane{padding:12px 14px 80px}
  .ix-one{padding:6px 14px 90px}
  .ix-cand,.ix-vol input{display:none}
  .ix-actl{margin-right:2px;padding:1px 4px}
  .ix-atime{min-width:0;font-size:12px;white-space:nowrap}
  .ix-logo i{display:none}
  .ix-top{gap:6px;padding:0 8px}
  .ix-timer{font-size:13px;padding:4px}
  .ix-strip{margin:8px 8px 0;padding:6px 10px;font-size:.88em}
  .ix-arrows{bottom:64px;right:10px}
  .ix-arrows button{width:42px;height:42px}
  .ix-fp{padding:0 8px;gap:6px;font-size:13px}
  .ix-fp:not(.on) span{display:none}
  .ix-radios{margin-left:0}
}
.lt-tiles.lt-4{grid-template-columns:1fr 1fr}
@media (min-width:760px){.lt-tiles.lt-4{grid-template-columns:repeat(4,1fr)}}
.st-wait{background:var(--warn-bg);color:var(--warn)}
.mk-band.big{font-size:20px;padding:3px 14px;vertical-align:middle}
.mk-titles.wt li a{font-size:14px}
.wr-prompt summary{cursor:pointer;color:var(--navy);font-weight:600}
.wr-prompt{background:var(--surface-3);border-radius:12px;padding:10px 14px}
.wr-note{flex-direction:column}
.ix th{text-transform:none;letter-spacing:0;font-size:inherit;color:inherit;background:none}
.ix .ix-tbl th{background:var(--ixstrip)}
.ix mark.ix-hl{font-weight:inherit;font-style:inherit;border-radius:0}
/* ---------- Xem như (quản trị viên thử vai học viên / giáo viên) ---------- */
.va-bar{position:relative;z-index:21;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;background:var(--orange);color:var(--orange-ink);padding:7px 16px;font-size:13.5px;font-weight:500}
.va-bar svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.va-acts{display:flex;gap:8px;flex-wrap:wrap}
.va-acts a{color:var(--orange-ink);background:rgba(255,255,255,.55);border-radius:99px;padding:3px 12px;text-decoration:none;font-weight:700;white-space:nowrap}
.va-acts a.va-off{background:var(--navy);color:#fff}
.va-pill{border:0;cursor:pointer;color:#fff;font:inherit;font-weight:600}
.va-pill svg{width:16px;height:16px}
@media (min-width:960px){
  .va-bar{margin-left:-220px;height:40px;flex-wrap:nowrap;padding:0 20px}
  .va-bar>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .has-va .tabbar{top:98px}
}
.ipa-vsel{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.ipa-vsel button{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 12px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.ipa-vsel button.on{border-color:var(--navy);background:var(--navy);color:#fff}

/* ---------- Speaking (AI) ---------- */
@media (min-width:700px){.lt-tiles.lt-4{grid-template-columns:repeat(3,1fr)}}
.sp-quota{background:var(--surface-2);color:var(--navy)}
.sp-rec{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sp-mic{min-width:220px}
.sp-live{background:var(--bad-bg)}
.sp-meter{flex:1;min-width:60px;max-width:180px;height:8px;border-radius:99px;background:rgba(210,59,47,.15);overflow:hidden}
.sp-meter i{display:block;height:100%;width:0;background:var(--bad);border-radius:99px;transition:width .08s}
.sp-notes{margin-top:10px;font-size:15px}
.sp-notes-view{margin-top:10px}
.sp-wait{display:flex;gap:14px;align-items:center}
.sp-spin{width:22px;height:22px;flex:none;border-radius:50%;border:3px solid var(--surface-2);border-top-color:var(--orange);animation:spspin .8s linear infinite;display:inline-block;vertical-align:middle}
.sp-actwait{display:flex;gap:8px;align-items:center;margin-top:8px}
.sp-actwait .sp-spin{width:16px;height:16px;border-width:2px}
@keyframes spspin{to{transform:rotate(360deg)}}
.sp-question{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.35}
.sp-card{border:2px solid var(--navy);border-radius:14px;padding:14px 16px;background:var(--surface);font-family:var(--serif);font-size:17px}
.sp-card>b{display:block;font-size:19px;margin-bottom:6px}
.sp-card ul{margin:4px 0 6px;padding-left:22px}
.sp-card .hint{font-family:var(--sans)}
.sp-frame{background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.sp-frame summary{cursor:pointer;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sp-frame summary svg{width:18px;height:18px;color:var(--orange)}
.sp-frame[open] summary{margin-bottom:10px}
.sp-steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.sp-step{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:14px}
.sp-step b{color:var(--navy);margin-right:6px}
.sp-arrow{color:var(--faint)}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px}
.sp-ipa{font-family:"Lucida Sans Unicode","DejaVu Sans","Segoe UI",var(--sans)}
.sp-spark svg{width:100%;max-width:520px;height:auto;display:block}
.sp-spark line.g{stroke:var(--line);stroke-width:1}
.sp-spark text{font-size:9px;fill:var(--faint)}
.sp-spark polyline{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round}
.sp-spark circle{fill:var(--orange);stroke:#fff;stroke-width:1.5}
.sp-tests,.sp-topics,.sp-cards{display:flex;flex-direction:column;gap:8px}
.sp-test,.sp-topic{border:1px solid var(--line);border-radius:12px;background:var(--surface-3)}
.sp-test>summary,.sp-topic>summary{cursor:pointer;padding:10px 14px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;list-style:none}
.sp-test>summary::-webkit-details-marker,.sp-topic>summary::-webkit-details-marker{display:none}
.sp-test>summary::before,.sp-topic>summary::before{content:"›";font-weight:800;color:var(--faint);transition:transform .15s;display:inline-block}
.sp-test[open]>summary::before,.sp-topic[open]>summary::before{transform:rotate(90deg)}
.sp-tbody,.sp-qs{padding:0 14px 14px;display:flex;flex-direction:column;gap:6px}
.sp-qs:empty{display:none}
.sp-qrow{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 6px 6px 12px}
.sp-qrow>span{flex:1;font-size:15px}
.sp-angles{display:grid;gap:8px}
@media (min-width:600px){.sp-angles{grid-template-columns:1fr 1fr}}
.sp-angle{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.sp-angle p{margin-top:4px}
.sp-plan{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.sp-tag{display:inline-block;background:var(--navy);color:#fff;font-size:11px;font-weight:800;border-radius:6px;padding:1px 6px;margin-right:6px;font-family:var(--sans);vertical-align:2px;letter-spacing:.02em}
.sp-words{display:grid;gap:6px}
.sp-words>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-hero{display:grid;gap:16px;grid-template-columns:auto 1fr;align-items:center}
.sp-hero-b{display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:112px;border-radius:24px;background:var(--navy);color:#fff;text-align:center}
.sp-hero-b .hint{color:rgba(255,255,255,.75);font-size:11px}
.sp-hero-b b{font-size:40px;line-height:1.1;font-weight:800;color:var(--orange)}
.sp-tb{font-size:11px;background:rgba(255,255,255,.14);border-radius:99px;padding:1px 8px;margin-top:2px}
.sp-hero-t{min-width:0;display:flex;flex-direction:column;gap:8px}
.sp-qtxt{font-family:var(--serif);font-size:17px}
.sp-hero-t audio{width:100%}
.sp-crit{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:700px){.sp-crit{grid-template-columns:repeat(4,1fr)}}
.sp-crit>div{position:relative;background:var(--surface-3);border-radius:12px;padding:8px 10px 12px;overflow:hidden}
.sp-crit b{display:block;font-size:22px}
.sp-crit i{position:absolute;left:0;bottom:0;height:4px;background:var(--orange)}
.sp-jump{position:sticky;top:58px;z-index:5;background:var(--bg);padding:6px 0}
.sp-teacher{border-color:#f6d3a5;background:#fff8ee}
.sp-teacher h3{display:flex;align-items:center;gap:6px}
.sp-teacher h3 svg{width:18px;height:18px;color:#c25d00}
.sp-hist{display:flex;gap:8px;overflow-x:auto}
.sp-hist a{display:flex;flex-direction:column;align-items:center;min-width:64px;border:1.5px solid var(--line);border-radius:12px;padding:6px 8px;text-decoration:none;color:var(--ink)}
.sp-hist a.on{border-color:var(--navy);background:var(--surface-2)}
.sp-hist span{font-size:11px;color:var(--muted)}
.sp-trans{font-size:18px;line-height:2}
.sp-w{border:0;background:none;padding:0 1px;border-radius:4px;font:inherit;cursor:pointer}
.sp-w:hover{background:var(--surface-2)}
.w-ok{color:var(--ink)} .w-mid{color:#b06200} .w-bad{color:var(--bad);text-decoration:underline wavy rgba(210,59,47,.6);text-underline-offset:4px}
.w-fin{border-bottom:2px dotted var(--bad);border-radius:0}
.w-om{color:var(--faint);text-decoration:line-through} .w-in{color:#6b4fd8;font-style:italic}
.sp-pause{color:var(--orange);font-weight:800;font-family:var(--sans)}
.sp-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin-top:8px}
.sp-legend span{font-weight:600}
.sp-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:700px){.sp-kpis{grid-template-columns:repeat(4,1fr)}}
.sp-kpi{background:var(--surface-3);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
.sp-kpi b{font-size:20px}
.sp-kpi.ok b{color:var(--ok)} .sp-kpi.low b{color:var(--warn)}
.sp-pron{display:grid;gap:8px}
@media (min-width:700px){.sp-pron{grid-template-columns:1fr 1fr}}
.sp-pi{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface-3);display:flex;flex-direction:column;gap:4px}
.sp-pi-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-pi-h b{font-size:17px}
.sp-say{font-family:"Lucida Sans Unicode","DejaVu Sans",var(--sans);font-weight:600;color:var(--navy)}
.sp-try{border-top:1px dashed var(--line);padding-top:6px;margin-top:4px}
.sp-fix{padding:8px 0;border-bottom:1px solid var(--line)}
.sp-fix:last-child{border-bottom:0}
.sp-fix .o{color:var(--bad);text-decoration:line-through;text-decoration-color:rgba(210,59,47,.45)}
.sp-fix .f{color:var(--ok);font-weight:700}
.sp-cc{display:grid;gap:8px;margin-top:10px}
@media (min-width:700px){.sp-cc{grid-template-columns:1fr 1fr}}
.sp-cc>div{background:var(--surface-3);border-radius:12px;padding:8px 12px}
.sp-map{display:flex;flex-wrap:wrap;gap:8px}
.sp-mstep{flex:1 1 150px;border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.sp-mstep.ok{background:var(--ok-bg)} .sp-mstep.ok b{color:var(--ok)}
.sp-mstep.miss{background:var(--bad-bg);border:1.5px dashed #f2c3bf} .sp-mstep.miss b{color:var(--bad)}
.sp-dev{border-left:3px solid var(--orange);padding:4px 0 4px 10px;margin-top:8px}
.sp-mtext{font-size:17px;line-height:1.7;margin-bottom:10px}
.sp-seg{margin-right:2px}
.sp-shadow{font-size:20px;line-height:1.5}
.sp-shadow-r{font-size:18px}
.sp-big{font-size:28px;font-weight:800;color:var(--navy)}
.sp-rules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.sp-exam{text-align:left}
.sp-hidden-q .sp-question{margin-top:6px}
.sp-status{display:flex;align-items:center;gap:10px;flex-direction:column;align-items:stretch}
.sp-ear{display:none}
.sp-ans{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.sp-ans-h{display:flex;gap:8px;align-items:baseline}
.sp-ans-h b{flex:1}
.sp-ans audio{width:100%}
.sp-ans-t{font-size:16px;color:var(--muted)}
.sp-ans .btn{align-self:flex-start}
.sp-alink{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;font-size:14px;color:#5b3fd1;text-decoration:none;background:#f3f0ff;border:1px solid #d9d0ff;border-radius:10px;padding:6px 10px}
.sp-alink svg{width:16px;height:16px}
@media (max-width:520px){.sp-hero{grid-template-columns:1fr}.sp-hero-b{width:100%;height:auto;flex-direction:row;gap:12px;padding:10px}.sp-hero-b b{font-size:32px}}
.sp-res h3 svg,.sp-q h3 svg{width:18px;height:18px;vertical-align:-3px;margin-right:4px;color:#5b3fd1}
.sp-res .card-head h3{display:flex;align-items:center;gap:4px}
.sp-res p svg,.sp-ans .hint svg{width:16px;height:16px;vertical-align:-3px;color:#5b3fd1;margin-right:4px}

/* ---------- 3.8 · Giáo viên & Học viên ---------- */
@media (max-width:859px){.tabbar{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.tabbar::-webkit-scrollbar{display:none}.tab{flex:0 0 auto;min-width:64px}}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.grid-2{grid-template-columns:minmax(0,1fr)}}
.filters{gap:8px}
.filters .chip{cursor:pointer}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip input{accent-color:var(--orange)}
.chip .cnt{background:var(--orange);color:var(--orange-ink);border-radius:99px;padding:0 7px;font-size:12px}
.chip-sm{padding:2px 9px;font-size:12.5px;margin:1px 0}
a.chip{text-decoration:none;color:var(--ink)} a.chip svg{width:14px;height:14px}
.sel-sm{width:auto;min-height:40px;padding:8px 12px;font-size:14px}
.search-sm .input{min-height:40px;padding:8px 12px;font-size:14px;width:220px;max-width:100%}
.mpick{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:10px;padding:0 10px;background:var(--surface);min-height:40px}
.mpick svg{width:16px;height:16px;color:var(--muted)}
.mpick input{border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink);min-height:36px}
.tile-link{text-decoration:none;color:inherit;border-color:var(--orange)} .tile-link:hover{background:#fffaf4}
.icon-btn{border:0;background:none;padding:6px;border-radius:8px;color:var(--muted);display:inline-grid;place-items:center}
.icon-btn:hover{background:var(--surface-2);color:var(--navy)} .icon-btn svg{width:17px;height:17px}
tr.dim td{opacity:.55} tr.tot td{border-bottom:0;background:var(--surface-3)}
.tbl-wide th.sticky,.tbl-wide td.sticky{position:sticky;left:0;background:var(--surface);z-index:1;min-width:160px}
.tbl-wide tr.click:hover td.sticky{background:var(--surface-3)}
/* ghi chú giáo viên */
.gvn{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface)}
.gvn-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:6px}
.gvn-acts{margin-left:auto;display:flex}
.gvn-b{font-size:15px;line-height:1.6}
.gvn-par{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin-top:10px;padding:8px 10px;border-radius:10px;background:var(--warn-bg);color:#6b3b00;font-size:13.5px;font-weight:600}
.gvn-par>span:first-child{display:inline-flex;align-items:center;gap:6px} .gvn-par svg{width:15px;height:15px}
.gvn-par.sent{background:var(--ok-bg);color:var(--ok)}
.gvn-par .btn-quiet{min-height:30px;padding:4px 8px;font-size:13px}
/* dòng thời gian */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:22px 1fr;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.timeline li svg{width:18px;height:18px;color:var(--navy);grid-row:span 2;margin-top:2px}
.timeline li .hint{font-size:12.5px}
/* điểm danh */
.att{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--surface-2);color:var(--muted)}
.att.att-p{background:var(--ok-bg);color:var(--ok)} .att.att-l{background:var(--warn-bg);color:var(--warn)} .att.att-e{background:#e4edfb;color:#163c74} .att.att-a{background:var(--bad-bg);color:var(--bad)}
.att-list{display:flex;flex-direction:column}
.att-row{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.att-row .att-note{grid-column:1/-1;min-height:38px;padding:7px 12px;font-size:14px}
.att-seg{display:flex;gap:4px;flex-wrap:wrap}
.att-seg button{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;font-size:13px;font-weight:700;color:var(--muted);min-height:38px}
.att-seg button.on.att-p{background:var(--ok);border-color:var(--ok);color:#fff}
.att-seg button.on.att-l{background:var(--warn);border-color:var(--warn);color:#fff}
.att-seg button.on.att-e{background:#2c5aa0;border-color:#2c5aa0;color:#fff}
.att-seg button.on.att-a{background:var(--bad);border-color:var(--bad);color:#fff}
@media (max-width:520px){.att-row{grid-template-columns:1fr}.att-seg button{flex:1;padding:7px 4px}}
.prev-s{background:var(--surface-3);font-size:14px;padding:12px 16px}
.tbl-wide td{white-space:nowrap}.tbl-wide td .hint{white-space:nowrap}
/* Listening audioscript (review) */
.scr-audio{width:100%;margin:6px 0 2px}
.scr-box{padding-right:6px}
.scr-l{margin:0 0 .65em;line-height:1.65;border-radius:6px;padding:2px 4px}
.scr-l.t{cursor:pointer}
.scr-l.t:hover{background:rgba(251,143,44,.10)}
.scr-l.scr-ex .scr-t,.scr-l.ex{color:#6b7a8c}
.scr-sp{display:inline-block;min-width:5.2em;margin-right:.5em;color:#003d82;font:700 .78em/1 system-ui,sans-serif;letter-spacing:.02em}
.scr-q{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:10px;font:700 .72em/1.5 system-ui,sans-serif;background:#e8eef7;color:#003d82;vertical-align:1px}
.scr-q.ok{background:#e3f6e8;color:#1b7a3a}
.scr-q.no{background:#fde8e8;color:#b32d2e}

/* ===== Kết quả học tập (3.10) ===== */
.rp-cards{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.rp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.rp-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;min-width:0}
.rp-card.empty{box-shadow:none;background:var(--surface-3)}
.rp-card-h{display:flex;align-items:center;gap:8px;font-size:14.5px}
.rp-big{font-size:22px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--navy);margin-top:2px}
.rp-big.ok{color:var(--ok)} .rp-big.mid{color:var(--warn)} .rp-big.low{color:var(--bad)} .rp-big.na{color:var(--faint)}
.rp-card .hint{line-height:1.45}
.rp-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--navy)}
.rp-ic svg{width:17px;height:17px}
.rp-ic.k-reading,.rp-ic.k-listening,.rp-ic.k-writing,.rp-ic.k-speaking{background:#e4edfb;color:var(--navy)}
.rp-ic.k-vocab,.rp-ic.k-vtest{background:#fff1e3;color:#9a4d00}
.rp-ic.k-act,.rp-ic.k-live{background:var(--ok-bg);color:var(--ok)}
.rp-ic.k-grammar,.rp-ic.k-dictation,.rp-ic.k-ipa{background:#f0e9fb;color:#6a3fb0}
.rp-sc{display:inline-block;font-size:12.5px;font-weight:800;padding:2px 9px;border-radius:99px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rp-sc.ok{background:var(--ok-bg);color:var(--ok)} .rp-sc.mid{background:var(--warn-bg);color:var(--warn)} .rp-sc.low{background:var(--bad-bg);color:var(--bad)} .rp-sc.na{background:var(--surface-2);color:var(--ink)}
.rp-bad{color:var(--bad)!important}
.rp-h2{font-size:20px;font-weight:800;margin-top:6px}
.rp-head{margin:0;align-items:baseline}
.rp-weeks{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:6px}
.rp-wk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.rp-wk i{display:block;width:100%;max-width:26px;border-radius:6px 6px 2px 2px;background:#c9d8ee}
.rp-wk.now i{background:var(--orange)}
.rp-wk em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.rp-wk span{font-size:10.5px;color:var(--faint);white-space:nowrap}
@media (max-width:520px){.rp-wk span{font-size:0}.rp-wk:nth-child(3n) span{font-size:10px}}
.rp-filt{margin-bottom:6px}
.rp-filt .chip{padding:5px 11px;font-size:13px}
.rp-day{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 0 4px;border-bottom:1px solid var(--line)}
.rp-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
a.rp-row:hover{background:var(--surface-3)}
.rp-ev{flex:1;min-width:0;display:flex;flex-direction:column}
.rp-ev b{font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.rp-ev .hint{overflow-wrap:anywhere}
.rp-who{font-weight:700;color:var(--navy)}
.rp-more{margin-top:12px}
.rp-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);border:2px solid var(--line)}
.rp-link:hover{border-color:var(--navy)}
.rp-link>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.rp-link>svg{width:18px;height:18px;color:var(--muted);flex:none}
.rp-period{gap:8px}
.rp-tbl td{vertical-align:top}
.rp-tbl tr.rp-avg td{background:var(--surface-3);border-bottom:0}
.rp-grid{align-items:start}
@media (min-width:980px){.rp-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}

/* ---------- Script viewer 3.11: dịch, từ vựng, lưu sổ từ ---------- */
.scr-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.scr-tools .btn svg{width:16px;height:16px;margin-right:4px}
.scr-tip{font-size:.82rem}
.scr-box .scr-l{display:flex;gap:8px;align-items:flex-start;padding:6px 4px;border-radius:8px;position:relative;cursor:auto;user-select:text}
.scr-box .scr-l:hover{background:rgba(251,143,44,.06)}
.scr-play{flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,61,130,.25);background:#fff;color:#003d82;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-top:2px;padding:0}
.scr-play svg{width:12px;height:12px}
.scr-play:hover{background:#003d82;color:#fff}
.scr-play-ph{flex:0 0 26px}
.scr-tx{flex:1;min-width:0}
.scr-vi{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.9rem;color:#5a6b80;margin-top:3px;border-left:3px solid #FB8F2C;padding-left:8px}
mark.scr-v{background:rgba(251,143,44,.22);color:inherit;border-radius:3px;padding:0 2px;cursor:pointer;border-bottom:1px dashed #FB8F2C}
.scr-pop{position:fixed;z-index:1000;max-width:340px;background:#fff;border:1px solid rgba(0,61,130,.18);box-shadow:0 8px 24px rgba(0,30,70,.16);border-radius:10px;padding:10px 12px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.9rem;display:grid;gap:4px}
.scr-pop .btn{justify-self:start;margin-top:4px}
.scr-panel{border:1px solid rgba(0,61,130,.14);border-radius:12px;padding:10px 12px;margin-bottom:10px;max-height:40vh;overflow:auto;background:#fffaf4}
.scr-sec h4{margin:4px 0 8px;color:#003d82;font-size:.95rem}
.scr-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.scr-w .btn{white-space:nowrap;flex:0 0 auto}
.scr-w{display:flex;gap:8px;justify-content:space-between;align-items:flex-start;background:#fff;border-radius:8px;padding:8px 10px;border:1px solid rgba(0,61,130,.1);font-size:.9rem}
.scr-w b{color:#003d82}
.scr-kind{font-size:.72rem;background:#003d82;color:#fff;border-radius:999px;padding:1px 7px;vertical-align:1px}
.scr-idea{background:#fff;border-radius:8px;padding:8px 10px;margin-bottom:8px;border-left:3px solid #003d82;font-size:.9rem}
.scr-idea p{margin:2px 0}
.scr-wrap .scr-box{max-height:56vh;overflow:auto}

/* trang chủ học viên: sổ tay + tiến độ (3.13.1) */
.nb-words{display:flex;flex-wrap:wrap;gap:8px}
.nb-w{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);text-decoration:none;color:var(--ink);max-width:100%;min-width:0}
.nb-w b{font-size:14.5px;color:var(--navy)}
.nb-w span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.nb-w.ok{border-color:var(--ok);background:var(--ok-bg)}
.nb-w:hover{border-color:var(--navy)}
.home-rp .rp-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
.home-rp .rp-card{padding:10px 12px}
.home-rp .rp-list .rp-row{padding:8px 0}
.home-rp .rp-card.empty{display:none}

/* Từ vựng: 3 tab (3.13.2) */
.vtabs{display:flex;gap:4px;background:var(--surface-2);border-radius:14px;padding:4px;overflow-x:auto;scrollbar-width:none}
.vtabs a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap}
.vtabs a svg{width:16px;height:16px}
.vtabs a.on{background:var(--surface);color:var(--navy);box-shadow:var(--shadow)}
.nb-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.nb-row:last-child{border-bottom:0}
.nb-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nb-t b{font-size:15px;color:var(--navy)}
.nb-t .hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-st{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.nb-st.ok{background:var(--ok-bg);color:var(--ok)}
.nb-st.due{background:#fff1e3;color:#9a4d00}

@media (max-width:560px){.ix-atime{display:none}.ix-actl{border:0;padding:0;margin:0;gap:0}}

/* ---------- Đấu từ vựng (3.15) ---------- */
.banner>svg{width:20px;height:20px;flex:none;color:var(--warn)}
.bt-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--orange);color:var(--orange-ink);font-size:14px;font-weight:800;margin-right:8px;vertical-align:1px}
.bt-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;max-height:360px;overflow-y:auto}
.bt-row{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.bt-row:last-child{border-bottom:0}
.bt-row:hover{background:var(--surface-3)}
.bt-row input{width:20px;height:20px;margin-top:2px;accent-color:var(--navy);flex:none}
.bt-row b{display:block;font-weight:600}
.bt-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.bt-part{text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.bt-part span{font-size:13px;color:var(--muted)}
.bt-part.on{border-color:var(--navy);background:#e8f0fb;box-shadow:inset 0 0 0 1px var(--navy)}
.bt-chosen,.bt-files{display:flex;flex-wrap:wrap;gap:8px}
.bt-chosen .mchip,.bt-files .mchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:4px 4px 4px 12px;font-size:14px}
.bt-chosen .mchip.on{background:#e8f0fb;border-color:#b8cbe6;color:var(--navy);font-weight:600}
.bt-chosen .mchip svg{width:15px;height:15px}
.bt-chosen .ib,.bt-files .ib{width:28px;height:28px;min-height:0}
.bt-kinds{display:flex;flex-wrap:wrap;gap:8px}
.bt-kind{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:9px 15px;font-weight:600;font-size:15px}
.bt-kind svg{width:17px;height:17px;color:var(--muted)}
.bt-kind.on{background:var(--navy);border-color:var(--navy);color:#fff}
.bt-kind.on svg{color:var(--orange)}
.bt-qs{display:flex;flex-direction:column;gap:10px}
.bt-q{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 14px;background:var(--surface-3)}
.bt-qn{flex:none;width:28px;height:28px;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.bt-qb{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bt-qt{font-weight:600;line-height:1.45}
.bt-qt .lv-blank{color:var(--orange)}
.bt-opts{display:flex;flex-wrap:wrap;gap:6px}
.bt-opt{font-size:14px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:4px 10px}
.bt-opt.ok,.bt-ans{background:var(--ok-bg);border-color:#a6dfc0;color:var(--ok);font-weight:700}
.bt-ans{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:1px solid #a6dfc0;border-radius:10px;padding:4px 10px;font-size:14px}
.bt-ans svg,.bt-qb .hint svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
/* pairs (set-up page) */
.pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.pair{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:8px 10px;background:var(--surface-3);flex-wrap:wrap}
.pair .pn{width:24px;height:24px;border-radius:8px;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.pair .pb{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:6px 10px;font-weight:600;font-size:14px}
.pair .pb.on{border-color:var(--orange);background:#fff2de;box-shadow:0 0 0 2px rgba(251,143,44,.35)}
.pair .vs,.dl-vs{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--orange)}
/* duels (live screens) */
.lv-duels{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;width:100%;max-width:1100px;margin:0 auto}
.lv-duel{display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:10px 14px}
.lv-duel.me{background:rgba(251,143,44,.18);border-color:var(--orange)}
.lv-duel.solo{max-width:420px;width:100%;margin:4px auto 0}
.dl-p{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;min-width:0;padding:4px 8px;border-radius:12px}
.dl-p b{font-size:18px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-p .num{font-size:22px;font-weight:800}
.dl-p.lead{background:var(--orange);color:var(--orange-ink)}
.dl-p.wait{opacity:.6}
.dl-p.wait span{font-size:13px}
.lv .dl-vs{color:var(--orange-2)}
.card .lv-duels{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card .lv-duel{background:var(--surface-3);border-color:var(--line);color:var(--ink)}
.lv-team:not([class*=" g"]){--gb:rgba(255,255,255,.14);--gc:#fff}
.lv-missed{width:100%;max-width:520px;background:#fff;color:var(--ink);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;text-align:left}
.lv-missed>b{display:flex;align-items:center;gap:8px;color:var(--navy)}
.lv-missed>b svg{width:18px;height:18px;color:var(--orange)}
.lv-missed>div{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow:auto}
.lv-missed>div span{background:var(--surface-2);border-radius:10px;padding:4px 10px;font-size:14px}
.lv-missed .btn{align-self:flex-start}
p.hint>svg,.bt-qb .hint svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px;flex:none}
.lv-duel.has-note{flex-wrap:wrap}
.dl-note{flex-basis:100%;text-align:center;font-size:13px;opacity:.85;display:flex;align-items:center;justify-content:center;gap:5px}
.dl-note svg{width:14px;height:14px}

/* ===== Xem lại bài: đáp án trong bài đọc / script (3.15.3) ===== */
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.rv-head>div:first-child{flex:1 1 360px;min-width:0}
.rv-head .muted{max-width:72ch;margin-top:4px}
.rv-key-ok{background:#d9f3e4;color:#0d6b3e;font-weight:700;padding:0 6px;border-radius:5px}
.rv-key-no{background:#fde2df;color:#a8281e;font-weight:700;padding:0 6px;border-radius:5px}
.rv-seg{flex:0 1 auto;max-width:100%}
.rvx{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.rv-left,.rv-right{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;min-width:0;box-shadow:var(--shadow)}
@media (min-width:900px){
  .rvx{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
  .rv-left,.rv-right{height:calc(100vh - 230px);min-height:420px;overflow:auto;overscroll-behavior:contain}
}
.rv-text{font-size:17px;line-height:1.75}
.rv-text p{margin:0 0 14px}
.rv-ptitle{font-family:var(--serif);font-size:21px;margin-bottom:12px}
.rv-intro{font-style:italic;color:var(--muted)}
.rv-ev{border-radius:4px;padding:1px 0;scroll-margin:120px;transition:box-shadow .2s}
mark.rv-ev.ok{background:#d9f3e4;color:inherit}
mark.rv-ev.no{background:#fde2df;color:inherit}
.rv-tag{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;margin:0 4px 0 1px;border-radius:6px;font:800 12px/1 var(--sans);vertical-align:2px;background:var(--navy);color:#fff;cursor:pointer}
.rv-tag.ok{background:var(--ok);color:#fff} .rv-tag.no{background:var(--bad);color:#fff}
.rv-flash{animation:rvFlash 1.8s ease-out}
@keyframes rvFlash{0%,30%{box-shadow:0 0 0 4px #fb8f2c}100%{box-shadow:0 0 0 0 rgba(251,143,44,0)}}
@media (prefers-reduced-motion:reduce){.rv-flash{animation:none;box-shadow:0 0 0 3px #fb8f2c}}
.rv-line{display:flex;gap:8px;align-items:flex-start;padding:6px 6px;border-radius:8px;margin-bottom:2px}
.rv-line.rv-ev.ok{background:#e9f8ef} .rv-line.rv-ev.no{background:#fdeceb}
.rv-line>div{flex:1;min-width:0}
.rv-line .scr-sp{margin-right:6px}
.rv-left .scr-audio{width:100%;margin-bottom:10px}
.rv-grp+.rv-grp{margin-top:16px}
.rv-grp h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.rv-q{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;border-top:1px solid var(--line);border-radius:10px;cursor:pointer}
.rv-q:hover{background:var(--surface-3)}
.rv-q.on{background:#fff4e8;box-shadow:inset 3px 0 0 var(--orange)}
.rv-n{flex:none;min-width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:var(--ok)}
.rv-q.no .rv-n{background:var(--bad)}
.rv-qb{flex:1;min-width:0}
.rv-qt{font-size:14.5px;line-height:1.45}
.rv-ans{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;margin-top:4px}
.rv-q.no .rv-given{color:var(--bad);text-decoration:line-through}
.rv-q.ok .rv-given{color:var(--ok)}
.rv-key{color:var(--navy)}
.rv-ng{margin-top:4px}
.rv-loc{flex:none;white-space:nowrap}
.rv-loc svg{width:16px;height:16px}
.mk-res .rv-loc{padding:4px 8px;min-height:0}

/* ===== Làm lại bài tập (3.15.3) ===== */
.retry-card{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border:2px solid var(--orange);background:#fff8f0}
.retry-card>div:first-child{flex:1 1 260px;min-width:0}
.retry-card .hint{margin-top:2px}

/* 3.17 – cách tính XP & XP theo phần */
.xp-rules{margin:0 0 12px;font-size:14px}
.xp-rules summary{cursor:pointer;font-weight:600;color:var(--brand,#003d82)}
.xp-rules ul{margin:8px 0 6px;padding-left:18px;display:grid;gap:4px}
.rp-xp{display:grid;gap:8px}
.rp-xp-row{display:grid;grid-template-columns:150px 1fr 70px;gap:10px;align-items:center;font-size:14px}
.rp-xp-bar{height:10px;border-radius:6px;background:rgba(0,61,130,.08);overflow:hidden}
.rp-xp-bar i{display:block;height:100%;border-radius:6px;background:#FB8F2C}
.rp-xp-row em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){.rp-xp-row{grid-template-columns:110px 1fr 56px}}