:root {
    --paper: #f5f7f5;
    --surface: #ffffff;
    --ink: #16211c;
    --ink-2: #4c5b53;
    --ink-3: #74847b;
    --rule: #d5ded7;
    --rule-soft: #e7ece8;
    --b2b: #0f6b48;
    --b2b-bg: #e6f2ec;
    --sales: #2f4f86;
    --sales-bg: #e8eef8;
    --warn: #8a5a00;
    --warn-bg: #fdf3e0;
    --stop: #9b2320;
    --stop-bg: #fbeceb;
    --chip-bg: #eceee9;
    --shadow: 0 1px 2px rgba(22, 33, 28, .06);
    --display: "Bitter", "Noto Serif", Georgia, "Times New Roman", serif;
    --body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0d1512;
      --surface: #131d19;
      --ink: #e4ebe7;
      --ink-2: #a3b3aa;
      --ink-3: #7d8d84;
      --rule: #26332c;
      --rule-soft: #1c2723;
      --b2b: #4ec796;
      --b2b-bg: #10261d;
      --sales: #8aabe0;
      --sales-bg: #16202f;
      --warn: #e0b062;
      --warn-bg: #2a2314;
      --stop: #e58b86;
      --stop-bg: #2c1a19;
      --chip-bg: #1b2621;
      --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    }
  }
  :root[data-theme="dark"] {
    --paper: #0d1512;
    --surface: #131d19;
    --ink: #e4ebe7;
    --ink-2: #a3b3aa;
    --ink-3: #7d8d84;
    --rule: #26332c;
    --rule-soft: #1c2723;
    --b2b: #4ec796;
    --b2b-bg: #10261d;
    --sales: #8aabe0;
    --sales-bg: #16202f;
    --warn: #e0b062;
    --warn-bg: #2a2314;
    --stop: #e58b86;
    --stop-bg: #2c1a19;
    --chip-bg: #1b2621;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15.5px;
    line-height: 1.68;
    padding-block: 0 72px;
    padding-inline: 20px;
    -webkit-font-smoothing: antialiased;
  }

  .shell {
    max-width: 1180px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }
  @media (min-width: 1040px) {
    .shell { grid-template-columns: 236px minmax(0, 1fr); gap: 52px; }
  }

  /* ---------- masthead ---------- */
  .masthead {
    border-bottom: 2px solid var(--ink);
    padding-block: 44px 18px;
    margin-bottom: 34px;
  }
  .masthead .kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 14px;
  }
  .masthead h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(30px, 5.2vw, 48px);
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0 0 14px;
    text-wrap: balance;
  }
  .masthead .standfirst {
    font-size: 17px;
    color: var(--ink-2);
    max-width: 62ch;
    margin: 0;
  }
  .masthead .imprint {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-3);
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  /* ---------- toc ---------- */
  .toc { display: none; }
  @media (min-width: 1040px) {
    .toc {
      display: block;
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      padding-block: 44px 12px;
      font-size: 13.5px;
      border-right: 1px solid var(--rule-soft);
      padding-right: 18px;
    }
    .toc p {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin: 0 0 12px;
    }
    .toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
    .toc a {
      color: var(--ink-2);
      text-decoration: none;
      display: block;
      padding: 3px 0;
      border-left: 2px solid transparent;
      padding-left: 10px;
      margin-left: -12px;
    }
    .toc a:hover, .toc a:focus-visible { color: var(--ink); border-left-color: var(--ink); }
    .toc .grp {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin: 16px 0 4px;
    }
    .toc .sub a { padding-left: 22px; font-size: 12.5px; }
  }

  main { padding-top: 44px; min-width: 0; }

  /* ---------- headings ---------- */
  h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(23px, 3vw, 30px);
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0 0 6px;
    text-wrap: balance;
    scroll-margin-top: 20px;
  }
  h3 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 4px;
    scroll-margin-top: 20px;
  }
  h4 {
    font-family: var(--body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    margin: 0 0 4px;
    color: var(--ink);
  }
  .part { margin-top: 8px; }
  .part > .part-head {
    border-top: 2px solid var(--ink);
    padding-top: 14px;
    margin-bottom: 26px;
  }
  .part .part-head .kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 8px;
  }
  .part--b2b .part-head .kicker { color: var(--b2b); }
  .part--sales .part-head .kicker { color: var(--sales); }
  .part .part-head .lede { color: var(--ink-2); max-width: 66ch; margin: 8px 0 0; }

  .step {
    border-top: 1px solid var(--rule);
    padding-top: 22px;
    margin-top: 30px;
    scroll-margin-top: 20px;
  }
  .step > header { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
  .step .num {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
    flex: none;
    padding-top: 4px;
    letter-spacing: .04em;
  }
  .step .where {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-3);
    margin: 2px 0 12px 0;
    display: block;
    word-break: break-all;
  }
  .step p { margin: 0 0 12px; max-width: 68ch; }

  /* ---------- verbatim UI label chip ---------- */
  .lbl {
    font-family: var(--mono);
    font-size: .875em;
    background: var(--chip-bg);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: .08em .38em;
    white-space: nowrap;
    color: var(--ink);
  }
  code {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--chip-bg);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: .08em .38em;
  }

  /* ---------- boxes ---------- */
  .note {
    border-left: 3px solid var(--rule);
    background: var(--surface);
    border-radius: 0 4px 4px 0;
    padding: 14px 18px;
    margin: 0 0 16px;
    max-width: 72ch;
    box-shadow: var(--shadow);
  }
  .note p:last-child { margin-bottom: 0; }
  .note .tag {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
    color: var(--ink-3);
  }
  .note--warn { border-left-color: var(--warn); background: var(--warn-bg); }
  .note--warn .tag { color: var(--warn); }
  .note--stop { border-left-color: var(--stop); background: var(--stop-bg); }
  .note--stop .tag { color: var(--stop); }
  .note--b2b { border-left-color: var(--b2b); background: var(--b2b-bg); }
  .note--b2b .tag { color: var(--b2b); }
  .note--sales { border-left-color: var(--sales); background: var(--sales-bg); }
  .note--sales .tag { color: var(--sales); }

  /* ---------- flow list ---------- */
  ol.flow { list-style: none; counter-reset: f; margin: 0 0 14px; padding: 0; max-width: 70ch; }
  ol.flow > li {
    counter-increment: f;
    position: relative;
    padding-left: 34px;
    margin-bottom: 9px;
  }
  ol.flow > li::before {
    content: counter(f);
    position: absolute;
    left: 0;
    top: 1px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: var(--surface);
    font-variant-numeric: tabular-nums;
  }
  ul.plain { margin: 0 0 14px; padding-left: 20px; max-width: 70ch; }
  ul.plain li { margin-bottom: 6px; }

  /* ---------- tables ---------- */
  .tw { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); }
  table { border-collapse: collapse; width: 100%; font-size: 14px; }
  th, td { text-align: left; padding: 8px 13px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
  thead th {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
    background: var(--chip-bg);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
  }
  tbody tr:last-child td { border-bottom: 0; }
  td.y { color: var(--b2b); font-weight: 600; }
  td.n { color: var(--ink-3); }
  td code, td .lbl { white-space: nowrap; }

  /* ---------- figure ---------- */
  figure {
    margin: 0 0 22px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  figure img { display: block; width: 100%; max-width: 100%; height: auto; }
  figcaption {
    font-size: 13px;
    color: var(--ink-2);
    padding: 10px 14px;
    border-top: 1px solid var(--rule-soft);
    background: var(--chip-bg);
  }
  figcaption b {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
    margin-right: 8px;
  }
  .figrow { display: grid; grid-template-columns: 1fr; gap: 18px; }
  @media (min-width: 720px) { .figrow { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 720px) { .figrow figure { margin-bottom: 0; } }

  /* ---------- status pill ---------- */
  .pill {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    padding: 1px 7px;
    border-radius: 99px;
    border: 1px solid currentColor;
    white-space: nowrap;
  }
  .pill--ok { color: var(--b2b); }
  .pill--wait { color: var(--warn); }
  .pill--no { color: var(--stop); }
  .pill--neutral { color: var(--ink-3); }

  hr.sep { border: 0; border-top: 1px solid var(--rule-soft); margin: 40px 0 0; }

  .footer {
    margin-top: 56px;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
    font-size: 13px;
    color: var(--ink-3);
    max-width: 68ch;
  }
  a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 2px; }
  a:focus-visible, .toc a:focus-visible { outline: 2px solid var(--sales); outline-offset: 2px; border-radius: 2px; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

  /* ---------- điều hướng giữa các trang ---------- */
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .toc .grp a {
    margin-left: -12px;
    padding-left: 10px;
    font: inherit;
    color: inherit;
    border-left: 2px solid transparent;
  }
  .toc .grp a:hover, .toc .grp a:focus-visible { color: var(--ink); border-left-color: var(--ink); }
  .toc .grp--here { color: var(--ink); }
  .pagebar {
    margin: 0 0 30px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .pagebar a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
  .pagebar a:hover, .pagebar a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
  .pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 56px;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
    font-size: 14px;
  }
  .pager a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
  .pager a:hover, .pager a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }