/* Phòng thi thử IELTS Academic — ngôn ngữ thiết kế "Lamplight"
   Bàn học ban đêm: nền tối sâu, ánh đèn hổ phách hắt từ góc trái, khối kính mờ, chữ có chân nghiêng cho tiêu đề.
   Thanh tab kính có vệt sáng trượt theo mục đang chọn; trên điện thoại là thanh dưới với nút nổi.
   Mọi màu đi qua token; thành phần không dùng mã màu thô. */
:root{
  --bg:#0B0E14; --bg-2:#121620; --paper:#141924; --surface:#171D29;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.09); --stroke:rgba(255,255,255,.11); --stroke-2:rgba(255,255,255,.2);
  --ink:#F4EFE7; --muted:#ABA59C; --faint:#9A948A;
  --lamp:#F2B661; --lamp-2:#E8896B; --lamp-text:#F5C784; --lamp-soft:rgba(242,182,97,.14); --glow:rgba(242,182,97,.22);
  --on-lamp:#1B1209;
  --ok:#7FD3A4; --ok-soft:rgba(127,211,164,.12); --bad:#F39A8F; --bad-soft:rgba(243,154,143,.12);
  --hl:rgba(242,182,97,.35); --focus:#F5C784;
  --s1:#F2B661; --s2:#8FB3EA; --s3:#E8896B; --s4:#7FD3A4;
  --shadow:0 24px 60px -24px rgba(0,0,0,.75); --shadow-s:0 10px 30px -14px rgba(0,0,0,.7);
  --inset:inset 0 1px 0 rgba(255,255,255,.07);
  --f-ui:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-read:"Source Serif 4",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r-s:12px; --r-m:20px; --r-l:28px; --pill:999px; --hit:44px;
  --spring:cubic-bezier(.34,1.4,.64,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F3EEE6; --bg-2:#ECE5D9; --paper:#FBF8F3; --surface:#FFFDF9;
  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.85); --stroke:rgba(60,40,20,.12); --stroke-2:rgba(60,40,20,.22);
  --ink:#1E1A14; --muted:#5C544A; --faint:#665E54;
  --lamp:#E9A84E; --lamp-2:#DE7E62; --lamp-text:#8A5410; --lamp-soft:rgba(233,168,78,.16); --glow:rgba(233,168,78,.28);
  --ok:#1D6A47; --ok-soft:#DCEFE4; --bad:#9E2F2A; --bad-soft:#F6E0DD;
  --hl:#F6DE9C; --focus:#8A5410; --s1:#C27C1E; --s2:#2F5FB3; --s3:#B5523A; --s4:#1D6A47;
  --shadow:0 24px 60px -28px rgba(80,55,20,.35); --shadow-s:0 10px 28px -16px rgba(80,55,20,.35);
  --inset:inset 0 1px 0 rgba(255,255,255,.9);
  color-scheme:light;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F3EEE6; --bg-2:#ECE5D9; --paper:#FBF8F3; --surface:#FFFDF9;
  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.85); --stroke:rgba(60,40,20,.12); --stroke-2:rgba(60,40,20,.22);
  --ink:#1E1A14; --muted:#5C544A; --faint:#665E54;
  --lamp:#E9A84E; --lamp-2:#DE7E62; --lamp-text:#8A5410; --lamp-soft:rgba(233,168,78,.16); --glow:rgba(233,168,78,.28);
  --ok:#1D6A47; --ok-soft:#DCEFE4; --bad:#9E2F2A; --bad-soft:#F6E0DD;
  --hl:#F6DE9C; --focus:#8A5410; --s1:#C27C1E; --s2:#2F5FB3; --s3:#B5523A; --s4:#1D6A47;
  --shadow:0 24px 60px -28px rgba(80,55,20,.35); --shadow-s:0 10px 28px -16px rgba(80,55,20,.35);
  --inset:inset 0 1px 0 rgba(255,255,255,.9);
  color-scheme:light}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0}
body{color:var(--ink);font:500 15px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;min-height:100vh;
  background:radial-gradient(1100px 700px at 8% -12%,var(--glow),transparent 62%),radial-gradient(900px 600px at 105% 4%,rgba(232,137,107,.08),transparent 60%),var(--bg);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background:radial-gradient(3px 3px at 12% 32%,var(--lamp) 50%,transparent 51%),radial-gradient(2px 2px at 78% 18%,var(--lamp-2) 50%,transparent 51%),radial-gradient(4px 4px at 64% 72%,var(--lamp) 50%,transparent 51%),radial-gradient(2px 2px at 32% 84%,var(--lamp-2) 50%,transparent 51%),radial-gradient(3px 3px at 90% 58%,var(--lamp) 50%,transparent 51%);
  filter:blur(1px);animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(0,-28px,0)}}
