/* ============================================================================
   Shadow ZH · trang tài khoản (D56). Cùng ngữ pháp thị giác với `web/styles.css`
   + `web/web-v2.css` — trang này là mặt thứ hai của cùng một sản phẩm, không phải
   một sản phẩm khác.

   ── VÌ SAO VIẾT LẠI 2026-09-11 (D76) ──────────────────────────────────────────
   Lượt 09-09 đổi BẢNG MÀU sang bản mockup nhưng không đổi NGÔN NGỮ HÌNH KHỐI.
   Đo được trên bản đã deploy: trang giới thiệu mời bằng một khối nền mực với nút
   chanh bo góc, bấm vào là rơi xuống một trang trắng chữ xám mảnh, hàng kẻ 1px,
   nút nhỏ. Hai mặt tiền cách nhau ĐÚNG MỘT CÚ BẤM trên CÙNG một origin — đó là
   đúng cái "hai nơi khác họ nhau" mà D62 ① cấm, và nó xảy ra ở màn hình đắt nhất.

   Chú thích cũ ở đây còn tuyên bố "không thẻ, bán kính 0" trong khi token ngay
   dưới đã khai bán kính 12 và 16. Chữ nói một đằng, mã làm một nẻo — chỗ nào đọc
   lên như một quyết định thì phải là một quyết định.

   ── BA LUẬT, chép từ `web/styles.css` ─────────────────────────────────────────
   1. Nền trắng là mặc định. Nền MỰC dành cho đúng một khối: chỗ nói giá. Đó là
      cách trang giới thiệu làm, và nó là lý do khối ấy được nhìn trước.
   2. Bán kính có luật: nút và ô nhập 12px, thẻ 16px, khối giá 20px, hàng trong
      khối giá 14px. Không có bán kính thứ năm.
   3. Chanh (`--chanh`) CHỈ xuất hiện TRÊN nền mực, và chỉ với chữ mực. Trên nền
      trắng thì accent là xanh lá. Đảo lại là một cặp màu 1,4:1 — không đọc được.

   ── PHÔNG: Archivo, TỰ PHỤC VỤ ────────────────────────────────────────────────
   Trang giới thiệu dùng Archivo. Trang này trước đây dùng phông hệ thống, với lý
   do ghi ở đầu `tai-khoan.html`: CSP là `default-src 'none'` và không mở origin
   thứ ba trên trang tiền.

   Lý do ấy VẪN đúng, và nó KHÔNG cấm dáng chữ — nó cấm một bên thứ ba biết ai
   đang mở trang trả tiền. Hai lát cắt Archivo (tiếng Việt và latin, 48 KB) nay
   nằm trên CHÍNH origin này, khai trong `docSite()` và có đường riêng trong bảng
   đường. CSP thêm đúng `font-src 'self'`, không thêm host nào.
   ========================================================================== */

