/* =====================================================================
   anninh.io.vn - giao diện "Thuỵ Sĩ" (Swiss / International, tối giản), port từ design/mockups/v4-thuy-si
   CSP của site: style-src 'self' -> không style= inline, không <style>, không webfont, không tài nguyên ngoài.
   ---------------------------------------------------------------------
   HỆ THỐNG THIẾT KẾ. Phần đầu file là bảng token; phần còn lại CHỈ
   tham chiếu token (không số ma thuật). Thứ tự:
     1. Màu (hợp đồng Jinja, HEX)      4. Lưới 4 / 8 / 12 cột
     2. Khoảng cách, bước 4/8          5. Đường kẻ, bo góc, chạm, chuyển động
     3. Chữ, module 1.25
   Điểm gãy (CSS không cho dùng biến trong @media nên ghi ở đây):
     < 37.5em (600px)  : 4 cột
     >= 37.5em         : 8 cột (menu vẫn thu gọn tới 60em)
     >= 60em (960px)   : 12 cột, bảng chỉ mục bài, công cụ 2 cột
     >= 68.75em (1100px): bài viết 3 vùng (mục lục | bài | thông tin)
   ---------------------------------------------------------------------
   1. MÀU - tỉ lệ tương phản (sáng / tối)
     --fg/--bg 18.5 / 15.7        --muted/--bg 7.2 / 8.1
     --fg/--surface 17.1 / 14.4   --muted/--surface 6.7 / 7.4
     --accent/--bg 7.0 / 7.7      --accent/--surface 6.4 / 7.0
     --on-accent/--accent-bg 7.0 / 7.7
     --ui-border/--bg 3.7 / 4.5   --focus/--bg 7.0 / 7.7
     huy hiệu ok 6.8/9.0 · warn 6.7/8.5 · err 6.8/7.9 · info 7.7/8.5
   --border chỉ là kẻ trang trí (không mang nghĩa).
   ===================================================================== */

