/* public/tokens.css — MÀU/CHỮ/BO GÓC dùng chung cho trang tạo (style.css), trang tổng (home.css)
   và trang công cụ (tool.css). Một nguồn duy nhất: đổi màu ở đây là cả ba trang đổi theo.
   Nạp bằng <link> TRƯỚC file css của trang (không dùng @import — thêm một vòng tải nối tiếp). */
:root{
  /* ══ HỆ MÀU 09/09/2026 — chủ xưởng gửi bản thiết kế mới và chốt "đổi hết" (cả bốn trang) ══
     Đổi GIÁ TRỊ, giữ nguyên TÊN BIẾN: bốn trang chuyển màu cùng lúc mà không phải sửa một dòng
     markup nào. Nền đen ấm hơn, vàng sáng hơn, thêm điểm nhấn TÍM, bo góc to hơn.

     MỘT CHỖ CỐ Ý KHÔNG LÀM: --panel giữ ĐỤC. Bản thiết kế để panel trong suốt (kính mờ), nhưng
     --panel còn đang dùng cho MENU THẢ XUỐNG và bảng nổi ở cả bốn trang — trong suốt là chữ bên
     dưới lộ xuyên qua menu, đọc chồng lên nhau. Kính mờ đi qua lớp .the-kinh riêng bên dưới, chỗ
     nào muốn thì dùng. */
  --ground:#07070A; --panel:#111318; --raise:#181B21; --sunk:#0B0C10;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.05);
  /* Hai nấc viền ĐẬM HƠN --line. Trước 09/09 chúng là hai mã hex gõ tay không tên, rải 21 chỗ
     trong bốn tệp CSS (đúng hai mục trong danh sách tồn đọng):
       --line-manh  (cũ var(--line-manh)) — viền lúc rê chuột, nấc "đang chú ý"
       --line-2     (cũ var(--line-2)) — thanh cuộn, rãnh thanh trượt, công tắc TẮT, vòng xoay */
  --line-manh:rgba(255,255,255,.17); --line-2:rgba(255,255,255,.13);
  --txt:#F2F0EA; --dim:#9A978F; --faint:#86837C;   /* --faint đo đúng 4.56:1 trên nền sáng nhất
     (--raise) — chuẩn AA cần 4.5. Bản thiết kế gửi tới không có nấc này; lấy #7B7871 cho hợp
     tông thì tụt xuống 3.92 và chốt canh tương phản kêu ngay. Đừng làm nhạt thêm. */
  --amber:#F0B429; --amber-2:#F9D97A;
  --amber-soft:rgba(240,180,41,.10); --amber-line:rgba(240,180,41,.34);
  --on-amber:#221A00;
  --purple:#7C5CFF; --purple-soft:rgba(124,92,255,.12);
  --blue:#58A6FF; --green:#3FB950; --red:#F85149;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Bricolage Grotesque",var(--ui);
  /* Bo goc: mot bac chua du nen moi noi tu che ra mot so — dem duoc 11 dang rieng trong home.css.
     Bon bac nay phu het nhu cau. Ban thiet ke moi dung 18px cho THE, nen --r-lg len 18. */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-full:999px;
  /* chiều sâu + điểm nhấn cao cấp */
  --panel-grad:linear-gradient(180deg,#14161C 0%,#0F1116 100%);
  --amber-grad:linear-gradient(135deg,var(--amber) 0%,var(--amber-2) 100%);
  --amber-glow:0 6px 24px rgba(240,180,41,.35);
  --card-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 30px rgba(0,0,0,.35);
  /* Hai vệt sáng của nền — vàng góc trái trên, tím góc phải trên. Để ở đây làm MỘT nguồn duy nhất:
     trước đây mỗi trang tự vẽ một kiểu (style.css một vệt, home.css hai vệt khác màu, admin không có). */
  --nen-sang:
    radial-gradient(900px 500px at 10% -10%, rgba(240,180,41,.13), transparent 60%),
    radial-gradient(700px 500px at 100% 10%, rgba(124,92,255,.11), transparent 60%);
}

/* NỀN CHUNG cho cả bốn trang. Đặt ở đây nên trang nào cũng có; các trang KHÔNG được tự khai
   background nữa (đã gỡ ở style.css / home.css / admin.css) — khai lại là ghi đè mất hai vệt sáng. */
body{
  background-color:var(--ground);
  background-image:var(--nen-sang);
  background-attachment:fixed;
  color:var(--txt);
}

/* ── THẺ KÍNH MỜ ──
   Đây là thứ làm nên vẻ ngoài của bản thiết kế mới. Dùng cho các KHỐI NỘI DUNG (khung cấu hình, khung
   mô tả…), KHÔNG dùng cho menu thả xuống — xem ghi chú ở --panel. */
.the-kinh{
  background:var(--kinh);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(24px);
  box-shadow:var(--card-shadow);
}
/* Đầu thẻ: ô vuông nhỏ hổ phách + tên khối IN HOA, giãn chữ. */
.the-dau{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.the-dau .ic{width:26px;height:26px;border-radius:8px;background:var(--amber-soft);
  border:1px solid var(--amber-line);display:flex;align-items:center;justify-content:center;font-size:13px}
.the-dau h3{margin:0;font-size:12.5px;letter-spacing:.06em;color:color-mix(in srgb, var(--txt) 80%, var(--dim));text-transform:uppercase;font-weight:700}


/* ══ LỚP DÙNG CHUNG ══
   Đây là tệp CSS DUY NHẤT mà mọi trang đều nạp (/, /congcu, /taovd, /freepik, /buzzy): style.css thì
   /congcu không nạp, tool.css thì các trang kia không nạp. Nên thứ gì thật sự dùng chung mọi trang
   phải nằm ở đây — không thì lại mỗi trang một bản sao rồi trôi dạt mỗi nơi một kiểu, đúng cái vừa gỡ.

   .nut-tong — nút "về trang tổng". Trước đây CÙNG MỘT VIỆC này có 5 cách làm và 3 nhãn chữ khác nhau:
   /taovd và /buzzy dùng .chip (chữ mờ nhất, IN HOA cỡ 10px, không có :hover, và con trỏ là DẤU HỎI vì
   .chip vốn dành cho ô chú thích); /congcu dùng .chip của tool.css (khác hẳn); /admin gõ thẳng một khối
   style trong mã; trang báo lỗi dùng .notice-back với nhãn "← Trang tổng".

   .tname — nhãn TÊN TRANG. Thay cho thanh thẻ giả một-thẻ ở /freepik và /buzzy: thẻ đó tô kín hổ phách
   y hệt thẻ đang chọn thật bên /taovd nên nhân viên tưởng bấm được, mà không chỗ nào bắt sự kiện cả. */
.nut-tong{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--raise);color:var(--dim);
  font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
.nut-tong:hover{color:var(--txt);border-color:var(--line-manh);background:var(--panel)}
.tname{font-weight:600;font-size:14px;color:var(--dim)}
.tname b{color:var(--txt)}

/* ── Ô VÍ: "ví 187.219 cr" — credit THẬT còn trong tài khoản Magnific của cả xưởng ──
   Số to, sáng, có dấu phân cách; chữ "ví"/"cr" nhỏ mờ hai bên. KHÔNG dùng .chip: .chip là nhãn chú
   thích (10px, IN HOA, chữ mờ nhất) — con số tiền mà mặc áo đó thì liếc qua không đọc ra.
   Từ 08/09/2026 nằm ở ĐÂY chứ không riêng trong freepik.css nữa: /taovd và Trang tổng cũng hiện ô này,
   vì chúng bắn lên chính những tài khoản đó. Chủ xưởng: "gộp điểm crd ở tạo video với /freepik". */
.vi-chip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:8px;
  border:1px solid var(--amber-line);background:var(--amber-soft);white-space:nowrap}
.vi-chip[hidden]{display:none}
.vi-chip b{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--chu-nhan);letter-spacing:.01em}
.vi-nhan{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
/* "3/5" — mới đọc được ví của mấy tài khoản. Nhỏ và mờ hơn số tổng: nó là chú thích, không phải con số
   người ta liếc. Nhưng PHẢI có, vì tổng thiếu mà không nói là con số nói dối. */
.vi-nhac{font-family:var(--mono);font-size:10px;color:var(--faint);border-left:1px solid var(--amber-line);padding-left:6px;margin-left:2px}
.vi-nhac[hidden]{display:none}
/* Sắp hết thì đỏ — 187.219 với 1.200 nhìn giống hệt nhau nếu cùng một màu. */
.vi-chip.is-can{border-color:color-mix(in srgb, var(--red) 45%, transparent);background:color-mix(in srgb, var(--red) 9%, transparent)}
.vi-chip.is-can b{color:var(--red)}
/* Ô LUỒNG (/freepik) dùng chung khuôn với ô ví nhưng chữ XANH, để hai con số cạnh nhau không bị đọc
   nhầm nhau: một cái là TIỀN, một cái là CHỖ. */
.luong-chip b{color:var(--green)}
/* Cùng khuôn ô ví nhưng chữ TRẮNG và viền nhạt — dùng cho thứ không phải tiền (mã đăng nhập). Hai ô
   hổ phách đứng cạnh nhau thì mắt không tách ra được cái nào là số tiền. */
.vi-chip.nhat{border-color:var(--line);background:var(--raise)}
.vi-chip.nhat b{color:var(--txt);font-size:14px;letter-spacing:.04em}

/* ── BẢNG NHỎ HỎI LẠI (.lopPhu + .bangNoi) ──
   Chủ xưởng đã chê hộp confirm của trình duyệt ("chuyên nghiệp hơn ra một bảng nhỏ"), và có hẳn một
   chốt canh chuyện đó trong bộ test. Nên MỌI trang hỏi lại đều dùng khuôn này.
   Từ 08/09/2026 nằm ở đây chứ không mỗi trang một bản: /freepik và /buzzy vốn giữ hai bản sao đã bắt
   đầu trôi khác nhau (560px với 620px), và /taovd thì chẳng có gì nên nút xoá tệp không biết hỏi bằng gì.
   Bề rộng để --bang-rong đổi được theo từng trang mà không phải chép lại cả khối. */
.lopPhu{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:20px}
.bangNoi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
  width:min(var(--bang-rong,560px),100%);max-height:88vh;overflow:auto;box-shadow:var(--card-shadow)}
