/*
 * Khung trang của bản web (docs/design/webapp-dang-ky-truoc.md §2.1, §2.3; ADR-0011 §3).
 * Tệp riêng thay khối <style id="expo-reset"> nội dòng của bản xuất mặc định: index.html không có <style> / style= nội
 * dòng (kiem.mjs canh). CSP `style-src` có 'unsafe-inline' CHỈ vì react-native-web chèn style lúc chạy (đo 2026-11-13).
 * Màu theo chế độ sáng / tối KHÔNG viết ở đây: `giao-dien/web/khung-trang.ts` đặt biến --nen, --lienKet từ `mau.ts`.
 */

@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-600-latin-vietnamese.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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, 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;
}

/* Khung app cao đúng khung nhìn (100dvh — thanh địa chỉ co giãn trên điện thoại); vùng cuộn do ScrollView lo. */
html,
body {
  height: 100%;
}
body {
  margin: 0;
  overflow: hidden;
  background-color: var(--nen);
  /* Font thân (§2.1) — phần tử DOM gốc (`<select>` ngày sinh) thừa hưởng qua `font-family: inherit`. */
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  /* Chống chữ mồ côi (kit 7b): đoạn văn `pretty`, tiêu đề `balance`. Trình duyệt không hỗ trợ ⇒ bỏ qua (P3). */
  text-wrap: pretty;
}
@supports (height: 100dvh) {
  html,
  body {
    height: 100dvh;
  }
}
#root {
  display: flex;
  height: 100%;
  flex: 1;
}
[role="heading"] {
  text-wrap: balance;
}

/* Máy tính / máy tính bảng ngang: một cột nội dung tối đa 560 giữa trang, nền ngoài cột = --nen (§2.3). */
@media (min-width: 768px) {
  #root {
    max-width: 560px;
    margin: 0 auto;
  }
}

/* Ba tên liên kết trong câu đồng ý của form Tạo tài khoản không bẻ đôi («Quy / tắc cộng đồng» — GĐ1.12 L15), chỉ khi chữ
   trình duyệt ở cỡ thường: `em` của @media tính theo cỡ chữ gốc của trình duyệt ⇒ 22em = 352 px ở 100 %, 704 px ở 200 %
   (khi đó cho xuống dòng thường, tránh tràn cột). Không đổi chuỗi chung với iOS. */
/* Khi phải xuống dòng (chữ 200 %), `pre-wrap` mặc định của react-native-web giữ dấu cách ở cuối dòng và gạch chân nó
   («Điều_») — C29d. `normal` bỏ dấu cách đó. */
[data-testid^="lien-ket-"] {
  white-space: normal;
}

@media (min-width: 22em) {
  [data-testid^="lien-ket-"] {
    white-space: nowrap;
  }
}

/* Vòng tiêu điểm K4 — chỉ khi đi bằng bàn phím. */
:focus-visible {
  outline: 3px solid var(--lienKet);
  outline-offset: 2px;
}

/* Hộp thoại tự vẽ nền phủ riêng (hop-thoai.web.tsx) ⇒ bỏ nền mặc định của trình duyệt. */
dialog::backdrop {
  background: transparent;
}