/* Archivo — OFL 1.1, Omnibus-Type. Biến thiên 400–700 nên một tệp mỗi lát cắt
   gánh cả bốn độ đậm trang này dùng.

   `font-display: swap`: trang phải ĐỌC ĐƯỢC ngay cả khi phông chưa về. Người
   đang chờ chuyển khoản cần bốn dòng số, không cần dáng chữ — `block` sẽ giấu
   chúng vài trăm mili-giây để đổi lấy một chuyện không ai cần. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/archivo-vi.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
                 U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
                 U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Bảng màu = `web/styles.css`. Đổi ở đó thì đổi ở đây; `unit.mjs` không ghim
     từng mã màu, nên chỗ này dựa vào một lượt đọc mắt — giữ hai danh sách cạnh
     nhau để việc đó làm được trong một màn hình. */
  /* Nhận diện Hán Ngữ Bắc Kinh, đọc từ UI đang chạy tại hoc.hanngubackinh.vn
     ngày 2026-09-13. Giữ brand sáng cho điểm nhấn; chữ/nút trên nền trắng dùng
     brand-strong để đủ tương phản. */
  --sz-canvas: #fefefe;
  --sz-canvas-alt: #f1f5f2;
  --sz-text: #19231c;
  --sz-text-soft: #36473c;
  --sz-text-muted: #68766d;
  --sz-accent: #167c45;
  --sz-accent-hover: #0f6336;
  --sz-on-accent: #fff;
  --sz-match: #167c45;
  --sz-danger: #b64238;
  --hsk-brand: #45cb6a;
  --hsk-brand-hover: #3fc564;
  --hsk-brand-ink: #123821;

  /* Mực và chanh: đúng một khối dùng cặp này, và chanh KHÔNG được rời khỏi nền
     mực. Cùng giá trị với `web/web-v2.css`. */
  --muc: #142019;
  --chanh: var(--hsk-brand);
  --chanh-hover: var(--hsk-brand-hover);
  --tren-muc: #ffffff;
  --tren-muc-mo: #ffffff9e;
  --tren-muc-vien: #ffffff26;

  --rule: #cad8ce;
  --rule-soft: #e0e8e2;

  --pad-x: clamp(18px, 5vw, 40px);
  --ease: cubic-bezier(.22, .61, .24, 1);

  --r-nut: 12px;
  --r-the: 16px;
  --r-khoi: 20px;
  --r-hang: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

/* `[hidden]` phải THẮNG mọi luật `display` của tệp này.
 *
 * `[hidden] { display: none }` là luật của TRÌNH DUYỆT, và bất kỳ luật tác giả nào đặt
 * `display` đều đè nó. Đo trên bản đã deploy 2026-09-08: `.ai { display: inline-flex }` làm
 * nút "Thoát" hiện ra với người CHƯA đăng nhập — bấm vào là POST logout không phiên, ăn 401,
 * rồi hiện một câu lỗi cho một việc họ không làm. Trang này bật/tắt màn bằng `hidden`, nên
 * một chỗ hở là một màn sai; khai một lần ở đây thay vì nhớ ở từng lớp. */
[hidden] { display: none !important; }

body {
  background: var(--sz-canvas);
  color: var(--sz-text);
  /* Archivo trước, rồi ngăn xếp hệ thống có dự phòng thật ở cả ba nền. Phông
     chưa về hoặc bị chặn thì trang vẫn đúng, chỉ khác dáng. */
  font-family: Archivo, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Vòng focus 2px chứ không 1px: WCAG 2.2 đòi đường bao dày ít nhất 2px. Màu là
   chữ chứ không son — son trên nền trắng chỉ khoảng 4,1:1, đủ cho đồ hoạ nhưng
   không đủ cho một dấu hiệu người ta phải tìm bằng mắt. Cùng lý lẽ ở bản web. */
:focus-visible { outline: 2px solid var(--sz-text); outline-offset: 2px; border-radius: 4px; }
/* Trên nền mực thì đảo lại — chữ mực trên mực là một vòng focus vô hình. */
.goi :focus-visible { outline-color: var(--chanh); }

a { color: var(--sz-text); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--sz-text); }

