/* Kiểu dáng phần NỘI DUNG của Dashboard Truy Cập Landing (TRUYCAP).
   Bộ biến màu, đăng nhập, header, thanh dính nằm trong <style> của index.html.

   Chuẩn áp dụng: "Kho liên kết ĐVP" (tong-hop.dvpmarket.com) — mượn KHUNG
   (tỉ lệ, lưới, kết cấu, hiệu ứng, kiểu chữ), KHÔNG mượn màu.
   ⚠ Màu nhận diện của trang này đo trước khi sửa, ghi ở app/MAU-NHAN-DIEN.md.

   LUẬT MÀU chung công cụ nội bộ: đơn sắc teal; màu chỉ để BÁO TRẠNG THÁI
   (xanh = tốt, đỏ = cần xử lý, cam = chú ý). */

/* ══════════════════════════════════════════════════════════════════════════
   LƯỚI — bước 11px, cột chia ĐỀU chứ không auto-fill
   ⚠ Cố ý KHÔNG dùng auto-fill: 4 thẻ mà màn vừa đủ 3 cột thì thẻ thứ 4 đứng
   một mình ở hàng cuối (hàng cuối hụt ô). Chia 4 → 2 → 1 thì luôn kín hàng.
   ══════════════════════════════════════════════════════════════════════════ */
.luoi{display:grid;gap:11px}
.luoi.the4{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr}
.luoi.g2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
.luoi .the{margin-bottom:0}

/* ══════════════════════════════════════════════════════════════════════════
   KHOANG TỐI — gom cụm số quan trọng, đặt trên nếp gấp
   ══════════════════════════════════════════════════════════════════════════ */
.khoang{
  --k1:var(--t900); --k2:var(--t800); --k3:var(--t700);
  --k-vet:rgba(255,255,255,.16);
  --k-nhan:var(--cam);
  --k-bong:0 1px 2px rgba(0,0,0,.16), 0 8px 18px -10px rgba(0,0,0,.5);
  /* 29/08 chiều: ĐÃ GỠ --xanh-toi/--do-toi. Hai biến đó sinh ra để chữ ▲▼ đọc được khi
     thẻ số nằm chìm trong nền tối. Sếp chốt thẻ quay lại NỀN TRẮNG, nên chữ trạng thái
     lại đứng trên nền sáng và dùng thẳng --xanh/--do gốc. Giữ biến chết chỉ tổ khiến
     lượt sau tưởng còn đường nhánh. */
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--k1) 0%,var(--k2) 46%,var(--k3) 100%);
  border-radius:22px;padding:16px 16px 18px;margin-bottom:16px}
.khoang::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(105deg,transparent 30%,#000 100%);
  mask-image:linear-gradient(105deg,transparent 30%,#000 100%)}
.khoang>*{position:relative}

h2.nhom{display:flex;align-items:center;gap:9px;margin:0;color:#fff;
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px;line-height:1.1}
h2.nhom .ic{color:var(--k-nhan)}
h2.nhom .dem{font-size:11px;font-weight:700;letter-spacing:.2px;text-transform:none;
  font-variant-numeric:tabular-nums;background:rgba(255,255,255,.16);
  border-radius:999px;padding:2px 9px}
h2.nhom .ke{flex:1;height:1px;background:linear-gradient(90deg,var(--k-vet),transparent)}
/* ⚠ LỆCH CÓ CHỦ Ý so với chuẩn mục 6 (chuẩn ghi .62). Đo máy 29/08: .62 đặt trên đầu
   SÁNG của gradient (--k3 = #065c69) chỉ được 3,99:1, dưới ngưỡng 4,5:1 mà chính chuẩn
   mục 1A đòi. Hai luật đá nhau thì luật tương phản thắng — chữ đọc không ra thì đẹp
   cũng vô nghĩa. .76 đo được 5,17:1. */
.khoang .nhom-mota{margin:8px 0 0;max-width:70ch;font-size:12.5px;line-height:1.45;
  color:rgba(255,255,255,.76)}
.khoang .luoi{margin-top:12px}

/* ══════════════════════════════════════════════════════════════════════════
   THẺ SỐ LỚN
   ══════════════════════════════════════════════════════════════════════════ */
.so-lon{position:relative;overflow:hidden;background:var(--trang);
  border:1px solid var(--vien);border-radius:15px;padding:13px 14px 14px;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .22s ease,box-shadow .22s ease}
/* Hiệu ứng 4 — vạch gradient 3px trên đỉnh chạy ra khi rê chuột */
.so-lon::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--t600),var(--t500));
  transform:scaleX(0);transform-origin:left;transition:transform .34s ease}
