/* CTF Study — nen console lanh, mot cot doc, cung ngon ngu thiet ke voi
   koth-playbook.html va ad-explained.html. */
:root{
  --bg:#0c1116;
  --surface:#141c22;
  --surface-2:#1b242b;
  --surface-3:#222d35;
  --ink:#e6edf2;
  --ink-2:#97a6b1;
  --ink-3:#73828e;
  --line:#27333c;
  --line-2:#36444f;
  --accent:#4ec9c0;
  --accent-soft:#11302f;
  --ok:#4fbe85;
  --ok-soft:#11291d;
  --warn:#d99b2b;
  --warn-soft:#2c2412;
  --crit:#e8705f;
  --crit-soft:#301916;
  --koth:#93a4e8;
  --ad:#4ec9c0;
  --display:"Archivo","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.16;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(23px,3.4vw,31px);font-weight:800}
h2{font-size:clamp(19px,2.6vw,24px);font-weight:700}
h3{font-size:17px;font-weight:700}
h4{font-size:15px;font-weight:700}
p{margin:0}
a{color:var(--accent);text-underline-offset:2px}
button{font-family:inherit;font-size:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
code{font-family:var(--mono);font-size:.87em;background:var(--surface-2);
  padding:1px 4px;border-radius:3px;overflow-wrap:anywhere}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.small{font-size:13.6px;color:var(--ink-2)}
.xs{font-size:12.4px;color:var(--ink-3)}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- topbar ---------- */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.top .wrap{display:flex;align-items:center;gap:16px;padding-block:11px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--display);font-weight:800;font-size:17px}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--accent);display:block;flex:0 0 auto}
.topstat{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap;align-items:center}
.ts{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ts b{color:var(--ink);font-weight:700}
.ts.on b{color:var(--accent)}

nav.tabs{background:var(--surface-2);border-bottom:1px solid var(--line);
  position:sticky;top:51px;z-index:29}
nav.tabs .wrap{display:flex;gap:3px;overflow-x:auto;padding-block:6px;scrollbar-width:thin}
nav.tabs button{flex:0 0 auto;background:none;border:0;color:var(--ink-3);
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:7px 12px;border-radius:4px}
nav.tabs button:hover{background:var(--surface);color:var(--ink)}
nav.tabs button.on{background:var(--surface);color:var(--accent)}

main{padding-block:24px 60px}
section.view{display:flex;flex-direction:column;gap:16px}

/* ---------- card ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:17px 19px}
.card.pad0{padding:0;overflow:hidden}
.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.grid>*{min-width:0}
/* The trong luoi cao bang nhau, nen ghim nut xuong day: tieu de dai ngan khac nhau
   van khong lam nut moi the lech mot kieu. */
.grid>.card{display:flex;flex-direction:column}
.grid>.card>.btn{margin-top:auto;align-self:flex-start}
.grid>.card>*:nth-last-child(2){margin-bottom:9px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}

.pill{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:999px;
  border:1px solid currentColor;white-space:nowrap}
/* Trong o bang, chip di ngay sau ten nen phai tu tach ra: o day khong co
   flex gap nao lam viec do ho. Chi nham vao <td> — cac cho khac da nam
   trong hang flex co gap rieng, them margin vao se thanh thua. */
td > .pill:not(:first-child){margin-left:8px}
.p-koth{color:var(--koth)} .p-ad{color:var(--ad)}
.p-ok{color:var(--ok)} .p-warn{color:var(--warn)} .p-crit{color:var(--crit)}
.p-acc{color:var(--accent)} .p-mute{color:var(--ink-3)}

/* ---------- stat ---------- */
.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:12px 14px}
.stat .k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-family:var(--display);font-weight:800;font-size:25px;margin-top:3px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.stat .v small{font-size:13px;font-weight:600;color:var(--ink-3)}
.stat .n{font-size:12.4px;color:var(--ink-3);margin-top:3px}

/* ---------- progress ---------- */
.track{height:7px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.track i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.track.thin{height:4px}

/* ---------- buttons ---------- */
.btn{background:var(--accent);color:#07130f;border:1px solid var(--accent);border-radius:5px;
  padding:9px 16px;font-weight:700;font-size:14px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:none;color:var(--ink-2);border-color:var(--line-2)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink-3);background:var(--surface-2)}
