@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* OpcOS Design System 1.1.0 — site.css SINH bởi kit/build.mjs từ tokens.json + components/bundle.css. Không sửa tay. */
:root, [data-theme="light"] {
  --bg: #ffffff;
  --bg-tint: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --surface-3: #eef1f6;
  --border: #e4e8ef;
  --border-strong: #d3d9e3;
  --text: #14161b;
  --muted: #565d69;
  --faint: #666c78;
  --accent: #2361e6;
  --accent-ink: #1b4fd0;
  --accent-weak: #e9f0fe;
  --accent-glow: rgba(47,109,246,.16);
  --accent-solid: #2361e6;
  --accent-solid-hover: #1b4fd0;
  --on-accent: #ffffff;
  --gold: #e8a200;
  --gold-weak: #fdf3d7;
  --gold-ink: #8a5a00;
  --teal: #0d7280;
  --teal-weak: #e0f2f4;
  --ok: #0b7a45;
  --ok-weak: #e4f5ec;
  --warn: #c9820a;
  --warn-ink: #8a5a00;
  --danger: #bb3645;
  --danger-weak: #fdecee;
  --code-bg: #0f1116;
  --code-text: #e8ebf1;
  --code-border: #20242e;
  --code-muted: #9aa3b2;
  --code-comment: #7d889b;
  --code-keyword: #7aa0ff;
  --code-ok: #3ec38a;
  --code-chip: rgba(255,255,255,.06);
  --code-chip-hover: rgba(255,255,255,.12);
  --code-chip-text: #cdd4e0;
  --net-ink: #2f6df6;
  --focus: var(--accent);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --shadow-md: 0 8px 24px -8px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.05);
  --shadow-lg: 0 30px 70px -24px rgba(20,40,90,.28);
}
[data-theme="dark"] {
  --bg: #0e0f13;
  --bg-tint: #111318;
  --surface: #16181d;
  --surface-2: #1b1e24;
  --surface-3: #22262e;
  --border: #282c34;
  --border-strong: #343a44;
  --text: #e9ebef;
  --muted: #a4abb6;
  --faint: #8d949f;
  --accent: #5b8cff;
  --accent-ink: #8fb0ff;
  --accent-weak: #182338;
  --accent-glow: rgba(91,140,255,.20);
  --accent-solid: #2361e6;
  --accent-solid-hover: #1b4fd0;
  --gold: #f2c811;
  --gold-weak: #2b2410;
  --gold-ink: #f2c811;
  --teal: #3cc4d4;
  --teal-weak: #10262a;
  --ok: #3ec38a;
  --ok-weak: #12271d;
  --warn: #e0a032;
  --warn-ink: #e0a032;
  --danger: #ef6d79;
  --danger-weak: #2c161a;
  --code-bg: #0a0c10;
  --code-text: #e4e8f0;
  --net-ink: #7aa0ff;
  --focus: var(--accent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 28px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 34px 80px -28px rgba(0,0,0,.75);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;
  --space-8: 80px;
  --gutter: 22px;
  --maxw: 1160px;
  --radius: 16px;
  --radius-sm: 11px;
  --radius-xs: 6px;
  --radius-pill: 999px;
  --font-sans: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}
.type-display {
  font-family: var(--font-sans);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.type-section {
  font-family: var(--font-sans);
  font-size: 35px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.type-card-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.type-lead {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}
.type-body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.type-small {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
}
.type-nav {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
}
.type-button {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.type-eyebrow {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.type-code {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
}
.type-stat {
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
}
.type-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0e0f13;
    --bg-tint: #111318;
    --surface: #16181d;
    --surface-2: #1b1e24;
    --surface-3: #22262e;
    --border: #282c34;
    --border-strong: #343a44;
    --text: #e9ebef;
    --muted: #a4abb6;
    --faint: #8d949f;
    --accent: #5b8cff;
    --accent-ink: #8fb0ff;
    --accent-weak: #182338;
    --accent-glow: rgba(91,140,255,.20);
    --accent-solid: #2361e6;
    --accent-solid-hover: #1b4fd0;
    --gold: #f2c811;
    --gold-weak: #2b2410;
    --gold-ink: #f2c811;
    --teal: #3cc4d4;
    --teal-weak: #10262a;
    --ok: #3ec38a;
    --ok-weak: #12271d;
    --warn: #e0a032;
    --warn-ink: #e0a032;
    --danger: #ef6d79;
    --danger-weak: #2c161a;
    --code-bg: #0a0c10;
    --code-text: #e4e8f0;
    --net-ink: #7aa0ff;
    --focus: var(--accent);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 10px 28px -10px rgba(0,0,0,.6);
    --shadow-lg: 0 34px 80px -28px rgba(0,0,0,.75);
  }
}
/* OpcOS Site Design System — thành phần dùng chung (components/bundle.css).
   Nguồn rút: agent-data-studio docs/assets/site.css. Mọi màu, khoảng cách, bo góc, bóng đi qua biến của tokens.json
   (Claude Design biên dịch thành tokens.css; kit/build.mjs sinh cùng bố cục). KHÔNG khai báo lại biến token ở đây. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#netbg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
body{margin:0;background:transparent;color:var(--text);font-family:var(--font-sans);line-height:1.6;
  font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
::selection{background:var(--accent-solid);color:var(--on-accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* skip link: ẩn cho tới khi được focus bằng bàn phím */
.skip{position:absolute;left:-999px;top:8px;z-index:100}
.skip:focus{left:16px;background:var(--accent-solid);color:var(--on-accent);padding:8px 12px;border-radius:8px;font-weight:600}
main{display:block}
[id]{scroll-margin-top:90px}

/* header */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s}
header.site.scrolled{border-bottom-color:var(--border)}
.nav{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap;flex:none}
.brand img{width:32px;height:32px;border-radius:50%;display:block}
.nav-links{display:flex;gap:4px;margin-left:auto}
/* mục menu dạng "pill": trang đang xem có nền màu nhấn, mục khác chỉ hiện nền khi hover */
.nav-links a{font-size:14.5px;font-weight:500;color:var(--muted);padding:7px 13px;border-radius:999px;
  transition:color .18s,background-color .18s,box-shadow .18s}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-links a.active{color:var(--accent-ink);background:var(--accent-weak);font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.nav-links a:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.nav .gh{margin-left:20px}
@media (max-width:860px){.nav-links{gap:2px}.nav-links a{font-size:13px;padding:6px 10px}.nav .gh span{display:none}}
@media (max-width:560px){.brand{font-size:14.5px;gap:7px}.brand img{width:26px;height:26px}.nav{gap:10px;height:56px}.nav-links{gap:2px}.nav-links a{font-size:12.5px;padding:6px 10px}}
/* site.js gắn fade-l / fade-r khi menu bị cuộn ngang: mờ mép để người dùng biết còn mục bị che */
.nav-links.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.nav-links.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 18%)}
.nav-links.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
@media (max-width:720px){header.site .brand{font-size:0;gap:0;flex:none;max-width:30px;overflow:hidden;white-space:nowrap}header.site .brand img{width:30px;height:30px;flex:none}}
@media (max-width:560px){.nav-links{margin-left:auto}.nav .gh,.langsel{display:none}}
/* menu không bao giờ bị ẩn; màn quá hẹp thì cuộn ngang trong thanh menu thay vì tràn trang */
.nav-links{min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-sans);
  font-size:15px;font-weight:600;padding:11px 18px;border-radius:11px;border:1px solid transparent;
  cursor:pointer;transition:transform .12s ease,background .18s,border-color .18s,box-shadow .18s}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-solid);color:var(--on-accent);box-shadow:0 6px 18px -6px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-solid-hover)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-ghost{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-3);border-color:var(--border-strong)}