.bnDau{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:15px}
.bnDau button{margin-left:auto}
.bnCuoi{display:flex;gap:8px;margin-top:12px}
.bangNoi textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--sunk);color:var(--txt);font-family:var(--mono);font-size:12px;resize:vertical}
.bangNoi code{background:var(--sunk);padding:2px 6px;border-radius:5px;font-family:var(--mono);font-size:12px}

/* ===== LỚP "SANG" DÙNG CHUNG (11/09/2026) — mô phỏng trang giới thiệu: nền thẻ chuyển sắc ấm, vệt sáng,
   thanh đầu trang + menu viên + chip người dùng + ô số + nút vàng + tab viên + trạng thái trống.
   Đặt CUỐI tệp, NGOÀI khối :root đầu tệp (khối :root thứ hai chỉ THÊM biến). Màu chữ/nền gốc giữ nguyên
   để test tương phản (giaoDienTuongPhan) không đổi. Trang tổng và /taovd dùng chung để y hệt nhau. ===== */
:root{
  --am-line:rgba(240,180,41,.30); --tim-line:rgba(124,92,255,.34);
  --nen-am:linear-gradient(160deg,#1C160C 0%,#151109 65%);
  --nen-am-2:linear-gradient(180deg,#1C160C 0%,#151109 100%);
  --sang-vang:radial-gradient(360px 160px at 90% -30%,rgba(240,180,41,.16),transparent 70%);
  --sang-tim:radial-gradient(360px 160px at 90% -30%,rgba(124,92,255,.20),transparent 70%);
  --vang-grad:linear-gradient(180deg,var(--amber-2) 0%,var(--amber) 100%);
  /* 11/09/2026 — BỘ MÀU (lib/giaoDien.js ghi đè khối này theo bộ admin chọn). Ba biến cho thứ trước đây
     gõ cứng "trắng mờ" / "đen mờ": kính mờ, kính mờ đậm (hover), và bóng đổ. Bộ sáng lật chúng thành
     đen mờ / bóng nhạt. --phu-anh là lớp tối phủ lên ẢNH/VIDEO — cố ý KHÔNG theo bộ: ảnh lúc nào cũng
     cần chữ trắng đọc được. color-scheme cho ô chọn/thanh cuộn gốc của trình duyệt đi theo tông. */
  --kinh:rgba(255,255,255,.035); --kinh-2:rgba(255,255,255,.06); --bong:rgba(0,0,0,.45);
  --phu-anh:rgba(0,0,0,.55);
  /* --chu-nhan = màu CHỮ nhấn (eyebrow, số ví, link, icon nét). Bộ tối = --amber; bộ SÁNG = --amber-2 (vàng
     đậm) vì vàng tươi trên nền trắng chỉ đạt ~2:1. Nền/viền/nút vẫn dùng --amber như cũ. */
  --chu-nhan:var(--amber);
  /* --amber-sang = ĐIỂM SÁNG của logo (stop đầu radial). Bộ tối = --amber-2; bộ sáng = stop sáng của nút
     (lib/giaoDien.js phát), vì --amber-2 ở bộ sáng là nâu chữ — logo thành đốm nâu, icon đen mất hút. */
  --amber-sang:var(--amber-2);
  color-scheme:dark;
}
.dau-trang{position:sticky;top:0;z-index:40;height:58px;display:flex;align-items:center;gap:14px;padding:0 20px;
  background:linear-gradient(to bottom,color-mix(in srgb, var(--ground) 92%, transparent),color-mix(in srgb, var(--ground) 72%, transparent));backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.dau-trang .nhan-hieu{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.01em;text-decoration:none;color:var(--txt)}
.dau-trang .nhan-hieu .dau{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,var(--amber-sang),var(--amber) 45%,color-mix(in srgb, var(--amber) 70%, var(--ground)));box-shadow:0 5px 14px color-mix(in srgb, var(--amber) 35%, transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.dau-trang .nhan-hieu .dau svg{width:17px;height:17px;fill:var(--on-amber);display:block}
.dau-trang .nhan-hieu b{color:var(--amber-2)}
.dau-trang .gian{flex:1}
.nav-vien{display:flex;gap:4px;margin-left:10px;padding:4px;border-radius:var(--r-full);background:var(--kinh);border:1px solid var(--line)}
.nav-vien a,.nav-vien button{padding:7px 14px;border-radius:var(--r-full);font-size:13.5px;font-weight:500;line-height:1.3;color:var(--dim);
  text-decoration:none;background:none;border:1px solid transparent;font-family:var(--ui);cursor:pointer;transition:color .14s,background .14s}
.nav-vien a:hover,.nav-vien button:hover{color:var(--txt)}
.nav-vien .is-on{background:linear-gradient(180deg,color-mix(in srgb, var(--amber) 22%, transparent),color-mix(in srgb, var(--amber) 8%, transparent));color:var(--amber-2);border-color:var(--am-line)}
.chip-nd{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--kinh);font-size:12.5px;color:var(--dim);white-space:nowrap;text-decoration:none;font-family:var(--ui);cursor:pointer;transition:border-color .14s,color .14s}
.chip-nd:hover{border-color:var(--line-manh);color:var(--txt)}
.chip-nd b{color:var(--txt);font-weight:600}
.chip-nd .ava{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--on-amber);background:var(--vang-grad)}
.chip-nd.vang{border-color:var(--am-line);background:var(--amber-soft);color:var(--amber-2)}
.chip-nd.vang b{color:var(--amber-2)}
.chip-nd svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.o-so{min-width:132px;padding:12px 14px;border-radius:var(--r);background:var(--nen-am-2);border:1px solid var(--line)}
.o-so .so{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1;color:var(--txt)}
.o-so.vang .so{color:var(--amber-2)}
.o-so .nhan{font-size:11.5px;color:var(--faint);margin-top:4px}
.tieu-muc{display:flex;align-items:center;gap:12px;margin:30px 0 12px}
.tieu-muc h2{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhan);margin:0;white-space:nowrap}
.tieu-muc i{flex:1;height:1px;background:linear-gradient(90deg,var(--line-manh),transparent)}
.tieu-muc .dem{font-family:var(--mono);font-size:11px;color:var(--faint)}
.the-sang{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--nen-am);transition:transform .16s,border-color .16s}
.the-sang::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--sang-vang)}
.the-sang.tim::after{background:var(--sang-tim)}
.the-sang:hover{transform:translateY(-3px);border-color:var(--am-line)}
.nut-vang{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--r);font-family:var(--ui);font-weight:700;color:var(--on-amber);
  background:var(--vang-grad);box-shadow:0 12px 30px color-mix(in srgb, var(--amber) 32%, transparent),inset 0 1px 0 rgba(255,255,255,.5);cursor:pointer;transition:transform .14s,box-shadow .16s}