code, .ma {
  font-family: "Cascadia Mono", Consolas, "SF Mono", "DejaVu Sans Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* ── đầu trang ────────────────────────────────────────────────────────────── */

.dau {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px var(--pad-x);
  border-bottom: 1px solid var(--rule-soft);
}
.hieu { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hieu .zh { font-size: 15px; letter-spacing: .18em; color: var(--sz-text); }
.hieu .vach { width: 22px; height: 1px; background: var(--rule); }
.hieu .en {
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sz-text-muted);
}
.ai { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; color: var(--sz-text-muted); }
.ai #email { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── khung ────────────────────────────────────────────────────────────────── */

main { max-width: 720px; margin: 0 auto; padding: 44px var(--pad-x) 64px; }

/* Dải xác nhận quan hệ thương hiệu đứng trước mọi trạng thái tài khoản: người chưa đăng
   nhập, đang chuyển khoản hay đã là thành viên đều thấy cùng một nguồn phát hành. Logo tự
   phục vụ trên origin này; không để trang tiền báo cho một máy chủ ảnh bên thứ ba biết ai
   đang mở nó. */
.dong-hsk {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  margin: 0 0 36px; padding: 14px 18px 14px 20px;
  border-radius: var(--r-the); background: var(--sz-canvas-alt);
}
.dong-hsk p { margin: 0; color: var(--sz-text-soft); line-height: 1.45; }
.dong-hsk p strong { color: var(--sz-text); }
.dong-hsk .ten-hsk {
  margin-top: 3px; color: var(--sz-accent); font-size: 17px; font-weight: 700;
  letter-spacing: -.01em;
}
.dong-hsk .ten-hsk span {
  display: block; color: var(--sz-text-muted); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.dong-hsk .lien-he-hsk { margin-top: 7px; font-size: 12px; color: var(--sz-text-muted); }
.dong-hsk img {
  display: block; flex: 0 0 auto; width: 112px; height: auto;
}

h1 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 33px); font-weight: 700;
     letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
h2 { margin: 40px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .14em;
     text-transform: uppercase; color: var(--sz-text-muted); }
p { margin: 0 0 14px; }
.dan { margin: 0 0 26px; color: var(--sz-text-soft); max-width: 58ch; }
.nho { font-size: 13px; color: var(--sz-text-muted); max-width: 62ch; }
.nho strong { color: var(--sz-text-soft); font-weight: 600; }
.cho { color: var(--sz-text-muted); }

/* ── nút ──────────────────────────────────────────────────────────────────── */

.nut {
  display: inline-block; padding: 11px 20px;
  border: 1.5px solid var(--rule); border-radius: var(--r-nut);
  background: transparent; color: var(--sz-text);
  font: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; text-align: center;
  cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease);
}
.nut:hover:not(:disabled) { border-color: var(--sz-text); background: var(--sz-canvas-alt); }
.nut:disabled { opacity: .42; cursor: not-allowed; }

/* SON trên nền trắng: xanh lá. */
.nut.chinh {
  border-color: var(--sz-accent); background: var(--sz-accent); color: var(--sz-on-accent);
}
.nut.chinh:hover:not(:disabled) { background: var(--sz-accent-hover); border-color: var(--sz-accent-hover); }

.lien {
  padding: 0; border: 0; background: none; color: var(--sz-text-muted);
  font: inherit; font-size: 13px; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px;
}
.lien:hover { color: var(--sz-text); }

/* ── lỗi ──────────────────────────────────────────────────────────────────── */

.loi {
  margin: 0 0 24px; padding: 12px 16px;
  border-left: 3px solid var(--sz-danger); border-radius: 0 var(--r-nut) var(--r-nut) 0;
  background: #b3261e0d;
  color: var(--sz-text); font-size: 14px;
}

/* ── bảng gói: KHỐI NỀN MỰC ───────────────────────────────────────────────────
   Đây là chỗ trang giới thiệu và trang này gặp nhau. Bên kia là `.the-goi` trong
   `web/web-v2.css`; cùng nền, cùng bán kính, cùng cách xếp hàng, cùng dòng "mỗi
   ngày" nhỏ dưới giá. Khác đúng một chỗ có lý do: bên kia hàng chỉ để CHỌN rồi
   một nút chung dẫn sang đây, còn ở đây mỗi hàng tự mua được — nên nút nằm
   trong hàng. */