.btn-sm{padding:8px 14px;font-size:14px;border-radius:9px}
/* AA: chữ trắng không đặt trên --accent (tối-mode #5b8cff chỉ 3.16:1) mà trên --accent-solid */
/* AA 1.4.1: link nằm trong đoạn văn không được chỉ phân biệt bằng màu */
main p a:not(.btn),main dd a{text-decoration:underline;text-underline-offset:3px}

/* page hero (sub-pages) */
.page-hero{position:relative;padding:64px 0 36px;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 82% -10%,var(--accent-glow),transparent 55%),
    radial-gradient(90% 70% at 8% 0%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 50%)}
.page-hero h1{font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:800;margin-top:14px}
.page-hero .lead{margin-top:16px;font-size:clamp(1rem,2vw,1.15rem);color:var(--muted);max-width:62ch;line-height:1.6}
.crumb{font-size:13.5px;color:var(--faint)}
.crumb a{color:var(--accent)}

/* sections & cards */
section{padding:56px 0}
.sec-head{max-width:660px;margin-bottom:36px}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:800;margin-top:12px}
.sec-head p{margin-top:12px;color:var(--muted);font-size:1.03rem;line-height:1.6}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm)}
.card h3{font-size:1.12rem;font-weight:700}
.card p{margin-top:9px;color:var(--muted);font-size:14.5px;line-height:1.6}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid-2,.grid-3{grid-template-columns:1fr}}
.ficon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-weak);color:var(--accent);margin-bottom:14px}
.ficon.gold{background:var(--gold-weak);color:var(--gold)}
.ficon.ok{background:var(--ok-weak);color:var(--ok)}
.ficon svg{width:23px;height:23px}
.kbd{display:inline-block;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:3px 8px}
code.inline{font-family:var(--font-mono);font-size:.88em;background:var(--surface-2);
  border:1px solid var(--border);border-radius:6px;padding:2px 6px}

/* tables */
.tbl-wrap{overflow-x:auto}
table.tbl{border-collapse:separate;border-spacing:0;width:100%;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
table.tbl th,table.tbl td{padding:13px 16px;text-align:left;font-size:14.5px;vertical-align:top}
table.tbl thead th{background:var(--surface-2);font-weight:700;font-size:13.5px;border-bottom:1px solid var(--border)}
table.tbl tbody tr:not(:last-child) td{border-bottom:1px solid var(--border)}
table.tbl td.lbl{font-weight:600;white-space:nowrap}
table.tbl code{font-family:var(--font-mono);font-size:13px;color:var(--accent)}
/* màn hẹp: bảng nhiều cột giữ bề rộng đọc được và cuộn ngang trong .tbl-wrap thay vì bóp mỗi dòng một chữ */
@media (max-width:620px){
  table.tbl{min-width:600px}
  table.tbl.fit{min-width:0}
  table.tbl td.lbl{white-space:normal;min-width:110px}
  table.tbl th,table.tbl td{padding:11px 12px;font-size:14px}
}

/* code cards */
.code-card{background:var(--code-bg);border:1px solid var(--code-border);border-radius:var(--radius);
  box-shadow:var(--shadow-md);overflow:hidden;margin:14px 0}
.code-top{display:flex;align-items:center;gap:8px;padding:10px 15px;border-bottom:1px solid var(--code-border)}
.code-top .fn{font-family:var(--font-mono);font-size:12.5px;color:var(--code-muted)}
.copy-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--code-chip-text);
  background:var(--code-chip);border:1px solid var(--code-chip-hover);padding:5px 11px;border-radius:8px}
