/* ==========================================================================
   FTEL Minigame — giao diện tài liệu
   Phụ thuộc: design/tokens/tokens.css + design/components/components.css
   Chỉ thêm lớp .doc-* cho bố cục tài liệu; màu, chữ, bo góc lấy từ token.
   ========================================================================== */

:root {
  --doc-side: 280px;
  --doc-toc: 220px;
  --doc-top: 60px;
  --doc-measure: 860px;
}

body.doc { background: var(--ds-surface); }

/* ---------- Thanh trên ---------- */
.doc-top {
  position: sticky; top: 0; z-index: 40; height: var(--doc-top);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--ds-border);
}
.doc-top__logo { height: 28px; display: block; }
.doc-top__name { font: 700 16px/1.2 var(--ds-font-display); color: var(--ds-text); text-decoration: none; }
.doc-top__name small { display: block; font: 400 12px/1.3 var(--ds-font-body); color: var(--ds-text-tertiary); }
.doc-top__links { margin-left: auto; display: flex; gap: 4px; }
.doc-top__links a { font-size: 14px; font-weight: 600; color: var(--ds-text-secondary); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.doc-top__links a:hover { background: var(--ds-surface-subtle); color: var(--ds-text); }
.doc-menu-btn { display: none; border: 1px solid var(--ds-border); background: var(--ds-surface); border-radius: 8px; padding: 6px 10px; font: 600 14px var(--ds-font-body); cursor: pointer; }

/* ---------- Khung 3 cột ---------- */
.doc-shell { display: grid; grid-template-columns: var(--doc-side) minmax(0, 1fr) var(--doc-toc); min-height: calc(100vh - var(--doc-top)); }
.doc-side {
  position: sticky; top: var(--doc-top); height: calc(100vh - var(--doc-top)); overflow-y: auto;
  padding: 20px 12px 40px; border-right: 1px solid var(--ds-border); background: var(--ds-surface-subtle);
}
.doc-side__group { margin-bottom: 18px; }
.doc-side__title { display: flex; align-items: center; gap: 8px; padding: 0 10px; margin: 0 0 6px; font: 600 12px/1.3 var(--ds-font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ds-text-tertiary); }
.doc-side a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 1.35; color: var(--ds-text-secondary); text-decoration: none; }
.doc-side a:hover { background: var(--ds-surface); color: var(--ds-text); }
.doc-side a[aria-current="page"] { background: var(--ds-surface); color: var(--ds-brand-ink); font-weight: 700; box-shadow: var(--ds-shadow-sm); }
.doc-side a .doc-dot { margin-left: auto; }

.doc-main { padding: 40px clamp(20px, 4vw, 56px) 96px; max-width: calc(var(--doc-measure) + 112px); width: 100%; }
.doc-toc { position: sticky; top: var(--doc-top); height: calc(100vh - var(--doc-top)); overflow-y: auto; padding: 40px 20px 40px 0; font-size: 13px; }
.doc-toc b { display: block; font: 600 12px/1.3 var(--ds-font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ds-text-tertiary); margin-bottom: 8px; }
.doc-toc a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--ds-border); color: var(--ds-text-secondary); text-decoration: none; }
.doc-toc a:hover, .doc-toc a.is-on { color: var(--ds-brand-ink); border-left-color: var(--ds-brand); }

@media (max-width: 1180px) { .doc-shell { grid-template-columns: var(--doc-side) minmax(0, 1fr); } .doc-toc { display: none; } }
@media (max-width: 860px) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); }
  .doc-side { position: fixed; inset: var(--doc-top) auto 0 0; width: min(86vw, 320px); z-index: 35; transform: translateX(-100%); transition: transform var(--ds-dur-base) var(--ds-ease-standard); box-shadow: var(--ds-shadow-lg); }
  body.doc-nav-open .doc-side { transform: none; }
  .doc-menu-btn { display: inline-block; }
  .doc-top__links { display: none; }
  .doc-main { padding: 24px 16px 80px; }
}

/* ---------- Đầu trang ---------- */
.doc-head { margin-bottom: 28px; }
.doc-crumb { font-size: 13px; color: var(--ds-text-tertiary); margin-bottom: 8px; }
.doc-head h1 { font: 700 var(--ds-fs-h1)/1.15 var(--ds-font-display); margin: 0 0 10px; text-wrap: balance; }
.doc-lead { font-size: 17px; color: var(--ds-text-secondary); margin: 0; max-width: 70ch; }

