/* ============================================================
   Paper Vintage Flat UI
   Nền giấy kem • card giấy sáng • mực nâu • viền mảnh
   Không bo góc • không đổ bóng • không gradient
   ============================================================ */
:root{
  --paper:#eee4cd;   /* nền giấy kem */
  --card:#f9f3e2;    /* card giấy sáng */
  --ink:#3b2f23;     /* mực nâu */
  --mut:#7a6a55;     /* chữ phụ nâu xám */
  --line:#c7b591;    /* viền mảnh */
  --blue:#34557a;    /* xanh mực */
  --olive:#5f7a3d;   /* olive */
  --brick:#b5442c;   /* gạch nung */
  --amber:#a8791a;   /* hổ phách */
  --mustard:#c9a227; /* mù tạt */
  --dark:#2e2619;    /* nâu đen — khối công thức */
  --cream:#f3e9d2;   /* chữ kem */
  --gold:#d9a441;    /* vàng đất — highlight */
}

*{box-sizing:border-box;border-radius:0 !important}
body{margin:0;font-family:"Reddit Sans","Segoe UI",system-ui,-apple-system,sans-serif;
     background:var(--paper);color:var(--ink);line-height:1.65}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px 80px}

/* ===== thanh điều hướng bước ===== */
header.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.top-in{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);padding:6px 12px;font-size:13px;
     cursor:pointer;color:var(--mut);user-select:none}
.chip i{margin-left:5px;color:var(--olive);font-size:11px}
.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip.on i{color:var(--gold)}
.chip.lock{opacity:.45;cursor:not-allowed}

/* ===== typography ===== */
h1{font-size:32px;line-height:1.2;margin:0 0 10px;font-weight:700}
h2{font-size:24px;margin:26px 0 4px;font-weight:700}
h3{font-size:17px;margin:18px 0 8px;font-weight:700}
.sub{color:var(--mut);font-size:15px;margin:0 0 18px}
p{margin:8px 0}
.muted{color:var(--mut);font-size:13px}
code{background:var(--paper);border:1px solid var(--line);padding:1px 5px;font-size:.92em}