/* tokens:light */
:root { --bg:#ffffff; --surface:#f5f6f8; --fg:#111418; --muted:#4f5866; --accent:#0a4cd6; --accent-bg:#0a4cd6; --on-accent:#ffffff; --border:#e3e6eb; --ui-border:#7c8594; --focus:#0a4cd6; --code-bg:#f5f6f8; --code-fg:#111418; --ok-bg:#e6f4ea; --ok-fg:#11602e; --warn-bg:#fdf1dc; --warn-fg:#7a4a00; --err-bg:#fbe9e9; --err-fg:#a1161b; --info-bg:#e8eefc; --info-fg:#0a3fae; }
/* tokens:dark */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0e1013; --surface:#171a1f; --fg:#e7e9ee; --muted:#a2a9b5; --accent:#7aa2ff; --accent-bg:#7aa2ff; --on-accent:#0e1013; --border:#2a2f37; --ui-border:#727b88; --focus:#7aa2ff; --code-bg:#171a1f; --code-fg:#e7e9ee; --ok-bg:#12301f; --ok-fg:#7ee2a0; --warn-bg:#3a2a0c; --warn-fg:#f3c46b; --err-bg:#3d1517; --err-fg:#ff9b9b; --info-bg:#15244a; --info-fg:#a9c1ff; } }
:root[data-theme="dark"] { --bg:#0e1013; --surface:#171a1f; --fg:#e7e9ee; --muted:#a2a9b5; --accent:#7aa2ff; --accent-bg:#7aa2ff; --on-accent:#0e1013; --border:#2a2f37; --ui-border:#727b88; --focus:#7aa2ff; --code-bg:#171a1f; --code-fg:#e7e9ee; --ok-bg:#12301f; --ok-fg:#7ee2a0; --warn-bg:#3a2a0c; --warn-fg:#f3c46b; --err-bg:#3d1517; --err-fg:#ff9b9b; --info-bg:#15244a; --info-fg:#a9c1ff; }

:root {
  color-scheme: light;

  /* 2. KHOẢNG CÁCH - 4, 8, 12, 16, 24, 32, 48, 64 px */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;

  /* 3. CHỮ - module 1.25 quanh 1rem.
     --t-sm: 1 / 1.25 = .8 làm tròn lên .875 để dấu tiếng Việt không dính. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-sm: .875rem; --t-md: 1rem; --t-body: 1.0625rem; --t-lg: 1.25rem;
  --t-xl: 1.5625rem; --t-2xl: 1.953rem; --t-3xl: 2.441rem;
  --t-display: clamp(2.25rem, 6vw, 4.5rem);
  --t-code: .9em;
  --lh-tight: 1.15; --lh-snug: 1.35; --lh-lead: 1.5; --lh-body: 1.6;
  --w-reg: 400; --w-semi: 600; --w-bold: 700;
  --ls-tight: -.015em; --ls-display: -.03em; --ls-label: .03em;
  --u-offset: .2em;

  /* 4. LƯỚI */
  --cols: 4;
  --grid-gap: var(--s-4);
  --gutter: var(--s-4);
  --wrap: 75rem;            /* khung tối đa 1200px */
  --measure: 68ch;          /* độ dài dòng đọc */
  --col-date: 7rem;         /* bảng chỉ mục bài */
  --col-tags: 9rem;
  --col-mins: 5.5rem;
  --col-badge: 7rem;        /* cột huy hiệu kết quả công cụ */
  --table-min: 32rem;
  --sum-lines: 2;
  --sticky-top: var(--s-6);

  /* 5. ĐƯỜNG KẺ, BO GÓC, CHẠM, CHUYỂN ĐỘNG */
  --line: 1px; --line-2: 2px; --line-3: 3px;
  --radius: 2px; --radius-pill: 999px;
  --tap: 2.75rem;           /* 44px vùng chạm tối thiểu */
  --icon: 1rem;             /* biểu tượng 16px */
  --dur: 120ms;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
@media (min-width: 37.5em) { :root { --cols: 8; } }
@media (min-width: 60em) { :root { --cols: 12; --gutter: var(--s-6); --grid-gap: var(--s-5); } }

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body);
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
a { color: var(--accent); text-decoration-thickness: var(--line); text-underline-offset: var(--u-offset); }
a, .btn, .tag, .card, .tool-card, .nav-toggle, .theme-toggle {
  transition: color var(--dur), background-color var(--dur), border-color var(--dur);
}
:focus-visible { outline: var(--line-2) solid var(--focus); outline-offset: var(--line-2); }
code { font-family: var(--font-mono); font-size: var(--t-code); }
:not(pre) > code {
  background: var(--code-bg); color: var(--code-fg); border: var(--line) solid var(--border);
  border-radius: var(--radius); padding: 0 var(--s-1);
}
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.meta { color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: var(--s-4); }

.skip {
  position: absolute; left: var(--s-4); top: var(--s-2); z-index: 10;
  padding: var(--s-2) var(--s-4); background: var(--accent-bg); color: var(--on-accent);
  font-weight: var(--w-semi);
}
.skip:not(:focus) {
  clip-path: inset(50%); width: var(--line); height: var(--line); overflow: hidden; white-space: nowrap; padding: 0;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--grid-gap); }
.grid > * { grid-column: 1 / -1; }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  font: inherit; font-size: var(--t-md); font-weight: var(--w-semi); line-height: var(--lh-tight);
  background: var(--accent-bg); color: var(--on-accent);
  border: var(--line) solid var(--accent-bg); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn.secondary { background: transparent; color: var(--fg); border-color: var(--ui-border); }
.btn.secondary:hover { border-color: var(--fg); background: var(--surface); color: var(--fg); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Đầu trang ---------- */
.site-header { border-bottom: var(--line) solid var(--border); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-5); min-height: var(--s-8); }
.logo {
  margin-right: auto; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); color: var(--fg); text-decoration: none;
  font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: var(--ls-tight);
}
.logo::before { content: ""; width: var(--s-3); height: var(--s-3); background: var(--accent); }
.logo span { color: var(--muted); font-weight: var(--w-reg); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap);
  color: var(--fg); text-decoration: none; font-size: var(--t-md); font-weight: var(--w-semi);
  border-bottom: var(--line-2) solid transparent;
}
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.nav-toggle, .theme-toggle {
  display: none; align-items: center; min-height: var(--tap); padding: 0 var(--s-3);
  font: inherit; font-size: var(--t-sm); color: var(--fg); background: transparent;
  border: var(--line) solid var(--ui-border); border-radius: var(--radius); cursor: pointer;
}
.nav-toggle:hover, .theme-toggle:hover { border-color: var(--fg); }
.js .theme-toggle { display: inline-flex; }
.theme-label { margin-inline-start: .35em; }