.so-lon:hover{transform:translateY(-4px);box-shadow:0 20px 34px -14px rgba(6,43,51,.32)}
.so-lon:hover::after{transform:scaleX(1)}
.so-lon .dau{display:flex;align-items:center;gap:9px;min-height:34px}
.sico{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(150deg,var(--t600),var(--t800));
  transition:transform .22s ease}
/* Hiệu ứng 3 — icon nhích nghiêng theo thẻ */
.so-lon:hover .sico{transform:scale(1.07) rotate(-4deg)}
.so-lon .nhan{font-size:12px;font-weight:600;line-height:1.3;color:var(--muc2)}
.so-lon .gia-tri{font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.5px;
  color:var(--t700);font-variant-numeric:tabular-nums;margin-top:auto}
.so-lon .phu{font-size:12px;line-height:1.35;color:var(--muc2)}
.so-lon .phu.tang{color:var(--xanh);font-weight:700}
.so-lon .phu.giam{color:var(--do);font-weight:700}
.so-lon.mo{opacity:.62}
.so-lon.mo .gia-tri{font-size:16px;letter-spacing:-.2px;color:var(--muc2);line-height:1.3}

/* Thẻ số nằm TRONG thẻ trắng (khối Liên hệ Facebook): trắng trên trắng thì không
   thấy ranh giới thẻ, nên hạ nền xuống một bậc. */
.the .so-lon{background:var(--nen)}

/* ══ THẺ SỐ NẰM TRONG KHOANG TỐI — SẾP CHỐT LẠI 29/08 CHIỀU ═══════════════
   Bản 18:12 cho thẻ nền rgba(255,255,255,.075). Sếp nhìn bản thật và chỉ ra hai
   lỗi tôi đã không thấy khi soi ảnh của chính mình:
     ① nền thẻ gần trùng nền khoang → bốn cái thẻ không đọc ra là THẺ, chỉ như
        bốn ô chữ trôi trên một mảng tối;
     ② bóng đổ cũng cùng tông với nền → thẻ không nảy lên khỏi nền, bóng thành
        vô hình. Đổ bóng tối trên nền tối là đổ bóng vào chỗ đã tối sẵn.
   Nay theo đúng nếp trang tổng "Kho liên kết ĐVP" (01-Landing-Pages/tong-hop):
   NỀN TRẮNG · mỗi thẻ mang một cặp màu riêng --m/--m2 · icon là chip gradient ·
   và BÓNG ĂN THEO MÀU CỦA CHÍNH THẺ (var(--m)) chứ không theo màu nền.
   Cặp màu do giao-dien.js đặt vào từng thẻ; --m mặc định để thẻ nào chưa gán
   cũng không mất bóng. */
.khoang .so-lon{background:var(--trang);border:0;padding:14px 15px 15px;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 16px 28px -12px var(--m,var(--t500))}
.khoang .so-lon::after{
  background:linear-gradient(90deg,var(--m,var(--t600)),var(--m2,var(--t500)))}
.khoang .so-lon:hover{
  box-shadow:0 2px 5px -1px rgba(0,0,0,.2), 0 22px 36px -12px var(--m,var(--t500))}