.nut-vang:hover{transform:translateY(-1px)}
.nut-vang:disabled{opacity:.6;cursor:default;transform:none}
.nut-vang .gia{font-family:var(--mono);font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--r-full);background:color-mix(in srgb, var(--on-amber) 18%, transparent)}
.tab-vien{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-full);background:var(--kinh);border:1px solid var(--line)}
.tab-vien button,.tab-vien span,.tab-vien a{padding:6px 13px;border-radius:var(--r-full);font-size:12.5px;color:var(--dim);background:none;border:1px solid transparent;font-family:var(--ui);cursor:pointer;text-decoration:none;line-height:1.3}
.tab-vien .is-on{background:linear-gradient(180deg,color-mix(in srgb, var(--amber) 22%, transparent),color-mix(in srgb, var(--amber) 8%, transparent));color:var(--amber-2);border-color:var(--am-line)}
.trong-sang{padding:34px;border-radius:var(--r-lg);border:1px dashed var(--line-manh);background:var(--sunk);text-align:center;color:var(--dim)}
.trong-sang .to{width:54px;height:54px;border-radius:16px;margin:0 auto 12px;display:grid;place-items:center;background:var(--amber-soft);border:1px solid var(--am-line);color:var(--amber-2)}
.trong-sang .to svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.trong-sang b{display:block;color:var(--txt);font-size:15px;margin-bottom:4px}
.trong-sang kbd{font-family:var(--mono);font-size:10.5px;padding:3px 7px;border:1px solid var(--line-manh);border-radius:6px;color:var(--faint)}


