/* ui/_chung/kieu.css — FILE KIỂU DUY NHẤT của mọi màn hình app kho Tuệ Hải.
   Luật thẩm mỹ chung (PROJECT.md mục 11, "Luật thẩm mỹ", Bảo chốt 21/09/2026):
   gọn, sáng, chắc tay như KiotViet — nền xám rất nhạt, thẻ trắng bo góc, tiêu đề
   to đậm, MỘT màu nhấn, nhãn trạng thái dạng viên thuốc, không gradient, không
   bóng nặng, không hình trang trí.

   ÉP, KHÔNG DẶN: mọi mã màu, cỡ chữ, khoảng cách, bo góc nằm ở đây, dưới :root.
   Màn hình chỉ được dùng var(--…). Test logic/kieu-giao-dien.test.ts báo đỏ nếu
   file nào trong ui/ tự viết #màu, rgb(), font-size:<số>, padding/margin/gap:<số px>.
   Cũng test đó tính tương phản WCAG cho các cặp ghi ở CAP_TUONG_PHAN bên dưới.

   Màu nhấn #02519c ĐO từ website công ty 21/09/2026: trang chủ tuehaiduong.com,
   <style id="custom-css"> dòng 166: :root{--primary-color:#02519c;--fs-color-primary:#02519c}
   — dùng cho nền thanh đầu trang (.header-bg-color), tiêu đề mục (.section-title span),
   nút/liên kết của theme Flatsome. Tương phản: chữ trắng trên nền #02519c 7,90:1;
   chữ #02519c trên trắng 7,90:1 — đạt AA (≥4,5), KHÔNG cần sắc đậm hơn; --mau-nhan-dam
   chỉ dùng cho trạng thái đang bấm. Logo (Logo.svg cùng site): đỏ #ED1C24 (chữ), vàng
   #FFDE17 (đĩa nền), xanh nước #00B3F0/#8ED8F8, lá #1D7242 — KHÔNG dùng làm màu nhấn:
   đỏ trùng "lỗi", lá trùng "xong", vàng chữ trắng rớt (1,34:1). Màu trạng thái vì thế
   không phải đổi gì: nhấn xanh dương, xong xanh lá, lỗi đỏ, chờ vàng cam — cách nhau rõ. */
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/be-vietnam-pro-400-vietnamese.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: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/be-vietnam-pro-400-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;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/be-vietnam-pro-600-vietnamese.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: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/be-vietnam-pro-600-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;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/be-vietnam-pro-700-vietnamese.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: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/be-vietnam-pro-700-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 {
  /* ---- MÀU (chỉ chỗ này được có mã màu) ---- */
  --mau-nhan: #02519c;          /* nhấn duy nhất — nút chính, liên kết, viền ô đang gõ */
  --mau-nhan-dam: #023f7a;      /* nút chính lúc đang bấm */
  --mau-nhan-nen: #e8f0f9;      /* nút phụ, hàng đang chọn */
  --mau-nhan-vien: #dbeafe;     /* viên "nhấn" */
  --nen: #f3f4f6;               /* nền trang, xám rất nhạt */
  --the: #ffffff;               /* thẻ */
  --vien: #d1d5db;              /* viền ô nhập, viền thẻ khi cần */
  --vien-nhat: #e5e7eb;         /* kẻ dòng */
  --chu: #111827;               /* chữ chính, gần đen */
  --chu-phu: #475467;           /* chữ phụ — vẫn ≥7:1 trên trắng, đọc được trong kho tối */
  --chu-goi-y: #5f6b7a;         /* chữ gợi ý trong ô nhập (placeholder) — 4,8:1 trên trắng; không để trình duyệt tự chọn */
  --chu-tren-nhan: #ffffff;
  --lop-phu: rgba(17, 24, 39, 0.72);  /* màn mờ sau bảng trượt + dải chữ trên khung camera: đè lên nền TRẮNG vẫn ≥4,5:1 với chữ trắng */
  /* trạng thái — LUÔN đi kèm chữ, không bao giờ màu nói một mình */
  --xong: #166534;      --xong-nen: #dcfce7;   --xong-dam: #1b7f3b;   /* xanh lá: xong / đọc được */
  --loi: #b3261e;       --loi-nen: #fee2e2;    --loi-chu-nen: #991b1b; /* đỏ: lỗi / chặn */
  --cho: #8a5a00;       --cho-nen: #fef3c7;                           /* vàng cam: đang chờ / cảnh báo mềm */
  --tat-chu: #4b5563;   --tat-nen: #e5e7eb;                           /* nút bị khóa */
  --khung-quet: #111827;                                              /* nền khung camera */

  /* ---- CHỮ ---- */
  --ho-chu: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --chu-thuong: 17px;     /* tối thiểu cho mọi chữ */
  --chu-lon: 20px;
  --chu-tieu-de: 24px;
  --chu-so: 26px;         /* số gói, số dòng */
  --chu-ma: 22px;         /* mã thùng — 16 ký tự phải vừa MỘT dòng trên máy 375px kể cả trong dòng lỗi có viền (đo 21/09: 24px bị gãy) */
  --chu-so-lon: 34px;     /* bàn phím số, số đang gõ */
  --dong: 1.4;            /* khoảng cách dòng — dấu chồng ẫ ệ ỗ không bị cắt */
  --dam-thuong: 400; --dam-vua: 600; --dam-dam: 700;

  /* ---- KHOẢNG CÁCH — bội số 8px ---- */
  --k1: 8px; --k2: 16px; --k3: 24px; --k4: 32px; --k5: 40px; --k6: 48px;

  /* ---- BO GÓC ---- */
  --bo-the: 16px; --bo-nut: 14px; --bo-o: 12px; --bo-vien: 999px;

  /* ---- KÍCH THƯỚC ---- */
  --nut-cao: 56px; --nut-cao-lon: 64px; --o-cao: 56px; --bt-co: 24px; --bt-co-lon: 28px;
  --vien-day: 2px; --vien-manh: 1px;
  --bong-nhe: 0 1px 2px rgba(17, 24, 39, 0.06);
  --cham: 120ms;  /* thời lượng chuyển động — chỉ để báo kết quả */
}

