/* Hallmark · scope: app-ui · genre: utilitarian · theme: DTV Brand Guide (khách chỉ định)
 * nav: side-rail BÊN TRÁI (Quỳnh xem bản thật rồi chốt 07/09/2026), 5 nhóm
 *      gấp được, 19 mục. Màn hẹp: đổi thành hai hàng tab, nhóm trên mục dưới.
 * contrast: pass (40-41) · tokens: pass (48) · icons: pass (30) · gate 49 pass
 * gate 34: overflow-x clip trên html và body, không phải hidden
 * slop: G4 G20 G24 G26 G33 G39 G51 đã sửa
 * G38a (cấm heading in nghiêng): ĐÃ SỬA. Quỳnh chốt nghe theo hallmark ngày
 *   10/09/2026. Bản bàn giao Brand System vòng 01 thay Playfair bằng Source Serif 4
 *   và IBM Plex Mono bằng Roboto Mono. Ghi chú cũ bên dưới giữ lại làm lịch sử.
 *   04/09/2026. Giữ Playfair làm điểm nhấn serif nhưng chữ ĐỨNG, vì hallmark
 *   cấm nghiêng chứ không cấm serif. brand-style.md mục 16.1 còn ghi "italic",
 *   cần Quỳnh cập nhật lại cho khớp.
 * pre-emit critique: P4 H5 E4 S5 R4 V4  (06/09/2026, sau khi thêm nhóm menu)
 */
/* ============================================================
   DTV Admin
   Bảng màu và bộ chữ lấy từ brand-style.md mục 15 và 16.
   Không thêm màu ngoài bảng. Không viết toàn bộ bằng chữ hoa.
   ============================================================ */

:root {
  /* ── SỔ DÒNG CHẢY, chốt 31/10/2026 (gói bàn giao quantri-dtv-ban-giao-dev-31-10-2026, css/dtv-bien.css). Giữ mọi tên biến cũ
     để màn cũ tự nhận giá trị mới; biến ghi "trước ..." là đã đổi giá trị. Lý do bảng sáng 13/09/2026 vẫn giữ (dưới). ── */
  /* ── BẢNG SÁNG, bàn giao thiết kế 13/09/2026 ─────────────────────────────
     Đổi từ nền tối sang nền sáng. Lý do trong bản bàn giao: đây là màn làm
     việc nhiều giờ mỗi ngày, nền gần trung tính và KHÔNG rải màu thương hiệu
     ra toàn màn. Màu thương hiệu chỉ ở chỗ nhấn và chỗ cảnh báo.

     Tên biến giữ nguyên lối cũ để không phải sửa 430 lớp. Vai trò của từng
     tên cũng giữ nguyên; chỉ giá trị đảo từ tối sang sáng. */
  --ink-900:#F1F0EC; /* Nền nhãn trung tính (trước #F1F1EF) */
  --ink-800:#FAF9F6; /* Nền trang, giấy ấm (trước #FBFBFA) */
  --ink-700:#FFFFFF;
  --ink-600:#E6E6E3;
  --ink-850:#F5F5F3;
  --ink-650:#F2F2EF;
  --ink-500:#D4D4D0;
  --amber:#6E3E08; /* Nâu nhấn */
  --amber-chu:#FFFFFF;
  --amber-nen:#F5EBDD; /* Nền nâu nhạt (trước là cam #FFB162) */
  --canh-bao:#8E2318; /* Đỏ cảnh báo */
  --paper:#141C25;
  --slate-400:#3B4550;
  --slate-500:#5A6470;
  --slate-300:#2A343F;
  --slate-600:#8A929C;
  --line:rgba(20, 28, 37, .14);
  --line-2:rgba(20, 28, 37, .26);
  --line-soft:rgba(20, 28, 37, .08);
  --nen:var(--ink-800); /* Nền trang */
  --the:var(--ink-700); /* Nền thẻ */
  --chu:var(--paper); /* Chữ chính */
  --chu-phu:var(--slate-400); /* Chữ phụ */
  --nhan:var(--amber); /* Màu nhấn (nút chính, mục đang chọn) */
  --tren-nhan:var(--amber-chu); /* Chữ trên màu nhấn */
  --xau:var(--canh-bao); /* Cảnh báo, lỗi, số âm */
  --vien:var(--line); /* Đường kẻ chính */
  --vien-mo:var(--line-soft); /* Đường kẻ mờ */
  --the-mo:var(--ink-700);
  --chu-giao-dien:'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Phông giao diện */
  --chu-so:'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --chu-ma:'Roboto Mono', ui-monospace, monospace; /* Phông mã, giờ */
  --chu-diem-nhan:'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --k-1:4px; /* Khoảng cách bậc 1 (4px) */
  --k-2:8px;
  --k-3:12px;
  --k-4:16px;
  --k-5:20px;
  --k-6:24px;
  --k-8:32px;
  --k-11:44px;
  --bo:14px; /* Bo góc thẻ (trước 3px) */
  --r:var(--bo); /* Bo góc */
  --cot-menu:272px; /* Bề rộng menu trái máy tính. D215: về 272px như menu cũ (D185 thu còn 240px khi menu chỉ 9 mục) */
  --cot-le:380px;
  --bd-1:#DFA86E; /* Biểu đồ nấc 1 (nhạt nhất) */
  --bd-2:#C98A47;
  --bd-3:#B06A28;
  --bd-4:#8E5215;
  --bd-5:#6E3E08; /* Biểu đồ nấc 5 (đậm nhất) */
  --bd-trung:#D4D4D0; /* Biểu đồ: đã dừng, không đo */
  --bd-ray:rgba(20, 28, 37, .08); /* Ray nền của thanh */
  /* Màu nhóm kênh nguồn khách (D273, 04/11/2026): thanh Nguồn đổ vào, sơ đồ luồng màn Điều hành. Mỗi nhóm một sắc độ riêng, vì thang
     --bd-* là thang đậm nhạt một sắc: dùng cho danh mục thì hai nấc cạnh nhau chỉ cách ΔE 8,6 (ngưỡng 15), và --amber trùng --bd-5.
     Thứ tự này đã qua validate_palette (skill dataviz, nền trắng): CVD kề nhau ΔE 9,2, mắt thường 16,3; vàng dưới 3:1 nên luôn có nhãn. */
  --kenh-qc:#B4521A; /* Quảng cáo */
  --kenh-bl:#D69A26; /* Bình luận */
  --kenh-cs:#119583; /* Chuyên san */
  --kenh-mxh:#4A7BD0; /* Mạng xã hội tự nhiên */
  --kenh-tk:#CC4A80; /* Tìm kiếm */
  --kenh-thu:#6E9433; /* Thư */
  --kenh-tb:#9061C4; /* Form trên trang bán */

  /* Mới 31/10/2026 */
  --nhan-nhat:#F5EBDD; /* nền nâu nhạt: nhãn nhấn, mục đang chọn */
  --xau-nhat:#FBEAE6; /* nền đỏ nhạt: nhãn cảnh báo */
  --tot:#2F5D3E; /* xanh: đạt, đã khớp */
  --tot-nhat:#E8F0EA; /* nền xanh nhạt */
  --nhan-dam:#4A2905; /* nâu khi rê chuột */
  --chua-luu-vien:#C98A47; /* viền ô chưa lưu, 2px */
  --chua-luu-nen:#FFFBF5; /* nền ô chưa lưu */
  --bo-nut:10px; /* bo góc nút, ô bấm */
  --bo-nhan:999px; /* nhãn tròn */
  --nut-cao:44px; /* chiều cao tối thiểu nút trên điện thoại */
  --co-chu:15px; /* chữ thân điện thoại */
  --co-chu-nho:12px; /* chữ nhỏ nhất */
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* clip chứ không hidden: hidden trên thẻ gốc biến body thành khối cuộn và làm hỏng
     position: sticky của cột menu. Hallmark gate 34. */
  overflow-x: clip;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--chu-giao-dien);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;

  /* Số thẳng cột mà không cần chữ mono. Chỉ tác động lên chữ số, chữ thường
     không đổi. Đây là thứ thay cho Roboto Mono ở mọi chỗ hiện số. */
  font-variant-numeric: tabular-nums;
}

/* Mã ASCII thật: số tài khoản, id hồ sơ, mã hex. KHÔNG dùng cho chữ tiếng Việt,
   vì dấu trong chữ mono bị bè và lệch chiều cao. */
.ma {
  font-family: var(--chu-ma);
  font-variant-numeric: normal;
  letter-spacing: 0;
}

a { color: inherit; }

/* Liên kết bỏ qua menu. Ẩn cho tới khi được gõ Tab tới, vì nó chỉ có ích cho người dùng
   bàn phím. KHÔNG dùng display:none: thứ đó thì bàn phím cũng không tới được. */
.nhay-qua {
  position: absolute; left: var(--k-3); top: var(--k-3); z-index: 20;
  transform: translateY(-200%);
  padding: var(--k-2) var(--k-4);
  background: var(--nhan); color: var(--tren-nhan);
  border-radius: var(--r); font-size: 14px; font-weight: 600; text-decoration: none;
}
.nhay-qua:focus-visible { transform: translateY(0); outline: 2px solid var(--chu); outline-offset: 2px; }
.noi-dung:focus { outline: none; }

/* Nhãn nhỏ. Chữ thường, không in hoa: brand cấm viết toàn bộ bằng chữ hoa. */
.nhan-nho {
  font-size: 13px;
  letter-spacing: 0.015em;
  color: var(--chu-phu);
}

.so { font-family: var(--chu-so); font-variant-numeric: tabular-nums; }

/* Điểm nhấn serif. Tối đa MỘT chỗ mỗi màn.
   Chữ ĐỨNG, không nghiêng: hallmark gate G38a xếp heading in nghiêng vào
   nhóm dấu hiệu AI rõ nhất. Nhấn mạnh mang bằng bộ chữ và độ đậm, không bằng nghiêng. */
.diem-nhan {
  overflow-wrap: anywhere;
  min-width: 0;
  font-family: var(--chu-diem-nhan);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ---------- Khung ---------- */

.khung {
  display: grid;
  grid-template-columns: var(--cot-menu) minmax(0, 1fr);
  min-height: 100svh;
}

/* Cột chức năng nằm BÊN TRÁI.

   Bản 06/09/2026 từng đặt bên phải theo phác thảo, lý lẽ là nội dung bắt đầu ngay mép trái.
   Dựng xong Quỳnh xem bản thật rồi bác: "nhìn rất chối". Đúng — lý lẽ đó chỉ đứng vững với
   một bảng điều khiển toàn bảng số liệu tràn hết bề ngang. Màn Tìm người ở đây là danh sách
   hẹp, còn thừa hơn 300px bên phải, nên menu dạt sang phải thành ra trôi lơ lửng chứ không
   neo vào đâu cả. Trả về trái, đúng thói quen, và mắt có mốc để bám. */
.cot-menu {
  background: var(--ink-900);
  border-right: 1px solid var(--line);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: var(--k-5);
  position: sticky;
  top: 0;
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dau-de-he {
  padding: 0 24px 22px; line-height: 1.3;
  border-bottom: 1px solid var(--line);
}
/* Logo là chữ ĐẠO THỊNH VƯỢNG dạng hình, nên KHÔNG đặt thêm dòng chữ cùng tên bên cạnh:
   hai lần cùng một cái tên chồng lên nhau là dấu hiệu ghép vội. Chỉ còn 'quản trị' ở dưới
   để nói đây là khu vực nào. */
.dau-de-he .logo {
  display: block; width: 180px; max-width: 100%; height: auto;
}
.dau-de-he span {
  display: block; margin-top: 6px;
  font-family: var(--chu-so); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-500);
}

.dieu-huong { display: flex; flex-direction: column; gap: 26px; }

/* ---------- Nhóm chức năng ----------
   Mọi nhóm LUÔN MỞ, không còn gấp. Hai mươi mục trải hết dài hơn màn hình, và cột
   này cuộn được — cuộn thì bản đồ hệ thống vẫn nguyên vẹn, gấp thì bốn phần năm bị
   giấu sau một cú bấm. */
.nhom { display: flex; flex-direction: column; }

/* ── Gấp nhóm, do người dùng quyết ────────────────────────────────────────────
   Quỳnh 11/09/2026: "tab menu bị dàn trải, phải do tôi bấm hide, unhide cho gọn tab".

   Bản trước bỏ gấp vì bản bàn giao thiết kế ra luật "không có menu bung", và vì cột
   cuộn được nên hai mươi mục không phải vấn đề kỹ thuật. Nhưng nó là vấn đề của người
   ngồi trước màn hình cả ngày: phần lớn thời gian chỉ làm trong một nhóm, mười lăm mục
   còn lại chỉ là nhiễu.

   Khác chỗ quan trọng so với bản gấp cũ: **mặc định mở hết**, và hệ KHÔNG BAO GIỜ tự
   gấp cái gì. Chỉ gấp thứ người dùng tự tay gấp, và nhớ lại lần sau. Nhóm đang chứa mục
   xem thì không gấp được, để không ai tự làm mất dấu chỗ mình đang đứng. */
.nhom-dau {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0 0 6px; padding: 6px 24px; min-height: 30px;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 11px; letter-spacing: .1em; color: var(--slate-600);
  transition: color .14s;
}
/* Sổ dòng chảy (design review 31/10/2026, FINDING-002): --slate-600 trên --ink-900 chỉ 2,76:1, dưới mức 4,5:1 của chữ nhỏ;
   Quy chuẩn mục 8 cấm viết hoa toàn bộ. Tên nhóm theo đúng chữ trong menu-quantri.js ("00 · Điều hành"). */
.nhom-dau.mono, .nhom-dau { color: var(--slate-500); font-size: var(--co-chu-nho); letter-spacing: .02em; text-transform: none; }
.nhom-dau:hover { color: var(--slate-300); }
.nhom-dau:focus-visible { outline: 2px solid var(--vang); outline-offset: -2px; }
.nhom-dau-chu { flex: 1; min-width: 0; }
/* Mũi nhỏ quay xuống khi nhóm đang mở, quay sang phải khi đã gấp. */
.nhom-mui {
  flex: none; display: inline-flex; width: 12px; height: 12px; opacity: .55;
  transition: transform .16s ease-out, opacity .14s;
}
.nhom-mui svg { width: 100%; height: 100%; display: block; }
.nhom-dau:hover .nhom-mui { opacity: 1; }
.nhom.gap .nhom-mui { transform: rotate(-90deg); }
/* Nhóm đang chứa mục đang xem: khóa lại, không cho gấp. */
.nhom-dau[aria-disabled="true"] { cursor: default; }
.nhom-dau[aria-disabled="true"] .nhom-mui { opacity: .22; }

.nhom-ds { display: flex; flex-direction: column; }
.nhom.gap > .nhom-ds { display: none; }
/* Nhóm đã gấp mà bên trong có việc cần làm thì phải nói ra, không thì gấp xong là quên. */
.nhom-dem-gap {
  flex: none; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--vang); color: #10131a;
  font-size: 10px; font-weight: 700; letter-spacing: 0; text-align: center;
}
@media (prefers-reduced-motion: reduce) { .nhom-mui { transition: none; } }

.muc {
  display: flex; align-items: center; gap: 10px; width: 100%;
  /* Đệm trái 27px cho mục thường. Mục đang xem có viền trái 3px + đệm 24px, cộng
     lại đúng 27px — nên chữ KHÔNG NHẢY khi đổi mục. Đây là lý do hai con số lệch
     nhau, không phải gõ nhầm. */
  padding: 11px 24px 11px 27px;
  min-height: var(--k-11);
  border: none; border-left: 0 solid transparent; border-radius: var(--bo);
  background: none; color: var(--slate-400); font: inherit; font-size: 15px;
  text-align: left; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
@media (hover: hover) { .muc:hover { color: var(--paper); background: var(--ink-700); } }
.muc:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.muc:active { background: var(--ink-700); }
.muc[aria-current='page'] {
  background: var(--ink-600);
  border-left: 3px solid var(--amber);
  padding-left: 24px;
  color: var(--paper);
}
/* Nhãn bấm được KHÔNG được xuống hai dòng. Cột rộng 272px cho nhãn dài nhất, nhưng
   vẫn chốt bằng luật này để sau có ai thêm nhãn dài hơn thì nó cắt bằng dấu ba chấm
   chứ không phá vỡ chiều cao hàng. */
.muc-chu {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Mục đã có trong bản đồ nhưng chưa dựng màn. Nhạt đi một bậc, KHÔNG khóa: bấm vào vẫn
   mở được trang nói màn đó sẽ làm gì. Khóa lại thì mất luôn tác dụng bản đồ. */
.muc.dang-dung { color: color-mix(in srgb, var(--chu-phu) 68%, transparent); }
@media (hover: hover) { .muc.dang-dung:hover { color: var(--chu-phu); } }
.muc.dang-dung[aria-current='page'] { color: var(--chu); }
.cham-dung {
  margin-left: auto; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.55;
}
.muc .dem {
  margin-left: auto;
  font-family: var(--chu-so);
  font-size: 13px;
  color: var(--chu-phu);
}
.muc[aria-current='page'] .dem { color: var(--nhan); }

/* Khối đáy cột: ai đang đăng nhập và ở vai trò nào. Mono 11px, ngăn bằng đường kẻ
   trên — nó là chú thích về phiên làm việc, không phải một mục điều hướng. */
.chan-cot {
  margin-top: auto; padding: 18px 24px 0;
  border-top: 1px solid var(--line);
  font-family: var(--chu-so); font-size: 11px; letter-spacing: .06em;
  color: var(--slate-500); line-height: 1.7;
}
.chan-cot button {
  background: none; border: none; color: var(--chu-phu);
  font: inherit; padding: 0; cursor: pointer; text-decoration: underline;
}
.chan-cot button:hover { color: var(--chu); }

/* Đệm vùng nội dung 24px trên dưới, 40px hai bên — cùng một con số với đệm dòng bảng,
   nên mép chữ của tiêu đề và mép chữ của bảng thẳng hàng nhau. Bỏ max-width: bảng
   danh sách cần cả bề ngang. */
.noi-dung { padding: 24px 40px 40px; }

/* ---------- Ô tìm ---------- */

.o-tim {
  position: relative;
  margin-bottom: var(--k-5);
}
.o-tim input {
  width: 100%;
  padding: var(--k-3) var(--k-4) var(--k-3) 40px;
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--r);
  color: var(--chu);
  font: inherit;
  font-size: 17px;
}
.o-tim input::placeholder { color: var(--chu-phu); }
.o-tim input:focus-visible {
  outline: 2px solid var(--nhan);
  outline-offset: 1px;
  border-color: var(--vien);
}
.o-tim svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--chu-phu); pointer-events: none;
}

/* ---------- Tiêu đề màn ---------- */

.dau-man { margin-bottom: var(--k-4); }
.dau-man h1 { font-size: 21px; font-weight: 600; margin: 0 0 3px; letter-spacing: 0.01em; }
.dau-man p { margin: 0; font-size: 14px; color: var(--chu-phu); }

/* ---------- Danh sách người ---------- */

.danh-sach { border-top: 1px solid var(--vien-mo); }

.dong {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--k-4);
  align-items: center;
  padding: var(--k-3);
  border-bottom: 1px solid var(--vien-mo);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.dong:hover { background: var(--the-mo); border-left-color: var(--vien); }
.dong:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; }
.dong:active { background: var(--the); }
.dong .ten { font-weight: 500; }
.dong .phu {
  font-size: 13.5px; color: var(--chu-phu); margin-top: 2px;
  display: flex; gap: var(--k-4); flex-wrap: wrap; align-items: baseline;
}
/* Không dùng dấu chấm giữa để ngăn cách. Nó lặp ở mọi dòng, bắt người đọc
   tự đoán nghĩa, và đặt hai thứ khác loại cạnh nhau trông y hệt nhau.
   Thay bằng khoảng cách rộng, và mã người thì gắn nhãn cho rõ. */
.dong .phu .ma-nguoi { opacity: .72; }
.dong .phu .ma-nguoi .nhan { margin-right: 5px; }
.cum-the { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Dòng người: tên Zalo, tên thật, thẻ ---------- */

.dong { align-items: start; }
.khoi-ten { min-width: 0; }
.dong .phu .ten-that { color: var(--chu-phu); }
.dong .phu .thieu { color: var(--xau); }

/* Thẻ phân loại, sửa ngay tại dòng. Bấm vào ô là gõ thêm được. */
.hang-the {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--k-2); align-items: center;
}
.the-lop {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--chu-so); font-size: 12.5px;
  padding: 2px var(--k-2); border-radius: 3px;
  border: 1px solid var(--vien); color: var(--chu-phu);
  background: var(--the-mo);
}
.the-lop .go {
  background: none; border: none; padding: 0 1px; cursor: pointer;
  color: var(--chu-phu); font: inherit; line-height: 1;
}
.the-lop .go:hover { color: var(--xau); }
.the-lop .go:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }

.nhap-the {
  width: 76px; font: inherit; font-size: 12.5px;
  padding: 2px var(--k-2);
  background: none; border: 1px dashed var(--vien);
  border-radius: 3px; color: var(--chu);
}
.nhap-the::placeholder { color: var(--chu-phu); }
.nhap-the:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; width: 132px; }

.cum-phai {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; flex: none;
}
.nut.nho { font-size: 12.5px; padding: var(--k-1) var(--k-2); white-space: nowrap; }

/* ---------- Hàng nút lọc ---------- */

.hang-loc {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--k-4); align-items: center;
}
.loc {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13.5px;
  padding: var(--k-1) var(--k-3);
  border: 1px solid var(--vien); border-radius: 999px;
  background: none; color: var(--chu-phu); cursor: pointer;
}
.loc:hover { color: var(--chu); background: var(--the-mo); }
.loc:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
.loc .dem { font-size: 12px; opacity: .8; }
.loc.dang-chon {
  border-color: var(--nhan); color: var(--nhan);
  background: color-mix(in srgb, var(--nhan) 12%, transparent);
}
.ngat-loc {
  width: 1px; height: 18px; background: var(--vien); margin: 0 var(--k-1);
}

/* ---------- Chứng từ ---------- */

.ds-chung-tu { display: grid; gap: var(--k-2); }
.mot-chung-tu {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--k-3); align-items: center;
  padding: var(--k-3) 0; border-top: 1px solid var(--vien-mo);
}
.mot-chung-tu:last-child { border-bottom: 1px solid var(--vien-mo); }
.mot-chung-tu .ten-tep { word-break: break-all; }
.mot-chung-tu .tien { font-family: var(--chu-so); white-space: nowrap; }

.tai-len {
  border: 1px dashed var(--vien); border-radius: var(--r);
  padding: var(--k-4); margin-top: var(--k-3);
  display: grid; gap: var(--k-3);
}
.tai-len .hang { display: flex; gap: var(--k-3); flex-wrap: wrap; align-items: end; }
/* Ô chọn kỳ giãn theo nhãn dài nhất và đẩy nút Tải bill ra ngoài mép phải (Quỳnh 27/10/2026: "ko có nút tải bill"). Ô con
   được co, ô chọn không vượt khung. */
.tai-len { grid-template-columns: minmax(0, 1fr); }
.tai-len .hang > div { min-width: 0; max-width: 100%; }
.tai-len select { width: 100%; max-width: 100%; }
.tai-len input[type=file] { max-width: 100%; }
.tai-len label { display: block; font-size: 13px; color: var(--chu-phu); margin-bottom: 3px; }
.tai-len input[type=date], .tai-len input[type=text], .tai-len input[type=file] {
  font: inherit; font-size: 14px; padding: var(--k-2);
  background: var(--nen); border: 1px solid var(--vien);
  border-radius: var(--r); color: var(--chu);
}
.tai-len input:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }

/* ---------- Thẻ trạng thái ---------- */
/* Kỷ luật: trạng thái BÌNH THƯỜNG không tô màu. Chỉ thứ cần xử lý mới sáng lên. */

.the-tt {
  font-size: 12.5px;
  padding: var(--k-1) var(--k-2);
  border-radius: 3px;
  border: 1px solid var(--vien);
  color: var(--chu-phu);
  white-space: nowrap;
}
.the-tt.can-chu-y { border-color: var(--nhan); color: var(--nhan); }

/* ══════════════════════════════════════════════════════════════════════════
   THẺ TÔ ĐẬM — trạng thái học và dấu đã clean

   Quỳnh 20/09/2026: *"đổi màu đậm cho thẻ trạng thái học và dữ liệu đã clean"*.

   Hai thẻ này phải đọc được từ xa, vì chúng là thứ người ta liếc đầu tiên khi mở
   một hồ sơ: người này còn học không, và đã soát chưa. Viền mảnh chữ nhạt như các
   thẻ khác thì phải nhìn kỹ mới thấy.

   Tô NỀN chứ không thêm màu mới. Luật "một màu nhấn duy nhất là --amber" vẫn giữ:
   `dam-xong` dùng đúng --amber, hai lớp còn lại chỉ là sắc độ của mực và giấy đã
   có sẵn trong bảng màu. */
.the-tt.dam {
  background: var(--paper); color: var(--ink-700);
  border-color: transparent; font-weight: 600;
}
/* Chữ MỰC trên nền cam, không phải chữ trắng.

   Bản đầu tôi đặt `color: var(--ink-800)`, tưởng đó là màu chữ sáng. Nó là màu NỀN
   chính (#FBFBFA), nên ra chữ trắng trên nền cam nhạt #FFB162 — đọc không nổi. Đo
   lại trong trình duyệt mới thấy. Mực trên cam thì tương phản thừa sức. */
.the-tt.dam-nhat {
  background: var(--amber-nen); color: var(--paper);
  border-color: transparent; font-weight: 600;
}
.the-tt.dam-mo {
  background: var(--slate-400); color: var(--ink-700);
  border-color: transparent; font-weight: 600;
}
.the-tt.dam-xong {
  background: var(--amber); color: var(--amber-chu);
  border-color: transparent; font-weight: 600;
}
.the-tt.xau       { border-color: var(--xau); color: var(--chu); background: color-mix(in srgb, var(--xau) 30%, transparent); }

/* ---------- Khối ---------- */

.khoi {
  background: var(--the);
  border: 1px solid var(--vien-mo);
  border-radius: var(--r);
  padding: var(--k-5);
}
.khoi + .khoi { margin-top: var(--k-4); }
.khoi h2 { font-size: 14.5px; font-weight: 600; margin: 0 0 12px; letter-spacing: 0.01em; }

/* Mục nội dung: KHÔNG phải thẻ. Thẻ chỉ dành cho thứ tự nó là một khối,
   ví dụ trục thời gian. Ba thẻ xếp chồng liên tiếp là mosaic, đúng thứ
   design-review từ chối thẳng với giao diện ứng dụng. */
.muc-nd { margin-top: 30px; }
.muc-nd > h2 {
  font-size: 14.5px; font-weight: 600; margin: 0 0 4px; letter-spacing: 0.01em;
}
.muc-nd > .duong-ke {
  height: 1px; background: var(--vien-mo); margin-bottom: 10px;
}

.hang-so { display: flex; gap: 12px; flex-wrap: wrap; }
.o-so { padding: 2px 14px 2px 0; }
.o-so .con-so { font-family: var(--chu-so); font-size: 29px; line-height: 1.1; }
.o-so .con-so.sang { color: var(--nhan); }
.o-so .nhan-nho { margin-top: 3px; }

/* Ô "đã quá hạn": #A35139 chỉ đạt 2.77:1 trên nền tối nên KHÔNG tô chữ bằng nó.
   Dùng khối nền tô, chữ giữ màu sáng. Màu chỉ để mắt tìm nhanh, chữ mới mang tin. */
.o-so.xau {
  background: color-mix(in srgb, var(--xau) 30%, transparent);
  border: 1px solid var(--xau);
  border-radius: var(--r);
  padding: 6px 14px;
  margin: -6px 0;
}
.o-so.xau .nhan-nho { color: var(--chu); }

/* ---------- Nút ---------- */

.nut {
  font: inherit; font-size: 14.5px;
  padding: var(--k-3) var(--k-4);
  border-radius: var(--r);
  border: 1px solid var(--vien);
  background: none;
  color: var(--chu);
  cursor: pointer;
}
.nut:hover { background: var(--the-mo); }
.nut:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
.nut:active { transform: translateY(1px); }
.nut.chinh {
  background: var(--nhan); color: var(--tren-nhan);
  border-color: var(--nhan); font-weight: 600;
}
.nut.chinh:hover { filter: brightness(1.07); background: var(--nhan); }
.nut:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Trạng thái rỗng và nạp ---------- */

.trong, .dang-nap {
  padding: var(--k-11) var(--k-3); text-align: center; color: var(--chu-phu); font-size: 14.5px;
}
.trong b { display: block; color: var(--chu); font-weight: 500; margin-bottom: 5px; font-size: 16px; }
.trong .nut { margin-top: 14px; }

.loi {
  border: 1px solid var(--xau);
  background: color-mix(in srgb, var(--xau) 18%, transparent);
  border-radius: var(--r);
  padding: var(--k-3) var(--k-4);
  font-size: 14.5px;
  margin-bottom: var(--k-4);
}

/* ============================================================
   TRỤC THỜI GIAN
   Đây là chỗ duy nhất được phép phức tạp. Nó là lý do tồn tại
   của cả DTV Core: một con người, một hành trình.
   Chấm = một sự kiện tại một thời điểm (ghi danh khóa ngắn hạn).
   Thanh = một khoảng thời gian (kỳ membership 12 tháng).
   Chiều cao tỉ lệ với thời gian thật, không phải xếp đều nhau.
   ============================================================ */

.truc { position: relative; padding: 6px 0 6px 96px; min-height: 120px; }

.truc .ray {
  position: absolute; left: 78px; top: 0; bottom: 0;
  width: 1px; background: var(--vien);
}

.moc-nam {
  position: absolute; left: 0; transform: translateY(-50%);
  font-family: var(--chu-so); font-size: 13px; color: var(--chu-phu);
  width: 66px; text-align: right;
}
.moc-nam::after {
  content: ''; position: absolute; right: -20px; top: 50%;
  width: 14px; height: 1px; background: var(--vien);
}

.viec {
  position: absolute; left: 96px; right: 0;
  transform: translateY(-50%);
  padding-left: 4px;
}
.viec .ngay { font-family: var(--chu-so); font-size: 13px; color: var(--chu-phu); }
.viec .ten-viec { font-size: 15px; margin-top: 1px; }
.viec .chu-thich { font-size: 13.5px; color: var(--chu-phu); }