.btn.warn{background:var(--warn);border-color:var(--warn);color:#1a1405}
.btn.crit{background:none;color:var(--crit);border-color:var(--crit)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}

input,select,textarea{font-family:var(--body);font-size:14px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:8px 10px}
input.mono,select.mono{font-family:var(--mono)}
textarea{resize:vertical;min-height:70px;width:100%}
label.fld{display:flex;flex-direction:column;gap:5px}
label.fld>span{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- session hero ---------- */
.hero{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 6px 6px 0;padding:19px 21px;display:flex;flex-direction:column;gap:11px}
.hero.quiz{border-left-color:var(--koth)}
.hero.over{border-left-color:var(--crit)}
.hero .when{font-family:var(--mono);font-size:11.5px;color:var(--accent);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.hero.over .when{color:var(--crit)}
.hero .topic{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.hero .what{font-size:14.8px;color:var(--ink-2);max-width:76ch}
.hero .meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-3);border-top:1px solid var(--line);padding-top:11px}

/* ---------- steps ---------- */
/* Các bước: mỗi bước một hàng riêng, cách đều, có vạch ngăn mảnh cho dễ lần theo.
   Số thứ tự tự sinh để biết đang ở bước mấy trong mấy. */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  counter-reset:stp;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:auto auto 1fr;gap:0 12px;align-items:start;
  padding:11px 4px;border-bottom:1px solid var(--line);transition:background .15s}
.steps li:hover{background:var(--surface-2)}
.steps li::before{counter-increment:stp;content:counter(stp);font-family:var(--mono);
  font-size:11px;font-weight:700;color:var(--ink-3);padding-top:3px;min-width:14px;
  text-align:right;font-variant-numeric:tabular-nums}
.steps input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:2px 0 0;
  border:1.5px solid var(--line-2);border-radius:5px;background:var(--surface-2);
  cursor:pointer;position:relative;flex:0 0 auto}
.steps input:checked{background:var(--accent);border-color:var(--accent)}
.steps input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;
  border:solid #07130f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.steps label{font-size:14.6px;line-height:1.68;color:var(--ink-2);min-width:0;cursor:pointer}
.steps li:has(input:checked){background:transparent}
.steps li:has(input:checked)::before{color:var(--accent)}
.steps input:checked+label{color:var(--ink-3);text-decoration:line-through;
  text-decoration-color:var(--line-2)}

/* The "Cac buoc": moi khoi la mot tang rieng, nen "San pham phai co" khong con
   dinh vao "Nguon hoc". Khong phan tu nao trong card co margin, gap lo het. */
.card.task{display:flex;flex-direction:column;gap:17px}
.card.task>h3{margin-bottom:-5px}
.srcs>h4{margin-bottom:1px}

/* San pham phai co: kieu khung terminal, co dau nhac $ o truoc */
.out{position:relative;font-size:13.8px;background:var(--surface-2);
  border:1px dashed var(--line-2);border-left:2px solid var(--accent);
  border-radius:5px;padding:11px 13px 11px 30px}
.out::before{content:"$";position:absolute;left:12px;top:10px;font-family:var(--mono);
  font-size:12px;font-weight:700;color:var(--accent);opacity:.75}
.out b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:3px}

.srcs{display:flex;flex-direction:column;gap:7px}
.srcs li{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:baseline;font-size:13.8px}
.srcs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.kind{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--line-2);border-radius:3px;padding:2px 5px;
  color:var(--ink-3);white-space:nowrap}
.srcs a{font-weight:600;word-break:break-word}
.srcs .n{display:block;font-size:12.8px;color:var(--ink-3)}

/* ---------- timer ---------- */
.timer{font-family:var(--mono);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- roadmap ---------- */
.wk{border:1px solid var(--line);border-radius:5px;background:var(--surface);overflow:hidden}
.wk.done{border-color:var(--ok)}
.wk.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.wkh{display:grid;grid-template-columns:auto 1fr auto;gap:6px 13px;align-items:center;
  width:100%;background:none;border:0;text-align:left;padding:12px 15px;color:inherit}
.wkh:hover{background:var(--surface-2)}
.wkn{font-family:var(--display);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);border-radius:4px;
  padding:5px 8px;grid-row:1/span 2}
.wk.done .wkn{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.wk.cur .wkn{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
/* Cột phải có grid-row rõ ràng nên nó được xếp TRƯỚC các ô tự xếp; không ghim cột cho
   tiêu đề thì tiêu đề bị đẩy sang cột 3. Ghim cả ba cho chắc. */
.wkt{grid-column:2;grid-row:1;font-family:var(--display);font-weight:700;font-size:15.5px;
  min-width:0;text-align:left}
.wks{grid-column:2;grid-row:2;font-size:12.6px;color:var(--ink-3);min-width:0}
.wkr{grid-column:3;grid-row:1/span 2;display:flex;align-items:center;gap:8px;justify-self:end}
.dots{display:flex;gap:3px}
.dots i{width:8px;height:8px;border-radius:2px;background:var(--surface-3);display:block}
.dots i.on{background:var(--ok)}
.dots i.q{border-radius:50%}
.dots i.q.on{background:var(--koth)}
.wkb{border-top:1px solid var(--line);padding:14px 15px;display:flex;flex-direction:column;gap:12px}

/* ---------- quiz ---------- */
.q{display:flex;flex-direction:column;gap:10px}
.q .qn{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-3)}
.q .qtext{font-size:15.4px;font-weight:500;white-space:pre-wrap}
.q pre.qout{margin:0;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;
  padding:11px 12px;overflow-x:auto;font-family:var(--mono);font-size:12.6px;line-height:1.55;white-space:pre}
.opts{display:flex;flex-direction:column;gap:7px}
.opt{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;border:1px solid var(--line);
  border-radius:5px;padding:10px 13px;cursor:pointer;background:var(--surface)}
.opt:hover{border-color:var(--line-2);background:var(--surface-2)}
.opt input{margin:3px 0 0;accent-color:var(--accent);flex:0 0 auto}
.opt .ok{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink-3)}
.opt .ol{font-size:14.4px;min-width:0;overflow-wrap:break-word}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--crit);background:var(--crit-soft)}
.graded .opt{cursor:default}
.expl{font-size:13.8px;color:var(--ink-2);border-left:3px solid var(--line-2);padding:5px 0 5px 12px}
.expl.bad{border-left-color:var(--crit)}
.expl b{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);display:block}
.qbar{position:sticky;bottom:0;background:var(--surface-2);border-top:1px solid var(--line-2);
  padding:11px 0;margin-top:8px;z-index:10}

