/* ─────────────────────────────────────────────────────────────────────────────────────────
   site.css — NGUỒN DUY NHẤT về màu, chữ, khoảng cách cho cả ba bề mặt web:
   trang chủ (/), bốn trang thẻ công khai (/kichhoat, /quen-mat-khau, /doi-mat-khau,
   /admin/dang-nhap) và trang quản trị (/admin/*). ADR-0020.

   Luật: một màu đặt riêng trong trang là vi phạm — sửa token ở đây. Mọi cặp chữ/nền dưới đây đã
   đo tương phản ≥ 4,5:1 (WCAG AA) cho chữ thường; xem bản rà soát 11/09 trong Notion.
   ───────────────────────────────────────────────────────────────────────────────────────── */

/* ── Token: light là mặc định; dark theo hệ điều hành, hoặc ép bằng data-theme ──────────── */
:root {
  color-scheme: light dark;
  --bg: #f7f8fa;        --panel: #ffffff;     --line: #e3e6ea;
  --fg: #141518;        --muted: #5f6b7a;     /* 5,3:1 trên --bg */
  --accent: #2f6feb;    --accent-fg: #ffffff; --link: #2456c9;   /* 6,2:1 trên trắng */
  --ok: #1f7a3a;        --warn: #b35c00;      --danger: #c92a2a; /* 5,5:1 trên trắng */
  --tag-warn: #bf4700;  --tag-off: #6b7683;
  --shot-bg: #e3e6ea;   /* nền khung ảnh khi ảnh lazy chưa về — theo theme, không phải ô đen giữa trang sáng */
  --radius: 12px;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .06);
  --t-fast: .15s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141518;      --panel: #1e2024;     --line: #2e3137;
    --fg: #e9ecef;      --muted: #a1a5ab;     /* 8,3:1 trên --bg */
    --link: #7aa2ff;    --danger: #ff8787;    /* 7:1 và 7,4:1 trên --panel */
    --ok: #4cc26e;      --warn: #ffa94d;
    --shadow: 0 20px 60px rgb(0 0 0 / .45); --shot-bg: #0f1012;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141518;        --panel: #1e2024;     --line: #2e3137;
  --fg: #e9ecef;        --muted: #a1a5ab;
  --link: #7aa2ff;      --danger: #ff8787;
  --ok: #4cc26e;        --warn: #ffa94d;
  --shadow: 0 20px 60px rgb(0 0 0 / .45); --shot-bg: #0f1012;
}

/* ── Nền ─────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }   /* 4 trang thẻ từng tràn 35px vì thiếu dòng này */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
       background: var(--bg); color: var(--fg); }
a { color: var(--link); }
a:visited { color: var(--link); }                     /* dark mode từng hiện link tím mặc định */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
button, .btn { font: inherit; }
.muted { color: var(--muted); font-size: 13px; }
.ic { width: 1em; height: 1em; vertical-align: -.15em; flex: none; }
img.mark { vertical-align: middle; }
.ok { color: var(--ok); }
.err { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Trang thẻ (form giữa màn hình) ──────────────────────────────────────────────────────── */
body.centered { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 32px; width: min(420px, 100%); }
.card h1 { font-size: 20px; margin: 0 0 4px; }
.card p.sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.card label { display: block; font-size: 13px; margin: 16px 0 6px; font-weight: 600; }
.card input { width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid var(--line);
              border-radius: 8px; background: transparent; color: inherit; }
.card input#code { font: 600 22px/1 ui-monospace, monospace; letter-spacing: .12em;
                   text-align: center; text-transform: uppercase; }
.card button[type=submit] { width: 100%; margin-top: 24px; padding: 12px; font-size: 16px; font-weight: 600;
                            border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-fg);
                            cursor: pointer; }