/* Menu thu gọn tới hết khổ tablet: 4 mục nav + nút giao diện không vừa một hàng dưới 960px. */
@media (max-width: 59.99em) {
  .header-inner { column-gap: var(--s-3); }
  .nav { flex-basis: 100%; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav:not(.open), .js .nav:not(.open) ~ .theme-toggle { display: none; }
  .js .nav ul { flex-direction: column; border-top: var(--line) solid var(--border); }
  .js .nav li + li { border-top: var(--line) solid var(--border); }
  .js .nav a { display: flex; }
  .js .nav.open ~ .theme-toggle { margin-block: var(--s-3) var(--s-4); }
}
@media (min-width: 60em) {
  .header-inner { flex-wrap: nowrap; }
  .nav a { min-height: var(--s-8); }
}

/* ---------- Đầu mục kiểu Thuỵ Sĩ ---------- */
.section { padding-block: var(--s-7) var(--s-8); }
.section > .grid { border-top: var(--line) solid var(--fg); padding-top: var(--s-4); }
.sec-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-6); }
.sec-head h2 { font-size: var(--t-xl); }
.sec-num, .num { color: var(--accent); font-size: var(--t-sm); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.sec-intro { color: var(--muted); max-width: var(--measure); margin-bottom: var(--s-6); }
@media (min-width: 60em) {
  .sec-head { grid-column: 1 / span 3; flex-direction: column; gap: var(--s-2); margin-bottom: 0; }
  .sec-body { grid-column: 4 / -1; }
}

/* ---------- Trang chủ: hero ---------- */
.hero { padding-block: var(--s-8) var(--s-7); row-gap: var(--s-7); }
.eyebrow { color: var(--muted); font-size: var(--t-sm); font-weight: var(--w-semi); letter-spacing: var(--ls-label); }
.hero h1 { margin-top: var(--s-4); font-size: var(--t-display); letter-spacing: var(--ls-display); }
.lead { margin-top: var(--s-5); max-width: var(--measure); font-size: var(--t-lg); line-height: var(--lh-lead); }
.hero .actions { margin-top: var(--s-6); }
.hero-note { margin-top: var(--s-4); max-width: var(--measure); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); border-top: var(--line) solid var(--fg); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-1); padding-block: var(--s-4); border-bottom: var(--line) solid var(--border); }
.stats dt { color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-snug); }
.stats dd { font-size: var(--t-3xl); font-weight: var(--w-semi); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }
@media (min-width: 37.5em) and (max-width: 59.99em) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 60em) {
  .hero-main { grid-column: 1 / span 8; }
  .hero-side { grid-column: 9 / -1; align-self: end; }
}

/* .card chỉ là móc đánh dấu (macro post_card, test); khung thật nằm ở .tool-entry. */
.tool-entry {
  display: grid; border: var(--line) solid var(--border); border-radius: var(--radius); padding: var(--s-5); grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-1) var(--s-4);
  margin-top: var(--s-5); background: var(--surface); color: var(--fg); text-decoration: none;
}
.tool-entry .small { grid-column: 1 / -1; color: var(--muted); }
.tool-entry-title { font-size: var(--t-lg); font-weight: var(--w-semi); line-height: var(--lh-snug); }
.arrow { color: var(--accent); font-size: var(--t-lg); line-height: var(--lh-tight); }
.tool-entry:hover { border-color: var(--accent); }
.tool-entry:hover .tool-entry-title { color: var(--accent); }

/* ---------- Bảng chỉ mục bài (post-card) ---------- */
.index-head { display: none; }
.post-index { list-style: none; margin: 0; padding: 0; }
.post-card { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-bottom: var(--line) solid var(--border); }
.post-card .meta { order: -1; }
.post-card h3 { font-size: var(--t-lg); line-height: var(--lh-snug); }
.post-card h3 a { color: var(--fg); text-decoration: none; }
.post-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.post-card .sum { color: var(--muted); font-size: var(--t-md); }
.tags { display: flex; flex-wrap: wrap; margin-inline-start: calc(-1 * var(--s-2)); }
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--accent);
  text-decoration: none; border-radius: var(--radius);
}
.tag:hover { background: var(--surface); text-decoration: underline; }
.more-links { display: flex; flex-wrap: wrap; column-gap: var(--s-6); margin-top: var(--s-4); }
.more-links a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-weight: var(--w-semi); }