.viec::before {                       /* chấm trên ray */
  content: ''; position: absolute;
  left: -22.5px; top: 50%; margin-top: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nen); border: 1px solid var(--chu-phu);
}

/* Chấm đứng ở đúng ngày (giao-dien.js trucThoiGian, 11/11/2026); nhãn có chấm riêng thì bỏ chấm ::before. */
.viec.co-cham::before { display: none; }
.cham-moc {
  position: absolute; left: 73.5px; margin-top: -3.5px; z-index: 1;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nen); border: 1px solid var(--chu-phu);
}
.noi-moc {                            /* ngoặc nối chấm với nhãn bị đẩy xuống */
  position: absolute; left: 81px; width: 13px;
  border: 1px solid var(--vien); border-left: 0;
  border-radius: 0 4px 4px 0;
}

.khoang {                             /* thanh kéo dài của một kỳ membership */
  position: absolute; left: 74px; width: 9px;
  border-radius: 5px;
  background: var(--vien);
  border: 1px solid var(--vien);
}
.khoang.dang-hieu-luc { background: var(--nhan); border-color: var(--nhan); }
.khoang.het-han {
  background: color-mix(in srgb, var(--chu-phu) 22%, transparent);
  border-color: color-mix(in srgb, var(--chu-phu) 45%, transparent);
}

/* ---------- Đối chiếu hai hồ sơ khi duyệt trùng ---------- */

.doi-chieu { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-4); }
/* Cột đối chiếu KHÔNG phải thẻ. Thẻ lồng trong thẻ là một anti-pattern
   của hallmark (gate 4), và ở đây nó cũng vô nghĩa về mặt nội dung. */
.doi-chieu .cot-hs {
  border: 1px solid var(--vien-mo);
  border-radius: var(--r);
  padding: var(--k-4);
}
.o-truong { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
.o-truong + .o-truong { border-top: 1px solid var(--vien-mo); }
.o-truong .gia-tri { word-break: break-word; }
.o-truong.khac .gia-tri { color: var(--nhan); }

.ly-do-gop {
  width: 100%; margin-top: 12px; padding: 10px 12px;
  background: var(--nen); border: 1px solid var(--vien);
  border-radius: var(--r); color: var(--chu); font: inherit; font-size: 14.5px;
  resize: vertical; min-height: 62px;
}
.ly-do-gop:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }

.hang-nut { display: flex; gap: var(--k-3); margin-top: var(--k-4); flex-wrap: wrap; align-items: center; }

/* Chữ lớn siết khoảng cách lại một chút, đúng cách Apple làm: cỡ càng lớn thì
   khoảng hở giữa các chữ càng lộ ra thừa. KHÔNG siết ở chữ nhỏ — chữ nhỏ siết lại
   là khó đọc, nhất là chữ có dấu. */
.vao-cau, .de-trang, .hs-ten { letter-spacing: -.02em; }
.ts-so { letter-spacing: -.015em; }

/* ---------- Tiện ích dùng chung ----------
   Nhãn mono viết HOA là ký hiệu nhận dạng của cả hệ: mọi nhãn, số, mã và ngày
   tháng đều dùng nó. Đặt ở đây một lần thay vì lặp lại trong từng màn. */
.mono {
  font-family: var(--chu-so); font-weight: 400;
  /* Sổ dòng chảy (design review 31/10/2026, FINDING-006): Quy chuẩn mục 8 cấm viết hoa toàn bộ; chữ thường không giãn khoảng.
     Trước đây .mono ép uppercase + .08em ở 78 chỗ dùng. Mã (DTV00012, NTTN000001) vốn viết hoa trong dữ liệu nên giữ nguyên. */
  letter-spacing: .02em; text-transform: none;
}
.nhan-amber { color: var(--amber); font-size: 13px; letter-spacing: .1em; margin: 0 0 6px; }

/* Chuyển động: CHỈ đổi nền và độ mờ, 120ms. Không trượt, không nảy, không hiệu
   ứng xuất hiện. Ai bật giảm chuyển động thì bỏ hết. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Đăng nhập ----------
   Lưới hai cột 1fr / 620px, cao trọn màn hình. Cột trái là bề mặt thương hiệu duy
   nhất người ngoài nhìn thấy nên nó chiếm phần lớn màn, không phải dải trang trí. */

.trang-vao { margin: 0; background: var(--ink-800); }
.vao {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 620px;
}

.vao-trai {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--ink-800); padding: 56px 64px;
  border-right: 1px solid var(--line);
}
/* Logo khóa cứng: không sửa tỷ lệ, không đổi màu, không cắt. Chỉ đặt bề rộng. */
.vao-logo { width: 340px; max-width: 100%; height: auto; }
.vao-cau {
  font-family: var(--chu-diem-nhan); font-size: 40px; line-height: 1.2; font-weight: 600;
  color: var(--paper); margin: 18px 0 14px; max-width: 22ch; text-wrap: balance;
}
.vao-phu { font-size: 16px; line-height: 1.6; color: var(--slate-400); margin: 0; max-width: 44ch; }

.vao-chan { display: flex; align-items: center; gap: 14px; }
.vao-ke { flex: 1; height: 1px; background: var(--line); }
.vao-ban { font-size: 12px; color: var(--slate-500); }

/* Marker tiêu điểm: hình vuông xoay 45 độ, màu nhấn. Dùng lại ở nhiều màn. */
.marker {
  display: inline-block; width: 14px; height: 14px; flex: none;
  background: var(--amber); transform: rotate(45deg);
}

.vao-phai {
  display: flex; align-items: center; background: var(--ink-900); padding: 56px;
}
.vao-form { width: 100%; max-width: 420px; margin: 0 auto; }
.vao-de { font-size: 13px; letter-spacing: .1em; color: var(--slate-500); margin: 0 0 34px; }

/* Trường nhập KHÔNG có khung hộp. Chỉ một gạch chân 1px, đổi sang màu nhấn khi
   đang gõ. Ít đường kẻ hơn, và con trỏ ở đâu thì nhìn ra ngay. */
/* Ô nhập CÓ NỀN, không có viền.

   Bản bàn giao viết "không có khung viền hộp, chỉ gạch chân". Dựng đúng thế rồi thử
   thật thì hỏng hai chỗ:

   1. Ô rỗng trên nền tối gần như vô hình. Người dùng không thấy chỗ nào bấm được —
      một gạch chân mờ 1px không phải là lời mời gõ chữ.
   2. Chrome tự điền thì nó VẼ ĐÈ nền sáng vào ô, thành ra hai khối trắng to giữa
      màn tối. Đúng cái khung hộp mà thiết kế muốn bỏ, lại còn sai màu.

   Giải: bỏ VIỀN như thiết kế yêu cầu, nhưng cho ô một mặt nền chìm hơn nền panel
   một bậc. Vẫn không có khung kẻ, mà chỗ gõ thì nhìn ra ngay. Gạch chân giữ
   nguyên vai trò chỉ báo đang gõ. */
.o-gach { margin-bottom: 30px; }
.o-gach label {
  display: block; font-size: 12px; letter-spacing: .08em;
  color: var(--slate-500); margin-bottom: 10px;
}
.o-gach input {
  width: 100%; padding: 15px 16px; background: var(--ink-800); border: none;
  border-bottom: 1px solid var(--line); border-radius: var(--bo);
  color: var(--paper); font: inherit; font-size: 16px;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.o-gach input::placeholder { color: var(--slate-600); }
@media (hover: hover) { .o-gach input:hover { background: var(--ink-700); } }

/* Chặn nền tự điền của trình duyệt.

   Chrome không cho đổi background của ô đã tự điền, nên phải phủ bằng bóng đổ bên
   trong dày 1000px — đây là cách duy nhất chạy được. Kèm text-fill-color, nếu không
   chữ vẫn đen trên nền tối. transition dài vô lý là mẹo giữ cho nền không nhấp nháy
   trở lại sắc trắng ngay lúc trang vừa tải. */
.o-gach input:-webkit-autofill,
.o-gach input:-webkit-autofill:hover,
.o-gach input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--ink-800);
  -webkit-text-fill-color: var(--paper);
  caret-color: var(--paper);
  transition: background-color 100000s ease-in-out 0s;
}
/* Trường nhập KHÔNG có vòng viền hộp khi focus, kể cả focus bàn phím.

   Bản bàn giao có hai câu chỏi nhau: trường nhập "không có khung viền hộp", mà luật
   focus lại "viền ngoài 2px trên mọi phần tử bấm được". Trên một ô chữ thì vòng viền
   chính là cái khung hộp vừa bỏ đi.

   Chọn theo câu cụ thể hơn: ô chữ đã có chỉ báo focus riêng do thiết kế chỉ định —
   gạch chân đổi sang màu nhấn. Làm nó DÀY GẤP ĐÔI để thấy rõ không kém vòng viền,
   và đệm dưới trừ đi 1px để chữ không nhảy. Luật vòng viền vẫn áp cho nút và liên
   kết, nơi không có chỉ báo nào khác. */
.o-gach input:focus,
.o-gach input:focus-visible {
  outline: none;
  background: var(--ink-700);
  border-bottom: 2px solid var(--amber);
  padding-bottom: 14px;
}

/* Nút hiện mật khẩu. Thiếu nó thì gõ sai một ký tự là phải xóa hết gõ lại, và trên
   điện thoại thì đó là lỗi ai cũng mắc. */
.o-mk { position: relative; }
.o-mk input { padding-right: 84px; }
.nut-hien {
  position: absolute; right: 0; bottom: 0; height: 52px; padding: 0 16px;
  background: none; border: none; border-radius: var(--bo);
  font-family: var(--chu-so); font-size: 11px; letter-spacing: .08em;
  color: var(--slate-500); cursor: pointer; transition: color 120ms ease;
}
@media (hover: hover) { .nut-hien:hover { color: var(--amber); } }
.nut-hien:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.nut-amber {
  display: block; width: 100%; padding: 16px; margin-top: 8px;
  background: var(--amber); border: none; border-radius: var(--bo); margin-top: 14px;
  /* Chữ trên nền amber phải là --ink-800, không bao giờ là màu trắng. */
  color: var(--ink-800); font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: opacity 120ms ease;
}
@media (hover: hover) { .nut-amber:hover { opacity: .88; } }
.nut-amber:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.nut-amber[disabled] { opacity: .6; cursor: default; }

.vao-bao {
  margin: 0 0 20px; padding: 10px 0 10px 14px;
  border-left: 2px solid var(--amber);
  font-size: 13px; line-height: 1.55; color: var(--paper);
}

.vao-lien-ket { display: flex; justify-content: space-between; gap: var(--k-3); padding-top: 26px; }
.lien-ket {
  background: none; border: none; padding: 4px 0; font: inherit; font-size: 12px;
  letter-spacing: .06em; color: var(--slate-500); cursor: pointer;
  transition: color 120ms ease;
}
@media (hover: hover) { .lien-ket:hover { color: var(--amber); } }
.lien-ket:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Màn hẹp: cột thương hiệu xuống trên, gọn lại, không biến mất — nó là thứ nói cho
   người lạ biết họ đang ở đâu. */
@media (max-width: 1024px) {
  .vao { grid-template-columns: minmax(0, 1fr); }
  .vao-trai { padding: 40px 28px 32px; border-right: none; border-bottom: 1px solid var(--line); gap: 28px; }
  .vao-logo { width: 240px; }
  .vao-cau { font-size: 28px; max-width: none; margin: 0 0 10px; }
  .vao-phai { padding: 36px 28px 56px; }
  .vao-form { max-width: none; }
}
@media (max-width: 520px) {
  .vao-trai { padding: 28px 20px 24px; }
  .vao-phai { padding: 28px 20px 48px; }
  .vao-cau { font-size: 24px; }
  .vao-lien-ket { flex-direction: column; gap: var(--k-2); }
}

/* ---------- Màn hẹp ---------- */

/* ---------- Màn hẹp: menu ẩn sau một nút ----------
   Bản bàn giao: "768–1023px: sidebar thu thành cột icon 64px HOẶC ẩn sau nút".
   Cột icon không dùng được vì thiết kế cố ý bỏ hết icon khỏi điều hướng — một
   rail toàn chữ viết tắt thì đoán còn lâu hơn đọc. Nên chọn vế thứ hai.

   Bản trước biến điều hướng thành dải tab cuộn ngang, viết cho menu gấp mở đã bỏ.
   Với hai mươi mục luôn mở thì dải đó dài gấp ba màn hình và cuộn ngang là cách
   chắc chắn để không ai thấy nhóm cuối. */
@media (max-width: 1023px) {
  .khung { grid-template-columns: minmax(0, 1fr); }

  .cot-menu {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(300px, 86vw); height: 100svh;
    overflow-y: auto; border-right: 1px solid var(--line);
    transform: translateX(-100%);
    transition: transform 120ms ease;
  }
  .khung.mo-menu .cot-menu { transform: none; }

  /* Nút mở menu: cố định góc trên trái, luôn thấy, luôn đủ 44px. */
  .nut-menu {
    position: fixed; top: 12px; left: 12px; z-index: 50;
    min-height: var(--k-11); padding: 11px 16px;
    background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--bo);
    color: var(--paper); font-family: var(--chu-so); font-size: 12px;
    letter-spacing: .08em; cursor: pointer;
  }
  .nut-menu:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

  /* Nền mờ phía sau, bấm vào là đóng. */
  .man-che {
    position: fixed; inset: 0; z-index: 39; background: rgba(11, 15, 21, .72);
    border: none; padding: 0;
  }

  .noi-dung { padding: 68px 20px 40px; }
  .ts-hang { margin-left: 0; margin-right: 0; }
  .ts-o:first-child, .ts-o:last-child, .ts-o:nth-child(3) { padding-left: 20px; padding-right: 20px; }
  .bang-boc { margin: 0; }
  .bang th:first-child, .bang td:first-child { padding-left: 0; }
  .bang th:last-child,  .bang td:last-child  { padding-right: 0; }
}
@media (min-width: 1024px) {
  .nut-menu, .man-che { display: none; }
}


@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ---------- Màn đang dựng ---------- */
/* Một thẻ, không phải một trang trống có dòng chữ giữa màn. Trang trống đọc như hỏng;
   thẻ có nội dung đọc như một lời hẹn đã tính trước. */
.dang-dung-the {
  max-width: 62ch;
  margin-top: var(--k-5);
  padding: var(--k-5);
  background: var(--the-mo);
  border: 1px solid var(--vien-mo);
  border-left: 2px solid var(--nhan);
  border-radius: var(--r);
}
.dd-nhan {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--nhan);
}
.dd-mo {
  margin: var(--k-2) 0 0; font-size: 15px; line-height: 1.6;
  color: var(--chu); overflow-wrap: anywhere;
}
.dd-nguon {
  display: flex; flex-wrap: wrap; gap: var(--k-1) var(--k-3);
  margin-top: var(--k-4); padding-top: var(--k-3);
  border-top: 1px solid var(--vien-mo);
  font-size: 13px; line-height: 1.55;
}
.dd-nguon-nhan { color: var(--chu-phu); flex: none; }
.dd-nguon-gt { color: var(--chu); font-family: var(--chu-so); min-width: 0; overflow-wrap: anywhere; }
.dd-chan {
  max-width: 62ch; margin: var(--k-4) 0 0;
  font-size: 13px; line-height: 1.6; color: var(--chu-phu);
}

/* ---------- Danh sách để hành động ---------- */
.ds-tong { margin: var(--k-4) 0 var(--k-6); font-size: 13px; color: var(--chu-phu); }

.ds-khoi { margin: 0 0 var(--k-8); }
.ds-dau {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-4);
  padding-bottom: var(--k-3); border-bottom: 1px solid var(--vien-mo);
}
.ds-dau-chu { min-width: 0; }
.ds-dau h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ds-dau p { margin: var(--k-1) 0 0; font-size: 13px; line-height: 1.55; color: var(--chu-phu); }
/* Con số là thứ mắt tìm đầu tiên ở màn này, nên cho nó cỡ chữ của một con số chứ không
   phải cỡ của một nhãn. Dùng chữ số đều để bốn nhóm thẳng cột nhau. */
.ds-so {
  flex: none; font-family: var(--chu-so); font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--nhan);
}
.ds-so.rong { color: var(--chu-phu); opacity: 0.5; }

.ds-trong { margin: var(--k-3) 0 0; font-size: 14px; color: var(--chu-phu); }

.ds-nut-hang { display: flex; flex-wrap: wrap; gap: var(--k-2); margin: var(--k-3) 0 var(--k-4); }

/* Nút chép. Năm trạng thái, kể cả nhánh HỎNG: trình duyệt chặn chép khi trang không chạy
   https hoặc người dùng từ chối quyền, và lúc đó nút phải nói thật chứ không im lặng. */
.ds-chep {
  min-height: var(--k-11); padding: var(--k-2) var(--k-4);
  background: none; border: 1px solid var(--vien); border-radius: var(--r);
  color: var(--chu); font: inherit; font-size: 14px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.ds-chep.nho { min-height: 36px; padding: var(--k-1) var(--k-3); font-size: 13px; color: var(--chu-phu); }
@media (hover: hover) { .ds-chep:hover { border-color: var(--nhan); color: var(--nhan); } }
.ds-chep:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.ds-chep:active { background: var(--the); }
.ds-chep.xong { border-color: var(--nhan); background: var(--nhan); color: var(--tren-nhan); }
.ds-chep.hong { border-color: var(--xau); color: var(--xau); }

.ds-nguoi { display: flex; flex-direction: column; }
.ds-dong {
  display: flex; align-items: center; justify-content: space-between; gap: var(--k-4);
  padding: var(--k-3) 0; border-bottom: 1px solid var(--vien-mo);
}
.ds-dong-chu { min-width: 0; }
.ds-ten { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ds-phu {
  margin: 2px 0 0; font-size: 13px; color: var(--chu-phu);
  font-family: var(--chu-so); overflow-wrap: anywhere;
}
.ds-ben { display: flex; align-items: center; gap: var(--k-3); flex: none; }
.ds-vang { font-size: 13px; color: var(--chu-phu); white-space: nowrap; }
/* Vắng từ một tuần trở lên mới đổi màu. Tô cảnh báo cho người vắng hai ngày thì màu đó
   mất hết sức nặng, và cả cột sẽ đỏ rực chẳng nói lên điều gì. */
.ds-vang.lau { color: var(--xau); }

.ds-them {
  min-height: var(--k-11); margin: var(--k-3) 0 0; padding: var(--k-2) var(--k-4);
  background: none; border: 1px solid var(--vien-mo); border-radius: var(--r);
  color: var(--chu-phu); font: inherit; font-size: 14px; cursor: pointer;
}
@media (hover: hover) { .ds-them:hover { color: var(--chu); border-color: var(--vien); } }
.ds-them:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.ds-them:active { background: var(--the); }

.ds-chan {
  max-width: 62ch; margin: var(--k-6) 0 0;
  font-size: 13px; line-height: 1.6; color: var(--chu-phu);
}

@media (max-width: 620px) {
  /* Trên máy nhỏ, thẻ vắng và nút chép xuống dòng dưới thay vì bóp chữ tên lại. */
  .ds-dong { flex-direction: column; align-items: stretch; gap: var(--k-2); }
  .ds-ben { justify-content: space-between; }
}

/* ---------- Đối soát học viên ---------- */
.dsx-nguon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-3); margin: var(--k-4) 0 0; }
.dsx-o { padding: var(--k-4); background: var(--the-mo); border: 1px solid var(--vien-mo); border-radius: var(--r); }
/* Đường mã nhóm được nhấn vì đó là đường KHÔNG đi qua thanh toán, tức chỗ cần nhìn. */
.dsx-o.nhan { border-left: 3px solid var(--nhan); }
.dsx-so { margin: 0; font-family: var(--chu-so); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.dsx-o.nhan .dsx-so { color: var(--nhan); }
.dsx-ten { margin: var(--k-2) 0 0; font-size: 14px; font-weight: 600; }
.dsx-mo { margin: var(--k-1) 0 0; font-size: 13px; line-height: 1.55; color: var(--chu-phu); }

.dsx-luu { margin: var(--k-3) 0 0; max-width: 70ch; font-size: 13px; line-height: 1.6; color: var(--chu-phu); }

.dsx-the {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--vien-mo); color: var(--chu-phu); white-space: nowrap;
}
.dsx-the.canh { border-color: var(--nhan); color: var(--nhan); }

.dsx-cap { margin: var(--k-3) 0 0; padding: var(--k-3); background: var(--the-mo); border: 1px solid var(--vien-mo); border-radius: var(--r); }
.dsx-cap-khoa { margin: 0 0 var(--k-2); font-size: 13px; color: var(--chu-phu); font-family: var(--chu-so); overflow-wrap: anywhere; }
.dsx-cap-dong { margin: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }

.dsx-ma { margin: var(--k-4) 0 0; }
.dsx-ma-dong {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-3);
  padding: var(--k-3) 0; border-bottom: 1px solid var(--vien-mo);
}
.dsx-ma-ma { font-family: var(--chu-so); font-size: 15px; font-weight: 500; }
.dsx-ma-ten { font-size: 14px; color: var(--chu-phu); min-width: 0; }
.dsx-ma-so { margin-left: auto; font-family: var(--chu-so); font-size: 15px; font-variant-numeric: tabular-nums; }

/* Khối nói thẳng cái đo không được. Viền đứt để nhìn ra ngay là nó khác loại với các
   khối số ở trên: đây là chỗ THIẾU dữ liệu, không phải chỗ có dữ liệu. */
.dsx-thieu {
  max-width: 70ch; margin: var(--k-8) 0 0; padding: var(--k-4);
  border: 1px dashed var(--vien); border-radius: var(--r);
}
.dsx-thieu-de { margin: 0 0 var(--k-2); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--chu-phu); }
.dsx-thieu-y { margin: 0 0 var(--k-2); font-size: 14px; line-height: 1.6; color: var(--chu); }
.dsx-thieu-y:last-child { margin-bottom: 0; }

@media (max-width: 820px) { .dsx-nguon { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Buổi học ---------- */
.bh-dau { display: flex; align-items: center; gap: var(--k-3); margin: var(--k-4) 0 var(--k-2); }
.bh-nhan { font-size: 13px; color: var(--chu-phu); flex: none; }
.bh-chon {
  min-height: var(--k-11); min-width: 0; padding: var(--k-2) var(--k-3);
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r);
  color: var(--chu); font: inherit; font-size: 15px;
}
.bh-chon:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }

/* Nói rõ đang xem hình sản phẩm nào. Hai hình có luật quyền khác hẳn nhau, và người dùng
   cần biết mình đang nhìn cái nào TRƯỚC khi đọc cột ngày ra. */
.bh-loi-hinh {
  max-width: 70ch; margin: 0 0 var(--k-5);
  font-size: 13px; line-height: 1.6; color: var(--chu-phu);
}
.bh-tom { margin: 0 0 var(--k-3); font-size: 13px; color: var(--chu-phu); }

.bh-dong {
  display: flex; align-items: flex-start; gap: var(--k-4);
  padding: var(--k-3) 0; border-bottom: 1px solid var(--vien-mo);
}
.bh-so {
  flex: none; padding-top: 2px;
  font-family: var(--chu-so); font-size: 15px; color: var(--chu-phu);
  font-variant-numeric: tabular-nums;
}
.bh-chu { min-width: 0; flex: 1; }
.bh-ten { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.bh-phu { margin: 2px 0 0; font-size: 13px; color: var(--chu-phu); }
/* Chưa công bố là trạng thái đáng chú ý, không phải lỗi — dùng màu chữ chính chứ không
   dùng màu cảnh báo. Cảnh báo để dành cho thứ thật sự sai. */
.bh-phu.chua { color: var(--chu); }
.bh-the { margin: 4px 0 0; font-size: 12px; color: var(--chu-phu); font-family: var(--chu-so); }

.bh-ben {
  flex: none; font-size: 12px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--vien-mo); color: var(--chu-phu); white-space: nowrap;
}
/* Buổi lõi nhấn nhẹ vì đó là thứ người mới vào phải xem trước. Không phải cảnh báo. */
.bh-ben.loi { border-color: var(--nhan); color: var(--nhan); }

@media (max-width: 620px) {
  .bh-dau { flex-wrap: wrap; }
  .bh-chon { width: 100%; }
  .bh-dong { flex-wrap: wrap; }
  .bh-ben { margin-left: auto; }
}

/* ---------- Đối chiếu Zalo ---------- */
.dcz-thanh { display: flex; flex-wrap: wrap; gap: var(--k-3); margin: var(--k-4) 0 var(--k-3); }
.dcz-tim {
  flex: 1 1 260px; min-width: 0; min-height: var(--k-11); padding: var(--k-2) var(--k-3);
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r);
  color: var(--chu); font: inherit; font-size: 15px;
}
.dcz-tim:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.dcz-loc {
  flex: none; min-height: var(--k-11); padding: var(--k-2) var(--k-4);
  background: none; border: 1px solid var(--vien); border-radius: 999px;
  color: var(--chu-phu); font: inherit; font-size: 14px; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.dcz-loc[aria-pressed='true'] { border-color: var(--nhan); color: var(--nhan); }
@media (hover: hover) { .dcz-loc:hover { color: var(--chu); } }
.dcz-loc:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.dcz-loc:active { background: var(--the); }

.dcz-tom { margin: 0 0 var(--k-4); font-size: 13px; color: var(--chu-phu); }

.dcz-the {
  margin: 0 0 var(--k-4); padding: var(--k-4);
  background: var(--the-mo); border: 1px solid var(--vien-mo); border-radius: var(--r);
  border-left: 3px solid var(--nhan);
}
/* Đã đối chiếu thì nhạt hẳn đi: mắt phải bị kéo về những người CHƯA làm. */
.dcz-the.xong { border-left-color: var(--vien); opacity: .62; }

.dcz-dau {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-3);
  padding-bottom: var(--k-3); border-bottom: 1px solid var(--vien-mo);
}
.dcz-ten { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.dcz-zalo { margin: 3px 0 0; font-size: 14px; color: var(--nhan); overflow-wrap: anywhere; }

.dcz-ky {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--k-3); padding: var(--k-3) 0; border-bottom: 1px solid var(--vien-mo);
}
.dcz-ky-chu { min-width: 0; }
.dcz-ky-ma { margin: 0; font-family: var(--chu-so); font-size: 15px; color: var(--chu); }
.dcz-ky-phu { margin: 3px 0 0; font-size: 13px; color: var(--chu-phu); overflow-wrap: anywhere; }
.dcz-ky-ghi { margin: 3px 0 0; font-size: 13px; color: var(--nhan); overflow-wrap: anywhere; }
.dcz-ky-han { display: flex; flex-direction: column; gap: 3px; flex: none; }

.dcz-luoi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--k-3); margin: var(--k-4) 0 0;
}
.dcz-luoi label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dcz-nhan { font-size: 12px; color: var(--chu-phu); }
.dcz-o {
  min-height: var(--k-11); min-width: 0; padding: var(--k-2) var(--k-3);
  background: var(--nen); border: 1px solid var(--vien); border-radius: var(--r);
  color: var(--chu); font: inherit; font-size: 15px;
}
.dcz-o:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.dcz-ngay { font-family: var(--chu-so); font-size: 14px; }

.dcz-chan { display: flex; align-items: center; gap: var(--k-3); margin: var(--k-4) 0 0; }
.dcz-luu {
  min-height: var(--k-11); padding: var(--k-2) var(--k-4);
  background: var(--nhan); border: 1px solid var(--nhan); border-radius: var(--r);
  color: var(--tren-nhan); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .dcz-luu:hover { background: var(--chu); border-color: var(--chu); } }
.dcz-luu:focus-visible { outline: 2px solid var(--chu); outline-offset: 2px; }
.dcz-luu:active { transform: translateY(1px); }
.dcz-luu:disabled { opacity: .55; cursor: not-allowed; }
.dcz-bao { font-size: 13px; color: var(--chu-phu); }
.dcz-bao.xong { color: var(--nhan); }
.dcz-bao.hong { color: var(--xau); }

@media (max-width: 620px) {
  .dcz-luoi { grid-template-columns: minmax(0, 1fr); }
  .dcz-ky-han { width: 100%; }
}

/* ---------- Còn hạn và hết hạn ---------- */
.thn-no {
  font-size: 13px; color: var(--nhan); white-space: nowrap;
  font-family: var(--chu-so); font-variant-numeric: tabular-nums;
}
.thn-han { font-size: 13px; color: var(--chu-phu); white-space: nowrap; }
/* Chỉ hai mức đổi màu. Tô hết thì màu mất sức nặng và cả cột đỏ rực chẳng nói lên gì. */
.thn-han.sap { color: var(--chu); }
.thn-han.het { color: var(--xau); }
.thn-luu {
  max-width: 70ch; margin: 0 0 var(--k-6); padding: var(--k-3);
  background: var(--the-mo); border: 1px solid var(--vien-mo); border-radius: var(--r);
  font-size: 13px; line-height: 1.6; color: var(--chu-phu);
}

/* ---------- Tài chính Tinh Hoa ---------- */
/* Cảnh báo đứng TRƯỚC mọi con số, không phải chú thích cuối trang. Ai mở màn này là đọc
   câu này trước khi kịp tin vào bất cứ số nào. */
.tc-canh {
  max-width: 72ch; margin: var(--k-4) 0 var(--k-5); padding: var(--k-4);
  background: var(--the-mo); border: 1px solid var(--vien-mo);
  border-left: 3px solid var(--xau); border-radius: var(--r);
}
.tc-canh-de { margin: 0 0 var(--k-2); font-size: 14px; font-weight: 600; color: var(--chu); }
.tc-canh p { margin: 0 0 var(--k-2); font-size: 13px; line-height: 1.6; color: var(--chu-phu); }
.tc-canh p:last-child { margin-bottom: 0; }

.tc-hang { margin: 0 0 var(--k-4); }
.tc-hang-dau { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-3); }
.tc-hang-ten { font-family: var(--chu-so); font-size: 15px; overflow-wrap: anywhere; }
.tc-hang-so {
  flex: none; font-family: var(--chu-so); font-size: 15px; color: var(--nhan);
  font-variant-numeric: tabular-nums;
}
.tc-ray { height: 10px; margin: var(--k-2) 0 0; background: var(--the); border-radius: 5px; overflow: hidden; }
.tc-ray i { display: block; height: 100%; background: var(--nhan); border-radius: 5px; }
.tc-hang-phu { margin: var(--k-1) 0 0; font-size: 13px; color: var(--chu-phu); }
.dcz-sheet {
  flex: none; min-height: var(--k-11); max-width: 100%; padding: var(--k-2) var(--k-3);
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r);
  color: var(--chu); font: inherit; font-size: 14px;
}
.dcz-sheet:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }

/* ---------- Sổ cái dòng tiền ---------- */
.sc-de { margin: var(--k-8) 0 var(--k-2); font-size: 17px; font-weight: 600; }
.sc-de:first-of-type { margin-top: var(--k-5); }
.sc-mo { max-width: 70ch; margin: 0 0 var(--k-4); font-size: 13px; line-height: 1.6; color: var(--chu-phu); }

/* Ví cá nhân đánh dấu khác ví công ty. Không phải cảnh báo — chỉ là hai loại khác nhau,
   và người xem phải biết mình đang nhìn con số nào. */
.o-so.ca-nhan { border-left: 3px solid var(--chu-phu); }

.sc-thang { margin: 0 0 var(--k-4); }
.sc-thang-dau { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-3); }
.sc-thang-ten { font-family: var(--chu-so); font-size: 15px; }
.sc-thang-chenh {
  font-family: var(--chu-so); font-size: 15px; color: var(--nhan);
  font-variant-numeric: tabular-nums;
}
.sc-thang-chenh.am { color: var(--xau); }

.sc-ray {
  position: relative; height: 22px; margin: var(--k-2) 0 0;
  background: var(--the); border-radius: 4px; overflow: hidden;
}
.sc-ray i { display: block; height: 100%; border-radius: 4px; }
.sc-ray.thu i { background: var(--nhan); }
/* Chi dùng màu chữ phụ chứ không dùng màu cảnh báo: chi là việc bình thường của một
   doanh nghiệp, không phải chuyện xấu. Màu cảnh báo để dành cho thứ thật sự sai. */
.sc-ray.chi i { background: color-mix(in srgb, var(--chu-phu) 55%, transparent); }
.sc-ray span {
  position: absolute; left: var(--k-3); top: 0; line-height: 22px;
  font-size: 12px; color: var(--chu); font-family: var(--chu-so);
}

.sc-form {
  margin: 0 0 var(--k-5); padding: var(--k-4);
  background: var(--the-mo); border: 1px solid var(--vien-mo); border-radius: var(--r);
}
.sc-rong { grid-column: 1 / -1; }

.sc-tien {
  font-family: var(--chu-so); font-size: 15px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sc-tien.thu { color: var(--nhan); }
.sc-tien.chi { color: var(--chu); }
.sc-tien.chuyen_quy { color: var(--chu-phu); }
.sc-loai {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--vien-mo); color: var(--chu-phu); white-space: nowrap;
}
.sc-bill { font-size: 13px; color: var(--nhan); text-decoration: underline; }

/* ---------- Lưới ô số ----------
   Ba màn đang dùng .bc-luoi và các lớp con của .o-so mà tệp này CHƯA HỀ định nghĩa:
   Sổ cái, Tài chính Tinh Hoa, và nay là Liên Đoàn. Nghĩa là mấy ô số đó lâu nay
   hiện ra không có định dạng gì. Sửa ở đây một lần cho cả ba.

   minmax(0, ...) chứ không phải 1fr, vì đúng cái bẫy đã ghi ở dải tab phía trên:
   phần tử lưới không tự co xuống dưới bề rộng nội dung, mà con số tiền thì dài. */
.bc-luoi {
  display: grid; gap: var(--k-4);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  margin: 0 0 var(--k-5);
}
.bc-luoi.hai { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.bc-luoi.bon { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }

.o-so .nhan {
  margin: 0 0 var(--k-1); font-size: 12.5px; line-height: 1.4;
  color: var(--chu-phu); text-transform: none;
}
.o-so .so {
  font-family: var(--chu-so); font-size: 26px; line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.o-so .so.tien { color: var(--nhan); }
.o-so .phu { margin: var(--k-1) 0 0; font-size: 12px; color: var(--chu-phu); }

/* Ô đang mang một con số CHƯA CHỐT. Không tô đỏ — số không sai, chỉ là chưa đủ.
   Viền trái đủ để mắt dừng lại mà không hét lên. */
.o-so.canh-bao { border-left: 3px solid var(--xau); padding-left: var(--k-3); }
.o-so.canh-bao .so.tien { color: var(--chu); }

.o-canh {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-3);
  margin: 0 0 var(--k-5); padding: var(--k-3) var(--k-4);
  background: var(--the-mo); border: 1px solid var(--vien-mo);
  border-left: 3px solid var(--xau); border-radius: var(--r);
}
.o-canh p { margin: 0; flex: 1 1 240px; font-size: 13px; line-height: 1.6; color: var(--chu-phu); }
.o-canh p b { color: var(--chu); font-weight: 600; }

/* ---------- Liên Đoàn: nút sang tab độc lập ---------- */
.nut-tab-khac {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 0 var(--k-2);
  width: 100%; min-height: var(--k-11); margin-top: var(--k-4);
  padding: var(--k-2) var(--k-3);
  background: none; border: 1px solid var(--vien-mo); border-radius: var(--r);
  color: var(--chu-phu); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
/* Vạch ngăn phía trên: đọc ra là "và còn một mảng khác", không phải "mục thứ hai mươi". */
.nut-tab-khac:not(.lui) { border-top: 1px solid var(--vien); padding-top: var(--k-3); }
.ntk-ten { grid-column: 1; font-size: 14px; color: var(--chu); white-space: nowrap; }
.ntk-mo  { grid-column: 1; font-size: 11.5px; color: var(--chu-phu); }
.ntk-mui { grid-column: 2; grid-row: 1 / -1; font-family: var(--chu-so); font-size: 15px; }
.nut-tab-khac.lui { grid-template-columns: auto minmax(0, 1fr); margin: 0 0 var(--k-4); }
.nut-tab-khac.lui .ntk-mui { grid-column: 1; grid-row: 1; }
.nut-tab-khac.lui .ntk-ten { grid-column: 2; }

@media (hover: hover) {
  .nut-tab-khac:hover { border-color: var(--nhan); color: var(--chu); }
  .nut-tab-khac:hover .ntk-mui { color: var(--nhan); }
}
.nut-tab-khac:active { background: var(--the-mo); }
.nut-tab-khac:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.nut-tab-khac[disabled] { opacity: .45; cursor: not-allowed; }

/* Đầu nhóm của menu Liên Đoàn là chữ, không bấm được, nên không giả dạng nút. */
.nhom-dau.tinh { cursor: default; background: none; border: none; padding-left: 0; }

/* ---------- Liên Đoàn: thẻ một round ---------- */
.ld-round {
  display: block; width: 100%; margin: 0 0 var(--k-3); padding: var(--k-3) var(--k-4);
  background: var(--the-mo); border: 1px solid var(--vien-mo); border-radius: var(--r);
  color: var(--chu); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
@media (hover: hover) { .ld-round:hover { border-color: var(--nhan); background: var(--the); } }
.ld-round:active { background: var(--the); }
.ld-round:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }

.ld-round-dau { display: flex; align-items: baseline; gap: var(--k-2); flex-wrap: wrap; }
.ld-ma {
  font-family: var(--chu-so); font-size: 13px; color: var(--tren-nhan);
  background: var(--nhan); border-radius: 3px; padding: 1px 7px;
}
.ld-ma.nho { font-size: 11.5px; padding: 0 5px; }
.ld-ten { font-size: 15px; font-weight: 600; }
.ld-gia { margin-left: auto; font-family: var(--chu-so); font-size: 12.5px; color: var(--chu-phu); }

/* Thanh này đo VỐN CÒN LẠI trên vốn đã góp. Phần hụt bên phải chính là phần đã thoái. */
.ld-thanh {
  height: 6px; margin: var(--k-2) 0; border-radius: 3px;
  background: color-mix(in srgb, var(--xau) 45%, transparent); overflow: hidden;
}
.ld-thanh i { display: block; height: 100%; background: var(--nhan); }
.ld-round-so { display: flex; justify-content: space-between; gap: var(--k-3); flex-wrap: wrap; }
.ld-round-so span { font-size: 12.5px; color: var(--chu-phu); font-family: var(--chu-so); }
.ld-round-so .am { color: var(--xau); }
.ld-round-so .nhat { opacity: .6; }

/* ---------- Liên Đoàn: một dòng người ---------- */
.ld-dong {
  display: flex; align-items: center; gap: var(--k-3);
  padding: var(--k-2) 0; border-bottom: 1px solid var(--vien-mo);
}
.ld-stt { flex: none; width: 2.2em; font-family: var(--chu-so); font-size: 12px; color: var(--chu-phu); }
.ld-ai { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ld-hoten { font-size: 14px; overflow-wrap: anywhere; }
.ld-phu { font-size: 12px; color: var(--chu-phu); overflow-wrap: anywhere; }
.ld-phu.mo { color: var(--xau); }
.ld-ghi { font-size: 12px; color: var(--chu-phu); font-style: italic; }
.ld-tien {
  flex: none; font-family: var(--chu-so); font-size: 14px;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--nhan);
}
.ld-tien-cum { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ld-dong.thoai .ld-tien { color: var(--chu); }
.ld-dong.thoai.mo { border-left: 3px solid var(--xau); padding-left: var(--k-3); }
.ld-dong.thoai.lech { border-left: 3px solid var(--xau); padding-left: var(--k-3); }
.the-canh {
  flex: none; font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--vien-mo); color: var(--chu-phu); white-space: nowrap;
}

/* ---------- Liên Đoàn: màn soát thoái vốn ---------- */
.ld-soat {
  display: grid; gap: var(--k-2) var(--k-4);
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 0 var(--k-3); padding: var(--k-3) var(--k-4);
  background: var(--the-mo); border: 1px solid var(--vien-mo);
  border-left: 3px solid var(--xau); border-radius: var(--r);
}
.ld-soat-ai { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-soat-ai .ld-ma { align-self: flex-start; }
.ld-soat-so { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ld-soat-so .ld-tien { font-size: 15px; }
.ld-soat-nhap {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2);
  padding-top: var(--k-2); border-top: 1px solid var(--vien-mo);
}
.ld-soat-nhap label { font-size: 12.5px; color: var(--chu-phu); }
.ld-soat-nhap label.canh { color: var(--xau); }
.ld-soat-nhap .o-nhap.tien {
  width: 11em; min-height: var(--k-11); margin: 0; padding: var(--k-2) var(--k-3);
  background: var(--nen); border: 1px solid var(--vien); border-radius: var(--r);
  color: var(--chu); font-family: var(--chu-so); font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ld-soat-nhap .o-nhap.tien:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
/* Hai nút này chốt một con số tiền, nên phải đạt 44px như mọi mục bấm được khác.
   .nut.nho mặc định chỉ cao 29px — vừa đủ cho nút phụ trong một bảng, không đủ cho
   ngón tay trên điện thoại ở một thao tác không hoàn tác được. */
/* Mọi nút trong một dòng danh sách của mảng Liên Đoàn đều là nút GẮN TIỀN của một
   người vào một hồ sơ. 44px như mọi mục bấm được khác, .nut.nho mặc định chỉ 29px. */
.ld-dong .nut, .gy-hang .nut { min-height: var(--k-11); padding: var(--k-2) var(--k-3); }

.ld-soat-nhap .nut, .o-canh .nut, .nut.nho.lui { min-height: var(--k-11); padding: var(--k-2) var(--k-4); }

.ld-bao { font-size: 12.5px; color: var(--chu-phu); }
.ld-bao.xong { color: var(--nhan); }
.ld-bao.loi { color: var(--xau); }

@media (max-width: 820px) {
  /* Menu là dải tab ngang, nên nút sang tab khác cũng phải là một viên trong dải đó,
     không phải một khối rộng cả màn nằm chắn dưới. */
  .nut-tab-khac {
    order: 1; width: auto; margin: 0; padding: var(--k-2) var(--k-3);
    border: 1px solid var(--vien-mo); border-radius: 999px;
    grid-template-columns: auto auto;
  }
  .nut-tab-khac:not(.lui) { border-top: 1px solid var(--vien-mo); padding-top: var(--k-2); }
  .ntk-mo { display: none; }        /* nhãn hai dòng trong một viên tab thì không đọc được */
  .ntk-mui { grid-row: 1; }
  .nhom-dau.tinh { order: 1; border: none; }

  /* Menu Liên Đoàn chỉ có HAI mục, và hai viên đó rộng 376px trong màn 375px — hụt đúng
     một pixel, đủ để cắt mất chữ cuối của viên thứ hai. Menu chính cuộn ngang được vì nó
     có bốn năm mục và người dùng đoán ra là còn thứ để kéo; hai viên bị cắt một chữ thì
     chỉ đọc như lỗi hiển thị. Nên riêng menu này cho xuống dòng. */
  #nhom-lien-doan { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 620px) {
  .ld-soat { grid-template-columns: minmax(0, 1fr); }
  .ld-soat-so { align-items: flex-start; }
  .ld-soat-nhap .o-nhap.tien { flex: 1 1 8em; width: auto; }
  .ld-round-so { gap: var(--k-1); }
}

/* ---------- Vai trò và phân quyền ---------- */
.vt-muc {
  margin: 0 0 var(--k-3); padding: var(--k-3) var(--k-4);
  background: var(--the-mo); border: 1px solid var(--vien-mo); border-radius: var(--r);
}
.vt-muc-dau { display: flex; align-items: baseline; gap: var(--k-3); flex-wrap: wrap; }
.vt-ten { font-size: 15px; font-weight: 600; }
.vt-dem { font-size: 12.5px; color: var(--chu-phu); font-family: var(--chu-so); }
.vt-ds { margin: var(--k-2) 0 0; padding-left: 0; list-style: none; }
.vt-ds li {
  position: relative; padding-left: 18px; margin: 0 0 3px;
  font-size: 13px; line-height: 1.55;
}
.vt-ds li::before { position: absolute; left: 0; font-family: var(--chu-so); }
/* Dấu cộng cho việc làm được, dấu gạch cho việc không. Cố ý KHÔNG dùng màu cảnh báo cho
   phần "không được": mức quyền hẹp là thiết kế đúng, không phải chuyện xấu. */
.vt-ds.duoc  li { color: var(--chu); }
.vt-ds.duoc  li::before { content: '+'; color: var(--nhan); }
.vt-ds.khong li { color: var(--chu-phu); }
.vt-ds.khong li::before { content: '\2212'; }

.vt-the {
  flex: none; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; border: 1px solid var(--vien-mo); color: var(--chu-phu);
}
/* Chỉ mức cao nhất được tô màu nhấn. Tô cả ba thì không còn phân biệt được mức nào
   đáng chú ý, mà cái đáng chú ý ở màn này đúng là "ai đang làm được mọi thứ". */
.vt-the.chu_he_thong {
  background: var(--nhan); color: var(--tren-nhan); border-color: var(--nhan); font-weight: 600;
}
.ld-dong.vt-nguoi.tat { opacity: .55; }

.vt-nhat-ky {
  display: flex; align-items: baseline; gap: var(--k-3);
  padding: var(--k-2) 0; border-bottom: 1px solid var(--vien-mo);
}
.vt-nhat-ky > .ld-phu { flex: none; width: 8.5em; font-family: var(--chu-so); }

@media (max-width: 620px) {
  .vt-nhat-ky { flex-direction: column; gap: 2px; }
  .vt-nhat-ky > .ld-phu { width: auto; }
}

/* ---------- Tài khoản quản trị ---------- */
.tk-form label { display: block; }
.o-nhap-o {
  display: block; width: 100%; min-height: var(--k-11); margin-top: var(--k-1);
  padding: var(--k-2) var(--k-3);
  background: var(--nen); border: 1px solid var(--vien); border-radius: var(--r);
  color: var(--chu); font: inherit; font-size: 14px;
}
.o-nhap-o:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
.o-nhap-o[disabled] { opacity: .45; cursor: not-allowed; }
.o-nhap-o.nho { width: auto; min-width: 9em; font-size: 13px; }
.tk-hang-nut { display: flex; align-items: center; gap: var(--k-3); flex-wrap: wrap; }

.tk-dong {
  display: flex; align-items: center; gap: var(--k-3); flex-wrap: wrap;
  padding: var(--k-3) 0; border-bottom: 1px solid var(--vien-mo);
}
.tk-dong.tat { opacity: .55; }
/* Mọi nút ở đây đều đổi quyền của một người. 44px như mọi mục bấm được khác —
   .nut.nho mặc định chỉ 29px, đủ cho nút phụ trong bảng, không đủ cho ngón tay ở
   một thao tác đổi quyền. */
.tk-nut { display: flex; align-items: center; gap: var(--k-2); flex-wrap: wrap; }
.tk-nut .nut { min-height: var(--k-11); padding: var(--k-2) var(--k-3); }
.nut.nho.xoa { color: var(--xau); border-color: color-mix(in srgb, var(--xau) 45%, transparent); }
@media (hover: hover) { .nut.nho.xoa:hover { border-color: var(--xau); } }

/* ---------- Danh mục tài sản ---------- */
.ts-khoi { margin: 0 0 var(--k-3); }
.ts-the {
  display: block; width: 100%; padding: var(--k-3) var(--k-4);
  background: var(--the-mo); border: 1px solid var(--vien-mo);
  /* Viền trái là chỗ đọc nhanh nhất "số này đã ai soát chưa". Mặc định là CHƯA,
     nên mặc định là màu cảnh báo — không phải để dọa, mà vì cả 13 dòng đều chưa. */
  border-left: 3px solid var(--xau); border-radius: var(--r);
  color: var(--chu); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ts-khoi.xong .ts-the { border-left-color: var(--nhan); }
@media (hover: hover) { .ts-the:hover { background: var(--the); } }
.ts-the:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }

.ts-dau { display: flex; align-items: baseline; gap: var(--k-3); flex-wrap: wrap; }
.ts-ten { font-size: 15px; font-weight: 600; }
.ts-tt { font-size: 12px; color: var(--chu-phu); margin-left: auto; white-space: nowrap; }
.ts-vitri { margin: 2px 0 0; font-size: 12.5px; color: var(--chu-phu); }
.ts-so { display: flex; gap: var(--k-4); flex-wrap: wrap; margin-top: var(--k-2); }
.ts-so span { font-family: var(--chu-so); font-size: 13px; }
.ts-gia { color: var(--nhan); }
.ts-phan { color: var(--chu-phu); }
/* Số ước tính viết nghiêng và mờ hơn. "khoảng 10.000m²" mà hiện y như số đo thật thì
   sáu tháng nữa không ai phân biệt được nữa. */
.ts-so .uoc { font-style: italic; opacity: .8; }
.ts-so .thieu { color: var(--chu-phu); font-style: italic; }
.ts-hien-trang { margin: var(--k-2) 0 0; font-size: 12.5px; color: var(--chu-phu); line-height: 1.5; }
.ts-the-hang { display: flex; gap: var(--k-2); flex-wrap: wrap; margin-top: var(--k-2); }
.the-canh.canh { color: var(--xau); border-color: color-mix(in srgb, var(--xau) 45%, transparent); }
.the-canh.xong { color: var(--nhan); border-color: color-mix(in srgb, var(--nhan) 45%, transparent); }

.ts-chi-tiet {
  padding: var(--k-3) var(--k-4);
  border: 1px solid var(--vien-mo); border-top: none;
  border-radius: 0 0 var(--r) var(--r);
}
.ts-de { margin: var(--k-3) 0 var(--k-2); font-size: 14px; font-weight: 600; }
.ts-nguon { margin: 0; font-size: 12px; color: var(--chu-phu); font-style: italic; }
.ts-hang-nut { display: flex; align-items: center; gap: var(--k-2); flex-wrap: wrap; }
.ts-hang-nut .nut { min-height: var(--k-11); }

@media (max-width: 620px) {
  .ts-tt { margin-left: 0; }
  .ts-so { gap: var(--k-2); }
  .tk-dong { align-items: flex-start; }
}

/* ---------- Gợi ý Liên Đoàn trong màn Đối chiếu Zalo ---------- */
/* Nằm trong thẻ của một người, nên phải đọc ra là "thêm một chuyện về người này",
   không phải một khối lạ chen vào. Dùng nền chìm và viền trái màu nhấn. */
.gy-khoi {
  margin: var(--k-2) 0 0; padding: var(--k-2) var(--k-3);
  background: var(--the-mo); border-left: 3px solid var(--nhan);
  border-radius: 0 var(--r) var(--r) 0;
}
.gy-de { margin: 0; font-size: 13px; }
.gy-de b { color: var(--nhan); font-weight: 600; }
.gy-de span { color: var(--chu-phu); font-family: var(--chu-so); font-size: 12px; }
.gy-so { margin: 2px 0 var(--k-2); font-size: 12.5px; color: var(--chu-phu);
         font-family: var(--chu-so); }
.gy-hang { display: flex; align-items: center; gap: var(--k-2); flex-wrap: wrap; }
.gy-hang .nut { min-height: var(--k-11); padding: var(--k-2) var(--k-3); }

/* ---------- Bảng danh sách ----------
   Lưới cột lấy nguyên từ bản bàn giao: 56px 1.6fr 1.2fr 1fr 1fr 1fr 130px.
   Dùng table-layout: fixed để bảng bám đúng lưới đó thay vì tự co theo nội dung —
   không thì một cái tên dài làm lệch hết các cột còn lại. */
.bang-boc { margin: 0 -40px; }
.bang { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bang col, .bang th, .bang td { text-align: left; }
.bang thead th {
  padding: 14px 0; font-size: 11px; font-weight: 400; color: var(--slate-500);
  border-bottom: 1px solid var(--line);
}
.bang th:first-child, .bang td:first-child { padding-left: 40px; }
.bang th:last-child,  .bang td:last-child  { padding-right: 40px; }
.bang th:nth-child(1), .bang td:nth-child(1) { width: 56px; }
.bang th:nth-child(2), .bang td:nth-child(2) { width: 24%; }
.bang th:nth-child(3), .bang td:nth-child(3) { width: 18%; }
.bang th:nth-child(4), .bang td:nth-child(4) { width: 13%; }
.bang th:nth-child(5), .bang td:nth-child(5) { width: 15%; }
.bang th:nth-child(6), .bang td:nth-child(6) { width: 15%; }
.bang th:nth-child(7), .bang td:nth-child(7) { width: 130px; text-align: right; }
/* Bảng nhiều cột khác khuôn danh sách người (tab Chuyển đổi LINK): cột tự co theo chữ, không dùng độ rộng cố định ở trên. */
.bang.bang-tu-do { table-layout: auto; }
.bang.bang-tu-do th, .bang.bang-tu-do td { width: auto; text-align: left; }
.bang.bang-tu-do td:first-child { min-width: 150px; }

.bang tbody td {
  padding: 18px 12px 18px 0; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.dong-nguoi { cursor: pointer; transition: background-color 120ms ease; }
/* Hover đổi nền, KHÔNG đổi màu chữ, KHÔNG dịch chuyển. */
@media (hover: hover) { .dong-nguoi:hover td { background: var(--ink-700); } }
.dong-nguoi:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.bang .stt { color: var(--slate-600); font-size: 12px; }
.bang-ten { display: block; font-size: 15px; color: var(--paper); }
.bang-phu {
  display: block; margin-top: 3px; font-size: 12px; color: var(--slate-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Tên Zalo đầy đủ, còn nguyên hashtag. Cho xuống dòng chứ không cắt bằng ellipsis: cắt
   là mất đúng phần hashtag ở cuối, tức mất đúng thứ dùng để phân biệt người này với
   người kia. Thà cao thêm một dòng. */
.bang-zalo {
  display: block; margin-top: 2px; font-size: 11.5px; color: var(--amber);
  white-space: normal; word-break: break-word; line-height: 1.35;
}
.bang-nho { font-size: 13px; color: var(--slate-400); }
.bang-mo { font-size: 12px; color: var(--slate-500); }
@media (hover: hover) { .dong-nguoi:hover .bang-mo { color: var(--amber); } }

/* Thanh đo 80×4px. Phần đầy amber khi từ 70% trở lên, dưới ngưỡng thì xám. */
.thanh-do {
  display: block; width: 80px; height: 4px; margin-bottom: 6px;
  background: rgba(243, 240, 232, .18);
}
.thanh-do i { display: block; height: 100%; background: var(--slate-500); }
.thanh-do i.day { background: var(--amber); }

/* Ba mức trạng thái phân biệt bằng NỀN, VIỀN và SẮC ĐỘ — không bằng màu sắc.
   Đọc ra được cả khi in đen trắng, và không cần ai nhớ đỏ nghĩa là gì. */
.the-tt {
  display: inline-block; padding: 4px 9px;
  font-family: var(--chu-so); font-size: 11px; letter-spacing: .06em;
  white-space: nowrap;
}
.the-tt.dac  { background: var(--amber); color: var(--ink-800); }
.the-tt.vien { border: 1px solid var(--line); color: var(--slate-400); }
.the-tt.mo   { color: var(--slate-600); }

/* Chip lọc: viền 1px, chip đang bật đổi VIỀN và CHỮ sang amber, không tô nền. */
.hang-loc { display: flex; flex-wrap: wrap; gap: var(--k-2); margin: 0 0 var(--k-4); }
.loc {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--k-11);
  padding: 8px 14px; background: none;
  border: 1px solid var(--line); border-radius: var(--bo);
  color: var(--slate-400); font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
@media (hover: hover) { .loc:hover { border-color: var(--slate-500); color: var(--paper); } }
.loc:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.loc.dang-chon { border-color: var(--amber); color: var(--amber); }
.loc .so { font-family: var(--chu-so); font-size: 12px; color: var(--slate-500); }
.loc.dang-chon .so { color: var(--amber); }
.ngat-loc { width: 1px; align-self: stretch; background: var(--line); margin: 0 6px; }

/* Màn hẹp: bảng thành danh sách thẻ dọc. KHÔNG cuộn ngang bảng — cuộn ngang trên
   điện thoại là cách chắc chắn để người dùng không bao giờ thấy ba cột cuối. */
@media (max-width: 767px) {
  .bang-boc { margin: 0; }
  .bang, .bang tbody, .bang tr, .bang td { display: block; width: auto; }
  .bang thead { display: none; }
  .bang tbody tr {
    padding: 14px 0; border-bottom: 1px solid var(--line-soft);
  }
  .bang tbody td {
    padding: 2px 0; border: none;
  }
  .bang td:first-child, .bang td:last-child { padding-left: 0; padding-right: 0; }
  .bang td:nth-child(1) { display: none; }   /* số thứ tự không đáng một dòng riêng */
  .bang td:nth-child(7) { margin-top: 8px; text-align: left; }
  .bang th:nth-child(n), .bang td:nth-child(n) { width: auto; }
}

/* ---------- Thanh đầu trang ---------- */
.dau-trang {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--k-4); flex-wrap: wrap; margin: 0 0 var(--k-6);
}
.nhan-muc { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; color: var(--slate-500); }
.de-trang {
  margin: 0; font-family: var(--chu-diem-nhan); font-size: 26px; font-weight: 600;
  color: var(--paper); line-height: 1.2;
}
.de-phu { margin: 0; font-size: 16px; font-weight: 500; color: var(--paper); }
.dau-trang-phai { display: flex; align-items: center; gap: var(--k-3); flex-wrap: wrap; }
.o-ky {
  padding: 9px 14px; border: 1px solid var(--line);
  font-size: 12px; color: var(--slate-500); white-space: nowrap;
}
.nut-amber.nho { width: auto; padding: 11px 18px; margin: 0; font-size: 14px; }

/* ---------- Tổng quan: hàng ô số liệu ----------
   Bốn cột, viền dưới cả hàng, mỗi ô viền phải. Không bo góc, không đổ bóng —
   phân tầng bằng nền đặc và đường kẻ 1px. */
.ts-hang {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 -40px var(--k-8); border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.ts-o { padding: 28px 32px; border-right: 1px solid var(--line); }
.ts-o:first-child { padding-left: 40px; }
.ts-o:last-child { border-right: none; padding-right: 40px; }
/* Ô cần chú ý: nền sẫm hơn một bậc, nhãn và số màu nhấn. Đúng MỘT ô được như vậy. */
.ts-o.chu-y { background: var(--ink-650); }
.ts-o.chu-y .ts-nhan, .ts-o.chu-y .ts-so { color: var(--amber); }

.ts-nhan { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; color: var(--slate-500); }
.ts-so {
  font-family: var(--chu-so); font-size: 42px; font-weight: 400; line-height: 1;
  color: var(--paper); font-variant-numeric: tabular-nums;
}
.ts-chu { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--slate-500); }

/* ---------- Tổng quan: thân trang ---------- */
.ts-than { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--k-8); }

.bd-dau { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-3); }
.bd-nguon { font-size: 12px; color: var(--slate-500); }
.bd-cot {
  display: flex; align-items: flex-end; gap: 14px;
  height: 180px; margin: var(--k-6) 0 var(--k-4);
}
.bd-mot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Chặn bề rộng cột. Chỉ có hai tháng dữ liệu thì flex:1 thổi mỗi cột thành một
   khối to bằng nửa màn, đọc ra như hai tấm bảng chứ không phải biểu đồ. */
.bd-mot i { display: block; width: 100%; max-width: 56px; background: var(--ink-500); }
.bd-mot.day i { background: var(--amber); }
.bd-mot span { font-size: 11px; color: var(--slate-500); }
.bd-dien-giai {
  display: flex; gap: 12px; align-items: flex-start; margin: 0;
  padding-top: var(--k-4); border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.55; color: var(--slate-400);
}
.marker.nho { width: 10px; height: 10px; margin-top: 6px; }

/* Hàng chờ: nền sẫm hơn nền chính một bậc, tách khỏi vùng nội dung bằng nền chứ
   không bằng khung viền. */
.hcho { background: var(--ink-850); padding: 24px 26px; align-self: start; }
.hcho-muc {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-3);
  width: 100%; padding: 16px 0; border: none; border-bottom: 1px solid var(--line-soft);
  background: none; font: inherit; text-align: left; cursor: pointer;
  transition: background-color 120ms ease;
}
@media (hover: hover) { .hcho-muc:hover { background: var(--ink-700); } }
.hcho-muc:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.hcho-ten { display: block; font-size: 15px; color: var(--paper); }
.hcho-mo { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--slate-500); }
.hcho-tt { flex: none; font-size: 12px; color: var(--slate-400); white-space: nowrap; }
.hcho-chan { margin: 18px 0 0; font-size: 11px; color: var(--slate-600); }

@media (max-width: 1279px) {
  .ts-than { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1023px) {
  .ts-hang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-o:nth-child(2) { border-right: none; padding-right: 40px; }
  .ts-o:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ts-o:nth-child(3) { padding-left: 40px; }
  .ts-than { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ts-hang { grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--k-6); }
  .ts-o, .ts-o:first-child, .ts-o:last-child {
    padding: 20px 0; border-right: none; border-bottom: 1px solid var(--line);
  }
  .hcho { margin: 0 -20px; }
}

/* ---------- Hồ sơ học viên ---------- */
.hs-dau { align-items: flex-start; }
.hs-ten {
  margin: 0; font-family: var(--chu-diem-nhan); font-size: 34px; font-weight: 600;
  color: var(--paper); line-height: 1.15;
}
.hs-nen { margin: 6px 0 0; font-size: 12px; color: var(--slate-500); }
.hs-the { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.nut-vien {
  min-height: var(--k-11); padding: 11px 18px;
  background: none; border: 1px solid var(--line); border-radius: var(--bo);
  color: var(--slate-400); font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
@media (hover: hover) { .nut-vien:hover { border-color: var(--amber); color: var(--amber); } }
.nut-vien:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.hs-than { display: grid; grid-template-columns: minmax(0, 1fr) var(--cot-le); gap: var(--k-8); }
.hs-trai { min-width: 0; }

/* Lề chú giải: viền trái 2px màu nhấn. Đây là chỗ duy nhất trong hệ dùng viền
   2px — nó đánh dấu rằng cột này khác loại với mọi thứ bên trái, không phải một
   khối nội dung nữa mà là ghi chép của con người. */
.le {
  background: var(--ink-850); border-left: 2px solid var(--amber);
  padding: 26px 28px; align-self: start;
}
.le-de { margin: 0 0 20px; font-size: 12px; letter-spacing: .08em; color: var(--amber); }
.le-muc { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.le-ky { margin: 0 0 8px; font-size: 11px; letter-spacing: .06em; color: var(--slate-500); }
.le-chu { margin: 0; font-size: 14px; line-height: 1.55; color: var(--slate-300); }
.le-trong { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--slate-500); }

.le-soan { margin-top: var(--k-4); }
.le-nhap {
  width: 100%; padding: 12px; background: var(--ink-900);
  border: 1px solid var(--line); border-radius: var(--bo);
  color: var(--paper); font: inherit; font-size: 14px; line-height: 1.55; resize: vertical;
}
.le-nhap:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.le-hang { display: flex; align-items: center; gap: var(--k-3); flex-wrap: wrap; margin-top: var(--k-3); }
.le-chan {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 10.5px; line-height: 1.6; letter-spacing: .06em; color: var(--slate-600);
}

@media (max-width: 1279px) { .hs-than { grid-template-columns: minmax(0, 1fr) 320px; } }
/* Dưới 1024px lề chú giải xuống dưới nội dung chính, không thu nhỏ thêm nữa:
   một cột ghi chép rộng 240px thì mỗi dòng còn năm chữ, đọc không ra ý. */
@media (max-width: 1023px) { .hs-than { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Nhật ký thao tác ---------- */
.nk-ngay {
  margin: var(--k-6) 0 var(--k-2); padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .1em; color: var(--slate-500);
}
.nk-ngay:first-of-type { margin-top: var(--k-4); }
.nk-dong {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--k-3);
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.nk-gio { font-size: 12px; color: var(--slate-600); padding-top: 2px; }
.nk-noi-dung { min-width: 0; }
.nk-viec { margin: 0; font-size: 15px; color: var(--slate-400); }
.nk-viec b { color: var(--paper); font-weight: 500; }
.nk-phu { margin: 4px 0 0; font-size: 11px; color: var(--slate-600); }
/* Phần trước → sau. Cho xuống dòng được, vì có thao tác đổi bốn năm trường một lúc. */
.nk-doi {
  margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--slate-400);
  overflow-wrap: anywhere;
}
.nk-ly-do { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--slate-500); }

@media (max-width: 620px) {
  .nk-dong { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Tổng quan đứng riêng trên đầu cột, cách nhóm đầu tiên bằng một đường kẻ. */
.muc-goc { border-bottom: 1px solid var(--line); }

/* ---------- Khối kiểm soát ----------
   Mỗi dòng là một con số ĐÁNG LẼ PHẢI BẰNG KHÔNG. Dòng sạch mờ đi, dòng còn việc
   sáng lên. Ngược lại là bảng điều khiển toàn màu, nhìn mãi không ra chỗ cần đụng. */
.ks { margin: 0 0 var(--k-8); }
.ks-de {
  margin: 0 0 var(--k-2); padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .1em; color: var(--slate-500);
}
.ks-dong {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center; gap: var(--k-4);
  width: 100%; min-height: var(--k-11); padding: 16px 0;
  background: none; border: none; border-bottom: 1px solid var(--line-soft);
  border-radius: var(--bo); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 120ms ease;
}
@media (hover: hover) { .ks-dong:hover { background: var(--ink-700); } }
.ks-dong:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.ks-so {
  font-family: var(--chu-so); font-size: 28px; line-height: 1; color: var(--amber);
  font-variant-numeric: tabular-nums; text-align: right;
}
.ks-chu { min-width: 0; }
.ks-nhan { display: block; font-size: 15px; color: var(--paper); }
.ks-mo { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--slate-500); }
.ks-so.tien { font-size: 19px; }
.ks-mui { flex: none; font-size: 11px; color: var(--amber); white-space: nowrap; }

/* Dòng SẠCH: mờ hết đi. Số 0 là tin tốt, và tin tốt thì không cần chiếm sự chú ý. */
.ks-dong.sach .ks-so   { color: var(--slate-600); }
.ks-dong.sach .ks-nhan { color: var(--slate-400); }
.ks-dong.sach .ks-mui  { color: var(--slate-600); }

@media (max-width: 620px) {
  .ks-dong { grid-template-columns: 72px minmax(0, 1fr); gap: var(--k-3); }
  .ks-mui { display: none; }
  .ks-so { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MÀN CHƯƠNG TRÌNH VÀ KHÓA

   Mỗi chương trình một thẻ, các kỳ khai giảng xếp trong thẻ đó. Thẻ chứ không
   phải bảng: hai hình sản phẩm có cột khác nhau, nhét chung một bảng thì
   membership để trống nửa số cột và người đọc tưởng thiếu dữ liệu.

   TRẠNG THÁI PHÂN BIỆT BẰNG SẮC ĐỘ VÀ KIỂU VIỀN, KHÔNG BẰNG MÀU.
   Bản đầu tôi viết màu xanh lá cho "đang bán" và "đang mở" — sai luật của hệ, và
   sai cả về việc: hai thứ cùng xanh thì không cái nào nổi.

   Trên màn này amber chỉ dành cho MỘT thứ: kỳ đang mở. Đó là thứ duy nhất cần
   hành động. Hình sản phẩm phân biệt bằng viền nét đứt, ngừng bán bằng chữ mờ.
   ══════════════════════════════════════════════════════════════════════════ */
.ctk-the {
  border: 1px solid var(--vien); border-radius: 12px; background: var(--the);
  padding: 16px 18px; margin: 0 0 12px;
}
.ctk-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ctk-ten-boc { min-width: 0; }
.ctk-ten { margin: 0; font-size: 16px; font-weight: 600; color: var(--paper); }
.ctk-ma { margin: 2px 0 0; font-size: 11px; color: var(--slate-600); letter-spacing: .04em; }
.ctk-the-nhan { display: flex; gap: 6px; flex-wrap: wrap; }
.ctk-so { margin: 10px 0 0; font-size: 13px; color: var(--slate-400); }

.the-nho {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--vien); font-size: 11px; letter-spacing: .04em;
  color: var(--slate-500); white-space: nowrap;
}
/* Hình sản phẩm: viền nét đứt. Đây là phân loại, không phải trạng thái cần hành động. */
.the-nho.the-mem { border-style: dashed; color: var(--slate-400); }
/* Đang bán so với ngừng bán: khác nhau bằng độ sáng của chữ, không bằng màu. */
.the-nho.the-ban { color: var(--slate-300); border-color: var(--line); }
.the-nho.the-dung { color: var(--slate-600); border-style: dashed; }
/* CHỖ DUY NHẤT dùng amber trên màn này: kỳ đang mở, thứ duy nhất cần để mắt tới. */
.the-nho.tt-dang_mo { border-color: var(--amber); color: var(--amber); }
.the-nho.tt-sap_mo { color: var(--slate-400); }
.the-nho.tt-da_dong { color: var(--slate-600); border-style: dashed; }

.ctk-ky { margin: 12px 0 0; }
.ctk-dong {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--vien-mo);
}
.ctk-dong-chu { flex: 1 1 200px; min-width: 0; }
.ctk-ky-ten { margin: 0; font-size: 14px; color: var(--slate-300); }
.ctk-ky-ngay { margin: 2px 0 0; font-size: 11px; color: var(--slate-600); }
.ctk-dem { font-size: 13px; color: var(--slate-400); white-space: nowrap; }
/* Câu giải thích khi khối rỗng. Một khối rỗng trên màn quản trị luôn bị đọc thành
   "chưa nạp xong", nên chỗ nào cố ý rỗng thì phải nói ra vì sao. */
.ctk-ghi { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid var(--vien);
  font-size: 13px; line-height: 1.6; color: var(--slate-500); }
.ghi-nguon { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--slate-600); }

/* ══════════════════════════════════════════════════════════════════════════
   MÀN BAN LIÊN LẠC
   Danh sách phẳng, mỗi đối tác một dòng. Không dùng thẻ như màn Chương trình:
   ở đây mọi dòng cùng một hình, và hai mươi tư thẻ thì mắt không so được số
   giữa các dòng với nhau.
   ══════════════════════════════════════════════════════════════════════════ */
.bll-so-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 18px; }
.bll-o-so { border: 1px solid var(--vien); border-radius: 10px; background: var(--the); padding: 12px 14px; }
.bll-o-nhan { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; color: var(--slate-600); }
.bll-o-gia { margin: 0; font-size: 19px; font-weight: 600; color: var(--paper); }

.bll-nhan-khoi { margin: 22px 0 8px; }
.bll-bang { border: 1px solid var(--vien); border-radius: 12px; background: var(--the); overflow: hidden; }
.bll-dong {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--vien-mo);
}
.bll-bang > .bll-dong:first-child { border-top: 0; }
/* Dòng đã hủy: mờ đi nhưng VẪN ĐỌC ĐƯỢC. Nó từng là căn cứ cho một lần đối soát. */
.bll-dong.mo { opacity: .5; }
.bll-dong-chu { flex: 1 1 220px; min-width: 0; }
.bll-ten { margin: 0; font-size: 14px; color: var(--slate-300); }
.bll-ma { margin: 2px 0 0; font-size: 11px; color: var(--slate-600); letter-spacing: .04em; }
.bll-tyle { font-size: 12px; color: var(--slate-500); white-space: nowrap; }
.bll-tien { font-size: 14px; color: var(--paper); white-space: nowrap; min-width: 96px; text-align: right; }

/* ── Màn Đơn hàng ──────────────────────────────────────────────────────────── */
.dh-nguon { display: flex; flex-wrap: wrap; gap: 7px; }
.dh-loc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.dh-tim {
  flex: 1 1 240px; min-width: 0; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--vien); border-radius: 10px; background: var(--the);
  color: var(--paper); font: inherit; font-size: 14px;
}
.dh-chon {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--vien); border-radius: 10px;
  background: var(--the); color: var(--slate-300); font: inherit; font-size: 14px;
}
.dh-tim:focus-visible, .dh-chon:focus-visible { outline: 2px solid var(--amber); outline-offset: -1px; }

/* ── Màn Bài thực hành ─────────────────────────────────────────────────────
   Vạch tỷ lệ bằng một khối đặc chứ không phải biểu đồ: một con số và một vạch
   đủ để so hai buổi với nhau mà không kéo theo cả thư viện vẽ. */
.bth-vach {
  flex: 0 0 88px; height: 6px; border-radius: 999px;
  background: var(--ink-500); overflow: hidden;
}
.bth-vach-day { display: block; height: 100%; background: var(--amber); }

/* ── Màn Soạn thông báo ────────────────────────────────────────────────────
   .sc-form là một khối xếp dọc, đủ cho form ba ô. Form này có năm ô, trong đó
   "Gửi cho ai" và "Gắn với buổi" là hai lựa chọn ngắn thuộc cùng một câu hỏi —
   xếp dọc thì người soạn phải cuộn qua cả trang chỉ để thấy nút gửi. Nên ở đây
   thêm lưới hai cột, và .sc-rong (đã có sẵn) lấy lại được đúng nghĩa của nó.

   Dưới 640px quay về một cột: hai ô select cạnh nhau trên điện thoại thì mỗi ô
   hẹp tới mức đọc không ra tên khóa. */
.tb-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--k-3); }
@media (min-width: 640px) { .tb-form { grid-template-columns: 1fr 1fr; } }
.tb-form label { display: block; min-width: 0; }
.tb-form textarea.o-nhap-o { min-height: 84px; resize: vertical; line-height: 1.55; }

