/* ══════════════════════════════════════════════════
   The Knowledge Explorer — hệ thống dùng chung
   Màu & thang đo lấy từ posthog.com (designlang + grep)
   ══════════════════════════════════════════════════ */
:root{
  --cream:#eeefe9; --raised:#e5e7e0; --butter:#f5e2b2; --paper:#fff;
  --ink:#23251d; --ink-2:#5b5d54; --line:#d0d1c9;
  --orange:#f54e00; --orange-ink:#cc4100; --amber:#eb9d2a; --yellow:#ffa81c; --blue:#2f80fa; --purple:#b62ad9;
  --s1:24px; --s2:28px; --s3:32px; --s4:40px; --s5:48px; --s6:66px; --s7:112px;
  --r-xs:2px; --r-md:6px; --r-xl:20px; --r-full:9999px;
  --sh-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --sh-lg:0 6px 12px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--cream);
  font:400 16px/1.55 Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;
}
a{color:inherit}
.mono{font-family:"Source Code Pro",monospace}

/* ── bố cục desktop: rail · cửa sổ · rail ── */
.desktop{display:grid;grid-template-columns:118px minmax(0,1fr) 150px;
  gap:var(--s3);max-width:1180px;margin:0 auto;padding:var(--s3) var(--s1) 130px;align-items:start}
.rail{position:sticky;top:var(--s3);display:flex;flex-direction:column;gap:10px}
.rail-label{font:700 10px/1 "Source Code Pro",monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);padding-left:4px}
.ico{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;
  padding:9px 4px;border-radius:var(--r-md);border:2px solid transparent;transition:all .12s}
.ico:hover,.ico.on{background:var(--paper);border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.ico .glyph{width:42px;height:42px;display:grid;place-items:center;
  font:700 15px/1 "Source Code Pro",monospace;background:var(--butter);
  border:2px solid var(--ink);border-radius:var(--r-md);box-shadow:0 3px 0 var(--ink)}
.ico.on .glyph{background:var(--yellow)}
.ico span{font:600 11px/1.25 Nunito;text-align:center}

/* ── cửa sổ ── */
.window{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-md);
  box-shadow:0 8px 0 var(--ink);overflow:hidden}
.titlebar{display:flex;align-items:center;gap:10px;background:var(--butter);
  border-bottom:3px solid var(--ink);padding:10px 14px}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);display:block}
.titlebar .name{font:700 12px/1 "Source Code Pro",monospace;letter-spacing:.04em;margin-left:4px}
.titlebar .right{margin-left:auto;font:600 11px/1 "Source Code Pro",monospace;color:var(--ink-2)}
.pane{padding:var(--s5) var(--s5) var(--s6)}

/* ── section ── */
section{margin-bottom:var(--s5);scroll-margin-top:var(--s3)}
.h{display:flex;align-items:center;gap:12px;margin-bottom:var(--s1)}
.h h2{margin:0;font:700 12px/1 "Source Code Pro",monospace;letter-spacing:.12em;text-transform:uppercase}
.h .bar{flex:1;height:3px;background:var(--ink)}

/* ── nút & chip ── */
.chip{display:inline-block;font:600 13px/1 Nunito;background:var(--cream);
  border:2px solid var(--ink);border-radius:var(--r-full);padding:7px 14px;
  text-decoration:none;box-shadow:0 2px 0 var(--ink);transition:all .1s}
.chip:hover{background:var(--yellow)}
.chip.ghost{box-shadow:none;border-color:var(--line);color:var(--ink-2)}
.chip.solid{background:var(--orange-ink);color:#fff}
.chip.solid:hover{background:var(--amber)}

/* ── dock ── */
.dock{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;gap:5px;align-items:center;background:var(--paper);
  border:3px solid var(--ink);border-radius:var(--r-full);padding:8px 12px;box-shadow:0 5px 0 var(--ink)}
.dock a{font:700 12px/1 Nunito;text-decoration:none;padding:8px 13px;
  border-radius:var(--r-full);white-space:nowrap}
.dock a:hover{background:var(--butter)}
.dock a.on{background:var(--ink);color:var(--cream)}
.dock a.cta{background:var(--orange-ink);color:#fff;border:2px solid var(--ink)}
.dock a.cta:hover{background:var(--amber)}
.dock .sep{width:2px;height:20px;background:var(--line)}

/* ── popup ── */
.banner{position:fixed;right:20px;bottom:92px;z-index:30;width:330px;max-width:calc(100vw - 40px);
  background:var(--paper);border:3px solid var(--blue);border-radius:var(--r-md);
  padding:16px 18px;box-shadow:var(--sh-lg);
  transform:translateY(16px);opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1)}
.banner.show{transform:none;opacity:1;pointer-events:auto}
.banner h4{margin:0 0 7px;font-size:15px;font-weight:700;padding-right:22px}
.banner p{margin:0 0 7px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.banner .wink{color:var(--ink);font-weight:600}
.banner .x{position:absolute;top:11px;right:12px;background:none;border:0;
  font-size:20px;line-height:1;color:var(--ink-2);cursor:pointer;padding:2px}
.banner .x:hover{color:var(--ink)}

/* ── ghi công góc phải ── */
.credit{position:fixed;right:18px;bottom:22px;z-index:15;
  font:600 10.5px/1.5 "Source Code Pro",monospace;letter-spacing:.03em;
  color:var(--ink-2);opacity:.42;text-align:right;pointer-events:auto;
  transition:opacity .18s}
.credit:hover{opacity:.9}
.credit a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.credit a:hover{border-bottom-color:var(--ink-2)}

/* ── tôn trọng prefers-reduced-motion ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── responsive ── */
@media(max-width:1060px){
  .desktop{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;flex-direction:row;overflow-x:auto;gap:9px;padding-bottom:5px}
  .rail-label{display:none}
  .ico{flex:0 0 auto;min-width:80px}
  .rail-right{order:3}
}
@media(max-width:620px){
  .pane{padding:var(--s2) var(--s1) var(--s4)}
  .credit{position:static;text-align:center;padding:0 0 26px;margin-bottom:84px;opacity:.5}
  .dock{padding:6px 7px;max-width:calc(100vw - 24px);overflow-x:auto}
  .dock a{padding:7px 9px;font-size:11px}
  .dock{gap:1px;padding:5px 6px}
  .banner{right:12px;left:12px;width:auto;bottom:84px}
}