.goi {
  list-style: none; margin: 0 0 20px; padding: 8px;
  background: var(--muc); border-radius: var(--r-khoi);
}
.goi li {
  display: grid; align-items: center; gap: 4px 20px;
  grid-template-columns: 1fr auto;
  padding: 16px 18px;
  border: 1.5px solid transparent; border-radius: var(--r-hang);
  color: var(--tren-muc);
}
/* Gói được mời chọn: viền chanh, y hệt `aria-pressed="true"` bên landing. */
.goi li.noi { border-color: var(--chanh); background: #ffffff14; }

.goi .ten { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 600; }
.goi .mo  { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--tren-muc-mo); }
.goi .gia { grid-column: 2; grid-row: 1; justify-self: end; text-align: right;
            font-size: 19px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap;
            color: var(--tren-muc); font-variant-numeric: tabular-nums; }
.goi .gia b { font-weight: 700; }
/* Dòng "x ₫ mỗi ngày". `<i>` chứ không `<b>`: `<b>` đang giữ con số chính, và
   bên landing đã có sẵn một vết sẹo vì luật mockup `.tien b{display:block}` nuốt
   mất nó (`web/web-v2.css` dòng ~382). */
.goi .gia i { display: block; margin-top: 2px;
              font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: 0;
              color: var(--tren-muc-mo); }
.goi .nut { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 4px;
            padding: 8px 16px; font-size: 14px;
            border-color: var(--tren-muc-vien); color: var(--tren-muc); }
.goi .nut:hover:not(:disabled) { border-color: var(--tren-muc); background: #ffffff12; }
/* CHANH, và chỉ ở đây: đúng một nút trong khối, trên nền mực, chữ mực. */
.goi .nut.chinh { background: var(--chanh); border-color: var(--chanh); color: var(--muc); }
.goi .nut.chinh:hover:not(:disabled) { background: var(--chanh-hover); border-color: var(--chanh-hover); }
.goi .nut:disabled { opacity: .45; }

.the {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  border: 0; border-radius: 999px;
  background: var(--chanh); color: var(--muc);
  font-size: 11px; font-weight: 700; letter-spacing: .01em; text-transform: none;
  vertical-align: 2px;
}

/* Hẹp thì hàng gập xuống một cột: giá và nút không còn chỗ đứng cạnh tên. */
@media (max-width: 460px) {
  .dong-hsk { align-items: flex-start; gap: 14px; padding: 14px 16px; }
  .dong-hsk img { width: 84px; }
  .goi li { grid-template-columns: 1fr; }
  .goi .ten, .goi .mo, .goi .gia, .goi .nut {
    grid-column: 1; justify-self: start; text-align: left;
  }
  .goi .gia { grid-row: 3; margin-top: 8px; }
  .goi .nut { grid-row: 4; }
}

/* ── khối ĐƠN ĐANG CHỜ, nằm TRONG màn chọn gói (D79) ──────────────────────────
   Trước 2026-09-11 đây là một MÀN thay cho bảng giá, nên người còn một đơn chờ mở
   trang lên là thấy đúng một gói — gói họ đã bấm, có thể từ hôm qua, với giá của
   hôm qua. Nay nó là một khối đứng TRÊN bảng giá, và bảng giá không bao giờ biến
   mất.

   Viền son bên trái: đây là chỗ đang cần người dùng làm một việc. Đó là chỗ thứ
   hai — và cuối cùng — mà son được phép xuất hiện trên nền trắng. */
.don-dang-cho {
  margin: 0 0 34px;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--sz-accent);
}
.don-dang-cho + .dau-khoi { margin-top: 0; }

/* Tiêu đề của một KHỐI, không phải của trang. `h1` để dành cho màn.
   Trước D79 cả hai khối đều mang `h1`, tức nói với trình đọc màn hình rằng trang có
   hai chủ đề chính. */
.dau-khoi {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.6vw, 25px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2; text-transform: none;
  color: var(--sz-text);
}