.copy-btn:hover{background:var(--code-chip-hover);color:var(--code-text)}
.copy-btn:focus-visible{outline:2px solid var(--code-keyword);outline-offset:2px}
.copy-btn.done{color:var(--code-ok);border-color:color-mix(in srgb,var(--code-ok) 40%,transparent)}
.code-scroll{overflow-x:auto}
.code-card pre{margin:0;padding:15px 18px}
.code-card pre code{font-family:var(--font-mono);font-size:13px;line-height:1.8;color:var(--code-text);white-space:pre;display:block}
.code-scroll .cm{color:var(--code-comment)}.code-scroll .pr{color:var(--code-keyword)}
/* lời nhờ phải xuống dòng trên mobile, không bắt cuộn ngang (chỉ đổi hiển thị, nội dung sao chép giữ nguyên) */
@media (max-width:620px){.code-card pre code{white-space:pre-wrap;overflow-wrap:anywhere}}

/* callouts */
.note{border-left:3px solid var(--accent);background:var(--accent-weak);padding:14px 18px;
  border-radius:var(--radius-sm);font-size:14.5px;color:var(--text);margin:16px 0;line-height:1.6}
.note.warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.note b{color:var(--text)}

/* steps */
.step{display:flex;gap:16px;align-items:flex-start;margin:18px 0}
.step .num{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-solid);color:var(--on-accent);
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.step .body{flex:1;min-width:0}
.step h3{font-size:1.08rem;font-weight:700}
.step p{margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.6}

/* dual-audience chips */
.aud{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.aud span{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.aud .a1{background:var(--ok-weak);color:var(--ok);border-color:transparent}
.aud .a2{background:var(--accent-weak);color:var(--accent-ink);border-color:transparent}

/* quick-nav dọc bên phải */
.quicknav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:6px;background:color-mix(in srgb,var(--surface) 80%,transparent);
  backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:14px;padding:10px 8px;box-shadow:var(--shadow-md)}
.quicknav a{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--faint);
  padding:5px 8px;border-radius:8px;transition:color .15s,background .15s}
.quicknav a .qdot{width:7px;height:7px;border-radius:50%;background:var(--border-strong);flex:none;transition:background .15s}
.quicknav a:hover{color:var(--text);background:var(--surface-2)}
.quicknav a.on{color:var(--accent)}
.quicknav a.on .qdot{background:var(--accent)}
@media (max-width:1520px){.quicknav .qlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.quicknav{padding:10px 6px}.quicknav a{min-width:24px;min-height:24px;justify-content:center}}
@media (max-width:1259px){.quicknav{display:none}}

/* footer (một khuôn cho mọi trang) */
footer.site{border-top:1px solid var(--border);background:var(--bg-tint);padding:44px 0 40px;margin-top:40px}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot .brand{margin-bottom:10px}
.foot .brand img{width:26px;height:26px}
.foot-tag{color:var(--muted);font-size:14px;max-width:36ch;line-height:1.55}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-col b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-bottom:12px}
.foot-col a{display:block;font-size:14.5px;color:var(--muted);margin-bottom:9px;transition:color .15s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:13px}
.foot-bottom .lic{font-family:var(--font-mono)}

/* reveal: chỉ ẩn khi JS đã chạy (site.js gắn class "js"); không JS thì nội dung vẫn hiện */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  html.js .reveal.in{opacity:1;transform:none}
}

/* ===== khối dùng chung nhiều trang ===== */
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.tech-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.tb{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;font-family:var(--font-mono);
  padding:6px 11px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.tb .g{width:7px;height:7px;border-radius:2px;background:var(--accent)}
.tb.local .g{background:var(--ok)}
.tb.gold .g{background:var(--gold)}

/* layers: danh sách tầng có nhãn số */
.layers{display:flex;flex-direction:column;gap:12px;max-width:760px}
.layer{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:18px 20px;box-shadow:var(--shadow-sm)}
.layer .lnum{flex:none;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent);
  background:var(--accent-weak);border-radius:6px;padding:3px 8px;margin-top:2px}
.layer h3{font-size:1rem;font-weight:700}
.layer p{margin-top:5px;font-size:13.5px;color:var(--muted);line-height:1.55}
.layer.dele{border-style:dashed}
.layer.dele .lnum{background:var(--surface-3);color:var(--muted)}

/* điểm mạnh / giới hạn */
.sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sw{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.sw.plus{border-color:color-mix(in srgb,var(--ok) 30%,var(--border))}
.sw.minus{border-color:color-mix(in srgb,var(--warn) 30%,var(--border))}
.sw h3{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:800}
.sw h3 .sic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center}
.sw.plus h3 .sic{background:var(--ok-weak);color:var(--ok)}
.sw.minus h3 .sic{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.sw ul{margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.sw li{list-style:none;font-size:14.5px;line-height:1.55;color:var(--muted);padding-left:20px;position:relative}
.sw li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px}
.sw.plus li::before{background:var(--ok)}
.sw.minus li::before{background:var(--warn)}
.sw li b{color:var(--text)}
@media (max-width:840px){.sw-grid{grid-template-columns:1fr}}

/* CTA cuối trang */
.final{text-align:center;padding:80px 0}
.final h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800}
.final p{margin:16px auto 0;max-width:48ch;color:var(--muted);font-size:1.06rem}
.final .hero-cta{justify-content:center;margin-top:32px}