/* ---------- evaluation ---------- */
.narr{font-size:15px;line-height:1.72;max-width:78ch}
.narr h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:18px 0 6px}
.narr h4:first-child{margin-top:0}
.narr ul,.narr ol{margin:8px 0;padding-left:21px;display:flex;flex-direction:column;gap:5px}
.narr li{color:var(--ink-2)}
.narr em{color:var(--ink)}
.narr strong{color:var(--ink)}
.narr p{margin:7px 0;color:var(--ink-2)}

.taskbar{display:flex;flex-direction:column;gap:7px}
.tb{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;font-size:13.6px}
.tb .id{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.tb .bar{height:16px;background:var(--surface-3);border-radius:3px;overflow:hidden;position:relative}
.tb .bar i{display:block;height:100%;background:var(--ok)}
.tb .bar i.mid{background:var(--warn)}
.tb .bar i.low{background:var(--crit)}
.tb .bar span{position:absolute;left:7px;top:0;line-height:16px;font-family:var(--mono);
  font-size:10.5px;color:var(--ink);text-shadow:0 0 3px rgba(0,0,0,.6)}
.tb .pc{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);text-align:right}

/* ---------- misc ---------- */
.empty{color:var(--ink-3);font-size:14px;padding:22px;text-align:center;
  border:1px dashed var(--line-2);border-radius:6px}
.quote{background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 5px 5px 0;
  padding:12px 15px;font-style:italic;color:var(--ink-2);font-size:14.6px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:90;
  background:var(--surface);border:1px solid var(--accent);color:var(--ink);
  border-radius:6px;padding:11px 18px;font-size:14px;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.toast.bad{border-color:var(--crit)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line-2);
  border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}.track i{transition:none}}
hr.sep{border:0;border-top:1px solid var(--line);margin:4px 0}

/* ==================================================================
   Chuyển động. Mọi hiệu ứng đều tắt khi hệ thống yêu cầu giảm chuyển động.
   ================================================================== */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:-220px 0}to{background-position:260px 0}}
@keyframes pulseOk{0%{box-shadow:0 0 0 0 rgba(79,190,133,.45)}70%{box-shadow:0 0 0 11px rgba(79,190,133,0)}100%{box-shadow:0 0 0 0 rgba(79,190,133,0)}}
@keyframes shakeX{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
@keyframes sweep{to{transform:translateX(100%)}}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px)}18%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Cho phep chuyen dong goc quat cua vong tron tien do: khong khai bao kieu thi
   conic-gradient nhay thang den gia tri moi thay vi chay muot. */
@property --p{syntax:"<number>";initial-value:0;inherits:false}

/* Quang sang, luoi nen, raster va vet quet nam o web/lab.css (lop `.labfx`).
   Truoc day chung o body::before/::after va bi khai bao hai lan trong chinh file
   nay, nen ban dau tien khong bao gio hien ra. */
html{background:var(--bg);scrollbar-color:var(--line-2) var(--surface-2);scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--surface-2)}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;
  border:2px solid var(--surface-2)}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* vào trang: các khối nổi lên lần lượt */
section.view>*{animation:riseIn .34s cubic-bezier(.22,.9,.3,1) both}
section.view>*:nth-child(1){animation-delay:.02s}
section.view>*:nth-child(2){animation-delay:.07s}
section.view>*:nth-child(3){animation-delay:.12s}
section.view>*:nth-child(4){animation-delay:.17s}
section.view>*:nth-child(n+5){animation-delay:.2s}

.card,.hero,.wk,.stat{transition:border-color .22s,box-shadow .22s,background .22s,
  transform .22s cubic-bezier(.22,.9,.3,1)}
.card:hover,.wk:hover{border-color:var(--line-2);box-shadow:0 6px 22px -12px rgba(0,0,0,.8)}
.stat{position:relative;overflow:hidden}
.stat:hover{transform:translateY(-3px);border-color:var(--line-2);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.85),0 0 0 1px rgba(78,201,192,.14) inset}
.stat::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.055) 50%,transparent 65%);
  transform:translateX(-100%)}
.stat:hover::after{animation:sweep .75s ease}

/* nut: nang nhe + vet sang quet ngang khi re chuot, lun xuong khi bam */
.btn{position:relative;overflow:hidden;
  transition:filter .15s,background .15s,color .15s,border-color .15s,box-shadow .2s,
    transform .11s cubic-bezier(.22,.9,.3,1)}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%)}
.btn:hover::after{animation:sweep .62s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(78,201,192,.7)}
.btn.ghost:hover,.btn.crit:hover{box-shadow:0 6px 16px -10px rgba(0,0,0,.9)}
.btn.warn:hover{box-shadow:0 6px 16px -8px rgba(217,155,43,.7)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:disabled{transform:none;box-shadow:none}
.btn:disabled::after{display:none}

nav.tabs button{transition:background .16s,color .16s}
nav.tabs button.on{position:relative}
nav.tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:1px;height:2px;
  background:var(--accent);border-radius:2px;transform-origin:center;
  box-shadow:0 0 10px -1px var(--accent);
  animation:growX .26s cubic-bezier(.22,.9,.3,1) both}

/* thanh tiến độ: đổ đầy mượt, có vệt sáng chạy khi đang tiến */
.track i{position:relative;overflow:hidden}
.track i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  background-size:220px 100%;animation:shimmer 2.1s linear infinite}

/* vòng tròn tiến độ ở đầu trang */
.ring{--p:0;width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--surface-3) 0);
  box-shadow:0 0 0 1px rgba(78,201,192,.16),0 0 15px -5px rgba(78,201,192,.55);
  transition:--p 1s cubic-bezier(.3,.9,.3,1),box-shadow .3s}
.ring i{width:36px;height:36px;border-radius:50%;background:var(--surface);display:grid;
  place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink)}

/* hero: viền trái sáng dần khi hover */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--accent);
  opacity:0;transition:opacity .25s}
.hero:hover::before{opacity:.5}

/* tick xong một bước: nảy nhẹ */
.steps input{transition:background .16s,border-color .16s,transform .12s}
.steps input:active{transform:scale(.88)}
.steps input:checked{animation:popIn .2s ease}
.steps label{transition:color .18s,opacity .18s}

/* quiz */
/* dap an: vach mau moc ra ben trai khi re chuot, giu nguyen khi da cham */
.opt{position:relative;overflow:hidden;
  transition:border-color .16s,background .16s,transform .14s cubic-bezier(.22,.9,.3,1)}
.opt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transition:transform .18s cubic-bezier(.22,.9,.3,1)}
.opt:hover::before{transform:scaleY(1)}
.opt:hover{transform:translateX(3px);border-color:var(--line-2)}
.opt.right{animation:pulseOk .7s ease}
.opt.right::before{background:var(--ok);transform:scaleY(1)}
.opt.wrong{animation:shakeX .45s ease}
.opt.wrong::before{background:var(--crit);transform:scaleY(1)}
.expl{animation:riseIn .26s ease both}
.q{animation:riseIn .3s cubic-bezier(.22,.9,.3,1) both}

/* tuần mở ra */
.wkb{animation:riseIn .26s ease both}
.wk.cur{animation:popIn .3s ease both}

/* toast trượt lên */
.toast{animation:riseIn .26s cubic-bezier(.22,.9,.3,1) both}

/* ---- huong dan 3 buoc: chi hien mot lan, ngay sau khi thiet lap xong ---- */
.gd-ov{position:fixed;inset:0;z-index:99;background:rgba(6,10,14,.72);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;
  padding:18px;animation:riseIn .2s both}
.gd-sheet{background:var(--card);border:1px solid var(--border);border-radius:14px;
  max-width:520px;width:100%;padding:22px 22px 18px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.gd-sheet h2{font-family:var(--display);font-size:20px;margin:0 0 4px}
.gd-sheet>p{margin:0 0 14px}
.gd-step{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--border)}
.gd-step b.n{font-family:var(--display);font-size:15px;color:var(--accent);
  min-width:20px;text-align:center}
.gd-step div{font-size:14px;line-height:1.5}
.gd-step code{font-family:var(--mono);font-size:12.5px;padding:1px 5px;border-radius:4px;
  background:rgba(255,255,255,.06)}
.gd-sheet .row{margin-top:16px}

/* ---- chan trang: ban quyen ---- */
.sitefoot{border-top:1px solid var(--line);margin-top:30px;padding:16px 0 26px;
  font-size:12px;color:var(--ink-3);text-align:center;line-height:1.6}
.sitefoot b{color:var(--ink-2);font-weight:700}

/* điểm cộng bay lên khi xong một buổi */
.floaty{position:fixed;z-index:95;font-family:var(--display);font-weight:800;font-size:20px;
  color:var(--ok);pointer-events:none;animation:floatUp 1.5s ease forwards}

/* ==================================================================
   Hoa tiet terminal/SOC. Giu rat nhat de khong lam kho doc chu.
   ================================================================== */
@keyframes caret{0%,46%{opacity:1}50%,96%{opacity:0}100%{opacity:1}}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(78,201,192,.5)}
  70%{box-shadow:0 0 0 7px rgba(78,201,192,0)}}

/* ten tool doc nhu dau nhac terminal: den bao tho + con tro nhay */
.brand i{animation:dotPulse 2.6s ease-out infinite}
.brand::after{content:"_";font-family:var(--mono);color:var(--accent);margin-left:-4px;
  animation:caret 1.15s steps(1) infinite}

/* tieu de trong card mang dau comment cua code */
.card>h3::before{content:"// ";font-family:var(--mono);font-size:.82em;
  color:var(--accent);opacity:.6}

/* tick xong mot buoc: mot vet sang quet qua dong do */
.steps li{position:relative;overflow:hidden}
.steps li::after{content:"";position:absolute;inset:0;pointer-events:none;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(78,201,192,.18),transparent)}
.steps li:has(input:checked)::after{animation:sweep .6s ease-out}

/* khung san pham: vien sang len khi re chuot */
.out{transition:border-color .2s,box-shadow .2s}
.out:hover{border-color:var(--accent);box-shadow:0 0 18px -10px var(--accent)}

/* chuỗi ngày liên tiếp */
.streak{display:inline-flex;align-items:center;gap:5px}
.streak b{color:var(--warn)}
.streak.hot b{color:var(--crit)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .btn:hover,.stat:hover,.opt:hover{transform:none}
  .brand i,.brand::after{animation:none}
  .btn::after,.stat::after,.steps li::after{display:none}
}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px}
table{border-collapse:collapse;width:100%;font-size:13.8px;min-width:460px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
@media (max-width:620px){
  nav.tabs{top:0;position:sticky}
  .top{position:static}
  .wkh{grid-template-columns:auto 1fr}
  .wkr{grid-column:1/-1;grid-row:3}
}

/* ------------------------------------------------------------------
   Màn laptop 1280×720 (vùng dùng được ~1280×680): bóp phần khung lại
   để chỗ cho nội dung, và bỏ bớt số liệu phụ trên thanh trên cùng.
   ------------------------------------------------------------------ */
@media (max-width:1400px){
  .wrap{max-width:1180px;padding:0 20px}
  .top .wrap{padding-block:8px;gap:12px}
  nav.tabs{top:45px}
  nav.tabs .wrap{padding-block:4px}
  nav.tabs button{padding:6px 10px}
  main{padding-block:16px 40px}
  section.view{gap:13px}
  .card{padding:15px 17px}
  .hero{padding:16px 19px;gap:9px}
  h1{font-size:clamp(21px,2.6vw,26px)}
  .stat{padding:10px 12px}
  .stat .v{font-size:22px}
  .topstat{gap:11px}
  .ts{font-size:11px}
  .ring{width:40px;height:40px}
  .ring i{width:31px;height:31px;font-size:9.5px}
  .hero .meta{padding-top:9px;gap:12px}
  .steps li{padding:9px 4px}
  .srcs .n{font-size:12.4px}
  .wkh{padding:10px 13px}
  .wkb{padding:12px 13px}
}
/* hẹp hơn nữa thì giấu số liệu ít dùng thay vì để nó xuống dòng */
@media (max-width:1180px){
  .topstat .ts:nth-child(4),.topstat .ts:nth-child(5){display:none}
}

/* ======================================================================== */
/* LOP NEON — vien chay, luoi nen, phat sang. Tat het bang body.nofx         */
/* (nut "Hieu ung neon" trong Cai dat, luu o localStorage sochub-fx).        */
/* ======================================================================== */
:root{
  --neon:#4ec9c0;
  --neon-2:#7df9ff;
  --neon-3:#93a4e8;
  --neon-hot:#e8705f;
}

/* Luoi nen va raster da chuyen sang web/lab.css. Giu lai dung mot dieu o day:
   Chi nang rieng <main> len tren lop nen `.labfx`.
   KHONG dat position cho .top va nav.tabs: chung dang la sticky, ghi de
   thanh relative se lam thanh tab thoi dinh va de noi dung de len. */
main{position:relative;z-index:1}

/* ---- vien neon chay quanh the chinh ---- */
@keyframes neonSpin{to{--ang:360deg}}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.hero,.gatecard.redo,.result.pass,.result.fail{position:relative}
.hero::after,.gatecard.redo::after{
  content:"";position:absolute;inset:-1px;border-radius:7px;padding:1px;
  background:conic-gradient(from var(--ang),
    transparent 0deg, transparent 205deg,
    var(--neon) 272deg, var(--neon-2) 300deg, var(--neon) 328deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:neonSpin 4.2s linear infinite;pointer-events:none;z-index:2;
}
.hero.over::after,.gatecard.redo::after{
  background:conic-gradient(from var(--ang),
    transparent 0deg,transparent 205deg,
    var(--neon-hot) 272deg,#ffb4a6 300deg,var(--neon-hot) 328deg,transparent 360deg);
  animation-duration:2.4s;
}
.hero.quiz::after{
  background:conic-gradient(from var(--ang),
    transparent 0deg,transparent 205deg,
    var(--neon-3) 272deg,#c9d4ff 300deg,var(--neon-3) 328deg,transparent 360deg);
}
body.nofx .hero::after,body.nofx .gatecard.redo::after{display:none}
@media (prefers-reduced-motion:reduce){
  .hero::after,.gatecard.redo::after{animation:none;opacity:.45}
}

/* ---- phat sang ---- */
.hero h1{text-shadow:0 0 22px rgba(78,201,192,.22)}
.stat .v{text-shadow:0 0 18px rgba(78,201,192,.18)}
.eyebrow,.brand::after{text-shadow:0 0 10px rgba(78,201,192,.55)}
.brand i{box-shadow:0 0 10px 1px var(--neon)}
.track.glow i{box-shadow:0 0 12px -1px var(--neon),0 0 3px var(--neon)}
.pill.p-acc,.pill.p-ok{box-shadow:0 0 12px -6px currentColor}
body.nofx .hero h1,body.nofx .stat .v{text-shadow:none}
body.nofx .track.glow i,body.nofx .brand i{box-shadow:none}

/* ---- gach neon duoi tieu de mot man thi ---- */
.neonline{position:relative;padding-bottom:13px;margin-bottom:3px}
.neonline::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--neon),rgba(78,201,192,.05) 70%,transparent);
}

/* ======================================================================== */
/* MINI TEST + BAI THU 7                                                     */
/* ======================================================================== */
.cdown{font-family:var(--mono);font-size:27px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink-2);letter-spacing:.02em}
.cdown.soon{color:var(--warn);animation:caret 1s step-end infinite}
.cdown.over{color:var(--crit)}
body.nofx .cdown.soon{animation:none}

