/* 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 (`docs/du-an/giao-dien.md`, "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 */
  /* hướng Long Châu (Bảo chọn 21/09/2026): mảng đầu trang màu nhấn, chuyển sắc NHẸ cùng tông — hai đầu là hai token có test tương phản */
  --dau-trang-nen: linear-gradient(180deg, #02519c 0%, #023f7a 100%);
  --lop-sang: rgba(255, 255, 255, 0.16);      /* nền chip trên mảng màu (đè lên --mau-nhan, chữ trắng vẫn ≥4,5:1 — test "lop-sang@mau-nhan") */
  --lop-sang-vien: rgba(255, 255, 255, 0.45); /* viền chip trên mảng màu */
  /* 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Ữ — phân cấp bằng ĐỘ ĐẬM và MÀU, không bằng cỡ; chỉ con số làm việc mới to
     (Bảo cầm thử iPhone 21/09/2026: "nhiều chữ quá, chữ to quá" → hạ từ 17/20/24 xuống 16/18/20) ---- */
  --ho-chu: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --chu-thuong: 16px;     /* chữ thường (15–16) */
  --chu-nho: 14px;        /* nhãn phụ, viên trạng thái, chip (13–14, vẫn AA) */
  --chu-lon: 18px;        /* tiêu đề mục */
  --chu-tieu-de: 20px;    /* tiêu đề màn */
  --chu-so: 24px;         /* số gói, số dòng — con số làm việc */
  --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 */
  --chu-so-lon: 32px;     /* 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; --k0 = nửa bước 4px chỉ cho khoảng TRONG một dòng (chip, biểu tượng–chữ) ---- */
  --k0: 4px; --k1: 8px; --k2: 16px; --k3: 24px; --k4: 32px; --k5: 40px; --k6: 48px;

  /* ---- BO GÓC ---- */
  --bo-the: 12px; --bo-nut: 12px; --bo-o: 12px; --bo-vien: 999px;
  --bo-dong: 16px;   /* thẻ dòng (hướng Long Châu) */
  --bo-lon: 24px;    /* tấm nền sáng trồi lên đè mép mảng màu */

  /* ---- KÍCH THƯỚC — nút chính 48px (≥ 44pt chuẩn bấm iPhone) ---- */
  --nut-cao: 48px; --nut-cao-lon: 56px; --o-cao: 48px; --chip-cao: 32px; --vien-cao: 28px; --bt-co: 20px; --bt-co-lon: 24px;
  --bt-co-rat-lon: 64px;   /* biểu tượng màn trống */
  --fab-co: 64px;          /* nút tròn nổi Quét */
  --vien-day: 2px; --vien-manh: 1px;
  --bong-nhe: 0 1px 2px rgba(17, 24, 39, 0.06);
  --bong-mem: 0 2px 8px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);   /* thẻ dòng — mềm, không nặng */
  --bong-noi: 0 6px 16px rgba(2, 81, 156, 0.35);                                   /* nút tròn nổi */
  --bong-loe: 0 0 0 2px #1b7f3b;   /* viền xanh của dòng vừa thêm (= --xong-dam) — phải thấy được trong kho tối */
  --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); }
.nho { font-size: var(--chu-nho); }
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); }
.bt.rat-lon { width: var(--bt-co-rat-lon); height: var(--bt-co-rat-lon); }

/* ---- THẺ ---- */
.the { background: var(--the); border-radius: var(--bo-the); padding: var(--k1) var(--k2); box-shadow: var(--bong-nhe); }
.the + .the { margin-top: var(--k1); }
.the-dong { background: var(--the); border-radius: var(--bo-dong); padding: var(--k1) var(--k2); box-shadow: var(--bong-mem); }  /* mỗi dòng một thẻ có chiều sâu */
.the-dong + .the-dong { margin-top: var(--k1); }

