/* Trang tài liệu — vẫn giữ đúng bộ xương và tỉ lệ của ứng dụng, để hai bên đọc
 * ra là MỘT sản phẩm chứ không phải hai trang rời. */

.doc { max-width: 900px; margin: 0 auto; padding-bottom: 40px; }
.doc h1 {
  font-family: var(--serif); font-size: 42px; line-height: 1.1;
  letter-spacing: -.01em; margin: 10px 0 14px;
}
.doc h2 {
  font-family: var(--serif); font-size: 26px; margin: 34px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.doc h3 { font-size: var(--t-val); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.doc p { margin: 0 0 12px; max-width: 68ch; }
.doc .lede { font-size: var(--t-val); color: var(--dim); max-width: 62ch; margin-bottom: 26px; }
.doc ul, .doc ol { margin: 0 0 12px; padding-left: 20px; }
.doc li { margin-bottom: 5px; }
.doc code {
  background: var(--pane2); border: 1px solid var(--line2);
  border-radius: 3px; padding: 1px 5px; font-size: 11px;
}
.doc pre {
  background: var(--pane); border: 1px solid var(--line); border-left: 3px solid var(--lock);
  border-radius: var(--r); padding: 14px 16px; overflow-x: auto;
  font-size: var(--t-body); line-height: 1.6; margin: 0 0 12px;
}
.doc .note {
  border-left: 2px solid var(--warn); padding: 2px 0 2px 14px;
  color: var(--dim); margin: 14px 0;
}
.doc table { border-collapse: collapse; width: 100%; max-width: 620px; margin: 0 0 12px; }
.doc th, .doc td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.doc th { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* 2/3 + 1/3 không hợp cho văn bản — nhưng hai cột BẰNG NHAU vẫn giữ được luật
   "mắt quét ngang", và tránh một cột chữ chạy dọc suốt trang. */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 8px; }
@media (max-width: 820px) { .split2 { grid-template-columns: 1fr; } }

.gates { counter-reset: g; list-style: none; padding-left: 0; }
.gates li { counter-increment: g; position: relative; padding-left: 26px; }
.gates li::before {
  content: counter(g); position: absolute; left: 0; top: 1px;
  width: 17px; height: 17px; border-radius: 3px; background: var(--pane2);
  border: 1px solid var(--line); font-size: 9px; text-align: center; line-height: 16px; color: var(--dim);
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
.card {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--pane);
  padding: 14px 16px; display: grid; gap: 6px;
}
.card b { font-size: var(--t-num); letter-spacing: .04em; }
.card span { color: var(--dim); }
.card:nth-child(1) b { color: var(--ok); }
.card:nth-child(2) b { color: var(--bad); }
.card:nth-child(3) b { color: var(--warn); }

.doc .foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); }
.doc a, header.top nav.tabs a { color: inherit; }
header.top nav.tabs a {
  text-decoration: none; color: var(--dim); padding: 6px 12px;
  border-bottom: 2px solid transparent;
  font-size: var(--t-label); letter-spacing: .09em; text-transform: uppercase;
  transition: color .18s ease-out, border-color .18s ease-out;
}
header.top nav.tabs a:hover { color: var(--ink); }
header.top nav.tabs a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ok); }
a.brand { text-decoration: none; }

/* ── lộ trình ─────────────────────────────────────────────────────────── */
.road { display: grid; gap: 1px; background: var(--line2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.road .r { display: grid; grid-template-columns: 106px 1fr; gap: 14px; background: var(--pane); padding: 13px 16px; }
.road .st {
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  align-self: start; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--line);
  text-align: center; color: var(--dim);
}
.road .r[data-s="done"] .st { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.road .r[data-s="now"] .st { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.road .r[data-s="next"] .st { border-style: dashed; }
.road .r b { display: block; font-weight: 500; margin-bottom: 3px; }
.road .r span { color: var(--dim); }