.gatecard{display:flex;flex-direction:column;gap:11px;border-left:3px solid var(--warn)}
.gatecard.ok{border-left-color:var(--ok)}
.gatecard.redo{border-left-color:var(--crit)}
.gatecard>.btn{align-self:flex-start}

.result{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;
  padding:26px 18px;border-radius:6px;border:1px solid var(--line)}
.result.pass{border-color:var(--ok);background:var(--ok-soft)}
.result.fail{border-color:var(--crit);background:var(--crit-soft)}
.result .big{font-family:var(--display);font-weight:800;font-size:clamp(40px,8vw,62px);
  line-height:1}
.result.pass .big{color:var(--ok);text-shadow:0 0 30px rgba(79,190,133,.35)}
.result.fail .big{color:var(--crit);text-shadow:0 0 30px rgba(232,112,95,.3)}
.result .verdict{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase}
.result.pass .verdict{color:var(--ok)}
.result.fail .verdict{color:var(--crit)}
body.nofx .result .big{text-shadow:none}

.guide{background:var(--surface-2);border-left:3px solid var(--warn);border-radius:0 5px 5px 0;
  padding:12px 15px;display:flex;flex-direction:column;gap:5px;margin-top:14px}
.guide b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warn)}

.wrongs{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.wrongs h4{color:var(--crit)}
.wrong-item{border-left:2px solid var(--crit);padding:4px 0 4px 12px;
  display:flex;flex-direction:column;gap:4px}
.wrong-item .qtext{font-size:14.2px;font-weight:500}

/* ---- artifact cho san ---- */
.arti{border:1px solid var(--line);border-radius:5px;background:var(--surface-2);overflow:hidden}
.arti+.arti{margin-top:9px}
.arti>summary{cursor:pointer;padding:9px 13px;display:flex;gap:11px;align-items:baseline;
  flex-wrap:wrap;background:var(--surface-3);list-style:none}
.arti>summary::-webkit-details-marker{display:none}
.arti>summary::before{content:"▸";font-family:var(--mono);color:var(--accent);font-size:11px}
.arti[open]>summary::before{content:"▾"}
.arti .aname{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink)}
.arti pre.qout{margin:0;border:0;border-top:1px solid var(--line);border-radius:0;
  max-height:340px;overflow:auto}
.scene{border-left:3px solid var(--accent)}
.scene p{font-size:15px;color:var(--ink-2);max-width:80ch;margin-top:6px;white-space:pre-wrap}

/* ---- o "lam that" ---- */
.hand{border:1px solid var(--line);border-radius:5px;padding:13px 15px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:8px}
.hand+.hand{margin-top:10px}
.hand.ok{border-color:var(--ok)}
.hand .hn{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.hand.ok .hn{color:var(--ok)}
.hand .qtext{font-size:14.6px;font-weight:500}
.hin{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);
  border-radius:4px;padding:9px 11px;font-family:var(--mono);font-size:13px;resize:vertical}