/* ══ THANG KHOẢNG CÁCH + THANG CỠ CHỮ (21/09/2026) ══
   Trước khối này cả xưởng KHÔNG có token nào cho khoảng cách: đếm được 12 giá trị gap/padding rời
   rạc từ 1px tới 14px, và 19 cỡ chữ rời rạc từ 8.5px tới 30px trong style.css. Mỗi lần thêm một
   khối mới là lại bịa ra một con số gần-gần số cũ, nên nhìn tổng thể thấy lệch mà không chỉ ra
   được chỗ nào sai. Chín nấc dưới đây phủ hết nhu cầu; chỗ nào cần số lạ thì là dấu hiệu bố cục
   sai, không phải thiếu nấc.
   Giữ nguyên MỌI biến cũ — đây chỉ là THÊM, chưa đụng vào chỗ nào đang gõ số thẳng. */
:root{
  /* Nhân đôi dần: 4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 → 96. Hai nấc cuối dành cho khoảng cách
     GIỮA CÁC PHẦN của trang giới thiệu, không dùng trong thẻ. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  /* Cỡ chữ. --fs-xs/--fs-sm là nhãn IN HOA (--mono), --fs-md là chữ thường, từ --fs-xl trở lên là
     tiêu đề (--disp). Bước nhảy to dần để tiêu đề và chữ thường không bao giờ nhìn ngang cỡ nhau. */
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px;
  --fs-2xl:26px; --fs-3xl:34px; --fs-4xl:46px; --fs-5xl:60px;
  /* Hai nấc giãn dòng. Tiêu đề chữ to mà giãn 1.6 thì rời rạc; chữ thường mà 1.2 thì đọc mỏi mắt. */
  --lh-chat:1.2; --lh-thoang:1.6;
  /* Bề rộng tối đa của MỘT khối nội dung trên desktop. Quá 1200px thì mắt phải quét ngang quá xa,
     dòng chữ dài đọc bị lạc dòng. Màn 1440px còn lề hai bên cho thoáng. */
  --do-rong:1200px;
}