/* hội thoại mẫu: BẠN / AGENT / NỘI QUY */
.dialog{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);
  padding:18px;display:flex;flex-direction:column;gap:12px}
.line{display:flex;gap:11px;align-items:flex-start}
.who{flex:none;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;margin-top:2px;
  font-family:var(--font-mono);letter-spacing:.01em}
.who.you{background:var(--accent-weak);color:var(--accent-ink)}
.who.ag{background:var(--surface-3);color:var(--muted)}
.who.pol{background:var(--danger-weak);color:var(--danger)}
.say{font-size:14px;line-height:1.55;min-width:0}
.say .tool{font-family:var(--font-mono);font-size:12px;color:var(--accent);background:var(--accent-weak);
  border-radius:6px;padding:2px 7px;display:inline-block;margin-bottom:5px}
.say .blocked{color:var(--danger);font-weight:600;font-size:13px}
.say .aside{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.mini-tbl{border-collapse:collapse;font-family:var(--font-mono);font-size:11.5px;margin-top:6px;width:100%}
.mini-tbl th,.mini-tbl td{border:1px solid var(--border);padding:4px 9px;text-align:left;color:var(--muted)}
.mini-tbl th{background:var(--surface-2);color:var(--text);font-weight:600}
.mini-tbl td.n{text-align:right;color:var(--text)}

/* luồng ô nhỏ có số thứ tự */
.flow-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.flow-mini li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;box-shadow:var(--shadow-sm)}
.flow-mini .fnum{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent)}
.flow-mini b{display:block;margin-top:6px;font-size:14.5px}
.flow-mini span.d{display:block;margin-top:4px;font-size:13.5px;color:var(--muted);line-height:1.55}
.flow-mini li.key{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-weak),var(--surface) 80%)}
@media (max-width:760px){.flow-mini{grid-template-columns:1fr}}

/* chuỗi hộp nối mũi tên */
.kflow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0}
.kflow .kbox{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;
  font-size:13px;font-weight:600;box-shadow:var(--shadow-sm)}
.kflow .kbox small{display:block;font-weight:500;color:var(--faint);font-size:11.5px;margin-top:2px}
.kflow .kbox.dim{border-style:dashed}
.kflow .karr{color:var(--accent);font-weight:700}

/* từ điển */
.glossary{margin:0}
.glossary dt{font-weight:700;margin-top:18px;font-size:1.02rem}
.glossary dt:first-child{margin-top:0}
.glossary dt code{font-family:var(--font-mono);font-size:.9em;color:var(--accent)}
.glossary dd{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.65}

/* hàng con số */
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 18px 16px;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-family:var(--font-mono);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600;line-height:1.1;color:var(--text);letter-spacing:-.02em}
.stat b.sm{font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.5}
.stat span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.45}
@media (max-width:760px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* dòng thời gian / luồng nhiều chặng: ngang trên màn rộng, dọc trên màn hẹp */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.timeline > li{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:18px 16px;box-shadow:var(--shadow-sm);min-width:0}
.timeline > li:not(:last-child)::after{content:"";position:absolute;top:28px;right:-19px;width:10px;height:10px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg)}
.timeline .tnum{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent);
  background:var(--accent-weak);border-radius:6px;padding:2px 7px;display:inline-block}
.timeline h3{margin-top:12px;font-size:1rem;font-weight:700}
.timeline p{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.55}
.timeline p b{color:var(--text)}
.timeline code{font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
@media (max-width:980px){
  .timeline{grid-template-columns:1fr;gap:26px}
  .timeline > li:not(:last-child)::after{top:auto;right:auto;left:50%;bottom:-19px;transform:translateX(-50%) rotate(135deg)}
}

/* sơ đồ SVG vẽ tay: mọi màu lấy từ token để hợp dark mode */
.arch-diagram{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow-sm);overflow-x:auto;margin:0}
.arch-diagram svg{width:100%;height:auto;display:block}
.arch-diagram figcaption{font-size:13px;color:var(--faint);margin-top:10px}
.arch-diagram text{font-family:var(--font-sans);fill:var(--text)}
.arch-diagram .t-mute{fill:var(--muted)}
.arch-diagram .t-acc{fill:var(--accent)}
.arch-diagram .t-mono{font-family:var(--font-mono)}
.arch-diagram .t-b{font-weight:700}
.arch-diagram .n{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:1.5}
.arch-diagram .n-plain{fill:var(--surface);stroke:var(--border-strong);stroke-width:1.5}
.arch-diagram .n-acc{fill:var(--accent-weak);stroke:var(--accent);stroke-width:1.5}
.arch-diagram .n-ok{fill:var(--ok-weak);stroke:var(--ok);stroke-width:1.5}
.arch-diagram .n-warn{fill:var(--surface-2);stroke:var(--warn);stroke-width:1.5}
.arch-diagram .n-dash{fill:none;stroke:var(--border-strong);stroke-width:1.5;stroke-dasharray:6 5}
.arch-diagram .ln{fill:none;stroke:var(--accent);stroke-width:2}
.arch-diagram .ln-mute{fill:none;stroke:var(--border-strong);stroke-width:2}
.arch-diagram .ln-dash{fill:none;stroke:var(--border-strong);stroke-width:2;stroke-dasharray:6 5}
.arch-diagram .ah{fill:var(--accent)}
.arch-diagram .ah-mute{fill:var(--border-strong)}
@media (max-width:700px){.arch-diagram svg.wide{min-width:660px}}

/* hỏi đáp */
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px}
.faq details{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:12px 16px}
.faq details[open]{border-color:var(--accent)}
.faq summary{cursor:pointer;font-weight:600}
.faq details p{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.65}