/* ---- MẢNG ĐẦU TRANG + TẤM NỀN TRỒI LÊN (hướng Long Châu) ---- */
.dau-trang-nhan { background: var(--dau-trang-nen); color: var(--chu-tren-nhan); padding: calc(env(safe-area-inset-top) + var(--k2)) var(--k2) calc(var(--k3) + var(--k2)); }
.dau-trang-nhan h1 { color: var(--chu-tren-nhan); }
.tam-nen { background: var(--nen); border-radius: var(--bo-lon) var(--bo-lon) 0 0; margin-top: calc(var(--k3) * -1); padding: var(--k2) var(--k2) 0; position: relative; }
.chip.tren-nhan { background: var(--lop-sang); border-color: var(--lop-sang-vien); color: var(--chu-tren-nhan); }

/* ---- Ô TÌM KIẾM DẠNG VIÊN: ô dài + nút biểu tượng bên trong đầu phải ---- */
.o-tim { display: flex; align-items: center; gap: var(--k0); min-height: var(--o-cao); padding: 0 var(--k0) 0 var(--k2); background: var(--the); border: var(--vien-manh) solid var(--vien); border-radius: var(--bo-vien); box-shadow: var(--bong-nhe); }
.o-tim:focus-within { border-color: var(--mau-nhan); }
.o-tim input { flex: 1 1 auto; min-width: 0; border: 0; background: none; min-height: var(--o-cao); padding: 0; font-size: var(--chu-ma); font-weight: var(--dam-dam); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.o-tim input:focus { outline: none; }
.o-tim input::placeholder { text-transform: none; font-size: var(--chu-thuong); font-weight: var(--dam-thuong); color: var(--chu-goi-y); }
.o-tim .nut-bt { display: flex; align-items: center; justify-content: center; width: var(--k5); height: var(--k5); border: 0; border-radius: var(--bo-vien); background: var(--mau-nhan-nen); color: var(--mau-nhan); cursor: pointer; flex: 0 0 auto; }
.o-tim .nut-bt.dac { background: var(--mau-nhan); color: var(--chu-tren-nhan); }
.o-tim .nut-bt:active { background: var(--mau-nhan-vien); }

/* ---- NÚT TRÒN NỔI (Quét) — vùng ngón cái, khác hình và cách xa nút Gửi (luật 2) ---- */
.fab { position: absolute; right: var(--k2); top: calc((var(--fab-co) + var(--k2)) * -1); width: var(--fab-co); height: var(--fab-co); border: 0; border-radius: var(--bo-vien); background: var(--mau-nhan); color: var(--chu-tren-nhan); box-shadow: var(--bong-noi); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fab:active { background: var(--mau-nhan-dam); }
.fab.dang-bat { background: var(--the); color: var(--mau-nhan); border: var(--vien-day) solid var(--mau-nhan); }
.fab .bt { width: var(--bt-co-lon); height: var(--bt-co-lon); }
.fab:disabled { background: var(--tat-nen); color: var(--tat-chu); box-shadow: none; }

/* ---- MÀN TRỐNG ---- */
.man-trong { display: flex; flex-direction: column; align-items: center; gap: var(--k1); padding: var(--k4) var(--k2); color: var(--chu-phu); text-align: center; }
.man-trong .bt { color: var(--mau-nhan); }
.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 — mỗi màn chỉ MỘT nút đặc màu nhấn; nút phụ dạng viền (.vien-nut) hoặc nền nhạt (.phu) ---- */
.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; white-space: nowrap;
  font-size: var(--chu-thuong); font-weight: var(--dam-vua); 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); font-weight: var(--dam-dam); }