.card .err { margin-top: 16px; padding: 12px; border-radius: 8px; font-size: 14px;
                background: #fdecea; color: #8a1c14; border: 1px solid #f5c2bd; }
.card .err.locked { background: #fff4e6; color: #8a4b00; border-color: #ffd8a8; }
.card .err a { color: inherit; }
.card .hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.card .big { font-size: 48px; text-align: center; margin-bottom: 8px; }
.card p.foot { margin: 16px 0 0; font-size: 14px; text-align: center; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card .err { background: #3b1c19; color: #ffb4a9; border-color: #6e2a24; }
  :root:not([data-theme="light"]) .card .err.locked { background: #3d2a12; color: #ffd8a8; border-color: #7a5320; }
}

/* ── Trang chủ ───────────────────────────────────────────────────────────────────────────── */
.landing a { color: inherit; }
.landing .top { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px;
                border-bottom: 1px solid var(--line); }
/* Đầu trang dính khi cuộn (RMP-100 P2) — chỉ từ 900px; trên điện thoại nó chiếm 60px của một màn 700px. */
@media (min-width: 900px) {
  .landing .top { position: sticky; top: 0; z-index: 5; background: var(--bg);
                  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.3) blur(10px); }
}
/* Hiện dần khi cuộn tới. Chỉ ẩn khi có JS (html.js) — không JS thì mọi khối hiện sẵn; reduced-motion cũng vậy. */
.js .landing .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease-out, transform .55s ease-out; }
.js .landing .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .landing .reveal { opacity: 1; transform: none; } }
.landing .brand { font-weight: 800; letter-spacing: -.01em; text-decoration: none; font-size: 18px;
                  display: inline-flex; align-items: center; gap: 8px; }
.landing footer img.mark { margin-right: 2px; }
/* Lighthouse target-size (RMP-55): liên kết header trên di động là chữ trần 20px cao, cách nhau 20px —
   dưới sàn 24×24 + khoảng cách của WCAG 2.5.8. Đệm 10px dọc và 8px ngang cho mỗi mục; khoảng cách
   giữa mục là 4px vì đệm đã tạo vùng chạm, không phải lề. */
.landing .top nav { display: flex; flex-wrap: wrap; gap: 4px; }
.landing .top nav a { text-decoration: none; opacity: .85; padding: 10px 8px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; }
.landing .top nav a:hover { opacity: 1; }
.landing main { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.landing h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12; margin: 8px 0 16px; letter-spacing: -.02em; }
.landing h2 { font-size: clamp(22px, 3vw, 30px); margin: 4px 0 12px; letter-spacing: -.01em; }
.landing .kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--muted); margin: 0; }
.landing .lead { font-size: 18px; max-width: 56ch; }
.landing .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 56px 0 24px; align-items: center; }
.landing .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.landing .btn { display: inline-block; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--line);
                text-decoration: none; font-weight: 600; background: var(--panel);
                transition: transform var(--t-fast), box-shadow var(--t-fast); }
.landing .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.landing .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.landing .hero > *, .landing .step > *, .landing .closing > * { min-width: 0; }
.landing .shot { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
                 background: var(--shot-bg); box-shadow: var(--shadow); }