@media (min-width: 60em) {
  .index-head, .post-card {
    grid-template-columns: var(--col-date) minmax(0, 1fr) var(--col-tags) var(--col-mins);
    column-gap: var(--s-5);
  }
  .index-head {
    display: grid; padding-bottom: var(--s-2); border-bottom: var(--line) solid var(--border);
    color: var(--muted); font-size: var(--t-sm); font-weight: var(--w-semi);
  }
  .index-head span:last-child, .post-card .mins { text-align: right; }
  .post-card { grid-template-areas: "date title tags mins" "date sum tags mins"; row-gap: var(--s-1); align-items: baseline; }
  .post-card .meta { display: contents; }
  .post-card .meta time { grid-area: date; }
  .post-card .meta .sep { display: none; }
  .post-card .meta .mins { grid-area: mins; }
  .post-card h3 { grid-area: title; }
  .post-card .sum {
    grid-area: sum; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--sum-lines); line-clamp: var(--sum-lines); overflow: hidden;
  }
  .post-card .tags { grid-area: tags; }
}

/* ---------- Lưới công cụ 3 x 2 ---------- */
.tool-grid {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: var(--line) solid var(--border); border-left: var(--line) solid var(--border);
}
.tool-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5);
  border-right: var(--line) solid var(--border); border-bottom: var(--line) solid var(--border);
}
.tool-card h2, .tool-card h3 { font-size: var(--t-lg); line-height: var(--lh-snug); }
.tool-card h2 a, .tool-card h3 a { color: var(--fg); text-decoration: none; }
.tool-card h2 a::after, .tool-card h3 a::after { content: ""; position: absolute; inset: 0; }
.tool-card p { color: var(--muted); font-size: var(--t-md); }
.tool-card .arrow { margin-top: auto; align-self: flex-end; }
.tool-card:hover { background: var(--surface); }
.tool-card:hover h2 a, .tool-card:hover h3 a { color: var(--accent); }
.tool-card:hover .arrow { transform: translateX(var(--s-1)); }
@media (min-width: 37.5em) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Nguyên tắc: 5 cột ---------- */
.principles { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--grid-gap); }
.principles li { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: var(--line) solid var(--fg); }
.principles h3 { font-size: var(--t-md); line-height: var(--lh-snug); }
.principles p { color: var(--muted); font-size: var(--t-md); }
.aside-line a { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (min-width: 37.5em) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68.75em) { .principles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- Chân trang ---------- */
.site-footer { margin-top: var(--s-8); border-top: var(--line) solid var(--fg); padding-block: var(--s-7) var(--s-6); font-size: var(--t-md); }
.site-footer .grid { row-gap: var(--s-6); }
.site-footer h2 { font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: var(--ls-label); margin-bottom: var(--s-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.f-about .logo { margin-bottom: var(--s-3); }
.f-statement { max-width: var(--measure); }
.f-contact p + p { margin-top: var(--s-2); }
.f-bottom { margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--line) solid var(--border); }
@media (min-width: 37.5em) {
  .f-docs { grid-column: 1 / span 4; }
  .f-contact { grid-column: 5 / -1; }
}
@media (min-width: 60em) {
  .f-about { grid-column: 1 / span 5; }
  .f-docs { grid-column: 7 / span 2; }
  .f-contact { grid-column: 9 / -1; }
}

/* ---------- Đầu trang con ---------- */
.crumb { margin-top: var(--s-5); }
.crumb a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--w-semi); }
.page-head { padding-block: var(--s-5) var(--s-6); }
.page-head h1, .post h1 { font-size: var(--t-2xl); letter-spacing: var(--ls-display); }
.lead-sum { margin-top: var(--s-4); max-width: var(--measure); font-size: var(--t-lg); line-height: var(--lh-lead); }
@media (min-width: 37.5em) { .page-head h1, .post h1 { font-size: var(--t-3xl); } }

/* ---------- Bài viết (kiểu tài liệu kỹ thuật) ---------- */
.post { counter-reset: sec; padding-block: var(--s-5) var(--s-7); }
.post > * { max-width: var(--measure); }
.post-info { margin-top: var(--s-4); padding-block: var(--s-2); border-block: var(--line) solid var(--border); }
.post-info .meta { font-size: var(--t-sm); }
.post-info .meta strong { color: var(--fg); font-weight: var(--w-semi); }
.info-label { display: none; }
.info-tool + .info-tool { margin-top: var(--s-1); }
.info-tool { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-size: var(--t-sm); font-weight: var(--w-semi); }

.toc { margin-top: var(--s-6); border-top: var(--line) solid var(--fg); }
.toc summary { display: flex; align-items: center; min-height: var(--tap); font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: var(--ls-label); cursor: pointer; }
.toc ol { list-style: none; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-top: var(--line) solid var(--border); }
.toc a {
  display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr); align-items: center;
  min-height: var(--tap); padding-block: var(--s-1); color: var(--fg); text-decoration: none; font-size: var(--t-md); line-height: var(--lh-snug);
}
.toc a::before { content: counter(toc); content: counter(toc) / ""; color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--accent); }