#app{position:relative;z-index:1}
a{color:var(--lamp-text)}
h1,h2,h3,h4{margin:0;line-height:1.1;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(36px,6.2vw,68px);font-weight:800}
h2{font-size:clamp(26px,3.8vw,40px);font-weight:800}
h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.serif{font-family:var(--f-read);font-style:italic;font-weight:600;letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lamp);color:var(--on-lamp);padding:10px 14px;border-radius:var(--r-s);z-index:100}
.skip:focus{left:8px}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font:600 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp-text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.glass{background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--stroke);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--shadow-s),var(--inset)}

/* ---------- Thanh trên ---------- */
.top{position:sticky;top:0;z-index:30;padding:14px 16px 0}
.top-in{max-width:1180px;margin:0 auto;min-height:64px;padding:8px 8px 8px 14px;display:flex;align-items:center;gap:12px;border-radius:var(--pill)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:15px;min-height:var(--hit);line-height:1.1;flex:none}
.brand .mk{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--on-lamp);background:radial-gradient(circle at 35% 30%,#FFE2AE,var(--lamp) 55%,var(--lamp-2));box-shadow:0 0 22px var(--glow);font:italic 700 17px var(--f-read)}
.brand small{display:block;font:600 10px var(--f-mono);color:var(--lamp-text);letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
/* Tab kính có vệt trượt */
.slider{position:relative;display:flex;gap:2px;padding:4px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--stroke)}
.slider .ind{position:absolute;top:4px;bottom:4px;left:0;width:var(--w,0);transform:translateX(var(--x,0));border-radius:var(--pill);background:linear-gradient(180deg,var(--glass-2),var(--lamp-soft));border:1px solid var(--stroke-2);box-shadow:0 6px 20px -6px var(--glow),var(--inset);transition:transform .5s var(--spring),width .5s var(--spring);pointer-events:none}
.slider > a,.slider > button{all:unset;position:relative;z-index:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:var(--pill);color:var(--muted);font-weight:700;font-size:13.5px;white-space:nowrap;transition:color .25s}
.slider > [aria-current="page"],.slider > [aria-pressed="true"],.slider > [aria-selected="true"]{color:var(--ink)}
.slider > :hover{color:var(--ink)}
.nav{margin-left:auto}
.acct{display:flex;align-items:center;gap:8px;flex:none}
.nav + .acct{margin-left:0}
.iconbtn{all:unset;cursor:pointer;width:var(--hit);height:var(--hit);display:grid;place-items:center;border-radius:50%;color:var(--muted);background:var(--glass);border:1px solid var(--stroke)}
.iconbtn:hover{color:var(--ink)}
.who-chip{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:var(--hit);padding:0 14px 0 5px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--stroke);color:var(--ink);font-weight:700;font-size:13px;max-width:230px}
.who-chip .av{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE2AE,var(--lamp) 60%,var(--lamp-2));color:var(--on-lamp);display:grid;place-items:center;font:700 13px var(--f-ui);flex:none;text-transform:uppercase}
.who-chip .em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Thanh dưới trên điện thoại: nút nổi trượt theo mục đang chọn */
.bbar,.bub{display:none}
@media (max-width:760px){
  .nav{display:none}.who-chip .em{display:none}.who-chip{padding:0 5px}.brand small{display:none}
  .top{padding:10px 12px 0}.top-in{min-height:58px}
  .bbar{display:block;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:35;height:66px;border-radius:24px;
    -webkit-mask:radial-gradient(circle 33px at var(--bx,50%) 0,transparent 32px,#000 33px);mask:radial-gradient(circle 33px at var(--bx,50%) 0,transparent 32px,#000 33px);transition:--bx .5s}
  .bbar-in{display:grid;grid-template-columns:repeat(4,1fr);height:100%}
  .bbar a{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding-bottom:10px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:700;min-height:var(--hit)}
  .bbar a svg{transition:transform .45s var(--spring),opacity .2s}
  .bbar a[aria-current="page"]{color:var(--ink)}
  .bbar a[aria-current="page"] svg{opacity:0;transform:translateY(-20px)}
  .bub{display:grid;position:fixed;z-index:36;bottom:calc(10px + 66px - 26px + env(safe-area-inset-bottom,0px));left:12px;width:52px;height:52px;margin-left:-26px;border-radius:50%;display:grid;place-items:center;color:var(--on-lamp);
    background:radial-gradient(circle at 35% 30%,#FFE2AE,var(--lamp) 58%,var(--lamp-2));box-shadow:0 10px 26px -6px var(--glow),0 0 0 6px var(--bg);transform:translateX(var(--bxpx,0));transition:transform .55s var(--spring);pointer-events:none}
  body.in-exam .bbar,body.in-exam .bub{display:none}
  .page{padding-bottom:120px!important}
}

.page{max-width:1180px;margin:0 auto;padding:44px 16px 90px;display:flex;flex-direction:column;gap:80px}
.page > .btn{align-self:flex-start}
.narrow{max-width:880px;width:100%;margin-inline:auto}
.lede{font-size:17.5px;color:var(--muted);max-width:58ch;font-weight:500;line-height:1.65}
section{display:flex;flex-direction:column;gap:22px}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot{border-top:1px solid var(--stroke);padding-top:24px;font-size:13px;color:var(--faint);display:flex;flex-direction:column;gap:8px}
.foot b{color:var(--muted)}

/* ---------- Nút, viên, thẻ ---------- */
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:var(--pill);color:var(--on-lamp);font-weight:800;font-size:14.5px;text-decoration:none;text-align:center;
  background:linear-gradient(135deg,#FFD596,var(--lamp) 45%,var(--lamp-2));box-shadow:0 14px 34px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .25s var(--spring),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.5)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:var(--glass);color:var(--ink);border:1px solid var(--stroke-2);box-shadow:var(--inset)}
.btn.sm{min-height:var(--hit);padding:0 18px;font-size:13.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--f-mono);padding:4px 10px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--stroke);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.chip.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.chip.acc{background:var(--lamp-soft);border-color:transparent;color:var(--lamp-text)}
.pill-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--stroke);font:600 11.5px var(--f-mono);letter-spacing:.06em;color:var(--muted);align-self:flex-start;text-transform:uppercase}
.pill-tag i{width:7px;height:7px;border-radius:50%;background:var(--lamp);box-shadow:0 0 10px var(--lamp)}
.card{border-radius:var(--r-m);padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0;background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--stroke);box-shadow:var(--shadow-s),var(--inset)}
.callout{border-radius:var(--r-m);padding:16px 20px;display:flex;flex-direction:column;gap:8px;background:var(--glass);border:1px solid var(--stroke)}
.callout.acc{background:var(--lamp-soft);border-color:transparent}
.callout.bad{background:var(--bad-soft);border-color:transparent}
.ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--lamp-text);background:var(--lamp-soft);border:1px solid var(--stroke);flex:none}