/* Nội dung tin trong danh sách: giữ xuống dòng người soạn đã gõ, nhưng cắt ở ba
   dòng. Một tin dài không được đẩy những tin khác ra khỏi tầm mắt. */
.tb-noi-dung {
  white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Đính bill ngay trên thẻ Đối chiếu Zalo ────────────────────────────────
   Khối này nằm dưới bốn ô thông tin, trên nút lưu. Cố ý nhạt hơn phần trên:
   đính bill là việc làm khi có, còn điền số điện thoại là việc luôn phải làm.
   Sắc độ nói thứ tự ưu tiên, không cần thêm màu nào. */
.dcz-bill {
  margin: var(--k-3) 0 0; padding: var(--k-3) 0 0;
  border-top: 1px dashed var(--vien-mo);
}
.dcz-bill-dau { display: flex; align-items: center; gap: var(--k-2); flex-wrap: wrap; }
.dcz-bill-hang {
  display: flex; align-items: center; gap: var(--k-2);
  flex-wrap: wrap; margin-top: var(--k-2);
}
.dcz-tep { flex: 1 1 220px; min-width: 0; font-size: 13px; color: var(--chu-phu); }
.dcz-bill-hang .dcz-ngay { flex: 0 0 auto; width: auto; }
.dcz-bill-ds { margin-top: var(--k-2); display: grid; gap: 6px; }
.dcz-bill-dong {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--k-2); font-size: 12.5px; color: var(--chu-phu);
}

/* Hai ô ngày của một kỳ xếp dọc trên điện thoại, nằm ngang khi đủ chỗ. */
.dcz-ky-han { display: grid; gap: 4px; }
@media (min-width: 700px) {
  .dcz-ky-han { grid-template-columns: auto auto; align-items: center; gap: 4px var(--k-2); }
}

/* Hai nút ở đầu thẻ đối chiếu: chép tên Zalo, và chép tin mời khi người đó chưa có số. */
.dcz-dau-nut { display: flex; gap: var(--k-2); flex-wrap: wrap; align-items: flex-start; }

/* Dòng nhắc "chưa có số". Nhạt, không viền đỏ: đây là việc còn phải làm, không phải lỗi.
   Trạng thái phân biệt bằng sắc độ chứ không bằng màu. */
.dcz-thieu {
  margin: var(--k-2) 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--slate-400);
}

/* Ô số tiền trên bill và ô trạng thái học: rộng vừa nội dung, không giãn hết hàng. */
.dcz-bill-hang .dcz-tien { flex: 0 1 150px; width: auto; }
.dcz-tt { width: auto; min-width: 11em; }

/* Hàng "cần xem lại". Bật lên thì viền trái đậm hơn, không đổi màu:
   đây là việc còn treo, không phải lỗi. */
.dcz-xemlai {
  display: flex; align-items: center; gap: var(--k-2);
  margin: var(--k-3) 0 0; padding: var(--k-2) 0 0;
  border-top: 1px dashed var(--vien-mo); flex-wrap: wrap;
}
.dcz-xemlai .dcz-nhan { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dcz-xemlai .dcz-o { flex: 1 1 220px; }
.dcz-xemlai.dang-bat { border-top-style: solid; border-top-color: var(--amber); }

/* Thẻ đã đối chiếu xong: mờ đi để mắt lướt qua, nhưng vẫn đọc được và vẫn sửa được.
   Không ẩn, vì ẩn là mất cái nhìn tổng về việc còn lại. */
.dcz-the.xong { opacity: .55; }
.dcz-the.xong:hover, .dcz-the.xong:focus-within { opacity: 1; }
.dcz-xong-nhan {
  margin: 0 0 var(--k-2); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate-600);
  display: flex; align-items: center; gap: var(--k-2);
}
.dcz-mo-ra { letter-spacing: 0; text-transform: none; }

/* THU GỌN: thẻ đã đối chiếu chỉ còn nhãn, tên người và nút mở.

   Ẩn mọi con TRỪ ba thứ cần để nhận ra đây là ai. Người dưới đẩy lên ngay, mà thẻ vẫn
   nằm đúng vị trí của nó trong danh sách — không biến mất như hồi còn bộ lọc.

   Dòng "có thay đổi chưa lưu" cũng được chừa: thẻ đang giữ nháp thì JS tự bỏ thu gọn,
   nhưng nếu có đường nào lọt qua thì ít nhất dòng cảnh báo vẫn đọc được. */
.dcz-the.thu-gon > *:not(.dcz-xong-nhan):not(.dcz-dau):not(.dcz-nhap-nhan) {
  display: none;
}
.dcz-the.thu-gon .dcz-dau { margin: 0; padding: 0; border: 0; }
.dcz-the.thu-gon { padding-bottom: var(--k-3); }

/* Một dòng bill đã đính: tên tệp, ngày, số tiền sửa tại chỗ, rồi hai nút. */
.dcz-bill-dong { flex-wrap: wrap; }
.dcz-bill-ten { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.dcz-bill-dong .dcz-ngay, .dcz-bill-dong .dcz-tien { flex: 0 0 auto; width: auto; }
.dcz-bill-nut { display: flex; gap: 6px; }

/* Mỗi tệp đang chọn một dòng, có ngày và số tiền của chính nó. */
.dcz-tep-ds { display: grid; gap: 6px; margin-top: var(--k-2); }
.dcz-tep-dong { display: flex; align-items: center; gap: var(--k-2); flex-wrap: wrap; }
.dcz-tep-ten {
  flex: 1 1 180px; min-width: 0; font-size: 12.5px;
  color: var(--chu-phu); overflow-wrap: anywhere;
}

/* Thẻ đang có thay đổi chưa lưu: viền trái đậm lên, và một dòng nhắc ở đầu thẻ.
   Sắc độ và kiểu viền, không dùng màu báo động. */
.dcz-the.co-nhap { border-left-color: var(--amber); }
.dcz-nhap-nhan {
  margin: 0 0 var(--k-2); font-size: 12px; line-height: 1.5; color: var(--amber);
}

/* Ô "khoản này là gì" trên mỗi dòng bill. */
.dcz-dot { flex: 0 1 130px; width: auto; }
.dcz-bill-dong .dcz-dot, .dcz-tep-dong .dcz-dot { flex: 0 1 130px; }

/* Dòng nhắc nhỏ dưới ô trạng thái mùa. */
.dcz-goi-y {
  grid-column: 1 / -1; margin: 2px 0 0;
  font-size: 11.5px; line-height: 1.45; color: var(--slate-600);
}

/* Thiếu một thứ BẮT BUỘC thì phải nhìn ra là cảnh báo, không phải lời khuyên.
   Trước 12/09/2026 dòng nhắc "phải ghi căn cứ" dùng đúng màu chú thích như mọi dòng
   hướng dẫn khác, nên mắt lướt qua và người dùng bấm Lưu rồi mới biết. */
.dcz-goi-y.thieu { color: var(--xau); font-weight: 500; }

/* Kết luận MÁY đọc từ bill. Đứng trên ô kết luận tay, vì trong phần lớn trường hợp
   người đọc xong dòng này là xong việc, không phải đụng vào ô nào cả. */
.dcz-may-doc {
  grid-column: 1 / -1; margin: var(--k-2) 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--chu-phu);
}
/* Ô ĐANG GIỮ DỮ LIỆU chưa lưu. Quỳnh 12/09/2026: "ko thấy thể hiện gì".
   Trước đó chỉ có một dòng chữ ở đầu thẻ, mà thẻ dài vài màn hình nên lúc gõ ở giữa thẻ
   thì dòng đó nằm ngoài tầm mắt. Viền sáng ngay tại ô là thứ nhìn thấy mà không phải
   cuộn đi đâu. */
/* Sổ dòng chảy 31/10/2026 (Quy chuẩn): ô đang giữ chữ chưa lưu viền 2px --chua-luu-vien, nền --chua-luu-nen, nhãn "Chưa lưu". */
.dcz-o.dang-giu,
.dcz-tep-dong .dang-giu {
  border: 2px solid var(--chua-luu-vien);
  background: var(--chua-luu-nen);
}
label.dang-giu > .dcz-nhan { color: var(--nhan); }
label.dang-giu > .dcz-nhan::after { content: ' · Chưa lưu'; font-weight: 600; color: var(--chua-luu-vien); }

/* Kết luận "không phải" đã ghi. Đứng đúng chỗ khối gợi ý vừa biến mất, để thấy ngay là
   hệ đã nhận chứ không nuốt mất. Viền trái mảnh, cùng ngôn ngữ với khối gợi ý. */
/* Một dòng mảnh, xám. Đủ để biết hệ đã nhận, không chiếm chỗ của thứ đang cần nhìn.
   Lý do vẫn lưu trong database, chỉ là không dàn ra màn. */
.ld-da-phu-nhan {
  margin: var(--k-3) 0 0; padding: 0 0 0 var(--k-3);
  border-left: 2px solid var(--vien);
  font-size: 12px; color: var(--chu-phu);
}

/* Nút Lưu đặt ngay trong dòng cảnh báo ở đầu thẻ. Nút thật nằm cuối thẻ, sau ba khối
   dài; dòng nhắc mà không có chỗ bấm thì nhắc xong người ta vẫn phải đi tìm. */
.dcz-luu-tren { margin-left: var(--k-2); vertical-align: baseline; }

/* Hai ô người giới thiệu chỉ hiện với mức #CDaff37, nên gói chung một khối để ẩn hiện
   cả cụm, kể cả dòng kết luận hoa hồng đi kèm. */
.dcz-gt { display: contents; }
.dcz-gt[hidden] { display: none; }

/* Khối "đã là cổ đông Liên Đoàn": mỗi lần chuyển khoản một dòng, mỗi dòng đính một bill.
   Viền trái vàng cùng ngôn ngữ với khối gợi ý, để mắt nhận ra đây vẫn là chuyện Liên Đoàn. */
.ld-khoi {
  margin: var(--k-3) 0 0; padding: var(--k-3);
  border-left: 2px solid var(--nhan);
  background: rgba(255, 255, 255, .02);
}
.ld-khoi-dau { margin: 0 0 var(--k-2); font-size: 13px; }
.ld-dong {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2);
  padding: var(--k-2) 0; border-top: 1px solid var(--vien);
}
.ld-dong-mo { flex: 1 1 100%; min-width: 0; font-size: 12.5px; color: var(--chu-phu); }

/* Danh sách bill ĐÃ đính của một giai đoạn. Một giai đoạn nhiều bill, nên phải liệt kê
   từng cái với số tiền và ngày của chính nó. */
.ld-bill-ds { flex: 1 1 100%; margin: 0; padding: 0 0 0 var(--k-3); }
.ld-bill-cu {
  margin: var(--k-2) 0; font-size: 12px; color: var(--nhan);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2);
}
.ld-bill-cu .dcz-tien { flex: 0 1 150px; }
.ld-bill-cu .dcz-ngay { flex: 0 1 150px; }
/* Ô chọn STK của bill đã đính. Buộc bề ngang lại, không cho tên ví dài nhất đẩy cả dòng
   xuống hàng dưới. */
.ld-bill-cu .dcz-vi { flex: 0 1 210px; font-size: 13px; }
.ld-bill-ten { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; color: var(--chu-phu); }
/* Dấu ✕ gỡ bill. Nhỏ và mờ: gỡ là việc hiếm, không đáng kêu gọi bấm. */
.ld-go { padding: 0 6px; line-height: 1.4; opacity: .55; }
.ld-go:hover, .ld-go:focus-visible { opacity: 1; border-color: var(--xau); color: var(--xau); }

/* Hàng nhập cho bill MỚI: chọn tệp, số tiền, ngày, nút. */
.ld-dong-nhap {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2);
}
.ld-dong-nhap .dcz-tien { flex: 0 1 150px; }
.ld-dong-nhap .dcz-ngay { flex: 0 1 150px; }

/* Nhiều hàng nhập cho cùng một giai đoạn, sinh ra khi bấm "+ Thêm giao dịch". */
.ld-nhap-ds { flex: 1 1 100%; }
.ld-nhap-ds .ld-dong-nhap + .ld-dong-nhap { margin-top: var(--k-2); }
.ld-them { opacity: .8; }
.ld-them:hover, .ld-them:focus-visible { opacity: 1; }

.dcz-nhac-dinh {
  margin: var(--k-2) 0 0;
  font-size: 12px; line-height: 1.45; color: var(--nhan); font-weight: 500;
}

/* Nút Đính bill khi người bấm Lưu mà quên đính: nháy lên cho biết phải bấm cái nào. */
.nut.nhac {
  border-color: var(--nhan); color: var(--nhan);
  animation: dtv-nhac 0.6s ease-in-out 2;
}
@keyframes dtv-nhac {
  0%, 100% { transform: none; }
  50%      { transform: translateX(3px); }
}

.dcz-may-doc.du    { color: var(--nhan); }
.dcz-may-doc.thieu { color: var(--xau); font-weight: 500; }
.dcz-o.thieu { border-color: var(--xau); }

/* Chân dung khách trên thẻ đối chiếu: chip bấm một cái là gắn, bấm lại là gỡ.
   Chip đang bật dùng viền amber, chip tắt dùng viền mờ. Sắc độ và viền, không màu. */
.dcz-cd {
  margin: var(--k-3) 0 0; padding: var(--k-3) 0 0;
  border-top: 1px dashed var(--vien-mo);
}
.dcz-cd-nhom {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-top: 6px;
}
.dcz-cd-ten {
  flex: 0 0 84px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-600);
}
.dcz-chip {
  padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 12.5px;
  background: transparent; border: 1px solid var(--vien-mo); color: var(--slate-400);
  cursor: pointer; white-space: nowrap;
}
.dcz-chip:hover { border-color: var(--vien); color: var(--chu); }
.dcz-chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.dcz-chip.bat { border-color: var(--amber); color: var(--amber); }
.dcz-chip[disabled] { opacity: .5; cursor: wait; }

/* Số tài khoản trên thẻ ví ở màn Sổ cái. */
.sc-stk { margin: 4px 0 0; font-size: 12.5px; color: var(--slate-400); letter-spacing: .02em; }
.sc-stk.chua { color: var(--slate-600); font-style: italic; }
/* Ví đã ngừng dùng: mờ đi, không ẩn — số dư cũ vẫn phải đối chiếu được. */
.o-so.mo { opacity: .55; }
.o-so.mo:hover { opacity: 1; }

/* Ô dán nguyên tên Zalo, kèm dòng đọc ra ngay bên dưới. */
.dcz-tenzalo { margin: var(--k-3) 0 0; }
.dcz-tenzalo .dcz-o { margin-top: 2px; }

/* Cảnh báo lệch tiền. Viền trái amber, không nền đỏ: đây là chỗ cần nhìn,
   không phải lỗi hệ thống. */
.dcz-lech {
  margin: var(--k-3) 0 0; padding: var(--k-2) var(--k-3);
  border-left: 3px solid var(--amber); border-radius: 0 var(--r) var(--r) 0;
  background: var(--the-mo); font-size: 12.5px; line-height: 1.5; color: var(--chu);
}
/* Hàng ghi khoản không có ảnh, nhạt hơn hàng đính bill vì ít dùng hơn. */
.dcz-mat { border-top: 1px dashed var(--vien-mo); padding-top: var(--k-2); margin-top: var(--k-2); }
.dcz-mat .dcz-o { flex: 0 1 auto; width: auto; }

/* Kết luận công nợ. Đặt sau khối bill vì phải nhìn bill rồi mới kết luận được. */
.dcz-congno {
  display: flex; align-items: center; gap: var(--k-2); flex-wrap: wrap;
  margin: var(--k-3) 0 0; padding: var(--k-3) 0 0;
  border-top: 1px dashed var(--vien-mo);
}
.dcz-congno .dcz-o[type="text"] { flex: 1 1 220px; }


/* ============================================================
   ICON TRONG CỘT MENU — bật lại 13/09/2026

   Hai mươi đường vẽ nằm trong giao-dien.js từ lâu mà không ai gọi. Bản bàn giao
   mới gọi chúng lên: chỉ hình học, 16px, nét 1.3.

   Nét mảnh hơn hàm icon() đặt sẵn (1.75) vì ở 16px nét 1.75 làm hình bết lại.
   Đặt bằng CSS chứ không sửa hàm, vì hàm đó còn dùng chỗ khác ở cỡ lớn hơn.
   ============================================================ */
.muc > svg {
  flex: 0 0 16px; width: 16px; height: 16px;
  stroke-width: 1.3; color: var(--slate-500);
}
.muc:hover > svg, .muc:focus-visible > svg { color: var(--slate-400); }
.muc[aria-current="page"] > svg { color: var(--amber); }
.muc { gap: 10px; }

/* ════════════════════════════════════════════════════════════════════════════
   KHUÔN MÀN DÙNG CHUNG — bàn giao thiết kế 13/09/2026 mục 7 và 8

   Tên lớp đặt theo VAI TRÒ, không theo màn. Lớp cũ `.bll-*` đặt tên theo Ban
   Liên Lạc nhưng đang chạy ở Bài thực hành, Đơn hàng, Chi phí, Thông báo; sửa
   một màn thì không biết mình đụng bao nhiêu màn khác.

   Khối này THÊM VÀO, chưa xóa lớp cũ. Từng màn chuyển sang dần; xóa lớp cũ là
   việc cuối cùng, sau khi không màn nào còn gọi tới chúng.

   Đích: thêm một màn chỉ-đọc mới không sinh thêm lớp CSS nào.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Đầu màn ─────────────────────────────────────────────────────────────── */
.man-dau { margin: 0 0 var(--k-6); }
/* Sổ dòng chảy (Quy chuẩn mục 8): chữ thường, không ép viết hoa toàn bộ; NHOM_CUA_MAN đã viết như chữ menu. */
.man-nhom {
  margin: 0 0 var(--k-2); font-size: 10px; letter-spacing: .02em;
  color: var(--slate-500);
}
.man-tieu-de { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; }
.man-mo-ta {
  margin: var(--k-2) 0 0; max-width: 68ch;
  font-size: 14px; color: var(--slate-400);
}