.khoang .sico{color:#fff;
  background:linear-gradient(145deg,var(--m,var(--t600)),var(--m2,var(--t800)))}
/* Số chính ăn theo bậc ĐẬM của màu thẻ — cùng một điểm hút mắt với icon, không đẻ
   thêm điểm thứ hai. Nhãn và dòng phụ giữ --muc2 gốc của nền sáng. */
.khoang .so-lon .gia-tri{color:var(--m2,var(--t700))}
/* Thẻ "sắp có": trang tổng làm mờ thẻ khoá bằng nền trắng đục + icon xám, KHÔNG
   dùng opacity. Ở đây bắt buộc phải theo cách đó — opacity .62 trên nền tối sẽ kéo
   thẻ trắng thành xám bẩn, đúng lỗi ① Sếp vừa chỉ. */
/* ⚠ Nền ĐẶC, không dùng trắng-đục. Bản đầu để rgba(255,255,255,.84): trộn với
   gradient tối phía sau ra một màu xám, chữ --muc2 trên đó chỉ còn 4,01:1 — phép
   tương phản bắt được ngay. Nền đục trên nền tối thì độ đọc phụ thuộc thứ nằm SAU
   thẻ, mà thứ đó là gradient nên mỗi chỗ một khác. Dùng --nen là hết phụ thuộc. */
.khoang .so-lon.mo{opacity:1;background:var(--nen);
  box-shadow:0 1px 2px rgba(0,0,0,.18)}