.hin:focus{border-color:var(--accent)}
.hstate{color:var(--ink-3)}
.hand.ok .hstate{color:var(--ok)}

/* ---- go dan tieu de ---- */
h1.typing::after{content:"_";color:var(--accent);animation:caret 1s step-end infinite}

/* ======================================================================== */
/* LOP DONG LUC — chuoi tra loi dung, khoanh khac mo cong, cau dong luc      */
/* dang terminal, thanh do phu. Tat het bang body.nofx, va tu giam khi he    */
/* thong yeu cau giam chuyen dong.                                           */
/* ======================================================================== */

/* ---- chuoi tra loi dung lien tiep trong mot bai thi ----
   Day la phan tao dong luc trong luc dang lam, khac voi "chuoi N buoi" o
   trang chu la phan tao dong luc dai han. Bon bac de muc tang them thay
   duoc chu khong chi la mot so dem. */
.combo{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid transparent;
  color:var(--ink-3);white-space:nowrap;transition:color .18s,border-color .18s}
.combo b{font-size:15px;letter-spacing:0;font-variant-numeric:tabular-nums}
.combo.on{color:var(--neon);border-color:rgba(78,201,192,.3)}
.combo.t2{color:var(--neon-2);border-color:rgba(125,249,255,.4);
  box-shadow:0 0 12px -3px rgba(125,249,255,.5)}
.combo.t3{color:var(--warn);border-color:rgba(217,155,43,.5);
  box-shadow:0 0 16px -3px rgba(217,155,43,.55)}
.combo.t4{color:var(--neon-hot);border-color:rgba(232,112,95,.6);
  box-shadow:0 0 20px -2px rgba(232,112,95,.6)}
.combo.bump{animation:comboPop .36s cubic-bezier(.2,1.5,.4,1)}
.combo.broke{animation:comboBreak .4s ease-out;color:var(--crit);
  border-color:rgba(232,112,95,.45)}
@keyframes comboPop{0%{transform:scale(1)}38%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes comboBreak{0%{transform:translateX(0)}25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}
/* Moc chuoi bay len khi vuot mot bac: thay duoc ma khong chan noi dung. */
.combo-fly{position:absolute;pointer-events:none;font-family:var(--mono);font-weight:800;
  font-size:13px;letter-spacing:.1em;color:var(--neon-2);z-index:60;
  text-shadow:0 0 14px rgba(125,249,255,.65);animation:floatUp 1.25s ease-out forwards}
body.nofx .combo{box-shadow:none}
body.nofx .combo.bump,body.nofx .combo.broke{animation:none}
body.nofx .combo-fly{display:none}

/* ---- giat ngan khi tra loi sai ---- */
.glitch{animation:glitchX .3s steps(2,end) 1}
@keyframes glitchX{
  0%{transform:translateX(0)}
  20%{transform:translateX(-2px);filter:hue-rotate(-18deg)}
  40%{transform:translateX(3px);filter:hue-rotate(14deg)}
  60%{transform:translateX(-2px)}
  100%{transform:translateX(0);filter:none}}
body.nofx .glitch{animation:none}

/* ---- khoanh khac mo cong: dat / chua dat ---- */
.reveal{position:relative;overflow:hidden;margin:0 auto 4px;padding:7px 20px;border-radius:4px;
  font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase}
.reveal.pass{color:var(--ok);border:1px solid var(--ok);
  box-shadow:0 0 26px -6px rgba(79,190,133,.6),inset 0 0 22px -12px rgba(79,190,133,.8)}
.reveal.fail{color:var(--crit);border:1px solid var(--crit);
  box-shadow:0 0 26px -6px rgba(232,112,95,.5)}
/* Vet quet chay qua mot lan, khong lap — de no la mot khoanh khac chu khong
   phai mot thu nhap nhay mai. */
.reveal::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  animation:sweep 1.1s ease-out .12s 1 forwards}
body.nofx .reveal{box-shadow:none}
body.nofx .reveal::after{display:none}

/* ---- cau dong luc dang terminal ---- */
.quote.term{font-style:normal;font-family:var(--mono);font-size:13.4px;line-height:1.72;
  border-left-color:var(--neon);display:flex;flex-direction:column;gap:5px}
.quote.term .cat{font-size:9.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--neon);opacity:.85}
.quote.term .line::before{content:"$ ";color:var(--neon);opacity:.7}
.quote.term .line.typing::after{content:"_";color:var(--neon);
  animation:caret 1s step-end infinite}
body.nofx .quote.term .line.typing::after{content:""}

/* ---- thanh do phu he thong ---- */
.gauge{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-2);letter-spacing:.04em;flex-wrap:wrap}
.gauge .bars{letter-spacing:-.06em;font-size:13px}
.gauge .fill{color:var(--neon);text-shadow:0 0 10px rgba(78,201,192,.5)}
/* --line-2 qua chim nen phan con trong gan nhu tang hinh, va thanh do mat luon
   y nghia "con bao nhieu". Dung mau chu mo thay vi mau duong ke. */
