/* TADABOT — DESIGN TOKENS (một nguồn sự thật). Mọi trang chỉ đọc biến ở đây; đổi nhận diện cả sản phẩm = sửa tệp này.
   Mã khác KHÔNG được ghi tên phông hay mã màu, chỉ var(--…).

   HAI TẦNG TÊN, và phải dùng đúng tầng:
     · `--tb-*` trên `:root` — bảng màu Tadabot, dùng được ở MỌI nơi. HUD của trang không gian (#tb-dau, #ui, #caiDat…) nằm
       NGOÀI `.tb` (space.html để `<body>` trần vì engine 3D có bộ biến sáng riêng ở `:root`), nên nó PHẢI đọc tầng này.
     · tên chung (`--chu`, `--nhan`, `--vien`…) chỉ tồn tại trong `.tb` — theme.css và các trang `.tb` dùng tầng này.
   Đặt tên chung ở `:root` là đè `--chu`/`--vien` của giáo cụ engine (chữ trong bảng/hình thành trắng trên nền sáng — bài 22/09).
   Đọc tầng chung ở chỗ ngoài `.tb` thì biến RỖNG và nền biến mất KHÔNG có lỗi console: 22/09 `#caiDat` từng trong suốt hẳn
   vì `background: var(--hop-nen)`; bắt được bằng ảnh chụp + `getComputedStyle`, không phải bằng console.
   Và ĐỪNG viết `--kinh: var(--kinh)` — biến tự tham chiếu là guaranteed-invalid, cũng mất nền trong im lặng.

   06/10 USER CHỐT: TOÀN BỘ CHỈ DÙNG ROBOTO ("tất cả chỉ dùng Roboto global") — hai biến dưới cùng trỏ Roboto, ghi chú
   chọn phông cũ giữ làm sổ. PHÔNG (cũ): Manrope cho tiêu đề / UI header · Plus Jakarta Sans cho chữ dài / khung chat. Cả hai trên Google Fonts (woff2, có bộ
   tiếng Việt qua unicode-range nên chỉ tải subset cần). Nạp bằng MỘT <link> css2 giống nhau ở mọi trang (cache chung).
   Space Grotesk (bản 22/09 đầu, theo ảnh user gửi) bị THAY vì đo được: khe tách hai tầng dấu chồng (ẫ ệ ỗ ữ) ở cỡ 15px chỉ
   0,63px — TỆ NHẤT trong bảy phông đo, nên dấu dính vào nhau; Manrope 1,00 và Plus Jakarta Sans 1,25 (tốt nhất, nên chữ dài
   giữ nguyên). User chọn Manrope sau khi xem bảng mẫu render bằng chính chữ của app.
   Đổi phông thì đo lại khe tách dấu (vẽ 'ẫ' lên canvas ở 15px×8, tìm khoảng trắng lớn nhất trên x-height) — đừng nhìn chữ
   Latin rồi kết luận, và ĐỪNG tin `document.fonts.check`: nó báo sai "chưa nạp" với phông biến thiên của Google (22/09),
   đo bằng BỀ RỘNG chữ so với phông dự phòng mới đúng.

   MÀU — "XANH MỰC" (user chọn 22/09 sau khi xem ba phương án render thật). Xanh lam đậm, giữ đúng họ màu của bản xanh hoàng gia
   đầu tiên nhưng HẠ ĐỘ TƯƠI gần một nửa. Vì sao đổi, đo được cả ba:
     · chữ phụ trên nền cũ (#C9D6FF trên #3362D5) chỉ đạt tương phản 3,78 — TRƯỢT chuẩn AA 4,5; bảng này 6,59.
     · nền cũ C* 68,3 cho mảng phủ gần hết màn hình, gấp đôi mức thường của nền sản phẩm nên át nhân vật và cảnh 3D;
       bảng này C* 39,6, nội dung trắng và ảnh cảnh thành thứ sáng nhất trên trang.
     · cách xa nhất mọi màu của 26 cảnh 3D (ΔE nhỏ nhất 23,3) nên ô cảnh ở trang home không tan vào nền.
       Hai hướng từng tính đề xuất — xanh mòng két và xanh xám — bị loại vì rơi đúng vùng màu ảnh cảnh (5–6 cảnh dưới ΔE 25).
   Đổi bảng màu thì đo lại bằng chính phép đo đó (độ tươi · tương phản chữ trắng và chữ phụ · ΔE tới `nen/danh_muc.json`),
   rồi render cả ba trang cho user xem mắt — đừng chọn bằng cảm giác. */