/* ---------- Trang chủ ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:12px}
.hero h1{margin-top:20px}
.hero h1 .l2{display:block;font-family:var(--f-read);font-style:italic;font-weight:600;letter-spacing:-.03em;background:linear-gradient(90deg,#FFD596,var(--lamp) 40%,var(--lamp-2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
:root[data-theme="light"] .hero h1 .l2{background:none;color:var(--lamp-text)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .hero h1 .l2{background:none;color:var(--lamp-text)}}
.hero .lede{margin-top:22px}
.hero .btns{margin-top:32px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:44px}}
.desk{position:relative;border-radius:var(--r-l);padding:18px;display:flex;flex-direction:column;gap:14px}
.desk::before{content:"";position:absolute;inset:-40px -20px auto -60px;height:260px;background:radial-gradient(closest-side,var(--glow),transparent);z-index:-1;filter:blur(10px)}
.desk-top{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid var(--stroke);font:600 11.5px var(--f-mono);color:var(--muted);letter-spacing:.06em}
.desk-top b{font:700 18px var(--f-mono);color:var(--lamp-text);letter-spacing:0}
.desk-body{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.desk-pass{border-radius:var(--r-s);background:var(--paper);border:1px solid var(--stroke);padding:16px;font:400 14.5px/1.65 var(--f-read);color:var(--muted)}
.desk-pass b{display:block;color:var(--ink);font:italic 600 18px var(--f-read);margin-bottom:6px}
.desk-pass mark{background:var(--hl);color:var(--ink);border-radius:2px}
.desk-q{display:flex;flex-direction:column;gap:8px}
.desk-q div{border-radius:12px;background:var(--glass);border:1px solid var(--stroke);padding:10px 12px;font-size:12.5px;display:flex;gap:8px;align-items:center;line-height:1.35;color:var(--muted)}
.desk-q div span{font:600 11px var(--f-mono);color:var(--lamp-text);flex:none}
.desk-q div.on{background:var(--lamp-soft);border-color:var(--stroke-2);color:var(--ink);font-weight:700}
.desk-nav{display:flex;gap:6px;flex-wrap:wrap}
.desk-nav i{width:26px;height:26px;border-radius:8px;border:1px solid var(--stroke);font:600 10px/24px var(--f-mono);text-align:center;font-style:normal;color:var(--faint)}
.desk-nav i.d{background:var(--glass-2);color:var(--ink)}
.desk-nav i.f{color:var(--lamp-text);border-color:var(--lamp)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat{border-radius:var(--r-m);padding:22px;display:flex;flex-direction:column;gap:4px}
.stat b{font:italic 600 40px/1 var(--f-read);letter-spacing:-.03em;color:var(--lamp-text)}
.stat span{font-size:13px;color:var(--muted)}
.loop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.loop .st{border-radius:var(--r-m);padding:22px;display:flex;flex-direction:column;gap:8px;position:relative}
.loop .st .n{font:600 12px var(--f-mono);color:var(--lamp-text)}
.loop .st p{font-size:14px;color:var(--muted)}
@media (max-width:900px){.loop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.desk-body{grid-template-columns:1fr}.desk-pass{display:none}.stat b{font-size:34px}}
@media (max-width:520px){.loop{grid-template-columns:1fr}.page{gap:60px;padding-top:30px}}

.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.filters input,.field input{flex:1 1 240px;min-height:50px;font:inherit;padding:0 20px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--stroke);color:var(--ink);min-width:0}
.filters input::placeholder,.field input::placeholder{color:var(--faint)}
.filters input:focus,.field input:focus{outline:none;border-color:var(--lamp);box-shadow:0 0 0 4px var(--lamp-soft)}
.tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:16px}
.test-card{position:relative;border-radius:var(--r-m);padding:20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;min-height:214px;overflow:hidden;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--stroke);box-shadow:var(--inset);transition:transform .35s var(--spring),border-color .3s}
.test-card::after{content:"";position:absolute;inset:auto -30% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:0;transition:opacity .35s}
.test-card:hover{transform:translateY(-4px);border-color:var(--stroke-2)}
.test-card:hover::after{opacity:1}
.test-card .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.test-card .no{font:italic 600 26px/1 var(--f-read);color:var(--lamp-text)}
.test-card .no small{font:600 11px var(--f-mono);color:var(--faint);margin-left:4px;font-style:normal}
.test-card .kind{font:600 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.test-card h3{font-size:16.5px;line-height:1.3}
.test-card p{font-size:13px;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.test-card .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;align-items:center;justify-content:space-between;position:relative;z-index:1}
.test-card .go{font:700 12px var(--f-mono);color:var(--lamp-text)}

/* ---------- Tổng quan đề ---------- */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.skill{border-radius:var(--r-m);padding:20px;display:flex;flex-direction:column;gap:10px}
.skill .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.skill .mono{font-size:12px;color:var(--faint)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:700;color:var(--muted)}
.field input{max-width:460px;flex:none}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;min-height:var(--hit);padding-top:10px;cursor:pointer;color:var(--muted)}
.check b{color:var(--ink)}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--lamp)}

