/* A0 Trainer — giao diện phẳng, tối, hợp với terminal.                      */
:root{
  --bg:#0b1020; --bg2:#0f172a; --card:#111a2e; --card2:#16203a;
  --ink:#e8edf7; --muted:#9aa8c3; --dim:#6b7a99;
  --navy:#2a4bb8; --navy2:#1e3a8a; --rose:#e11d48; --ok:#10b981; --warn:#f59e0b;
  --line:#22304f; --mono:ui-monospace,"DejaVu Sans Mono","SF Mono",Menlo,Consolas,monospace;
  --font:"Segoe UI",system-ui,-apple-system,"Noto Sans",Roboto,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 600px at 12% -10%, #16255280 0, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #3b0d2a55 0, transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.55;
  min-height:100vh;
}
h1,h2,h3{margin:0 0 6px; line-height:1.25; font-weight:700; letter-spacing:.1px}
p{margin:0 0 10px}
code,kbd{font-family:var(--mono); font-size:.92em}
kbd{background:#1b2740; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 6px}
.muted{color:var(--muted)}
.fatal{background:var(--rose); color:#fff; padding:14px 18px; font-weight:600}

/* ------------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:18px;
  padding:12px 22px; background:#0a0f1fe6; backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--navy),var(--rose)); font-weight:800; letter-spacing:.5px;
}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-text strong{font-size:15px; letter-spacing:1.6px}
.brand-text span{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stats{display:flex; gap:8px; margin-left:auto}
.stat{
  display:flex; align-items:baseline; gap:5px; padding:6px 11px; border-radius:10px;
  background:var(--card); border:1px solid var(--line);
}
.stat-ico{color:var(--warn); font-size:11px}
.stat b{font-size:15px}
.stat i{font-style:normal; font-size:11px; color:var(--dim)}
.topnav{display:flex; gap:6px}
.nav-btn{
  background:transparent; color:var(--muted); border:1px solid transparent; border-radius:10px;
  padding:8px 13px; font:inherit; font-size:13.5px; cursor:pointer; transition:.15s;
}
.nav-btn:hover{color:var(--ink); background:#ffffff0d}
.nav-btn.is-active{background:var(--navy); color:#fff; border-color:#4b6ddb}
.nav-btn.ghost{border-color:var(--line)}

/* --------------------------------------------------------------- views */
main{max-width:1320px; margin:0 auto; padding:24px 22px 70px}
.view{display:none}
.view.is-active{display:block}
.path-head,.free-head,.book-head{max-width:820px; margin-bottom:22px}
.path-head h1,.free-head h1,.book-head h1{font-size:26px}
.path-head p,.free-head p,.book-head p{color:var(--muted)}
.legend{display:flex; gap:16px; font-size:12.5px; color:var(--dim); margin-top:8px}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px}
.dot-done{background:var(--ok)} .dot-open{background:var(--warn)} .dot-lock{background:#33415c}

/* -------------------------------------------------------------- lộ trình */
.path-list{display:flex; flex-direction:column; gap:18px}
.unit{
  position:relative; background:linear-gradient(180deg,var(--card),#0e1729);
  border:1px solid var(--line); border-radius:var(--r); padding:18px 20px 22px;
  overflow:hidden;
}
.unit::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--unit-color,var(--navy))}
.unit.is-locked{opacity:.55}
.unit-head{display:flex; align-items:center; gap:14px; margin-bottom:6px}
.unit-no{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:800;
  background:var(--unit-color,var(--navy)); color:#fff; font-size:14px;
}
.unit-title h2{font-size:18px; margin:0}
.unit-title span{font-family:var(--mono); font-size:12px; color:var(--muted)}
.unit-head .btn{margin-left:auto}
.unit-intro{color:var(--muted); font-size:13.5px; max-width:900px; margin:6px 0 14px}
.track{display:flex; flex-wrap:wrap; gap:12px}
.node{
  position:relative; display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  min-width:190px; padding:12px 14px; border-radius:12px; cursor:pointer; text-align:left;
  background:var(--card2); border:1px solid var(--line); color:var(--ink); font:inherit; transition:.15s;
  transform:translateY(calc(var(--i,0) * 0px));
}
.node:hover:not(:disabled){transform:translateY(-2px); border-color:var(--unit-color,var(--navy)); box-shadow:0 8px 24px #0006}
.node:disabled{cursor:not-allowed; opacity:.5}
.node-dot{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700;
  background:#22304f;
}
.node.is-done .node-dot{background:var(--ok); color:#04231a}
.node.is-open .node-dot{background:var(--warn); color:#2a1a00}
.node-label{font-size:13.5px; font-weight:600}
.node-stars{font-size:12px; color:var(--warn); letter-spacing:2px}

/* --------------------------------------------------------------- bài học */
.lesson-view.is-active{display:grid; grid-template-columns:380px 1fr; gap:20px; align-items:start}
.mission{
  position:sticky; top:82px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px; display:flex; flex-direction:column; gap:12px;
  max-height:calc(100vh - 110px); overflow:auto;
}
.back{background:none; border:none; color:var(--muted); font:inherit; cursor:pointer; padding:0; text-align:left}
.back:hover{color:var(--ink)}
.unit-chip{display:inline-block; padding:3px 9px; border-radius:7px; font-size:11.5px; font-weight:700; color:#fff}
.mission-head h2{font-size:19px; margin:8px 0 4px}
.scene{color:var(--muted); font-size:13.5px; margin:0}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.steps li{display:flex; gap:9px; font-size:13px; color:var(--dim); align-items:flex-start}
.steps li.ok{color:var(--muted); text-decoration:line-through; text-decoration-color:#3c4a66}
.steps li.cur{color:var(--ink); font-weight:600}
.tick{
  flex:none; width:19px; height:19px; border-radius:50%; background:#1c2740; color:var(--dim);
  display:grid; place-items:center; font-size:11px; margin-top:1px;
}
.steps li.ok .tick{background:var(--ok); color:#04231a}
.steps li.cur .tick{background:var(--warn); color:#2a1a00}
.task{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:13px 14px}
.task-label{font-size:11px; letter-spacing:1.4px; color:var(--dim); text-transform:uppercase}
.task-text{font-size:15px; font-weight:600; margin:4px 0 8px}
.task-where{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px}
.where{font-style:normal; font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:6px}
.where.sh{background:#0b3a2e; color:#6ee7b7}
.where.vi{background:#2a1b4d; color:#c4b5fd}
.task-actions{display:flex; gap:8px; margin-top:11px}
.hint,.solve,.why{margin-top:10px; font-size:13px; border-radius:9px; padding:9px 11px; line-height:1.5}
.hint{background:#3a2c0b; border:1px solid #6b5313; color:#fde68a}
.solve{background:#0d2d4a; border:1px solid #1d4e7c; color:#bfdbfe}
.why{background:#10233a; border:1px solid #1e3a5f; color:#cbd5e1}
.why .ref{color:var(--dim); font-size:11.5px; display:block; margin-top:3px}
.prev-why{opacity:.65; font-size:12.5px}
.mission-foot{margin-top:auto}
.progress{height:7px; background:#1a2440; border-radius:99px; overflow:hidden}
.progress-bar{height:100%; width:0; background:linear-gradient(90deg,var(--navy),var(--ok)); transition:width .4s}
.mission-meta{display:flex; justify-content:space-between; font-size:12px; color:var(--dim); margin-top:6px}

/* ------------------------------------------------------------- sân khấu */
.stage{background:#070b16; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.stage-bar{display:flex; align-items:center; gap:12px; padding:9px 13px; background:#0c1426; border-bottom:1px solid var(--line)}
.stage-mode{font-family:var(--mono); font-size:11.5px; padding:3px 9px; border-radius:6px; background:#0b3a2e; color:#6ee7b7}
.stage-mode.is-vim{background:#2a1b4d; color:#c4b5fd}
.stage-path{font-family:var(--mono); font-size:12px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stage-keys{margin-left:auto; display:flex; align-items:center; gap:8px}
.pend{font-family:var(--mono); font-size:12px; color:var(--warn)}
.screen{
  font-family:var(--mono); font-size:13px; line-height:1.42; padding:12px 14px;
  background:#05080f; color:#d0d0d0; min-height:430px; max-height:62vh; overflow:auto; outline:none;
  white-space:pre; transition:box-shadow .25s;
}
.screen:focus{box-shadow:inset 0 0 0 2px #2a4bb8aa}
.screen.flash-ok{animation:fok .5s}
.screen.flash-no{animation:fno .5s}
@keyframes fok{0%{box-shadow:inset 0 0 0 3px #10b981}100%{box-shadow:inset 0 0 0 0 transparent}}
@keyframes fno{0%{box-shadow:inset 0 0 0 3px #e11d48}100%{box-shadow:inset 0 0 0 0 transparent}}
.ln{min-height:1.42em}
/* màu của máy ảo */
.pr-dir{color:#4f9ad8} .pr-user{color:#7ecb8f} .cmd-echo{color:#e8edf7}
.err{color:#f38ba3} .ok{color:#7ee2b8} .warn{color:#f5c877} .dim{color:#7c8aa5} .dir{color:#6ba8e8}
.tilde{color:#2e3c5a}
.stl{background:#22304f; color:#dbe6ff} .stl-dim{background:#141d33; color:#7c8aa5}
.stl-a{background:#3a1220; color:#ffd9e2} .stl-b{background:#0d2a1e; color:#c8f2dd}
.curline{background:#121c30}
.hl{background:#f5c877; color:#1a1400}
.mode{color:#7ecb8f}
.pend{color:#f5c877}
.ask{color:#f5c877}
.cur{color:#f5c877}
.df-chg{background:#2a1520; color:#ffc9d6}
.df-fill{background:#0d1422; color:#2e3c5a}
.tab-sel{background:#e8edf7; color:#0b1020; font-weight:700}
.tab-c0{background:#1a2440; color:#9aa8c3}
.tab-c1{background:#5b1220; color:#ffd9e2} .tab-c2{background:#10402c; color:#c8f2dd}
.tab-c3{background:#4a3c0c; color:#ffeaa7} .tab-c7{background:#2c3550; color:#e8edf7}
.cmdbar{display:flex; align-items:center; gap:9px; padding:10px 13px; background:#0c1426; border-top:1px solid var(--line)}
.cmd-prompt{font-family:var(--mono); color:#7ecb8f}
.cmdbar input{
  flex:1; background:#05080f; border:1px solid var(--line); border-radius:8px; padding:8px 11px;
  color:var(--ink); font-family:var(--mono); font-size:13px; outline:none;
}
.cmdbar input:focus{border-color:var(--navy)}
.keyhelp{padding:9px 14px; font-size:12px; color:var(--dim); background:#0a0f1f; border-top:1px solid var(--line)}
.stage-free .screen{min-height:520px}

/* ----------------------------------------------------------- sổ tay */
.book-search{
  width:100%; max-width:520px; margin-top:8px; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 13px; color:var(--ink); font:inherit; outline:none;
}
.book-search:focus{border-color:var(--navy)}
.book-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px}
.book-group{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.book-group h3{font-size:15px; color:#cfe0ff; margin-bottom:8px}
.book-table{width:100%; border-collapse:collapse; font-size:13px}
.book-table td{padding:5px 4px; border-top:1px solid #1a2440; vertical-align:top; color:var(--muted)}
.book-table td.k{width:42%; white-space:nowrap}
.book-table code{color:#ffd9a8}

/* -------------------------------------------------------------- nút */
.btn{
  background:var(--navy); color:#fff; border:1px solid #4b6ddb; border-radius:9px;
  padding:9px 14px; font:inherit; font-size:13.5px; cursor:pointer; transition:.15s;
}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.45; cursor:default; filter:none}
.btn.ghost{background:transparent; color:var(--muted); border-color:var(--line)}
.btn.ghost:hover{color:var(--ink); border-color:var(--muted)}
.btn.danger{color:#fca5b5; border-color:#7f1d33}
.btn.small{padding:6px 11px; font-size:12.5px}
.btn.tiny{padding:4px 9px; font-size:11.5px}

/* ------------------------------------------------------------ modal */
.modal{position:fixed; inset:0; background:#050914cc; display:grid; place-items:center; z-index:80; padding:20px}
.modal[hidden]{display:none}
.modal-box{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 24px; max-width:860px; width:100%; max-height:86vh; overflow:auto;
}
.modal-x{position:absolute; right:12px; top:8px; background:none; border:none; color:var(--muted); font-size:26px; cursor:pointer; line-height:1}
.mapimg{width:100%; border-radius:10px; background:#fff; margin-top:10px}
.done-box{text-align:center}
.done-stars{font-size:38px; color:var(--warn); letter-spacing:6px}
.done-stars .dim{color:#33415c}
.done-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0}
.done-grid div{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px}
.done-grid b{display:block; font-size:20px}
.done-grid span{font-size:11.5px; color:var(--dim)}
.done-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px}

/* ------------------------------------------------------------ toast */
.toasts{position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; gap:10px; max-width:380px}
.toast{
  position:relative; background:#17233d; border:1px solid var(--line); border-left:4px solid var(--warn);
  border-radius:11px; padding:12px 34px 12px 14px; box-shadow:0 10px 30px #0008; animation:tin .3s;
}
.toast.trap{border-left-color:var(--rose)}
.toast.ok{border-left-color:var(--ok)}
.toast b{font-size:13.5px}
.toast p{margin:4px 0 0; font-size:12.5px; color:var(--muted)}
.toast-x{position:absolute; right:6px; top:4px; background:none; border:none; color:var(--dim); font-size:19px; cursor:pointer}
.toast.out{opacity:0; transform:translateY(8px); transition:.4s}
@keyframes tin{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}}

/* ---------------------------------------------------------- responsive */
@media (max-width:1100px){
  .lesson-view.is-active{grid-template-columns:1fr}
  .mission{position:static; max-height:none}
  .stats{display:none}
}
@media (max-width:640px){
  .topbar{flex-wrap:wrap; gap:10px; padding:10px 14px}
  main{padding:16px 14px 60px}
  .topnav{width:100%; overflow:auto}
  .screen{font-size:11px}
}

.srcline{font-size:13px; color:var(--muted)}
.srcline a{color:#8ab4f8}

/* ------------------------------------------------------- cây thư mục ảo */
.envbox{background:var(--card2); border:1px solid var(--line); border-radius:11px; padding:9px 12px}
.envbox summary{cursor:pointer; font-size:12.5px; color:var(--muted); font-weight:600; list-style:none}
.envbox summary::-webkit-details-marker{display:none}
.envbox summary::before{content:"▾ "; color:var(--dim)}
.envbox:not([open]) summary::before{content:"▸ "}
.tree{font-family:var(--mono); font-size:11.5px; line-height:1.5; margin-top:7px; max-height:210px; overflow-y:auto; overflow-x:hidden; word-break:break-all}
.tr-root{color:#8ab4f8; margin-top:5px}
.tr-root i,.tr-dir i{font-style:normal; color:var(--warn)}
.tr-dir{color:var(--muted); padding-left:10px}
.tr-file{color:var(--dim); padding-left:10px}
.tr-file.tr-in{padding-left:22px}
.free-split{display:grid; grid-template-columns:250px 1fr}
.free-split .envbox{border:0; border-right:1px solid var(--line); border-radius:0; background:#080d1a}
.free-split .tree{max-height:none}
@media (max-width:900px){ .free-split{grid-template-columns:1fr} }