/* ===== card & layout ===== */
.card{background:var(--card);border:1px solid var(--line);padding:18px 20px;margin:14px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.flex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ===== nhân vật ===== */
.person{display:flex;gap:10px;align-items:flex-start;margin:12px 0}
.ava{width:42px;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;
     font-weight:700;color:var(--cream);font-size:16px;border:1px solid var(--dark)}
.ava.t{background:var(--blue)}
.ava.m{background:var(--brick)}
.bubble{background:var(--paper);border:1px solid var(--line);padding:10px 14px;font-size:14.5px}
.bubble b.name{display:block;font-size:13px;margin-bottom:2px}

/* ===== KPI ===== */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0}
@media(max-width:860px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{border:1px solid var(--line);padding:8px 12px;background:var(--paper)}
.kpi .lb{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.kpi .vl{font-size:20px;font-weight:700}
.kpi .vl.van{color:var(--blue)}
.kpi .vl.dec{color:var(--brick)}

/* ===== canvas & chú thích ===== */
canvas{width:100%;height:230px;display:block;background:var(--card);border:1px solid var(--line)}
canvas.tall{height:300px}
.cap{font-size:12.5px;color:var(--mut);margin:6px 2px 12px}

/* ===== nút ===== */
button.btn{border:1px solid transparent;padding:10px 16px;font-size:14.5px;font-weight:600;
     cursor:pointer;margin:4px 6px 4px 0;font-family:inherit}
.btn i{margin-right:7px}
.btn.play{background:var(--blue);color:var(--cream);border-color:var(--blue)}
.btn.play:hover{background:#2c4866}
.btn.next{background:var(--brick);color:var(--cream);border-color:var(--brick)}
.btn.next:hover{background:#983a24}
.btn.next i{margin-left:7px;margin-right:0}

/* ===== nhãn giai đoạn ===== */
.tag{display:inline-block;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.4px;
     margin:0 6px 6px 0;color:var(--cream)}
.tag.start{background:var(--blue)}
.tag.do{background:var(--amber)}
.tag.end{background:var(--olive)}
.tag.next{background:var(--brick)}

/* ===== khối công thức (nâu đen, chữ kem) ===== */
.calc{background:var(--dark);border:1px solid var(--dark);color:var(--cream);
     padding:12px 16px;font-size:14.5px;margin:10px 0}
.calc .t{font-weight:700;color:var(--gold)}
.calc b{color:var(--gold)}

/* ===== sơ đồ ASCII ===== */
.ascii{background:var(--paper);border:1px solid var(--line);color:var(--ink);
     font-family:"Cascadia Mono",Consolas,"Courier New",monospace;font-size:13px;
     line-height:1.8;padding:12px 16px;margin:10px 0;overflow-x:auto;white-space:pre}
/* ASCII nằm trong khối diễn giải: bỏ viền kép, nền trong suốt cho gọn */
.explain .ascii{background:transparent;border:0;padding:6px 0;margin:6px 0}

/* ===== khối diễn giải / cảnh báo / tích cực ===== */
.explain{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);
     padding:10px 14px;font-size:14.5px;margin:10px 0}
.warn{background:rgba(181,68,44,.07);border:1px solid var(--line);border-left:4px solid var(--brick);
     padding:10px 14px;font-size:14.5px;margin:10px 0}
.good{background:rgba(95,122,61,.08);border:1px solid var(--line);border-left:4px solid var(--olive);
     padding:10px 14px;font-size:14.5px;margin:10px 0}

/* ===== hộp kiến thức học thuật (xen kẽ truyện) ===== */
.acad{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);
     padding:12px 16px;font-size:14.5px;margin:12px 0}
.acad .acad-t{display:block;font-size:11.5px;font-weight:700;letter-spacing:.6px;color:var(--amber);
     text-transform:uppercase;margin-bottom:4px}
.acad .acad-t i{margin-right:6px}

/* ===== bảng ===== */
table{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--paper)}

/* ===== nút chuyển đổi (segment) ===== */
.seg{display:inline-flex;border:1px solid var(--line);overflow:hidden;margin:6px 0;background:var(--card)}
.seg button{border:0;background:transparent;padding:8px 14px;font-size:14px;cursor:pointer;
     color:var(--mut);font-family:inherit}
.seg button.on{background:var(--ink);color:var(--cream)}

/* ===== câu hỏi trắc nghiệm ===== */
.opt{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--card);
     padding:10px 12px;margin:6px 0;font-size:14.5px;cursor:pointer;font-family:inherit;color:var(--ink)}
.opt:hover{border-color:var(--ink)}
.opt.right{border-color:var(--olive);background:rgba(95,122,61,.14)}
.opt.wrong{border-color:var(--brick);background:rgba(181,68,44,.10)}
.fb{font-size:14px;margin:4px 0 10px;min-height:20px}

/* ===== bước ===== */
.stepsec{display:none}
.stepsec.on{display:block}

/* ===== hero (nâu đen flat) ===== */
.hero{background:var(--dark);color:var(--cream);border:1px solid var(--dark);padding:28px 26px 24px;margin:22px 0}
.hero h1{color:var(--cream)}
.hero p{margin:8px 0;color:#d8c9a8}
.hero .muted{color:#b3a184}

/* ===== hộp r (bước 4) ===== */
.rbox{border:1px solid var(--line);padding:12px 14px;text-align:center;font-weight:700}
.rbox.van{background:rgba(52,85,122,.10);color:var(--blue)}
.rbox.dec{background:rgba(181,68,44,.10);color:var(--brick)}

/* ===== slider ===== */
input[type=range]{width:100%;accent-color:var(--brick);margin:8px 0}

/* ===== khối SQL (làm lại bằng SQL) ===== */
.tag.sql{background:var(--blue)}
.tag.sql i{margin-right:6px}
pre.sqlcode{background:var(--dark);border:1px solid var(--dark);color:var(--cream);
     padding:14px 16px;margin:10px 0;overflow-x:auto;font-size:13px;line-height:1.55;
     font-family:Consolas,"Courier New",monospace}
pre.sqlcode code{background:none;border:none;padding:0;font-size:inherit;color:inherit;white-space:pre}
pre.sqlcode .k{color:var(--gold);font-weight:700}
pre.sqlcode .c{color:#9c8f74;font-style:italic}
pre.sqlcode .s{color:#a8c686}
pre.sqlcode .t{color:#8fb3d9}
table.sqlres{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px}
table.sqlres th{background:var(--blue);color:var(--cream);letter-spacing:.3px}
table.sqlres td{font-variant-numeric:tabular-nums}