/* ---- NỀN CHUNG ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--nen); color: var(--chu); }
body {
  font-family: var(--ho-chu); font-size: var(--chu-thuong); line-height: var(--dong);
  font-weight: var(--dam-thuong); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--chu-tieu-de); font-weight: var(--dam-dam); line-height: var(--dong); }
h2 { font-size: var(--chu-lon); font-weight: var(--dam-dam); }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: var(--chu); }
.bt { width: var(--bt-co); height: var(--bt-co); flex: 0 0 auto; vertical-align: middle; }
.bt.lon { width: var(--bt-co-lon); height: var(--bt-co-lon); }

/* ---- THẺ ---- */
.the { background: var(--the); border-radius: var(--bo-the); padding: var(--k2); box-shadow: var(--bong-nhe); }
.the + .the { margin-top: var(--k2); }
.chu-phu { color: var(--chu-phu); }
.dam { font-weight: var(--dam-dam); } .vua { font-weight: var(--dam-vua); }
.so { font-size: var(--chu-so); font-weight: var(--dam-dam); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.so-lon { font-size: var(--chu-so-lon); font-weight: var(--dam-dam); font-variant-numeric: tabular-nums; }
.ma { font-variant-numeric: tabular-nums; font-weight: var(--dam-dam); font-size: var(--chu-ma); overflow-wrap: anywhere; letter-spacing: 0; }
.xuong-dong { overflow-wrap: anywhere; }  /* tên sản phẩm dài thì xuống dòng, không "…" */

/* ---- NÚT ---- */
.nut {
  display: flex; align-items: center; justify-content: center; gap: var(--k1);
  width: 100%; min-height: var(--nut-cao); padding: 0 var(--k2);
  border: 0; border-radius: var(--bo-nut); cursor: pointer;
  font-size: var(--chu-lon); font-weight: var(--dam-dam); line-height: var(--dong);
  background: var(--mau-nhan); color: var(--chu-tren-nhan); text-align: center;
}
.nut:active { background: var(--mau-nhan-dam); }
.nut.lon { min-height: var(--nut-cao-lon); }
.nut.phu { background: var(--mau-nhan-nen); color: var(--mau-nhan); }
.nut.phu:active { background: var(--mau-nhan-vien); }
.nut.nguy { background: var(--loi-nen); color: var(--loi-chu-nen); }
.nut.nguy:active { background: var(--loi); color: var(--chu-tren-nhan); }
.nut.xong { background: var(--xong-dam); color: var(--chu-tren-nhan); }
.nut:disabled, .nut[aria-disabled="true"] { background: var(--tat-nen); color: var(--tat-chu); cursor: not-allowed; }
.nut.nho { min-height: var(--k6); font-size: var(--chu-thuong); width: auto; padding: 0 var(--k2); }
.nut.trang { background: var(--the); color: var(--chu); border: var(--vien-manh) solid var(--vien); }

/* ---- VIÊN TRẠNG THÁI (nền nhạt, chữ đậm, luôn có chữ) ---- */
.vien {
  display: inline-flex; align-items: center; gap: var(--k1);
  padding: 0 var(--k2); min-height: var(--k5); border-radius: var(--bo-vien);
  font-size: var(--chu-thuong); font-weight: var(--dam-dam); line-height: var(--dong); white-space: nowrap;
}
.vien.xong { background: var(--xong-nen); color: var(--xong); }
.vien.loi  { background: var(--loi-nen);  color: var(--loi-chu-nen); }
.vien.cho  { background: var(--cho-nen);  color: var(--cho); }
.vien.nhan { background: var(--mau-nhan-vien); color: var(--mau-nhan); }
.vien.xam  { background: var(--tat-nen); color: var(--tat-chu); }

/* ---- Ô NHẬP ---- */
.o {
  width: 100%; min-height: var(--o-cao); padding: 0 var(--k2);
  border: var(--vien-day) solid var(--vien); border-radius: var(--bo-o); background: var(--the);
  font-size: var(--chu-lon); line-height: var(--dong);
}
.o:focus { outline: none; border-color: var(--mau-nhan); }
.o::placeholder { color: var(--chu-goi-y); opacity: 1; }
.o.ma { font-size: var(--chu-ma); text-transform: uppercase; }
.nhan-o { display: block; color: var(--chu-phu); font-weight: var(--dam-vua); margin-bottom: var(--k1); }  /* nhãn trên ô nhập (khác .vien.nhan = viên màu nhấn) */
.o-loi { color: var(--loi); font-weight: var(--dam-vua); min-height: var(--k3); margin-top: var(--k1); }

/* ---- DÒNG DANH SÁCH ---- */
.hang { display: flex; align-items: center; gap: var(--k2); padding: var(--k2) 0; border-top: var(--vien-manh) solid var(--vien-nhat); }
.hang:first-child { border-top: 0; }
.hang.loi { border: var(--vien-day) solid var(--loi); border-radius: var(--bo-o); padding: var(--k2) var(--k1); background: var(--loi-nen); }
.hang .noi-dung { flex: 1 1 auto; min-width: 0; }
.hang .so { text-align: right; flex: 0 0 auto; }

/* ---- BẢNG TRƯỢT TỪ DƯỚI (không vuốt — chỉ bấm) ---- */
.lop-phu { position: fixed; inset: 0; background: var(--lop-phu); display: none; z-index: 20; }
.lop-phu.mo { display: block; }
.bang-truot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; display: none;
  background: var(--the); border-radius: var(--bo-the) var(--bo-the) 0 0;
  padding: var(--k2) var(--k2) calc(env(safe-area-inset-bottom) + var(--k2)); max-height: 92vh; overflow: auto;
}
.bang-truot.mo { display: block; }
.bang-truot .dau { display: flex; align-items: center; justify-content: space-between; gap: var(--k2); margin-bottom: var(--k2); }
.cach-xa { height: var(--k4); }  /* khoảng trống bắt buộc giữa "Xác nhận" và "Huỷ" (luật 2) */