/* Thẻ thông tin trang: người viết, reviewer, trạng thái — sinh từ manifest */
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; padding: 12px 16px; border-radius: var(--ds-radius-md); background: var(--ds-surface-subtle); font-size: 13px; }
.doc-meta div { display: grid; gap: 2px; }
.doc-meta dt { color: var(--ds-text-tertiary); font-size: 12px; }
.doc-meta dd { margin: 0; font-weight: 600; }

/* ---------- Mục (h2 có số theo motif section tag) ---------- */
.doc-main section { scroll-margin-top: calc(var(--doc-top) + 16px); margin-top: 48px; }
.doc-main h2 { display: flex; align-items: center; gap: 12px; font: 700 var(--ds-fs-h2)/1.2 var(--ds-font-display); letter-spacing: var(--ds-tracking-heading); margin: 0 0 16px; }
.doc-num { display: inline-grid; place-items: center; min-width: 2.1em; height: 1.75em; padding: 0 .35em; font-size: .72em; color: var(--ds-brand); border: 2px solid var(--ds-brand); border-radius: var(--ds-radius-sm); transform: skewX(var(--ftel-skew)); flex: none; }
.doc-num > span { transform: skewX(var(--ftel-skew-inverse)); }
.doc-main h3 { font: 700 var(--ds-fs-h3)/1.25 var(--ds-font-display); margin: 28px 0 10px; scroll-margin-top: calc(var(--doc-top) + 16px); }
.doc-main h4 { font: 700 16px/1.3 var(--ds-font-body); margin: 20px 0 8px; }
.doc-main p, .doc-main li { max-width: 75ch; }
.doc-main ul, .doc-main ol { padding-left: 1.3em; }
.doc-main li + li { margin-top: 4px; }
.doc-main a { color: var(--ds-text-link); font-weight: 600; text-underline-offset: 3px; }
.doc-main code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ds-surface-subtle); padding: 1px 5px; border-radius: 4px; }
.doc-main pre { background: var(--ftel-black); color: #f5f5f5; padding: 16px; border-radius: var(--ds-radius-md); overflow-x: auto; }
.doc-main pre code { background: none; padding: 0; color: inherit; }

/* ---------- Bảng ---------- */
.doc-table { overflow-x: auto; margin: 12px 0 20px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.doc-main table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.doc-main th, .doc-main td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ds-border); vertical-align: top; }
.doc-main th { background: var(--ds-surface-subtle); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-text-secondary); white-space: nowrap; }
.doc-main tr:last-child td { border-bottom: 0; }
.doc-main td:first-child { font-weight: 600; }
.doc-main table.doc-plain td:first-child { font-weight: 400; }

/* ---------- Khối nhấn ---------- */
.doc-callout { margin: 16px 0; padding: 14px 16px 14px 18px; border-radius: var(--ds-radius-md); border-left: 4px solid var(--ds-info); background: var(--ds-info-soft); font-size: 15px; }
.doc-callout > :first-child { margin-top: 0; } .doc-callout > :last-child { margin-bottom: 0; }
.doc-callout__t { display: block; font-weight: 700; margin-bottom: 4px; }
.doc-callout--warn { border-color: var(--ds-warning); background: #FFF7E0; }
.doc-callout--danger { border-color: var(--ds-danger); background: var(--ds-danger-soft); }
.doc-callout--ok { border-color: var(--ds-success); background: var(--ds-success-soft); }
.doc-callout--brand { border-color: var(--ds-brand); background: var(--ds-brand-soft); }

/* Giả định trong bản nháp — người viết phải xác nhận rồi xoá nhãn */
.doc-assume { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 4px; background: #FFF1C2; color: #7A4B00; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.doc-assume::before { content: "Giả định"; }
/* Chỗ còn trống cần viết */
.doc-todo { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--ds-danger-soft); color: var(--ds-danger); font-size: 12px; font-weight: 700; }
.doc-todo::before { content: "Cần bổ sung: "; }

/* ---------- Luồng các bước ---------- */
.doc-steps { list-style: none; padding: 0 !important; counter-reset: s; display: grid; gap: 8px; }
.doc-steps > li { counter-increment: s; position: relative; padding: 10px 14px 10px 52px; border-radius: var(--ds-radius-md); background: var(--ds-surface-subtle); max-width: none; margin: 0 !important; }
.doc-steps > li::before { content: counter(s); position: absolute; left: 12px; top: 9px; width: 28px; height: 26px; display: grid; place-items: center; font: 700 14px/1 var(--ds-font-display); color: var(--ds-on-brand); background: var(--ds-brand-strong); border-radius: 6px; transform: skewX(var(--ftel-skew)); }

/* Tiêu chí nghiệm thu */
.doc-ac { list-style: none; padding: 0 !important; }
.doc-ac li { position: relative; padding-left: 28px; }
.doc-ac li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 14px; height: 14px; border: 2px solid var(--ds-border-strong); border-radius: 4px; }
.doc-ac code.doc-ac__id { margin-right: 6px; }