.khoang .so-lon.mo:hover{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.khoang .so-lon.mo .sico{filter:grayscale(1);opacity:.5}
.khoang .so-lon.mo .gia-tri{color:var(--muc2)}

/* ══════════════════════════════════════════════════════════════════════════
   THẺ NỘI DUNG
   ══════════════════════════════════════════════════════════════════════════ */
.the{position:relative;background:var(--trang);border:1px solid var(--vien);
  border-radius:15px;padding:15px 16px 16px;margin-bottom:13px}
.the h3{display:flex;align-items:center;gap:8px;margin:0;
  font-size:14.5px;font-weight:700;letter-spacing:-.2px;line-height:1.25;color:var(--muc)}
.the h3 .ic{color:var(--t600)}
.the .mo-ta{margin:5px 0 0;font-size:12px;line-height:1.35;color:var(--muc2)}
.the>h3+*{margin-top:11px}
.the>.mo-ta+*{margin-top:11px}

/* ══════════════════════════════════════════════════════════════════════════
   BIỂU ĐỒ CỘT (SVG vẽ tay, không thư viện)
   ══════════════════════════════════════════════════════════════════════════ */
.bieu-do{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bieu-do svg{display:block;width:100%;min-width:320px;height:auto}

/* ══════════════════════════════════════════════════════════════════════════
   BẢNG
   ⚠ table-layout:fixed BẮT BUỘC giữ — mọi bảng đang khai <colgroup> theo %.
   ══════════════════════════════════════════════════════════════════════════ */
.cuon{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--vien);border-radius:13px}
table.tc{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12.5px}
table.tc th,table.tc td{padding:7px 8px;text-align:right;vertical-align:top;
  border-bottom:1px solid var(--vien);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.tc th{background:var(--t50);color:var(--t700);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;white-space:normal;vertical-align:bottom}
table.tc th:first-child,table.tc td:first-child{text-align:left}
table.tc td:first-child{font-weight:700;color:var(--muc)}
table.tc tbody tr:last-child td{border-bottom:0}
table.tc tbody tr{transition:background .15s}
table.tc tbody tr:hover{background:var(--t50)}
/* Con trỏ bàn tay CHỈ đặt lên dòng thật sự bấm được. Trước để cho mọi dòng của mọi bảng,
   trong khi chỉ bảng xếp hạng (dòng có data-ma) mới có tai nghe — bảng Facebook và bảng
   ghép mời người ta bấm rồi không xảy ra gì. Codex nêu 29/08. */
table.tc tbody tr[data-ma]{cursor:pointer}
/* ĐƯỜNG VÀO BẰNG BÀN PHÍM. Codex nêu đúng 29/08: cả dòng bảng chỉ có onclick, không có
   thẻ nào hội tụ được, nên ai không dùng chuột thì KHÔNG CÁCH NÀO mở được màn chi tiết —
   mất hẳn một nửa ứng dụng chứ không phải bất tiện.
   Chữa bằng thẻ neo THẬT bọc tên trang chứ không chế tabindex + bộ bắt phím Enter/Space:
   neo có sẵn hội tụ, sẵn Enter, sẵn chuột phải "mở tab mới", sẵn trình đọc màn hình đọc
   ra là đường dẫn — tự chế thì phải làm lại đủ bốn thứ đó mà vẫn thiếu. Đúng một ô dừng
   mỗi dòng, bằng số ô dừng lẽ ra phải có.
   Trông y như cũ: màu và nét chữ thừa kế từ ô, chỉ khi đi bằng bàn phím mới hiện vòng
   hội tụ. Bấm chuột vẫn ăn cả dòng như cũ — onclick của <tr> giữ nguyên. */
table.tc .mo-trang{color:inherit;font:inherit;text-decoration:none;display:block;
  overflow:hidden;text-overflow:ellipsis}
table.tc .mo-trang:focus-visible{outline:2px solid var(--t500);outline-offset:2px;
  border-radius:5px}
table.tc .tot{color:var(--xanh);font-weight:700}
table.tc .xau{color:var(--do);font-weight:700}
table.tc .lang,table.tc tr.lang td{color:var(--muc3)}

/* ══════════════════════════════════════════════════════════════════════════
   THANH NGANG NGUỒN KHÁCH
   ══════════════════════════════════════════════════════════════════════════ */
.day-nguon{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.day-nguon .hang{display:flex;align-items:center;gap:9px}
/* Hai thẻ trong lưới 2 cột dài ngắn khác nhau: «Khách từ đâu tới» chỉ 7 dòng, còn
   «Thiết bị & khu vực» tới 12 dòng. Lưới ép cùng chiều cao nên thẻ ngắn hở đáy —
   đo 29/08: TRỐNG 219px, đúng thứ luật "không để khoảng trống thừa" cấm.
   Cách chữa: cho thân thẻ giãn ra chiếm hết chỗ còn lại, các dòng chia đều theo
   chiều cao thay vì dồn lên trên rồi bỏ trắng đáy. Thẻ DÀI quyết định chiều cao
   dòng nên nó giữ nguyên nét gọn; chỉ thẻ NGẮN nở ra cho kín. minmax(26px,1fr)
   giữ sàn để dòng không bị bóp dẹp khi kỳ xem có ít dữ liệu. */
.luoi.g2>.the{display:flex;flex-direction:column}
.luoi.g2>.the>.day-nguon{flex:1;display:grid;grid-auto-rows:minmax(26px,1fr);
  align-content:stretch}
/* Nhãn XUỐNG DÒNG, không cắt bằng "…". Bản cũ cắt cứng: đo 29/08 thấy
   "Ho Chi Minh City (HCMC)" mất 50px chữ, "Gõ thẳng / lưu sẵn" mất 11px — Sếp đọc
   ảnh chụp là thấy ngay. Rộng thêm 96→118px, tên dài thì tuột xuống dòng 2, thanh
   ray vẫn còn ~300px nên không mất nghĩa. Giữ title= để rê chuột xem tên đầy đủ. */
.day-nguon .nhan{width:118px;flex:none;color:var(--muc);font-weight:500;
  white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.day-nguon .ray{flex:1;height:9px;background:var(--vien);border-radius:5px;overflow:hidden}
.day-nguon .ray i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--t600),var(--t500))}
.day-nguon .so{width:84px;flex:none;text-align:right;font-size:12px;color:var(--muc2);
  font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════════════
   MÁY NHẮC VIỆC
   ══════════════════════════════════════════════════════════════════════════ */
.nhac{background:var(--vang);border-left:3px solid var(--cam);border-radius:13px;
  padding:12px 14px;font-size:13px;color:#6d4a00;line-height:1.6}
.nhac b{color:#4a3200}
.nhac ul{margin:0;padding-left:19px}
.nhac li{margin:4px 0}

/* ══════════════════════════════════════════════════════════════════════════
   CHÚ THÍCH TRUNG THỰC — số nào đo kiểu gì phải tự khai
   ══════════════════════════════════════════════════════════════════════════ */
.that-tha{margin-top:12px;padding:11px 13px;border-radius:12px;font-size:12px;line-height:1.55;
  background:var(--t50);border-left:3px solid var(--t500);color:var(--muc2)}
.that-tha b{color:var(--muc)}

/* ══════════════════════════════════════════════════════════════════════════
   MÀN CHI TIẾT
   ══════════════════════════════════════════════════════════════════════════ */
.duong-ve{margin-bottom:12px}
.duong-ve button{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  padding:0;color:var(--t600);font-weight:700;font-size:13.5px}
.duong-ve button .ic{transition:transform .24s ease}
.duong-ve button:hover{color:var(--t800)}
/* Hiệu ứng 5 — mũi tên trượt 3px về phía "quay lại" */
.duong-ve button:hover .ic{transform:translateX(-3px)}

.tieu-de-trang{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.tieu-de-trang h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--muc)}
.tieu-de-trang .ma{font-size:12px;color:var(--muc3);font-weight:500}
.tieu-de-trang a{display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--t600);text-decoration:none}
.tieu-de-trang a:hover{text-decoration:underline}

.gio-vang{display:flex;align-items:flex-end;gap:3px;height:92px}
/* Cùng bệnh hở đáy như thẻ nguồn, chiều ngược lại: ở màn chi tiết thẻ «Giờ nào đông
   khách» NGẮN hơn thẻ bên cạnh nên hở 64px (đo 29/08). Cho biểu đồ giờ cao lên lấp
   chỗ trống — cột vẽ theo phần trăm nên giãn ra chỉ dễ đọc hơn, không méo tỉ lệ. */
.luoi.g2>.the>.gio-vang{flex:1;height:auto;min-height:92px}
.gio-vang .cot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.gio-vang .cot i{display:block;min-height:1px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--t500),var(--t700))}
.gio-vang-nhan{display:flex;gap:3px;margin-top:4px;font-size:10.5px;color:var(--muc3);
  font-variant-numeric:tabular-nums}