.post-body { margin-top: var(--s-6); }
.post-body > * + * { margin-top: var(--s-4); }
.post-body h2, .sources h2 {
  margin-top: var(--s-7); padding-top: var(--s-4); border-top: var(--line) solid var(--fg);
  font-size: var(--t-xl); scroll-margin-top: var(--s-5);
}
.post-body h2::before, .sources h2::before {
  counter-increment: sec; content: counter(sec) "."; content: counter(sec) "." / "";
  margin-right: var(--s-3); color: var(--accent); font-variant-numeric: tabular-nums;
}
.post-body h3 { font-size: var(--t-lg); margin-top: var(--s-6); }
.post-body ul, .post-body ol, .sources ol { padding-left: var(--s-5); }
.post-body li + li, .sources li + li { margin-top: var(--s-2); }
.post-body li::marker, .sources li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }

.scroll { overflow-x: auto; }
.code-wrap { position: relative; }
.code-wrap .scroll { background: var(--code-bg); border: var(--line) solid var(--border); border-radius: var(--radius); }
/* Không có JS thì không có .scroll/.code-wrap: pre và table tự cuộn ngang. */
:root:not(.js) .post-body pre, :root:not(.js) .post-body table { display: block; overflow-x: auto; position: relative; min-width: 0; max-width: 100%; }
pre { margin: 0; padding: var(--s-6) var(--s-4) var(--s-4); color: var(--code-fg); font-size: var(--t-sm); line-height: var(--lh-lead); }
pre code { font-size: inherit; }
code[class*="language-"]::before {
  position: absolute; top: var(--s-2); right: var(--s-3);
  font-family: var(--font-sans); font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--muted); letter-spacing: var(--ls-label);
}
.language-bash::before { content: "bash"; content: "bash" / ""; }
.language-text::before { content: "text"; content: "text" / ""; }

table { width: 100%; min-width: var(--table-min); border-collapse: collapse; font-size: var(--t-md); font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; padding-bottom: var(--s-2); font-size: var(--t-sm); font-weight: var(--w-bold); }
th { text-align: left; font-size: var(--t-sm); font-weight: var(--w-bold); padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: var(--line) solid var(--fg); }
td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: var(--line) solid var(--border); vertical-align: top; }

.admonition { padding: var(--s-4) var(--s-5); background: var(--surface); border-left: var(--line-3) solid var(--accent); }
.admonition.warning { border-left-color: var(--warn-fg); }
.admonition > * + * { margin-top: var(--s-2); }
.admonition-title { font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: var(--ls-label); color: var(--accent); }
.admonition.warning .admonition-title { color: var(--warn-fg); }

.sources ol { margin-top: var(--s-4); }
.disclaimer { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--surface); color: var(--muted); font-size: var(--t-sm); }
.disclaimer strong { color: var(--fg); }
.ai-note { display: block; margin-top: var(--s-2); }
.related-tool { margin-top: var(--s-6); }
.related-tool h2 { font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: var(--ls-label); color: var(--muted); }
.related-tool .tool-entry { margin-top: var(--s-2); }

@media (min-width: 68.75em) {
  .post:has(> .toc) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .post:has(> .toc) > * { grid-column: 4 / 11; }
  .post:has(> .toc) h1 { grid-row: 1; }
  .post:has(> .toc) .lead-sum { grid-row: 2; }
  .post:has(> .toc) .post-body { grid-row: 3; }
  .post:has(> .toc) .sources { grid-row: 4; }
  .post:has(> .toc) .disclaimer { grid-row: 5; }
  .post:has(> .toc) .related-tool { grid-row: 6; }
  .post:has(> .toc) .toc, .post:has(> .toc) .post-info { grid-row: 1 / 7; position: sticky; top: var(--sticky-top); margin-top: 0; }
  .post:has(> .toc) .toc { grid-column: 1 / 4; }
  .post:has(> .toc) .post-info { grid-column: 11 / -1; padding-top: var(--s-2); border-bottom: 0; border-top-color: var(--fg); }
  .post:has(> .toc) .info-label { display: block; font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: var(--ls-label); }
  .post:has(> .toc) .post-info .meta > span:not(.sep) { display: block; padding-block: var(--s-2); border-bottom: var(--line) solid var(--border); }
  .post:has(> .toc) .post-info .meta .sep { display: none; }
  .post:has(> .toc) .post-info .tags { margin-top: var(--s-2); }
}