.landing .shot img { display: block; width: 100%; height: auto; }
.landing .steps { display: grid; gap: 64px; padding: 48px 0; }
.landing .step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.landing .num { font: 700 13px/1 ui-monospace, monospace; color: var(--ok); letter-spacing: .14em; margin: 0; }
.landing .facts { padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing .facts-sub { margin: 0 0 8px; }
.landing .chips { list-style: none; padding: 0; margin: 8px 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.landing .chips li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
                     font: 600 13px/1.4 ui-monospace, monospace; }
.landing .numbers { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px;
                    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.landing .numbers li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.landing .numbers b { display: block; font-size: 32px; line-height: 1; margin-bottom: 6px; }
.landing .numbers span { color: var(--muted); font-size: 14px; }
.landing .closing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 56px 0; align-items: center; }
.landing footer { border-top: 1px solid var(--line); padding: 24px; display: flex; flex-wrap: wrap; gap: 12px;
                  justify-content: space-between; color: var(--muted); font-size: 14px; }
@media (min-width: 900px) {
  .landing .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding-top: 72px; }
  .landing .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .landing .step:nth-child(even) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .landing .step:nth-child(even) .step-text { order: 2; }
  .landing .closing { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ── Quản trị ────────────────────────────────────────────────────────────────────────────── */
.admin { font-size: 15px; line-height: 1.55; }
.admin header { border-bottom: 1px solid var(--line); padding: 12px 24px; display: flex;
                gap: 20px; align-items: center; flex-wrap: wrap; background: var(--panel); }
.admin header .brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.admin header b { font-size: 16px; }
.admin header nav { display: flex; gap: 4px; flex-wrap: wrap; }
.admin header nav a { color: inherit; text-decoration: none; opacity: .75; padding: 6px 10px; border-radius: 8px;
                      display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.admin header nav a .ic { width: 16px; height: 16px; }
.admin header nav a:hover { opacity: 1; background: var(--bg); }
.admin header nav a[aria-current="page"] { opacity: 1; background: var(--bg); box-shadow: inset 0 -2px 0 var(--accent); }
.admin header .who { margin-left: auto; font-size: 13px; opacity: .85; display: flex; gap: 10px; align-items: center; }
.admin header .who form { display: inline; }
.admin header .who button.link { padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.admin main { padding: 24px; max-width: 1100px; margin: 0 auto; }
.admin h2 { font-size: 17px; margin: 0 0 8px; }
.admin h3 { font-size: 14px; margin: 24px 0 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.admin .card { width: auto; padding: 20px; margin-bottom: 24px; }
.admin .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.admin .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.admin .stat .n { font-size: 30px; font-weight: 600; }
.admin .stat .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.admin .stat .delta { font-size: 12px; margin-top: 6px; color: var(--muted); }
.admin .stat .delta.up { color: var(--ok); } .admin .stat .delta.down { color: var(--danger); }
.admin .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin a.stat-link { color: inherit; text-decoration: none; display: block; }
.admin a.stat-link .stat:hover { border-color: var(--accent); }
.admin form.search input[type=date] { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }
/* Phân bố nhỏ trong ô số (theo phiên bản / theo OS) */
.admin .stat .dist { margin-top: 6px; font-size: 13px; }
.admin .stat .dist div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-top: 1px solid var(--line); }
.admin .stat .dist div:first-child { border-top: 0; }
.admin form.search select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; margin: 0; }
@media (max-width: 720px) { .admin .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin table { width: 100%; border-collapse: collapse; background: var(--panel);
               border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.admin th, .admin td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.admin tr:last-child td { border-bottom: 0; }
.admin table.kv td:first-child { color: var(--muted); width: 160px; }
.admin td.actions { white-space: nowrap; }
.admin button, .admin .btn { padding: 9px 16px; border-radius: 8px; border: 0;
                             background: var(--accent); color: var(--accent-fg); cursor: pointer; text-decoration: none;
                             display: inline-block; margin-top: 12px; }
.admin .btn.secondary { background: transparent; color: inherit; border: 1px solid var(--line); }
.admin button.danger, .admin .btn.danger { background: var(--danger); color: #fff; }
.admin button.link { background: none; color: var(--link); padding: 0 8px 0 0; margin: 0; font-size: 13px; }
.admin button.link.danger { color: var(--danger); }
.admin button[disabled] { opacity: .5; cursor: not-allowed; }
.admin .tag { font-size: 11px; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 4px; }
.admin .tag.warn { background: var(--tag-warn); }
.admin .tag.off { background: var(--tag-off); }
.admin input[type=file], .admin select { display: block; margin-top: 12px; font: inherit; }
.admin input[type=file]::file-selector-button { font: inherit; padding: 6px 12px; margin-right: 10px; border-radius: 8px;
                                               border: 1px solid var(--line); background: var(--panel); color: inherit; cursor: pointer; }
.admin td.empty { padding: 20px 14px; line-height: 1.5; }
.admin form.search { display: flex; gap: 8px; margin-bottom: 16px; }
.admin form.search input { flex: 1; font: inherit; padding: 8px 12px; border: 1px solid var(--line);
                           border-radius: 8px; background: transparent; color: inherit; min-width: 0; }
.admin form.search button { margin: 0; }
.admin form.inline { display: inline; }
.admin form.inline select { display: inline; margin: 0 4px 0 0; padding: 4px 6px; }
.admin form.inline input:not([type=hidden]), .admin form.inline select { font: inherit; padding: 6px 10px; border: 1px solid var(--line);
                                        border-radius: 8px; background: transparent; color: inherit; margin: 0 4px 0 0; }
.admin form.inline input[type=number] { width: 4.5em; }
.admin .card form.inline input:not([type=hidden]) { width: auto; max-width: 100%; }   /* .card input {width:100%} là của trang thẻ công khai */
.admin .pager { display: flex; gap: 12px; margin-top: 12px; font-size: 13px; }
.admin a.row { color: inherit; }
.admin figure.chart { margin: 0 0 20px; background: var(--panel); border: 1px solid var(--line);
                      border-radius: var(--radius); padding: 12px 16px; }
.admin figure.chart figcaption { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.admin figure.chart svg { width: 100%; height: auto; display: block; }
/* Hai bản SVG cùng dữ liệu: bản rộng cho desktop, bản hẹp cho điện thoại — nhãn trục KHÔNG bị bóp
   (preserveAspectRatio="none" từng làm chữ dẹt 4px trên 390px). */
.admin figure.chart svg.narrow { display: none; }
@media (max-width: 720px) { .admin figure.chart svg.wide { display: none; } .admin figure.chart svg.narrow { display: block; } }
.admin figure.chart .bar { fill: var(--accent); }
.admin figure.chart .bar:hover { fill: #1c4fc4; }
.admin figure.chart .axis { stroke: var(--line); stroke-width: 1; }
.admin figure.chart .lbl { font: 11px system-ui, sans-serif; fill: var(--muted); }
/* Trang xác nhận hành động phá huỷ */
.admin .confirm { max-width: 560px; }
.admin .confirm ul { margin: 8px 0 16px; padding-left: 20px; }
.admin .confirm .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.admin .confirm input[type=email] { font: inherit; padding: 8px 12px; border: 1px solid var(--line);
                                    border-radius: 8px; background: transparent; color: inherit; width: 100%; margin-top: 8px; }
/* Điện thoại: bảng cuộn ngang trong chính nó thay vì đẩy cả trang tràn ra ngoài */
@media (max-width: 720px) {
  .admin main { padding: 16px; }
  .admin table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin header { padding: 10px 12px; gap: 8px 12px; }
  .admin header b { font-size: 15px; }
  /* Nav thành một hàng cuộn ngang, chỉ icon + nhãn nhỏ — không gãy ba dòng nữa. */
  .admin header nav { width: 100%; order: 3; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding-bottom: 2px; }
  .admin header nav a { flex: none; font-size: 12px; padding: 6px 8px; }
  .admin header .who { margin-left: auto; font-size: 12px; }
  .admin header .who > span:first-child { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Bảng có data-label thành THẺ: mỗi hàng một khối, mỗi ô một dòng "nhãn — giá trị" (RMP-100 P1 còn nợ). */
  .admin table.cards { display: block; overflow: visible; background: transparent; border: 0; border-radius: 0; }
  .admin table.cards thead { display: none; }
  .admin table.cards tbody, .admin table.cards tr { display: block; }
  .admin table.cards tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px;
                          padding: 4px 0; }
  .admin table.cards td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 14px; }
  .admin table.cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-transform: uppercase;
                                              letter-spacing: .04em; flex: none; padding-top: 2px; }
  .admin table.cards td.actions { justify-content: flex-start; white-space: normal; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
  .admin table.cards td.empty { display: block; }
}

/* ── Trang bài công khai (/chinh-sach, /dieu-khoan) — cùng khung header/footer với trang chủ ────── */
.landing main.prose { max-width: 760px; padding: 32px 24px 56px; }
.landing main.prose.notfound { min-height: 50vh; }
.landing .prose h1 { font-size: clamp(28px, 4vw, 38px); margin: 4px 0 12px; }
.landing .prose h2 { font-size: 20px; margin: 36px 0 8px; }
.landing .prose .lead { font-size: 17px; }
.landing .prose ul { padding-left: 22px; }
.landing .prose li { margin: 6px 0; }
.landing .prose a { color: var(--link); }
.landing .prose .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
.landing .prose table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--panel);
                        border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.landing .prose th, .landing .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
                                         vertical-align: top; }
.landing .prose th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.landing .prose tr:last-child td { border-bottom: 0; }
.card .btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px;
                    padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg);
                    font-weight: 600; text-decoration: none; }
.card .btn.google .g { font: 700 15px/1 system-ui, sans-serif; color: #4285f4; }
.card p.or { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.card p.or::before, .card p.or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.card p.foot.legal { font-size: 12px; color: var(--muted); margin-top: 10px; }
.card p.foot.legal a { color: inherit; }
@media (max-width: 720px) {
  /* Bảng trong bài thành thẻ trên điện thoại — cột "giữ bao lâu" không được nằm ngoài màn hình. */
  .landing .prose table.cards { display: block; min-width: 0; background: transparent; border: 0; }
  .landing .prose table.cards thead { display: none; }
  .landing .prose table.cards tbody, .landing .prose table.cards tr { display: block; }
  .landing .prose table.cards tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
                                   margin-bottom: 10px; padding: 6px 0; }
  .landing .prose table.cards td { display: block; border: 0; padding: 4px 14px; }
  .landing .prose table.cards td[data-label]::before { content: attr(data-label); display: block; color: var(--muted);
                                                       font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
}

/* ── Cổng tự phục vụ /tai-khoan (RMP-28/29) ─────────────────────────────────────────────── */
.landing main.prose.portal { max-width: 720px; }
.portal .pcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 16px 0; }
.portal .pcard h2 { margin: 0 0 8px; font-size: 17px; }
.portal .pcard.danger { border-color: var(--danger); }
.portal ul.rows { list-style: none; padding: 0; margin: 0; }
.portal ul.rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.portal ul.rows li:first-child { border-top: 0; }
.portal ul.plain { padding-left: 18px; }
.portal .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
               color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.portal .btn.small { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.portal .btn.danger { border-color: var(--danger); color: var(--danger); }
.portal form.stack { display: grid; gap: 10px; max-width: 360px; }
.portal form.stack label { font-size: 13px; font-weight: 600; display: grid; gap: 4px; }
.portal form.stack input { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }
.portal form.logout { margin-top: 24px; }
.portal .notice { padding: 10px 14px; border-radius: 8px; font-size: 14px; border: 1px solid var(--line); }
.portal .notice.ok { border-color: var(--ok); color: var(--ok); }
.portal .notice.err { border-color: var(--danger); color: var(--danger); }
.portal .tag { font-size: 11px; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.portal .tag.warn { background: var(--tag-warn); }
.card ul.consequences { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.card button[type=submit].danger { background: var(--danger); }

/* TOTP (RMP-38) — ô QR luôn đen trên trắng, máy quét không thích nền tối */
.admin .qr { display: inline-block; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--line); margin: 4px 0 8px; }
.admin .qr svg { display: block; width: 200px; height: 200px; }
.admin details summary { cursor: pointer; color: var(--link); font-size: 14px; }
.admin code.totp-key { font-size: 18px; letter-spacing: .08em; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; display: inline-block; }
.admin pre.recovery { font: 15px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; user-select: all; }


/* ── Hướng dẫn sử dụng (/huong-dan, RMP-113) — bài dài sinh từ Markdown ─────────────────────
   Bảng và khối mã trong Markdown không đi qua .table-wrap, nên tự cuộn ngang trong chính nó;
   trang KHÔNG được tràn ngang ở 390px (cổng WebShot scrollW=ok). */
.guide { max-width: 860px; }
.guide .toc ol { margin: 8px 0 0; padding-left: 20px; }
.guide .toc li.lv3 { margin-left: 16px; font-size: 14px; }
.guide article h1 { margin-top: 8px; }
.guide article h2 { margin-top: 36px; }
.guide article h3 { margin-top: 24px; font-size: 17px; }
/* .landing .prose table đặt min-width 640px (bảng pháp lý được bọc .table-wrap); bảng Markdown không có
   .table-wrap nên phải tự cuộn: gỡ min-width, khối cuộn ngang, bảng bên trong tự co theo nội dung. */
.landing .prose.guide article table { display: block; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.landing .prose.guide article table tbody, .landing .prose.guide article table thead { display: table; min-width: 100%; width: max-content; max-width: none; }
.guide article th, .guide article td { border: 1px solid var(--line); padding: 6px 10px; vertical-align: top; }
.guide article pre { max-width: 100%; overflow-x: auto; padding: 12px; }
.guide article code { word-break: break-word; }
.guide article img { max-width: 100%; height: auto; }
.guide article blockquote { border-left: 3px solid var(--line); margin: 12px 0; padding: 4px 14px; opacity: .92; }

/* ── Ô tìm chung ở header admin (RMP-112) ─────────────────────────────────────────────────── */
.admin header form.find { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.admin header form.find input { width: 220px; max-width: 40vw; padding: 5px 8px; font-size: 13px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: inherit; min-height: 32px; }
.admin header form.find button.link { padding: 4px; min-height: 32px; display: inline-flex; align-items: center; }
.admin header form.find .ic { width: 16px; height: 16px; }
.admin header form.find .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Cách mua (trang chủ) + FAQ (RMP-115) ─────────────────────────────────────────────────── */
.landing .buy { padding: 40px 0; }
.landing .buy h2 { margin: 0 0 16px; }
.landing .buy-steps { display: grid; gap: 14px; padding-left: 0; margin: 0; counter-reset: buy; list-style: none; }
.landing .buy-steps li { position: relative; padding: 14px 16px 14px 56px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); counter-increment: buy; }
.landing .buy-steps li::before { content: counter(buy); position: absolute; left: 16px; top: 12px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
@media (min-width: 900px) { .landing .buy-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.faq details.pcard summary { cursor: pointer; }
.faq details.pcard > p { margin: 10px 0 0; }