.gio-vang-nhan span{flex:1;text-align:center}

/* ══════════════════════════════════════════════════════════════════════════
   Ô TRỐNG
   ══════════════════════════════════════════════════════════════════════════ */
.trong{padding:24px 18px;text-align:center;font-size:13px;color:var(--muc2);
  background:var(--trang);border:1.5px dashed var(--vien-dam);border-radius:13px}
/* .72 ở đây đo được 4,38:1 — sát ngưỡng nhưng vẫn DƯỚI. Máy không bắt được vì kỳ thử
   nào cũng có dữ liệu nên ô trống không hiện ra; sửa luôn kẻo hôm nào kho rỗng thì
   đúng lúc cần đọc nhất lại mờ nhất. .80 đo được 4,95:1. */
.khoang .trong{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.24);
  color:rgba(255,255,255,.8)}

/* ══════════════════════════════════════════════════════════════════════════
   HIỆU ỨNG 1 — hiện lần lượt, CHỈ ở lần vẽ đầu
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes len{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.anim{opacity:0;animation:len .42s cubic-bezier(.22,.7,.3,1) forwards}

/* ══════════════════════════════════════════════════════════════════════════
   ĐIỆN THOẠI — ngưỡng 860px (lưới) và 700px (bảng thành thẻ)
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:860px){
  .luoi.the4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .luoi.g2{grid-template-columns:1fr;grid-auto-rows:auto}
}
@media(max-width:430px){
  .luoi.the4{grid-template-columns:1fr;grid-auto-rows:auto}
}

@media(max-width:700px){
  .khoang{border-radius:18px;padding:14px 13px 15px;margin-bottom:13px}
  .the{padding:13px 13px 14px;border-radius:14px}
  .day-nguon .nhan{width:96px}
  .day-nguon .so{width:74px}
  /* ⚠ Phải viết đủ CẢ HAI dòng. Codex nêu đúng 29/08: biểu đồ giờ chỉ xuất hiện ở màn
     chi tiết, tức luôn nằm trong `.luoi.g2>.the`, mà dòng đó (0,3,0) đè dòng `.gio-vang`
     trơn (0,1,0) bất kể nằm trên hay dưới — media query KHÔNG cộng thêm độ đặc hiệu.
     Nên bản cũ viết mỗi `.gio-vang{height:76px}` là luật CHẾT, chưa bao giờ ăn.
     Đây là mặt kia của bẫy đã vấp ở nút 44px: lần đó thua vì THỨ TỰ, lần này thua vì
     ĐỘ ĐẶC HIỆU. Sửa xong phải soi cả file xem có ai đè mình không, cả hai đường. */
  .gio-vang{height:76px}
  .luoi.g2>.the>.gio-vang{min-height:76px}
  /* "Về bảng chung" là nút chữ trơn, cao đúng dòng chữ = 18px. Trên điện thoại
     đó là ô bấm hụt (chuẩn mục 10 đòi ≥34px) — đo 29/08 bắt được. Nống bằng
     min-height + padding ngang, KHÔNG đóng khung để nó vẫn là đường quay lại
     nhẹ nhàng chứ không hoá thành nút chính tranh chỗ hút mắt. */
  .duong-ve button{min-height:34px;padding:0 10px 0 4px;margin-left:-4px}

  /* BẢNG NHIỀU CỘT → BẢN THẺ. Không cuộn ngang: cuộn ngang trên điện thoại
     là cột cuối không ai thấy. Nhãn cột lấy từ thuộc tính data-nhan của <td>. */
  .cuon{overflow:visible;border:0;border-radius:0}
  table.tc{min-width:0 !important;table-layout:auto;font-size:12.5px}
  table.tc,table.tc tbody,table.tc tr,table.tc td{display:block}
  table.tc thead{display:none}
  table.tc tbody tr{display:grid;gap:4px 11px;margin-bottom:9px;padding:11px 12px;
    background:var(--trang);border:1px solid var(--vien);border-radius:13px;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  table.tc tbody tr:hover{background:var(--t50)}
  table.tc tbody tr:last-child{margin-bottom:0}
  table.tc td{padding:0;border:0;text-align:left;white-space:normal;
    overflow:visible;text-overflow:clip;min-width:0}
  table.tc td::before{content:attr(data-nhan);display:block;
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
    line-height:1.3;color:var(--muc3)}
  table.tc td:first-child{font-size:13.5px}
  table.tc tr.lang{opacity:.78}

  /* Chia ô cho từng bảng — cốt để KHÔNG hàng nào hụt ô */
  /* Xếp hạng trang: 7 ô → tên chiếm cả hàng, 6 ô còn lại 2×3 */
  #bXepHang td:first-child{grid-column:1/-1}
  /* Facebook: 9 ô → 3 cột × 3 hàng, kín tròn */
  #bFB tbody tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Ghép web ↔ FB: 6 ô → tên và tổng chiếm cả hàng, 4 ô giữa 2×2 */
  #bGhep td:first-child,#bGhep td:last-child{grid-column:1/-1}
  /* Nút được bấm: 4 ô → tên nút và URL chiếm cả hàng, 2 số còn lại đứng cạnh nhau */
  #bCTA td:nth-child(1),#bCTA td:nth-child(2){grid-column:1/-1}
  #bCTA td:nth-child(2){word-break:break-all}
  /* Chiến dịch: 3 ô → nguồn và khách đứng cạnh nhau, tên chiến dịch xuống hàng dưới */
  #bCD td:nth-child(2){order:3;grid-column:1/-1;word-break:break-word}
}