/* Dải cảnh báo. Viền trái 2px, không tô nền cả khối: nền đặc ở đây làm nó to
   ngang một ô số liệu và cướp mất tiêu điểm của con số. */
.man-canh {
  margin: var(--k-4) 0 0; padding: var(--k-3) var(--k-4);
  border-left: 2px solid var(--canh-bao); background: var(--ink-700);
  font-size: 13px; line-height: 1.5; color: var(--slate-400);
}
.man-canh b { color: var(--canh-bao); letter-spacing: .08em; font-size: 11px; }

/* ── Hàng tab trong màn ──────────────────────────────────────────────────── */
.man-tab {
  display: flex; flex-wrap: wrap; gap: var(--k-1);
  margin: var(--k-5) 0 0; border-bottom: 1px solid var(--line);
}
.man-tab-nut {
  min-height: 38px; padding: 0 var(--k-4);
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--slate-500); font: inherit; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--k-2);
}
.man-tab-nut:hover { color: var(--slate-400); }
.man-tab-nut[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--amber); }
.man-tab-dem { font-size: 12px; color: var(--slate-500); }
.man-tab-them { display: none; }
/* Hàng tab con (Sổ dòng chảy): nút nhỏ bo tròn dưới hàng tab chính. */
.man-tab-con { display: flex; flex-wrap: wrap; gap: var(--k-2); margin: var(--k-3) 0 0; }
.man-tab-con[hidden] { display: none; }   /* 05/11: hàng "Thêm N ▾" của tab con, đóng mặc định */
.man-tab-con-nut { min-height: 36px; padding: 0 var(--k-3); border: 1px solid var(--vien); border-radius: var(--bo-nhan);
  background: transparent; color: var(--chu-phu); font: inherit; font-size: 13px; cursor: pointer; }
.man-tab-con-nut[aria-selected="true"] { background: var(--nhan-nhat); border-color: var(--nhan); color: var(--nhan); font-weight: 500; }
.man-tab-them-ds { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.man-tab-them-ds[hidden] { display: none; }
@media (min-width: 641px) { .man-tab-them-ds { display: none !important; } }

/* ── Ô số liệu ───────────────────────────────────────────────────────────────
   BẪY ĐÃ GẶP, bàn giao mục 7: lưới auto-fit mà số ô không chia hết số cột thì
   mẹo `gap:1px` + nền container để lòi ra một khối xám ở chỗ trống. Nên kẻ vẽ
   bằng border trên TỪNG ô, container để nền thường. */
.oso-luoi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0 0 var(--k-6);
  border: 1px solid var(--line); border-radius: var(--bo);
  background: var(--ink-700); overflow: hidden;
}
.oso { padding: var(--k-4); border-right: 1px solid var(--line); }
.oso:last-child { border-right: none; }
.oso-nhan {
  margin: 0; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-500);
}
.oso-so { margin: var(--k-2) 0 0; font-size: 22px; font-weight: 600; line-height: 1.1; }
.oso-chu-thich { margin: var(--k-1) 0 0; font-size: 12px; color: var(--slate-500); }
.oso-canh-bao .oso-so { color: var(--canh-bao); }
.oso-sach .oso-so { color: var(--slate-500); }

/* ── Nhóm trong màn ──────────────────────────────────────────────────────── */
.nhom-man { margin: 0 0 var(--k-8); }
.nhom-man-dau {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--k-3);
  margin: 0 0 var(--k-3);
}
.nhom-man-ten { margin: 0; font-size: 15px; font-weight: 600; }
.nhom-man-dem { font-size: 13px; color: var(--slate-500); }
.nhom-man-ghi { font-size: 13px; color: var(--slate-500); }
.nhom-man-dau .nut { margin-left: auto; }

/* ── Bảng ────────────────────────────────────────────────────────────────────
   Lưới số ô CỐ ĐỊNH nên dùng được mẹo gap 1px: nền container là màu kẻ, con
   đặc, khe 1px lộ ra thành đường kẻ. */
.bang-boc-moi {
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--bo);
  background: var(--line); overflow: hidden;
}
.bang-dau, .bang-dong {
  display: grid; gap: var(--k-3); align-items: center;
  padding: var(--k-3) var(--k-4); background: var(--ink-700);
  text-align: left;
}
.bang-dau { background: var(--ink-800); }
.bang-dau-o {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate-500);
}
.bang-dong { border: none; color: inherit; font: inherit; }
.bang-dong-bam { cursor: pointer; }
.bang-dong-bam:hover, .bang-dong-bam:focus-visible { background: var(--ink-600); }
.bang-o { min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bang-o-so { text-align: right; font-size: 13px; }
.bang-o-nhan, .bang-o-nut, .bang-o-ty-le { overflow: visible; white-space: normal; }

/* Ô "Việc phải làm" của nhóm đã nhắn xin thoái: hai nút cạnh nhau, một ghép một gỡ.
   el() nối thẳng hai nút nên không có khoảng trắng nào ở giữa, và hai nút dính sát là
   hai nút dễ bấm nhầm — mà một trong hai xoá dữ liệu. */
.tv-viec .nut + .nut { margin-left: var(--k-2); }
.bang-trong {
  margin: 0; padding: var(--k-5) var(--k-4);
  background: var(--ink-700); font-size: 13px; color: var(--slate-500);
}

/* ── Nhãn trạng thái ─────────────────────────────────────────────────────── */
.nhan-tt {
  display: inline-block; padding: 2px var(--k-2);
  border: 1px solid var(--slate-500); border-radius: 2px;
  font-size: 12px; line-height: 1.4; color: var(--slate-500); white-space: nowrap;
}
.nhan-tt-xau   { border-color: var(--canh-bao); color: var(--canh-bao); }
.nhan-tt-luu-y { border-color: var(--amber);    color: var(--amber); }
.nhan-tt-xong  { border-color: var(--line-2);   color: var(--slate-400); }

/* ── Thanh tỷ lệ ─────────────────────────────────────────────────────────── */
.thanh-ty-le {
  display: block; width: 100%; height: 8px;
  background: var(--ink-600); border-radius: 2px; overflow: hidden;
}
.thanh-ty-le-day { display: block; height: 100%; background: var(--amber); }
.thanh-ty-le-xau { background: var(--canh-bao); }

/* ── Dòng ghi nguồn ──────────────────────────────────────────────────────── */
.man-nguon {
  margin: var(--k-6) 0 0; padding-top: var(--k-3);
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--slate-500);
}


/* Hàng ô số liệu cũ `.bll-so-hang` giờ chứa `.oso` thay vì `.bll-o-so`. Cho nó
   cùng dáng với `.oso-luoi` để hai lối cũ mới nhìn không lệch nhau trong lúc
   chuyển dần. Xóa khi không màn nào còn dùng `.bll-so-hang`. */
.bll-so-hang, .ts-hang, .hang-so {
  border: 1px solid var(--line); border-radius: var(--bo);
  background: var(--ink-700); overflow: hidden;
}
.bll-so-hang > .oso, .ts-hang > .oso, .hang-so > .oso { border-right: 1px solid var(--line); }
.bll-so-hang > .oso:last-child, .ts-hang > .oso:last-child, .hang-so > .oso:last-child {
  border-right: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   ĐỐI CHIẾU ZALO — HAI CỘT, bàn giao 13/09/2026 mục 6

   Cột trái để TRA CỨU, cột phải để GÕ VÀO. Nền khác nhau nên mắt biết ngay chỗ
   nào nhập được mà không phải đọc chữ.

   Dưới 1100px thì xếp dọc lại như cũ: hai cột 300px cạnh nhau trên màn hẹp thì
   ô nhập tiền bị bóp còn một nửa và số bị cắt.
   ════════════════════════════════════════════════════════════════════════════ */
.dcz-hai-cot {
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.35fr);
  gap: 1px; margin: var(--k-4) 0 0;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--bo);
  overflow: hidden;
}
.dcz-cot { min-width: 0; padding: var(--k-4); }
.dcz-cot-doc  { background: var(--ink-800); }
.dcz-cot-nhap { background: var(--ink-700); position: relative; }

/* Khối trong cột không còn cần viền riêng: hai nền đã tách chúng ra rồi. */
.dcz-cot > * { margin-top: 0; }
.dcz-cot > * + * { margin-top: var(--k-4); }

/* Thanh Lưu ghim đáy cột nhập. Người đi 523 thẻ không phải cuộn đi tìm nút. */
.dcz-chan-ghim {
  position: sticky; bottom: 0; z-index: 2;
  margin-left: calc(var(--k-4) * -1); margin-right: calc(var(--k-4) * -1);
  margin-bottom: calc(var(--k-4) * -1);
  padding: var(--k-3) var(--k-4);
  background: var(--ink-700); border-top: 1px solid var(--line);
}

@media (max-width: 1100px) {
  .dcz-hai-cot { grid-template-columns: 1fr; }
  .dcz-cot-doc { border-bottom: 1px solid var(--line); }
}

/* ════════════════════════════════════════════════════════════════════════════
   TRANG ĐĂNG NHẬP — bàn giao 13/09/2026 mục 11

   Cột trái phủ ảnh logo-hero, trên đó một lớp phủ tối dần xuống đáy để chữ đọc
   được ở mọi chỗ. Đây là bề mặt thương hiệu duy nhất người ngoài nhìn thấy.

   Logo cột trái dùng bản CHỮ TRẮNG (wordmark-light), khác cột menu trong app
   dùng bản chữ đậm: nền hai nơi ngược nhau.
   ════════════════════════════════════════════════════════════════════════════ */
.vao-trai {
  position: relative; isolation: isolate;
  background: #060E20 url('../assets/logo-hero.png') center / cover no-repeat;
  border-right: none;
}
.vao-trai::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    rgba(6, 14, 32, .25), rgba(6, 14, 32, .55) 52%, rgba(6, 14, 32, .9));
}
/* Chữ trên ảnh: đổi màu cho nền tối, không đổi cỡ. */
.vao-trai .vao-cau { color: #F3F0E8; }
.vao-trai .vao-phu { color: rgba(243, 240, 232, .78); }
.vao-trai .nhan-amber { color: #FFB162; }
.vao-trai .vao-ban { color: rgba(243, 240, 232, .6); }
.vao-trai .vao-ke { background: rgba(243, 240, 232, .28); }
.vao-nhac {
  margin: var(--k-4) 0 0; font-size: 10px; letter-spacing: .12em;
  color: rgba(243, 240, 232, .55);
}

/* ── Thêm người mới, 13/09/2026 ──────────────────────────────────────────── */
.tim-hang-tren { display: flex; align-items: center; gap: var(--k-3); }
.tim-hang-tren .o-tim { flex: 1 1 auto; }
.tim-hang-tren .nut { flex: 0 0 auto; white-space: nowrap; }

.them-nguoi {
  margin: var(--k-3) 0 var(--k-4); padding: var(--k-4);
  background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--bo);
}
.them-nguoi-de { margin: 0 0 var(--k-3); font-size: 14px; font-weight: 600; }
.them-luoi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--k-3);
}
.them-luoi label { display: flex; flex-direction: column; gap: var(--k-1); }
.them-giong {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2);
  margin: var(--k-3) 0 0;
}
.them-giong-nhan { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--canh-bao); }
.them-chan { display: flex; align-items: center; gap: var(--k-3); margin: var(--k-4) 0 0; }

/* ── Màn Thoái vốn, 13/09/2026 ───────────────────────────────────────────── */
.tv-dong {
  padding: var(--k-4); margin: 0 0 1px;
  background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--bo);
}
.tv-dau { display: flex; align-items: flex-start; gap: var(--k-4); }
.tv-dau > div:first-child { flex: 1 1 auto; min-width: 0; }
.tv-ten { margin: 0; font-size: 15px; font-weight: 600; }
.tv-phu { margin: var(--k-1) 0 0; font-size: 13px; color: var(--slate-500); }
.tv-tien { flex: 0 0 auto; text-align: right; }
.tv-so { margin: 0; font-size: 18px; font-weight: 600; }
.tv-nhan-nho { margin: 0; font-size: 12px; color: var(--slate-500); }
/* Dòng "còn thiếu" dùng màu cảnh báo: đây là thứ chặn bước tiếp theo, không phải chú thích. */
.tv-thieu { margin: var(--k-2) 0 0; font-size: 13px; color: var(--canh-bao); }
.tv-nut {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2);
  margin: var(--k-3) 0 0; padding-top: var(--k-3); border-top: 1px solid var(--line-soft);
}
.tv-nut .dcz-tien, .tv-nut .dcz-ngay { flex: 0 1 150px; }
.tv-nut .dcz-vi { flex: 0 1 210px; }

/* ── Dòng nhãn · giá trị trong màn Hồ sơ, 13/09/2026 ──────────────────────
   Trước đó `.hs-dong` không có kiểu nào nên nhãn dính liền giá trị:
   "Tên Zalo đầy đủLan Hương|#MBS01#R5". Nhãn trái, giá trị phải, kẻ mảnh ngăn
   từng dòng để mắt đi ngang không lạc. */
.hs-dong {
  display: flex; align-items: baseline; gap: var(--k-3);
  margin: 0; padding: var(--k-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.hs-dong:last-child { border-bottom: none; }

/* Hàng có NHIỀU Ô NHẬP, không phải hàng nhãn-giá-trị.

   `.hs-dong` là flex không wrap, đúng cho hàng hai phần "nhãn · giá trị". Nhưng hộp
   tải bill nhét bảy thứ vào một hàng: chọn tệp, chọn kỳ, chọn STK, ngày, số tiền, nút,
   dòng báo. Không wrap thì ô số tiền và NÚT bị đẩy ra ngoài mép phải và biến mất.

   Quỳnh 20/09/2026 nhìn đúng chỗ đó và nói "ko thấy làm gì thêm đc" — nút có thật,
   chỉ là nằm ngoài màn. Lớp này cho xuống dòng. */
.hs-dong.hs-nhieu-o {
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--k-2);
}
.hs-dong.hs-nhieu-o > * { flex: 0 1 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   LUẬT CHUNG: HÀNG FLEX CÓ Ô NHẬP THÌ PHẢI XUỐNG DÒNG ĐƯỢC

   Quét 20/09/2026 tìm thấy 48 lớp `display:flex` không khai `flex-wrap`. Phần lớn
   vô hại vì chúng chỉ chứa hai phần "nhãn · giá trị". Nguy hiểm là những hàng nhồi
   bốn năm ô nhập cộng một cái nút: ô cuối và nút bị đẩy ra ngoài mép phải và BIẾN
   MẤT, không có thanh cuộn nào báo. Quỳnh gặp đúng hai lần trong ngày, và cả hai lần
   đều đọc thành "màn hỏng, không bấm được gì".

   Vá từng hàng một là cách sẽ phải làm lại mỗi lần ai đó thêm một ô mới. Luật này
   bắt theo NỘI DUNG: hàng nào thật sự chứa ô nhập thì cho xuống dòng, hàng nhãn và
   giá trị thuần thì giữ nguyên một dòng như cũ.

   `:has()` không có trên trình duyệt đời cũ. Ở đó màn quay về đúng hành vi hôm nay,
   không tệ hơn. Chrome và Safari trên máy Quỳnh đều có. */
.hs-dong:has(input, select, textarea),
.dcz-bill-dong:has(input, select, textarea),
.dcz-ky-han:has(input, select, textarea),
.dcz-chan:has(input, select, textarea),
.ld-dong:has(input, select, textarea),
.ld-tien-cum:has(input, select, textarea),
.ds-dong:has(input, select, textarea),
.tim-dong:has(input, select, textarea),
.them-chan:has(input, select, textarea),
.soat-so:has(input, select, textarea),
.bh-dong:has(input, select, textarea),
.bd-mot:has(input, select, textarea),
.muc:has(input, select, textarea),
.vao-chan:has(input, select, textarea) {
  flex-wrap: wrap;
  row-gap: var(--k-2);
}
/* Nhãn KHÔNG co lại: bóp nó thì "Công nợ" thành "Côn…" và mất nghĩa. Cho nó giữ
   đúng bề ngang chữ, phần co lại là giá trị bên phải. */
.hs-dong > .dcz-nhan {
  flex: 0 0 auto; margin: 0;
  color: var(--slate-500); font-size: 13px; white-space: nowrap;
}
/* Chuỗi mô tả dài (round · giai đoạn · ngày) thì co được và cắt bằng ba chấm. */
.hs-dong > .hs-nhan-phu {
  flex: 1 1 auto; min-width: 0; margin: 0;
  color: var(--slate-500); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-dong > .dcz-nhan + b { margin-left: auto; }
.hs-dong > b { flex: 0 0 auto; text-align: right; }
/* Căn cứ đi kèm kết luận: xuống dòng khi chật, không bị cắt mất. */
/* Con số còn nợ ở khối Công nợ học phí. Chỉ tô KẾT LUẬN, không tô hai dòng số liệu
   bên trên: tô hết thì mắt không biết nhìn đâu trước.

   Dùng `--canh-bao` đúng như chú thích của nó: "thiếu dữ liệu / lệch tiền / số âm".
   KHÔNG thêm màu xanh cho ca hết nợ — bảng màu này cố ý chỉ có một màu nhấn, và một
   người hết nợ là chuyện bình thường chứ không phải thành tích cần tô. */
.hs-thieu-tien { color: var(--canh-bao); }

/* Kết quả tìm người, ba tầng. Quỳnh 15/09/2026: "nhìn phát check được".
   Tầng 1 tên Excel đậm, tầng 2 tên Zalo và số điện thoại nhạt hơn, tầng 3 lời nhắc khi
   thiếu số. Nút chiếm cả dòng vì ba tầng không nhét vừa một nút con. */
.tim-dong { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.tim-dong .tim-ba-tang { flex: 1 1 auto; }
.tim-ba-tang {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 6px; line-height: 1.45;
}
.tim-ten { display: block; font-weight: 600; }
.tim-phu {
  display: block; font-family: var(--chu-so); font-size: 12px;
  color: var(--slate-500); margin-top: 2px;
}
.tim-thieu {
  display: block; font-size: 12px; color: var(--canh-bao); margin-top: 2px;
}
/* D372: đường dẫn tệp hợp đồng là căn cứ để mở đối chiếu, không phải lời cảnh báo: chữ xám. Dòng "khớp …" nói căn cứ đề xuất:
   xanh khi có CCCD/SĐT/email, nâu khi chỉ trùng tên (căn cứ yếu, D88). */
.tim-tep { display: block; font-size: 12px; color: var(--slate-500); margin-top: 2px; word-break: break-word; }
.tim-khop {
  display: inline-block; font-size: 12px; font-weight: 600; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
  color: var(--tot); background: var(--tot-nhat);
}
.tim-khop.yeu { color: var(--nhan); background: var(--nhan-nhat); }
.hs-tim-tay { margin-top: 8px; }
.hs-tim-tay > summary { cursor: pointer; font-size: 13px; color: var(--slate-500); }
.hs-tim-tay > input { margin: 8px 0; width: 100%; max-width: 420px; }

.hs-can-cu {
  flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--slate-500);
  white-space: normal;
}

/* ── Hai khu vực Xem và Cập nhật trong màn Hồ sơ, 13/09/2026 ─────────────── */
.hs-tab-hang {
  display: flex; gap: var(--k-1);
  margin: 0 0 var(--k-5); border-bottom: 1px solid var(--line);
}
.hs-tab {
  min-height: 38px; padding: 0 var(--k-4);
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--slate-500); font: inherit; font-size: 14px; cursor: pointer;
}
.hs-tab:hover { color: var(--slate-400); }
.hs-tab.dang-chon { color: var(--paper); border-bottom-color: var(--amber); }
.hs-vung[hidden] { display: none !important; }

/* ── Hai khu vực Xem và Cập nhật trong màn Hồ sơ, 13/09/2026 ─────────────────
   Quỳnh: "xem chi tiết thông tin lịch sử quản trị học viên cũ và việc cập nhật
   là 2 việc khác nhau". Cùng lý lẽ với hai cột đọc và nhập ở màn Đối chiếu Zalo. */
.hs-tab-hang {
  display: flex; gap: var(--k-1);
  margin: 0 0 var(--k-5); border-bottom: 1px solid var(--line);
}
.hs-tab {
  min-height: 38px; padding: 0 var(--k-4);
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--slate-500); font: inherit; font-size: 14px; cursor: pointer;
}
.hs-tab:hover { color: var(--slate-400); }
.hs-tab.dang-chon { color: var(--paper); border-bottom-color: var(--amber); }
.hs-vung[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   TIÊU ĐỀ PHÂN LOẠI THÔNG TIN — nền riêng, 13/09/2026

   Quỳnh: "đổi màu chữ những Tiêu đề phân loại thông tin hoặc phải có nền (giống
   như button) - dễ phân loại - phân biệt thông tin".

   Trước đó tiêu đề mục chỉ khác nội dung ở cỡ chữ và độ đậm. Trên nền sáng, một
   dòng 14.5px đậm nằm giữa những dòng 14px thường thì mắt không bắt được ranh
   giới giữa hai khối, và màn Hồ sơ có sáu khối liền nhau.

   KHÔNG dùng amber làm nền. Luật của hệ: amber là màu nhấn DUY NHẤT, dành cho
   hành động và tiêu điểm. Tô amber cho mọi tiêu đề thì một màn có mười thứ amber
   và người dùng hết biết chỗ nào cần bấm. Ở đây dùng nền xám đặc `--ink-600` với
   chữ màu chữ chính: đủ để tách khối, không cướp tiêu điểm của nút.
   ════════════════════════════════════════════════════════════════════════════ */
.muc-nd > h2,
.nhom-man-ten,
.sc-de {
  display: inline-block;
  padding: 5px var(--k-3);
  margin-bottom: var(--k-3);
  background: var(--ink-600);
  border-radius: var(--bo);
  border-left: 3px solid var(--slate-500);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--paper);
}
/* `.sc-de` đang có margin-top lớn để tách mục; giữ nguyên khoảng đó. */
.sc-de { margin-top: var(--k-8); }
.sc-de:first-of-type { margin-top: var(--k-5); }

/* Tiêu đề của khối nói về TIỀN mang vạch amber: tiền là thứ Quỳnh tìm trước nhất
   khi mở một hồ sơ, và một vạch 3px đủ để mắt nhảy thẳng tới đó mà không phá luật
   một màu nhấn — nền vẫn xám, chỉ vạch đổi màu. */
.muc-nd.muc-tien > h2 { border-left-color: var(--amber); }

/* Nhóm trong khuôn màn: tiêu đề và số đếm đứng cùng hàng, nên nhãn không được
   chiếm cả dòng. */
.nhom-man-dau .nhom-man-ten { margin-bottom: 0; }

/* ── Khối "Cần làm gì với người này", 13/09/2026 ─────────────────────────────
   Đặt đầu hồ sơ. Mỗi dòng một việc, vạch trái nói mức gấp. Ba mức dùng ba sắc
   độ chứ không ba màu: luật một màu nhấn vẫn đúng, và `--canh-bao` chỉ dành cho
   mức gấp nhất. */
.viec-khoi { background: var(--ink-700); padding: var(--k-4); border-radius: var(--bo);
             border: 1px solid var(--line); }
.viec-dong {
  padding: var(--k-2) 0 var(--k-2) var(--k-3);
  border-left: 3px solid var(--slate-500);
  margin: 0 0 var(--k-2);
}
.viec-gap    { border-left-color: var(--canh-bao); }
.viec-thuong { border-left-color: var(--amber); }
.viec-ten { margin: 0; font-size: 14px; font-weight: 600; }
.viec-gap .viec-ten { color: var(--canh-bao); }
.viec-ly-do { margin: 2px 0 0; font-size: 13px; color: var(--slate-500); }
.viec-cham {
  margin: var(--k-3) 0 0; padding-top: var(--k-3);
  border-top: 1px solid var(--line-soft);
}
.viec-cham-hang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2); }
.viec-cham-hang .dcz-o { flex: 0 1 140px; }

/* Dòng thông tin còn thiếu trong hồ sơ. Không tô đỏ: thiếu thông tin là chuyện
   bình thường của một hệ đang làm sạch, không phải lỗi. Chỉ nói ra và cho lối đi. */
.hs-thieu > .hs-chua-co { margin-left: auto; font-size: 13px; color: var(--slate-500); }
.hs-thieu > .nut { flex: 0 0 auto; margin-left: var(--k-2); }

/* Ô tick round trong hộp ghi thoái vốn. Một người góp nhiều round thì xin thoái là tick
   nhiều ô, không phải gõ nhiều lần. Xem 0072 và D58. */
.tick-round {
  display: inline-flex; align-items: baseline; gap: var(--k-1);
  padding: var(--k-1) var(--k-2); margin: 0 var(--k-1) var(--k-1) 0;
  border: 1px solid var(--vien); border-radius: var(--bo);
  background: var(--the); cursor: pointer;
}
.tick-round:hover { border-color: var(--nhan); }
.tick-round b { font-variant-numeric: tabular-nums; }

/* ── Soát tiền góp so với hợp đồng, ở tab Cập nhật của hồ sơ ────────────────
   Thêm 16/09/2026 cùng 0089. Bốn ô trên một hàng: round, hợp đồng, hệ đã ghi, lệch.
   Dòng lệch viền trái amber — cùng cách phân biệt trạng thái của cả hệ, không dùng
   xanh đỏ, đọc ra được cả khi in đen trắng. */
.soat-dong {
  display: flex; flex-wrap: wrap; gap: var(--k-3); align-items: baseline;
  padding: var(--k-2) var(--k-3); margin-bottom: var(--k-2);
  border: 1px solid var(--vien); border-radius: 6px; background: var(--the);
}
.soat-dong.lech { border-left: 3px solid var(--amber); }
.soat-so { display: flex; flex-direction: column; min-width: 130px; }
.soat-so b { font-size: 14px; font-variant-numeric: tabular-nums; }
.soat-so i { font-style: normal; font-size: 11px; color: var(--slate-500); margin-top: 2px; }

/* Dòng góp vốn có nút đính bill. Ô chọn tệp và ô STK xổ xuống ngay dưới dòng, không mở
   hộp thoại riêng: đính bill là việc làm nhanh giữa lúc đang soát, không đáng một lần
   chuyển màn. Thêm 16/09/2026. */
.ld-gop-dong { padding: var(--k-1) 0; border-bottom: 1px solid var(--vien); }
.ld-gop-dong:last-child { border-bottom: 0; }
.ld-gop-dong .hs-dong { display: flex; flex-wrap: wrap; gap: var(--k-2); align-items: baseline; }
.ld-gop-dong .dcz-o { margin-top: var(--k-2); max-width: 420px; }
.ld-gop-dong .dcz-bao { display: block; margin-top: var(--k-1); }

/* ── Khối hồ sơ gom lại, bấm mới mở ────────────────────────────────────────
   Thêm 16/09/2026. Tiêu đề khối thành thanh bấm được; nội dung nằm trong, đóng sẵn trừ
   vài khối hay xem nhất.

   Mũi tên chỉ đổi hướng, KHÔNG có hiệu ứng trượt: hệ này phân biệt trạng thái bằng sắc
   độ và kiểu viền, không bằng chuyển động. */
.hs-gom { border: 1px solid var(--vien); border-radius: 8px; margin-bottom: var(--k-3);
          background: var(--the); overflow: hidden; }
.hs-gom > summary {
  cursor: pointer; list-style: none; padding: var(--k-3) var(--k-4);
  font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: var(--k-2);
}
.hs-gom > summary::-webkit-details-marker { display: none; }
.hs-gom > summary::before {
  content: '▸'; font-size: 11px; color: var(--slate-500); flex: none;
}
.hs-gom[open] > summary::before { content: '▾'; }
.hs-gom[open] > summary { border-bottom: 1px solid var(--vien); }
.hs-gom > summary:hover { background: var(--the-mo); }
.hs-gom > summary:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; }
/* Khối tiền có viền trái amber, giữ dấu hiệu đó ở thanh tiêu đề luôn. */
.hs-gom.tien > summary { border-left: 3px solid var(--amber); }
/* Khối bên trong bỏ viền và nền riêng: nó đã nằm trong khung của details rồi. */
.hs-gom > .muc-nd {
  margin: 0; border: 0; border-radius: 0; background: transparent;
  padding: var(--k-3) var(--k-4);
}

/* Dòng căn cứ ở màn Ghép cổ đông. Quỳnh 16/09/2026: "căn cứ ở đâu". Không dùng màu
   cảnh báo — đây là thông tin để đọc, không phải lỗi để sợ. */
.ld-can-cu {
  display: block; margin-top: 4px;
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 11.5px; line-height: 1.5;
  color: var(--slate-600, #8A929C);
}

/* Nhóm gập ở màn dài. Quỳnh 16/09/2026: "ko cần dài như vô hạn kéo". */
.nhom-man-gap > summary {
  cursor: pointer; list-style: none;
  padding: 8px 0; font-size: 12.5px; letter-spacing: .04em;
  color: var(--slate-600, #8A929C);
  font-family: 'Roboto Mono', ui-monospace, monospace;
}
.nhom-man-gap > summary::-webkit-details-marker { display: none; }
.nhom-man-gap > summary::before { content: '▸ '; }
.nhom-man-gap[open] > summary::before { content: '▾ '; }

/* ══════════════════════════════════════════════════════════════════════════
   KHU VỰC VÀ NÚT CHÍNH CỦA MÀN DÀI

   Quỳnh 16/09/2026: *"to lên — và chia các khu vực ra — làm màn hình dàn trải quá,
   lẫn hết nhau ko có UX"*.

   Màn Thoái vốn đang là một dải liên tục: hàng ô số, nút thêm, bảng chưa ghép, khối
   chuẩn bị tiền, ba nhóm danh sách — nối nhau bằng cùng một khoảng trắng, nên mắt
   không biết chỗ nào hết việc này sang việc khác.

   `.khu` vẽ ranh giới bằng đường kẻ trên và một tiêu đề mono nhỏ. KHÔNG dùng nền màu:
   hệ này phân biệt bằng sắc độ và kiểu viền, không bằng hue.
   ══════════════════════════════════════════════════════════════════════════ */
.khu {
  margin: var(--k-8) 0 0;
  padding-top: var(--k-5);
  border-top: 1px solid var(--vien);
}
.khu:first-of-type { margin-top: var(--k-4); border-top: none; padding-top: 0; }
.khu-de {
  margin: 0 0 var(--k-1);
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-500);
}
.khu-mo {
  margin: 0 0 var(--k-4);
  font-size: 13px; line-height: 1.6; color: var(--chu-phu);
  max-width: 62ch;
}

/* Nút mở việc chính của một khu. To hơn `.nut` thường một bậc và đặc ruột, để trong
   một khu có bốn năm nút thì mắt biết bấm cái nào trước. */
.nut.to {
  font-size: 15.5px;
  padding: var(--k-4) var(--k-6);
  font-weight: 600;
}

/* Hàng nút đầu khu: nút chính trước, các nút phụ theo sau, xuống dòng khi hẹp. */
.khu-nut {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--k-3); margin-bottom: var(--k-4);
}