/* ── màn chờ chuyển khoản ─────────────────────────────────────────────────────
   Màn đắt nhất của trang: người đang cầm app ngân hàng, chép bốn dòng số. Nên nó
   là một THẺ có nền riêng, không phải một vùng kẻ hai vạch — vùng kẻ không nói
   được "bốn dòng này đi với nhau, và đi với mã QR bên cạnh". */

.goi-dang {
  margin: 0 0 22px; display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--sz-canvas-alt); border: 1px solid var(--rule-soft);
  font-size: 14px; color: var(--sz-text-soft);
}
.goi-dang b { font-weight: 600; color: var(--sz-text); }

.chuyen {
  display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: flex-start;
  padding: 24px; border: 1px solid var(--rule-soft); border-radius: var(--r-the);
  background: var(--sz-canvas-alt);
}
/* Bo góc đặt ở KHUNG, không đặt trên ảnh.
 *
 * Ảnh sepay vẽ ba ô định vị sát mép, và ô định vị là thứ máy quét tìm trước tiên. Một
 * `border-radius` trên chính ảnh sẽ gọt góc chúng — trên màn hình vẫn "đẹp", trong app ngân
 * hàng thì quét mãi không ra, và người dùng không có cách nào biết vì sao. Khung trắng có
 * đệm giữ được dáng bo mà không đụng vào một pixel nào của mã. */
.qr {
  margin: 0; padding: 8px;
  background: #fff;   /* mã QR cần nền sáng để máy quét đọc được */
  border: 1px solid var(--rule-soft); border-radius: var(--r-nut);
}
.qr img {
  display: block; width: 240px; height: 240px; max-width: 100%;
  background: #fff;
}
.qr img[hidden] { display: none; }
/* Ảnh hỏng ⇒ khung trắng không còn gì để đóng khung, và một ô trắng rỗng cạnh bốn dòng số
 * đọc lên như một chỗ còn đang tải. Bỏ khung, để lại đúng câu giải thích. */
.qr:has(img[hidden]) { padding: 0; background: none; border: 0; }
.qr figcaption { max-width: 240px; margin-top: 10px; font-size: 12px; color: var(--sz-text-muted); }

.bon { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; flex: 1 1 260px; }
.bon dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
          color: var(--sz-text-muted); }
.bon dd { margin: 0; word-break: break-all; }
/* Nội dung chuyển khoản: thứ DUY NHẤT nối khoản tiền với tài khoản. Nó được
   phép to hơn mọi dòng khác trong thẻ. */
.bon dd.manh {
  color: var(--sz-match); font-size: 19px; font-weight: 600; letter-spacing: .04em;
  /* KHÔNG cho gãy dòng giữa mã.
   *
   * `.bon dd` đặt `word-break: break-all` cho địa chỉ dài. Áp lên mã chuyển khoản thì
   * `SHADO32195001` xuống thành hai dòng — và đây là chuỗi DUY NHẤT người ta phải chép
   * chính xác sang app ngân hàng. Đo trên prod 2026-09-11: nó gãy thật, ở giữa cụm số.
   * Chép sai một ký tự là tiền vào mà không ai biết của ai.
   *
   * Mã dài 13 ký tự nên không cần gãy; hẹp quá thì cho cuộn ngang trong ô, không cắt. */
  word-break: normal; white-space: nowrap;
  overflow-x: auto; max-width: 100%;
}

.nhip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.nhip p { margin: 0; flex: 1 1 220px; font-size: 14px; color: var(--sz-text-soft); }
.nhip p.roi { color: var(--sz-match); font-weight: 600; }

/* ── màn xong ─────────────────────────────────────────────────────────────── */

.buoc { margin: 0 0 20px; padding-left: 22px; color: var(--sz-text-soft); }
.buoc li { margin-bottom: 6px; }

/* ── chân trang ───────────────────────────────────────────────────────────── */

footer {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding: 22px var(--pad-x) 40px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--sz-text-muted);
}
footer a { color: var(--sz-text-muted); }
footer a:hover { color: var(--sz-text); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}