/* ══════════════════════════════════════════════════════════════════════════
   KHỐI MÀU (03/09/2026) — chuẩn 00-BO-NAO-CHUNG\PROMPT-KHOI-MAU.md
   Mỗi khối dọc mang một bộ ba [--mk · --mk2 · --mkn] khai TẠI CHỖ trong
   giao-dien.js. Thể hiện NHẸ, đúng 4 điểm (chuẩn dòng 25 — cấm đổ màu ra
   nền lớn):
     ① viền trái 3px --mk   ② tiêu đề --mk2 + chấm tròn gradient
     ③ đầu bảng nhuộm --mkn ④ dòng TỔNG cùng tông nhạt
   ⚠ Điểm ④ trang này KHÔNG có chỗ ăn: không bảng nào có dòng tổng cộng
   (xếp hạng trang · Facebook · ghép web-FB · nút bấm · chiến dịch đều là
   bảng liệt kê). Ghi ra đây để lượt sau khỏi đi tìm dòng tổng không tồn tại.

   Khối chú thích (.that-tha) cố ý GIỮ XÁM như cũ (chuẩn dòng 30-31).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Thẻ nội dung nền trắng ─────────────────────────────────────────────── */
/* .the vốn có border 1px quanh; viền trái dày lên 3px = lấn thêm 2px vào ruột
   (index.html dòng 36 đặt box-sizing:border-box cho mọi thẻ). Bù đúng 2px ở
   padding-left để mép chữ vẫn thẳng hàng với các thẻ chưa nhuộm màu. */