/* ===== infographic (.ig-*): quy trình / cấu trúc bằng HTML + SVG inline =====
   Chữ là HTML thật; SVG chỉ vẽ icon và mũi tên, mọi màu lấy từ token nên hợp dark mode.
   Màu nhóm đặt bằng class c-* → biến --c (nét, viền), --cw (nền nhạt), --ci (chữ đạt tương phản). */
.c-teal{--c:var(--teal);--cw:var(--teal-weak);--ci:var(--teal)}
.c-acc{--c:var(--accent);--cw:var(--accent-weak);--ci:var(--accent-ink)}
.c-gold{--c:var(--gold);--cw:var(--gold-weak);--ci:var(--gold-ink)}
.c-ok{--c:var(--ok);--cw:var(--ok-weak);--ci:var(--ok)}
.c-mute{--c:var(--border-strong);--cw:var(--surface-2);--ci:var(--muted)}
.ig-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ig-ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ig{--c:var(--accent);--cw:var(--accent-weak);--ci:var(--accent-ink)}
.ig-title{font-size:1.05rem;font-weight:700;margin:0 0 18px;display:flex;align-items:center;gap:10px}
.ig-title::after{content:"";flex:1;height:1px;background:var(--border)}

/* nút tròn có icon + số bước */
.ig-node{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--cw);color:var(--ci);border:2px solid var(--c);box-shadow:0 0 0 5px var(--ig-ring,var(--bg))}
.ig-num{position:absolute;top:-7px;right:-9px;min-width:23px;height:23px;padding:0 5px;border-radius:999px;
  background:var(--surface);border:2px solid var(--c);color:var(--ci);font:700 12px/19px var(--font-mono);text-align:center}
.ig-body{min-width:0;padding-top:12px}
.ig-body h3,.ig-body h4{font-size:15px;font-weight:700;line-height:1.3;margin:0}
.ig-body p{margin-top:5px;font-size:13.5px;color:var(--muted);line-height:1.5}
.ig-body p b{color:var(--text)}
.ig-body .kbd{font-size:11.5px;padding:2px 7px;margin-top:8px}
.ig-body code.inline{overflow-wrap:anywhere}
.ig-body > .kbd{display:inline-block;align-self:flex-start}
.ig-stage{display:block;font-size:12px;font-weight:700;color:var(--ci);margin-bottom:3px}

/* cổng kiểm: luôn màu xanh "đạt" + khiên, để mắt nhận ra ngay chỗ phải có bằng chứng */
.ig-gate,.ig-body .ig-gate{display:flex;gap:6px;align-items:flex-start;margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--text);
  background:var(--ok-weak);border:1px solid color-mix(in srgb,var(--ok) 32%,transparent);border-radius:8px;padding:5px 8px;width:fit-content;max-width:100%}
.ig-gate svg{width:14px;height:14px;margin-top:2px;color:var(--ok);stroke-width:2.2}
.ig-gate b{color:var(--ok)}
.ig-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ok);background:var(--ok-weak);
  border:1px solid color-mix(in srgb,var(--ok) 32%,transparent);border-radius:999px;padding:2px 9px;vertical-align:2px;margin-left:6px;white-space:nowrap}
.ig-badge svg{width:12px;height:12px;stroke-width:2.4}

/* track: mặc định DỌC (mobile-first); thêm .ig-h để nằm NGANG trên màn rộng */
.ig-track{list-style:none;margin:0;padding:0;display:grid}
.ig-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;padding-bottom:26px;min-width:0}
.ig-step:last-child{padding-bottom:0}
.ig-step::before{content:"";position:absolute;left:23px;top:0;bottom:0;width:2px;background:var(--c)}
.ig-step:first-child::before{top:24px}
.ig-step:last-child::before{bottom:auto;height:24px}
.ig-step:only-child::before{display:none}
.ig-step:not(:last-child)::after{content:"";position:absolute;left:20px;bottom:9px;width:8px;height:8px;
  border-right:2px solid var(--c);border-bottom:2px solid var(--c);transform:rotate(45deg)}
.ig-step.is-dash::before{background:repeating-linear-gradient(180deg,var(--c) 0 6px,transparent 6px 11px)}
@media (min-width:1080px){
  .ig-h{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .ig-h > .ig-step{display:block;padding:0 16px 0 0}
  .ig-h > .ig-step::before{top:23px;bottom:auto;left:0;right:0;width:auto;height:2px}
  .ig-h > .ig-step:first-child::before{left:24px}
  .ig-h > .ig-step:last-child::before{right:calc(100% - 24px)}
  .ig-h > .ig-step:not(:last-child)::after{left:auto;bottom:auto;top:19px;right:12px;border:0;
    border-top:2px solid var(--c);border-right:2px solid var(--c)}
  .ig-h > .ig-step.is-dash::before{background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 11px)}
  .ig-h > .ig-step.span3{grid-column:span 3}
  /* các cột cao bằng nhau: cổng kiểm / phiếu kiểm luôn nằm thành một hàng ở đáy */
  .ig-h > .ig-step{display:flex;flex-direction:column}
  .ig-h > .ig-step > .ig-node{align-self:flex-start}
  .ig-h .ig-body{flex:1;display:flex;flex-direction:column}
  .ig-h .ig-body > p:not(.ig-gate):not(.ig-check):not(.ig-exit){margin-bottom:10px}
  .ig-h .ig-body > .ig-gate,.ig-h .ig-body > .ig-check,.ig-h .ig-body > .ig-exit{margin-top:auto;width:100%}
}