/* Ô nhập của một dòng danh sách, giấu sau nút cho tới khi cần. Năm người đang chờ mà
   mở sẵn hai mươi lăm ô thì không ai đọc được cái gì. */
.tv-mo-nhap[hidden] { display: none !important; }
.tv-mo-nhap {
  margin-top: var(--k-3);
  padding-top: var(--k-3);
  border-top: 1px dashed var(--vien);
}

/* Nhãn đứng trước hàng nút chép theo round ở màn Thoái vốn. Một dòng chữ thường, không
   phải nút, nên phải khác hẳn các nút bên cạnh: cùng cỡ chữ với chúng nhưng màu phụ. */
.tv-nhan-chep { color: var(--chu-phu); font-size: 13px; margin-right: var(--k-1); }

/* Nhãn đứng trước hàng nút chép theo round trong khối "Chuẩn bị tiền". Chữ thường, không
   phải nút, nên cùng cỡ với nút bên cạnh nhưng màu phụ và căn giữa theo chiều dọc. */
.ctk-nhan-loc { color: var(--chu-phu); font-size: 13px; align-self: center; }

/* ── Biên lai nhiều tờ của một lần thoái vốn (0187) ──────────────────────────
   Mỗi tờ một dòng ngang: số tiền đứng trước vì đó là thứ người ta cộng nhẩm khi soát,
   rồi tới ngày và mã, cuối cùng là ảnh và nút gỡ. */
.bl-khoi { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--vien);
  border-radius: 10px; background: var(--nen-nhe); }
.bl-tieu { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.bl-dem { color: var(--chu-phu); font-size: 13px; }
.bl-to { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 6px 0; border-top: 1px dashed var(--vien); }
.bl-stt { color: var(--chu-phu); font-size: 12px; min-width: 42px; }
.bl-tien { font-variant-numeric: tabular-nums; }
.bl-phu { color: var(--chu-phu); font-size: 13px; margin: 0; }
.bl-anh { font-size: 13px; }
.bl-cong { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--vien);
  font-size: 14px; }
.bl-khop { color: var(--xanh, #2e7d32); font-weight: 600; }
/* Lệch KHÔNG phải lỗi, nên dùng màu nhắc chứ không phải màu hỏng: có ca tiền đi một
   phần đường khác và con số lệch ấy là dữ liệu đúng. */
.bl-lech .bl-thieu { color: var(--cam, #b45309); font-weight: 600; }
.bl-thieu { color: var(--cam, #b45309); }

/* Ô ghi chú giải thích số lệch: rộng cả hàng, vì đây là chỗ viết câu chứ không phải điền
   một con số. Nút "xem ảnh" trông như liên kết nhưng là button, vì nó phải xin link ký
   có hạn rồi mới mở được. */
.dcz-rong { flex: 1 1 100%; min-width: 220px; }
.bl-tep { flex: 1 1 200px; font-size: 13px; }
.nhu-lien-ket { background: none; border: 0; padding: 0; color: var(--nhan);
  text-decoration: underline; cursor: pointer; font-size: 13px; }
.nhu-lien-ket:disabled { opacity: .6; cursor: default; }

/* Dòng góp vốn của người đã thoái hết: mờ đi để mắt lướt qua, nhưng KHÔNG ẩn — nó vẫn là
   lịch sử đã từng tham gia, và tổng tiền của round vẫn phải cộng nó. */
.ld-dong.ld-da-thoai { opacity: .62; }
.ld-the-thoai { border-color: var(--vien); color: var(--chu-phu); }
.ld-the-cho { border-color: var(--cam, #b45309); color: var(--cam, #b45309); }
.ld-tom { margin: 0 0 10px; font-size: 13px; color: var(--chu-phu); }
.ld-cho-chu { color: var(--cam, #b45309); }

/* Tên trên thẻ thoái vốn là đường sang hồ sơ gốc. Giữ nguyên cỡ và độ đậm của tên, chỉ
   thêm gạch chân khi rê chuột: thẻ vẫn đọc như một cái tên, không như một dãy nút. */
.tv-ten-link { color: inherit; text-decoration: none; }
.tv-ten-link:hover, .tv-ten-link:focus-visible { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   BIỂU ĐỒ LEAD (Quỳnh 05/10/2026: "mọi báo cáo từ giờ trở đi phải có tính trực quan
   dạng biểu đồ"). Dựng bằng div, không thư viện. Theo skill dataviz: một sắc (nâu Burning
   Flame hạ sắc) sáng→đậm cho thang có thứ tự, xám trung tính cho "đã dừng", thanh mỏng,
   nhãn trực tiếp có chọn lọc, chú giải luôn có khi từ hai phần trở lên, mỗi biểu đồ có bảng số.
   Bậc 1→5 đã chạy validate_palette (ordinal, nền trắng): PASS.
   ══════════════════════════════════════════════════════════════════════════ */
/* Biến --bd-1..5, --bd-trung, --bd-ray nay ở khối :root đầu tệp (Sổ dòng chảy 31/10/2026). */
.bd-loc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 var(--k-4); }
.bd-o-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--k-2); margin: 0 0 var(--k-4); }
.bd-o { background: var(--the); border: 1px solid var(--vien-mo); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-o-nhan { font-size: 12px; color: var(--slate-500); letter-spacing: .02em; }
.bd-o-so { font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--chu); font-variant-numeric: proportional-nums; }
.bd-o-phu { font-size: 12.5px; color: var(--slate-400); }
.bd-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--k-3); }
.bd-the { background: var(--the); border: 1px solid var(--vien-mo); border-radius: var(--r); padding: 16px 18px 14px; min-width: 0; }
.bd-the.rong { grid-column: 1 / -1; }
.bd-tieu-de { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--chu); }
.bd-mo-ta { margin: 0 0 12px; font-size: 12.5px; color: var(--slate-500); }
.bd-dien-giai { margin: 12px 0 0; font-size: 13px; color: var(--slate-400); line-height: 1.5; }
.bd-dien-giai a, .bd-dien-giai button { display: block; margin-top: 4px; color: var(--amber); background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; text-align: left; }
.bd-bang { margin-top: 10px; font-size: 12.5px; }
.bd-bang summary { cursor: pointer; color: var(--slate-500); }
.bd-bang table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bd-bang th, .bd-bang td { text-align: left; padding: 4px 6px; border-top: 1px solid var(--vien-mo); }
.bd-bang th { font-weight: 500; color: var(--slate-500); font-size: 11.5px; }
.bd-bang td.so, .bd-bang th.so { text-align: right; }
/* Thanh ngang: nhãn | thanh | số. Thanh 12px, đầu bo 3px, bám gốc trái. */
.bd-ngang { display: grid; grid-template-columns: minmax(120px, 36%) 1fr auto; gap: 6px 10px; align-items: center; }
.bd-ngang .bd-hang { display: contents; }
.bd-nhan { font-size: 12.5px; line-height: 1.25; color: var(--chu); }
.bd-thanh { height: 12px; background: var(--bd-ray); border-radius: 3px; position: relative; overflow: hidden; }
.bd-thanh i { display: block; height: 100%; border-radius: 0 3px 3px 0; min-width: 2px; }
.bd-so { font-size: 12.5px; color: var(--slate-400); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-hang.bam-duoc .bd-nhan { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.bd-hang.bam-duoc:hover .bd-nhan { color: var(--amber); }
/* Thanh chồng 100%: khe 2px nền trắng giữa các đoạn thay cho viền. */
.bd-chong { display: flex; gap: 2px; height: 22px; border-radius: 3px; overflow: hidden; background: var(--bd-ray); }
.bd-doan { display: flex; align-items: center; justify-content: center; min-width: 2px; color: #fff; font-size: 11.5px; font-weight: 600; overflow: hidden; }
.bd-doan.sang { color: var(--chu); }
.bd-chu-giai { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--slate-400); }
.bd-chu-giai li { display: flex; align-items: center; gap: 6px; }
.bd-chu-giai i { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.bd-chu-giai b { color: var(--chu); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Cột theo ngày. Khung cao 150px chỉ chứa cột; hàng nhãn nằm dưới khung nên không bị cắt. */
.bd-cot { display: flex; align-items: flex-end; gap: 2px; height: 150px; margin: 6px 0 24px; border-bottom: 1px solid var(--line); }
.bd-cot-mot { flex: 1 1 0; min-width: 0; height: 100%; position: relative; display: flex; align-items: flex-end; }
.bd-cot-mot i { display: block; width: 100%; background: var(--bd-2); border-radius: 3px 3px 0 0; }
.bd-cot-mot.day i { background: var(--bd-5); }
.bd-cot-mot:hover i, .bd-cot-mot:focus-visible i { filter: brightness(.88); }
.bd-cot-nhan { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--slate-500); white-space: nowrap; }
.bd-cot-mot:focus-visible, .bd-hang:focus-visible .bd-thanh, .bd-doan:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
/* Một tooltip dùng chung. Giá trị đậm trước, nhãn sau. */
.bd-tt { position: fixed; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .08s; background: var(--paper); color: #fff; border-radius: 4px; padding: 6px 9px; font-size: 12.5px; line-height: 1.4; max-width: 260px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.bd-tt.hien { opacity: 1; }
.bd-tt b { display: block; font-size: 14px; font-weight: 600; }
.bd-tt span { display: block; opacity: .85; }
.bd-dang-doi { opacity: .45; transition: opacity .15s; }
/* Câu nhắc dưới hàng ô (tab Hôm nay, D181). */
.bd-nhac { margin: 0 0 var(--k-4); padding: 10px 14px; border-radius: var(--r); background: var(--the); border: 1px solid var(--vien-mo);
  font-size: 13.5px; line-height: 1.5; color: var(--chu); }
.bd-nhac.canh { border-color: var(--canh-bao); border-left-width: 4px; }
.bd-nhac a { color: var(--amber); white-space: nowrap; }
/* Ghi chú của thanh ngang: máy tính đọc ở tooltip khi rê chuột; điện thoại không rê được nên hiện thành dòng (D181). */
.bd-phu { display: none; }
.bd-muc { margin: var(--k-6) 0 var(--k-3); padding-top: var(--k-4); border-top: 1px solid var(--line); }
.bd-muc h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--chu); }
.bd-muc p { margin: 4px 0 0; font-size: 13px; color: var(--slate-500); }
/* Sơ đồ dòng chảy lead (0330): kênh -> trang -> bước. Máy tính vẽ SVG; điện thoại đổi thành ba bậc thanh ngang. */
/* .bd-luong-*: sơ đồ dòng chảy ngang đã thay bằng phễu dọc .pd-* (D203). */
.bd-ngang.hien-phu .bd-phu { display: block; grid-column: 2 / -1; margin: -2px 0 6px; font-size: 12px; line-height: 1.4; color: var(--slate-500); }
@media (max-width: 640px) {
  /* Điện thoại (D181, Quỳnh 30/10 "bảng nhìn rất khó chịu và lệch"): mỗi hàng thanh ngang thành ba dòng: nhãn cả hàng,
     thanh + số, ghi chú. Nhãn không còn bị ép vào cột 40% vỡ thành ba dòng chữ. */
  .bd-ngang { grid-template-columns: 1fr auto; gap: 2px 10px; }
  .bd-nhan { grid-column: 1 / -1; margin-top: 8px; }
  .bd-ngang .bd-hang:first-child .bd-nhan { margin-top: 0; }
  .bd-phu { display: block; grid-column: 1 / -1; font-size: 12px; line-height: 1.4; color: var(--slate-500); }
  .bd-the { padding: 14px 14px 12px; }
  .bd-o-hang { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bd-o { padding: 10px 12px; }
  .bd-o-so { font-size: 22px; }
  .bd-o-phu { font-size: 12px; }
  .bd-luoi { grid-template-columns: minmax(0, 1fr); }
  /* bảng số nhiều cột cuộn ngang trong thẻ, không đẩy cả trang lệch */
  .bd-bang { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bd-bang table { min-width: max-content; }
  .bd-bang th, .bd-bang td { white-space: nowrap; }
  .bd-dau { flex-wrap: wrap; }
  /* hàng tab một dòng, vuốt ngang thay vì tràn ba dòng */
  .man-tab { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .man-tab::-webkit-scrollbar { display: none; }
  .man-tab-nut { flex: none; white-space: nowrap; padding: 0 var(--k-3); min-height: var(--nut-cao); }  /* Quy chuẩn: ô bấm ≥ 44px */
  .man-tab-du { display: none; }
  .man-tab .man-tab-nut { padding: 0 var(--k-2); }
  .tim-hang-tren { flex-wrap: wrap; }
  .man-tab-con { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cv-tab.cv-tab { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .man-tab-con-nut { flex: none; white-space: nowrap; min-height: var(--nut-cao); }
  .tim-hang-tren .o-tim { flex: 1 1 100%; }
  .man-tab-them { display: inline-flex; }
  .man-tab-them-ds .man-tab-nut { justify-content: flex-start; border-bottom: none; }
}
@media (max-width: 767px) {
  /* Bảng điều hành (D181): khuôn .bang trên điện thoại ẩn hàng tiêu đề và ô đầu (số thứ tự). Bảng tự do của Bảng điều hành gắn
     data-nhan vào từng ô nên mỗi dòng thành một thẻ: tên dự án đậm ở đầu, mỗi số một hàng "tên cột ... số". Ô số thứ tự mang
     class stt; ô đầu là tên (bảng Mục tiêu tháng) thì vẫn hiện. */
  .bang.bang-tu-do td:first-child { display: block; min-width: 0 !important; }
  .bang.bang-tu-do td.stt { display: none; }
  .bang.bang-tu-do td.ten { min-width: 0 !important; font-weight: 600; color: var(--chu); padding-bottom: 6px; white-space: normal !important; }
  .bang.bang-tu-do td[data-nhan] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 0;
    white-space: normal !important; text-align: right; }
  .bang.bang-tu-do td[data-nhan]::before { content: attr(data-nhan); flex: 0 1 auto; text-align: left; font-size: 12.5px; color: var(--slate-500); }
  .bang.bang-tu-do td[data-nhan] > * { flex: 0 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .bd-tt, .bd-dang-doi { transition: none; } }
/* Thẻ chiến dịch thu lead (05/10/2026): mục Lead Email Thu Thập là trang chứa nhiều chiến dịch. */
.cd-luoi { display: grid; gap: var(--k-3); }
.cd-the { background: var(--the); border: 1px solid var(--vien-mo); border-radius: var(--r); padding: 18px 20px 16px; }
.cd-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cd-chu { min-width: 0; flex: 1 1 320px; }
.cd-ten { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--chu); }
.cd-mo-ta { margin: 0 0 4px; font-size: 13px; color: var(--slate-400); max-width: 72ch; }
.cd-meta { margin: 0; font-size: 12px; color: var(--slate-500); }
.cd-nut { display: flex; gap: 8px; flex: none; }
.cd-than .bd-o-hang { margin-bottom: 14px; }
.cd-pheu-nhan { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); }

/* ── Màn Đối tác mọi chương trình (18/10/2026, sổ đối tác chung đợt 1, docs/88) ──
   Bảng 6 cột trong khung hẹp (điện thoại 375, ô chi tiết): mỗi dòng thành một thẻ, mỗi ô một hàng, nhãn cột (data-nhan) bên trái,
   giá trị bên phải; ô đầu là tiêu đề thẻ. Khuôn bảng đặt grid-template-columns nội tuyến nên phải !important mới đè được. Bảng số
   của thẻ biểu đồ (8 cột) cuộn ngang trong khung của nó thay vì tràn ra ngoài. */
.dt-man .bd-bang { overflow-x: auto; }
/* Ô số tiền đủ chỗ cho số tới hàng chục triệu ("14.053.332đ"): 150px của khuôn chung cắt chữ khi bảy ô dàn một hàng. */
.dt-man .bd-o-hang { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dt-bang { container-type: inline-size; }
@container (max-width: 559.98px) {
  .dt-bang .bang-dau { display: none; }
  .dt-bang .bang-dong { grid-template-columns: minmax(0, 1fr) !important; row-gap: 2px; }
  .dt-bang .bang-o {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    white-space: normal; overflow: visible; overflow-wrap: anywhere; text-align: right;
  }
  .dt-bang .bang-o::before { content: attr(data-nhan); flex: none; max-width: 45%; color: var(--slate-500); font-size: 12px; text-align: left; }
  .dt-bang .bang-o:first-child { font-weight: 600; text-align: left; }
  .dt-bang .bang-o:first-child::before { content: none; }
}
/* Bảng số theo từng khóa ở chi tiết (8 cột): đổi sang thẻ từ khung dưới 900px, không chờ tới 560px như bảng 6 cột. */
@container (max-width: 899.98px) {
  .dt-bang-rong .bang-dau { display: none; }
  .dt-bang-rong .bang-dong { grid-template-columns: minmax(0, 1fr) !important; row-gap: 2px; }
  .dt-bang-rong .bang-o {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    white-space: normal; overflow: visible; overflow-wrap: anywhere; text-align: right;
  }
  .dt-bang-rong .bang-o::before { content: attr(data-nhan); flex: none; max-width: 45%; color: var(--slate-500); font-size: 12px; text-align: left; }
  .dt-bang-rong .bang-o:first-child { font-weight: 600; text-align: left; }
  .dt-bang-rong .bang-o:first-child::before { content: none; }
}
/* Câu báo sau khi gắn (nhận con trỏ để trình đọc màn hình đọc), tiêu đề chi tiết, khung gắn mã, hàng nút chọn người (nút dài
   có số điện thoại và Zalo: xuống dòng, không tràn ngang). */
.dt-man .bao-xong { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--amber); background: var(--ink-650); }
.dt-man .bao-xong:focus { outline: none; }
.dt-man .bao-xong:focus-visible, .dt-de:focus-visible, .dt-gan h4:focus-visible { outline: 2px solid var(--chu); outline-offset: 2px; }
.dt-de { margin: 0 0 8px; font-size: 17px; overflow-wrap: anywhere; }
.dt-de:focus, .dt-gan h4:focus { outline: none; }
.dt-gan { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }
.dt-gan h4 { margin: 0; font-size: 15px; }
.dt-gan label { display: grid; gap: 4px; }
.dt-chon { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-chon .nut { white-space: normal; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.dt-chon .nut[aria-pressed="true"] { outline: 2px solid var(--chu); outline-offset: 1px; font-weight: 600; }

/* ---------- Hub > Bài từ video (0253, docs/95) ---------- */
.cv-the { display: flex; flex-direction: column; gap: var(--k-3); }
/* Thẻ bài mở thẳng từ Phòng AI ("Duyệt bài ..."): viền nhấn để mắt thấy ngay bài cần duyệt */
.cv-the.cv-the-mo { outline: 2px solid var(--nhan); outline-offset: 2px; scroll-margin-top: 72px; }
.cv-khong-thay { color: var(--canh-bao, var(--chu-phu)); }
.cv-dau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-3); font-size: 13.5px; }
.cv-mo-ta { margin: 0; font-weight: 600; font-size: 15.5px; color: var(--chu); }
.cv-phu { margin: 0; color: var(--chu-phu); font-size: 13.5px; }
.cv-loi { margin: 0; color: var(--xau); font-size: 14px; }
.cv-dang { margin: 0; font-size: 14px; }
.cv-canh-bao { border: 1px solid var(--xau); border-radius: var(--r); padding: var(--k-3); color: var(--xau); font-size: 14px; }
.cv-canh-bao ul { margin: var(--k-1) 0 0; padding-left: var(--k-5); }
.cv-mo { border-top: 1px solid var(--vien-mo); padding-top: var(--k-2); }
.cv-mo > summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: var(--k-11); display: flex; align-items: center; }
.cv-chep { border: 1px solid var(--vien); border-radius: var(--r); padding: var(--k-3); }
.cv-chep-dau { display: flex; justify-content: space-between; align-items: center; gap: var(--k-3); font-size: 14px; }
.cv-chep-dau .nut { min-height: var(--k-11); padding: var(--k-2) var(--k-4); }
.cv-chep-so { display: block; color: var(--chu-phu); font-size: 13px; font-weight: 400; margin-top: 2px; }
.cv-chep pre { white-space: pre-wrap; font: inherit; font-size: 14px; margin: var(--k-2) 0 0; }
.cv-nut { flex-wrap: wrap; align-items: center; }
.cv-nut .nut { min-height: var(--k-11); }
.cv-da-doc { display: flex; align-items: center; gap: var(--k-1); min-height: var(--k-11); font-size: 14px; }
.cv-them > summary { cursor: pointer; font-weight: 600; min-height: var(--k-11); display: flex; align-items: center; }
.cv-them-than { display: flex; flex-direction: column; gap: var(--k-3); margin-top: var(--k-3); max-width: 640px; }
/* 05/11: hàng tab trong màn Bài từ video (Cần duyệt, Bài đã đăng, Đo lường, Thay ảnh, Máy). Kẻ trên để tách khỏi hàng tab Hub. */
.cv-tab { display: flex; flex-wrap: wrap; gap: var(--k-2); margin: 0 0 var(--k-4); padding-top: var(--k-4); border-top: 1px solid var(--vien); }
.cv-them-than details > summary { cursor: pointer; font-size: 13.5px; color: var(--chu-phu); min-height: var(--k-11); display: flex; align-items: center; }
/* Bài từ video, thẻ gọn (Quỳnh 25/10): phần gập dồn xuống cuối thẻ, khối chép xếp dọc. */
.cv-gap { display: flex; flex-direction: column; }
.cv-caption { font-size: 13px; }
.cv-nhac { margin: var(--k-2) 0 0; border-left: 3px solid var(--amber); padding: var(--k-1) var(--k-3); font-size: 14px; color: var(--chu); }
.cv-chep-ds { display: flex; flex-direction: column; gap: var(--k-3); margin-top: var(--k-2); }
.cv-mo > summary { list-style: none; gap: var(--k-2); }
.cv-mo > summary::-webkit-details-marker { display: none; }
.cv-mo > summary::before { content: '▸'; color: var(--chu-phu); transition: transform .15s; }
/* D253 (0396): ảnh trong bài, mỗi ảnh một hàng; khối Ảnh Chuyên san đầu ngăn Đã đăng. */
.cv-anh { display: flex; flex-direction: column; gap: var(--k-2); margin-top: var(--k-2); }
.cv-anh-dong { display: flex; flex-wrap: wrap; gap: var(--k-3); align-items: center; border-top: 1px solid var(--vien-mo); padding-top: var(--k-2); }
.cv-anh-dong img { display: block; width: 96px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--vien-mo); }
.cv-anh-chu { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; font-size: 14px; }
.cv-anh-nut { display: flex; flex-wrap: wrap; gap: var(--k-2); }
.cv-anh-nut .nut { min-height: var(--k-11); }
.cv-anh-nho { display: block; width: 72px; height: 48px; border-radius: 4px; object-fit: cover; }
.cv-anh-tieu { margin: var(--k-4) 0 var(--k-2); font-size: 14.5px; }
.cv-mo[open] > summary::before { transform: rotate(90deg); }

/* ── Sổ dòng chảy · nền chung (31/10/2026, bước 1, docs/superpowers/plans/2026-10-31-so-dong-chay-buoc-1.md).
   Thẻ bo --bo 14px; nút, ô nhập, chọn bo --bo-nut 10px; nhãn tròn --bo-nhan. Điện thoại: ô nhập chữ 16px để iPhone
   không tự phóng to, nút cao tối thiểu --nut-cao 44px. ── */
.nut, button.nut, .nut-vien, .nut-amber, .loc,
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
input[type="password"], input:not([type]), select, textarea { border-radius: var(--bo-nut); }
.the-tt, .tag, .nhan-tron { border-radius: var(--bo-nhan); }
/* Design review 31/10/2026, FINDING-003: --bo 14px chỉ cho thẻ. Mục menu, dòng danh sách bấm được, nút tab khác, nhãn mục
   dùng --bo-nut 10px để có thứ bậc bo góc (trước đó 43 phần tử ở Tổng quan cùng bo 14px). */
.muc, .ks-dong, .nut-tab-khac, .sc-de { border-radius: var(--bo-nut); }
@media (max-width: 599px) {
  input, select, textarea { font-size: 16px; }
  .nut, button.nut, .nut-vien, .nut-amber { min-height: var(--nut-cao); }
}

/* ── Sổ dòng chảy · thanh dưới 5 mục và lưới điện thoại (31/10/2026, bước 1). Dưới 1024px thanh dưới thay nút MENU;
   mục Thêm mở cột menu đầy đủ. Dưới 600px một cột, lề 16px; 600–1023px lề 24px. ── */
.k-thanh-duoi { display: none; }
@media (max-width: 1023px) {
  body.co-thanh-duoi .k-thanh-duoi {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; inset: auto 0 0 0; z-index: 30;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--the); border-top: 1px solid var(--vien);
  }
  .k-td-muc {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--nut-cao); padding: 4px 0; border: 0; background: none; font: inherit;
    font-size: var(--co-chu-nho); color: var(--slate-500); text-decoration: none; cursor: pointer;
  }
  .k-td-muc svg { width: 22px; height: 22px; }
  .k-td-muc[aria-current="page"] { color: var(--nhan); font-weight: 600; }
  .k-td-muc:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; border-radius: var(--bo-nut); }
  body.co-thanh-duoi .nut-menu { display: none; }
  body.co-thanh-duoi .noi-dung { padding: 24px 24px 96px; }
}
@media (max-width: 599px) {
  body.co-thanh-duoi .noi-dung { padding: 20px 16px 96px; }
}

/* Design review 31/10/2026, FINDING-004: Quy chuẩn chữ nhỏ nhất 12px (--co-chu-nho). Trước đó nhãn đầu màn 10px,
   tiêu đề cột bảng số 11,5px, nhãn trạng thái, trục biểu đồ, nhãn bậc dòng chảy, tiêu đề khối kiểm soát 11px. */
.man-nhom, .bd-bang th, .the-tt, .bd-cot-nhan, .bd-luong-bac, .ks-de, .dcz-xong-nhan, .dcz-cd-ten, .cd-pheu-nhan { font-size: var(--co-chu-nho); }
.bd-luong-cot { font-size: var(--co-chu-nho); }

/* Design review 31/10/2026, FINDING-005: ô ghi chú ở Hộp lead và Vòng đời lead (input.o) chưa có luật nào, trình duyệt vẽ mặc định
   cao 25px viền xám thô. Theo khuôn ô nhập: cao --nut-cao, viền --vien, nền thẻ, bo --bo-nut. */
input.o {
  min-height: var(--nut-cao); padding: 0 var(--k-3);
  border: 1px solid var(--vien); border-radius: var(--bo-nut); background: var(--the);
  font: inherit; font-size: 15px; color: var(--chu);
}
input.o:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
@media (max-width: 599px) { input.o { font-size: 16px; } }

/* ── Sổ dòng chảy bước 3 (D185): Bảng điều hành 5 câu hỏi. Khuôn mới tiền tố k-, chỉ đọc biến :root (dieu-hanh-cau-hoi-ve.js). ── */
.k-vong-hang { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--k-3); margin: 0 0 var(--k-4); }
.k-vong-the { display: flex; align-items: center; gap: var(--k-3); min-height: var(--nut-cao); padding: var(--k-3) var(--k-4);
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); font: inherit; color: var(--chu); text-align: left; cursor: pointer; }
.k-vong-the:hover { border-color: var(--line-2); }
.k-vong-the:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.k-vong-chu { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.k-vong-chu b { font-size: 15px; font-weight: 600; }
.k-vong { position: relative; display: inline-grid; place-items: center; flex: none; }
.k-vong svg { position: absolute; inset: 0; }
.k-vong b { position: relative; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.k-vong-ray { fill: none; stroke: var(--bd-ray); stroke-width: 5; }
.k-vong-so { fill: none; stroke-width: 5; stroke-linecap: round; }
.k-vong-so.xau { stroke: var(--xau); } .k-vong-so.tot { stroke: var(--tot); } .k-vong-so.nhan { stroke: var(--bd-3); }
.k-vong-trong { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.k-nhan-trang { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--bo-nhan);
  font-size: var(--co-chu-nho); font-weight: 500; line-height: 1.5; background: var(--nhan-nhat); color: var(--nhan); }
.k-nhan-trang::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.k-nhan-trang.xau { background: var(--xau-nhat); color: var(--xau); }
.k-nhan-trang.tot { background: var(--tot-nhat); color: var(--tot); }
.k-nhan-trang.trong { background: transparent; color: var(--chu-phu); border: 1px dashed var(--line-2); }
.k-nhan-trang.trong::before { display: none; }

.k-cau { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: var(--k-5); margin: 0 0 var(--k-4); min-width: 0;
  scroll-margin-top: var(--k-4); }
.k-cau-dau { display: flex; align-items: center; gap: var(--k-3); margin: 0 0 var(--k-4); }
.k-cau-dau h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 600; color: var(--chu); }
.k-cau-so { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chu); color: var(--the);
  font-size: 13px; font-weight: 600; }
.k-luoi-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--k-4); align-items: start; }
.k-luoi-2.deu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.k-luoi-2 > .k-cau { margin: 0 0 var(--k-4); }
.k-luoi-cau { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--k-5); align-items: start; }
.k-luoi-cau.ba { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.8fr); }
.k-cot-o { display: flex; flex-direction: column; gap: var(--k-3); }
.k-luoi-o { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-3); margin-top: var(--k-4); }
.k-so-lon { margin: 0 0 var(--k-3); color: var(--chu-phu); }
.k-so-lon b { font-size: 36px; font-weight: 600; color: var(--chu); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.k-chu-phu { margin: 4px 0 0; font-size: var(--co-chu-nho); color: var(--slate-500); }
.k-chu-phu.xau { color: var(--xau); }
.k-tien-do { position: relative; height: 10px; margin: var(--k-2) 0 0; background: var(--bd-ray); border-radius: var(--bo-nhan); }
.k-tien-do > i { display: block; height: 100%; border-radius: inherit; }
.k-moc { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--chu); }
.k-dong-mt { margin-top: var(--k-4); }
.k-dong-mt-dau { display: flex; justify-content: space-between; gap: var(--k-3); font-size: 14px; }
.k-dong-mt-dau b { font-variant-numeric: tabular-nums; }
.k-o { display: flex; flex-direction: column; gap: 4px; padding: var(--k-3) var(--k-4); background: var(--nen); border-radius: var(--bo-nut); }
.k-o.xau { background: var(--xau-nhat); }
.k-o.xau .k-o-so { color: var(--xau); }
.k-o-nhan { font-size: var(--co-chu-nho); color: var(--slate-500); }
.k-o-so { font-size: 22px; font-weight: 600; color: var(--chu); font-variant-numeric: tabular-nums; }
.k-o-phu { font-size: var(--co-chu-nho); color: var(--slate-500); }
.k-o-trong { display: inline-block; align-self: flex-start; padding: 4px 10px; border: 1.5px dashed var(--line-2); border-radius: var(--bo-nut);
  font-size: var(--co-chu-nho); color: var(--chu-phu); }