/* ══ TẦNG ĐIỆN THOẠI (≤430px) ══
   Tệp này trước đây có 0 @media, mà breakpoint thấp nhất của cả web là 600px — nghĩa là từ 430px
   trở xuống (iPhone dọc là 375–430px) các lớp dùng chung bên trên chạy nguyên kích thước desktop
   và tràn ngang. Khối này chỉ chỉnh KÍCH THƯỚC, không đổi màu và không đổi tên lớp, nên JS và bộ
   test màu không bị động tới. */
@media (max-width:430px){
  /* Lưới an toàn: chỉ cần MỘT khối con lỡ rộng hơn màn là cả trang kéo ngang được, và người dùng
     điện thoại vuốt trúng là trang lệch hẳn sang một bên, tưởng web hỏng. Chặn ở gốc.
     PHẢI là "clip", KHÔNG được để mỗi "hidden": hidden biến thẻ gốc thành một khung CUỘN, mà
     position:sticky chỉ bám được vào khung cuộn gần nhất — đo thật trên Trang tổng ở 375px:
     với hidden thì .dau-trang trôi lên mất (top = -700 khi cuộn 700), với clip thì dính top:0.
     Dòng "hidden" đứng trước chỉ để trình duyệt cũ chưa biết clip vẫn chặn được kéo ngang. */
  html,body{overflow-x:hidden;overflow-x:clip}

  /* Thanh đầu trang: cao cứng 58px + flex KHÔNG wrap + 6 chip nowrap = tràn ngang MỌI trang. Cho
     nó xuống dòng và tự cao theo nội dung; padding thu về một nấc để lấy thêm chỗ cho chip. */
  .dau-trang{height:auto;flex-wrap:wrap;padding:var(--sp-2) var(--sp-3);
    row-gap:var(--sp-2);gap:var(--sp-2)}
  .dau-trang .nhan-hieu{font-size:var(--fs-lg)}
  /* .gian là khoảng đệm đẩy nhóm bên phải ra mép. Mặc định flex:1 nó vẫn giữ bề rộng cơ sở và
     đẩy chip sang tràn; cho nó co được về 0 thì chip xuống dòng gọn gàng thay vì lòi ra ngoài. */
  .dau-trang .gian{flex:1 1 0;min-width:0}

  /* Menu viên: 4 mục × padding 7px 14px cần ~380px, ở 375px là tràn. Không cắt bớt mục (mục nào
     cũng là một trang), thay vào đó cho CUỘN NGANG trong chính nó — vuốt được, không thấy thanh
     cuộn xấu. margin-left:0 vì trên điện thoại nó đứng đầu dòng riêng chứ không nằm cạnh logo. */
  .nav-vien{margin-left:0;max-width:100%;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-vien::-webkit-scrollbar{display:none}
  .nav-vien a,.nav-vien button{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);flex:0 0 auto}

  /* Chip người dùng và ô ví: bớt padding + chữ một nấc để hai ba cái đứng cùng dòng vẫn vừa. Con
     số ví vẫn phải là thứ to nhất trong ô, nên chỉ hạ từ 16px xuống --fs-md chứ không nhỏ hơn. */
  .chip-nd{height:28px;padding:0 var(--sp-2);font-size:var(--fs-xs)}
  .chip-nd .ava{width:19px;height:19px}
  .vi-chip{padding:var(--sp-1) var(--sp-2);gap:var(--sp-1)}
  .vi-chip b{font-size:var(--fs-md)}
  .vi-chip.nhat b{font-size:var(--fs-sm)}

  /* Ô số: min-width:132px nên hai ô cạnh nhau ở 375px là chắc chắn tràn. Bỏ sàn đi, để lưới cha
     quyết định bề rộng. */
  .o-so{min-width:0;padding:var(--sp-3)}
  .o-so .so{font-size:var(--fs-xl)}

  /* Tiêu đề mục: 30px cách trên là nhịp của desktop; trên màn cao 800px nó ăn mất một phần tư
     màn hình mỗi lần. */
  .tieu-muc{margin-top:var(--sp-5);gap:var(--sp-2)}

  /* Nút vàng: 44px là cỡ chạm tối thiểu ngón tay với tới chắc chắn. Nút chính mà bấm trượt thì
     khách bỏ luôn, không bấm lại. */
  .nut-vang{min-height:44px;padding-left:var(--sp-4);padding-right:var(--sp-4)}

  /* Bảng hỏi lại: lớp phủ để padding 20px, ở 375px còn 335px cho bảng — đủ, nhưng bảng tự padding
     20px nữa thì chữ chỉ còn ~295px. Thu cả hai lại một nấc. */
  .lopPhu{padding:var(--sp-3)}
  .bangNoi{padding:var(--sp-4)}

  /* Ô trống: 34px padding bốn phía trên điện thoại làm cái khung rỗng chiếm gần trọn màn. */
  .trong-sang{padding:var(--sp-5) var(--sp-4)}
}