/* ---- BÀN PHÍM SỐ TO ---- */
.ban-phim { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k1); }
.ban-phim .nut { min-height: var(--nut-cao-lon); font-size: var(--chu-so-lon); background: var(--mau-nhan-nen); color: var(--chu); }
.ban-phim .nut:active { background: var(--mau-nhan-vien); }
.so-dang-go { text-align: center; min-height: var(--nut-cao-lon); display: flex; align-items: center; justify-content: center; border: var(--vien-day) solid var(--mau-nhan); border-radius: var(--bo-o); margin-bottom: var(--k2); }

/* ---- CHUYỂN ĐỘNG TỐI THIỂU: chỉ báo kết quả ---- */
@keyframes loe-xong { from { background: var(--xong-nen); } to { background: var(--the); } }
.loe-xong { animation: loe-xong calc(var(--cham) * 5) ease-out; }
@keyframes loe-loi { from { background: var(--loi-nen); } to { background: var(--the); } }
.loe-loi { animation: loe-loi calc(var(--cham) * 5) ease-out; }
@media (prefers-reduced-motion: reduce) { .loe-xong, .loe-loi { animation: none; } }

/* ---- TIỆN ÍCH BỐ CỤC (chỉ khoảng cách bằng token) ---- */
.hang-ngang { display: flex; align-items: center; gap: var(--k2); }
.cot { display: flex; flex-direction: column; gap: var(--k2); }
.cot-1 { display: flex; flex-direction: column; gap: var(--k1); }
.gian { flex: 1 1 auto; min-width: 0; }
.an { display: none !important; }
.canh-giua { text-align: center; }
.chi-doc { color: var(--chu-phu); }