.k-ket-luan { margin: var(--k-4) 0 0; font-weight: 500; color: var(--chu); }
.k-ket-luan::before { content: '→ '; color: var(--nhan); font-weight: 600; }
.k-chi-tiet { margin-top: var(--k-4); }
.k-chi-tiet > summary { min-height: var(--nut-cao); display: flex; align-items: center; cursor: pointer; color: var(--nhan); font-weight: 500; }
.k-chi-tiet-than { margin-top: var(--k-3); }
.k-viec-da > summary { color: var(--chu); font-weight: 600; font-size: 16px; }

.k-hang-vong { display: flex; align-items: center; gap: var(--k-4); }
.k-hang-vong.deu { justify-content: space-around; flex-wrap: wrap; }
.k-hang-vong p { margin: 0 0 4px; }
.k-vong-cot { display: flex; flex-direction: column; align-items: center; gap: var(--k-2); font-size: var(--co-chu-nho); color: var(--slate-500); }
.k-ds-vi { margin-top: var(--k-4); padding: var(--k-2) var(--k-3); background: var(--nen); border-radius: var(--bo-nut); }
.k-vi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2) var(--k-3); padding: var(--k-2) 0; border-bottom: 1px solid var(--vien-mo); }
.k-vi:last-child { border-bottom: 0; }
.k-vi-cham { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--bd-2); }
.k-vi-cham.sepay { background: var(--bd-5); }
.k-vi-ten { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.k-vi-so { font-variant-numeric: tabular-nums; }
.k-nhap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2); width: 100%; }
.k-o-nhap { max-width: 180px; }
.k-bao { font-size: var(--co-chu-nho); color: var(--slate-500); }
.k-tinh-hoa { display: flex; flex-direction: column; align-items: flex-start; gap: var(--k-2); }

/* Thác lãi lỗ: khoản cộng nâu đặc, khoản trừ nền đỏ nhạt viền đỏ (đậm nhạt khác hẳn nhau, đủ phân biệt với người mù màu đỏ lục), kết quả xanh.
   Số có dấu ghi trên từng cột, nên không đọc bằng màu một mình. */
.k-thac { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--k-2); margin-top: var(--k-2); }
.k-thac-mot { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center; }
.k-thac-khung { position: relative; height: 160px; }
.k-thac-khung > i { position: absolute; left: 0; right: 0; border-radius: 4px; background: var(--bd-5); }
.k-thac-mot.tru .k-thac-khung > i { background: #F2C9BF; border: 1.5px solid var(--xau); }
.k-thac-mot.ket .k-thac-khung > i { background: var(--tot); }
.k-thac-khung > i.trong { background: transparent; border: 1.5px dashed var(--line-2); }
.k-thac-so { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--chu); }
.k-thac-so.am { color: var(--xau); }
.k-thac-nhan { font-size: var(--co-chu-nho); color: var(--slate-500); }

/* Phễu máy bán: bề rộng theo số người, chữ trong thanh (trắng trên nâu đậm, xanh đậm đủ tương phản). */
  border-radius: var(--bo-nut); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }

.k-viec { list-style: none; margin: 0; padding: 0; }
.k-viec li { display: flex; align-items: center; gap: var(--k-3); padding: var(--k-3) 0; border-bottom: 1px solid var(--vien-mo); }
.k-viec li:last-child { border-bottom: 0; }
.k-viec-chu { flex: 1; display: flex; flex-direction: column; min-width: 0; }

@media (max-width: 1023px) {
  .k-vong-hang { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 0 var(--k-3); }
  .k-vong-the { border: 0; border-bottom: 1px solid var(--vien-mo); border-radius: 0; padding: var(--k-3) 0; }
  .k-vong-the:last-child { border-bottom: 0; }
  .k-vong-chu { flex-direction: row; justify-content: space-between; align-items: center; flex: 1; }
  .k-luoi-2, .k-luoi-2.deu, .k-luoi-cau, .k-luoi-cau.ba { grid-template-columns: minmax(0, 1fr); }
  .k-cau { padding: var(--k-4); }
  .k-so-lon b { font-size: 30px; }
  .k-thac-khung { height: 120px; }
  .k-thac-so { font-size: var(--co-chu-nho); }
}
.k-o .k-nhan-trang { align-self: flex-start; }
.k-chi-tiet-than button { min-height: var(--nut-cao); }   /* nút của khối D183 lồng vào cũng đủ 44px để bấm trên điện thoại */
.k-chi-tiet-than { overflow-x: auto; }
.k-cau-phu { padding-top: var(--k-2); padding-bottom: var(--k-2); }

/* ── Hồ sơ một người, Sổ dòng chảy bước 5 (D185): dải đầu, đủ X/7, tab Học và Tiền ── */
.hs-dai-dau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2) var(--k-4); margin: calc(-1 * var(--k-3)) 0 var(--k-5); }
.hs-dai-the { display: flex; flex-wrap: wrap; gap: var(--k-2); }
.hs-dai-tt { margin: 0; font-size: 14px; color: var(--xau); font-weight: 500; }
.hs-dai-tt.da { color: var(--tot); }
.hs-tab-hang[hidden] { display: none; }
.hs-tab-hang { flex-wrap: wrap; }
.hs-tab { min-height: var(--nut-cao); }
.hs-tab-them-hang { margin-top: calc(-1 * var(--k-4)); background: var(--nen); border-radius: 0 0 var(--bo-nut) var(--bo-nut); }
.hs-muc .k-cau-dau h2 { flex: 1; }
.hs-o-tq { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 var(--k-4); }
.hs-o-tq .k-o-so { font-size: 18px; }
.hs-muc-ds { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--k-2) var(--k-4); margin: 0; }
.hs-muc-ds dt { color: var(--slate-500); font-size: 14px; }
.hs-muc-ds dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* D372: dòng thiếu của thẻ Hồ sơ đủ là chỗ gõ luôn (ô + Lưu), không còn "thêm ở Cập nhật". */
.hs-muc-sua { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2); }
.hs-muc-sua .hs-muc-o { flex: 1 1 220px; min-width: 0; max-width: 360px; padding: 4px 8px; }
.hs-muc-sua .dcz-bao { flex-basis: 100%; }
.hs-muc-sua .dcz-bao:empty { display: none; }
.hs-muc-ds dd > .nut.nho { margin: 0; }
.hs-k-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 var(--k-4); align-items: start; }
.hs-k-luoi .k-cau-dau h2 { flex: 1; font-size: 17px; }
.hs-th-so { display: flex; align-items: baseline; gap: var(--k-2); flex-wrap: wrap; }
.hs-th-so .k-o-so { font-size: 34px; }
.hs-ds { list-style: none; margin: var(--k-3) 0 0; padding: 0; }
.hs-ds li { display: flex; flex-direction: column; gap: 2px; padding: var(--k-2) 0; border-bottom: 1px solid var(--vien-mo); }
.hs-ds li:last-child { border-bottom: none; }
.hs-round { padding: var(--k-3) var(--k-4); background: var(--nen); border-radius: var(--bo-nut); margin: 0 0 var(--k-3); }
.hs-round.mo { opacity: .85; }
.hs-round-dau { display: flex; justify-content: space-between; align-items: center; gap: var(--k-3); flex-wrap: wrap; }
.hs-buoc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k-2); list-style: none; margin: var(--k-3) 0 0; padding: 0; }
.hs-buoc li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--co-chu-nho); color: var(--slate-500); text-align: center; }
.hs-buoc li > span:first-child { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px dashed var(--line-2); color: var(--tot); font-weight: 600; }
.hs-buoc li.xong > span:first-child { border: none; background: var(--tot-nhat); }
.hs-buoc li.xong { color: var(--chu); }

/* ── Hộp việc #/viec, Sổ dòng chảy bước 4 (D185, canvas HopViec) ── */
.hv-khu { margin: var(--k-5) 0 var(--k-2); font-size: 14px; font-weight: 600; color: var(--chu-phu); }
.hv-ds { list-style: none; margin: 0; padding: 0; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; }
.hv-ds > li + li { border-top: 1px solid var(--vien-mo); }
.hv-dong { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 64px; align-items: center; gap: var(--k-3); width: 100%;
  min-height: 56px; padding: var(--k-3) var(--k-4); background: none; border: none; text-align: left; font: inherit; color: var(--chu); cursor: pointer; }
.hv-dong:hover { background: var(--nen); }
.hv-dong.qua-han { box-shadow: inset 3px 0 0 var(--xau); }
.hv-vai { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nhan-nhat); color: var(--nhan);
  font-size: 12px; font-weight: 600; }
.hv-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-chu .k-chu-phu { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-so { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hv-han { font-size: var(--co-chu-nho); color: var(--slate-500); text-align: right; }
.hv-han.xau { color: var(--xau); font-weight: 600; }
.hv-than { padding: 0 var(--k-4) var(--k-4); background: var(--nen); }
.hv-than[hidden] { display: none; }
.hv-viec { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--k-2) var(--k-4); padding: var(--k-3) 0;
  border-bottom: 1px solid var(--vien-mo); }
.hv-viec.qua-han strong { color: var(--xau); }
.hv-viec-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.hv-nut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2); }
.hv-o-han { max-width: 160px; }
.hv-trang { display: flex; align-items: center; gap: var(--k-3); padding: var(--k-3) 0; }
.hv-trong { display: block; padding: var(--k-5); text-align: center; }
@media (max-width: 640px) { .hv-dong { grid-template-columns: 32px minmax(0, 1fr) auto; } .hv-han { grid-column: 2 / -1; text-align: left; } }

/* ── Màn Thêm #/them (canvas Them-DienThoai) ── */
.them-ld { display: flex; align-items: center; justify-content: space-between; gap: var(--k-3); width: 100%; padding: var(--k-4);
  background: var(--chu); color: var(--the); border: none; border-radius: var(--bo); font: inherit; text-align: left; cursor: pointer; margin: 0 0 var(--k-4); }
.them-ld small { display: block; opacity: .75; font-size: var(--co-chu-nho); }
.them-nhom { margin: 0 0 var(--k-4); background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; }
.them-nhom h2 { margin: 0; padding: var(--k-3) var(--k-4) var(--k-2); font-size: var(--co-chu-nho); font-weight: 500; color: var(--slate-500); }
.them-muc { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: var(--nut-cao); padding: 0 var(--k-4);
  background: none; border: none; border-top: 1px solid var(--vien-mo); font: inherit; color: var(--chu); text-align: left; cursor: pointer; }
.them-muc:hover { background: var(--nen); }

/* ── Liên Đoàn theo câu hỏi, Sổ dòng chảy bước 7 (D185, canvas LD-*) ── */
.ld-pt { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--k-2); margin: 0 0 var(--k-3); }
.ld-pt .k-o-so { font-size: 34px; }
.ld-thac { display: flex; flex-direction: column; gap: var(--k-2); }
.ld-thac-hang { display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px; align-items: center; gap: var(--k-3); font-size: 14px; }
.ld-thac-nhan { color: var(--chu-phu); }
.ld-thac-ray { height: 14px; background: var(--bd-ray); border-radius: var(--bo-nhan); overflow: hidden; }
.ld-thac-ray i { display: block; height: 100%; background: var(--bd-2); border-radius: var(--bo-nhan); }
.ld-thac-hang.tru .ld-thac-ray i { background: #F2C9BF; box-shadow: inset 0 0 0 1.5px var(--xau); }
.ld-thac-hang.ket .ld-thac-ray i { background: var(--nhan); }
.ld-thac-hang.so .ld-thac-ray i { background: var(--tot); }
.ld-thac-so { text-align: right; font-variant-numeric: tabular-nums; }
.ld-round-ds { display: flex; flex-direction: column; gap: var(--k-3); }
.ld-round { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: var(--k-3) var(--k-4); background: var(--nen); border: none;
  border-radius: var(--bo-nut); font: inherit; color: var(--chu); text-align: left; cursor: pointer; }
.ld-round-dau { display: flex; justify-content: space-between; gap: var(--k-3); flex-wrap: wrap; }
.ld-round-so { font-size: 14px; font-variant-numeric: tabular-nums; }
/* ── Màn Người theo canvas (Nguoi-DienThoai, Nguoi-MayTinh) ── */
.ng-luoi { display: block; }
.ng-phai { display: none; }
@media (min-width: 1024px) {
  .ng-luoi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--k-5); align-items: start; }
  .ng-phai { display: block; position: sticky; top: var(--k-4); max-height: calc(100vh - 32px); overflow-y: auto; }
}
.ng-trai .tim-hang-tren { flex-wrap: wrap; }
.ng-trai .tim-hang-tren .o-tim { flex: 1 1 100%; }
.ng-phai-trong { display: block; padding: var(--k-6) var(--k-4); text-align: center; }
.ng-td-chu { display: flex; justify-content: space-between; font-size: 14px; margin: 0 0 6px; }
#noi-dung .ng-trai > p.nhan-nho:first-child { display: block; margin: 0 0 var(--k-4) !important; }
.ng-loc-them { display: inline-block; }
.ng-loc-them > summary { list-style: none; cursor: pointer; }
.ng-loc-them > summary::-webkit-details-marker { display: none; }
.ng-loc-them[open] { display: block; width: 100%; }
.ng-loc-them-ds { display: flex; flex-wrap: wrap; gap: var(--k-2); margin-top: var(--k-2); }
.nt-ds { list-style: none; margin: 0; padding: 0; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; }
.nt { display: flex; gap: var(--k-3); padding: var(--k-3) var(--k-4); cursor: pointer; }
.nt + .nt { border-top: 1px solid var(--vien-mo); }
.nt:hover { background: var(--nen); }
.nt.co-viec { background: #FFFBF5; }
.nt.dang-chon { background: var(--nhan-nhat); }
.nt-tat { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nhan-nhat); color: var(--nhan);
  font-size: 13px; font-weight: 600; }
.nt.dang-chon .nt-tat, .nt-tat.lon { background: var(--nhan); color: var(--the); }
.nt-tat.lon { width: 52px; height: 52px; font-size: 18px; }
.nt-than { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nt-dau { display: flex; justify-content: space-between; gap: var(--k-2); align-items: baseline; }
.nt-ten { min-width: 0; overflow-wrap: anywhere; }
.nt-ma { flex: none; font-size: var(--co-chu-nho); color: var(--slate-500); }
.nt-nhan { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-nhan .the-tt { margin-left: 0 !important; }
.nt-nhan-o { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--bo-nhan); background: var(--nen); font-size: var(--co-chu-nho); color: var(--chu-phu); }
.nt-nhan-o.canh { background: var(--nhan-nhat); color: var(--nhan); }
.nt-nhan-o.tot { background: var(--tot-nhat); color: var(--tot); }
.nt-nhan-o.xau { background: var(--xau-nhat); color: var(--xau); }
.nt-may { margin: 0; font-size: var(--co-chu-nho); color: var(--nhan); }
.nt-cc { margin: 0; }
.nt-cc:empty { display: none; }
.nt-ct-dau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-3); }
.nt-ct-ten { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.nt-ct-ten strong { font-size: 20px; }
.nt-ct-nut { display: flex; flex-wrap: wrap; gap: var(--k-2); }
.nt-ls { list-style: none; margin: 0; padding: 0; }
.nt-ls li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--k-3); padding: var(--k-2) 0; border-bottom: 1px solid var(--vien-mo); font-size: 14px; }

/* Hồ sơ: thanh thao tác đáy chỉ trên điện thoại (canvas HoSo: Zalo · Gọi · Đã clean). */
.hs-thanh-day { display: none; }
@media (max-width: 1023px) {
  .hs-thanh-day { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--k-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: var(--k-2) var(--k-4) calc(var(--k-2) + env(safe-area-inset-bottom)); background: var(--the); border-top: 1px solid var(--vien); }
  .hs-thanh-day .nut { justify-content: center; text-align: center; text-decoration: none; }
  .hs-thanh-day [aria-disabled="true"] { opacity: .45; }
  #noi-dung:has(.hs-thanh-day) { padding-bottom: 88px; }
}
.ld-dai { display: none; }
@media (max-width: 1023px) {
  body.che-do-ld .ld-dai:not([hidden]) { display: flex; align-items: center; gap: var(--k-3); position: sticky; top: 0; z-index: 30;
    padding: var(--k-2) var(--k-4); background: var(--chu); color: var(--the); font-size: 14px; }
  .ld-dai-lui { min-height: var(--nut-cao); padding: 0 var(--k-3); background: transparent; color: var(--the); border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--bo-nut); font: inherit; cursor: pointer; }
}
@media (max-width: 640px) { .ld-thac-hang { grid-template-columns: 96px minmax(0, 1fr) 60px; } }
.k-cau-phu > .k-chi-tiet { margin-top: 0; }

/* ── Phễu dọc (D203, pheu-doc-ve.js): mỗi bước một tầng hình thang, chữ đứng ngoài hình ── */
.pd { display: flex; flex-direction: column; align-items: stretch; max-width: 560px; margin: 4px auto 0; }
.pd-tang { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 2px 0; border: 0; background: none;
  font: inherit; color: var(--chu); text-align: center; }
.pd-tang.bam { cursor: pointer; border-radius: 8px; }
.pd-tang.bam:hover { background: var(--nen); }
.pd-tang.bam:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.pd-chu { display: flex; justify-content: center; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.3; }
.pd-so { font-size: 16px; font-variant-numeric: tabular-nums; }
.pd-hinh { display: block; width: 100%; height: 34px; }
.pd-phu { font-size: var(--co-chu-nho); color: var(--slate-500); }
.pd-noi { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 4px; padding: 2px 0 4px; font-size: var(--co-chu-nho);
  color: var(--slate-500); font-variant-numeric: tabular-nums; }