/* ===== BỘ MÀU ĐANG DÙNG: trang (Trắng) — do Quản trị › Giao diện chọn, phát từ lib/giaoDien.js ===== */
:root{--ground:#F7F6F2;--panel:#FFFFFF;--raise:#EEECE6;--sunk:#F3F2ED;--txt:#1B1916;--dim:#5E5951;--faint:#6F6961;--line:rgba(0,0,0,.09);--line-soft:rgba(0,0,0,.05);--line-manh:rgba(0,0,0,.17);--line-2:rgba(0,0,0,.13);--amber:#E0A61C;--amber-2:#8A5C02;--on-amber:#221A00;--chu-nhan:#8A5C02;--amber-soft:color-mix(in srgb, var(--amber) 10%, transparent);--amber-line:color-mix(in srgb, var(--amber) 34%, transparent);--am-line:color-mix(in srgb, var(--amber) 30%, transparent);--purple:#6D4AFF;--purple-soft:color-mix(in srgb, var(--purple) 12%, transparent);--tim-line:color-mix(in srgb, var(--purple) 34%, transparent);--blue:#1F6FD1;--green:#187030;--red:#D3372B;--panel-grad:linear-gradient(180deg,#FFFFFF 0%,#F8F6F0 100%);--nen-am:linear-gradient(160deg,#FFFFFF 0%,#F8F6F0 65%);--nen-am-2:linear-gradient(180deg,#FFFFFF 0%,#F8F6F0 100%);--amber-grad:linear-gradient(180deg,#F7CB5C 0%,#E9AE23 100%);--vang-grad:linear-gradient(180deg,#F7CB5C 0%,#E9AE23 100%);--amber-sang:#F7CB5C;--amber-glow:0 6px 24px color-mix(in srgb, var(--amber) 35%, transparent);--bong:rgba(20,16,8,.14);--card-shadow:0 1px 0 rgba(0,0,0,.03) inset,0 8px 30px var(--bong);--sang-vang:radial-gradient(360px 160px at 90% -30%,color-mix(in srgb, var(--amber) 16%, transparent),transparent 70%);--sang-tim:radial-gradient(360px 160px at 90% -30%,color-mix(in srgb, var(--purple) 20%, transparent),transparent 70%);--nen-sang:radial-gradient(900px 500px at 10% -10%,color-mix(in srgb, var(--amber) 13%, transparent),transparent 60%),radial-gradient(700px 500px at 100% 10%,color-mix(in srgb, var(--purple) 11%, transparent),transparent 60%);--kinh:rgba(0,0,0,.035);--kinh-2:rgba(0,0,0,.06);color-scheme:light}