/* Sơ đồ trạng thái dạng chuỗi */
.doc-states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; }
.doc-states span { padding: 4px 10px; border-radius: 999px; background: var(--ds-surface); border: 1px solid var(--ds-border-strong); font-size: 13px; font-weight: 600; }
.doc-states i { font-style: normal; color: var(--ds-text-tertiary); }

/* ---------- Trạng thái tài liệu ---------- */
.doc-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.doc-status::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; transform: skewX(var(--ftel-skew)); }
.doc-status--chua-viet { background: var(--ds-surface-subtle); color: var(--ds-text-tertiary); }
.doc-status--nhap { background: #FFF1C2; color: #7A4B00; }
.doc-status--dang-viet { background: var(--ds-brand-soft-2); color: var(--ds-brand-ink); }
.doc-status--review { background: var(--ds-info-soft); color: var(--ftel-blue); }
.doc-status--da-chot { background: var(--ds-success-soft); color: var(--ds-success-ink); }
.doc-dot { width: 8px; height: 8px; border-radius: 2px; transform: skewX(var(--ftel-skew)); flex: none; }
.doc-dot--chua-viet { background: var(--ds-border-strong); }
.doc-dot--nhap { background: #E0A800; }
.doc-dot--dang-viet { background: var(--ds-brand); }
.doc-dot--review { background: var(--ftel-blue-2); }
.doc-dot--da-chot { background: var(--ds-success); }

/* ---------- Trang trước / sau ---------- */
.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 64px; }
.doc-pager a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); text-decoration: none; color: var(--ds-text); font-weight: 700; }
.doc-pager a:hover { border-color: var(--ds-brand); box-shadow: var(--ds-shadow-sm); }
.doc-pager small { font-weight: 400; font-size: 12px; color: var(--ds-text-tertiary); }
.doc-pager a + a, .doc-pager .doc-pager__next { text-align: right; grid-column: 2; }

/* ---------- Trang chủ tài liệu ---------- */
.doc-hero { position: relative; overflow: hidden; padding-block: 40px; padding-left: 32px; border-radius: var(--ds-radius-xl); background: var(--ds-brand-gradient); color: #fff; }
.doc-hero h1 { font: 700 clamp(28px, 4vw, 44px)/1.1 var(--ds-font-display); margin: 0 0 10px; max-width: 16ch; color: #fff; }
.doc-hero p { margin: 0; max-width: 52ch; font-size: 17px; }
.doc-hero { padding-right: 220px; }
.doc-hero__fox { position: absolute; right: 24px; bottom: -6px; height: 190px; }
@media (max-width: 720px) { .doc-hero { padding-right: 24px; } .doc-hero__fox { display: none; } }
.doc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 24px 0 0; }
#doc-board td:nth-child(n+5) { white-space: nowrap; }
.doc-kpi { padding: 14px 16px; border-radius: var(--ds-radius-md); border: 1px solid var(--ds-border); }
.doc-kpi b { display: block; font: 700 28px/1 var(--ds-font-number); font-variant-numeric: tabular-nums; }
.doc-kpi span { font-size: 13px; color: var(--ds-text-secondary); }
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.doc-card { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); color: var(--ds-text); text-decoration: none; font-weight: 400 !important; }
.doc-card:hover { border-color: var(--ds-brand); box-shadow: var(--ds-shadow-sm); }
.doc-card b { font: 700 16px/1.3 var(--ds-font-display); }
.doc-card span { font-size: 13px; color: var(--ds-text-secondary); }

@media print {
  .doc-top, .doc-side, .doc-toc, .doc-pager { display: none !important; }
  .doc-shell { display: block; }
}