/* ---------- Công cụ ---------- */
.tool { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-7); column-gap: var(--grid-gap); padding-top: var(--s-4); border-top: var(--line) solid var(--fg); }
.tool-in > * + *, .tool-res > * + * { margin-top: var(--s-4); }
.col-head { display: flex; align-items: baseline; gap: var(--s-3); }
.col-head h2 { font-size: var(--t-lg); }
.privacy-note { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3) var(--s-4); background: var(--surface); font-size: var(--t-sm); }
.icon { flex: none; width: var(--icon); height: var(--icon); margin-top: var(--s-1); }
.tool label { display: block; font-weight: var(--w-semi); font-size: var(--t-md); line-height: var(--lh-snug); }
.hint { color: var(--muted); font-size: var(--t-sm); }
textarea.mono {
  display: block; width: 100%; padding: var(--s-3); font-family: var(--font-mono); font-size: var(--t-md); line-height: var(--lh-lead);
  color: var(--fg); background: var(--bg); border: var(--line) solid var(--ui-border); border-radius: var(--radius); resize: vertical;
}
.tool-out > * + * { margin-top: var(--s-5); }
.lv-error { --lv-fg: var(--err-fg); --lv-bg: var(--err-bg); }
.lv-warn { --lv-fg: var(--warn-fg); --lv-bg: var(--warn-bg); }
.lv-ok { --lv-fg: var(--ok-fg); --lv-bg: var(--ok-bg); }
.lv-info { --lv-fg: var(--info-fg); --lv-bg: var(--info-bg); }
.lv {
  display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-2);
  font-size: var(--t-sm); font-weight: var(--w-bold); line-height: var(--lh-lead); white-space: nowrap;
  color: var(--lv-fg); background: var(--lv-bg); border: var(--line) solid var(--lv-fg); border-radius: var(--radius-pill);
}
.lv-error .lv::before { content: "✕"; content: "✕" / ""; }
.lv-warn .lv::before { content: "!"; content: "!" / ""; }
.lv-ok .lv::before { content: "✓"; content: "✓" / ""; }
.lv-info .lv::before { content: "i"; content: "i" / ""; }
.tool-verdict { padding: var(--s-4); background: var(--surface); border-left: var(--line-3) solid var(--lv-fg); font-weight: var(--w-semi); }
.tool-verdict .lv { margin-right: var(--s-2); }
.tool-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; column-gap: var(--grid-gap); }
.tool-facts dt:nth-of-type(odd), .tool-facts dd:nth-of-type(odd) { grid-column: 1; }
.tool-facts dt:nth-of-type(even), .tool-facts dd:nth-of-type(even) { grid-column: 2; }
.tool-facts dt { padding-top: var(--s-2); border-top: var(--line) solid var(--fg); color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-snug); }
.tool-facts dd { margin-bottom: var(--s-4); font-size: var(--t-2xl); font-weight: var(--w-semi); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; }
.tool-items { list-style: none; padding: 0; border-top: var(--line) solid var(--border); }
/* Huy hiệu đặt tuyệt đối để chữ (có thể chứa thẻ inline do tools-ui.js sinh) chảy tự nhiên. */
.tool-items li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--col-badge); border-bottom: var(--line) solid var(--border); font-size: var(--t-md); }
.tool-items .lv { position: absolute; left: 0; top: var(--s-3); }
.tool-after { margin-top: var(--s-5); }
@media (min-width: 60em) {
  .tool { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .tool-in { grid-column: 1 / span 5; }
  .tool-res { grid-column: 7 / -1; }
}

.other-tools { list-style: none; margin: 0; padding: 0; border-top: var(--line) solid var(--border); }
.other-tools a {
  display: grid; grid-template-columns: var(--s-7) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  min-height: var(--tap); padding-block: var(--s-3); border-bottom: var(--line) solid var(--border);
  color: var(--fg); text-decoration: none; font-weight: var(--w-semi);
}
.other-tools a:hover { color: var(--accent); background: var(--surface); }

/* ---------- Bổ sung cho trang thật (ngoài mẫu v4) ---------- */
/* Trang một cột: lề trái thẳng với logo, dòng đọc giới hạn bằng --measure. */
.narrow > * { max-width: var(--measure); }
.page { padding-block: var(--s-6) var(--s-7); }
.page > h1, .page-head h1 { font-size: var(--t-2xl); letter-spacing: var(--ls-display); }
@media (min-width: 37.5em) { .page > h1 { font-size: var(--t-3xl); } }
.page > h1 { margin-bottom: var(--s-5); }
.page > .lead-sum { margin-bottom: var(--s-6); }
.page > * + * { margin-top: var(--s-4); }
.page > h1 + *, .page > .lead-sum + * { margin-top: 0; }
.legal > * + * { margin-top: var(--s-4); }
.legal h2 {
  margin-top: var(--s-7); padding-top: var(--s-4); border-top: var(--line) solid var(--fg);
  font-size: var(--t-xl); scroll-margin-top: var(--s-5);
}
.legal h2 + * { margin-top: var(--s-3); }
.legal ul, .legal ol, .page ul, .page ol { padding-left: var(--s-5); }
.legal li + li { margin-top: var(--s-2); }
.legal li::marker { color: var(--muted); }
.legal strong { font-weight: var(--w-semi); }
.page .passed, .page .todo { padding-left: 0; }
.tablewrap { overflow-x: auto; }
blockquote { margin: 0; padding: var(--s-4) var(--s-5); background: var(--surface); border-left: var(--line-3) solid var(--accent); }

.draftnote, .alert.warn, .sample-banner {
  padding: var(--s-3) var(--s-4); background: var(--warn-bg); color: var(--warn-fg);
  border-left: var(--line-3) solid var(--warn-fg); font-size: var(--t-md);
}
.draftnote, .sample-banner { font-weight: var(--w-semi); }

.tag.current { background: var(--accent-bg); color: var(--on-accent); }
.tag.current:hover { text-decoration: none; }
.page-head .tags { margin-top: var(--s-4); }
.list-section { padding-bottom: var(--s-7); }
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--line) solid var(--fg);
}
.pager a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--w-semi); }
.actions .btn { text-decoration: none; }
.message-actions { margin-top: var(--s-5); }