/* chín khâu: 4 giai đoạn nối liền một đường; 2 cột giai đoạn ở màn vừa, 1 cột ở mobile */
.ig-pipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px}
.ig-phase{min-width:0}
.ig-phase-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;border-top:3px solid var(--c);padding-top:10px;margin:0 0 18px}
.ig-phase-h b{font-size:15px;color:var(--ci)}
.ig-phase-h span{font:600 12px var(--font-mono);color:var(--faint)}
@media (max-width:699px){.ig-pipe{grid-template-columns:1fr;gap:30px}}
@media (min-width:1080px){
  .ig-pipe{grid-template-columns:2fr 3fr 3fr 1fr;gap:0}
  .ig-pipe > .ig-phase{display:flex;flex-direction:column}
  .ig-pipe > .ig-phase > .ig-track{flex:1}
  .ig-phase:not(:last-child) .ig-phase-h{margin-right:16px}
  .ig-pipe .ig-phase:not(:first-child) .ig-h > .ig-step:first-child::before{left:0}
  .ig-pipe .ig-phase:not(:last-child) .ig-h > .ig-step:last-child::before{right:0}
  .ig-pipe .ig-phase:not(:last-child) .ig-h > .ig-step:last-child::after{content:"";position:absolute;top:19px;right:12px;
    width:8px;height:8px;border-top:2px solid var(--c);border-right:2px solid var(--c);transform:rotate(45deg)}
}
.ig-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px}
.ig-note{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.ig-note b{color:var(--text)}
.ig-note .ig-ico{width:18px;height:18px;color:var(--ci);margin-top:1px}
.ig-note > span{min-width:0}
.ig-note code.inline{overflow-wrap:anywhere}
@media (max-width:860px){.ig-notes{grid-template-columns:minmax(0,1fr)}}

/* chồng tầng: yêu cầu đi xuống qua từng tầng, kết quả đi lên; tầng giao bên ngoài đi làn riêng (.ig-side) */
.ig-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);column-gap:28px;max-width:1000px;
  grid-template-areas:"host host" "down side" "tiers side" "up side" "pbi pbi"}
.ig-end{display:flex;gap:14px;align-items:center;padding:13px 18px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border-strong)}
.ig-end .ig-ico{color:var(--text)}
.ig-end b{display:block;font-size:15px}
.ig-end span{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.ig-host{grid-area:host}
.ig-pbi{grid-area:pbi}
.ig-flow{display:flex;align-items:center;gap:10px;height:46px;padding-left:29px;font-size:12.5px;font-weight:600}
.ig-flow svg{width:32px;height:46px;flex:none;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ig-flow .dn{stroke:var(--accent)}
.ig-flow .up{stroke:var(--ok)}
.ig-flow .l-dn{color:var(--accent-ink)}
.ig-flow .l-up{color:var(--ok)}
.ig-flow.f-down{grid-area:down}
.ig-flow.f-up{grid-area:up}
.ig-tiers{grid-area:tiers;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.ig-tier{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--c);border-radius:var(--radius-sm);
  padding:16px 18px;box-shadow:var(--shadow-sm);--ig-ring:transparent}
.ig-tiers .ig-tier + .ig-tier::before{content:"";position:absolute;left:41px;top:-19px;height:18px;width:2px;background:var(--border-strong)}
.ig-tier .ig-body{padding-top:2px}
.ig-tier h4{font-size:15.5px}
.ig-tcode{font:700 12px var(--font-mono);color:var(--ci);margin-right:6px}
.ig-side{grid-area:side;display:flex;flex-direction:column}
.ig-side::before,.ig-side::after{content:"";flex:1;min-height:18px;width:0;align-self:center;border-left:2px dashed var(--border-strong)}
.ig-side .ig-tier{border-style:dashed;border-left:3px dashed var(--c);box-shadow:none;background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.ig-side .ig-body .ig-warn{display:flex;gap:7px;margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--text)}
.ig-side .ig-warn svg{width:15px;height:15px;flex:none;color:var(--warn);margin-top:2px;stroke-width:2.2}
@media (max-width:760px){
  .ig-stack{grid-template-columns:1fr;grid-template-areas:"host" "down" "tiers" "up" "pbi" "side"}
  .ig-side{margin-top:22px}
  .ig-side::before,.ig-side::after{display:none}
  .ig-tier{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px}
  .ig-tier .ig-node{width:40px;height:40px}
  .ig-tiers .ig-tier + .ig-tier::before{left:33px}
  .ig-flow{padding-left:21px;height:auto;min-height:46px;flex-wrap:wrap;row-gap:0}
  .ig-flow span{flex:1 1 auto}
}

/* hai làn so sánh: làn yếu (mờ, nét đứt) và làn chính */
.ig-vs{display:flex;flex-direction:column;gap:16px}
.ig-lane{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:20px 22px 22px;
  box-shadow:var(--shadow-sm);--ig-ring:var(--surface)}
.ig-lane.is-weak{background:var(--surface-2);border-style:dashed;box-shadow:none;--ig-ring:var(--surface-2)}
.ig-lane-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.ig-lane-h b{font-size:1.1rem;font-weight:800}
.ig-lane-h span{font-size:14px;color:var(--muted)}
@media (max-width:560px){.ig-lane{padding:16px 16px 18px}}
.ig-lane.is-weak .ig-body h3{color:var(--muted)}

/* mục tiêu + cách tự kiểm: phiếu kiểm luôn nằm đáy cột */
.ig-check,.ig-body .ig-check{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;
  color:var(--text);border:1px dashed color-mix(in srgb,var(--c) 60%,var(--border));background:color-mix(in srgb,var(--cw) 70%,var(--surface))}
.ig-check svg{width:17px;height:17px;flex:none;color:var(--ci);margin-top:1px;stroke-width:2.1}
.ig-check b{color:var(--ci)}

/* vòng tính năng: chip nối nhau + mũi tên quay lại */
.ig-loop{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px}
.ig-loop li{display:inline-flex;align-items:center;gap:6px}
.ig-loop li + li::before{content:"";width:14px;height:2px;background:var(--border-strong);margin-right:4px}
.ig-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ci);background:var(--cw);
  border:1px solid color-mix(in srgb,var(--c) 35%,transparent);border-radius:999px;padding:4px 11px}