.nut.phu { background: var(--mau-nhan-nen); color: var(--mau-nhan); }
.nut.phu:active { background: var(--mau-nhan-vien); }
.nut.vien-nut { background: var(--the); color: var(--mau-nhan); border: var(--vien-manh) solid var(--vien); }
.nut.vien-nut:active { background: var(--mau-nhan-nen); }
.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(--o-cao); width: auto; padding: 0 var(--k2); }
.nut.vuong { width: var(--o-cao); min-width: var(--o-cao); padding: 0; flex: 0 0 auto; }
.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ữ) và CHIP (viền, bấm được) ---- */
.vien {
  display: inline-flex; align-items: center; gap: var(--k0);
  padding: 0 var(--k1); min-height: var(--vien-cao); border-radius: var(--bo-vien);
  font-size: var(--chu-nho); font-weight: var(--dam-vua); line-height: var(--dong); white-space: nowrap;
}
.chip {
  display: inline-flex; align-items: center; gap: var(--k0); padding: 0 var(--k1); min-height: var(--chip-cao);
  border: var(--vien-manh) solid var(--vien); border-radius: var(--bo-vien); background: var(--the);
  font-size: var(--chu-nho); font-weight: var(--dam-vua); color: var(--chu); white-space: nowrap; cursor: pointer;
}
.chip.nhan { border-color: var(--mau-nhan); color: var(--mau-nhan); background: var(--mau-nhan-nen); }
/* Chip cảnh báo ĐẶT TRÊN MẢNG MÀU đầu trang (ngày lùi). Không tô chữ cảnh báo thẳng lên nền xanh — đo 22/09/2026:
   chữ --cho trên --mau-nhan chỉ 1,33:1, trên --mau-nhan-dam 1,78:1, rớt AA nặng. Viên nền nhạt chữ đậm: 5,32:1;
   mảng viên so với nền xanh 7,09–9,46 nên nổi rõ (ngưỡng 3:1 cho thành phần không phải chữ). */
.chip.canh-bao { background: var(--cho-nen); border-color: var(--cho); color: var(--cho); font-weight: var(--dam-dam); }
.chip .bt { width: var(--chu-nho); height: var(--chu-nho); }
.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-manh) solid var(--vien); border-radius: var(--bo-o); background: var(--the);
  font-size: var(--chu-thuong); 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-size: var(--chu-nho); font-weight: var(--dam-vua); margin-bottom: var(--k0); }  /* nhãn trên ô nhập (khác .vien.nhan = viên màu nhấn) */
.o-loi { color: var(--loi); font-size: var(--chu-nho); font-weight: var(--dam-vua); min-height: var(--k3); margin-top: var(--k0); }

/* ---- DÒNG DANH SÁCH — thẻ thấp, gọn ---- */
.hang { display: flex; align-items: center; gap: var(--k1); padding: var(--k1) 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(--k1); background: var(--loi-nen); }
.hang .noi-dung { flex: 1 1 auto; min-width: 0; }
.hang .dong-tren, .hang .dong-duoi { display: flex; align-items: center; justify-content: space-between; gap: var(--k1); }
.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(--k1); }
.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Ố ---- */
.ban-phim { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k1); }
.ban-phim .nut { min-height: var(--nut-cao); font-size: var(--chu-so); font-weight: var(--dam-dam); 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(--k1); }

/* ---- CHUYỂN ĐỘNG TỐI THIỂU: chỉ báo kết quả ---- */
/* dòng vừa thêm: GIỮ nền xanh + viền xanh đậm ~0,8 s rồi tan (tổng 1,2 s). Bản đầu tan dần 600 ms từ xanh nhạt sang
   trắng — Bảo cầm thử 22/09/2026 không thấy ("bấm Xuất nguyên thùng không có dấu hiệu gì"). */
@keyframes loe-xong {
  0%, 65% { background: var(--xong-nen); box-shadow: var(--bong-loe); }
  100% { background: var(--the); box-shadow: var(--bong-mem); }
}
.loe-xong { animation: loe-xong calc(var(--cham) * 10) 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(--k1); }
.hang-ngang.rong { gap: var(--k2); }
.cot { display: flex; flex-direction: column; gap: var(--k2); }
.cot-1 { display: flex; flex-direction: column; gap: var(--k1); }
.hang-chip { display: flex; gap: var(--k1); flex-wrap: wrap; }  /* chip xuống dòng, KHÔNG cuộn ngang (luật 1: không vuốt ngang) */
.gian { flex: 1 1 auto; min-width: 0; }
.an { display: none !important; }
.canh-giua { text-align: center; }
.chi-doc { color: var(--chu-phu); }