.the.km{border-left:3px solid var(--mk);padding-left:14px}
.the.km h3{color:var(--mk2)}
/* Chấm tròn gradient — chép y khuôn .chip .ic của viên tab (index.html dòng 164)
   để icon khối và icon tab nhìn ra cùng một họ. */
.the.km h3 .ic{width:12px;height:12px;stroke-width:2.2;color:#fff;flex-shrink:0;
  background:linear-gradient(145deg,var(--mk),var(--mk2));
  border-radius:50%;padding:4px;box-sizing:content-box}
.the.km table.tc th{background:var(--mkn);color:var(--mk2)}

/* ── Khoang tối ─────────────────────────────────────────────────────────── */
/* Nền tối giữ nguyên tông — chỉ ăn 3 điểm ở hàng tiêu đề. Chữ h2.nhom cố ý VẪN
   TRẮNG: đặt --mk2 (màu đậm) lên nền carbon là chữ chìm hẳn, phá đúng luật
   tương phản ≥4,5:1 mà chính khối này đã cân nhắc ở dòng 50-53 trên. */
.khoang.km{border-left:3px solid var(--mk);padding-left:13px}
.khoang.km h2.nhom .ic{width:12px;height:12px;stroke-width:2.2;color:#fff;
  background:linear-gradient(145deg,var(--mk),var(--mk2));
  border-radius:50%;padding:4px;box-sizing:content-box}
.khoang.km h2.nhom .ke{background:linear-gradient(90deg,var(--mkn),transparent)}

/* Dưới 700px .the đổi padding 13px và .khoang đổi 13px (dòng 284-285) — bù lại
   y hệt để lề trái vẫn đúng, không lệch 2-3px so với khối chưa nhuộm. */
@media(max-width:700px){
  .the.km{padding-left:11px}
  .khoang.km{padding-left:10px}
}