/* 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 {
  /* ── 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:   #F1F1EF;   /* cột menu, thanh đầu */
  --ink-800:   #FBFBFA;   /* NỀN CHÍNH toàn bộ giao diện */
  --ink-700:   #FFFFFF;   /* thẻ, cột nhập liệu — nơi mắt làm việc */
  --ink-600:   #E6E6E3;   /* mục điều hướng đang mở, thanh tiến độ */

  /* Ba sắc độ dưới đây KHÔNG có trong bản bàn giao, nhưng 5 lớp CSS đang dùng
     chúng. Suy ra theo đúng vai trò cũ, đặt xen giữa hai bậc kề. Nhà thiết kế
     cần biết đây là chỗ tự quyết, không phải số do họ đưa. */
  --ink-850:   #F5F5F3;   /* nền cột hàng chờ, lề chú giải — giữa 900 và 800 */
  --ink-650:   #F2F2EF;   /* ô số liệu cần chú ý — nổi hơn thẻ một bậc */
  --ink-500:   #D4D4D0;   /* cột biểu đồ trạng thái thường — đậm hơn 600 */

  --amber:     #6E3E08;   /* MÀU NHẤN DUY NHẤT. Burning Flame hạ sắc, 8.6:1.
                             Bản cũ #C08F45 chỉ đạt 2.4:1 trên nền sáng. */
  --amber-chu: #FFFFFF;   /* chữ đặt TRÊN nền --amber */
  --amber-nen: #FFB162;   /* Burning Flame gốc — chỉ cho khối tô lớn, và chữ
                             đặt trên nó bắt buộc phải là màu tối */
  --canh-bao:  #8E2318;   /* MỚI. Truffle Trouble đẩy đỏ, 7.8:1. Chỉ nói
                             "thiếu dữ liệu / lệch tiền / số âm". */

  --paper:     #141C25;   /* chữ chính — Abyssal Anchorfish Blue đậm một bậc */
  --slate-400: #3B4550;   /* chữ phụ — đủ đậm để đọc cả ngày */
  --slate-500: #5A6470;   /* nhãn, chú thích */
  --slate-300: #2A343F;   /* chữ trong lề chú giải. Cũng là chỗ tự suy. */
  --slate-600: #8A929C;   /* số thứ tự, chữ bị vô hiệu. Chỗ tự suy. CHỈ dùng
                             cho chữ trang trí không mang thông tin. */
  --line:      rgba(20, 28, 37, .14);   /* đường phân cách chính */
  --line-2:    rgba(20, 28, 37, .26);   /* đường phân cách đậm */
  --line-soft: rgba(20, 28, 37, .08);   /* đường phân cách dòng bảng. Tự suy. */

  /* ── Lớp tên cũ, trỏ vào bảng trên ───────────────────────────────────────
     Giữ lại để không phải sửa mọi tệp cùng lúc. */
  --nen:        var(--ink-800);
  --the:        var(--ink-700);
  --chu:        var(--paper);
  --chu-phu:    var(--slate-400);
  --nhan:       var(--amber);

  /* ĐỔI 13/09/2026: chữ trên nút nhấn giờ là TRẮNG, không phải màu nền.
     --amber mới là nâu đậm #6E3E08; đặt chữ tối lên đó là không đọc được. */
  --tren-nhan:  var(--amber-chu);

  /* ĐỔI 13/09/2026: --xau không còn trỏ vào --amber.

     Luật cũ "cảnh báo không phải một màu riêng, nó là tiêu điểm" đúng với nền
     tối, nơi chỉ cần một thứ sáng lên là đủ. Trên nền sáng thì mọi thứ đều
     sáng, nên thiếu dữ liệu và lệch tiền cần một màu nói thẳng.

     Luật "một màu nhấn duy nhất" VẪN ĐÚNG cho --amber. --canh-bao không phải
     màu nhấn thứ hai; nó chỉ nói một việc: chỗ này có gì đó sai. */
  --xau:        var(--canh-bao);

  --vien:       var(--line);
  --vien-mo:    var(--line-soft);
  --the-mo:     var(--ink-700);

  /* ── Chữ ─────────────────────────────────────────────────────────────────
     ĐỔI 13/09/2026: MỘT họ chữ duy nhất cho giao diện, kể cả số.

     Trước đây mọi con số và mọi nhãn viết hoa đều là Roboto Mono. Dấu tiếng
     Việt trong chữ mono bị bè và lệch chiều cao so với chữ thường bên cạnh.
     Số vẫn thẳng cột được nhờ `font-variant-numeric: tabular-nums` đặt ở body.

     Roboto Mono chỉ còn cho mã ASCII thật: số tài khoản, id hồ sơ, mã hex. */
  --chu-giao-dien: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --chu-so:        'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --chu-ma:        'Roboto Mono', ui-monospace, monospace;
  --chu-diem-nhan: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Thang khoảng cách. Mọi padding, margin, gap phải lấy từ đây. */
  --k-1: 4px;   --k-2: 8px;   --k-3: 12px;  --k-4: 16px;
  --k-5: 20px;  --k-6: 24px;  --k-8: 32px;  --k-11: 44px;

  /* ── Hình học ────────────────────────────────────────────────────────────
     ĐỔI 13/09/2026: bo góc 3px thay cho 0. Vẫn KHÔNG đổ bóng; phân tầng vẫn
     bằng nền đặc và kẻ 1px. Giữ tên --r để không phải sửa 36 chỗ đang dùng. */
  --bo: 3px;
  --r: var(--bo);

  /* 252px, đúng con số bàn giao chốt.

     Từng phải nới lên 268px vì nhãn "Danh sách để hành động" kèm icon bị cắt.
     Sau khi gộp 26 mục xuống 12, nhãn dài nhất là "Chương trình & buổi học" và
     252px vừa. Đã đo lại trên màn thật. */
  --cot-menu: 252px;
  --cot-le: 380px;   /* cột lề chú giải ở màn hồ sơ */
}


* { 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;
}
.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; }
.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);
}

.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;
  letter-spacing: .08em; text-transform: uppercase;
}
.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. */
.dcz-o.dang-giu,
.dcz-tep-dong .dang-giu {
  border-color: var(--nhan);
  box-shadow: inset 2px 0 0 var(--nhan);
}
label.dang-giu > .dcz-nhan { color: var(--nhan); }

/* 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); }
.man-nhom {
  margin: 0 0 var(--k-2); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; 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); }

/* ── Ô 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;
}

.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.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --bd-1: #DFA86E; --bd-2: #C98A47; --bd-3: #B06A28; --bd-4: #8E5215; --bd-5: #6E3E08;
  --bd-trung: #D4D4D0;           /* đã dừng, chưa trả lời: không mang thứ bậc */
  --bd-ray: rgba(20, 28, 37, .08);
}
.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; }
@media (max-width: 640px) {
  .bd-ngang { grid-template-columns: minmax(96px, 40%) 1fr auto; }
  .bd-the { padding: 14px 14px 12px; }
}
@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); }