/* ---------- "Bắt đầu từ đâu?" + "Giải thích nhanh" (mượn ý từ mẫu v5) ---------- */
.steps {
  list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: var(--line) solid var(--border); border-left: var(--line) solid var(--border);
}
.steps li { counter-increment: st; border-right: var(--line) solid var(--border); border-bottom: var(--line) solid var(--border); }
.step { display: flex; flex-direction: column; gap: var(--s-2); height: 100%; padding: var(--s-5); color: var(--fg); text-decoration: none; }
.step::before { content: counter(st, decimal-leading-zero); content: counter(st, decimal-leading-zero) / ""; color: var(--accent); font-size: var(--t-sm); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.step-t { font-size: var(--t-lg); font-weight: var(--w-bold); line-height: var(--lh-snug); }
.step-d { color: var(--muted); font-size: var(--t-md); }
.step-go { margin-top: auto; padding-top: var(--s-2); color: var(--accent); font-weight: var(--w-semi); }
.step:hover { background: var(--surface); }
.step:hover .step-t { color: var(--accent); }
.quick { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--surface); border-left: var(--line-3) solid var(--accent); max-width: var(--measure); }
@media (min-width: 60em) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Dải 3 bước trên trang công cụ ---------- */
.howto {
  list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: h; display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: var(--line) solid var(--fg);
}
.howto li { counter-increment: h; display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) 0; border-bottom: var(--line) solid var(--border); }
.howto svg { flex: none; width: var(--s-6); height: var(--s-6); color: var(--accent); }
.howto strong { display: block; font-weight: var(--w-bold); line-height: var(--lh-snug); }
.howto strong::before { content: "Bước " counter(h) ": "; color: var(--accent); }
.howto span { display: block; color: var(--muted); font-size: var(--t-md); }
@media (min-width: 37.5em) {
  .howto { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .howto li { border-bottom: 0; }
}
.tool-lead { margin-bottom: var(--s-5); }
.page-head + .privacy-note, .page-head ~ .privacy-note { max-width: var(--measure); }
.tool-wrap { padding-bottom: var(--s-7); }
.tool-wrap > .tool { margin-top: var(--s-6); }

/* ---------- Ô nhập của công cụ (JS công cụ gắn vào các id/class này) ---------- */
.tool input[type="text"], .tool select {
  display: block; width: 100%; min-height: var(--tap); margin-top: var(--s-1); padding: var(--s-2) var(--s-3);
  font: inherit; font-size: var(--t-md); color: var(--fg); background: var(--bg);
  border: var(--line) solid var(--ui-border); border-radius: var(--radius);
}
.tool .field + .field, .tool .field + .actions, .tool fieldset.field + .field { margin-top: var(--s-4); }
fieldset.field { margin: 0; padding: var(--s-3) var(--s-4); border: var(--line) solid var(--ui-border); border-radius: var(--radius); }
fieldset.field legend { padding: 0 var(--s-2); font-weight: var(--w-semi); }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: var(--grid-gap); }
.tool label.check { display: flex; gap: var(--s-3); align-items: center; min-height: var(--tap); font-weight: var(--w-reg); }
.tool label.check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); }
.tool-in > h2 { padding-top: var(--s-4); border-top: var(--line) solid var(--border); font-size: var(--t-lg); }
.tool-in .col-head + * { margin-top: var(--s-4); }
.tool-in .col-head ~ h2:not(:first-child) { margin-top: var(--s-6); }
.tool-out:focus-visible { outline-offset: var(--s-1); }
.tool-out:not(:empty) + .tool-empty { display: none; }
.tool-output {
  padding: var(--s-4); color: var(--code-fg); background: var(--code-bg); border: var(--line) solid var(--border);
  border-radius: var(--radius); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono);
}
.tool-post-note { margin-top: var(--s-4); }