:root {
  --phong-tieu-de: "Roboto", system-ui, sans-serif;
  --phong-chu: "Roboto", system-ui, sans-serif;

  /* nền: ba chặng gradient, sáng ở góc trái-trên → đậm ở góc phải-dưới */
  --tb-xanh-sang: #24478F; --tb-xanh: #1B3874; --tb-xanh-dam: #142A56; --tb-xanh-noi: #21407F;
  --tb-nen-gradient: linear-gradient(118deg, var(--tb-xanh-sang) 0%, var(--tb-xanh) 52%, var(--tb-xanh-dam) 100%);
  --tb-luoi-cham: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.4px) 0 0 / 26px 26px;
  /* viền · chữ */
  --tb-vien: rgba(255, 255, 255, .20); --tb-vien-manh: rgba(255, 255, 255, .40);
  --tb-chu: #FFFFFF; --tb-chu-phu: #B7C6EA; --tb-chu-mo: #8797C2;
  /* nhấn: nút chính TRẮNG, --tb-nhan-chu là chữ đặt trên nó */
  --tb-nhan: #FFFFFF; --tb-nhan-2: #D7E3FA; --tb-nhan-chu: #16295A; --tb-nhan-hover: #EDF2FC;
  --tb-am: #FFC670; --tb-loi: #FFB3BD;
  /* ô nhập · thông báo · màn che · hộp thoại và ngăn trượt */
  --tb-o-nen: rgba(8, 18, 52, .38); --tb-bao-nen: rgba(8, 18, 52, .34); --tb-che-nen: rgba(9, 18, 50, .68);
  --tb-hop-nen: linear-gradient(180deg, #27498F 0%, #1A3470 100%);
  /* kính (HUD trang không gian) — phải đọc được cả khi sau lưng là cảnh bãi biển/tuyết sáng */
  --tb-kinh: rgba(24, 50, 108, .78); --tb-kinh-dam: rgba(24, 50, 108, .95); --tb-kinh-hover: rgba(40, 74, 150, .92);
  /* hình khối */
  --tb-ban-kinh: 14px; --tb-ban-kinh-lon: 22px; --tb-ban-kinh-o: 26px;
  --tb-bong-noi: 0 24px 60px rgba(8, 18, 52, .50);
  --tb-bong-the: 0 30px 90px rgba(8, 16, 46, .50);
  --tb-bong-nut: 0 10px 28px rgba(8, 18, 52, .34);
}
/* ánh xạ sang tên chung cho theme.css và các trang `.tb` */
.tb {
  --xanh-sang: var(--tb-xanh-sang); --xanh: var(--tb-xanh); --xanh-dam: var(--tb-xanh-dam);
  --nen: var(--tb-xanh); --nen-noi: var(--tb-xanh-noi); --nen-sau: var(--tb-xanh-dam);
  --nen-gradient: var(--tb-nen-gradient); --luoi-cham: var(--tb-luoi-cham);
  --vien: var(--tb-vien); --vien-manh: var(--tb-vien-manh);
  --chu: var(--tb-chu); --chu-phu: var(--tb-chu-phu); --chu-mo: var(--tb-chu-mo);
  --nhan: var(--tb-nhan); --nhan-2: var(--tb-nhan-2); --nhan-chu: var(--tb-nhan-chu); --nhan-hover: var(--tb-nhan-hover);
  --am: var(--tb-am); --loi: var(--tb-loi);
  --o-nen: var(--tb-o-nen); --bao-nen: var(--tb-bao-nen); --che-nen: var(--tb-che-nen); --hop-nen: var(--tb-hop-nen);
  --kinh: var(--tb-kinh); --kinh-dam: var(--tb-kinh-dam); --kinh-hover: var(--tb-kinh-hover);
  --ban-kinh: var(--tb-ban-kinh); --ban-kinh-lon: var(--tb-ban-kinh-lon); --ban-kinh-o: var(--tb-ban-kinh-o);
  --bong-noi: var(--tb-bong-noi); --bong-the: var(--tb-bong-the); --bong-nut: var(--tb-bong-nut);
}
/* Tấm SÁNG (thẻ trắng đặt trên nền xanh, ví dụ biểu mẫu đăng nhập): đảo bộ biến, mọi thành phần bên trong tự đổi màu */
.tb .sang {
  --chu: #14224B; --chu-phu: #56658E; --chu-mo: #8A97BE;
  --vien: rgba(20, 34, 75, .14); --vien-manh: rgba(20, 34, 75, .30);
  --nhan: var(--tb-xanh-sang); --nhan-2: var(--tb-xanh); --nhan-chu: #FFFFFF;
  --nhan-hover: linear-gradient(100deg, #2C559F 0%, #1A3470 100%);
  --o-nen: #F2F5FC; --bao-nen: #F2F5FC; --loi: #C9303F;
  --bong-nut: 0 10px 28px rgba(36, 71, 143, .32);
  color: var(--chu);
}