/* Khoa hoc XClaude - PHANG, toi gian (owner 18/10: hoc tu cac trang khoa hoc lon): muc luc trai, noi dung ~720px, tien do. */
:root {
  --bg:#ffffff; --panel:#f7f7f9; --ink:#16151d; --muted:#5f5d6b; --faint:#9a98a6; --line:#e7e6ec;
  --accent:#6d4aff; --accent-soft:#f0ecff; --ok:#12a26b; --code:#f4f3f7; color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#121117; --panel:#18171f; --ink:#ecebf3; --muted:#a6a3b5; --faint:#6f6c7e; --line:#28262f;
    --accent:#9b84ff; --accent-soft:#221d3a; --ok:#3ccf95; --code:#1d1c24; color-scheme:dark; }
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); }
body { font:16px/1.7 "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }

/* thanh tren */
.top { position:sticky; top:0; z-index:5; height:56px; display:flex; align-items:center; gap:16px; padding:0 24px; background:var(--bg); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-weight:650; color:var(--ink); letter-spacing:-.01em; }
.brand:hover { text-decoration:none; }
.mark { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--accent); color:#fff; font-size:14px; font-weight:700; }
.top .grow { flex:1; }
.top .prog { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px; }
.bar { width:140px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.bar i { display:block; height:100%; width:0; background:var(--accent); transition:width .3s; }
.top .out { font-size:13px; color:var(--muted); }

/* bo cuc 2 cot */
.layout { display:grid; grid-template-columns:280px minmax(0, 1fr); min-height:calc(100vh - 56px); }
.toc { border-right:1px solid var(--line); background:var(--panel); padding:20px 14px 40px; position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto; }
.toc h4 { margin:18px 10px 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:650; }
.toc h4:first-child { margin-top:0; }
.toc a { display:flex; gap:10px; align-items:flex-start; padding:7px 10px; border-radius:7px; color:var(--muted); font-size:14px; line-height:1.4; }
.toc a:hover { background:var(--bg); color:var(--ink); text-decoration:none; }
.toc a.on { background:var(--accent-soft); color:var(--ink); font-weight:600; }
.toc .dot { flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:11px; color:transparent; }
.toc a.done .dot { background:var(--ok); border-color:var(--ok); color:#fff; }
.content { padding:40px 48px 80px; }
.read { max-width:720px; margin:0 auto; }

/* trang chu */
.eyebrow { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:650; }
.read h1 { font-size:34px; line-height:1.2; letter-spacing:-.02em; margin:8px 0 12px; }
.lead { font-size:18px; color:var(--muted); margin:0 0 24px; }
.cta { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; font-size:15px; border:0; cursor:pointer; }
.cta:hover { text-decoration:none; filter:brightness(1.07); }
.stats { display:flex; gap:28px; margin:28px 0 8px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats b { display:block; font-size:22px; } .stats span { font-size:13px; color:var(--muted); }
.module { margin-top:36px; }
.module h2 { font-size:20px; margin:0 0 4px; letter-spacing:-.01em; } .module > p { margin:0 0 12px; color:var(--muted); font-size:14px; }
.rows { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; padding:13px 16px; color:var(--ink); border-top:1px solid var(--line); }
.row:first-child { border-top:0; }
.row:hover { background:var(--panel); text-decoration:none; }
.row .num { flex:none; width:28px; font:600 13px/1 Consolas, monospace; color:var(--faint); }
.row .t { flex:1; } .row .t b { display:block; font-weight:600; font-size:15px; } .row .t span { font-size:13px; color:var(--muted); }
.row .st { flex:none; font-size:12px; color:var(--faint); } .row.done .st { color:var(--ok); }

/* bai hoc */
.crumb { font-size:13px; color:var(--muted); }
.read h3 { font-size:19px; margin:30px 0 8px; letter-spacing:-.01em; }
.read p, .read li { color:var(--ink); } .read ul, .read ol { padding-left:22px; }
pre { background:var(--code); border:1px solid var(--line); border-radius:8px; padding:12px 14px; overflow-x:auto; font-size:14px; line-height:1.55; }
code { font-family:Consolas, "Cascadia Code", monospace; font-size:.9em; }
p code, li code { background:var(--code); padding:1px 5px; border-radius:4px; }
.tip { margin:22px 0; padding:12px 16px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 8px 8px 0; font-size:15px; }
.foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); }
.foot a.nav { font-size:14px; color:var(--muted); max-width:38%; } .foot a.nav:hover { color:var(--ink); }
.mark-done { padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:600 14px/1 inherit; cursor:pointer; }
.mark-done.is-done { background:var(--ok); border-color:var(--ok); color:#fff; }

/* trang dang nhap */
.gate-wrap { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.gate { width:100%; max-width:420px; border:1px solid var(--line); border-radius:12px; padding:28px; background:var(--bg); }
.gate h1 { margin:12px 0 6px; font-size:24px; letter-spacing:-.01em; } .gate p { color:var(--muted); margin:0 0 18px; font-size:15px; }
.gate input { width:100%; padding:12px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font:600 17px/1 Consolas, monospace; letter-spacing:2px; text-align:center; text-transform:uppercase; }
.gate input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.gate button { width:100%; margin-top:10px; padding:12px; border:0; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; font-size:15px; cursor:pointer; }
.err { color:#d63b57; font-size:14px; margin-top:10px; }
.plan { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); display:grid; gap:6px; }
.plan b { color:var(--ink); }

@media (max-width:860px) {
  .layout { grid-template-columns:1fr; } .toc { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .content { padding:28px 16px 60px; } .top { padding:0 16px; } .top .prog .bar { width:80px; }
  .read h1 { font-size:28px; }
}