/* ---------- Đăng nhập: cảnh đèn học ---------- */
.lamp-scene{position:relative;min-height:min(78vh,700px);border-radius:var(--r-l);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:24px;padding:40px clamp(18px,4vw,56px);
  background:radial-gradient(120% 90% at 30% 10%,#1A1610,#07080B 70%);border:1px solid var(--stroke);box-shadow:var(--shadow)}
.lamp-scene .room{position:absolute;inset:0;background:radial-gradient(60% 70% at var(--lx,30%) 30%,var(--lc,rgba(242,182,97,.55)),transparent 70%);opacity:0;transition:opacity 1.1s ease,background 1.2s ease;pointer-events:none}
.lamp-scene .cone{position:absolute;left:calc(var(--lx,30%) - 210px);top:28%;width:420px;height:72%;background:linear-gradient(180deg,var(--lc,rgba(242,182,97,.55)),transparent 85%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(14px);opacity:0;transition:opacity 1s ease .1s,background 1.2s;pointer-events:none}
.lamp-scene .floor{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.lamp-scene .dust{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.4s;background:radial-gradient(3px 3px at 22% 40%,#FFE2AE 50%,transparent 51%),radial-gradient(2px 2px at 36% 58%,#FFE2AE 50%,transparent 51%),radial-gradient(3px 3px at 28% 70%,#FFD0B8 50%,transparent 51%),radial-gradient(2px 2px at 44% 46%,#FFE2AE 50%,transparent 51%);filter:blur(.6px);animation:drift 9s ease-in-out infinite alternate}
.lamp{position:relative;justify-self:center;width:220px;height:min(62vh,520px);z-index:1}
.lamp svg{width:100%;height:100%;overflow:visible}
.lamp .shade{transition:fill 1s}
.lamp .bulb{opacity:0;transition:opacity .6s}
.cord{all:unset;position:absolute;left:calc(50% + 34px);top:118px;width:var(--hit);height:120px;margin-left:-22px;cursor:grab;display:flex;justify-content:center;touch-action:none}
.cord::before{content:"";width:2px;height:86px;background:linear-gradient(#8A7A62,#C9B28A);transition:height .35s var(--spring)}
.cord::after{content:"";position:absolute;top:84px;width:14px;height:20px;border-radius:7px;background:radial-gradient(circle at 40% 35%,#F6DDAE,#B58C4A);box-shadow:0 4px 10px rgba(0,0,0,.5);transition:top .35s var(--spring)}
.cord.pull::before{height:112px}.cord.pull::after{top:110px}
.lamp-scene .card-login{position:relative;z-index:2;opacity:0;transform:translateY(18px) scale(.98);filter:blur(6px);transition:opacity .9s ease .35s,transform .9s var(--spring) .35s,filter .9s ease .35s;pointer-events:none;border-radius:var(--r-l);padding:32px;display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);box-shadow:0 30px 70px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);color:#F4EFE7}
.lamp-scene .card-login .muted{color:#C4BCB0}
.lamp-scene .card-login .field label{color:#C4BCB0}
.lamp-scene .card-login input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#F4EFE7}
.lamp-scene .card-login .btn.ghost{color:#F4EFE7;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.lamp-scene .card-login h2{font-size:clamp(28px,3.4vw,38px)}
.lamp-scene .card-login h2 .serif{display:block;color:#F5C784}
.lamp-scene .hint{position:absolute;left:clamp(18px,4vw,56px);bottom:24px;z-index:2;font:600 12px var(--f-mono);letter-spacing:.08em;color:#9C9387;transition:opacity .6s}
.lamp-scene.on .room{opacity:1}.lamp-scene.on .cone{opacity:.9}.lamp-scene.on .dust{opacity:.8}
.lamp-scene.on .bulb{opacity:1}
.lamp-scene.on .card-login{opacity:1;transform:none;filter:none;pointer-events:auto}
.lamp-scene.on .hint{opacity:0}
.lamp-scene.rose{--lc:rgba(232,120,130,.5)}
@media (max-width:820px){
  .lamp-scene{grid-template-columns:1fr;padding:20px 16px 28px;min-height:auto;gap:0}
  .lamp{height:300px;width:160px;margin-bottom:-40px}
  .cord{top:84px;left:calc(50% + 24px)}
  .lamp-scene .cone{left:calc(50% - 160px);width:320px;top:110px;height:60%}
  .lamp-scene{--lx:50%}
  .lamp-scene .card-login{padding:24px 20px}
  .lamp-scene .hint{position:static;text-align:center;margin-top:12px}
}

/* ---------- Phòng thi: yên tĩnh, rõ ràng như máy thi ---------- */
body.in-exam{background:var(--bg)}
body.in-exam::before{display:none}
.xbar{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,var(--bg-2),var(--bg));border-bottom:1px solid var(--stroke)}
.xbar-in{max-width:1400px;margin:0 auto;padding:6px 16px;display:flex;align-items:center;gap:14px;min-height:60px}
.xbar .who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.xbar .who b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xbar .who span{font-size:12px;color:var(--muted)}
.xbar .clock{margin-left:auto;font:600 22px var(--f-mono);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;padding:4px 14px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--stroke)}
.xbar .clock.low{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.xbar .clock small{font:600 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.xbar .xbtn{all:unset;cursor:pointer;min-height:var(--hit);padding:0 18px;border-radius:var(--pill);font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:6px;color:var(--on-lamp);background:linear-gradient(135deg,#FFD596,var(--lamp) 45%,var(--lamp-2))}
@media (max-width:640px){.xbar-in{gap:8px;padding:6px 10px}.xbar .who span{display:none}.xbar .clock{font-size:17px;padding:4px 10px}.xbar .clock small{display:none}.xbar .xbtn{padding:0 12px;font-size:13px}}
.xbody{max-width:1400px;margin:0 auto;padding:16px 16px 150px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.pane{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-m);min-width:0}
.pane.stick{position:sticky;top:76px;max-height:calc(100vh - 170px);overflow:auto}
.pane-in{padding:22px 26px}
.mview{display:none}
@media (max-width:900px){
  .split{grid-template-columns:1fr}.pane.stick{position:static;max-height:none}
  .mview{display:flex;position:sticky;top:66px;z-index:20;margin:0 auto 12px;width:max-content;max-width:100%}
  .split[data-mv="a"] > :nth-child(2),.split[data-mv="b"] > :nth-child(1){display:none}
  .pane-in{padding:18px}
}
.passage h3{font-family:var(--f-read);font-style:italic;font-weight:600;font-size:27px;margin-bottom:6px;letter-spacing:-.01em}
.passage .sub{font-size:13px;color:var(--muted);margin-bottom:16px;font-style:italic;font-family:var(--f-read)}
.passage p{font-family:var(--f-read);font-weight:400;font-size:17.5px;line-height:1.8;margin:0 0 14px}
.passage .pl{font-family:var(--f-ui);font-weight:800;color:var(--lamp-text);margin-right:8px}
mark.hl{background:var(--hl);color:inherit;border-radius:2px;padding:0 1px}
.qgroup{padding:20px 22px;border-bottom:1px solid var(--stroke);display:flex;flex-direction:column;gap:12px}
.qgroup:last-child{border-bottom:none}
.qgroup h4{font-size:15px;font-weight:800}
.instr{font-size:14px;color:var(--muted)}
.instr b,.instr strong{color:var(--ink)}
.qn{display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 6px;border-radius:8px;font:600 12px var(--f-mono);background:var(--glass);border:1px solid var(--stroke);color:var(--ink);margin-right:8px;vertical-align:middle;flex:none}
.qn.on{background:var(--lamp);color:var(--on-lamp);border-color:transparent}
.boxed{border-radius:var(--r-s);border:1px solid var(--stroke);background:var(--paper);padding:16px 20px;display:flex;flex-direction:column;gap:6px;line-height:2.3}
.boxed .ttl{font-weight:800;line-height:1.4;text-align:center}
.boxed .hd{font-weight:800;margin-top:6px;line-height:1.4}
.gap{font:inherit;font-size:15px;border:none;border-bottom:2px solid var(--faint);background:var(--glass);color:var(--ink);width:160px;max-width:100%;min-height:36px;padding:2px 8px;border-radius:6px 6px 0 0}
.gap:focus{outline:none;border-bottom-color:var(--lamp);background:var(--lamp-soft)}
.mcq{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mcq legend{font-weight:700;margin-bottom:6px;padding:0;display:flex;align-items:flex-start}
.mcq label{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;min-height:var(--hit);border-radius:var(--r-s);cursor:pointer;border:1px solid transparent}
.mcq label:hover{background:var(--glass)}
.mcq label:has(input:checked){background:var(--lamp-soft);border-color:var(--stroke-2)}
.mcq input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--lamp);flex:none}
.mcq .L{font:700 13px var(--f-mono);color:var(--muted);width:16px;flex:none;padding-top:1px}
.match{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center}
.match .q{display:flex;align-items:center;min-height:var(--hit)}
select.pick{font:inherit;font-size:14px;min-height:var(--hit);padding:0 12px;border-radius:var(--r-s);background:var(--glass);border:1px solid var(--stroke);color:var(--ink);max-width:200px}
select.pick option{background:var(--surface);color:var(--ink)}
select.pick.has{border-color:var(--lamp);background:var(--lamp-soft);font-weight:700}
.opts{border-radius:var(--r-s);background:var(--glass);border:1px solid var(--stroke);padding:12px 16px;font-size:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px}
.opts.one{grid-template-columns:1fr}
.flagbtn{all:unset;cursor:pointer;width:var(--hit);height:var(--hit);display:inline-grid;place-items:center;border-radius:var(--r-s);color:var(--faint);flex:none;margin-left:auto}
.flagbtn[aria-pressed="true"]{color:var(--lamp-text);background:var(--lamp-soft)}
.qrow{display:flex;align-items:flex-start;gap:4px}
.qrow > :first-child{flex:1;min-width:0}
@media (max-width:520px){.match{grid-template-columns:1fr}.match .qrow{margin-bottom:8px}select.pick{max-width:none;flex:1}.qgroup{padding:16px}.boxed{padding:12px 14px;line-height:2.4}.gap{width:132px}}
.qnav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:linear-gradient(0deg,var(--bg-2),var(--bg));border-top:1px solid var(--stroke)}
.qnav-in{max-width:1400px;margin:0 auto;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center}
.qnav .parts{display:flex;gap:14px;overflow-x:auto;flex:1;scrollbar-width:none;padding:2px}
.qnav .part{display:flex;align-items:center;gap:6px;flex:none}
.qnav .part > button.pl{all:unset;cursor:pointer;font-weight:800;font-size:13px;white-space:nowrap;padding:0 14px;min-height:var(--hit);display:inline-flex;align-items:center;border-radius:var(--pill);border:1px solid transparent}
.qnav .part > button.pl[aria-current="true"]{background:var(--lamp-soft);border-color:var(--stroke-2)}
.qnav .nums{display:flex;gap:3px}
.qnav .num{all:unset;cursor:pointer;width:30px;height:var(--hit);display:grid;place-items:center;font:600 12px var(--f-mono);border-radius:8px;position:relative;color:var(--ink)}
.qnav .num::after{content:"";position:absolute;left:6px;right:6px;bottom:6px;height:3px;border-radius:2px;background:var(--stroke-2)}
.qnav .num.done::after{background:var(--lamp)}
.qnav .num.flag{color:var(--lamp-text)}
.qnav .num.flag::before{content:"";position:absolute;top:6px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--lamp-2)}
.qnav .num:hover{background:var(--glass)}
.qnav .count{font:600 13px var(--f-mono);color:var(--muted);white-space:nowrap}
.qnav .arrows{display:flex;gap:6px}
.qnav .arrows button{all:unset;cursor:pointer;width:var(--hit);height:var(--hit);display:grid;place-items:center;border-radius:50%;background:var(--glass-2);border:1px solid var(--stroke);color:var(--ink)}
@media (max-width:760px){.qnav .nums{display:none}.qnav-in{padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));gap:6px}.qnav .count{display:none}}
.player{display:flex;align-items:center;gap:14px;border-radius:var(--r-m);padding:12px 18px;margin-bottom:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--stroke)}
.player .bars{display:flex;gap:3px;align-items:end;height:22px}
.player .bars i{width:4px;background:var(--lamp);border-radius:2px;height:30%;opacity:.35}
.player.on .bars i{animation:eq 1s ease-in-out infinite;opacity:1}
.player.on .bars i:nth-child(2){animation-delay:.15s}.player.on .bars i:nth-child(3){animation-delay:.3s}.player.on .bars i:nth-child(4){animation-delay:.45s}.player.on .bars i:nth-child(5){animation-delay:.6s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.player .st{flex:1;min-width:180px;font-size:14px}
.player .st b{display:block}
.player input[type=range]{accent-color:var(--lamp);width:110px}
.player .vol{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.lpart{border-radius:var(--r-m);margin-bottom:14px;background:var(--surface);border:1px solid var(--stroke)}
.lpart > header{padding:16px 22px;border-bottom:1px solid var(--stroke)}
textarea.essay{width:100%;min-height:58vh;font:400 17px/1.8 var(--f-read);padding:22px 24px;border:none;background:transparent;color:var(--ink);resize:vertical;display:block}
textarea.essay:focus{outline:none}
.wfoot{display:flex;justify-content:space-between;gap:10px;padding:12px 22px;border-top:1px solid var(--stroke);font-size:13px;color:var(--muted)}
.wc{font:600 13px var(--f-mono)}
.wc.ok{color:var(--ok)}
.visual svg{display:block;width:100%;height:auto}
.v-grid{stroke:var(--stroke);stroke-width:1}
.v-axis{stroke:var(--faint);stroke-width:1}
.v-txt{fill:var(--muted);font:12px var(--f-mono)}
.flow{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.flow .fs{border-radius:var(--r-s);padding:10px 12px;font-size:14px;display:flex;flex-direction:column;gap:4px;background:var(--glass);border:1px solid var(--stroke)}
.flow .fs b{font:600 12px var(--f-mono);color:var(--lamp-text)}
.table-wrap{overflow-x:auto;border-radius:var(--r-m);background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--stroke)}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--stroke);font-size:14px;vertical-align:top}
th{font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
tr:last-child td{border-bottom:none}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media (max-width:900px){.sp-stage{grid-template-columns:1fr}.sp-stage aside{order:-1}}
.examiner{border-radius:var(--r-m);padding:28px;display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--stroke)}
.examiner .q{font:italic 600 25px/1.4 var(--f-read)}
.cue{border-radius:var(--r-s);padding:18px 20px;display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--stroke)}
.cue ul{margin:0;padding-left:20px}
.rec{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rec .dot{width:12px;height:12px;border-radius:50%;background:var(--faint)}
.rec.on .dot{background:var(--bad);box-shadow:0 0 12px var(--bad);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}
.splist{font-size:14px}
.splist ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.splist .cur{font-weight:800;color:var(--lamp-text)}

/* ---------- Phiếu điểm ---------- */
.report{border-radius:var(--r-l);overflow:hidden;background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--stroke);box-shadow:var(--shadow)}
.report-h{position:relative;padding:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--stroke);overflow:hidden}
.report-h::before{content:"";position:absolute;right:-60px;top:-80px;width:340px;height:340px;background:radial-gradient(closest-side,var(--glow),transparent)}
.report-h .nm{font:italic 600 28px var(--f-read);letter-spacing:-.02em;margin-top:6px}
.report-h .ov{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:132px;height:132px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,226,174,.35),var(--lamp-soft));border:1px solid var(--stroke-2);box-shadow:0 0 50px -10px var(--glow)}
.report-h .ov b{font:italic 600 48px/1 var(--f-read);color:var(--lamp-text);letter-spacing:-.03em}
.report-h .ov span{font:600 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.band{padding:20px 24px;border-right:1px solid var(--stroke);display:flex;flex-direction:column;gap:2px}
.band:last-child{border-right:none}
.band span{font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.band b{font:italic 600 38px/1.15 var(--f-read);letter-spacing:-.02em}
.band small{font-size:13px;color:var(--muted)}
@media (max-width:640px){.bands{grid-template-columns:repeat(2,minmax(0,1fr))}.band:nth-child(2){border-right:none}.band:nth-child(-n+2){border-bottom:1px solid var(--stroke)}.report-h{padding:22px}.report-h .ov{width:104px;height:104px}.report-h .ov b{font-size:38px}}
.tabs.slider{align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}
@media (max-width:640px){.tabs.slider{align-self:stretch}.tabs.slider > button{flex:1;padding:0 8px;font-size:13px}}
.rv tr.bad td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.rv tr.ok td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.rv td.ans{font-family:var(--f-mono);font-size:13px}
@media (max-width:640px){.rv thead{display:none}.rv tr{display:grid;grid-template-columns:44px 1fr;gap:2px 10px;padding:12px 14px;border-bottom:1px solid var(--stroke)}.rv td{border:none;padding:0}.rv td:first-child{grid-row:span 3;box-shadow:none!important}.rv tr.bad{box-shadow:inset 3px 0 0 var(--bad)}.rv tr.ok{box-shadow:inset 3px 0 0 var(--ok)}.rv td:nth-child(3)::before{content:"Đáp án: ";color:var(--faint)}}
.crit{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.crit .card b.mono{font:italic 600 34px var(--f-read);color:var(--lamp-text)}
.fix{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-left:3px solid var(--lamp);border-radius:0 var(--r-s) var(--r-s) 0;background:var(--glass);font-size:14px}
.fix del{color:var(--bad)}
.fix ins{color:var(--ok);text-decoration:none;font-weight:700}
.essay-view{white-space:pre-wrap;border-radius:var(--r-s);background:var(--paper);border:1px solid var(--stroke);padding:18px 20px;font:400 16px/1.75 var(--f-read)}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--stroke-2);border-top-color:var(--lamp);animation:rot .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- Bài giảng ---------- */
.lesson-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:start}
.toc{position:sticky;top:100px;display:flex;flex-direction:column;gap:2px;border-radius:var(--r-m);padding:10px}
.toc a{text-decoration:none;color:var(--muted);font-size:14px;padding:0 12px;min-height:var(--hit);display:flex;align-items:center;border-radius:var(--r-s);line-height:1.35;font-weight:600}
.toc a:hover{color:var(--ink);background:var(--glass)}
.toc a[aria-current="page"]{background:var(--lamp-soft);color:var(--ink)}
.toc .grp{font:600 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lamp-text);padding:12px 12px 4px}
@media (max-width:860px){.lesson-layout{grid-template-columns:1fr}.toc{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}.toc .grp{display:none}.toc a{white-space:nowrap;flex:none}}
.md{display:flex;flex-direction:column;gap:12px;line-height:1.75;font-size:16px}
.md h1{font:italic 600 34px/1.15 var(--f-read)}.md h2{font-size:21px;margin-top:12px}.md h3{font-size:17px;margin-top:6px}
.md ul,.md ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.md blockquote{margin:0;border-left:3px solid var(--lamp);padding:10px 16px;border-radius:0 var(--r-s) var(--r-s) 0;background:var(--lamp-soft)}
.md code{font-family:var(--f-mono);font-size:13px;background:var(--glass);border:1px solid var(--stroke);padding:1px 6px;border-radius:5px}

dialog{border:1px solid var(--stroke);border-radius:var(--r-l);padding:0;max-width:min(520px,calc(100vw - 32px));background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(5,6,9,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dlg{padding:28px;display:flex;flex-direction:column;gap:14px}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--surface);color:var(--ink);border:1px solid var(--stroke-2);padding:12px 20px;border-radius:var(--pill);font-size:14px;font-weight:600;z-index:90;max-width:calc(100vw - 32px);box-shadow:var(--shadow-s)}
.reveal{animation:rise .7s var(--spring) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}