.pd-noi b { color: var(--chu); font-size: 13px; }
.pd-mui { color: var(--slate-400); }
.pd-nhanh { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--slate-500); }
.pd-nhanh b { color: var(--chu); font-variant-numeric: tabular-nums; }
.pd-nhanh .gap b { color: var(--xau); }
.pd-nut { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pd-nut:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; border-radius: 4px; }
.pd-den { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pd-den span { padding: 3px 9px; border: 1px solid var(--vien-mo); border-radius: 999px; font-size: 13px; color: var(--slate-500); }
.pd-den b { color: var(--chu); font-variant-numeric: tabular-nums; }
.pd-den-nhan { margin: 0 0 4px; font-size: var(--co-chu-nho); color: var(--slate-500); }
/* D204: chú thích phễu: nút i, "Vì sao?", bước đo riêng. */
.pd-mo { min-width: 22px; height: 22px; padding: 0 7px; border: 1px solid var(--vien-mo); border-radius: 999px; background: var(--the, #fff);
  font: inherit; font-size: 12px; line-height: 20px; color: var(--slate-500); cursor: pointer; }
.pd-mo[aria-expanded="true"] { border-color: var(--nhan); color: var(--chu); }
.pd-mo:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.pd-ct { max-width: 460px; margin: 0 auto 2px; padding: 6px 10px; border-radius: 8px; background: var(--nen); font-size: 12.5px; line-height: 1.45;
  color: var(--slate-500); text-align: left; }
.pd-roi { color: var(--chu); white-space: nowrap; }
.pd-noi .pd-mo { white-space: nowrap; }
.pd-noi .pd-mo { margin-left: 6px; }
.pd-ly { max-width: 460px; margin: 0 auto 6px; padding: 8px 12px; border: 1px solid var(--vien-mo); border-radius: 10px; font-size: 13px;
  line-height: 1.45; color: var(--chu); text-align: left; }
.pd-ly p { margin: 0 0 4px; }
.pd-ly ul { margin: 0 0 6px; padding-left: 18px; }
.pd-ly li.moi { color: var(--slate-500); }
.pd-ly b { font-variant-numeric: tabular-nums; }
.pd-hinh-nut { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.pd-hinh-nut:hover .pd-hinh { filter: brightness(.94); }
.pd-hinh-nut:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.pd-rieng { margin-top: 14px; }
.pd-rieng-ds { display: flex; flex-direction: column; gap: 6px; }
.pd-rieng-o { padding: 6px 10px; border: 1px dashed var(--vien-mo); border-radius: 10px; font-size: 13px; color: var(--slate-500); }
.pd-rieng-o b { color: var(--chu); font-variant-numeric: tabular-nums; }
.pd-rieng-o .pd-ct { margin-top: 6px; }
/* D205: phễu từng chương trình trong câu 3 (Bảng điều hành, link HĐQT). */
.k-pheu-ct { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--vien-mo); }
.k-pheu-ct-ten { margin: 0 0 2px; font-size: 16px; }
/* D210: bảng trước, phễu sau. 3 nhóm; mỗi chương trình một dòng bấm được; phễu mở ngay dưới dòng. */
.k-pct-nhom { margin-top: 14px; }
.k-pct-nhom-ten { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); }
.k-pct-ds { container-type: inline-size; border: 1px solid var(--vien-mo); border-radius: 12px; overflow: hidden; background: var(--the, #fff); }
.k-pct-dong { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(64px, auto) 14px;
  grid-template-areas: "ten so roi tien mui"; gap: 4px 14px; align-items: center; width: 100%; min-height: 52px; padding: 9px 14px;
  border: 0; border-top: 1px solid var(--vien-mo); background: none; font: inherit; color: inherit; text-align: left; }
.k-pct-ds > :first-child { border-top: 0; }
button.k-pct-dong { cursor: pointer; }
button.k-pct-dong:hover, .k-pct-dong[aria-expanded="true"] { background: var(--nen); }
button.k-pct-dong:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; }
.k-pct-dong.trong { grid-template-areas: "ten so so so so"; color: var(--slate-500); }
.k-pct-ten { grid-area: ten; min-width: 0; }
.k-pct-ten b { display: block; font-size: 14.5px; font-weight: 600; color: var(--chu); }
.k-pct-ten span { display: block; font-size: 12px; color: var(--slate-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-pct-so { grid-area: so; font-size: 13.5px; color: var(--slate-500); }
.k-pct-so b { font-size: 15px; color: var(--chu); font-variant-numeric: tabular-nums; }
.k-pct-mui-ten { color: var(--slate-400); }
.k-pct-roi { grid-area: roi; font-size: 13px; color: var(--slate-500); }
.k-pct-tien { grid-area: tien; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tot); }
.k-pct-mui { grid-area: mui; color: var(--slate-400); font-size: 18px; line-height: 1; transition: transform .15s ease; }
.k-pct-dong[aria-expanded="true"] .k-pct-mui { transform: rotate(90deg); }
.k-pct-pheu { padding: 8px 14px 16px; border-top: 1px dashed var(--vien-mo); background: var(--the, #fff); }
.k-pct-pheu .k-ket-luan { max-width: 560px; margin-left: auto; margin-right: auto; }
.k-pct-pheu > .k-chu-phu { max-width: 560px; margin: 4px auto 0; }
/* D271: phễu theo kênh dưới phễu chính của Content Bứt Phá / Diệt nợ. */
.k-pct-kenh { max-width: 560px; margin: 18px auto 0; padding-top: 12px; border-top: 1px dashed var(--vien-mo); }
.k-pct-kenh-ten { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--chu); }
.k-pct-kenh > .k-chu-phu { margin: 2px 0 8px; }
.k-pct-kenh .bd-ngang { margin-top: 4px; }
.pd-an { color: var(--slate-500); }
/* Xếp lại theo bề rộng của khối, không theo màn hình: khung có menu bên trái hẹp hơn màn hình nhiều (31/10: cột tiền bị cắt ở khung 560px). */
@container (max-width: 680px) {
  .k-pct-dong { grid-template-columns: 1fr auto 14px; grid-template-areas: "ten tien mui" "so so so" "roi roi roi"; }
  .k-pct-dong.trong { grid-template-areas: "ten ten ten" "so so so"; }
}
@media (prefers-reduced-motion: reduce) { .k-pct-mui { transition: none; } }

/* ── D215 (02/11/2026) · Menu cũ trở lại: ô tìm màn, nhóm Ghim, nút ghim mỗi dòng. Cột menu nền tối nên dùng bộ màu ink/slate của cột. ── */
.tim-man { padding: 0 16px; }
.tim-man-o {
  width: 100%; min-height: var(--k-11); padding: 10px 12px;
  background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--bo-nut);
  color: var(--paper); font: inherit; font-size: 15px;
}
.tim-man-o::placeholder { color: var(--slate-500); }
.tim-man-o:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.tim-man-kq { display: flex; flex-direction: column; margin: 8px -16px 0; }
.tim-man-rong { padding: 8px 4px; color: var(--slate-400); font-size: 14px; }
.cot-menu .dang-tim > .nhom, .cot-menu .dang-tim > .nut-tab-khac,
.dang-tim > .nhom, .dang-tim > .nut-tab-khac { display: none; }
.muc-dong { position: relative; }
.muc-dong > .muc { padding-right: 44px; }
.muc-chu-2 { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.muc-duong { font-size: 12px; color: var(--slate-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muc-ghim {
  position: absolute; top: 0; right: 4px; bottom: 0; width: 44px;
  display: grid; place-items: center; padding: 0; border: 0; background: none;
  color: var(--slate-500); cursor: pointer; opacity: 0; transition: opacity 120ms ease, color 120ms ease;
}
.muc-ghim svg { width: 16px; height: 16px; fill: none; }
.muc-dong:hover .muc-ghim, .muc-dong:focus-within .muc-ghim { opacity: 1; }
@media (hover: hover) { .muc-ghim:hover { color: var(--paper); } }
.muc-ghim:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; border-radius: var(--bo-nut); }
.muc-ghim[aria-pressed='true'] { opacity: 1; color: var(--amber); }
.muc-ghim[aria-pressed='true'] svg { fill: currentColor; }
/* Máy cảm ứng không có rê chuột: sao luôn hiện mờ, không thì không ai biết có ghim. */
@media (hover: none) { .muc-ghim { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .muc-ghim { transition: none; } }

/* ── D215 · Bảng điều hành trên điện thoại: hàng nhảy câu dính đầu trang, bộ lọc một hàng cuộn ngang. Máy tính giữ như cũ. ── */
.k-hang-chip { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.k-nhay { display: none; }
.k-cau { scroll-margin-top: 72px; }
@media (max-width: 1023px) {
  .k-hang-chip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .k-hang-chip::-webkit-scrollbar { display: none; }
  .k-hang-chip > * { flex: none; }
  .k-nhay {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: 0; z-index: 20; margin: 0 0 12px; padding: 8px 0;
    background: var(--nen); border-bottom: 1px solid var(--vien);
  }
  .k-nhay::-webkit-scrollbar { display: none; }
  .k-nhay-nut {
    flex: none; min-height: var(--k-11); padding: 0 14px; border: 1px solid var(--vien); border-radius: 999px;
    background: var(--the); color: var(--chu); font: inherit; font-size: 14px; cursor: pointer;
  }
  .k-nhay-nut:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
}
@media (max-width: 599px) {
  .k-hang-chip, .k-nhay { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* ── D215 · Nút chạm trên điện thoại tối thiểu 44px (soát 02/11: 33 chỗ nhỏ hơn: "Xem bảng số" cao 19px, "Vì sao?" 22px,
   nút "i" rộng 22px, "Mở" 37px). Chỉ dưới 1024px; máy tính giữ cỡ cũ cho bảng dày. ── */
@media (max-width: 1023px) {
  .bd-bang > summary, details.k-chi-tiet > summary { min-height: var(--k-11); padding-block: 12px; box-sizing: border-box; }
  .noi-dung button, .noi-dung .nut { min-width: var(--k-11); }
  .pd-mo { min-width: var(--k-11); min-height: var(--k-11); }
}

/* D215: cột menu về 272px làm 5 vòng đầu Bảng điều hành bó lại ở máy tính hẹp (1024px: "Đúng tốc độ?" xuống 3 dòng).
   Khổ 1024-1279px: vòng đứng trên chữ để chữ có trọn bề ngang thẻ. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .k-vong-the { flex-direction: column; align-items: flex-start; }
}

/* ── D219 · Một màn điều hành (#/dieu-hanh): 6 số chính, hàng nhảy dính (cả máy tính), khối tóm tắt + "Xem đủ". ── */
.mm-so-hang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-3); margin: 0 0 var(--k-4); }
.mm-so {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: var(--k-11); padding: var(--k-3) var(--k-4);
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); font: inherit; color: var(--chu); text-align: left; cursor: pointer;
}
@media (hover: hover) { .mm-so:hover { border-color: var(--line-2); } }
.mm-so:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.mm-so.xau { border-color: var(--xau); }
.mm-so-nhan { font-size: var(--co-chu-nho); color: var(--chu-phu); }
.mm-so-gt { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mm-so.chu .mm-so-gt { font-size: 16px; }
.mm-so-phu { font-size: var(--co-chu-nho); color: var(--chu-phu); }
.mm-nhay { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 20;
  margin: 0 0 12px; padding: 8px 0; background: var(--nen); border-bottom: 1px solid var(--vien); }
.mm-nhay::-webkit-scrollbar { display: none; }
.mm-nhay .k-nhay-nut {
  flex: none; min-height: var(--k-11); padding: 0 16px; border: 1px solid var(--vien); border-radius: 999px;
  background: var(--the); color: var(--chu); font: inherit; font-size: 14px; cursor: pointer;
}
@media (hover: hover) { .mm-nhay .k-nhay-nut:hover { border-color: var(--line-2); } }
.mm-nhay .k-nhay-nut:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.mm-khoi { margin: 0 0 var(--k-4); scroll-margin-top: 72px; }
.mm-tom { display: flex; flex-direction: column; gap: 8px; }
.mm-dong { margin: 0; }
.mm-o { display: flex; flex-direction: column; gap: 2px; padding: var(--k-3); border: 1px solid var(--vien); border-radius: var(--bo); min-width: 140px; }
.mm-o b { font-size: 22px; font-variant-numeric: tabular-nums; }
.mm-o span, .mm-o small { font-size: var(--co-chu-nho); color: var(--chu-phu); }
.mm-o.xau { border-color: var(--xau); }
.mm-bang { display: flex; flex-direction: column; }
.mm-bang-dau, .mm-bang-dong { display: grid; grid-template-columns: minmax(0, 1fr) 100px 100px; gap: 8px; align-items: center; padding: 8px 4px; }
.mm-bang-dau { font-size: var(--co-chu-nho); color: var(--chu-phu); border-bottom: 1px solid var(--vien); }
.mm-bang-dong { min-height: var(--k-11); border: 0; border-bottom: 1px solid var(--vien); background: none; font: inherit; color: var(--chu); text-align: left; cursor: pointer; }
@media (hover: hover) { .mm-bang-dong:hover { background: var(--the-mo); } }
.mm-bang-dong b, .mm-bang-dong span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.mm-bang-dau span:not(:first-child) { text-align: right; }
.mm-bang-dong .am { color: var(--xau); }
.mm-viec li.gap { border-left: 0; }
.mm-viec li.gap .k-viec-chu b { color: var(--xau); }
@media (max-width: 599px) {
  .mm-so-hang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-so-gt { font-size: 20px; }
  .mm-nhay { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .mm-bang-dau, .mm-bang-dong { grid-template-columns: minmax(0, 1fr) 84px 84px; }
}
/* Học viên NTTN (03/11/2026): danh sách gọn thay bảng bung thẻ. Rộng: lưới 4 cột, chi tiết ghim bên phải khi cuộn.
   Hẹp (.hep, JS bật khi vùng nội dung dưới 820px): mỗi người 2 tầng (tên + nhãn, mã hồ sơ · điện thoại), bấm thì chi tiết mở ngay dưới dòng. */
.hv-khung { display: flex; gap: var(--k-4); align-items: flex-start; }
.hv-cot-ds { flex: 1 1 0; min-width: 0; container-type: inline-size; }
.hv-cot-ct { flex: 0 0 360px; min-width: 0; position: sticky; top: var(--k-4); max-height: calc(100vh - 32px); overflow-y: auto; }
.hv-cot-ct:empty { display: none; }
.hv-ds { list-style: none; margin: 0; padding: 0; background: var(--the); border: 1px solid var(--line); border-radius: var(--r, 12px); overflow: hidden; }
.hv-dau, .hv-dong { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 92px minmax(0, 1.3fr) 14px;
  gap: 4px 14px; align-items: center; padding: 10px 16px; }
.hv-dau { font-size: 12px; font-weight: 600; color: var(--slate-500); background: var(--ink-850); border-bottom: 1px solid var(--line); }
.hv-muc + .hv-muc { border-top: 1px solid var(--line); }
.hv-dong { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: var(--nut-cao); }
.hv-dong:hover { background: var(--ink-850); }
.hv-dong:focus-visible { outline: 2px solid var(--amber, #9A5508); outline-offset: -2px; }
.hv-muc.dang-mo > .hv-dong { background: var(--ink-650); box-shadow: inset 3px 0 0 var(--amber, #9A5508); }
.hv-o { min-width: 0; font-size: 14px; }
.hv-ten b, .hv-lh > span, .hv-o small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-ten b { font-weight: 600; }
.hv-o small { font-size: 12.5px; color: var(--slate-500); margin-top: 2px; }
.hv-luc { font-size: 13px; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.hv-nhan { display: flex; gap: 4px; flex-wrap: wrap; }
.hv-nhan .nttn-nhan { height: 24px; padding: 0 9px; font-size: 12px; }
.hv-mui { color: var(--slate-500); font-size: 18px; line-height: 1; justify-self: end; }
.hv-muc.dang-mo .hv-mui { color: var(--amber, #9A5508); }
/* Danh sách hẹp mà vẫn ở chế độ rộng: bỏ cột Liên hệ (email, điện thoại có ở ô chi tiết). */
@container (max-width: 560px) {
  .hv-dau, .hv-dong { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1.1fr) 14px; }
  .hv-lh { display: none; }
}
.hv-tt { margin: 0; display: grid; }
.hv-tt-dong { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); align-items: baseline; }
.hv-tt-dong:first-child { border-top: 0; }
.hv-tt dt { font-size: 12.5px; color: var(--slate-500); }
.hv-tt dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.hv-tt dd .nut.nho { margin-left: 4px; vertical-align: baseline; }
.hv-khung.hep { display: block; }
.hv-khung.hep .hv-cot-ct, .hv-khung.hep .hv-dau, .hv-khung.hep .hv-lh, .hv-khung.hep .hv-luc, .hv-khung.hep .hv-hd { display: none; }
.hv-khung.hep .hv-dong { grid-template-columns: minmax(0, 1fr) auto 14px; padding: 10px 14px; }
.hv-khung.hep .hv-nhan { justify-content: flex-end; max-width: 46vw; }
.hv-khung.hep .hv-mui { transition: transform .15s; }
.hv-khung.hep .hv-muc.dang-mo .hv-mui { transform: rotate(90deg); }
.hv-khung.hep .hv-muc > .hv-ct { padding: 0 10px 12px; background: var(--ink-650); }
@media (prefers-reduced-motion: reduce) { .hv-mui { transition: none !important; } }

/* D245 dòng chảy khách 7 tầng (khối Khách màn sáng). Mỗi tầng một dòng: nhãn, số lớn, đơn vị; vạch trái nối các tầng. */
.mm-tang { list-style: none; margin: 0 0 var(--k-3); padding: 0; display: grid; gap: var(--k-3); }
.mm-tang > li { border-left: 2px solid var(--vien); border-radius: 0; padding: 2px 0 2px var(--k-3); }
.mm-tang > li.loi { border-left-color: var(--xau); }
.mm-tang-dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.mm-tang-dau b { font-size: 20px; font-variant-numeric: tabular-nums; }
.mm-tang-dau span { font-size: var(--co-chu-nho); color: var(--chu-phu); }
.mm-tang-nhan { min-width: 112px; font-weight: 600; color: var(--chu) !important; }
.mm-tang .k-chu-phu { margin: 2px 0 0; }
.mm-kiem { margin: 0; padding-left: 18px; font-size: var(--co-chu-nho); }
.mm-kiem li.xau, .k-chu-phu.xau { color: var(--xau); }
/* Màn Điều hành = một phễu (03/11): mỗi tầng một hàng, cột trái số, cột phải thanh. Bề rộng thanh tầng chỉ tạo hình phễu
   (khác đơn vị nên không so được); thanh con trong tầng chia theo số. Điện thoại: số trên, thanh dưới, thanh full ngang. */
.pheu-ds { list-style: none; margin: 0; padding: 0; }
.pheu-tang { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--k-3) var(--k-4); align-items: center;
  padding: var(--k-3) 0; border-top: 1px solid var(--vien-mo); }
.pheu-tang:first-child { border-top: 0; }
.pheu-tang.loi .pheu-so { color: var(--xau); }
/* Tầng được cuộn tới từ phễu 3D: nháy nền một lần. Người chọn giảm chuyển động thì chỉ đổi nền, không chuyển. */
@keyframes pheu-nhay { 0% { background: var(--amber-nen); } 100% { background: transparent; } }
.pheu-tang.nhay { animation: pheu-nhay 1.6s ease-out 1; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .pheu-tang.nhay { animation: none; background: var(--amber-nen); } }
/* Tổng quan đầu Phễu khách (Quỳnh 03/11 gửi ảnh mẫu): phễu thật trái, ô số + nguồn phải; điện thoại xếp dọc. */
.pheu-tq { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--k-5); align-items: start;
  padding: var(--k-2) 0 var(--k-4); margin-bottom: var(--k-2); border-bottom: 1px solid var(--vien); }
.pheu-tq-pheu .k-chu-phu { margin: var(--k-2) 0 0; font-size: 11px; }
.pheu-tq-ben { display: grid; gap: var(--k-4); }
.pheu-tq-o { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-2); }
.pheu-tq-nguon h3 { margin: 0 0 var(--k-2); font-size: var(--co-chu-nho); font-weight: 600; color: var(--chu-phu); }
.bd-pheu { width: 100%; max-width: 600px; height: auto; display: block; overflow: visible; }
.bd-pheu-tang.bam { cursor: pointer; }
.bd-pheu-tang.bam:hover path, .bd-pheu-tang:focus-visible path { filter: brightness(1.08); }
.bd-pheu-tang:focus-visible { outline: none; }
.bd-pheu-tang:focus-visible .bd-pheu-ten { text-decoration: underline; }
.bd-pheu-so { font-size: 19px; font-weight: 700; fill: var(--chu); font-variant-numeric: tabular-nums; }
.bd-pheu-dv { font-size: 11px; font-weight: 400; fill: var(--chu-phu); }
.bd-pheu-ten { font-size: 11.5px; fill: var(--chu-phu); }
/* Đường nối tầng → thẻ chữ (mapping dữ liệu ngay trên phễu). */
.bd-pheu-noi { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.bd-pheu-cham { fill: var(--amber); }
.bd-pheu-chi { font-size: 11.5px; fill: var(--chu); }
.bd-pheu-nguon { font-size: 10.5px; fill: var(--chu-phu); font-family: var(--chu-ma); }
@media (max-width: 900px) { .pheu-tq { grid-template-columns: minmax(0, 1fr); } }
/* Luồng kênh → trang (sankey vẽ tay _bdLuong). Khung hẹp cuộn ngang trong khung, trang không cuộn. */
.pheu-luong { padding: 0 0 var(--k-4); margin-bottom: var(--k-2); border-bottom: 1px solid var(--vien); }
.pheu-luong h3 { margin: 0 0 var(--k-2); font-size: var(--co-chu-nho); font-weight: 600; color: var(--chu-phu); }
.pheu-luong .k-chu-phu { margin: var(--k-2) 0 0; font-size: 11px; }
.bd-luong-khung { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bd-luong { width: 100%; min-width: 560px; max-width: 760px; height: auto; display: block; }
.bd-luong-dai { opacity: .32; transition: opacity .15s ease; }
.bd-luong-dai:hover { opacity: .62; }
.bd-luong-nut-phai { fill: var(--slate-500); }
.bd-luong-ten { font-size: 12px; font-weight: 600; fill: var(--chu); }
.bd-luong-so { font-size: 10.5px; fill: var(--chu-phu); font-variant-numeric: tabular-nums; }
/* Sơ đồ dòng chảy master (D273 bước 4, _bdMaster): 5 tầng, tên tầng và nút bấm được; chữ có viền nền để đọc được khi đè lên dải. */
.bd-master { min-width: 900px; max-width: none; }
.bd-master-tang, .bd-master-nut { cursor: pointer; outline: none; }
.bd-master-tang.tinh, .bd-master-nut.tinh { cursor: default; }
.bd-master-tang.tinh:hover .bd-master-tang-nen, .bd-master-nut.tinh:hover .bd-master-vung { fill: transparent; }
.pm-hub { margin-top: var(--k-4); padding-top: var(--k-3); border-top: 1px solid var(--vien); }
.pm-hub h4 { margin: 0 0 var(--k-2); font-size: 14px; font-weight: 600; color: var(--chu); }
.pm-hub .bd-bang td:first-child { word-break: break-word; }
/* D289: khối Đọc tài liệu (tầng Để lại email): bảng tới trang, danh sách nên nhắn phân trang 50. */
.pm-hub h5 { margin: var(--k-3) 0 var(--k-2); font-size: 13px; font-weight: 600; color: var(--chu); }
.pm-tl-ds { margin: 0; padding-left: 28px; }
.pm-tl-ds li { padding: 6px 0; border-bottom: 1px solid var(--vien); word-break: break-word; }
.pm-tl-nav { display: flex; flex-wrap: wrap; gap: var(--k-2); align-items: center; margin-top: var(--k-2); }
.bd-master-tang-nen { fill: transparent; }
.bd-master-tang:hover .bd-master-tang-nen, .bd-master-tang:focus-visible .bd-master-tang-nen { fill: var(--ink-850); }
.bd-master-tang.chon .bd-master-tang-nen { fill: var(--amber-nen); }
.bd-master-tang-ten { font-size: 13px; font-weight: 600; fill: var(--chu); }
.bd-master-tang-so { font-size: 11.5px; fill: var(--chu-phu); font-variant-numeric: tabular-nums; }
.bd-master-vung { fill: transparent; rx: 6px; }
.bd-master-nut:hover .bd-master-vung, .bd-master-nut:focus-visible .bd-master-vung { fill: var(--ink-850); }
.bd-master-nut.chon .bd-master-vung { fill: var(--amber-nen); stroke: var(--amber); stroke-width: 1; }
.bd-master-ten { paint-order: stroke; stroke: var(--the); stroke-width: 3px; stroke-linejoin: round; }
.bd-master-nut:hover .bd-master-ten, .bd-master-nut:focus-visible .bd-master-ten, .bd-master-nut.chon .bd-master-ten { stroke: var(--amber-nen); }
.bd-master-gia { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 2; }
.bd-master-nut.gia .bd-luong-ten { font-weight: 400; fill: var(--chu-phu); }
.pm-dau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2) var(--k-3); margin: 0 0 var(--k-3); }
.pm-dau .k-chu-phu { font-size: var(--co-chu-nho); }
.pm-non { margin: 0 0 var(--k-3); padding: var(--k-2) var(--k-3); border-radius: 8px; background: var(--amber-nen); color: var(--amber); font-size: var(--co-chu-nho); }
.pm-cach { margin: var(--k-2) 0 0; font-size: 11px; }
.pm-ct { margin-top: var(--k-3); padding: var(--k-3) var(--k-4); border: 1px solid var(--vien); border-radius: 10px; background: var(--ink-850); }
.pm-ct-dau { display: flex; align-items: center; gap: var(--k-3); margin: 0 0 var(--k-2); }
.pm-ct-dau h3 { flex: 1; margin: 0; font-size: 15px; font-weight: 600; color: var(--chu); }
.pm-ct .pheu-ct { margin-top: var(--k-3); }
.pheu-dau { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--k-2); align-items: baseline; text-align: left;
  background: none; border: 0; padding: var(--k-1) 0; min-height: 44px; cursor: pointer; color: var(--chu); font: inherit; }
.pheu-dau:hover .pheu-nhan, .pheu-dau:focus-visible .pheu-nhan { text-decoration: underline; }
.pheu-so-thu { grid-row: 1 / 4; align-self: start; width: 22px; height: 22px; border-radius: 50%; background: var(--amber-nen); color: var(--amber);
  font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.pheu-nhan, .pheu-dv { grid-column: 2; font-size: var(--co-chu-nho); color: var(--chu-phu); }
/* Nhãn "tới lúc này": số không đổi theo nút khoảng (Xử lý lead, Kế hoạch tiếp). */
.pheu-luc-nay { grid-column: 2; justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  background: var(--ink-850); border: 1px dashed var(--line-2); color: var(--chu-phu); }
.pheu-so { grid-column: 2; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pheu-than { min-width: 0; }
/* Ô có số nhỏ (vd. "Quỳnh nhắn tay 0 người") không bị bóp thành cột chữ 5 dòng: ô tối thiểu 9em (chữ tối đa 2 dòng); thiếu chỗ thì
   ô xuống hàng thay vì co lại. */
.pheu-thanh { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 auto var(--k-1); min-width: 0; }
.pheu-o { flex-basis: 0; min-width: min(9em, 100%); padding: 7px 10px; border-radius: 6px; font-size: var(--co-chu-nho); line-height: 1.3;
  background: var(--amber-nen); color: var(--amber); display: flex; align-items: center; justify-content: center; text-align: center; }
.pheu-o.tra-phi { background: var(--bd-3); color: #fff; }
.pheu-o.thu { background: var(--bd-1); color: var(--bd-5); }
/* Tầng Thư: vùng theo loại thư, chữ ngắn một dòng, rộng theo số. */
.pheu-o.nho { padding: 5px 8px; white-space: nowrap; min-width: max-content; }
.pheu-o.cho { background: transparent; border: 1px dashed var(--line-2); color: var(--chu-phu); }
.pheu-o.don { background: var(--tot); color: #fff; }
/* D247: tầng Xử lý lead hai nhánh: có số (việc tay của Quỳnh, nâu đậm) / chỉ email (máy lo, nền nhạt viền gạch). */
.pheu-o.tay { background: var(--bd-4); color: #fff; }
.pheu-o.may { background: transparent; border: 1px dashed var(--bd-2); color: var(--amber); }
/* Tầng Kế hoạch: mỗi chuỗi thư một hàng ô (người đã nhận tới thư đó). */
.pheu-chuoi { display: grid; gap: var(--k-2); width: 100%; margin: 0 auto var(--k-1); }
.pheu-chuoi-hang { display: grid; gap: 2px; }
.pheu-chuoi-ten { font-size: var(--co-chu-nho); color: var(--chu-phu); }
.pheu-chuoi .pheu-thanh { width: 100%; margin: 0; flex-wrap: wrap; }
.pheu-chuoi .pheu-o { padding: 5px 8px; white-space: nowrap; min-width: max-content; }
/* D270: ngày thư kế tiếp dưới số người của ô (ô là flex hàng ngang nên đổi sang cột). */
.pheu-chuoi .pheu-o { flex-direction: column; }
.pheu-o-ke { display: block; font-size: 0.85em; opacity: 0.85; }
.pheu-phu { margin: 2px 0 0; font-size: var(--co-chu-nho); color: var(--chu-phu); text-align: center; }
.pheu-phu.xau { color: var(--xau); }
/* Chi tiết mỗi tầng (Quỳnh 03/11 "bố cục các chỗ chi tiết cho gọn"): hàng nhãn trái 128px | các ô số, căn trái; số cuối mỗi ô đậm. */
.pheu-chi-tiet { display: grid; gap: 6px; margin-top: var(--k-2); text-align: left; }
.pheu-dong { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; align-items: start;
  font-size: var(--co-chu-nho); color: var(--chu-phu); line-height: 1.45; }
/* Icon thay nhãn chữ (Quỳnh 03/11 "thành các icon gọn nhất"); tên hiện khi rê chuột (title). */
.pheu-dong-ic { width: 18px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--amber); cursor: help; }
.pheu-dong-ic svg { width: 15px; height: 15px; }
.pheu-dong-gt { display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--chu); min-width: 0; }
/* D273: dòng kênh con hiện tên nhóm trước các ô (Chuyên san: Fanpage 399 · Nhóm Zalo 199), không giấu vào icon. */
.pheu-dong-nhan { padding: 1px 0; font-weight: 600; color: var(--chu); }
.pheu-o-nho { padding: 1px 8px; border-radius: 999px; background: var(--ink-850); border: 1px solid var(--vien-mo); white-space: normal; }
.pheu-o-nho b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pheu-dong.xau, .pheu-dong.xau .pheu-dong-gt, .pheu-dong.xau .pheu-dong-ic { color: var(--xau); }
/* Căn cứ gập: một chạm là thấy số lấy từ đâu (Quỳnh: "các số đưa ra phải có nguồn"). */
.pheu-can-cu { margin-top: var(--k-2); text-align: left; font-size: var(--co-chu-nho); color: var(--chu-phu); }
.pheu-can-cu summary { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--chu-phu); list-style: none; font-size: 11px; }
.pheu-can-cu summary:hover, .pheu-can-cu[open] summary { color: var(--amber); }
.pheu-can-cu summary::-webkit-details-marker { display: none; }
.pheu-can-cu summary::before { content: 'i'; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px;
  font-weight: 700; font-style: italic; display: inline-flex; align-items: center; justify-content: center; }
.pheu-can-cu p { margin: 2px 0 0; padding: 8px 10px; background: var(--ink-850); border-radius: 8px; line-height: 1.5; }
/* Sơ đồ dữ liệu Phễu khách cho Admin (pheu-so-do.js): mỗi tầng một hàng vào → tính → ra; điện thoại xếp dọc. */
.pheu-so-do { margin-top: var(--k-4); }
.sd { display: grid; gap: var(--k-2); font-size: var(--co-chu-nho); }
.sd-hang { display: grid; grid-template-columns: 120px minmax(0, 1.2fr) 18px minmax(0, 1.3fr) 18px minmax(0, 1fr); gap: var(--k-2); align-items: center;
  padding: var(--k-2) 0; border-top: 1px solid var(--vien-mo); }
.sd-dau { border-top: 0; padding: 0; color: var(--chu-phu); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.sd-tang { font-weight: 600; color: var(--chu); }
.sd-cot { margin: 0; padding: 8px 10px; border-radius: 8px; list-style: none; line-height: 1.45; }
.sd-cot li + li { margin-top: 3px; }
.sd-vao { background: var(--ink-850); border: 1px solid var(--vien-mo); }
.sd-vao b { font-family: var(--chu-ma); font-weight: 500; font-size: 11.5px; color: var(--chu); }
.sd-xu { background: var(--amber-nen); color: var(--amber); }
.sd-ra { background: var(--the); border: 1px solid var(--bd-2); color: var(--chu); font-weight: 600; }
.sd-mui { color: var(--chu-phu); display: inline-flex; justify-content: center; }
.sd-mui svg { width: 16px; height: 16px; }
.sd-khoa-ten { margin: var(--k-3) 0 0; font-size: var(--co-chu-nho); }
.sd-khoa { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px var(--k-3); margin: 0; }
.sd-khoa dt { font-weight: 600; color: var(--chu); }
.sd-khoa dd { margin: 0; color: var(--chu-phu); }
@media (max-width: 900px) {
  .sd-hang { grid-template-columns: minmax(0, 1fr); }
  .sd-dau { display: none; }
  .sd-mui { transform: rotate(90deg); }
  .sd-khoa { grid-template-columns: minmax(0, 1fr); }
}
/* Phễu từng chương trình đặt trong Phễu khách. */
.pheu-ct { margin-top: var(--k-4); padding-top: var(--k-3); border-top: 1px solid var(--vien); }
.pheu-can { margin-top: var(--k-4); }
.pheu-gap-ds { display: grid; gap: var(--k-2); margin-top: var(--k-4); }
.pheu-gap { background: var(--the); border: 1px solid var(--vien-mo); border-radius: var(--r); padding: 0 var(--k-4); }
.pheu-gap summary { min-height: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; cursor: pointer; font-weight: 600; list-style: none; }
.pheu-gap summary::-webkit-details-marker { display: none; }
.pheu-gap summary::after { content: '›'; margin-left: auto; font-size: 20px; color: var(--chu-phu); transition: transform .15s ease; }
.pheu-gap[open] summary::after { transform: rotate(90deg); }
.pheu-gap[open] { padding-bottom: var(--k-4); }
@media (max-width: 720px) {
  .pheu-tang { grid-template-columns: minmax(0, 1fr); gap: var(--k-2); }
  .pheu-thanh, .pheu-chuoi { width: 100% !important; }
  .pheu-phu { text-align: left; }
}

/* ── Radar › Từ khóa & Chủ đề (D367, 12/11/2026) ─────────────────────────────────────────────────────────
   Design review 12/11 (bản 1112-2043): bảng lưới cắt câu khách còn 15 ký tự ở 375px, 165/182 chỗ bấm dưới 32px, không có tiêu điểm.
   Màn mới: danh sách cụm là khối chữ tự xuống dòng (không bảng), mỗi dòng một nút 44px+, bằng chứng chỉ hiện khi mở. */
.rc-loc { display: flex; flex-wrap: wrap; gap: var(--k-3); align-items: center; margin-top: var(--k-4); }
.rc-loc input[type="search"] { flex: 1 1 260px; min-width: 0; min-height: var(--k-11); padding: 0 var(--k-3); font: inherit; font-size: 15px; }
.rc-loc select { min-height: var(--k-11); }
.rc-nhom { display: flex; flex-wrap: wrap; gap: var(--k-2); margin-top: var(--k-3); }
.rc-nhom .nut.nho { min-height: 36px; padding: var(--k-1) var(--k-3); font-size: 13.5px; }
.rc-tom { margin: var(--k-4) 0 0; color: var(--chu-phu); font-size: 14px; line-height: 1.5; max-width: 80ch; }
.rc-ds { list-style: none; margin: var(--k-3) 0 0; padding: 0; border-top: 1px solid var(--vien); }
.rc-dong { border-bottom: 1px solid var(--vien); }
.rc-dau { display: grid; gap: 4px; width: 100%; min-height: var(--k-11); padding: var(--k-4) var(--k-3); text-align: left; background: none;
  border: 0; font: inherit; color: var(--chu); cursor: pointer; }
@media (hover: hover) { .rc-dau:hover { background: var(--ink-700); } }
.rc-dau:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; }
.rc-dong.mo > .rc-dau { background: var(--ink-700); }
.rc-ten { font-size: 16.5px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.rc-ghim { margin-left: var(--k-2); padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; color: var(--nhan);
  font-size: 12px; font-weight: 500; vertical-align: 2px; }
.rc-chi { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--k-2); font-size: 14px; color: var(--chu-phu); }
.rc-chi b { color: var(--nhan); font-weight: 600; }
.rc-chi b + span::before { content: '· '; }
.rc-phu, .rc-de { font-size: 13px; color: var(--slate-500); line-height: 1.45; }
.rc-thanh { display: block; height: 4px; max-width: 320px; margin-top: 6px; border-radius: 2px; background: var(--bd-ray); }
.rc-thanh i { display: block; height: 100%; border-radius: 2px; background: var(--bd-3); }
.rc-than { padding: 0 var(--k-3) var(--k-6); background: var(--ink-700); }
.rc-vi p { margin: var(--k-2) 0 0; font-size: 14.5px; line-height: 1.55; max-width: 75ch; }
.rc-hanh-dong { margin-top: var(--k-4); padding: var(--k-3) var(--k-4); border-radius: 10px; background: var(--amber-nen); }
.rc-hang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2) var(--k-3); }
.rc-hang .nut.chinh { min-height: var(--k-11); }
.rc-hang select { min-height: 40px; max-width: 100%; }
.rc-nhan-nho { font-size: 13px; color: var(--slate-400); }
.rc-chon { display: inline-flex; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--bo-nut, 10px); background: var(--the); }
.rc-chon button { min-height: 40px; padding: 0 var(--k-4); border: 0; background: none; font: inherit; font-size: 14px; color: var(--chu); cursor: pointer; }
.rc-chon button + button { border-left: 1px solid var(--line-2); }
.rc-chon button[aria-checked="true"] { background: var(--paper); color: var(--ink-700); }
.rc-chon button:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; }
.rc-de-bai { margin-top: var(--k-3); }
.rc-de-bai textarea { width: 100%; box-sizing: border-box; padding: var(--k-3); font: 13px/1.55 var(--chu-ma); background: var(--the); }
.rc-xong { margin: 0 0 var(--k-2); font-size: 14px; font-weight: 600; color: var(--paper); }
.rc-khoi { margin-top: var(--k-5); }
.rc-khoi h3 { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--slate-500); }
.rc-bc-ds { margin: var(--k-2) 0 0; padding: 0; list-style: none; }
.rc-bc { padding: var(--k-3) 0; border-top: 1px solid var(--vien-mo); }
.rc-bc-them { border-top: 0; }
.rc-cau { margin: 0; font-size: 15px; line-height: 1.5; max-width: 75ch; overflow-wrap: anywhere; }
.rc-cau a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.rc-tin { font-size: 14.5px; }
.rc-meta { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--slate-500); }
.rc-cung { margin-top: var(--k-1); font-size: 13px; color: var(--slate-500); }
.rc-cung ul { margin: var(--k-1) 0 0; padding-left: var(--k-4); }
.rc-tu { margin-top: var(--k-5); }
.rc-chua-co { margin-top: var(--k-4); font-size: 13.5px; color: var(--slate-500); }
.rc-chua-co summary { min-height: var(--k-11); display: flex; align-items: center; cursor: pointer; }
.rc-chua-co ul { margin: 0; padding-left: var(--k-4); line-height: 1.7; }
.rc-o-cum { font-size: 12.5px; color: var(--slate-400); }
.rc-cd-nhom { margin-top: var(--k-5); }
.rc-cd-nhom-ten { margin: 0 0 var(--k-2); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--slate-500); }
.rc-cd-tu { margin-top: var(--k-2); }
.rc-cd-chi { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; min-height: 36px; }
.rc-form { display: grid; gap: var(--k-2); max-width: 720px; margin-top: var(--k-3); }
.rc-form input, .rc-form select, .rc-form textarea { min-height: 40px; font: inherit; font-size: 14.5px; padding: var(--k-2); }
@media (max-width: 720px) {
  .rc-dau { padding: var(--k-4) var(--k-2); }
  .rc-than { padding: 0 var(--k-2) var(--k-5); }
  .rc-hanh-dong { padding: var(--k-3); }
  .rc-chon { width: 100%; }
  .rc-chon button { flex: 1 1 0; padding: 0 var(--k-2); }
  .rc-hang .nut.chinh { width: 100%; }
}

/* Soi dòng góp trước khi nối (13/11/2026): hộp so dòng Excel gốc với hồ sơ đang mở. */
.uvg-soi { text-align: left; margin: var(--k-2) 0 var(--k-3); padding: var(--k-3); border: 1px solid var(--vien); border-radius: 8px; background: var(--ink-700); }
.uvg-ket { font-weight: 600; margin-bottom: var(--k-2); padding: var(--k-2) var(--k-3); border-radius: 6px; background: var(--ink-850); }
.uvg-ket.tot { color: var(--tot); background: var(--tot-nhat); }
.uvg-ket.xau { color: var(--xau); background: var(--xau-nhat); }
.uvg-bang { width: 100%; border-collapse: collapse; font-size: 13px; }
.uvg-bang th { text-align: left; font-weight: 600; color: var(--chu-phu); padding: 4px 8px; border-bottom: 1px solid var(--vien); }
.uvg-bang td { padding: 4px 8px; border-bottom: 1px solid var(--vien-mo); vertical-align: top; overflow-wrap: anywhere; }
.uvg-nhan { color: var(--chu-phu); white-space: nowrap; }
.uvg-dau { white-space: nowrap; font-weight: 600; }
.uvg-dau.tot, .uvg-phu.tot { color: var(--tot); }
.uvg-dau.xau, .uvg-phu.xau { color: var(--xau); }
.uvg-phu { font-size: 13px; color: var(--chu-phu); margin: var(--k-2) 0 0; }