.ig-tag .ig-ico{width:15px;height:15px;stroke-width:2}
.ig-loop .ig-back{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.ig-loop .ig-back .ig-ico{width:17px;height:17px;color:var(--muted)}
.feat .ig-tag{font-size:11.5px;padding:2px 9px;margin-bottom:12px}

/* hành trình dọc (một cột) */
.ig-journey{--ig-ring:var(--surface)}
.ig-next{display:flex;gap:10px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px dashed var(--border-strong);font-size:13.5px;color:var(--muted)}
.ig-next .ig-ico{width:18px;height:18px}

/* lối ra bị chặn: cùng dáng cổng kiểm nhưng màu đỏ, để thấy ngay chỗ yêu cầu dừng lại */
.ig-exit,.ig-body .ig-exit{display:flex;gap:6px;align-items:flex-start;margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--text);
  background:var(--danger-weak);border:1px solid color-mix(in srgb,var(--danger) 32%,transparent);border-radius:8px;padding:5px 8px;max-width:100%}
.ig-exit svg{width:14px;height:14px;margin-top:2px;color:var(--danger);stroke-width:2.2}
.ig-exit b{color:var(--danger)}
.ig-exit code.inline{font-size:.86em;padding:1px 5px}

/* sổ ghi chung: một dải nét đứt dưới track, mọi lối ra của các bước đều ghi vào đây */
.ig-ledger{display:flex;gap:14px;align-items:flex-start;margin-top:26px;padding:14px 18px;border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--cw) 55%,var(--surface));border:1px dashed color-mix(in srgb,var(--c) 60%,var(--border))}
.ig-ledger > .ig-ico{color:var(--ci);margin-top:2px}
.ig-ledger b{color:var(--ci)}
.ig-ledger p{font-size:13.5px;line-height:1.55;color:var(--muted)}
.ig-ledger p + p{margin-top:6px}
.ig-ledger p b{color:var(--text)}
.ig-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.ig-chips > span{font-size:12.5px;margin-right:2px}
.ig-chips > code{font:600 11.5px var(--font-mono);padding:2px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.ig-chips > code.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.ig-chips > code.no{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}

/* mũi tên quay lại: màn hẹp là một dòng có icon; màn rộng vẽ ngoặc chữ U nét đứt dưới track ngang,
   từ cột --from quay về cột --to (đánh số từ 1, --n = số cột của track) */
.ig-return{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.ig-return .ig-ico{width:18px;height:18px;color:var(--ci);margin-top:1px}
.ig-return b{color:var(--ci)}
@media (min-width:1080px){
  .ig-return{position:relative;margin-top:8px;padding-top:30px;padding-left:calc((var(--to) - 1) * 100% / var(--n) + 10px)}
  .ig-return::before{content:"";position:absolute;top:0;height:20px;
    left:calc((var(--to) - 1) * 100% / var(--n) + 23px);right:calc(100% - (var(--from) - 1) * 100% / var(--n) - 25px);
    border:2px dashed var(--c);border-top:0;border-radius:0 0 14px 14px}
  .ig-return::after{content:"";position:absolute;top:-1px;left:calc((var(--to) - 1) * 100% / var(--n) + 20px);width:8px;height:8px;
    border-left:2px solid var(--c);border-top:2px solid var(--c);transform:rotate(45deg)}
}

/* giai đoạn xếp thành cột, mỗi cột một track dọc: dùng khi mỗi bước có nhiều chữ (thêm .is-cols vào .ig-pipe) */
@media (min-width:1080px){
  .ig-pipe.is-cols{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));column-gap:28px}
  .ig-pipe.is-cols .ig-phase .ig-phase-h{margin-right:0}
}
.ig-body .ig-link{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--text)}
.ig-body .ig-link:hover{color:var(--accent)}
.ig-body .ig-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* chặng dài: mỗi chặng là một section, nút tròn + đường ray dọc bên trái nối các chặng */
.ig-stop{position:relative;padding-left:74px}
.ig-stop > .ig-node{position:absolute;left:0;top:var(--stop-top,28px);--ig-ring:var(--bg)}
.ig-stop::before{content:"";position:absolute;left:23px;top:0;bottom:0;width:2px;background:var(--c)}
.ig-stop.is-first::before{top:calc(var(--stop-top,28px) + 24px)}
.ig-stop.is-last::before{bottom:auto;height:calc(var(--stop-top,28px) + 24px)}
@media (max-width:620px){
  .ig-stop{padding-left:0}
  .ig-stop::before{display:none}
  .ig-stop > .ig-node{position:relative;top:auto;margin-bottom:14px}
}