/* ---------- Trang báo cáo mẫu ---------- */
.sample-banner { max-width: var(--measure); margin-bottom: var(--s-5); }
.todo { list-style: none; margin: 0; padding: 0; counter-reset: todo; border-top: var(--line) solid var(--border); }
.todo li { counter-increment: todo; position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-7); border-bottom: var(--line) solid var(--border); }
.todo li::before { content: counter(todo, decimal-leading-zero); content: counter(todo, decimal-leading-zero) / ""; position: absolute; left: 0; top: var(--s-3); color: var(--accent); font-size: var(--t-sm); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.todo .meta { display: block; }
.finding { margin-top: var(--s-6); padding: var(--s-5); background: var(--surface); border-left: var(--line-3) solid var(--ui-border); break-inside: avoid; }
.finding > * + * { margin-top: var(--s-3); }
.finding.critical, .finding.high { border-left-color: var(--err-fg); }
.finding.medium { border-left-color: var(--warn-fg); }
.finding.low { border-left-color: var(--info-fg); }
.finding .head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.finding h3 { font-size: var(--t-lg); line-height: var(--lh-snug); }
.finding h4 { font-size: var(--t-sm); font-weight: var(--w-bold); letter-spacing: var(--ls-label); color: var(--muted); }
.finding h4 + * { margin-top: var(--s-1); }
.finding ol, .finding ul { padding-left: var(--s-5); }
.finding li + li { margin-top: var(--s-1); }
.sev {
  display: inline-flex; align-items: center; padding: 0 var(--s-2); font-size: var(--t-sm); font-weight: var(--w-bold); line-height: var(--lh-lead);
  border: var(--line) solid currentColor; border-radius: var(--radius-pill); background: var(--info-bg); color: var(--info-fg);
}
.sev.critical, .sev.high { background: var(--err-bg); color: var(--err-fg); }
.sev.medium { background: var(--warn-bg); color: var(--warn-fg); }
.code { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); }
.passed { list-style: none; margin: 0; padding: 0; border-top: var(--line) solid var(--border); }
.passed li { padding: var(--s-2) 0 var(--s-2) var(--s-6); border-bottom: var(--line) solid var(--border); position: relative; }
.passed li::before { content: "✓"; content: "✓" / ""; position: absolute; left: 0; color: var(--ok-fg); font-weight: var(--w-bold); }
.page h2 + .todo, .page h2 + .passed { margin-top: var(--s-3); }
.page > h2 { margin-top: var(--s-7); padding-top: var(--s-4); border-top: var(--line) solid var(--fg); font-size: var(--t-xl); }
.page > h2 + * { margin-top: var(--s-3); }

/* ---------- In ra giấy ---------- */
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-footer, .no-print, .skip, .toc, .actions, .theme-toggle, .nav-toggle { display: none !important; }
  .wrap { max-width: none; padding-inline: 0; }
  a { color: inherit; text-decoration: none; }
  .finding, .todo li, .post-card { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .tool-card:hover .arrow { transform: none; }
}

/* Cặp màu chữ/nền ngoài hợp đồng (đã đo, sáng / tối):
   --warn-fg trên --surface (nhãn admonition cảnh báo): 6.9 / 10.7
   --accent trên --surface (nhãn admonition ghi chú, tag khi hover): 6.4 / 7.0
   --bg trên --fg (nút chính khi hover): 18.5 / 15.7
   --muted trên --code-bg (nhãn ngôn ngữ khối mã): 6.7 / 7.4
   --lv-fg làm viền huy hiệu và dải kết luận: chỉ trang trí, chữ vẫn đạt cặp hợp đồng. */