.gauge .rest{color:var(--ink-3);opacity:.5}
.gauge .pc{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.gauge .lb{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3)}
body.nofx .gauge .fill{text-shadow:none}

@media (prefers-reduced-motion:reduce){
  .combo.bump,.combo.broke,.glitch,.combo-fly{animation:none}
  .reveal::after{display:none}
}

/* ======================================================================== */
/* TAB THONG KE — dashboard. Bieu do ve bang SVG dung tay (web/stats.js),    */
/* nen moi thu o day chi la khung va mau; khong co thu vien ngoai nao.       */
/* ======================================================================== */
.scard{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.shead h3{font-family:var(--display);font-size:16px;font-weight:700;margin:0}
.shead .xs{color:var(--ink-3);text-align:right}
.nodata{color:var(--ink-3);font-style:italic;padding:8px 0}

.stats-hero{display:flex;flex-direction:column;gap:13px}
.stats-hero .gauge{margin-top:2px}

/* Hang o chi so. auto-fit de tu xuong dong tren man hep, khong can media query. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(134px,1fr));gap:9px}
.kpis .stat{display:flex;flex-direction:column;gap:1px}
.kpis .stat .v{font-size:21px;line-height:1.15}
.kpis .stat .u{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.kpis .stat.warn{border-color:var(--warn)}
.kpis .stat.warn .v{color:var(--warn)}

/* ---- thanh tien do cua tung lo trinh ---- */
.prow{display:flex;align-items:center;gap:10px}
.prow .pname{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  min-width:46px;color:var(--ink-2)}
.prow .ptrack{flex:1;height:9px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.prow .ptrack i{display:block;height:100%;border-radius:99px;transition:width .4s}
.prow .pr{min-width:52px;text-align:right;color:var(--ink-2)}

/* ---- bieu do ----
   Chieu cao phai dat CO DINH. SVG dung preserveAspectRatio="none" de keo gian
   theo be ngang; neu de height:auto thi trinh duyet suy chieu cao tu ty le
   viewBox, va o man rong 1400px mot bieu do cao 44 don vi thanh ~600px that. */
.chart{display:block;width:100%;overflow:visible}
.chart.line{height:132px}
.chart.bars{height:92px}
.chart.bars rect{transition:opacity .15s}
.chart.bars rect:hover{opacity:.72}
.wlab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:7px}
.wlab .pname{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--ink-2)}

/* Hai cot canh nhau, gop lai mot cot tren man hep. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.duo .half{display:flex;flex-direction:column;gap:8px;min-width:0}
.duo h4{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
@media (max-width:720px){.duo{grid-template-columns:1fr}}

.ministats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px}
.ministats>div{display:flex;flex-direction:column;background:var(--surface-2);
  border-radius:4px;padding:7px 9px}
.ministats .k{font-family:var(--mono);font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.ministats b{font-size:15px}

/* ---- bang cho yeu va bang nop bai ---- */
.wtab,.rtab{display:flex;flex-direction:column}
.wrow,.rrow{display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--line);min-width:0}
.wrow:last-child,.rrow:last-child{border-bottom:0}
.wrow b,.rrow b{font-family:var(--mono);font-size:12px;min-width:38px}
.wrow .ttl,.rrow .mode{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1;min-width:0}
.wrow .num,.rrow .num{margin-left:auto;color:var(--ink-2);white-space:nowrap}
.rrow .when{color:var(--ink-3);min-width:104px;font-family:var(--mono)}
.rrow .vd{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;min-width:38px;text-align:right}
.rrow.ok .vd{color:var(--ok)} .rrow.bad .vd{color:var(--crit)}

/* ---- luoi lich theo ngay ---- */
.calwrap{display:flex;flex-direction:column;gap:9px}
/* 26 cot (tuan) x 7 dong (thu). grid-auto-flow:column de do day theo tung tuan
   mot, giong lich dong gop — do day theo dong se cho ra hinh vo nghia. */
.calgrid{display:grid;grid-template-rows:repeat(7,11px);grid-auto-flow:column;
  grid-auto-columns:11px;gap:3px;overflow-x:auto;padding-bottom:3px}
.cal{width:11px;height:11px;border-radius:2px;background:var(--surface-3);
  display:inline-block}
.cal.l0{background:var(--surface-3)}
.cal.l1{background:rgba(78,201,192,.3)}
.cal.l2{background:rgba(78,201,192,.55)}
.cal.l3{background:rgba(78,201,192,.8)}
.cal.l4{background:var(--neon);box-shadow:0 0 7px -1px var(--neon)}
body.nofx .cal.l4{box-shadow:none}
.callegend{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap}
.callegend .row{gap:4px;align-items:center}
.callegend .xs{color:var(--ink-3)}