/* chuyển động: vẽ đường nối rồi hiện nút, chỉ khi site.js đã chạy và người dùng không tắt chuyển động */
@media (prefers-reduced-motion:no-preference){
  html.js .ig.reveal .ig-step::before{transform:scaleY(0);transform-origin:top;
    transition:transform .5s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms + 120ms)}
  html.js .ig.reveal .ig-step .ig-node{opacity:0;transform:scale(.6);
    transition:opacity .3s ease calc(var(--i,0) * 90ms),transform .45s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0) * 90ms)}
  html.js .ig.reveal.in .ig-step::before{transform:none}
  html.js .ig.reveal.in .ig-step .ig-node{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference) and (min-width:1080px){
  html.js .ig.reveal .ig-h > .ig-step::before{transform:scaleX(0);transform-origin:left}
  html.js .ig.reveal.in .ig-h > .ig-step::before{transform:none}
}

/* ===== i18n language toggle ===== */
html[data-lang="vi"] [data-i18n="en"]{display:none}
html[data-lang="en"] [data-i18n="vi"]{display:none}
.langsel{position:relative;margin-left:14px}
.langsel > button{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);
  font-size:13px;font-weight:700;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:9px;padding:7px 11px;cursor:pointer}
.langsel > button:hover{color:var(--text);border-color:var(--border-strong)}
.langsel > button svg{width:13px;height:13px}
.langsel ul{position:absolute;right:0;top:calc(100% + 6px);min-width:132px;list-style:none;
  margin:0;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:11px;
  box-shadow:var(--shadow-md);display:none;z-index:60}
.langsel.open ul{display:block}
.langsel li{margin:0}
.langsel li button{width:100%;text-align:left;display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;color:var(--text);background:none;border:none;border-radius:7px;
  padding:8px 10px;cursor:pointer}
.langsel li button:hover{background:var(--surface-2)}
.langsel li button.on{color:var(--accent)}
.langsel li button .fl{font-size:15px}
@media (max-width:560px){.langsel{margin-left:8px}.langsel > button{padding:6px 9px;font-size:12px}}

/* ===== bổ sung của DS chung (không có ở site nguồn) ===== */
/* chú thích theo trạng thái: cùng dáng .note, đổi màu viền + nền */
.note.ok{border-left-color:var(--ok);background:var(--ok-weak)}
.note.danger{border-left-color:var(--danger);background:var(--danger-weak)}
.note.warn b{color:var(--warn-ink)}

/* nút đổi giao diện sáng/tối: ds gắn vào mọi [data-ds-theme-toggle] */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:10px;flex:none;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer}
.theme-btn:hover{color:var(--text);border-color:var(--border-strong)}
.theme-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.theme-btn{display:none}}

/* trang Docs: cột mục lục trái + bài đọc; màn hẹp xếp dọc */
.doc-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;padding:40px 0 24px}
.doc-toc{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;font-size:14px}
.doc-toc b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:0 0 10px}
.doc-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.doc-toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--muted)}
.doc-toc a:hover{background:var(--surface-2);color:var(--text)}
.doc-toc a[aria-current="page"]{background:var(--accent-weak);color:var(--accent-ink);font-weight:600}
.doc-toc .dir{margin:12px 0 4px;padding:0 10px;font:600 11.5px var(--font-mono);color:var(--faint)}
@media (max-width:860px){.doc-layout{grid-template-columns:1fr;gap:20px}.doc-toc{position:static;max-height:none}}
.doc-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--faint);margin-bottom:18px}
.doc-meta code{font-family:var(--font-mono);font-size:12.5px}
.doc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.doc-list a{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;box-shadow:var(--shadow-sm)}
.doc-list a:hover{border-color:var(--accent)}
.doc-list b{display:block;font-size:15px}
.doc-list span{display:block;margin-top:4px;font:12px var(--font-mono);color:var(--faint);overflow-wrap:anywhere}
@media (max-width:620px){.doc-list{grid-template-columns:1fr}}

/* đầu trang chia hai cột: chữ trái, ảnh minh hoạ phải (Trang chủ); màn hẹp ảnh xuống dưới chữ */
.page-hero.split .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px;align-items:center}
.page-hero.split h1{font-size:clamp(1.9rem,4vw,2.7rem)}
.hero-media{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--shadow-lg)}
.hero-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media (max-width:900px){.page-hero.split .wrap{grid-template-columns:1fr;gap:28px}}

/* tác giả và giấy phép (cuối Trang chủ) */
.author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start}
.avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  font-weight:800;font-size:1.35rem;color:var(--accent-ink);background:var(--accent-weak);border:1px solid var(--border)}
.author h3{font-size:1.12rem;font-weight:700}
.author p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.65}
.author p b{color:var(--text)}
@media (max-width:620px){.author{grid-template-columns:1fr}}

/* .prose: chữ dài sinh từ Markdown (trang Docs, trang Nguyên tắc) */
.prose{max-width:76ch;font-size:16px;line-height:1.7}
.prose > * + *{margin-top:14px}
.prose h1{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:800}
.prose h2{font-size:1.45rem;font-weight:800;margin-top:36px;padding-top:8px}
.prose h3{font-size:1.15rem;font-weight:700;margin-top:28px}
.prose h4{font-size:1rem;font-weight:700;margin-top:22px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px}
.prose li + li{margin-top:6px}
.prose blockquote{margin-left:0;border-left:3px solid var(--border-strong);padding:4px 0 4px 16px;color:var(--muted)}
.prose code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-xs);padding:1px 6px}
.prose pre{background:var(--code-bg);color:var(--code-text);border:1px solid var(--code-border);border-radius:var(--radius-sm);padding:14px 18px;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:13px;line-height:1.7}
.prose hr{border:0;border-top:1px solid var(--border);margin:28px 0}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--border);padding:8px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--surface-2);font-weight:700}
.prose img{max-width:100%}