/* TIMES NEW ROMAN toàn bộ — người dùng chọn.
   Máy Mac và Windows có sẵn font này. Android và Linux thì KHÔNG, nên tải
   thêm Tinos: nó cùng kích thước chữ với Times New Roman (metric-compatible)
   và có đủ dấu tiếng Việt, nên máy nào cũng ra cùng một bố cục — không thì
   mở trên điện thoại chữ nhảy hết. */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --primary: #ee0033;
  --primary-dark: #c40029;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #e2e4e9;
  --text: #1c1e21;
  /* #6b7280 cũ chỉ 4,43:1 (dưới AA). #656c79 đạt 5,28 nhưng vẫn ĐỌC RA MỜ khi
     chữ nhỏ — đạt chuẩn chỉ là mức sàn, không phải mức dễ đọc. #525966 đo
     được 7,05:1 trên nền trắng và 6,46:1 trên nền xám. */
  --text-muted: #525966;

  /* Ba bậc bo góc thay vì một. Trước đây mọi thứ đều 10px nên ô nhập, thẻ và
     cửa sổ trông cùng một hạng — mất hẳn cảm giác phân cấp. */
  --radius-sm: 7px;
  --radius: 12px;
  --radius-lg: 16px;

  /* Bóng NHIỀU LỚP. Một lớp phẳng 0 1px 3px trông như ảnh chụp bị mờ; xếp
     hai lớp (viền sát + toả rộng) mới ra chiều sâu thật. */
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px -1px rgba(16, 24, 40, .06);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, .04), 0 8px 20px -6px rgba(16, 24, 40, .1);
  --shadow-lg: 0 4px 8px rgba(16, 24, 40, .04), 0 20px 44px -12px rgba(16, 24, 40, .16);

  /* Nhịp khoảng cách. Trước nay mỗi chỗ một con số tuỳ hứng. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Times New Roman', Tinos, Times, serif;
  background: var(--bg);
  color: var(--text);
  /* KHÔNG đặt -webkit-font-smoothing: antialiased ở đây.
     Trên macOS nó tắt khử răng cưa theo pixel phụ, làm nét chữ MỎNG đi và
     mờ hơn -- Times New Roman vốn đã là bộ chữ in nét thanh nên thành ra
     mảnh khảnh, không sắc. Để trình duyệt tự lo thì chữ đậm và sắc hơn.
     Riêng .tv-overlay (chữ sáng trên nền tối) vẫn giữ antialiased: ở đó
     pixel phụ gây viền màu và chữ bị phì. */
}

/* MỌI CON SỐ dùng chữ số cùng bề rộng. Không có nó thì bảng số nhảy cột mỗi
   lần đổi giá trị, và hai dòng cùng độ dài trông lệch nhau. */
.stat-value, .dash-total, .dash-bar-value, .sd-p, .vc-dem, .khl-o-so,
td, th, .do-dv-so, .do-tb-manh {
  font-variant-numeric: tabular-nums;
}

/* Nền xám than, màu đỏ thương hiệu dồn vào nút chính. Trung tính nên nhìn
   lâu đỡ mỏi mắt hơn nền đỏ bão hoà, và nút đỏ nổi bật hẳn trên nền tối. */
/* Ba con số đo được ở bản cũ, sửa cả ba:
     · cao 94px = 13% chiều cao màn hình, chỉ để hiện logo + một dòng tiêu đề
       đứng yên. Xếp một hàng còn 58px.
     · ruột chặn 1200px trong khi thân trang là 1400px -> lệch 200px, hai
       mép phải không bao giờ thẳng nhau.
     · logo bắt đầu ở 64px còn menu trái ở 0 -> lệch 64px, không có trục dọc
       nào chung.
   Sửa: bỏ trần riêng, dùng CHUNG trần 1400px với .app-body và cùng lề 12px
   để logo thẳng đúng mép menu. */
.topbar {
  background: linear-gradient(180deg, #2b2e35, #212429);
  color: #fff;
  padding: 0;
  border-bottom: 2px solid var(--primary);
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 12px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-logo { display: flex; align-items: center; flex: none; }
/* Logo là chữ xanh đậm trên nền trong suốt — đặt thẳng lên nền xám than sẽ
   tối chồng tối, khó đọc. Lót nền trắng bo góc để logo giữ đúng màu gốc. */
.topbar-logo img {
  height: 34px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: 7px;
  padding: 5px 11px;
}

/* Tiêu đề và dòng phụ nằm CÙNG hàng với logo và nút — không mất chữ nào mà
   bỏ được 36px chiều cao. Dòng phụ tách bằng một vạch dọc. */
.topbar-title { display: flex; align-items: baseline; gap: 11px; min-width: 0; }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 800; white-space: nowrap; }
.subtitle { opacity: 0.85; font-size: 15px; }
/* .subtitle dùng chung với thẻ đăng nhập nên chỉ chỉnh trong phạm vi topbar. */
.topbar .subtitle {
  color: rgba(255, 255, 255, 0.62); opacity: 1; font-size: 13.5px;
  border-left: 1px solid rgba(255, 255, 255, 0.22); padding-left: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Xếp bằng flex chứ KHÔNG dùng lưới cột cố định: Admin có 3 nút còn nhân
   viên chỉ có 2, lưới cứng làm nút lẻ rơi sang ô của tên rồi bị kéo giãn,
   nhìn lệch hẳn. Flex thì bao nhiêu nút cũng xếp đều nhau. */
/* Lá cờ Tổ quốc: chiếm hết chỗ trống giữa tiêu đề và khối tài khoản, rồi tự
   canh giữa khoảng trống đó. Dùng flex:1 chứ không dùng margin:auto — trong
   thanh này .topbar-user đã có margin-left:auto, thêm một cặp auto nữa là hai
   bên chia nhau chỗ trống và lá cờ KHÔNG nằm giữa. */
.topbar-co { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.topbar-co svg { flex: none; display: block; }
/* Màn hẹp thì GIẤU CỜ. Đo thật ở 1200px: cờ chiếm chỗ làm phụ đề "Quản lý cơ
   sở dữ liệu nhân sự" cụt còn "Quản lý cơ sở dữ l…". Chữ quan trọng hơn hình
   trang trí, nên ngưỡng đặt ở 1280px chứ không phải 1000px. */
@media (max-width: 1279px) { .topbar-co { display: none; } }

.topbar-user {
  /* Thanh trên nay xếp bằng flex một hàng, không còn lưới 3 cột — grid-column
     và justify-self là tàn dư, để lại thì không đẩy được sang mép phải. */
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.topbar-user #user-info { text-align: right; white-space: nowrap; }
/* Các nút gom thành 1 nhóm, cỡ vừa đúng nội dung — không kéo giãn. */
.topbar-user-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topbar-user-actions .btn-ghost { white-space: nowrap; }
/* Tên + icon Sổ tay đi liền nhau, tách khỏi nhóm nút. */
.topbar-user-name { display: flex; align-items: center; gap: 8px; }
.topbar-icon-btn {
  background: none;
  border: none;
  padding: 2px;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  /* PHẢI khai màu. Nút KHÔNG thừa kế màu chữ — trình duyệt gán `buttontext`
     (gần đen). Hồi còn dùng emoji thì không lộ vì emoji tự có màu; icon vẽ
     ăn currentColor nên thành ĐEN TRÊN NỀN TỐI, đo được 1,31:1 — coi như
     tàng hình. Trắng ở opacity .85 trên #212429 đo được 11,3:1. */
  color: #fff;
}
.topbar-icon-btn:hover { opacity: 1; }

@media (max-width: 860px) {
  .topbar-inner { display: flex; flex-direction: column; align-items: center; }
  .topbar-logo { justify-self: center; }
  .topbar-user { justify-content: center; }
  .topbar-user-actions { justify-content: center; }
}
.topbar-user #user-info { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
/* Nút viền mờ trên nền tối — giữ nút thoát/đổi mật khẩu ở mức kín đáo. */
.topbar-user .btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.topbar-user .btn-ghost:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); }
/* Riêng "Quản trị" tô đỏ: chỉ Admin thấy, và là điểm nhấn thương hiệu duy
   nhất trên thanh xám để vẫn nhận ra màu công ty. */
.topbar-user #btn-open-admin { background: var(--primary); color: #fff; border-color: var(--primary); }
.topbar-user #btn-open-admin:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.login-screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 120% 90% at 28% 12%, #ff3b5c 0%, transparent 52%),
              radial-gradient(ellipse 100% 80% at 82% 92%, #ffb14a 0%, transparent 48%),
              radial-gradient(ellipse 140% 100% at 50% 50%, #b5001f 0%, transparent 70%),
              linear-gradient(135deg, #7a0016, #2e0009);
  padding: 20px;
  overflow: hidden;
}

.login-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-bg-circuit {
  position: absolute;
  inset: -10%;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='white' stroke-width='1'%3E%3Cpath d='M0 70H30M110 70H140M70 0V30M70 110V140'/%3E%3Cpath d='M30 70L50 50H90L110 70L90 90H50Z'/%3E%3Cpath d='M0 15H15V0M140 15H125V0M0 125H15V140M140 125H125V140'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='70' cy='30' r='2.2'/%3E%3Ccircle cx='70' cy='110' r='2.2'/%3E%3Ccircle cx='30' cy='70' r='2.2'/%3E%3Ccircle cx='110' cy='70' r='2.2'/%3E%3Ccircle cx='70' cy='70' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
  animation: login-circuit-drift 40s linear infinite;
}
@keyframes login-circuit-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-140px, -140px); }
}

.login-particles span {
  position: absolute;
  bottom: -20px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 8px 2px rgba(255, 209, 102, 0.7);
  opacity: 0;
  animation: login-particle-rise linear infinite;
}
.login-particles span:nth-child(1) { left: 8%; animation-duration: 9s; animation-delay: 0s; }
.login-particles span:nth-child(2) { left: 18%; animation-duration: 12s; animation-delay: 1.5s; background: #ffffff; box-shadow: 0 0 8px 2px rgba(255,255,255,0.7); }
.login-particles span:nth-child(3) { left: 30%; animation-duration: 10s; animation-delay: 3s; }
.login-particles span:nth-child(4) { left: 45%; animation-duration: 14s; animation-delay: 0.5s; background: #ffffff; box-shadow: 0 0 8px 2px rgba(255,255,255,0.7); }
.login-particles span:nth-child(5) { left: 58%; animation-duration: 11s; animation-delay: 4s; }
.login-particles span:nth-child(6) { left: 68%; animation-duration: 13s; animation-delay: 2s; background: #ffffff; box-shadow: 0 0 8px 2px rgba(255,255,255,0.7); }
.login-particles span:nth-child(7) { left: 78%; animation-duration: 9.5s; animation-delay: 5s; }
.login-particles span:nth-child(8) { left: 86%; animation-duration: 12.5s; animation-delay: 1s; }
.login-particles span:nth-child(9) { left: 94%; animation-duration: 10.5s; animation-delay: 3.5s; background: #ffffff; box-shadow: 0 0 8px 2px rgba(255,255,255,0.7); }
.login-particles span:nth-child(10) { left: 52%; animation-duration: 15s; animation-delay: 6s; }
@keyframes login-particle-rise {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-100vh) scale(1.1); opacity: 0; }
}

.login-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  animation: login-glow-drift 16s ease-in-out infinite alternate;
}
.login-bg-glow-1 {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -120px;
  background: #ffffff;
}
.login-bg-glow-2 {
  width: 480px;
  height: 480px;
  bottom: -180px;
  right: -140px;
  background: #ffd166;
  animation-delay: -8s;
}
@keyframes login-glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(40px, 30px) scale(1.15); }
}

.login-marquee {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  white-space: nowrap;
}
.login-marquee-1 {
  top: 14%;
  transform: rotate(-3deg);
}
.login-marquee-2 {
  bottom: 16%;
  transform: rotate(-3deg);
}
.login-marquee-track {
  display: inline-flex;
  gap: 4rem;
  animation: login-marquee-scroll 26s linear infinite;
}
.login-marquee-track-reverse {
  animation-name: login-marquee-scroll-reverse;
  animation-duration: 30s;
}
.login-marquee-1 span {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.14);
  padding-right: 4rem;
}
.login-marquee-2 span {
  font-size: clamp(16px, 2.6vw, 28px);
  font-weight: 600;
  font-style: italic;
  color: rgba(255, 255, 255, 0.16);
  padding-right: 4rem;
}
@keyframes login-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes login-marquee-scroll-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .login-bg-glow, .login-marquee-track, .login-marquee-track-reverse,
  .login-bg-circuit, .login-particles span { animation: none; }
}

.login-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-card h1 { margin: 0; font-size: 22px; text-align: center; }
.login-card .subtitle { color: var(--text-muted); text-align: center; margin-bottom: 6px; }
.login-card button { margin-top: 6px; }
/* Lời nhắn sau khi đổi mật khẩu — nằm lại tới khi bấm Đăng nhập, không tự
   tắt như toast. Xanh lá vì đây là việc ĐÃ XONG, không phải lỗi. */
.login-note {
  margin: 0; padding: 10px 13px; font-size: 14px; line-height: 1.5;
  color: #14532d; background: #eaf7ef;
  border-left: 3px solid #1f8a4c; border-radius: 0 8px 8px 0;
}

.app-body {
  display: flex;
  align-items: flex-start;
  max-width: 1400px;
  margin: 0 auto;
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 12px;
  position: sticky;
  top: 0;
}
/* Tiêu đề nhóm — chia menu thành mảng Nhân sự và Tài chính. Tự ẩn nếu cả
   nhóm không còn mục nào người dùng được xem (xem applyTabPermissions). */
.sidebar-nhom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 8px;
  /* Lề TRÁI nhỏ hơn mục con: nhóm là CHA nên phải nằm ngoài, con thụt vào
     trong. Bản trước nhóm 14px mà mục 11px — cha nằm phải hơn con, nhìn ra
     hai thứ ngang hàng chứ không ra cha con. */
  padding: 0 14px 0 6px;
  /* Nay là <button> để THU GỌN được nhóm — phải nắn kiểu nút mặc định về 0,
     không thì trình duyệt tự thêm viền, nền xám và căn giữa chữ. */
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  /* THANG BA BẬC: nhóm 19px > mục 16,5px > mục con 15px.
     Bản trước để nhóm BẰNG mục (16px cả hai) và chỉ phân biệt bằng đậm +
     màu + đường kẻ. Sai về thứ bậc: Dashboard, HR MASTER... nằm TRONG nhóm
     Nhân sự mà chữ ngang bằng cấp cha, nên cha không ra dáng cha.
     Đừng kéo về bằng nhau nữa. */
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--primary-dark);
}
/* Đường kẻ mảnh kéo hết phần còn lại — làm tiêu đề ra dáng đầu mục thay vì
   trông như chú thích bị bỏ quên. */
.sidebar-nhom::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.sidebar-nhom-ico {
  /* Theo cỡ chữ của nhóm, không thì biểu tượng lọt thỏm cạnh chữ to. */
  line-height: 1;
  flex: none;
  display: grid;
  place-items: center;
}
.sidebar-nhom-ico svg { width: 21px; height: 21px; display: block; }
.sidebar-nhom:first-child { margin-top: 0; }
/* Tên nhóm KHÔNG ngắt dòng — "Hồ sơ nhân sự" và "Hiệu suất & công" vừa đủ
   dài để bị bóp xuống hai dòng trong cột 220px, trông như hai mục rời.
   Cho chữ giữ nguyên một dòng và để ĐƯỜNG KẺ co lại nhường chỗ. */
.sidebar-nhom > span:not(.sidebar-nhom-ico):not(.sidebar-nhom-mui) {
  flex: none;
  white-space: nowrap;
}
.sidebar-nhom::after { min-width: 0; }
/* Mũi nhọn thu gọn nhóm. Nằm SAU đường kẻ nên phải đẩy ra sát mép phải. */
.sidebar-nhom-mui {
  flex: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--text-muted);
  /* Sàn cỡ chữ là 13px — dùng đúng cỡ đó như .sidebar-mo, không hạ xuống 12
     dù đây chỉ là một glyph mũi nhọn. */
  font-size: 13px;
  line-height: 1;
}
.sidebar-nhom-mui::before { content: '▾'; transition: transform .15s; }
.sidebar-nhom[aria-expanded="false"] .sidebar-nhom-mui::before { transform: rotate(-90deg); }
.sidebar-nhom:hover .sidebar-nhom-mui { background: rgba(0, 0, 0, .07); color: var(--text); }
.sidebar-nhom:hover { color: var(--primary); }
/* Cả nhóm thu lại. Dùng lớp riêng chứ không dùng .hidden: applyTabPermissions
   cũng đụng tới .hidden của các mục con, hai bên tranh nhau là nhóm mở ra
   lại lúc đổi quyền. */
/* Cả nhóm con THỤT VÀO so với tiêu đề: mục icon bắt đầu ở 6+10+11 = 27px,
   tiêu đề ở 6px. Nhìn là thấy ngay con nằm trong cha. */
.sidebar-nhom-ds { padding-left: 10px; }
.sidebar-nhom-ds.thu { display: none; }
/* Huy hiệu số việc cần làm — chỉ gắn cho việc thật sự phải xử lý. */
.sidebar-so {
  margin-left: auto;
  flex: none;
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  padding: 0 6px;
}
.sidebar-ten { min-width: 0; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Lề 11px chứ không 14px: ba mục dài nhất ("Thông báo lên line", "Phân tích
     nhân sự", "Lớp & tuyển dụng") chỉ thiếu 2-6px là đủ một dòng. Thu lề
     trong nút thì đủ chỗ mà KHÔNG phải nới menu — nới menu là lấn vào bề
     ngang nội dung, đúng thứ vừa mất công gỡ ra. */
  padding: 10px 11px;
  border: none;
  background: none;
  border-radius: 8px;
  /* Bậc GIỮA của thang ba bậc (nhóm 19 > mục 16,5 > mục con 15). */
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
/* ---- Nhánh con của Dashboard ---- */
/* Mũi tên thu gọn nằm trong chính nút Dashboard, đẩy sát mép phải. */
.sidebar-mo {
  margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 6px;
  color: var(--text-muted); font-size: 13px; line-height: 1;
}
.sidebar-mo::before { content: '▾'; transition: transform .15s; }
.sidebar-mo.thu::before { transform: rotate(-90deg); }
.sidebar-mo:hover { background: rgba(0, 0, 0, .07); color: var(--text); }

/* Thụt vào và có vạch dọc để thấy rõ đây là nhánh con, không phải mục ngang
   hàng. Vạch chạy suốt cả nhóm chứ không phải từng dòng một. */
.sidebar-con {
  position: relative; margin: 2px 0 6px 16px; padding-left: 8px;
  border-left: 2px solid var(--border);
}
.sidebar-con.hidden, .sidebar-con.an-quyen { display: none; }
.sidebar-item-con {
  /* Bậc THẤP NHẤT của thang ba bậc. Sàn 15px, không nhỏ hơn. */
  padding: 7px 8px; font-size: 14px; font-weight: 500; gap: 7px;
}
.sidebar-item-con .sidebar-icon svg { width: 16px; height: 16px; }

.sidebar-item { position: relative; transition: background .15s, color .15s; }
.sidebar-item:hover { background: #eef0f3; color: var(--text); }
.sidebar-item.active { background: #fdeaea; color: var(--primary-dark); }
/* Thanh đỏ dựng bên trái mục đang mở. Chỉ đổi nền thôi thì liếc nhanh không
   thấy mình đang ở đâu, nhất là khi menu dài. */
.sidebar-item.active::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--primary);
}
/* Icon vẽ bằng SVG, nét ăn theo currentColor nên tự đổi màu khi mục được
   chọn hoặc khi rê chuột. Emoji không làm được chuyện đó. */
.sidebar-icon {
  flex: none;
  display: grid;
  place-items: center;
  line-height: 1;
}
.sidebar-icon svg { width: 18px; height: 18px; display: block; }

.view.hidden { display: none !important; }

.coming-soon {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 80px 24px;
  text-align: center;
  color: var(--text-muted);
}
.coming-soon-icon { font-size: 45px; margin-bottom: 12px; }
.coming-soon h2 { margin: 0 0 8px; color: var(--text); font-size: 22px; }
.coming-soon p { margin: 0; font-size: 15px; }

.container { flex: 1; min-width: 0; padding: 24px; }

/* =======================================================================
   PHÓNG TO MÀN — bấm 2 lần vào một mục ở menu trái
   -----------------------------------------------------------------------
   Bảng nhiều cột phải kéo thanh ngang mới xem hết. Đo ra nguyên nhân: bề
   ngang nội dung bị chặn CỨNG ở 1.132px dù màn hình rộng bao nhiêu, do ba
   thứ cộng lại — .app-body chặn max-width 1400px, menu chiếm 220px, đệm
   .container 2 × 24px. Phóng to bỏ cả ba:
     màn 1440px: 1.132 -> 1.404px (+24%)   màn 1920px: -> 1.884px (+66%)
   Đây KHÁC nút phóng to có sẵn ở đầu mỗi cửa sổ (.btn-phong-to): nút đó chỉ
   nới khối .modal trong khung, không đụng được tới ba cái chặn ở trên.
   ======================================================================= */
body.phong-to .app-body { max-width: none; }
body.phong-to .sidebar { display: none; }
body.phong-to .topbar { display: none; }
body.phong-to .container { padding: 52px 18px 26px; }
/* Nới trần chiều cao vùng cuộn — không nới thì phóng to xong vẫn không thấy
   thêm dòng nào (đúng bài học của .modal-to). NHƯNG không được để 'none':
   bỏ trần là khối hết cuộn riêng, mà thead dính lại cần đúng khối cuộn đó.
   Phóng to đã giấu thanh trên (94px) nên trừ ít đi. */
body.phong-to .view .table-wrap { max-height: calc(100vh - 96px); }

/* Bấm 2 lần vào nút menu thì trình duyệt bôi đen chữ trong nút. */
.sidebar-item { user-select: none; -webkit-user-select: none; }

.phong-to-thanh {
  position: fixed; top: 10px; right: 14px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px; border-radius: 999px;
  background: var(--card, #fff); border: 1px solid var(--border, #d9dee7);
  box-shadow: var(--shadow-md);
}
.phong-to-ten { font-size: 14px; font-weight: 700; color: var(--text); }
.phong-to-thoat {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--border, #d9dee7); background: var(--bg, #f1f3f7); color: var(--text);
}
.phong-to-thoat:hover { background: #e6eaf2; }
body:not(.phong-to) .phong-to-thanh { display: none; }

@media (max-width: 860px) {
  /* Màn hẹp thì menu vốn đã xếp dọc, phóng to chẳng nới thêm được bao nhiêu
     mà lại giấu mất menu. */
  body.phong-to .sidebar, body.phong-to .topbar { display: revert; }
  body.phong-to .container { padding: 24px; }
  .phong-to-thanh { display: none !important; }
}

@media (max-width: 860px) {
  /* align-items: flex-start ở .app-body là để menu không kéo dài hết cột khi
     xếp NGANG. Nhưng khi đổi sang xếp DỌC thì nó lại bắt .container co theo
     nội dung — mà nội dung là bảng rộng tối thiểu 720px, nên cả trang bị kéo
     ngang: vuốt ngang là mất luôn menu và tiêu đề. Trả về stretch để cột con
     bám đúng bề ngang màn hình, bảng cuộn trong khung riêng của nó
     (.table-wrap vốn đã có overflow-x: auto). */
  .app-body { flex-direction: column; align-items: stretch; }
  .sidebar {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 12px 24px 0;
  }
  .sidebar-item { width: auto; }
  /* Menu xếp NGANG trên điện thoại. Ô chứa nhóm phải trong suốt, không thì
     mỗi nhóm thành một khối dọc riêng và menu cao gấp mấy lần.
     .thu vẫn thắng vì độ ưu tiên cao hơn. */
  .sidebar-nhom-ds { display: contents; }
  .sidebar-nhom { width: auto; padding: 0 8px; }
  .container { min-width: 0; max-width: 100%; }
}

/* MỘT TẤM LIỀN, chia ô bằng vạch mảnh — thay cho 7 hộp rời mỗi hộp một
   bóng đổ. Bảy cái bóng cạnh nhau làm đầu trang trông vụn và ồn; một tấm
   liền đọc như một dải chỉ số thật.
   120px chứ không phải 150px: ở khung 1.060px, 7 thẻ với mốc 150px không đủ
   chỗ nên thẻ thứ 7 rơi xuống dòng hai, đứng lẻ loi trông như lỗi. */
.stats {
  display: grid;
  /* Đo trên ô rộng nhất ("\1FA91 487/552" ở cỡ 22px): con số cần 69px, cộng
     lề 2 x 15px là 99px. Để 124px cho nhãn cũng dễ thở, vẫn sát mức cũ 120px
     nên số ô mỗi hàng gần như không đổi. */
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 0;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid rgba(16, 24, 40, .06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stat-card {
  background: var(--surface);
  border-radius: 0;
  padding: 13px 15px;
  /* Xếp dọc để NHÃN bị đẩy xuống đáy ô. Trước đó nhãn bám ngay dưới con số,
     mà con số thì ô một dòng ô hai dòng -> nhãn của 9 ô nằm ở 9 độ cao khác
     nhau, nhìn như bị xô lệch. Nay đáy nào cũng thẳng đáy nào. */
  display: flex;
  flex-direction: column;
  box-shadow: none;
  /* Vạch ngăn giữa các ô, không phải viền quanh từng ô. */
  border: none;
  border-left: 1px solid rgba(16, 24, 40, .07);
  position: relative;
  transition: background .15s;
}
.stat-card:first-child { border-left: none; }
.stat-card:hover { background: rgba(16, 24, 40, .015); }
/* Vạch màu ý nghĩa chuyển từ viền trái sang GẠCH TRÊN ĐẦU ô — viền trái nay
   đã là vạch ngăn giữa các ô, dùng tiếp là hai thứ đánh nhau. */
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: transparent;
}
/* Màu thẻ chỉ số theo Ý NGHĨA con số (xem statCardTone trong app.js).
   Chỉ tô vạch bên trái + màu số, giữ nền trắng để đọc số vẫn rõ. */
.stat-card.tone-ok::before   { background: #1a7f37; }
.stat-card.tone-cho::before   { background: #d99b00; }
.stat-card.tone-hv::before   { background: #2563eb; }
.stat-card.tone-canh::before  { background: #d0342c; }
.stat-card.tone-nghi::before  { background: #6b7280; }
.stat-card.tone-tong::before { background: var(--primary); }
.stat-card.tone-ok   .stat-value { color: #1a7f37; }
.stat-card.tone-cho  .stat-value { color: #8a5a08; }
.stat-card.tone-hv   .stat-value { color: #2563eb; }
.stat-card.tone-canh .stat-value { color: #c0392b; }
.stat-card.tone-nghi .stat-value { color: #6b7280; }

.stat-card .stat-value {
  /* 27,5px trong ô rộng ~90px thì biểu tượng + con số KHÔNG đủ một dòng:
     biểu tượng nằm dòng trên, con số rơi xuống dòng dưới. Đó mới là thứ làm
     dải thẻ trông xô lệch, không phải bản thân cỡ chữ.
     nowrap là chốt chặn chính: hai thứ đó là MỘT cụm chữ trong cùng một thẻ
     (dựng ở 9 chỗ khác nhau trong app.js, không có thẻ bọc riêng cho biểu
     tượng), nên chỉ cấm ngắt dòng là chúng dính liền nhau. */
  font-size: 22px; font-weight: 800; color: var(--primary);
  letter-spacing: -.02em; line-height: 1.15;
  white-space: nowrap;
}
/* Nhãn tụt xuống đáy ô -> nhãn của mọi ô thẳng hàng nhau. */
.stat-card .stat-label {
  font-size: 13.5px; color: var(--text-muted); margin-top: auto; padding-top: 5px;
}
/* Dòng so sánh với tháng trước. Màu theo Ý NGHĨA chứ không theo hướng mũi
   tên: nghỉ việc tăng thì mũi tên đi lên nhưng phải đỏ, vì tăng là xấu. */
.stat-card .stat-delta { font-size: 13.5px; font-weight: 600; margin-top: 5px; }
.stat-card .stat-delta.tot { color: #1a7f37; }
.stat-card .stat-delta.xau { color: #c0392b; }
.stat-card-clickable { cursor: pointer; border: 1px dashed var(--border); transition: border-color 0.15s; }
.stat-card-clickable:hover { border-color: var(--primary); }
.stat-card-clickable .stat-value { color: var(--text-muted); }
.stat-card-active { border: 1px solid var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.stat-card-active .stat-value { color: var(--primary); }

.dash-section-title { font-size: 17.5px; margin: 4px 0 12px; color: var(--text); }
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.dash-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(16, 24, 40, .05);
  transition: box-shadow .18s, transform .18s;
}
.dash-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dash-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.dash-card-header h3 { margin: 0; font-size: 16px; }
.dash-total { font-size: 15px; font-weight: 700; color: #e74c3c; white-space: nowrap; }
.dash-lenline-badge {
  font-size: 13.5px;
  font-weight: 600;
  /* #2ecc71 trên nền xanh nhạt chỉ đo được 2,2:1 — chữ xanh lá nhạt là chỗ
     "chữ mờ" rõ nhất trên Dashboard. #12703a đo 6,3:1. */
  color: #12703a;
  background: color-mix(in srgb, #2ecc71 14%, var(--surface));
  border-radius: 6px;
  padding: 5px 9px;
  /* display:block chứ không inline-block: chữ dài hơn bề ngang thẻ thì
     inline-block TRÀN RA NGOÀI nền, còn block thì xuống dòng trong nền. */
  display: block;
  margin-bottom: 10px;
}
/* Dấu kiêm nhiệm. Cố ý dùng màu TÍM, khác hẳn xanh của "lên line trong
   tháng" — hai dải cùng màu là mắt tự cộng chúng vào nhau, mà con số này
   KHÔNG nằm trong quân số. Chữ "không tính vào quân số" nói thẳng ra luôn. */
/* Cờ cắm cạnh tên dự án. Chỉ hiện khi dự án đó có người kiêm nhiệm hoặc vừa
   điều chuyển — liếc lướt cả lưới là thấy ngay dự án nào có chuyện. */
/* Nhãn vai trò trong lịch sử: "Dự án chính" / "Dự án kiêm nhiệm" dài hơn
   "Lần 1" nhiều nên phải cho rộng ra, không thì vỡ chữ. */
.ls-stt.ls-vai-tro { width: auto; min-width: 116px; white-space: nowrap; font-size: 13.5px; }


.dash-kn-badge {
  font-size: 13.5px; font-weight: 600;
  /* #7c3aed đo được 4,91:1 — đạt AA nhưng sát mép. Đậm thêm một bậc cho
     rộng cửa: #6d28d9 đo 6,03:1. */
  color: #6d28d9;
  background: color-mix(in srgb, #6d28d9 10%, var(--surface));
  border: 1px dashed color-mix(in srgb, #6d28d9 35%, var(--surface));
  border-radius: 6px; padding: 4px 8px;
  display: block; margin-bottom: 10px;
}
/* Điều chuyển: màu lam, khác hẳn tím của kiêm nhiệm và xanh của lên line.
   Ba dải nằm cạnh nhau nên mỗi dải phải nhận ra được mà không cần đọc chữ. */
.dash-dc-badge {
  font-size: 13.5px; font-weight: 600;
  color: #1d4ed8;
  background: color-mix(in srgb, #1d4ed8 9%, var(--surface));
  border: 1px solid color-mix(in srgb, #1d4ed8 25%, var(--surface));
  border-radius: 6px; padding: 4px 8px;
  display: block; margin-bottom: 10px;
}
.dash-dc-badge > summary { cursor: pointer; list-style: none; }
.dash-dc-badge > summary::-webkit-details-marker { display: none; }
.dash-dc-badge > summary::after { content: ' ▾'; opacity: .7; }
.dash-dc-badge[open] > summary::after { content: ' ▴'; }
.dash-dc-mui { font-weight: 800; width: 12px; flex: 0 0 auto; }

.dash-kn-badge > summary { cursor: pointer; list-style: none; }
.dash-kn-badge > summary::-webkit-details-marker { display: none; }
.dash-kn-badge > summary::after { content: ' ▾'; opacity: .7; }
.dash-kn-badge[open] > summary::after { content: ' ▴'; }
.dash-kn-ds { list-style: none; margin: 7px 0 2px; padding: 0; display: grid; gap: 4px; }
.dash-dc-badge .dash-kn-ten { color: var(--text); }
.dash-kn-dong {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 4px 7px; border-radius: 5px; cursor: pointer;
  background: var(--surface);
}
.dash-kn-dong:hover, .dash-kn-dong:focus-visible {
  outline: 2px solid #6d28d9; outline-offset: 0;
}
.dash-kn-ten { font-weight: 700; color: var(--text); }
.dash-kn-goc { font-size: 13.5px; font-weight: 500; color: var(--text-muted); }
/* Không dùng opacity: lớp mờ chồng lên nền làm tương phản thật khác hẳn
   con số đo trên màu khai báo. Dùng thẳng một sắc nhạt hơn, đo được. */
.dash-kn-badge em { font-style: normal; font-weight: 500; color: #5b3aa8; }

/* Dòng nói khoảng lệch giữa "tổng công ty" và "cộng từng dự án". Trải hết
   bề ngang lưới, không thành một ô thẻ. */
.dash-lech-kn {
  grid-column: 1 / -1; margin: 4px 0 0; padding: 9px 12px;
  font-size: 13.5px; line-height: 1.5;
  color: #6b4a05; background: #fdf3d8; border: 1px solid #e8d29a; border-radius: 8px;
}
.bc-chan-luu-y { color: #6b4a05; background: #fdf3d8; border: 1px solid #e8d29a;
  border-radius: 8px; padding: 8px 11px; }

.dash-empty { font-size: 14px; color: var(--text-muted); margin: 0; }
.dash-bar-row {
  display: grid;
  grid-template-columns: 108px 1fr 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13.5px;
}
.dash-bar-row:last-child { margin-bottom: 0; }
.dash-bar-label { color: var(--text-muted); }
.dash-bar { background: var(--bg); border-radius: 6px; height: 10px; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 6px; min-width: 2px; }
.dash-bar-value { text-align: right; font-weight: 600; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
#search-input, #cp-da-search {
  flex: 1 1 260px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
}
select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  background: var(--surface);
  color: var(--text);
}

.multiselect { position: relative; }
.multiselect-trigger {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.multiselect-trigger:hover { background: #f7f7f8; }
.multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px;
  min-width: 190px;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.multiselect-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.multiselect-panel label:hover { background: #f4f5f7; }
.multiselect-select-all { font-weight: 600; }
.multiselect-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* "Tìm thấy N nhân viên" — người dùng kêu mờ nhạt. Đây là câu TRẢ LỜI cho
   thao tác lọc vừa làm, nên phải nhìn thấy ngay, không phải chú thích. */
.filter-count {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 15px; font-weight: 700; color: var(--primary-dark);
  background: #fdeaea; border: 1px solid #f0b4b4; border-radius: 999px;
  padding: 4px 13px; margin: -4px 0 16px;
}
.filter-count:empty { display: none; }
.filter-count b { font-size: 18px; font-variant-numeric: tabular-nums; }

.import-result-body {
  padding: 4px 0 20px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 15px;
}
.import-result-summary { font-weight: 600; margin-bottom: 10px; }
.import-result-errors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.import-result-errors li {
  background: #fdeaea;
  color: #c0392b;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
}

.daily-notice-body { padding: 4px 0 20px; max-height: 400px; overflow-y: auto; }
.notice-section { margin-bottom: 16px; }
.notice-section:last-child { margin-bottom: 0; }
.notice-section h3 { margin: 0 0 10px; font-size: 15px; color: var(--text); }
.notice-birthday-card {
  background: linear-gradient(135deg, #fff4e0, #fdeee0);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.notice-birthday-card strong { color: var(--primary-dark); }
.notice-birthday-card p { margin: 4px 0 0; font-size: 14px; color: var(--text); }
.notice-insurance-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.notice-insurance-list li {
  background: #fdeee0;
  color: #9c4208;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
}

.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  /* Đổi màu có nhịp, và nhấn xuống một chút khi bấm — không có phản hồi thì
     nút trông như ảnh dán chứ không phải thứ bấm được. */
  transition: background .15s, box-shadow .15s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: 0 1px 2px rgba(196, 0, 41, .24), 0 2px 8px -2px rgba(196, 0, 41, .3);
}
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 2px 4px rgba(196, 0, 41, .28), 0 6px 16px -4px rgba(196, 0, 41, .38); }
.btn-ghost { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg); color: var(--text); border-color: #cfd3da; }
.btn-danger { background: #d0342c; color: #fff; box-shadow: 0 1px 2px rgba(168, 40, 32, .24); }
.btn-danger:hover { background: #a82820; }

/* Nút thanh công cụ tô màu theo VIỆC nó làm, không theo vị trí:
   xanh lá = lấy dữ liệu ra · xanh dương = đưa dữ liệu vào · tím = xem báo cáo.
   Lợi ích thật: "Xuất Excel" và "Nhập Excel" nằm cạnh nhau, trước cùng màu
   xám chỉ khác mũi tên lên/xuống nên rất dễ bấm nhầm — nay khác màu hẳn.
   Đặt SAU .btn-ghost để đè được màu nền/viền của nó. */
.btn.btn-xuat   { background: #e9f6f0; color: #0f6e56; border-color: #a8ddc9; }
.btn.btn-xuat:hover   { background: #d8efe5; border-color: #5dcaa5; }
.btn.btn-nhap   { background: #e8f1fb; color: #185fa5; border-color: #a9cbee; }
.btn.btn-nhap:hover   { background: #d6e7f8; border-color: #85b7eb; }
.btn.btn-baocao { background: #efeefe; color: #3c3489; border-color: #c2bdf0; }
.btn.btn-baocao:hover { background: #e4e2fb; border-color: #afa9ec; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon {
  background: none;
  border: none;
  font-size: 24.5px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
}

.table-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
/* Trần chiều cao CHỈ cho bảng nằm ở màn chính (.view), KHÔNG cho bảng nằm
   trong cửa sổ bật lên: cửa sổ đã tự chặn chiều cao rồi, chặn thêm một lần
   nữa là hai thanh cuộn lồng nhau.
   Vì sao cần trần: position: sticky của thead chỉ ăn khi khối cuộn có chiều
   cao có hạn. Không đặt trần thì cả TRANG cuộn, thead không có gì để bám.
   210px = thanh trên (94) + thanh lọc và lề. */
.view .table-wrap {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 720px; }
thead th {
  text-align: left;
  padding: 12px 14px;
  background: #f2f5fa;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  /* DÍNH lại khi cuộn. Danh sách HR MASTER dài hàng trăm dòng, cuộn xuống
     một quãng là mất sạch tên cột — nhìn một ô "12/03/2026" mà không biết
     đó là Ngày lên line hay Ngày thôi việc.
     Dùng border-bottom ở đây thì viền bị cuộn qua mất (viền không dính theo
     ô), nên vẽ bằng box-shadow. */
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--border);
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
/* Sọc nhạt xen kẽ: bảng rộng 8-10 cột thì mắt dễ trượt sang dòng khác giữa
   chừng. Rất nhạt thôi, đủ để bám dòng chứ không thành kẻ ô. */
tbody tr:nth-child(even) { background: #fafbfd; }
tbody tr:hover { background: #eef4ff; }
tbody tr:last-child td { border-bottom: none; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
}
.badge-dang-lam { background: #e6f6ec; color: #1a7f37; }
.badge-da-nghi { background: #fdeaea; color: #c0392b; }
.badge-hoc-vien { background: #fff4e0; color: #8a5a08; }
.badge-cho-nghi { background: #fdeee0; color: #9c4208; }
.badge-default { background: #eef0f3; color: var(--text-muted); }

/* Tên dự án kèm icon — dùng ở bảng HR MASTER, NS nghỉ việc. */
.du-an-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.du-an-ico { font-size: 16px; line-height: 1; }
/* Icon trên thẻ dự án ở Dashboard — to hơn chút cho cân với tiêu đề. */
.dash-card-ico { font-size: 19.5px; margin-right: 7px; }

/* Avatar chữ cái đầu đứng trước họ tên trong các bảng nhân sự. */
.name-cell { display: flex; align-items: center; gap: 10px; }
/* Không cho họ tên xuống dòng — cột Dự án có icon nên rộng hơn, dễ bóp cột
   tên làm tên dài bị gãy làm đôi, nhìn rối. Bảng đã có cuộn ngang sẵn. */
.name-cell-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; white-space: nowrap; }
.name-cell-phu { font-size: 13.5px; color: var(--text-muted); }
.avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #6b7280;
  user-select: none;
}
/* Đã nghỉ việc: avatar xám, tên nhạt đi — lướt bảng là nhận ra ngay. */
.avatar-mo { background: #b9bec7; }
.name-cell:has(.avatar-mo) .name-cell-txt { opacity: 0.62; }

.copy-cell { display: inline-flex; align-items: center; gap: 6px; }
.copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  opacity: 0.35;
  color: var(--text-muted);
  display: inline-flex;
}
.copy-cell:hover .copy-btn { opacity: 0.9; }
.copy-btn:hover { opacity: 1; color: var(--primary); transform: scale(1.1); }

.ma-nv-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}
.ma-nv-link:hover { text-decoration: underline; color: var(--primary-dark); }

.row-actions { display: flex; gap: 8px; }
.link-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}
.link-btn.danger { color: #c0392b; }
.link-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.empty-state { padding: 40px; text-align: center; color: var(--text-muted); }
/* Ô trống có nội dung: icon + câu dẫn, thay vì bảng trắng trơn khiến người
   dùng tưởng hệ thống lỗi hoặc mất dữ liệu. */
.empty-rich { padding: 48px 24px; text-align: center; }
.empty-rich h4 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.empty-rich p { margin: 0 auto; max-width: 380px; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }

/* Khung chờ: thanh xám chạy sáng trong lúc tải, để thấy hệ thống đang làm
   việc chứ không phải đứng hình. */
@keyframes skeleton-chay {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eceef1 25%, #f6f7f9 50%, #eceef1 75%);
  background-size: 200% 100%;
  animation: skeleton-chay 1.4s ease-in-out infinite;
}
.skeleton-tron { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.skeleton-row td { padding: 14px; }
.skeleton-name { display: flex; align-items: center; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}
.lenline-note { font-size: 14px; color: var(--text-muted); margin: 0 0 10px; }
.hidden { display: none !important; }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 15px;
  color: var(--text-muted);
}
.pagination button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Lớp phủ đã bị đem khối .modal ra ngoài thì phải ẩn CỨNG, không phụ thuộc
   lớp .hidden — trình xử lý async của vài nút gỡ .hidden ra sau đó. */
.modal-overlay.da-nhung { display: none !important; }

.modal-overlay {
  backdrop-filter: blur(2px);
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal {
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  max-width: 780px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Vạch màu mỏng trên đầu cửa sổ, báo mức độ trước khi người dùng đọc chữ:
   xanh = chỉ xem số liệu · cam = cần cẩn thận · đỏ = KHÔNG hoàn tác được.
   Chỉ vạch viền, không đổi nền — nền màu làm chữ khó đọc khi ngồi lâu. */
.md-so-lieu   .modal { border-top: 3px solid #2563eb; }
.md-can-than  .modal { border-top: 3px solid #d99b00; }
.md-nguy-hiem .modal { border-top: 3px solid #d0342c; }

.modal-small { max-width: 420px; padding: 24px; }
.modal-large { max-width: 1050px; }

/* ---- Khối cửa sổ khi ĐEM VÀO TRANG (nhánh con của Dashboard) ----
   Bỏ hết dáng "cửa sổ nổi": không giới hạn chiều cao theo màn hình, không
   bo góc lửng, không tự cuộn bên trong. Nó là nội dung của trang, cuộn theo
   trang như mọi màn khác. */
.modal.nhung {
  max-width: none; max-height: none; overflow: visible;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.modal.nhung > [class$="-body"], .modal.nhung > .pt-body { overflow: visible; }
/* Nút × ở góc và nút Đóng dưới chân đổi nghĩa: quay lại Dashboard. */
.modal.nhung .modal-footer { border-radius: 0 0 var(--radius) var(--radius); }

.pyc-preview-scroll { background: #6b6b6b; padding: 24px; overflow: auto; flex: 1; }
.pyc-doc {
  background: #fff;
  width: 297mm;
  max-width: 100%;
  min-height: 190mm;
  margin: 0 auto;
  padding: 12mm 14mm;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-family: "Times New Roman", Times, serif;
  font-size: 12pt;
  color: #000;
  line-height: 1.35;
}
.pyc-doc .pyc-row { display: flex; justify-content: space-between; gap: 20px; }
.pyc-doc .pyc-col { width: 48%; }
.pyc-doc .pyc-col.right { text-align: center; }
.pyc-doc .pyc-bold { font-weight: 700; }
.pyc-doc .pyc-underline { text-decoration: underline; }
.pyc-doc .pyc-center { text-align: center; }
.pyc-doc .pyc-title { font-weight: 700; font-size: 14pt; text-align: center; margin: 14px 0 10px; text-transform: uppercase; }
.pyc-doc .pyc-right-block { text-align: right; margin: 4px 0 10px; }
.pyc-doc .pyc-para { text-align: justify; margin: 8px 0; }
.pyc-doc table { width: 100%; border-collapse: collapse; font-size: 8.5pt; margin: 10px 0; table-layout: fixed; }
.pyc-doc table th, .pyc-doc table td { border: 1px solid #000; padding: 3px 4px; vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; }
.pyc-doc table th { text-align: center; font-weight: 700; background: #f0f0f0; font-size: 7.5pt; line-height: 1.15; white-space: normal; }
.pyc-doc .pyc-signblock { display: flex; justify-content: space-between; margin-top: 18px; text-align: center; }
.pyc-doc .pyc-signblock > div { width: 45%; }
.pyc-doc .pyc-sign-title { font-weight: 700; }
.pyc-doc .pyc-sign-note { font-style: italic; margin-top: 4px; }
.pyc-doc .pyc-sign-name { font-weight: 700; margin-top: 60px; text-transform: uppercase; }

@media print {
  body * { visibility: hidden; }
  #pyc-print-area, #pyc-print-area * { visibility: visible; }
  #pyc-print-area {
    position: absolute; left: 0; top: 0; width: 100%;
    box-shadow: none; margin: 0; padding: 6mm;
  }
  @page { size: A4 landscape; margin: 8mm; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 19.5px; }
.modal-header-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.knnn-widget { display: flex; flex-direction: column; gap: 2px; }
.knnn-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  cursor: pointer;
}
.knnn-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.knnn-note { font-size: 13px; color: var(--text-muted); padding-left: 2px; }
.knnn-money-badge {
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 700;
  color: #8a5a00;
  background: #fff3cd;
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 2px;
}
.modal-subtitle { font-size: 14px; font-weight: 400; color: var(--text-muted); }

/* ---------- Màn hình bảo trì (hiện trước cả khi đăng nhập) ---------- */
/* Dùng lại đúng tông đỏ Viettel của màn đăng nhập để 2 màn hình liền mạch. */
.maintenance-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse 120% 90% at 28% 12%, #ff3b5c 0%, transparent 52%),
              radial-gradient(ellipse 100% 80% at 82% 92%, #ffb14a 0%, transparent 48%),
              radial-gradient(ellipse 140% 100% at 50% 50%, #b5001f 0%, transparent 70%),
              linear-gradient(135deg, #7a0016, #2e0009);
  overflow-y: auto;
}
.maintenance-card {
  max-width: 620px;
  width: 100%;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 40px 36px;
  backdrop-filter: blur(6px);
}
.maintenance-icon { font-size: 72.5px; line-height: 1; margin-bottom: 18px; }
.maintenance-card h1 { margin: 0 0 12px; font-size: 36px; font-weight: 800; }
.maintenance-reason { margin: 0 0 26px; font-size: 17.5px; color: rgba(255, 255, 255, 0.72); }
.maintenance-times { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.maintenance-time {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.maintenance-time-label {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
}
.maintenance-time strong { font-size: 18.5px; font-weight: 500; }
.maintenance-countdown { margin: 0 0 18px; font-size: 18.5px; font-weight: 700; color: #ffc978; line-height: 1.5; }
.maintenance-note { margin: 0 0 24px; font-size: 15px; color: rgba(255, 255, 255, 0.45); }
.maintenance-admin-link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.62);
  font-size: 16px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.maintenance-admin-link:hover { color: #fff; }
@media (max-width: 520px) {
  .maintenance-times { grid-template-columns: 1fr; }
  .maintenance-card { padding: 28px 20px; }
  .maintenance-card h1 { font-size: 29px; }
}

/* Thanh nhắc bảo trì cho Admin — nổi dưới màn hình, bấm tắt bảo trì ngay
   mà không cần mở bảng Quản trị. */
.maintenance-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 12px 12px 12px 18px;
  border-radius: 999px;
  background: #2e0009;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  font-size: 15px;
}
.maintenance-banner-icon { font-size: 19.5px; line-height: 1; }
.maintenance-banner .btn { padding: 7px 14px; white-space: nowrap; }
.maintenance-banner .btn-icon { color: rgba(255, 255, 255, 0.6); font-size: 22px; }
.maintenance-banner .btn-icon:hover { color: #fff; }
@media (max-width: 640px) {
  .maintenance-banner { flex-wrap: wrap; border-radius: 14px; justify-content: center; text-align: center; }
}

.bao-tri-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bao-tri-form .field.full { grid-column: 1 / -1; }
.bao-tri-trang-thai { font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #eef0f3; color: var(--text-muted); }
.bao-tri-trang-thai.on { background: #fdeaea; color: #c0392b; }
.bao-tri-trang-thai.hen { background: #fff4e0; color: #8a5a08; }
.bao-tri-trang-thai.off { background: #e6f6ec; color: #1a7f37; }

/* Thanh lọc nhật ký hoạt động */
.log-loc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.log-loc input[type="search"] { flex: 1; min-width: 220px; }
.log-loc input, .log-loc select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.log-loc label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-muted); }

/* ---------- Lịch nhân sự tháng ---------- */
.lich-body { padding: 18px 24px 22px; overflow-y: auto; }

/* Dải tóm tắt đầu trang — số to đọc được từ xa, thay cho dòng chú thích
   nhỏ xíu trước đây. */
.lich-tom-tat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.lich-tt { border-radius: 10px; padding: 12px 14px; border-left: 4px solid transparent; }
.lich-tt-so { margin: 0; font-size: 26.5px; font-weight: 800; line-height: 1.1; }
.lich-tt-nhan { margin: 3px 0 0; font-size: 13.5px; font-weight: 600; opacity: 0.75; }
.lich-tt.len  { background: #e9f7ef; border-left-color: #1a7f37; color: #16693b; }
.lich-tt.nghi { background: #fdeced; border-left-color: #d0342c; color: #a82820; }
.lich-tt.rong { background: #f4f5f7; border-left-color: #9aa3af; color: var(--text); }
.lich-huong-dan { margin: 0 0 10px; font-size: 13.5px; color: var(--text-muted); }

.lich-luoi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.lich-thu {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 0 6px;
}

.lich-o {
  min-height: 74px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
  transition: transform 0.12s, box-shadow 0.12s;
}
.lich-trong { border: none; background: none; }
.lich-o.cuoi-tuan { background: #f7f8fa; }
.lich-ngay { font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
.lich-chips { display: flex; flex-direction: column; gap: 4px; }

/* Ngày có biến động: tô nền theo loại để nhìn cả tháng là thấy nhịp vào/ra,
   không phải dò từng ô. Có cả vào lẫn ra thì chia đôi nền. */
.lich-o.co-viec { cursor: pointer; border-color: transparent; }
.lich-o.co-len  { background: #eaf7f0; }
.lich-o.co-nghi { background: #fdeced; }
.lich-o.co-ca-hai { background: linear-gradient(160deg, #eaf7f0 50%, #fdeced 50%); }
.lich-o.co-viec .lich-ngay { color: var(--text); }
.lich-o.co-viec:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }

/* Hôm nay: số ngày bọc trong viên tròn đỏ, thấy ngay không cần dò viền. */
.lich-o.hom-nay .lich-ngay {
  /* --primary cho chữ trắng cỡ nhỏ chỉ đạt 4,48:1 — dùng bản đậm hơn. */
  background: var(--primary-dark);
  color: #fff;
  border-radius: 999px;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
}

.lich-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.5;
  align-self: flex-start;
}
.lich-chip b { font-size: 14px; font-weight: 800; }
.lich-chip.len  { background: #1a7f37; color: #fff; }
.lich-chip.nghi { background: #d0342c; color: #fff; }

.lich-chi-tiet {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fafafb;
}
.lich-ct-dau { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.lich-ct-nhan { margin: 10px 0 5px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.03em; }
.lich-ct-nhan.len { color: #1a7f37; }
.lich-ct-nhan.nghi { color: #c0392b; }
.lich-ct-ds { margin: 0; padding-left: 18px; font-size: 14px; }
.lich-ct-ds li { margin-bottom: 4px; }

@media (max-width: 640px) {
  .lich-o { min-height: 60px; padding: 5px; gap: 3px; }
  .lich-chip { font-size: 13px; padding: 1px 5px; }
  .lich-chip b { font-size: 13.5px; }
  .lich-tt-so { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lich-o { transition: none; }
  .lich-o.co-viec:hover { transform: none; }
}

/* ---------- Báo cáo tháng 1 trang ---------- */
.bao-cao-body { padding: 20px 24px 24px; overflow-y: auto; }
.bc-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--primary); }
.bc-dau h3 { margin: 0; font-size: 19.5px; }
.bc-dau p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-muted); }
.bc-logo { height: 34px; width: auto; flex: none; }
.bc-so-hang {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 16px 0 20px;
}
.bc-o { background: var(--surface); padding: 11px 13px; }
.bc-so { margin: 0; font-size: 22px; font-weight: 700; color: var(--primary-dark); }
.bc-nhan { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); }
.bc h4 { margin: 18px 0 8px; font-size: 15px; color: var(--primary-dark); }
.bc-bang { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 0; }
.bc-bang th, .bc-bang td { border: 1px solid var(--border); padding: 7px 9px; text-align: left; }
.bc-bang th { background: #fafafb; font-weight: 700; font-size: 13.5px; }
.bc-bang td:not(:first-child), .bc-bang th:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }
.bc-bang tfoot td { font-weight: 700; background: #fafafb; }
.bc-trong { font-size: 14px; color: var(--text-muted); padding: 10px 0; margin: 0; }
.bc-chan { margin: 16px 0 0; font-size: 13.5px; color: var(--text-muted); font-style: italic; }

/* Khi in: giấu toàn bộ giao diện, chỉ chừa đúng tờ báo cáo. */
@media print {
  body * { visibility: hidden !important; }
  #bao-cao-in, #bao-cao-in * { visibility: visible !important; }
  #bao-cao-in {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
  }
  .modal-overlay { position: static !important; background: none !important; padding: 0 !important; }
  .modal { max-width: none !important; max-height: none !important; box-shadow: none !important; border: none !important; }
  .modal-header, .modal-footer { display: none !important; }
  .bao-cao-body { overflow: visible !important; padding: 0 !important; }
  .bc-bang { page-break-inside: auto; }
  .bc-bang tr { page-break-inside: avoid; }
}

/* ---------- Tìm nhanh (Ctrl/Cmd + K) ---------- */
/* Neo lệch lên trên (không canh giữa) vì danh sách kết quả dài ngắn khác
   nhau — canh giữa sẽ làm ô nhập nhảy lên nhảy xuống mỗi lần gõ. */
.tim-nhanh-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 20px 20px;
}
.tim-nhanh {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.tim-nhanh-o { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.tim-nhanh-ico { font-size: 18.5px; line-height: 1; }
.tim-nhanh-o input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  background: transparent;
  color: var(--text);
  min-width: 0;
}
.tim-nhanh-esc {
  font-size: 13px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: inherit;
}
.tim-nhanh-kq { overflow-y: auto; padding: 6px 0 8px; }
.tn-nhom { margin: 8px 0 4px; padding: 0 16px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.tn-dong {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
}
.tn-dong:hover, .tn-dong.dang-chon { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.tn-dong .avatar { width: 30px; height: 30px; font-size: 13px; }
.tn-ico { width: 30px; text-align: center; font-size: 17.5px; flex: none; }
.tn-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.tn-text strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-text span { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-dong .badge { flex: none; }
.tn-trong { padding: 22px 16px; text-align: center; font-size: 14.5px; color: var(--text-muted); margin: 0; }

/* ---------- Trang hồ sơ nhân sự ---------- */
.profile-body { overflow-y: auto; }
.hs-dau { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.hs-avatar { width: 56px; height: 56px; font-size: 19.5px; }
.hs-ten { min-width: 0; flex: 1; }
.hs-ten h3 { margin: 0; font-size: 21px; }
.hs-ten p { margin: 3px 0 0; font-size: 14.5px; color: var(--text-muted); }
.hs-badge { flex: none; }

.hs-canh-bao-hang { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px 0; }
.hs-canh-bao {
  font-size: 13.5px;
  font-weight: 600;
  background: #fff4e0;
  color: #8a5a08;
  border-radius: 999px;
  padding: 4px 12px;
}

/* Dải chỉ số chính — ngăn nhau bằng đường kẻ mảnh thay vì khung riêng. */
.hs-so-hang {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 12px;
}
.hs-o { background: var(--surface); padding: 13px 16px; }
.hs-nhan { margin: 0 0 3px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.hs-so { margin: 0; font-size: 16px; font-weight: 600; }

.hs-timeline { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.hs-truc { display: flex; align-items: flex-start; margin-top: 10px; }
.hs-moc { flex: none; text-align: center; min-width: 78px; display: flex; flex-direction: column; gap: 2px; }
.hs-moc strong { font-size: 13.5px; font-weight: 600; }
.hs-moc span:last-child { font-size: 13.5px; color: var(--text-muted); }
.hs-cham { width: 10px; height: 10px; border-radius: 50%; margin: 0 auto 6px; }
.hs-noi { flex: 1; height: 2px; background: var(--border); margin-top: 4px; min-width: 16px; }

.hs-chi-tiet { padding: 8px 0 4px; }
.hs-nhom { border-bottom: 1px solid var(--border); }
.hs-nhom summary {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hs-nhom summary::-webkit-details-marker { display: none; }
.hs-nhom summary::after { content: '⌄'; font-size: 17.5px; color: var(--text-muted); line-height: 1; }
.hs-nhom[open] summary::after { content: '⌃'; }
.hs-nhom summary:hover { background: #fafafb; }
/* Nhãn nằm TRÊN, giá trị nằm DƯỚI — không xếp cùng một dòng. Xếp cùng dòng
   thì nhãn dài ngắn khác nhau làm giá trị so le mỗi dòng một chỗ, và giá trị
   dài (địa chỉ) tràn đè lên nhãn. Cách này luôn thẳng hàng, dài mấy cũng
   xuống dòng gọn trong ô của nó. */
.hs-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 24px;
  padding: 6px 24px 20px;
}
.hs-dong { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hs-dong span { font-size: 13.5px; color: var(--text-muted); line-height: 1.4; }
.hs-dong strong {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .hs-truc { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hs-noi { display: none; }
  .hs-moc { text-align: left; min-width: 0; }
  .hs-cham { margin: 0 0 4px; }
}

/* ---------- Sổ tay sử dụng ---------- */
.guide-body { display: grid; grid-template-columns: 232px 1fr; min-height: 0; flex: 1; }
.guide-nav {
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  background: #fafafa;
}
.guide-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.guide-nav-item:hover { background: #f0f0f2; }
.guide-nav-item.active { background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary-dark); }
.guide-nav-icon { font-size: 17.5px; line-height: 1; }

.guide-content { padding: 0 26px 28px; overflow-y: auto; font-size: 15px; line-height: 1.65; color: var(--text); }

/* Đầu mỗi mục: icon lớn trong vòng tròn + tên mục + 1 dòng mô tả ngắn. */
.guide-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.guide-hero-ico {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 26.5px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.guide-hero h3 { margin: 0; font-size: 22px; }
.guide-hero p { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }

.guide-content h4 {
  margin: 24px 0 8px;
  font-size: 16px;
  color: var(--primary-dark);
}
/* Tiêu đề con trong sổ tay. Trước đây h5 CHỈ được tạo kiểu bên trong .card
   nên h5 đứng ngoài thẻ trơ trọi, nhìn như một dòng chữ đậm bình thường. */
.guide-content h5 {
  margin: 16px 0 6px;
  font-size: 15px;
  color: var(--text);
  padding-left: 9px;
  border-left: 3px solid color-mix(in srgb, var(--primary) 45%, #fff);
}

.guide-content h4.hl {
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 13%, #fff), transparent);
  border-left: 3px solid var(--primary);
  border-radius: 0 6px 6px 0;
  padding: 7px 12px;
  margin-left: -12px;
}
.guide-content p { margin: 0 0 10px; }
.guide-content code {
  background: #f0f0f2;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 14px;
}

/* Nhắc tới 1 nút trên giao diện — trông giống nút thật để dễ nhận ra. */
.guide-content .ui {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
  white-space: nowrap;
}

/* Gạch đầu dòng có mũi tên thay cho chấm tròn mặc định. */
.guide-content ul.ticks { list-style: none; margin: 0 0 12px; padding: 0; }
.guide-content ul.ticks li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.guide-content ul.ticks li::before {
  content: '▸';
  position: absolute;
  left: 4px;
  top: -1px;
  color: var(--primary);
  font-weight: 700;
}

/* Các bước đánh số: mỗi bước là 1 thẻ có số tròn màu đỏ bên trái. */
.guide-content ol.steps { list-style: none; counter-reset: b; margin: 0 0 12px; padding: 0; }
.guide-content ol.steps li {
  counter-increment: b;
  position: relative;
  padding: 9px 12px 9px 42px;
  margin-bottom: 7px;
  background: #fafafb;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.guide-content ol.steps li::before {
  content: counter(b);
  position: absolute;
  left: 11px;
  top: 9px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Lưới thẻ nhỏ cho các mục ngang hàng nhau. */
.guide-content .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}
.guide-content .card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  background: var(--surface);
}
.guide-content .card-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 18.5px;
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 11%, #fff);
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.guide-content .card h5 { margin: 0 0 4px; font-size: 15px; }
.guide-content .card p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.55; }

/* Khung ghi chú: tip (mặc định) / warn (cảnh báo) / star (nên làm ngay). */
.guide-content .cal {
  position: relative;
  border-left: 3px solid #9aa3af;
  border-radius: 0 8px 8px 0;
  padding: 10px 13px 10px 38px;
  margin: 10px 0 13px;
  background: #f6f7f9;
  font-size: 14.5px;
}
.guide-content .cal::before {
  content: '💡';
  position: absolute;
  left: 12px;
  top: 9px;
  font-size: 16px;
}
.guide-content .cal.warn { border-left-color: var(--primary); background: #fdeaea; }
.guide-content .cal.warn::before { content: '⚠️'; }
.guide-content .cal.star { border-left-color: #d99b00; background: #fff8e6; }
.guide-content .cal.star::before { content: '⭐'; }

@media (max-width: 720px) {
  .guide-body { grid-template-columns: 1fr; }
  .guide-nav { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .guide-nav-item { white-space: nowrap; }
  .guide-content { padding: 0 16px 22px; }
}

/* ---------- Quản trị hệ thống: menu trái / nội dung phải ----------
   Dùng lại đúng mẫu của Sổ tay sử dụng (.guide-body) thay vì chế mẫu thứ hai.
   Sáu mục trước đây xếp dọc thành một trang rất dài phải cuộn mới hết — mà
   Bảo trì và Sao lưu nằm cuối lại là hai thứ ít khi nhớ nhất. */
.ad-body { display: grid; grid-template-columns: 250px 1fr; min-height: 0; flex: 1; }
.ad-nav {
  border-right: 1px solid var(--border); background: #fafafa;
  padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto;
}
.ad-nav-item {
  display: grid; grid-template-columns: 22px 1fr 8px; align-items: center; gap: 10px;
  text-align: left; background: none; border: none; border-radius: 9px;
  padding: 9px 11px; font-family: inherit; cursor: pointer; color: var(--text-muted);
}
.ad-nav-item:hover { background: #f0f0f2; }
.ad-nav-item.active { background: color-mix(in srgb, var(--primary) 12%, #fff); }
.ad-nav-item:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: -2px; }
.ad-nav-icon { font-size: 18.5px; line-height: 1; text-align: center; }
.ad-nav-chu { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ad-nav-chu strong { font-size: 14.5px; font-weight: 600; color: var(--text); }
.ad-nav-chu em { font-style: normal; font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.ad-nav-item.active .ad-nav-chu strong { color: var(--primary-dark); }

/* Chấm báo: mục nào đang cần để mắt tới. Bày menu trái nghĩa là năm trong sáu
   mục bị giấu đi — không có chấm thì "chưa sao lưu lần nào" nằm im không ai
   thấy. Màu lấy thẳng từ chính ô trạng thái của mục đó nên không thể lệch. */
.ad-cham { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.ad-cham.can { background: #b8352a; box-shadow: 0 0 0 3px rgba(184, 53, 42, .16); }
.ad-cham.nhac { background: #b07407; box-shadow: 0 0 0 3px rgba(176, 116, 7, .16); }

.ad-noi-dung { overflow-y: auto; padding: 20px 24px 24px; }
.ad-pane { display: none; flex-direction: column; gap: 12px; }
.ad-pane.active { display: flex; }
.ad-pane-dau { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ad-pane-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-size: 21px; background: color-mix(in srgb, var(--primary) 10%, #fff);
}
.ad-pane-dau h3 { margin: 0; font-size: 17.5px; color: var(--text); }
.ad-pane-dau p { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }
.ad-trang-thai-hang { margin: 0; }
.ad-hang-nut { display: flex; gap: 10px; flex-wrap: wrap; }

/* Bốn lối vào của mục Tài khoản: thẻ bấm được, có icon và một dòng nói rõ
   bấm vào sẽ thấy gì — thay cho bốn cái nút chữ trơn giống hệt nhau. */
.ad-the-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ad-the {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 13px 15px; border-radius: 11px; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border);
  /* Nút KHÔNG thừa kế màu chữ — bỏ trống là ăn `buttontext` của trình
     duyệt. Hôm nay trùng màu nên không ai thấy, mai đổi nền là icon vẽ
     tàng hình, đúng cái vừa dính với .topbar-icon-btn. */
  color: var(--text);
}
.ad-the:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 4%, #fff); }
.ad-the:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 1px; }
.ad-the-icon {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-size: 18.5px; background: var(--bg);
}
.ad-the span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-the strong { font-size: 14.5px; font-weight: 600; color: var(--text); }
.ad-the em { font-style: normal; font-size: 13.5px; color: var(--text-muted); line-height: 1.35; }

@media (max-width: 720px) {
  /* Màn hẹp: menu nằm ngang thành dải cuộn, nội dung xuống dưới. Giữ hai cột
     250px thì nội dung chỉ còn một mẩu. */
  .ad-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ad-nav { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  /* flex: none là bắt buộc — không có nó thì các nút bị co lại vừa bề ngang
     màn hình và chữ đè lên nhau, dù đã nowrap. */
  .ad-nav-item { flex: none; grid-template-columns: 22px auto 8px; white-space: nowrap; }
  .ad-nav-chu em { display: none; }
  .ad-noi-dung { padding: 16px 16px 20px; }
}

/* Mở chồng lên bảng "Quản lý tài khoản" (cũng là modal-overlay z-index 50)
   nên phải cao hơn, không thì bị khuất phía sau. */
#reset-pw-overlay { z-index: 60; }
/* Thùng rác */
.thung-rac-body { padding: 18px 24px 20px; overflow-y: auto; }
.tr-dan { margin: 0 0 14px; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.tr-ds { display: flex; flex-direction: column; gap: 8px; }
.tr-dong {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px;
}
.tr-ten { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.tr-ten strong { font-size: 15px; }
.tr-ten span { font-size: 13.5px; color: var(--text-muted); }
.tr-ten .tr-meta { font-size: 13.5px; }
.tr-nut { flex: none; white-space: nowrap; }
.tr-trong { padding: 30px 0; text-align: center; color: var(--text-muted); font-size: 14.5px; margin: 0; }

/* Kết quả nhập Excel — tách rõ "sai phải sửa" với "đã tự chỉnh". */
.ir-khoi { border-radius: 0 8px 8px 0; padding: 12px 14px; margin-top: 14px; }
.ir-khoi.ir-loi { background: #fdeaea; border-left: 3px solid var(--primary); }
.ir-khoi.ir-sua { background: #e6f1fb; border-left: 3px solid #2563eb; }
.ir-tieu-de { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; }
.ir-khoi.ir-loi .ir-tieu-de { color: #a82820; }
.ir-khoi.ir-sua .ir-tieu-de { color: #185fa5; }
.ir-ds { margin: 0; padding-left: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 7px; }
.ir-hop { color: var(--text-muted); font-size: 13.5px; }
.ir-ghi-chu { margin: 9px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* Cảnh báo 2 người cùng sửa — mở chồng lên form Sửa nên phải cao hơn nó. */
#xung-dot-overlay { z-index: 60; }
.xung-dot-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.xung-dot-body p { margin: 0; font-size: 15px; }
.xd-nhan { font-size: 13.5px !important; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px !important; }
.xd-ds { margin: 0; padding-left: 20px; font-size: 14.5px; display: flex; flex-direction: column; gap: 4px; }
.xd-canh-bao {
  background: #fdeaea; border-left: 3px solid var(--primary);
  border-radius: 0 6px 6px 0; padding: 10px 12px; font-size: 14.5px; color: #a82820;
}
.xd-on {
  background: #e6f6ec; border-left: 3px solid #1a7f37;
  border-radius: 0 6px 6px 0; padding: 10px 12px; font-size: 14.5px; color: #16693b;
}

.reset-pw-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.reset-pw-body .pw-label { font-size: 13.5px; color: var(--text-muted); font-weight: 600; margin-top: 4px; }
.pw-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f6f7f9;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.pw-box code {
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
  user-select: all;
  word-break: break-all;
}
/* Nhắc trong popup đổi mật khẩu: nói trước sẽ bị đăng xuất, để không ai
   bấm Lưu xong rồi ngơ ngác vì bị đưa ra màn đăng nhập. */
.cp-nhac {
  margin: 0; padding: 9px 12px; font-size: 13.5px; line-height: 1.5;
  color: #3f4653; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
}
.cal-warn-inline {
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  background: #fdeaea;
  padding: 10px 13px;
  font-size: 14px;
}

.restore-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.restore-body label { font-size: 13.5px; color: var(--text-muted); font-weight: 600; margin-top: 6px; }
.restore-body input[type="text"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}
.restore-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; font-size: 14px; }
.restore-log li { padding: 6px 10px; border-radius: 6px; background: #fafafa; }
.restore-log li.err { background: #fdeaea; color: #c0392b; }
.restore-log li.skip { background: #f4f5f7; color: var(--text-muted); }

.knnn-stats-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
#knnn-stats-table th:not(:first-child), #knnn-stats-table td:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }
#knnn-stats-table th:first-child, #knnn-stats-table td:first-child { position: sticky; left: 0; background: var(--surface); }
#knnn-stats-table tfoot td { border-top: 2px solid var(--border); background: #fafafa; padding: 12px 14px; }

#employee-form { overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.field-group { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.field-group legend { font-weight: 700; font-size: 14px; color: var(--primary-dark); padding: 0 6px; }
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.field input, .field select, .field textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}
.field textarea { resize: vertical; min-height: 42px; }
.field.full { grid-column: 1 / -1; }
/* Cảnh báo hiện ngay dưới ô đang gõ — thấy liền chứ không đợi bấm Lưu. */
.field-canh-bao {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #c0392b;
  background: #fdeaea;
  border-left: 3px solid var(--primary);
  border-radius: 0 5px 5px 0;
  padding: 6px 9px;
}
/* Checkbox (VD KNNN) không nhận padding/border/width như input chữ —
   để nguyên kích thước hộp tick chuẩn, không bị kéo giãn thành khung to. */
.field input[type="checkbox"] { padding: 0; border: none; width: 18px; height: 18px; align-self: flex-start; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}
.modal-small .modal-footer { border-top: none; padding: 20px 0 0; }
.form-error { color: #c0392b; font-size: 14px; margin-right: auto; }

#user-form, #change-password-form { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
/* Nhắc mật khẩu sắp hết hạn — đặt đầu popup thông báo hằng ngày. */
.notice-section.notice-mk {
  border-left: 3px solid var(--primary);
  background: #fdeaea;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
}
.notice-section.notice-mk h3 { margin-top: 0; }
.notice-section.notice-mk p { margin: 6px 0 0; font-size: 14.5px; }
.hint { font-weight: 400; color: var(--text-muted); }
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 160px;
  overflow-y: auto;
}
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}

.users-body { padding: 20px 24px; overflow-y: auto; }
.users-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
#users-table { width: 100%; border-collapse: collapse; font-size: 15px; }
#users-table th {
  text-align: left;
  padding: 10px 12px;
  background: #fafafa;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
}
#users-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.role-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  background: #eef0f3;
  color: var(--text-muted);
}
.role-badge.admin { background: #fdeaea; color: var(--primary-dark); }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1c1e21;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  z-index: 100;
}
.toast.error { background: #c0392b; }

.daily-quote-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 20, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
#fireworks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.daily-quote-card {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: calc(100% - 48px);
  background: rgba(28, 30, 33, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  animation: daily-quote-in 0.5s ease;
}
.daily-quote-text {
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 20px;
}
@keyframes daily-quote-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Tính lương (BO / BYD / OnPoint) ---------- */
.payroll-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.payroll-toolbar label { font-size: 14px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.payroll-toolbar input[type="month"] {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
}
.payroll-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.payroll-config .field label { font-size: 13.5px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.payroll-config .field input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.payroll-help { font-size: 13.5px; color: var(--text-muted); margin: 0 0 12px; }

.payroll-table-wrap { overflow-x: auto; }
.payroll-table { min-width: 2400px; font-size: 13.5px; }
.payroll-table thead th { padding: 6px 6px; white-space: nowrap; }
.payroll-table tbody td { padding: 4px 4px; vertical-align: middle; }
.payroll-day-header { cursor: pointer; text-align: center; user-select: none; }
.payroll-day-header:hover { background: #f0f0f0; }
.payroll-day-header.is-le { background: #fdeaea; color: #c0392b; }
.payroll-input {
  width: 62px;
  padding: 4px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13.5px;
  text-align: center;
}
.payroll-input.payroll-ma-ca { width: 46px; }
.payroll-input.payroll-diem-kpi,
.payroll-input.payroll-thuong-kpi,
.payroll-input.payroll-ho-tro-khac,
.payroll-input.payroll-giam-tru-khac,
.payroll-input.payroll-phep-con { width: 74px; }
.payroll-cell { text-align: right; white-space: nowrap; }
.payroll-tong-thu-nhap { color: var(--primary-dark); }

.payroll-roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.payroll-roster-row:last-child { border-bottom: none; }
.payroll-roster-results { max-height: 220px; overflow-y: auto; margin-bottom: 12px; }
#payroll-roster-search { width: 100%; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }

/* ---------- Phân bổ chi phí ---------- */
/* Times New Roman xuyên suốt khu vực này để khớp với font dùng trong
   file Excel xuất ra (CP_FONT trong app.js) — web và Excel phải nhìn
   giống nhau, không chỉ số liệu mà cả kiểu chữ. */
#view-phan-bo-chi-phi { font-family: "Times New Roman", Times, serif; }
.btn-sm { padding: 6px 12px; font-size: 14px; }

.cp-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px;
  width: fit-content;
}
.cp-subtab-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cp-subtab-btn:hover { background: var(--bg); }
.cp-subtab-btn.active { background: var(--primary); color: #fff; }

.cp-panel.hidden { display: none; }

.cp-branch-block { margin-bottom: 32px; }
.cp-branch-title {
  font-size: 18.5px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}
.cp-branch-stats { margin-bottom: 16px; }

/* Thanh phân bổ diện tích tổng quan — trực quan hoá 3 phần: đang dùng /
   trả về Cty / dùng chung, để nhìn 1 lần biết ngay tình hình chi nhánh. */
.cp-breakdown { margin-bottom: 18px; }
.cp-breakdown-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow);
}
.cp-breakdown-seg { height: 100%; transition: width 0.2s; min-width: 0; }
.cp-seg-dung { background: #2ecc71; }
.cp-seg-tra { background: #b8bec9; }
.cp-seg-chung { background: #3498db; }
.cp-seg-thue { background: #9b59b6; }
.cp-seg-phanbo { background: #f39c12; }
.cp-breakdown-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.cp-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.cp-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.cp-breakdown-compact { margin: 2px 0 14px; }
.cp-breakdown-compact .cp-breakdown-bar { height: 8px; }
.cp-breakdown-compact .cp-breakdown-legend { font-size: 13px; gap: 12px; margin-top: 5px; }

.cp-floor-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-floor-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cp-floor-card[open] { padding-bottom: 4px; }
.cp-floor-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.cp-floor-header::-webkit-details-marker { display: none; }
.cp-floor-header::before {
  content: '▸';
  color: var(--text-muted);
  font-size: 13.5px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.cp-floor-card[open] .cp-floor-header::before { transform: rotate(90deg); }
.cp-floor-header:hover { background: var(--bg); }
.cp-floor-header h4 { margin: 0; font-size: 16px; min-width: 70px; }
.cp-floor-summary-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1; }
.cp-floor-summary {
  font-size: 13.5px;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cp-floor-summary strong { color: var(--text); }

.cp-occupancy { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.cp-occupancy-bar { width: 90px; height: 8px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.cp-occupancy-fill { height: 100%; border-radius: 6px; transition: width 0.15s; }
.cp-occupancy-pct { font-size: 13.5px; font-weight: 700; color: var(--text-muted); min-width: 32px; }

.cp-floor-body { padding: 4px 18px 16px; }
.cp-phong-table { min-width: 1080px; font-size: 14px; }
.cp-phong-table thead th { padding: 8px 10px; font-size: 13px; }
.cp-phong-table tbody td { padding: 6px 10px; }
/* Tên phòng giờ chỉ chứa mã ngắn (P.102, Bãi xe...) — Dự án chứa tên
   khách thuê/khu vực dài hơn (KV lễ tân sảnh tiếp khách, Allianz (dự
   kiến)...) nên cần rộng hơn hẳn. */
.cp-phong-table th:nth-child(3), .cp-phong-table td:nth-child(3) { min-width: 90px; }
.cp-phong-table th:nth-child(4), .cp-phong-table td:nth-child(4) { min-width: 230px; }
.cp-phong-table th:nth-child(10), .cp-phong-table td:nth-child(10) { min-width: 200px; }
.cp-floor-card .cp-btn-add-phong { margin-top: 10px; }

.cp-status-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.cp-status-dung { background: color-mix(in srgb, #2ecc71 15%, var(--surface)); color: #146134; }
.cp-status-trong { background: color-mix(in srgb, #f1c40f 20%, var(--surface)); color: #6b5606; }
.cp-status-tra { background: var(--bg); color: var(--text-muted); }
.cp-status-thue { background: color-mix(in srgb, #9b59b6 15%, var(--surface)); color: #8e44ad; margin-left: 4px; }

.cp-input {
  width: 100%;
  min-width: 60px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.cp-input:hover { background: var(--bg); }
.cp-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}
.cp-input.cp-num { text-align: right; }
.cp-input:disabled {
  color: var(--text);
  background: transparent;
  cursor: default;
  opacity: 1;
}
.cp-input:disabled:hover { background: transparent; }
.cp-lock-hint { margin: -4px 0 12px; }

/* Nút mở modal sửa riêng từng dòng — tránh gõ nhầm sang ô/dòng khác. */
.cp-btn-row-edit {
  /* Nút KHÔNG thừa kế màu chữ — phải khai, không thì icon vẽ ăn màu
     mặc định của trình duyệt. opacity .55 kéo xuống 2,50:1 —
     dưới chuẩn đồ hoạ 3:1, nên nâng lên .75 = 3,86:1. */
  color: var(--text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
}
.cp-btn-row-edit:hover { opacity: 1; background: var(--bg); }

.cp-empty-row { text-align: center; color: var(--text-muted); padding: 24px !important; }

#cp-da-table .th-sub { font-weight: 400; text-transform: none; font-size: 13px; display: block; color: var(--text-muted); white-space: normal; }
#cp-da-table td { white-space: nowrap; }
/* Tiêu đề dùng NGUYÊN VĂN chữ file gốc (đồng bộ với file xuất Excel,
   không rút gọn) — cho phép xuống dòng để không tràn đè cột bên cạnh,
   mỗi cột có width riêng đủ chỗ cho chữ dài nhất của nó. */
#cp-da-table th { white-space: normal; vertical-align: bottom; }
/* white-space:nowrap thôi chưa đủ vì ô là <input> — input không tự giãn
   theo độ dài giá trị như chữ thường, phải ép min-width riêng mới hết
   bị cắt (VD "HCNS: chính sách cđ 2...", "TTVH- TDUNG"). */
#cp-da-table { min-width: 1380px; }
/* Độ rộng cột đặt qua <colgroup> thay vì :nth-child — :nth-child đếm
   theo SỐ Ô THẬT trong từng dòng, mà các dòng "Tổng cộng"/"Total"/khối
   diện tích dùng colspan để gộp ô nhãn, nên số ô thật ít hơn 12 và mọi
   :nth-child(n) sẽ trỏ NHẦM sang cột khác ở những dòng đó (đây chính là
   lỗi khiến "445" hiển thị lệch cột so với "65" của dòng Vina). Dùng
   colgroup thì độ rộng luôn đúng theo cột hiển thị thật, không phụ
   thuộc số ô trong từng dòng. */
/* <col> chỉ nhận "width" (không nhận min-width/max-width theo chuẩn
   CSS bảng), nhưng ở table-layout mặc định là "auto" nên cột vẫn tự
   giãn rộng hơn nếu nội dung dài hơn — không bị cắt chữ. */
.cp-da-col-bophan { width: 230px; }
.cp-da-col-donvi { width: 120px; }
.cp-da-col-tongns { width: 150px; }
.cp-da-col-tyled { width: 70px; }
.cp-da-col-nstaicn { width: 150px; }
.cp-da-col-tylef { width: 170px; }
.cp-da-col-tyleg { width: 170px; }
.cp-da-col-seats { width: 70px; }
.cp-da-col-dientich { width: 100px; }
#cp-da-table th:nth-child(n+4) { text-align: right; }
.cp-ratio-cell { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Phân bổ chi phí theo file ---------- */
.cp-cf-inputs {
  display: flex;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.cp-cf-inputs .field { flex: 1; }
#cp-cf-table { min-width: 2100px; }
#cp-cf-table th { white-space: normal; vertical-align: bottom; }
#cp-cf-table td { white-space: nowrap; }
#cp-cf-table th:nth-child(n+3) { text-align: right; }
.cp-cf-col-bophan { width: 220px; }
.cp-cf-col-donvi { width: 110px; }
.cp-cf-col-tongns { width: 150px; }
.cp-cf-col-tyled { width: 70px; }
.cp-cf-col-nstaicn { width: 150px; }
.cp-cf-col-tylef { width: 170px; }
.cp-cf-col-tyleg { width: 170px; }
.cp-cf-col-seats { width: 70px; }
.cp-cf-col-dientich { width: 90px; }
.cp-cf-col-money { width: 140px; }
.cp-cf-col-total { width: 150px; }
.cp-cf-col-ghichu { width: 160px; }
.cp-cf-total { color: #1e7a34; font-size: 15px; }
.cp-loai-g-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 6px;
  padding: 2px 8px;
}
.cp-btn-adjust-da { font-size: 16px; }
.cp-tfoot-row td {
  font-weight: 700;
  background: #fafafa;
  border-top: 2px solid var(--border);
  text-align: right;
}
/* Chỉ ô nhãn (luôn là ô đầu tiên, dùng colspan gộp 3 cột Bộ phận/Đơn vị
   Misa) mới căn trái — trước đây còn ép luôn ô thứ 2 căn trái do viết
   từ hồi nhãn chưa dùng colspan, khiến ô số liệu đầu tiên (Tổng NS) bị
   lệch trái so với các ô số liệu còn lại. */
.cp-tfoot-row td:first-child { text-align: left; }
.cp-tfoot-row-sub td { background: transparent; border-top: 1px dashed var(--border); font-size: 13.5px; }

.cp-group-header td {
  padding: 14px 10px 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  border-top: 2px dashed var(--border);
}
.cp-group-sub { font-weight: 400; font-size: 13px; color: var(--text-muted); }

/* Khối "LƯƠNG KHỐI GIÁN TIẾP / CHI PHÍ CHUNG" đầu file gốc — nằm ngay
   trên bảng, giống hệt số liệu trong file xuất Excel. */
.cp-da-box {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.cp-da-box-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}
.cp-da-box-cell:last-child { border-right: none; }
.cp-da-box-label1 { flex: 2.2; }
.cp-da-box-label2 { flex: 1.3; }
.cp-da-box-value { flex: 0.8; color: #e74c3c; font-size: 17.5px; }

.cp-da-info-label { text-align: right; font-style: italic; font-weight: 700; }
.cp-da-info-value { text-align: center; font-weight: 700; color: #e74c3c; }

/* min-width:0 là bắt buộc: mặc định ô con trong flex KHÔNG co nhỏ hơn nội
   dung của nó, mà <input> có bề rộng tự nhiên ~180px — ba ô cạnh nhau là
   tràn ra khỏi cửa sổ hẹp. flex-wrap để màn nhỏ thì xuống dòng thay vì ép. */
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 120px; min-width: 0; }
.field-row .field input,
.field-row .field select { width: 100%; }
.checkbox-inline {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.checkbox-inline input { margin-top: 3px; }

/* ---- Tài liệu đính kèm trong hồ sơ ---- */
.btn-nho { padding: 4px 10px; font-size: 13.5px; }

.tl-khung { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.tl-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tl-them { display: flex; align-items: center; gap: 6px; }
.tl-select {
  padding: 4px 8px; font-size: 13.5px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text); max-width: 170px;
}

.tl-ds { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tl-dong {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface);
}
.tl-dong.tl-dang-hoi { border-color: #d0342c; background: #fff5f5; }
.tl-icon { font-size: 22px; flex: none; line-height: 1; }
.tl-giua { flex: 1; min-width: 0; }
.tl-loai { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tl-ten { margin: 1px 0 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.tl-meta { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); }
.tl-nut { display: flex; align-items: center; gap: 5px; flex: none; }
.tl-xoa { color: var(--text-muted); }
.tl-hoi { font-size: 13.5px; font-weight: 600; color: #d0342c; margin-right: 2px; }

.tl-trong { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }
.tl-ghi-chu { margin: 8px 0 0; font-size: 13.5px; color: var(--text-muted); }
.tl-trang-thai { margin: 8px 0 0; font-size: 13.5px; color: var(--text-muted); }
.tl-trang-thai:empty { margin: 0; }
.tl-trang-thai.tl-loi { color: #d0342c; font-weight: 600; }

@media (max-width: 560px) {
  .tl-dong { flex-wrap: wrap; }
  .tl-nut { width: 100%; justify-content: flex-end; }
  .tl-select { max-width: none; flex: 1; }
}

/* ---- Nhận diện người từng làm ở đây (gõ CCCD) ---- */
/* Mặc định .field-canh-bao là tông đỏ (chặn). Hai lớp dưới đổi sang tông
   nhẹ hơn cho trường hợp chỉ báo cho biết, không phải lỗi. */
/* Đặt sau .field-canh-bao trong file nên thắng, không cần mượn id để tăng
   độ ưu tiên — bớt một chỗ dễ vỡ nếu sau này đổi id. */
.field-canh-bao.nd-cu  { color: #1a5a8a; background: #eaf4fb; border-left-color: #2f7cb8; }
.field-canh-bao.nd-rac { color: #7a5b12; background: #fdf5e3; border-left-color: #c99a2e; }

.nd-dau { margin: 0 0 7px; }
.nd-the {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 6px; padding: 7px 9px; margin-top: 6px;
}
.nd-ten { margin: 0; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.nd-tt { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75; }
.nd-phu { margin: 2px 0 0; opacity: 0.9; }
.nd-xem {
  margin-top: 5px; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 700; color: inherit;
  text-decoration: underline; cursor: pointer;
}
.nd-xem:hover { opacity: 0.75; }

/* ---- Lịch sử làm việc tại đây (người quay lại nhiều lần) ---- */
.ls-khung { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.ls-tom { margin: 6px 0 10px; font-size: 14.5px; }
.ls-lan {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--border);
  border-radius: 8px; margin-top: 6px; background: var(--surface);
}
.ls-lan.ls-nay { border-color: #2f7cb8; background: #f2f8fd; }
.ls-stt {
  flex: none; font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--text-muted);
  background: var(--bg); border-radius: 999px; padding: 3px 9px; margin-top: 1px;
}
.ls-lan.ls-nay .ls-stt { background: #256390; color: #fff; }
.ls-noi { flex: 1; min-width: 0; }
.ls-khoang { margin: 0; font-size: 14.5px; font-weight: 600; }
.ls-phu { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); }
.ls-phu.ls-thieu { color: #8a5a08; }
.ls-xem {
  flex: none; padding: 0; border: 0; background: none; font: inherit;
  font-size: 13.5px; font-weight: 700; color: var(--primary);
  text-decoration: underline; cursor: pointer; margin-top: 1px;
}
.ls-xem:hover { color: var(--primary-dark); }

/* Huy hiệu ↩N cạnh tên ở HR MASTER */
.ls-huy-hieu {
  display: inline-block; margin-left: 5px; padding: 1px 6px;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #1a5a8a; background: #eaf4fb; border: 1px solid #bcd9ef;
  border-radius: 999px; vertical-align: middle; cursor: default;
}
.nd-stt {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; background: rgba(0, 0, 0, 0.07);
  border-radius: 999px; padding: 2px 7px; margin-right: 2px;
}

/* Chất lượng dữ liệu trong bảng Quản trị */
.cl-hop { border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; font-size: 14px; }
.cl-hop.cl-tot { border-color: #b6ddc4; background: #eef8f1; }
.cl-hop.cl-vua { border-color: #e6d4a6; background: #fdf7ea; }
.cl-hop.cl-kem { border-color: #efc0bb; background: #fdefee; }
.cl-so { margin: 0; font-size: 29px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cl-hop.cl-tot .cl-so { color: #1a7f37; }
.cl-hop.cl-vua .cl-so { color: #8a5c0f; }
.cl-hop.cl-kem .cl-so { color: #c0392b; }
.cl-chu { margin: 4px 0 0; }
.cl-ds { margin: 4px 0 0; padding-left: 18px; }
.cl-ds li { margin-top: 2px; }
.cl-ten {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700;
  color: inherit; text-decoration: underline; cursor: pointer;
}
.cl-ten:hover { opacity: 0.72; }
.cl-phu { opacity: 0.8; font-size: 13.5px; }
.cl-con { list-style: none; margin-left: -18px; opacity: 0.8; font-style: italic; }

/* ---- Lịch sử thay đổi trong hồ sơ ---- */
.nk-khung { padding: 16px 24px; border-top: 1px solid var(--border); }
.nk-ds { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nk-dong {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
}
.nk-noi { flex: 1; min-width: 0; }
.nk-meta { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.nk-chi-tiet { margin: 3px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.nk-trong, .nk-them { margin: 8px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* ---- Dự báo quân số cuối tháng ---- */
.db-khung {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 18px; margin-bottom: 18px;
}
.db-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.db-moc { font-size: 13.5px; color: var(--text-muted); }
/* Rộng thêm so với 420px cũ: mỗi nhãn nay có một dòng chú thích nhỏ bên
   dưới, giữ nguyên bề ngang thì nhãn xuống dòng lem nhem. */
.db-phep { margin-top: 10px; max-width: 520px; }
.db-hang {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 5px 0; font-size: 14.5px;
}
.db-nhan { color: var(--text-muted); }
.db-so { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
.db-hang.db-tru .db-so { color: #c0392b; }
.db-hang.db-ket {
  border-top: 2px solid var(--text); margin-top: 4px; padding-top: 8px;
}
.db-hang.db-ket .db-nhan { color: var(--text); font-weight: 600; }
.db-hang.db-ket .db-so { font-size: 26.5px; }
.db-chenh { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.db-chenh.db-giam { color: #c0392b; }
.db-chenh.db-tang { color: #1a7f37; }

.db-chi-tiet { margin-top: 10px; font-size: 14px; }
.db-chi-tiet summary { cursor: pointer; font-weight: 600; color: var(--primary-dark); }
.db-ds { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.db-ds li {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 6px 10px; background: var(--bg); border-radius: 6px;
}
.db-phu { flex: 1; min-width: 0; color: var(--text-muted); font-size: 13.5px; }
.db-ngay { font-weight: 700; font-variant-numeric: tabular-nums; color: #c0392b; }
.db-luu-y { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--text-muted); }
.db-luu-y li { margin-top: 4px; }
@media (max-width: 560px) {
  /* Tên / ngày trên một hàng, chức danh · dự án xuống hàng dưới — chật quá
     thì ba thứ chen nhau, ngày nghỉ là thông tin quan trọng nhất bị đẩy đi. */
  .db-ds li { justify-content: space-between; }
  .db-phu { order: 3; flex-basis: 100%; }
}
.db-hang.db-cong .db-so { color: #1a7f37; }
.db-chi-tiet.db-vao summary { color: #14683a; }
.db-chi-tiet.db-vao .db-ngay { color: #14683a; }

/* ---- Ghi chú theo dòng thời gian ---- */
.gc-khung { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.gc-them { display: flex; gap: 7px; align-items: flex-start; margin-top: 9px; }
.gc-o {
  flex: 1; min-width: 0; padding: 8px 10px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--border); border-radius: 8px; resize: vertical;
  background: var(--surface); color: var(--text);
}
.gc-o:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.gc-them .btn { flex: none; margin-top: 1px; }
.gc-bao { margin: 6px 0 0; font-size: 13.5px; color: var(--text-muted); }
.gc-bao:empty { margin: 0; }
.gc-bao.gc-loi { color: #c0392b; font-weight: 600; }

.gc-ds { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gc-dong {
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0; padding: 8px 11px; background: var(--surface);
}
.gc-dong.gc-dang-hoi { border-color: #d0342c; border-left-color: #d0342c; background: #fff5f5; }
.gc-dong.gc-cu { border-left-color: var(--border); background: var(--bg); }
.gc-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gc-luc { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-ai { font-size: 13.5px; color: var(--text-muted); flex: 1; min-width: 0; }
.gc-xoa {
  /* Phải khai màu (nút không thừa kế). Và opacity .5 kéo tương phản
     xuống 2,28:1 — dưới chuẩn đồ hoạ 3:1, nên nâng lên .75 = 3,86:1. */
  color: var(--text-muted);
  flex: none; padding: 0 4px; border: 0; background: none;
  font-size: 14px; line-height: 1; cursor: pointer; opacity: 0.75;
}
.gc-xoa:hover { opacity: 1; }
.gc-hoi { font-size: 13.5px; font-weight: 700; color: #d0342c; }
.gc-noi { margin: 4px 0 0; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.gc-trong { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }

@media (max-width: 560px) {
  .gc-them { flex-direction: column; }
  .gc-them .btn { width: 100%; }
  /* Màn hẹp thì dòng gợi ý xuống 2-3 hàng — 2 rows là bị cắt mất chữ. */
  .gc-o { width: 100%; min-height: 76px; }
}

/* ---- Mẫu xuất Excel ---- */
.mx-body { padding: 18px 24px; overflow-y: auto; }
.mx-hang-mau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-hang-mau label { font-size: 14px; font-weight: 600; }
.mx-select {
  flex: 1; min-width: 210px; padding: 7px 10px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.mx-hang-cong-cu {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 16px;
}
.mx-da-chon { margin: 0; font-size: 14px; font-weight: 700; }
.mx-cc-nut { display: flex; gap: 6px; }
.mx-huong-dan { margin: 5px 0 0; font-size: 13.5px; color: var(--text-muted); }

.mx-ds {
  margin-top: 9px; border: 1px solid var(--border); border-radius: 8px;
  max-height: 46vh; overflow-y: auto;
}
.mx-dong {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.mx-dong:last-child { border-bottom: none; }
/* Tên riêng, KHÔNG dùng lại .mx-da-chon của dòng đếm phía trên — trùng tên
   thì dòng đã tick bị ăn nhờ font-weight 700 ngoài ý muốn. */
.mx-dong.mx-chon-roi { background: #f4f9fd; }
.mx-tick { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; cursor: pointer; font-size: 14.5px; }
.mx-tick input { flex: none; width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.mx-stt {
  flex: none; width: 22px; text-align: center; font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #1a5a8a; background: #e6f1f9;
  border-radius: 999px; padding: 1px 0;
}
.mx-stt.mx-trong { background: none; }
.mx-goc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-mui { flex: none; color: var(--text-muted); font-size: 13.5px; }
.mx-ten {
  flex: 1; min-width: 90px; max-width: 260px; padding: 4px 8px;
  font: inherit; font-size: 14px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text);
}
.mx-doi { display: flex; gap: 2px; flex: none; }
.mx-nut {
  width: 24px; height: 24px; padding: 0; line-height: 1;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 13.5px;
}
.mx-nut:hover:not(:disabled) { background: var(--bg); }
.mx-nut:disabled { opacity: 0.3; cursor: default; }

.mx-luu { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.mx-ten-mau {
  flex: 1; min-width: 200px; padding: 7px 10px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.mx-bao { margin: 7px 0 0; font-size: 13.5px; color: #c0392b; font-weight: 600; }
.mx-bao:empty { margin: 0; }

@media (max-width: 620px) {
  /* Màn hẹp: tên cột gốc chiếm trọn hàng đầu và được xuống dòng — trước đây
     nó bị ô tiêu đề và 2 nút ↑↓ ép lại còn "Da…", không đọc ra cột nào. */
  .mx-dong { flex-wrap: wrap; row-gap: 6px; padding: 9px 10px; }
  .mx-tick { flex-basis: 100%; order: 1; }
  .mx-goc { white-space: normal; overflow: visible; text-overflow: clip; }
  .mx-ten { max-width: none; flex: 1; order: 2; }
  .mx-doi { order: 3; }
  .mx-mui { display: none; }
}

/* ---- Rà hồ sơ trùng ---- */
.rt-hop:empty { display: none; }
.rt-hop { margin-top: 10px; font-size: 14px; }
.rt-tom { margin: 0 0 10px; font-size: 14px; }
.rt-hop.rt-sach .rt-tom { color: #1a7f37; font-weight: 600; }

.rt-khoi { border-radius: 8px; padding: 11px 14px; margin-bottom: 9px; border: 1px solid var(--border); }
.rt-khoi.rt-nang { border-color: #efc0bb; background: #fdefee; }
.rt-khoi.rt-vua  { border-color: #e6d4a6; background: #fdf7ea; }
.rt-khoi.rt-nhe  { background: var(--bg); }
.rt-khoi.rt-nhe > summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.rt-tieu-de { margin: 0; font-weight: 700; }
/* Đậm hơn --text-muted một chút: chữ này nằm trên nền đỏ/vàng nhạt nên
   dùng màu xám mặc định thì tụt xuống 4.32, chưa đạt chuẩn AA. */
.rt-giai-thich { margin: 4px 0 0; font-size: 13.5px; color: #565d69; }

.rt-nhom { margin-top: 9px; background: rgba(255, 255, 255, 0.7); border-radius: 6px; padding: 8px 11px; }
.rt-vi { margin: 0 0 5px; font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.rt-ds { margin: 0; padding-left: 17px; }
.rt-ds li { margin-top: 3px; line-height: 1.5; }
.rt-ds li.rt-nghi { opacity: 0.68; }
.rt-tt { font-size: 13.5px; font-weight: 700; }
.rt-thieu { font-size: 13.5px; color: #8a5a08; font-style: italic; }
.cl-ngay-sinh { border-top: 1px solid rgba(0, 0, 0, 0.08); margin-top: 8px; padding-top: 8px; }

/* ---- Dán danh sách từ Excel để lọc ---- */
.dd-dai {
  margin: 12px 0 0; padding: 10px 13px; font-size: 14px;
  border: 1px solid #bcd9ef; background: #eef6fc; border-radius: 8px;
}
.dd-dai.dd-co-thieu { border-color: #e6d4a6; background: #fdf7ea; }
.dd-tom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dd-thay { color: #146c39; font-weight: 600; }
.dd-thieu-so { color: #8a5c0f; font-weight: 700; }
.dd-tom .btn { margin-left: auto; }
.dd-chi-tiet { margin-top: 7px; }
.dd-chi-tiet summary { cursor: pointer; font-weight: 600; color: #8a5c0f; }
.dd-ds { margin: 6px 0 0; line-height: 2; }
.dd-ds code {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 7px; font-size: 13.5px;
}
.dd-ghi-chu { margin: 6px 0 0; font-size: 13.5px; color: #565d69; }

@media (max-width: 560px) {
  .dd-tom .btn { margin-left: 0; width: 100%; }
}

/* ---- So sánh dự án ---- */
.sd-body { padding: 18px 24px; overflow-y: auto; }
.sd-thang { margin: 0 0 12px; font-size: 14px; color: #565d69; }
.sd-cuon { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.sd-bang { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
.sd-bang th, .sd-bang td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.sd-bang thead th {
  background: var(--bg); font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: #565d69; white-space: nowrap;
}
.sd-bang td.sd-p, .sd-bang th.sd-p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-bang tbody tr:hover { background: #fafbfc; }
.sd-bang tfoot td { border-bottom: none; border-top: 2px solid var(--text); background: var(--bg); }
.sd-hang {
  display: inline-block; min-width: 20px; margin-right: 7px; padding: 1px 6px;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #565d69; background: var(--bg); border-radius: 999px; text-align: center;
}
.sd-vao { color: #146c39; }
.sd-mau { color: #565d69; }
.sd-ra { color: #c0392b; }
.sd-ty { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.sd-ty.sd-cao { background: #fdefee; color: #a52d24; }
.sd-ty.sd-vua { background: #fdf7ea; color: #8a5c0f; }
.sd-ty.sd-thap { background: #ecf7f0; color: #146c39; }

.sd-ct { margin-top: 14px; padding: 12px 15px; background: var(--bg); border-radius: 8px; }
.sd-ct-tieu-de { margin: 0 0 5px; font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #565d69; }
.sd-cong-thuc { margin: 0; font-size: 14px; }
.sd-ghi-chu { margin: 6px 0 0; font-size: 13.5px; color: #565d69; }
.sd-trong { margin: 0; font-size: 14px; color: var(--text-muted); }

/* ---- Sửa hàng loạt ---- */
.hl-o-tick { width: 34px; text-align: center; }
.hl-o-tick input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }

.hl-dai {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 9px 14px;
  background: #fff5f5; border: 1px solid #f3c9c5; border-radius: 8px;
}
.hl-so { font-size: 14.5px; }
.hl-dai .btn { margin: 0; }
.hl-dai #btn-hl-bo { margin-left: auto; }

.hl-body { padding: 18px 24px; overflow-y: auto; }
.hl-dem {
  font-size: 14px; font-weight: 800; background: var(--primary); color: #fff;
  border-radius: 999px; padding: 1px 10px; vertical-align: middle;
}
.hl-chon { display: flex; gap: 8px; flex-wrap: wrap; }
.hl-gia-tri-hop { flex: 1; min-width: 200px; display: flex; }
.hl-o {
  flex: 1; min-width: 190px; padding: 8px 10px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.hl-luu-y { margin: 9px 0 0; font-size: 13.5px; color: #565d69; }

.hl-kq { margin-top: 14px; }
.hl-canh-bao {
  margin: 0 0 9px; padding: 8px 11px; font-size: 13.5px;
  background: #fdf7ea; border: 1px solid #e6d4a6; border-radius: 7px; color: #5c4a1e;
}
.hl-tom { margin: 0 0 8px; font-size: 14.5px; }
.hl-ds { max-height: 34vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.hl-dong {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 6px 11px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.hl-dong:last-child { border-bottom: none; }
.hl-ten { flex: 1; min-width: 130px; font-weight: 600; }
.hl-cu { color: #565d69; text-decoration: line-through; }
.hl-mui { color: #565d69; font-size: 13px; }
.hl-moi { font-weight: 700; color: #146c39; }
.hl-con { margin: 7px 0 0; font-size: 13.5px; color: #565d69; }
.hl-bao { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.hl-bao:empty { margin: 0; }

.hl-xong { padding: 11px 14px; border-radius: 8px; background: #ecf7f0; border: 1px solid #b6ddc4; }
.hl-xong.hl-co-loi { background: #fdefee; border-color: #efc0bb; }
.hl-loi { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: #a52d24; }

@media (max-width: 560px) {
  .hl-dai #btn-hl-bo { margin-left: 0; }
  .hl-chon { flex-direction: column; }
}

/* ---- Nhắc sai định dạng (ý 35) ---- */
.field-canh-bao.kd-nhac { color: #7a5b12; background: #fdf7ea; border-left-color: #c99a2e; }
.kd-nhe { opacity: 0.8; font-style: italic; }

/* ---- Hồ sơ còn thiếu gì (ý 20) ---- */
.ht-khung { padding: 14px 24px; border-bottom: 1px solid var(--border); }
.ht-khung.ht-du { background: #f4fbf6; }
.ht-khung.ht-gan-du { background: #fdfaf1; }
.ht-khung.ht-thieu { background: #fdf4f3; }
.ht-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ht-ti { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ht-thanh { height: 5px; border-radius: 999px; background: rgba(0,0,0,0.08); margin-top: 7px; overflow: hidden; }
.ht-thanh span { display: block; height: 100%; background: #2f7cb8; border-radius: 999px; }
.ht-khung.ht-thieu .ht-thanh span { background: #c0392b; }
.ht-khung.ht-gan-du .ht-thanh span { background: #b7791f; }
.ht-ds { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.ht-ds li { margin-top: 3px; }
.ht-chu { margin: 3px 0 0; font-size: 14px; color: #565d69; }

/* ---- Phân tích nhân sự (ý 18, 26, 29, 30) ---- */
.pt-body { padding: 18px 24px; overflow-y: auto; }
.pt-pham-vi {
  margin: 0; padding: 10px 13px; font-size: 13.5px; color: #565d69;
  background: var(--bg); border-radius: 8px;
}
.pt-muc { margin-top: 22px; }
.pt-muc h3 { margin: 0; font-size: 16px; font-weight: 700; }
.pt-phu { margin: 3px 0 0; font-size: 13.5px; color: var(--text-muted); }
.pt-n { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pt-it { font-size: 13px; font-weight: 700; color: #8a5c0f; background: #fdf7ea; border-radius: 999px; padding: 1px 7px; }
.pt-ghi-chu { margin: 9px 0 0; font-size: 13.5px; color: #565d69; }
.pt-canh-bao {
  margin: 9px 0 0; padding: 8px 11px; font-size: 13.5px; color: #5c4a1e;
  background: #fdf7ea; border: 1px solid #e6d4a6; border-radius: 7px;
}
.pt-trong { margin: 0; font-size: 14px; color: var(--text-muted); }

@media (max-width: 620px) {
  .pt-dong { flex-wrap: wrap; }
  .pt-nhan { flex-basis: 100%; }
  .pt-so { flex: 0 0 auto; }
  .pt-cot { height: 120px; }
  .pt-cot-nhan, .pt-cot-so { font-size: 13px; }
}
.tc-body { padding: 18px 24px; overflow-y: auto; }
.tc-ghi-chu { margin: 10px 0 0; font-size: 13.5px; color: #565d69; }

/* ---- In hồ sơ (ý 40) ---- */
/* Không còn @media print lọc trên trang đang mở — cách đó ra 4 trang trắng.
   Nay in bằng một trang riêng do inHoSoHtml() dựng, CSS in nằm ngay trong
   trang đó. Chỉ giữ lại luật ẩn ô chọn kỳ khi in báo cáo. */

/* ---- Đường ống học viên (ý 25) + Cần mở bao nhiêu lớp (ý 31) ---- */
.do-o {
  width: 120px; padding: 7px 10px; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
/* ---- Vai trò "chỉ xem" (ý 23) ---- */
/* Chỉ để giao diện gọn — chặn thật nằm ở RLS trong database. */
body.chi-xem .row-actions,
body.chi-xem .hl-o-tick,
body.chi-xem #btn-profile-edit,
body.chi-xem #btn-profile-nhan-ban,
body.chi-xem .gc-them,
body.chi-xem .gc-xoa,
body.chi-xem .tl-them,
body.chi-xem .tl-xoa,
body.chi-xem #hl-dai { display: none !important; }
.role-badge.viewer { background: #eef6fc; color: #1a5a8a; }

/* ---- Cam kết quân số (ý 39) ---- */
.ck-ds { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.ck-dong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-ten { flex: 0 0 190px; }
.ck-o {
  width: 110px; padding: 6px 9px; font: inherit; font-size: 14.5px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text);
}
.ck-luc { font-size: 13.5px; color: #565d69; }
.ck-bao { margin: 9px 0 0; font-size: 13.5px; font-weight: 600; }
.ck-bao:empty { margin: 0; }
.ck-bao-ok { color: #146c39; }
.ck-bao-loi { color: #a52d24; }
.sd-ck { white-space: nowrap; }
.ck-so { font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-trang-thai { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.ck-du { background: #ecf7f0; color: #146c39; }
.ck-thieu { background: #fdefee; color: #a52d24; }
.ck-chua { color: #8b8085; }
@media (max-width: 560px) { .ck-ten { flex-basis: 100%; } }
.ld-chua { margin-top: 12px; }
.ld-chua summary { cursor: pointer; font-weight: 600; color: #8a5c0f; font-size: 14px; }
.ld-ds { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.ld-ds li { margin-top: 3px; }
.ld-dem { font-size: 13.5px; color: #565d69; }
@media (max-width: 620px) { .ld-theo-da { margin-left: 0; } }

/* ---- Bộ lọc dự án ở các màn hình phân tích ---- */
.loc-da { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.loc-da label { font-size: 14px; font-weight: 600; }
.loc-o {
  padding: 8px 11px; font: inherit; font-size: 14.5px; min-width: 220px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
/* Vòng sáng khi đang gõ: viền đổi màu không thôi thì ở màn sáng gần như
   không thấy, người dùng không biết con trỏ đang ở ô nào. */
.loc-o:focus, .loc-o:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(238, 0, 51, .12);
}
.loc-dang { font-size: 13.5px; color: #1a5a8a; background: #eef6fc; border-radius: 999px; padding: 3px 10px; }
.db-khung .loc-da { margin: 10px 0 0; }
@media (max-width: 560px) { .loc-o { width: 100%; min-width: 0; } }

/* ---- Phóng to / thu nhỏ cửa sổ ---- */
/* margin-left:auto để hai nút dồn hẳn về bên phải — .modal-header dùng
   justify-content:space-between, thêm nút thứ ba vào là nó rải đều ra và
   nút phóng to nằm chỏng chơ giữa tiêu đề với nút đóng. */
.btn-phong-to { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; }
.btn-phong-to + .btn-icon { margin-left: 2px; }

.modal.modal-to {
  max-width: 96vw;
  width: 96vw;
  max-height: 95vh;
  /* height: auto chứ không phải 95vh — cửa sổ ít nội dung (hỏi xoá, đổi mật
     khẩu) mà kéo cao kín màn hình thì trông trống trải và khó đọc. Cái nào
     nhiều nội dung tự cao lên tới 95vh. */
  height: auto;
}
/* Phóng to mà các vùng cuộn bên trong vẫn giữ trần cũ thì bấm xong không
   thấy thêm được dòng nào — phải nới theo. */
.modal-to .mx-ds,
.modal-to .hl-ds,
.modal-to .restore-log,
.modal-to .tl-ds { max-height: none; }
.modal-to .sd-bang, .modal-to .pt-body, .modal-to .hl-body,
.modal-to .mx-body, .modal-to .tc-body, .modal-to .ad-noi-dung { max-height: none; }

@media (max-width: 640px) {
  /* Màn hẹp thì cửa sổ vốn đã gần kín màn hình, phóng to không thêm được gì
     mà còn dính sát mép — ẩn nút cho khỏi rối. */
  .btn-phong-to { display: none; }
  .modal.modal-to { max-width: 100%; width: 100%; max-height: 88vh; height: auto; }
}

/* ---- Bộ chọn kỳ báo cáo ---- */
.ky-chon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ky-chon label { font-size: 14px; font-weight: 600; }
.loc-o.ky-nho { min-width: 0; width: auto; }
.ky-dang {
  font-size: 13.5px; font-weight: 700; color: #1a5a8a;
  background: #eef6fc; border-radius: 999px; padding: 3px 11px;
}
@media (max-width: 560px) { .loc-o.ky-nho { flex: 1; min-width: 110px; } }
.sd-ct-thuc {
  margin: 7px 0 0; padding: 8px 12px; font-size: 14px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  font-variant-numeric: tabular-nums; overflow-x: auto; white-space: nowrap;
}

/* ---- Lịch nhân sự: kỳ nhiều tháng ---- */
.lich-nhieu { margin: 0 0 12px; font-size: 14px; color: #565d69; }
.lich-thang-khoi { margin-bottom: 22px; }
.lich-thang-khoi:last-child { margin-bottom: 0; }
.lich-thang-ten {
  margin: 0 0 9px; font-size: 16px; font-weight: 700;
  padding-bottom: 6px; border-bottom: 2px solid var(--border);
}
.bc-chon-ky { margin-bottom: 4px; }
@media print { .bc-chon-ky, .ky-chon, .loc-da { display: none !important; } }
.ky-chua-toi {
  margin: 0; padding: 14px 17px; font-size: 14.5px; color: #5c4a1e;
  background: #fdf7ea; border: 1px solid #e6d4a6; border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   THIẾT KẾ LẠI 5 MÀN SỐ LIỆU
   (Báo cáo · Lịch nhân sự · So sánh dự án · Phân tích · Đường ống)

   Ba thứ làm mấy màn này trông thô ở bản trước:
     1. Mọi thứ cùng một trọng lượng — mắt không biết nhìn đâu trước.
     2. Khối giải thích dài bằng chính bảng số liệu, át cả dữ liệu.
     3. Ô chọn trần trụi xếp chồng, trông như form nhập liệu bỏ quên.
   Cách chữa: gom điều khiển vào một dải riêng, cho tiêu đề mục có nhịp,
   thu gọn phần giải thích, và để CON SỐ là thứ nổi nhất.
   ══════════════════════════════════════════════════════════════════ */

/* ---- Dải công cụ: gom mọi ô chọn vào một chỗ có nền riêng ---- */
.tcc {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 18px;
  background: linear-gradient(180deg, #fbfbfc, #f5f6f8);
  border: 1px solid var(--border); border-radius: 10px;
}
.tcc .ky-chon, .tcc .loc-da { margin: 0; gap: 7px; }
.tcc label { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tcc .loc-o {
  padding: 6px 9px; font-size: 14px; border-radius: 7px;
  border-color: #d8dade; background: #fff;
}
.tcc .loc-o:hover { border-color: #b9bcc2; }
.tcc .ky-dang { background: var(--primary-dark); color: #fff; font-weight: 700; }
.tcc .loc-dang { background: #eef6fc; }
@media (max-width: 640px) { .tcc { flex-direction: column; align-items: stretch; gap: 10px; } }

/* ---- Tiêu đề mục: gạch nhấn dựng đứng tạo nhịp cho cả trang ---- */
.pt-muc { margin-top: 30px; }
.pt-muc h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 17.5px; font-weight: 700; letter-spacing: -.01em;
}
.pt-vach {
  width: 3px; height: 17px; border-radius: 2px; flex: none;
  background: var(--primary);
}
.pt-phu { margin: 4px 0 0 12px; font-size: 13.5px; color: var(--text-muted); }

/* ---- Dải phạm vi: nhẹ đi, đừng tranh chỗ với số liệu ---- */
.pt-pham-vi {
  padding: 9px 13px; font-size: 13.5px; color: #55585f;
  background: #f7f8fa; border: none; border-left: 3px solid #d8dade; border-radius: 0 8px 8px 0;
}

/* Dòng nối giữa hai biểu đồ "người ta rời đi lúc nào". CỐ Ý không phải một
   .pt-muc — nó không phải mục thứ ba, chỉ là câu bắc cầu giữa hai mục, nói
   rõ hai bên đếm hai nhóm khác nhau nên đừng đem so trực tiếp.
   Viền nét đứt để phân biệt với các hộp ghi chú đặc khác. */
.pt-noi {
  margin: 14px 0 0; padding: 9px 13px; font-size: 13.5px; color: #55585f;
  background: #f7f8fa; border: 1px dashed var(--border); border-radius: 8px;
}

/* ---- Hàng thanh ngang: cao hơn, số nằm hẳn trong thanh ---- */
.pt-ds { gap: 7px; }
.pt-n { background: #f0f1f4; border-radius: 999px; padding: 1px 7px; font-weight: 700; }

/* ---- Bảng So sánh dự án ---- */
.sd-cuon { border-radius: 10px; }
.sd-bang { font-size: 14px; }
.sd-bang thead th {
  font-size: 13px; letter-spacing: .07em; padding: 11px 14px;
  background: #f7f8fa; border-bottom: 1px solid var(--line2, #d8dade);
  position: sticky; top: 0; z-index: 1;
}
.sd-bang tbody td { padding: 12px 14px; }
.sd-bang tbody tr:hover { background: #fafbfc; }
/* Dòng phụ trong tiêu đề cột: ghi thẳng khoảng ngày của cửa sổ 7 ngày, để
   không phải mở phần giải thích mới biết cột đang lấy từ ngày nào. */
.sd-bang thead th small {
  display: block; margin-top: 3px; font-size: 13px; font-weight: 500;
  letter-spacing: .02em; text-transform: none; color: #5d646e;
}
.sd-bq { background: #f6f7f9; }
.sd-bang tfoot .sd-bq { background: #eef0f3; }
.sd-hang {
  min-width: 22px; height: 22px; line-height: 20px; padding: 0;
  border: 1px solid var(--border); background: #fff; color: #6b7280;
}
.sd-bang tbody tr:first-child .sd-hang { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.sd-bang tfoot td { padding: 13px 14px; background: #f7f8fa; }

/* Thanh nền ngay trong ô tỷ lệ — nhìn cột là thấy ngay dự án nào cao nhất,
   không phải đọc từng con số rồi tự so trong đầu. */
.sd-o-ty { position: relative; }
.sd-nen {
  position: absolute; right: 0; top: 6px; bottom: 6px;
  background: linear-gradient(90deg, rgba(192,57,43,.05), rgba(192,57,43,.16));
  border-radius: 5px; pointer-events: none;
}
.sd-ty { position: relative; padding: 3px 9px; }

/* ---- Khối giải thích: thu gọn lại, mở ra khi cần ---- */
.sd-ct { margin-top: 16px; padding: 0; background: none; }
.sd-ct-tieu-de {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; margin: 0; font-size: 13.5px; border-radius: 999px;
  background: #f2f3f5; color: #55585f; border: 1px solid var(--border);
}
.sd-ct-tieu-de::-webkit-details-marker { display: none; }
.sd-ct-tieu-de::before { content: '?'; font-weight: 800; color: var(--primary); }
.sd-ct-tieu-de:hover { background: #eaebee; }
.sd-ct[open] .sd-ct-tieu-de { border-radius: 8px 8px 0 0; background: #f7f8fa; border-bottom-color: transparent; }
.sd-ct[open] > :not(summary) { padding-left: 13px; padding-right: 13px; }
.sd-ct[open] > :nth-child(2) { padding-top: 12px; }
.sd-ct[open] > :last-child { padding-bottom: 13px; }
.sd-ct[open] { background: #f7f8fa; border: 1px solid var(--border); border-radius: 0 8px 8px 8px; }
.sd-ct-thuc { background: #fff; border-color: #d8dade; font-size: 14.5px; padding: 10px 14px; }

/* ---- Phễu đường ống ----
   Bản trước để thanh nằm TRƯỚC nhãn: chặng đầu luôn 100% nên thanh chiếm
   trọn hàng, đẩy nhãn ra rìa và chữ bị ép nát. Nay nhãn cố định bên trái,
   thanh chạy trong phần còn lại — luôn đủ chỗ cho cả hai. */
.do-o { border-radius: 8px; font-weight: 700; }

/* ---- Ghi chú / cảnh báo: gọn lại, bớt chiếm chỗ ---- */
.pt-ghi-chu { margin-left: 12px; font-size: 13.5px; }
.pt-canh-bao { margin-left: 12px; border-radius: 8px; }
@media (max-width: 640px) {
  .pt-nhan { flex-basis: 100%; }
  .ld-theo-da { margin-left: 0; }
}

/* ---- Báo cáo: màu theo ý nghĩa, bảng đồng bộ với các màn khác ---- */
.bc-so-hang { border-radius: 10px; overflow: hidden; margin: 18px 0 22px; }
.bc-o { padding: 13px 15px; }
.bc-so { font-size: 25.5px; letter-spacing: -.02em; color: var(--text); }
.bc-o.bc-ra  .bc-so { color: #c0392b; }
.bc-o.bc-vao .bc-so { color: #146c39; }
.bc-nhan { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #6b7280; }
.bc h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 24px 0 10px; font-size: 16px; font-weight: 700; color: var(--text);
}
.bc-bang { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.bc-bang th, .bc-bang td { border: none; border-bottom: 1px solid var(--border); padding: 10px 12px; }
.bc-bang tbody tr:last-child td { border-bottom: none; }
.bc-bang th {
  background: #f7f8fa; font-size: 13px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: #6b7280;
}
.bc-bang tbody tr:hover { background: #fafbfc; }
.bc-bang tfoot td { background: #f7f8fa; border-top: 2px solid var(--text); border-bottom: none; }
.bc-chon-ky { margin-bottom: 0; }

/* ---- Lịch nhân sự: đồng bộ với các màn còn lại ---- */
.lich-thang-ten {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px; font-size: 16px; font-weight: 700;
  padding-bottom: 0; border-bottom: none;
}
.lich-tom-tat { gap: 10px; margin-bottom: 14px; }
.lich-tt { border-radius: 10px; padding: 13px 15px; }
.lich-tt-so { font-size: 29px; letter-spacing: -.02em; }
.lich-tt-nhan { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lich-o { border-radius: 9px; }
.lich-thu {
  font-size: 13px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.lich-chip { border-radius: 6px; font-weight: 700; }

/* ---- Ví dụ trong phần giải thích công thức ---- */
.sd-vi-du { border-left: 3px solid #e6d4a6; background: #fdfaf1; padding: 9px 12px; border-radius: 0 7px 7px 0; }
.sd-vi-du-bang { display: grid; gap: 5px; margin: 9px 0 0; }
.sd-vd {
  display: grid; grid-template-columns: 148px auto 1fr; gap: 10px; align-items: baseline;
  padding: 8px 12px; background: #fff; border: 1px solid var(--border); border-radius: 7px; font-size: 14px;
}
.sd-vd > span { color: #6b7280; }
.sd-vd > b { font-variant-numeric: tabular-nums; font-weight: 700; }
.sd-vd > em { font-style: normal; font-size: 13.5px; color: #5d646e; }
.sd-vd.sd-vd-dung { border-color: #b6ddc4; background: #f4fbf6; }
.sd-vd.sd-vd-dung > b { color: #146c39; }
.sd-vd.sd-vd-dung > em { color: #146c39; }

/* Hai tầng của phép trung bình — đọc một cái là thấy tháng khác kỳ dài thế
   nào, không phải dò trong đoạn văn. */
/* Nhãn chốt số liệu — nói rõ kỳ đang chạy thì số dừng ở ngày nào. Không có
   nó thì "Tháng 8" lúc là trọn tháng lúc là 20 ngày mà không ai biết. */
/* Dòng bất thường trong dự báo: bình thường không xuất hiện. Khi xuất hiện
   là dấu hiệu hồ sơ điền sai ngày, nên tô khác hẳn mấy dòng cộng/trừ kia. */
.db-hang.db-la { background: #fdf3d8; border-radius: 7px; padding-left: 8px; padding-right: 8px; }
.db-hang.db-la .db-nhan, .db-hang.db-la .db-so { color: #6b4a05; }

.ky-chot {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600;
  color: #6b4a05; background: #fdf3d8; border: 1px solid #e8d29a;
}
/* Ngày chưa tới trong lịch: vẫn hiện việc đã lên lịch, nhưng viền đứt nét
   và số ngày nghiêng để không nhìn nhầm thành việc đã xảy ra. Cố ý KHÔNG
   làm mờ cả ô — mờ đi là chữ tụt xuống dưới chuẩn tương phản, không đọc nổi
   thứ mình vừa cất công hiện ra. */
.lich-o.lich-sau { border-style: dashed; }
.lich-o.lich-sau .lich-ngay { font-style: italic; }
.lich-o.lich-sau .lich-chip { opacity: .88; }
.lich-sap {
  margin: 10px 0 0; padding: 9px 12px; font-size: 13.5px; line-height: 1.5;
  color: #3f4653; background: var(--bg);
  border: 1px dashed var(--border); border-radius: 8px;
}

.sd-bac { display: grid; gap: 6px; margin: 8px 0 10px; }
.sd-bac-o {
  display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline;
  padding: 7px 12px; font-size: 13.5px; color: #3f4653;
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
}
.sd-bac-ten { font-weight: 700; color: #22262e; }

/* Bảng thành phần: đúng những con số đem ra chia, để cộng tay lại được. */
.sd-tp { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.sd-tp-o {
  display: flex; flex-direction: column; gap: 2px; min-width: 104px;
  padding: 8px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 7px;
}
.sd-tp-ten { font-size: 13px; color: #5d646e; }
.sd-tp-ten em { display: block; font-style: normal; font-size: 13px; color: #6b7280; }
.sd-tp-o > b { font-size: 16px; font-variant-numeric: tabular-nums; color: #22262e; }
.sd-tp-ket { background: #eef4fb; border-color: #b9d3ea; }
.sd-tp-ket > b { color: #0f4c81; }
@media (max-width: 560px) { .sd-bac-o { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 560px) { .sd-vd { grid-template-columns: 1fr; gap: 2px; } }

/* =====================================================================
   Phân tích nhân sự + Đường ống học viên — bố cục lại
   ---------------------------------------------------------------------
   Trước đây cả hai màn là một chuỗi thanh ngang giống hệt nhau, mục nào
   cũng cùng một hình dạng nên mắt không phân biệt được đang đọc cái gì,
   và không có chỗ nào nói KẾT LUẬN — phải đọc hết mới tự rút ra.
   Nay: dải kết luận đặt trên cùng, rồi mỗi mục một DẠNG BIỂU ĐỒ KHÁC
   nhau, chọn theo đúng thứ nó muốn kể.
   ===================================================================== */
.pt-lanh-mau { }   /* giữ chỗ, xem bảng màu ngay dưới */

/* Bảng màu ngữ nghĩa, tách khỏi đỏ thương hiệu: đỏ thương hiệu dành cho
   nút và nhận diện, còn đây là màu NÓI VỀ SỐ LIỆU (xấu / vừa / tốt). */
:root {
  --pt-xau: #b8352a;
  --pt-vua: #8a5600;   /* #a8690a chỉ đạt 4,48:1 trên nền trắng */
  --pt-tot: #16794a;
  --pt-lanh: #2b6ca3;
  --pt-nen-xau: #fdf0ee;
  --pt-nen-vua: #fdf5e4;
  --pt-nen-tot: #eaf6ef;
  --pt-nen-lanh: #eef4fa;
}

/* ---- Dải kết luận ---- */
.pt-ket-luan {
  display: grid; gap: 10px; margin: 0 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.pt-ket-o {
  padding: 12px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
}
.pt-ket-o.tone-xau  { border-left-color: var(--pt-xau);  background: var(--pt-nen-xau); }
.pt-ket-o.tone-vua  { border-left-color: var(--pt-vua);  background: var(--pt-nen-vua); }
.pt-ket-o.tone-tot  { border-left-color: var(--pt-tot);  background: var(--pt-nen-tot); }
.pt-ket-o.tone-lanh { border-left-color: var(--pt-lanh); background: var(--pt-nen-lanh); }
.pt-ket-nhan {
  margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.pt-ket-so {
  margin: 5px 0 2px; font-size: 27.5px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text);
}
.pt-ket-so.pt-ket-chu { font-size: 18.5px; letter-spacing: 0; }
.pt-ket-phu { margin: 0; font-size: 13.5px; color: var(--text-muted); }

/* ---- Câu kết dưới mỗi mục ---- */
.pt-ket-cau {
  margin: 10px 0 0; padding: 10px 13px; font-size: 14px; line-height: 1.55;
  border-radius: 8px; border-left: 3px solid var(--text-muted); background: var(--bg);
}
.pt-ket-cau.pt-xau { border-left-color: var(--pt-xau); background: var(--pt-nen-xau); color: #5c1c15; }
.pt-ket-cau.pt-tot { border-left-color: var(--pt-tot); background: var(--pt-nen-tot); color: #0f4a2e; }

/* ---- Mục 1: biểu đồ CHẤM trên thước chung ----
   Bốn dự án chênh nhau 2,7–3,4 tháng: vẽ thanh thì bốn thanh dài gần y
   nhau, nhìn không ra khác biệt. Chấm trên thước chung, kèm vạch đứt ở
   trung bình chung, thì đọc được ngay ai dưới mặt bằng. */
.pt-cham { margin: 12px 0 0; }
/* Vạch mốc vẽ TRONG từng thanh chứ không phải một đường tuyệt đối chồng lên
   cả khối: cột nhãn co giãn theo chiều rộng màn hình, đường tuyệt đối tính
   theo % của cả khối sẽ lệch khỏi thước ngay khi đổi cỡ cửa sổ. */
.pt-cham-moc {
  position: absolute; top: -3px; bottom: -3px; left: var(--pt-moc, 0%);
  width: 0; border-left: 1px dashed #8d95a1; z-index: 2;
}
.pt-cham-hang {
  display: grid; grid-template-columns: 178px 1fr 92px;
  align-items: center; gap: 12px; padding: 7px 0;
}
.pt-cham-ten {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
}
.pt-cham-ray {
  position: relative; height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, #f0f1f4, #f7f8fa);
}
.pt-cham-noi {
  position: absolute; top: 6px; height: 2px; border-radius: 2px; opacity: .75;
}
/* Nhãn hai đầu thước phải nằm đúng dưới THANH, không phải dưới cả hàng —
   nên bọc trong cùng lưới 3 cột với hàng dữ liệu rồi chỉ dùng cột giữa. */
.pt-cham-truc {
  display: grid; grid-template-columns: 178px 1fr 92px; gap: 12px; margin-top: 5px;
}
.pt-cham-truc > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.pt-cham-truc em { font-style: italic; text-align: center; }
.pt-cham-noi.duoi { background: var(--pt-xau); }
.pt-cham-noi.tren { background: var(--pt-lanh); }
.pt-cham-diem {
  position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; border: 2px solid var(--surface);
}
.pt-cham-diem.duoi { background: var(--pt-xau); }
.pt-cham-diem.tren { background: var(--pt-lanh); }
.pt-cham-so {
  text-align: right; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text);
}

/* ---- Mục 2: dải 100% ----
   Sáu khoảng thời gian là các phần CỦA MỘT TỔNG, nên vẽ thành một dải
   liền chứ không phải sáu thanh rời — sáu thanh rời làm mắt so từng cặp,
   dải liền cho thấy ngay đoạn đỏ chiếm bao nhiêu. */
.pt-dai {
  display: flex; height: 34px; border-radius: 8px; overflow: hidden;
  margin: 12px 0 9px; border: 1px solid var(--border);
}
.pt-dai-o {
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 800; color: #fff; min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .55);
}
.pt-dai-o:last-child { border-right: 0; }
.pt-dai-o.som { background: var(--pt-xau); }
.pt-dai-o.lau { background: var(--pt-lanh); }
.pt-chu-thich { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pt-ct-o {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--text-muted);
}
.pt-ct-o i { width: 9px; height: 9px; border-radius: 3px; }
.pt-ct-o i.som { background: var(--pt-xau); }
.pt-ct-o i.lau { background: var(--pt-lanh); }
.pt-ct-o b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- Mục 3: cột mùa vụ ---- */
.pt-mua {
  margin: 12px 0 0; padding: 12px 10px 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
}
.pt-mua-luoi {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px;
  align-items: end; height: 132px;
  border-bottom: 1px solid #ccd0d7;
}
.pt-mua-cot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.pt-mua-so {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums; margin-bottom: 3px; min-height: 14px;
}
.pt-mua-thanh {
  width: 100%; border-radius: 5px 5px 0 0; background: var(--pt-lanh); min-height: 0;
}
.pt-mua-cot.dinh .pt-mua-thanh { background: var(--pt-xau); }
.pt-mua-cot.dinh .pt-mua-so { color: var(--pt-xau); }
/* Tháng không có ai nghỉ: để trống hẳn, không vẽ mẩu cột và không in số 0
   — vẽ mẩu cột là nhìn tưởng có số liệu. */
.pt-mua-cot.rong .pt-mua-thanh { display: none; }
.pt-mua-truc {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px;
  margin-top: 6px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
}

/* ---- Mục 4: hai thanh cùng thước ---- */
.pt-doi { margin: 12px 0 0; }
.pt-doi-hang {
  display: grid; grid-template-columns: 178px 1fr 92px;
  align-items: center; gap: 12px; padding: 6px 0;
}
.pt-doi-ten { font-size: 13.5px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.pt-doi-ray { height: 22px; border-radius: 6px; background: #f0f1f4; overflow: hidden; }
.pt-doi-thanh { display: block; height: 100%; border-radius: 6px; }
.pt-doi-thanh.co { background: var(--pt-tot); }
.pt-doi-thanh.khong { background: #97a0ad; }
.pt-doi-so { text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- "Vì sao nghỉ" — xếp hạng + thời điểm trong MỘT mục ----------
   Gộp từ hai mục cũ (.ld-* xếp hạng và .lt-bang bảng nhiệt). Mỗi lý do là một
   hàng bấm mở được: ngoài là thứ hạng + dải thời điểm, trong là số cụ thể. */
.vs-xep { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.vs-hang { border-radius: 9px; background: var(--surface); border: 1px solid var(--border); }
.vs-hang.vs-dau { border-color: #e6bdb7; background: var(--pt-nen-xau); }
.vs-mo > summary {
  display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: start;
  padding: 11px 13px; cursor: pointer; list-style: none;
}
.vs-mo > summary::-webkit-details-marker { display: none; }
.vs-mo > summary:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: -2px; border-radius: 9px; }
.vs-so {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 13.5px; font-weight: 800; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border);
}
.vs-hang.vs-dau .vs-so { background: var(--pt-xau); border-color: var(--pt-xau); color: #fff; }
.vs-than { min-width: 0; }
.vs-dinh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vs-ten { font-size: 14.5px; font-weight: 700; }
/* Dấu mở/đóng nằm cuối tên, xoay khi bung — cho biết hàng này bấm được. */
.vs-ten::after {
  content: "›"; display: inline-block; margin-left: 6px; font-weight: 700;
  color: var(--text-muted); transition: transform .15s;
}
.vs-mo[open] .vs-ten::after { transform: rotate(90deg); }
.vs-n { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-n b { color: var(--text); font-size: 15px; }
/* Rãnh nền cho thanh: chiều dài thanh trong rãnh chính là số người. */
.vs-ray { display: block; height: 10px; border-radius: 3px; background: #f2f3f6; margin: 8px 0 2px; }
.vs-dai {
  display: flex; height: 100%; border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(22,32,46,.10);
}

/* Dải thời điểm: 100% là số người CỦA CHÍNH lý do đó đo được thâm niên.
   Đọc dọc cả danh sách là thấy lý do nào giết người sớm. Vạch trắng giữa các
   đoạn để hai sắc cạnh nhau không dính thành một mảng. */
.vs-g { display: block; height: 100%; box-shadow: inset -1px 0 0 rgba(255,255,255,.85); }
.vs-g:last-child { box-shadow: none; }
/* Gạch chéo = KHÔNG CÓ DỮ LIỆU, khác hẳn ô trống nghĩa là số 0. Đây là chỗ
   người đọc dễ hiểu nhầm nhất. */
.vs-g-chua { background: repeating-linear-gradient(135deg, #b9c0ca 0 4px, #dfe3e9 4px 8px); }
.vs-cg-ghi { margin-left: auto; font-style: italic; }
/* Bốn sắc từ sớm tới muộn. Cả bốn phải đạt 3:1 trên nền rãnh (#f2f3f6) —
   ràng buộc đó chặn không cho sắc nào nhạt quá, nên bốn bậc SÁNG TỐI bị dồn
   sát nhau. Vì vậy phân biệt chủ yếu bằng SẮC ĐỘ: đỏ sẫm → đỏ cam → vàng ánh
   kim → xám xanh, đúng mạch gấp → bớt gấp → trung tính.
   Kèm vạch trắng giữa các đoạn, chú giải màu, và số cụ thể khi bấm mở —
   không bắt người đọc chỉ dựa vào màu. */
.vs-g1 { background: #9c2b23; }
.vs-g2 { background: #c05a3f; }
.vs-g3 { background: #a87d28; }
.vs-g4 { background: #6f7c8c; }

.vs-chu-giai { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }
.vs-cg { display: inline-flex; align-items: center; gap: 6px; }
.vs-cg i { width: 16px; height: 9px; border-radius: 3px; flex: none; display: block; }

.vs-chi-tiet { padding: 0 13px 12px 50px; display: grid; gap: 9px; }
/* Bốn giai đoạn dàn thành LƯỚI TỰ XUỐNG DÒNG, không phải bảng 4 cột.
   Bảng 4 cột đẩy cả trang tràn ngang trên điện thoại — đã dính đúng vậy. */
.vs-gd { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px 14px; }
.vs-gd-o { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vs-gd-nhan {
  display: flex; align-items: center; font-size: 13px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted);
}
.vs-gd-so { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vs-gd-so em { font-style: normal; font-weight: 400; color: var(--text-muted); font-size: 13.5px; }
.vs-cham { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.vs-chip { display: flex; flex-wrap: wrap; gap: 5px; }
.vs-chip span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: 13px;
  color: var(--text-muted); background: var(--bg); border: 1px solid var(--border);
}
.vs-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .vs-chi-tiet { padding-left: 13px; } }

/* ---- Đường ống: câu tuyên bố mở đầu ---- */
.do-tuyen-bo {
  padding: 15px 18px; border-radius: 11px; margin-bottom: 4px;
  background: linear-gradient(135deg, #1f3a52, #2b6ca3); color: #fff;
}
/* Nền ô này là GRADIENT — phải đo tương phản ở đầu SÁNG (#2b6ca3), không
   phải đầu tối. Ở mức mờ .82 cũ chỉ còn 4,34:1, dưới chuẩn AA cho chữ
   11,5px; .90 cho 4,84:1. Dòng dưới con số nay mang thông tin thật (mẫu số
   và số người chưa tới lượt) nên càng phải đọc được. */
.do-tb-nho { margin: 0 0 5px; font-size: 13.5px; opacity: .90; }
.do-tb-lon + .do-tb-nho { margin: 6px 0 0; }
.do-tb-lon { margin: 0; font-size: 17.5px; font-weight: 600; line-height: 1.45; }
.do-tb-lon strong { font-weight: 800; }
.do-tb-manh { font-size: 30px; letter-spacing: -.02em; }

/* ---- Đường ống: phễu 4 chặng ---- */
.do-phieu { margin: 12px 0 0; }
.do-chang {
  padding: 11px 13px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
}
.do-chang-dinh { display: flex; align-items: baseline; gap: 9px; }
.do-chang-stt {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 13px; font-weight: 800; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border); align-self: center;
}
.do-chang-ten { font-size: 14.5px; font-weight: 700; margin-right: auto; }
.do-chang-n { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.do-ray { height: 10px; border-radius: 5px; background: #f0f1f4; overflow: hidden; margin: 8px 0 5px; }
.do-thanh { height: 100%; border-radius: 5px; }
.do-mau-0 { background: #2b6ca3; }
.do-mau-1 { background: #3f86bd; }
.do-mau-2 { background: #2f8f66; }
.do-mau-3 { background: #16794a; }
.do-chang-phu { margin: 0; font-size: 13.5px; color: var(--text-muted); }

/* Mối nối giữa hai chặng — chỗ NÓI VỀ SỰ RƠI RỤNG, thứ quan trọng nhất
   của cái phễu mà bản cũ nhét vào một cột chữ nhỏ bên phải. */
.do-noi { display: flex; align-items: center; gap: 8px; padding: 5px 0 5px 26px; }
.do-noi-mui { width: 2px; height: 20px; border-radius: 2px; background: var(--border); }
.do-noi-chu { font-size: 13.5px; font-weight: 700; }
.do-noi-ngoai { font-size: 13.5px; color: var(--text-muted); font-weight: 500; }
.do-noi-roi .do-noi-mui { background: var(--pt-xau); }
.do-noi-roi .do-noi-chu { color: var(--pt-xau); }
.do-noi-giu .do-noi-chu { color: var(--pt-tot); }
.do-noi-giu .do-noi-mui { background: var(--pt-tot); }
.do-noi-tang .do-noi-mui { background: var(--pt-vua); }
.do-noi-tang .do-noi-chu { color: var(--pt-vua); }

/* ---- Đường ống: chuỗi phép tính + đáp án ---- */
.do-chuoi { display: grid; gap: 6px; margin: 12px 0 10px; }
.do-buoc {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 13px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
}
.do-buoc-cong { background: var(--bg); }
.do-buoc-nhan { font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.do-buoc-nhan em { font-style: normal; font-size: 13px; color: var(--text-muted); }
.do-buoc-so { font-size: 18.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.do-buoc-so i { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.do-dap-an {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-radius: 11px;
  background: #14321f; color: #fff;
}
.do-dap-nhan { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.do-dap-phu { margin: 3px 0 0; font-size: 13.5px; opacity: .82; }
.do-dap-so { margin: 0; font-size: 45px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  /* Màn hẹp: nhãn dài + thước + số không đủ chỗ trên một hàng, nên cho
     thước xuống hàng dưới. Hàng trục cũng phải đổi theo, không thì nó vẫn
     giữ cột nhãn 178px và đẩy cả khối tràn ngang. */
  .pt-cham-hang, .pt-doi-hang { grid-template-columns: 1fr 74px; }
  .pt-cham-ray, .pt-doi-ray { grid-column: 1 / -1; order: 3; }
  .pt-cham-truc { grid-template-columns: 1fr; gap: 0; }
  .pt-cham-truc > i { display: none; }
  .pt-cham-truc em { display: none; }
  .pt-mua-luoi { height: 104px; }
  .pt-mua-truc { font-size: 13px; }
  .do-dap-so { font-size: 36px; }
  .do-buoc { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* =====================================================================
   Chốt danh sách sau 3 ngày training
   ===================================================================== */
/* Mở TỪ trong màn Đường ống nên phải nằm trên nó. Cùng z-index thì thứ tự
   trong HTML quyết định, mà Chốt lớp lại đứng trước — mở ra là bị che. */
#chot-lop-overlay { z-index: 1200; }
.cl-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.cl-huong-dan {
  margin: 0; padding: 11px 14px; font-size: 14px; line-height: 1.55;
  color: #3f4653; background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px;
}
.cl-chon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-chon label { font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.cl-dem {
  margin-left: auto; padding: 4px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #0f4c81; background: #eef4fb; border: 1px solid #b9d3ea;
}
.cl-thanh-cong-cu { display: flex; gap: 8px; }
.cl-ds {
  display: grid; gap: 5px; max-height: 46vh; overflow-y: auto;
  padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
}
.cl-dong {
  display: grid; grid-template-columns: 20px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 11px; border-radius: 7px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
}
/* Bỏ tick = người này đã rời trong 3 ngày đầu. Tô khác hẳn để lướt mắt là
   thấy ngay ai bị loại, không phải soi từng ô vuông. */
.cl-dong:not(.cl-co) { background: #fdf0ee; border-color: #e6bdb7; }
.cl-dong:not(.cl-co) .cl-ten { text-decoration: line-through; color: #8a3a30; }
.cl-dong.cl-khoa { cursor: not-allowed; background: #f6f7f9; }
.cl-dong .cl-ten { font-size: 14.5px; font-weight: 600; min-width: 0; }
.cl-dong .cl-phu { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
.cl-da-len {
  padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: #14532d; background: #eaf7ef; border: 1px solid #b6ddc4; white-space: nowrap;
}
.cl-bao { margin: 0; font-size: 14px; color: var(--pt-xau, #b8352a); min-height: 18px; }

/* ---- Bảng từng lớp trong Đường ống ---- */
.cl-bang .cl-da { font-size: 13.5px; color: var(--text-muted); }
.cl-tot { color: var(--pt-tot); }
.cl-vua { color: var(--pt-vua); }
.cl-xau { color: var(--pt-xau); }
.cl-xong { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
/* "mặc định" KHÔNG phải cảnh báo — lớp không chốt tay là chuyện bình thường,
   nên để chữ mờ chứ đừng dùng viên vàng như bản cũ (.cl-can). */
.cl-mac-dinh { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 620px) {
  .cl-dong { grid-template-columns: 20px 1fr; }
  .cl-dong .cl-phu, .cl-da-len { grid-column: 2; }
}

/* ---- Hộp thoại "Cài lên màn hình chính" ---- */
.cai-body { display: flex; flex-direction: column; gap: 12px; }
.cai-loi {
  margin: 0; padding: 11px 14px; font-size: 14px; line-height: 1.55;
  color: #3f4653; background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px;
}
.cai-buoc { margin: 0; padding-left: 22px; display: grid; gap: 9px; }
.cai-buoc li { font-size: 14.5px; line-height: 1.55; }
.cai-b { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* =====================================================================
   Vừa màn hình điện thoại
   ---------------------------------------------------------------------
   TOÀN BỘ khối này nằm trong @media, chỉ chạy khi cửa sổ hẹp. Bản dùng
   trên máy tính không đọc tới một dòng nào ở đây — đã đo lại hình học
   trước/sau ở khổ 1440x900 để chắc chắn không xê dịch một pixel.
   ===================================================================== */
@media (max-width: 860px) {
  /* Thanh trên cùng: logo + tiêu đề + nút xếp dọc, thu nhỏ lại cho đỡ
     chiếm hết màn hình đầu tiên. */
  .topbar { padding: 12px 0; }
  .topbar-inner { padding: 0 14px; gap: 10px; }
  .topbar-logo img { height: 38px; }
  .topbar h1 { font-size: 21px; line-height: 1.25; }
  .topbar .subtitle { font-size: 13.5px; }
  .topbar-user #user-info { text-align: center; }

  /* Menu: hai cột đều nhau thay vì để chữ tự xuống dòng lệch lạc.
     Tên nhóm chiếm trọn một dòng để phân nhóm còn đọc được. */
  .sidebar { gap: 6px; padding: 10px 14px 0; }
  .sidebar-nhom { flex: 0 0 100%; margin: 10px 0 2px; }
  .sidebar-item { flex: 1 1 calc(50% - 6px); justify-content: flex-start; }

  .container { padding: 14px; }
}

@media (max-width: 620px) {
  /* Ô lọc và nút bấm: mỗi thứ một dòng, đủ rộng để bấm bằng ngón tay
     (48px là mức tối thiểu dễ trúng trên điện thoại). */
  .filters { flex-direction: column; align-items: stretch; gap: 8px; }
  .filters .btn, .filters .loc-o, .filters input, .filters select { width: 100%; min-height: 44px; }
  .sidebar-item { flex: 1 1 100%; min-height: 44px; }
  .topbar-user-actions { width: 100%; justify-content: center; }
  .topbar-user-actions .btn { flex: 1 1 auto; min-height: 44px; }

  /* Bảng: nhắc người dùng là vuốt ngang được, không thì tưởng mất cột. */
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: 'vuốt ngang để xem thêm cột →';
    display: block; padding: 7px 12px; font-size: 13.5px;
    color: var(--text-muted); background: var(--bg);
    border-top: 1px dashed var(--border); position: sticky; left: 0;
  }
}

/* =====================================================================
   MÀN HÌNH TV — chiếu lên tivi phòng điều hành
   ---------------------------------------------------------------------
   Ba ràng buộc quyết định mọi thứ:
     · Nhìn từ 3–5 mét  -> cỡ chữ tính bằng vh/vw, không phải px
     · Không ai bấm gì  -> phải TỰ ĐỘNG ĐẬY: đổi trang có chuyển động, số
                           đếm lên, thẻ hiện ra so le. Màn hình đứng im trên
                           tường thì người đi ngang tưởng máy treo.
     · Bật cả ngày      -> nền tối, chuyển động chỉ dùng transform/opacity
                           (nhẹ cho máy), pháo hoa chỉ chạy đúng trang sinh nhật
   ===================================================================== */
.tv-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column;
  color: #eef2f8; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* Nền dựng 4 lớp cho có chiều sâu thật, không phải mảng đen phẳng:
     lưới mảnh tạo kết cấu, hai vầng sáng đối góc, rồi nền đen hơi ngả xanh.
     Màu đỏ ở đây rực hơn màu đỏ trên web (#ee0033) — trên nền tối, màu bão
     hoà thấp bị chìm, nhìn từ 4m là mất hẳn. */
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 100% 7vh,
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 7vh 100%,
    radial-gradient(100vw 75vh at 8% -10%, rgba(255,46,79,.16), transparent 62%),
    radial-gradient(90vw 70vh at 105% 108%, rgba(79,110,247,.15), transparent 62%),
    #07080c;
}
.tv-phao-hoa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .4s; }
.tv-phao-hoa.hien { opacity: 1; }

.tv-thanh-tien-do { height: 5px; background: rgba(255,255,255,.07); flex: 0 0 auto; z-index: 2; }
.tv-thanh-tien-do > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #ee0033, #ff8fa3);
  box-shadow: 0 0 14px rgba(238,0,51,.6);
  transition: width .2s linear;
}
.tv-overlay.tv-dung .tv-thanh-tien-do > span { background: #6b7280; box-shadow: none; }

.tv-dau {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 1.6vh 2.4vw; border-bottom: 1px solid rgba(255,255,255,.07); z-index: 2;
}
.tv-dau-trai { display: flex; align-items: center; gap: 1.6vw; min-width: 0; }
.tv-logo { height: 4.4vh; background: #fff; border-radius: 8px; padding: .5vh .8vw; }
.tv-ten-trang { font-size: 2.3vh; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8b97a8; }
.tv-dau-phai { text-align: right; }
.tv-gio { display: block; font-size: 4.6vh; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.tv-ngay { display: block; font-size: 1.9vh; color: #8b97a8; margin-top: .3vh; }

.tv-than { flex: 1 1 auto; min-height: 0; padding: 3vh 3vw; display: flex; align-items: stretch; z-index: 2; }
.tv-than > * { flex: 1; min-height: 0; }
.tv-trong { margin: auto; font-size: 3vh; color: #6b7280; }

.tv-chan {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2vw; z-index: 2;
  padding: 1.2vh 2.4vw; border-top: 1px solid rgba(255,255,255,.07);
  /* #6b7280 trên nền #07080c chỉ đo được 4,14:1 — dưới chuẩn AA (4,5:1) cho
     chữ thường. Đây là dòng chân màn TV: nhìn từ 3-5 mét thì thiếu tương phản
     là mất hẳn. #7d8697 = 5,46:1. */
  font-size: 1.6vh; color: #7d8697;
}
.tv-cham { display: flex; gap: .6vw; }
.tv-cham-1 { width: 1vw; max-width: 16px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); transition: all .3s; }
.tv-cham-1.dang { background: #ee0033; width: 2.4vw; max-width: 40px; }
.tv-cap-nhat { margin-left: auto; }
.tv-phim { opacity: .5; }
.tv-thoat {
  position: absolute; top: 1.4vh; right: 1.4vw; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.08); border: none; color: #eef2f8; font-size: 29px; line-height: 1;
  opacity: 0; transition: opacity .2s;
}
.tv-overlay:hover .tv-thoat { opacity: 1; }

/* ---- Chuyển động dùng chung ----
   Thẻ hiện ra SO LE (mỗi thẻ trễ hơn thẻ trước 70ms) — mắt đi theo thứ tự
   đó, thành ra đọc được nhiều thông tin hơn là bày hết ra cùng lúc. */
@keyframes tvVao { from { opacity: 0; transform: translateY(2.4vh) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tvChayThanh { from { width: 0; } to { width: var(--w); } }
.tv-o-thanh, .tv-tl-thanh, .tv-do-thanh { width: var(--w); }
/* Hoạt ảnh CHỈ bật khi lớp .tv-dong có mặt — mã chỉ gắn lớp đó khi trang
   đang thật sự hiển thị.
   Vì sao phải vòng vo vậy: trình duyệt TREO hoạt ảnh khi tab xuống nền, mà
   trạng thái đầu của hiệu ứng này là opacity 0. Gắn thẳng vào phần tử thì
   lúc tivi chuyển sang chờ màn hình rồi quay lại, cả trang ĐỨNG NGUYÊN Ở
   TRONG SUỐT — trắng trơn trên tường, không ai hiểu vì sao. */
.tv-dong .tv-vao-dan {
  animation: tvVao .55s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.tv-dong .tv-o-thanh, .tv-dong .tv-tl-thanh, .tv-dong .tv-do-thanh {
  animation: tvChayThanh .9s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: .25s;
}
/* Chấm "đang sống" — dấu hiệu duy nhất cho biết số liệu là thật, đang chạy. */
@keyframes tvNhapNhay { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.tv-song {
  display: inline-block; width: 1vh; height: 1vh; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 10px #22c55e; margin-right: .6vw;
  animation: tvNhapNhay 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tv-dong .tv-vao-dan, .tv-dong .tv-o-thanh, .tv-dong .tv-tl-thanh,
  .tv-dong .tv-do-thanh, .tv-song { animation: none; }
}

.tv-nhan { margin: 0; font-size: 2.4vh; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c2ccda; }
.tv-phu { margin: 1.4vh 0 0; font-size: 3vh; color: #a7b2c2; }
.tv-the-trong { margin: auto 0; font-size: 2.4vh; color: #6b7280; }

/* Thẻ chung: viền sáng mảnh + nền hơi nổi, không phải hộp xám phẳng. */
.tv-o-da, .tv-tn-o, .tv-lop-1, .tv-cm-1 {
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
}

/* ---- Trang 1: quân số ---- */
/* align-items: center ở đây từng là lỗi lớn nhất của màn TV: nội dung dồn
   vào một dải giữa màn hình, bỏ trống hơn nửa khung 1920x1080. Trên màn 65
   inch nhìn như trang bị lỗi. Giờ CĂNG RA cho đầy khung. */
.tv-qs { display: grid; grid-template-columns: 30% 1fr; gap: 2.4vw; width: 100%; align-items: stretch; }
.tv-qs-tong {
  text-align: center; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .4vh;
  border-radius: 2.4vh; padding: 3vh 1.6vw;
  background: linear-gradient(160deg, rgba(255,46,79,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.07);
}
/* Vầng sáng sau con số cho nó "nặng" hơn, nhìn từ xa bắt mắt ngay. */
.tv-qs-tong::before {
  content: ''; position: absolute; inset: -4vh -2vw;
  background: radial-gradient(closest-side, rgba(255,46,79,.20), transparent);
  pointer-events: none;
}
.tv-so-khong-lo {
  position: relative; margin: .6vh 0 0; font-size: 24vh; font-weight: 800;
  line-height: .88; letter-spacing: -.05em; color: #f2f6fb;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tv-so-khong-lo {
    background: linear-gradient(175deg, #fff 20%, #8fb6e0);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
/* grid-auto-rows: 1fr để các ô CAO BẰNG NHAU và cùng căng hết chiều cao —
   không thì chúng co lại quanh nội dung rồi trôi lên giữa khung. */
/* minmax rộng để 5 dự án xuống thành 3+2 thay vì 5 cột hẹp như cột đình.
   grid-auto-rows: 1fr cho các ô cao bằng nhau và căng hết chiều cao. */
.tv-qs-luoi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19vw, 1fr));
  grid-auto-rows: 1fr; gap: 1.2vw; align-content: stretch;
}
/* space-between: tên ghim trên, số ở giữa, cam kết ghim đáy. Dùng center thì
   cả cụm trôi vào giữa ô, chừa hai khoảng trống trên dưới trông rất trống. */
.tv-o-da {
  padding: 2.4vh 1.6vw; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 1.8vh; background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}
/* Vạch màu riêng của dự án chạy dọc mép trái. */
.tv-o-da::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--mau); box-shadow: 0 0 20px var(--mau); }
.tv-o-ten { margin: 0; font-size: 2.5vh; font-weight: 700; color: #d6dfeb; letter-spacing: .01em; display: flex; align-items: center; gap: .5vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-o-ico { font-size: 2.8vh; }
.tv-o-so { margin: 1vh 0 1.6vh; font-size: 13vh; font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.tv-o-ray { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
.tv-o-thanh { display: block; height: 100%; border-radius: 999px; background: var(--mau); box-shadow: 0 0 16px var(--mau); }
/* Cam kết đủ/thiếu là thông tin để RA QUYẾT ĐỊNH — từng là dòng chữ nhỏ nhất
   trên màn hình, nhìn từ xa không đọc nổi. Nay to gần bằng tên dự án. */
.tv-o-ck { margin: 0; font-size: 2vh; color: #94a1b3; display: flex; align-items: center; gap: .6vw; flex-wrap: wrap; }
.tv-ck { padding: .5vh .9vw; border-radius: 999px; font-weight: 800; font-size: 2vh; }
.tv-ck-du { background: rgba(34,197,94,.18); color: #7ff0b4; }
.tv-ck-thieu { background: rgba(239,68,68,.18); color: #ffb0b0; }
.tv-ck-chua { background: rgba(255,255,255,.07); color: #c0c9d5; }

/* ---- Avatar (sinh nhật / chào mừng) ---- */
.tv-av {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 7vh; height: 7vh; border-radius: 50%;
  font-size: 2.6vh; font-weight: 800; color: #fff; letter-spacing: .02em;
  /* phủ tối 30% lên nền màu để chữ trắng luôn đạt >=4.5:1 trên MÀN HÌNH TV
     (nền pastel gốc chỉ cho 2,85:1 với màu cam #e67e22) */
  background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), var(--av);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 6px 20px rgba(0,0,0,.4);
}
.tv-av-to { width: 22vh; height: 22vh; font-size: 8.4vh; box-shadow: 0 0 0 5px rgba(255,255,255,.14), 0 10px 34px rgba(0,0,0,.5); }

/* ---- Trang sinh nhật ---- */
/* Trang sinh nhật là trang DUY NHẤT trong ngày dành cho con người chứ không
   cho con số, nên nó phải chiếm trọn màn hình. Bản trước cụm nội dung chỉ
   chiếm chừng một phần ba khung, trôi lơ lửng giữa mảng đen — nhìn từ xa
   đúng nghĩa "nhạt nhoà". Nay space-evenly để trải đều cả chiều cao. */
.tv-sn {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-evenly; gap: 2vh; text-align: center; position: relative;
}
/* Vầng sáng ấm phía sau — nền lạnh của các trang số liệu chuyển hẳn sang tông
   ấm để người xem thấy ngay đây là trang khác hẳn. */
.tv-sn::before {
  content: ''; position: absolute; inset: -6vh -6vw; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 50% 42%, rgba(255,143,163,.14), transparent 65%),
    radial-gradient(45vw 40vh at 50% 42%, rgba(255,209,102,.10), transparent 60%);
}
.tv-sn > * { position: relative; }
.tv-sn-dinh { margin: 0; font-size: 8.5vh; font-weight: 800; letter-spacing: -.015em; line-height: 1.05;
  background: linear-gradient(90deg, #ff8fa3, #ffd166, #7ff0b4);
  -webkit-background-clip: text; background-clip: text; color: #ffd166; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .tv-sn-dinh { color: transparent; } }
.tv-sn-ds { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 3vh 4vw; }
.tv-sn-1 { display: flex; flex-direction: column; align-items: center; gap: 2vh; }
.tv-sn-mot .tv-sn-1 { gap: 3vh; }
.tv-sn-mot .tv-av-to { width: 30vh; height: 30vh; font-size: 11vh; }
.tv-sn-ten { margin: 0; font-size: 5.6vh; font-weight: 800; letter-spacing: -.01em; }
.tv-sn-mot .tv-sn-ten { font-size: 9vh; }
.tv-sn-da { margin: 0; font-size: 3vh; color: #a7b2c2; }
.tv-sn-loi {
  margin: 0; max-width: 76vw; font-size: 4vh; line-height: 1.45; color: #ffe0b8;
  padding: 2.6vh 3.4vw; border-radius: 2.4vh;
  background: rgba(255,209,102,.10); border: 1px solid rgba(255,209,102,.26);
}

/* ---- Trang chào mừng ---- */
.tv-cm { display: flex; flex-direction: column; justify-content: stretch; gap: 3vh; }
.tv-cm-dinh { margin: 0; font-size: 5.4vh; font-weight: 700; text-align: center; color: #dfe8f4; }
.tv-cm-dinh b { color: #7ff0b4; font-size: 7vh; }
/* Cột đủ rộng cho HỌ TÊN ĐẦY ĐỦ — tên bị cắt cụt trên tivi thì mất luôn
   ý nghĩa của trang chào mừng. */
/* flex: 1 + grid-auto-rows: 1fr -> các thẻ giãn ra lấp hết chiều cao còn lại,
   thay vì co quanh nội dung rồi để trống cả nửa dưới màn hình. */
.tv-cm-ds {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(26vw, 1fr));
  grid-auto-rows: 1fr; gap: 1.4vw; align-content: stretch;
}
.tv-cm-1 {
  display: flex; align-items: center; gap: 1.4vw; padding: 2vh 1.6vw;
  position: relative; overflow: hidden; border-radius: 1.8vh;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.tv-cm-1::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--mau); box-shadow: 0 0 20px var(--mau); }
.tv-cm-chu { display: flex; flex-direction: column; gap: .5vh; min-width: 0; }
.tv-cm-ten { font-size: 3.6vh; font-weight: 700; line-height: 1.2; }
.tv-cm-da { font-size: 2.4vh; color: #b8c3d1; }
.tv-cm-them { margin: 0; text-align: center; font-size: 2.6vh; color: #8e99a8; }

/* ---- Trang tháng này ---- */
.tv-tn { display: flex; flex-direction: column; gap: 2.6vh; width: 100%; justify-content: stretch; }
.tv-tn-hang { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4vw; }
.tv-tn-o {
  padding: 3vh 1.6vw; border-radius: 1.8vh;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.tv-so-to { margin: 1.2vh 0 0; font-size: 10vh; font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.tv-vao .tv-so-to { color: #7ff0b4; }
.tv-ra .tv-so-to { color: #ffb0b0; }
.tv-tn-bang { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.4vh; justify-content: space-evenly; }
.tv-tl-hang { display: grid; grid-template-columns: 18vw 1fr 9vw; gap: 1.4vw; align-items: center; }
.tv-tl-ten { font-size: 3vh; font-weight: 700; display: flex; align-items: center; gap: .7vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-cham-da { width: 1.5vh; height: 1.5vh; border-radius: 50%; flex: 0 0 auto; }
.tv-tl-ray { height: 3.4vh; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.tv-tl-thanh { display: block; height: 100%; border-radius: 999px; }
.tv-tl-thanh.cao { background: linear-gradient(90deg, #dc2626, #f87171); box-shadow: 0 0 16px rgba(248,113,113,.5); }
.tv-tl-thanh.vua { background: linear-gradient(90deg, #b45309, #fbbf24); }
.tv-tl-thanh.thap { background: linear-gradient(90deg, #15803d, #4ade80); }
.tv-tl-so { font-size: 3.6vh; font-weight: 800; text-align: right; }

/* ---- Trang đường ống ---- */
.tv-do { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.4vw; width: 100%; align-items: stretch; }
.tv-do-phieu { display: flex; flex-direction: column; gap: 2vh; justify-content: space-evenly; }
.tv-do-chu { display: flex; align-items: baseline; justify-content: space-between; }
.tv-do-ten { font-size: 3.2vh; font-weight: 700; color: #d6dfeb; }
.tv-do-n { font-size: 7vh; font-weight: 800; line-height: 1; }
.tv-do-ray { height: 3vh; border-radius: 999px; background: rgba(255,255,255,.07); margin: 1vh 0 .6vh; overflow: hidden; }
.tv-do-thanh { display: block; height: 100%; border-radius: 999px; }
.tv-do-mau-0 { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
.tv-do-mau-1 { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.tv-do-mau-2 { background: linear-gradient(90deg, #15803d, #4ade80); }
.tv-do-mau-3 { background: linear-gradient(90deg, #166534, #22c55e); }
.tv-do-ty { margin: 0; font-size: 2.3vh; color: #b8c3d1; }
.tv-do-lop { display: flex; flex-direction: column; gap: 1.4vh; justify-content: center; }
.tv-lop-1 {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1.2vw; align-items: center;
  padding: 2.2vh 1.4vw; border-radius: 1.6vh;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.tv-lop-ten { font-size: 3vh; font-weight: 700; }
.tv-lop-so { font-size: 2.4vh; color: #a7b2c2; }
.tv-lop-tt { font-size: 2vh; font-weight: 800; padding: .6vh 1vw; border-radius: 999px; white-space: nowrap; }
.tv-lop-tt.xong { background: rgba(34,197,94,.18); color: #7ff0b4; }
.tv-lop-tt.chua { background: rgba(234,179,8,.18); color: #fde68a; }

/* Mở thử trên máy tính màn nhỏ — bỏ chia cột cho khỏi bẹp. */
@media (max-width: 900px) {
  .tv-qs, .tv-do { grid-template-columns: 1fr; }
  .tv-tn-hang { grid-template-columns: repeat(2, 1fr); }
  .tv-tl-hang { grid-template-columns: 30vw 1fr 16vw; }
  .tv-cm-ds { grid-template-columns: 1fr; }
}

/* ---------- Việc cần làm hôm nay (Dashboard) ----------
   Bốn mức gấp phân biệt bằng vạch màu bên trái chứ không tô nền — tô nền cả
   khối làm bảng số liệu phía trên bị lấn át. Màu chữ đều đã đo đạt AA. */
.vc-hop {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 22px;
}
.vc-tom { margin: 0 0 12px; font-size: 15px; color: var(--text-muted); }
.vc-huy { color: #b8352a; font-weight: 700; }
.vc-om { color: #1c7a4a; font-weight: 600; }
.vc-sach { display: flex; align-items: center; }
.vc-sach-chu { margin: 0; font-size: 15px; color: #1c7a4a; font-weight: 600; }

.vc-nhom { border-left: 4px solid var(--vc-mau, var(--border)); border-radius: 6px;
  background: var(--vc-nen, #fafbfc); margin-bottom: 8px; }
.vc-nhom:last-child { margin-bottom: 0; }
.vc-do   { --vc-mau: #b8352a; --vc-nen: #fdf4f3; }
.vc-cam  { --vc-mau: #b45309; --vc-nen: #fdf8f2; }
.vc-vang { --vc-mau: #8a6d1f; --vc-nen: #fdfbf2; }
.vc-xanh { --vc-mau: #1d5fa8; --vc-nen: #f4f8fd; }

.vc-nhom > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; font-weight: 700; font-size: 15px; list-style: none;
}
.vc-nhom > summary::-webkit-details-marker { display: none; }
.vc-nhom > summary::before { content: '▸'; color: var(--vc-mau); font-size: 13.5px; }
.vc-nhom[open] > summary::before { content: '▾'; }
.vc-nhan { flex: 1; }
.vc-dem {
  background: var(--vc-mau); color: #fff; border-radius: 999px;
  min-width: 24px; text-align: center; padding: 1px 8px; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.vc-vi { margin: 0 12px 8px 24px; font-size: 14px; color: var(--text-muted); }

.vc-ds { list-style: none; margin: 0; padding: 0 12px 10px 24px;
  display: flex; flex-direction: column; gap: 2px; }
.vc-dong {
  display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(0, 1.6fr) 92px 96px;
  align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 14px;
}
.vc-bam { cursor: pointer; }
.vc-bam:hover, .vc-bam:focus-visible { background: rgba(0, 0, 0, .05); outline: none; }
.vc-bam:focus-visible { box-shadow: 0 0 0 2px var(--vc-mau); }
.vc-ten { font-weight: 600; }
.vc-phu { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-han { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vc-tre { color: #b8352a; font-weight: 700; }
.vc-con { color: var(--text-muted); }

/* Điện thoại: bỏ lưới 4 cột, xuống dòng cho dễ đọc. Bảng trên máy tính
   không đổi vì chỉ áp dưới 700px. */
@media (max-width: 700px) {
  .vc-dong { grid-template-columns: 1fr auto; row-gap: 2px; }
  .vc-phu { grid-column: 1 / -1; }
  .vc-han { grid-column: 1; }
}

/* ---------- Lộ trình hợp đồng trong hồ sơ ----------
   Bốn bậc xếp ngang. Bậc đã qua có dấu ✓ và mờ đi, bậc đang đứng được viền
   đậm, bậc chưa tới chỉ là đường nét đứt — nhìn một cái là biết đang ở đâu. */
.bh { margin: 14px 0 4px; }
.bh-ds {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.bh-o {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 8px; font-size: 13.5px;
  border: 1px solid var(--border); background: #fafbfc;
}
.bh-dau { font-size: 14px; line-height: 1; }
.bh-ten { font-weight: 600; }
.bh-ngay { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* KHÔNG dùng opacity để làm mờ bậc đã qua — làm mờ cả khối thì chữ ngày
   tháng rơi xuống 2,46:1, dưới chuẩn. Dùng màu dịu nhưng vẫn đủ tương phản. */
.bh-qua { background: #f5f6f8; }
.bh-qua .bh-ten { color: var(--text-muted); font-weight: 600; }
.bh-qua .bh-dau { color: #157045; }
.bh-nay {
  border-color: var(--primary); border-width: 2px; background: #fff5f6;
  box-shadow: 0 1px 4px rgba(238, 0, 51, .14);
}
.bh-nay .bh-dau { color: var(--primary); }
.bh-nay .bh-ten { color: var(--primary-dark); }
.bh-sau { border-style: dashed; background: transparent; }
.bh-sau .bh-dau, .bh-sau .bh-ten, .bh-sau .bh-ngay { color: var(--text-muted); }

.bh-chan { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }
.bh-chan.bh-gap { color: #b45309; font-weight: 600; }
.bh-chua { margin: 8px 0 0; font-size: 14px; color: var(--text-muted); }

/* Điện thoại: 4 cột ngang thành 2 hàng 2 cột cho đỡ bóp chữ. */
@media (max-width: 700px) {
  .bh-ds { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Cần tuyển bao nhiêu (Dashboard) ---------- */
.ct-hop {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 22px;
}
.ct-tom { margin: 0 0 4px; font-size: 15px; }
.ct-nguon { margin: 0 0 12px; font-size: 13.5px; color: var(--text-muted); }
.ct-trong { margin: 0; font-size: 15px; color: var(--text-muted); }
.ct-thieu { color: #b8352a; font-weight: 700; }
.ct-tuyen { color: #1d5fa8; font-weight: 700; }
.ct-ok { color: #1c7a4a; font-weight: 600; }
.ct-thieu-mau { color: var(--text-muted); font-size: 13.5px; }

/* Bảng có 7 cột (thêm cột Số lớp khi gộp "Cần mở bao nhiêu lớp" vào),
   màn hẹp thì cuộn ngang trong khung riêng chứ không đẩy cả trang lệch đi. */
.ct-bang-boc { overflow-x: auto; }
.ct-bang { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ct-bang th, .ct-bang td { padding: 8px 10px; text-align: right; white-space: nowrap; }
.ct-bang th:first-child, .ct-bang td:first-child { text-align: left; }
.ct-bang thead th {
  font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .02em;
}
.ct-bang tbody tr { border-bottom: 1px solid #f0f1f4; }
.ct-bang tbody tr:last-child { border-bottom: none; }
.ct-bang tbody td { font-variant-numeric: tabular-nums; }
.ct-da { font-weight: 600; }
.ct-du td { color: var(--text-muted); }
.ct-du .ct-da { color: var(--text); }

.ct-luu-y { margin: 12px 0 0; padding-left: 18px; font-size: 14px; color: var(--text-muted); }
.ct-luu-y li { margin-bottom: 5px; }
.ct-luu-y li:last-child { margin-bottom: 0; }

/* ---- "Thử con số khác" — phần từng nằm trong cửa sổ Đường ống ----
   Ngồi TRONG khối Cần tuyển, ngăn bằng nét đứt để thấy đây là cùng một phép
   tính chỉ đổi con số mục tiêu, không phải một khối tính riêng. */
.ct-thu { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ct-thu-dau { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ct-thu-nhan { font-size: 14px; font-weight: 700; }
.ct-thu-dau label { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.ct-thu-dau .loc-o { max-width: 220px; }
.ct-thu-dau .do-o { max-width: 110px; }
.ct-thu-phu { font-size: 13.5px; color: var(--text-muted); }
.ct-thu-chua { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }
.ct-nho { font-size: 13px; opacity: .85; }

/* ---- Hai con số đầu vào còn lại ở cửa sổ Đường ống ---- */
.do-dau-vao { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; }
.do-dv-o {
  flex: 1 1 210px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 13px; display: flex; flex-direction: column; gap: 2px;
}
.do-dv-nhan { font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); }
.do-dv-so { font-size: 29px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.do-dv-phu { font-style: normal; font-size: 13.5px; color: var(--text-muted); }

/* ---------- Dữ liệu cần soát ---------- */
.soat-tom { margin: 0 0 14px; font-size: 15px; color: var(--text-muted); }
.soat-do { color: #b8352a; }
.soat-sach { margin: 0; font-size: 15px; color: #1c7a4a; font-weight: 600; }
.soat-tieu-de {
  margin: 18px 0 8px; font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.soat-tieu-de:first-of-type { margin-top: 0; }

.soat-nhom {
  border-left: 4px solid var(--soat-mau, var(--border)); border-radius: 6px;
  background: var(--soat-nen, #fafbfc); margin-bottom: 8px;
}
.soat-nang { --soat-mau: #b8352a; --soat-nen: #fdf4f3; }
.soat-vua  { --soat-mau: #8a6d1f; --soat-nen: #fdfbf2; }
.soat-nhom > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; font-weight: 700; font-size: 15px; list-style: none;
}
.soat-nhom > summary::-webkit-details-marker { display: none; }
.soat-nhom > summary::before { content: '▸'; color: var(--soat-mau); font-size: 13.5px; }
.soat-nhom[open] > summary::before { content: '▾'; }
.soat-nhan { flex: 1; }
.soat-dem {
  background: var(--soat-mau); color: #fff; border-radius: 999px;
  min-width: 24px; text-align: center; padding: 1px 8px; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.soat-vi { margin: 0 12px 8px 24px; font-size: 14px; color: var(--text-muted); }
.soat-ds { list-style: none; margin: 0; padding: 0 12px 10px 24px;
  display: flex; flex-direction: column; gap: 2px; }
.soat-dong {
  display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 1fr) minmax(0, 1.8fr);
  align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: 6px;
  font-size: 14px; cursor: pointer;
}
.soat-dong:hover, .soat-dong:focus-visible { background: rgba(0, 0, 0, .05); outline: none; }
.soat-dong:focus-visible { box-shadow: 0 0 0 2px var(--soat-mau); }
.soat-ten { font-weight: 600; }
.soat-phu, .soat-ct { color: var(--text-muted); }

@media (max-width: 700px) {
  .soat-dong { grid-template-columns: 1fr; row-gap: 1px; }
}

/* ---------- Cảnh báo lệch bất thường ----------
   Nằm ngay trên bảng "Cần tuyển" nên phải nổi hơn hẳn — đây là thứ cần thấy
   trước tiên khi mở Dashboard. Chỉ hiện khi CÓ bất thường, không thì trống. */
.lc-hop {
  background: #fdf6f0; border: 1px solid #f0d5bd; border-left: 4px solid #b45309;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 22px;
}
.lc-tieu-de { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #8a4708; }
.lc-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lc-dong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; }
.lc-da { font-weight: 700; min-width: 120px; }
.lc-lan { color: #8a4708; }
.lc-chi-tiet { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lc-ghi-chu { margin: 10px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* ---------- Dashboard: chia nhóm theo mạch đọc ----------
   Số thứ tự ở đây MANG NGHĨA: 1 đang thế nào -> 2 phải làm gì -> 3 chuẩn bị
   gì -> 4 xem chi tiết. Đó là lý do dùng số chứ không phải để trang trí. */
/* ---- Bố cục Dashboard: xếp theo việc, không phải một cột dài ---- */
.dash-o { margin-bottom: 18px; }
.dash-o:last-child { margin-bottom: 0; }
.dash-o.hidden { display: none; }
/* Hai cột: bên trái việc phải làm hôm nay, bên phải chuyện sắp tới. Đọc
   ngang thay vì cuộn dọc — đó là chỗ cắt được gần một màn hình. */
.dash-cot {
  /* minmax(0,1fr) chứ không phải 1fr: bảng rộng bên trong một cột sẽ đẩy
     cột đó phình ra, đo được 448 / 674 thay vì chia đôi. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px;
  align-items: start; margin-bottom: 18px;
}
.dash-cot > .dash-o { margin-bottom: 0; }
@media (max-width: 1000px) { .dash-cot { grid-template-columns: minmax(0, 1fr); } }

/* Thanh nút mở báo cáo: 6 nút + ô chọn tháng vỡ 2 hàng, cao 91px. Nén lại
   cho vừa MỘT hàng — chúng đều là "mở một cửa sổ", không đáng chiếm chỗ như
   nội dung chính. */
#view-dashboard .toolbar { gap: 6px; }
#view-dashboard .toolbar .btn-baocao { padding: 6px 10px; font-size: 13.5px; }


/* Tiêu đề từng ô. Nhỏ và viết hoa cho ra dáng NHÃN chứ không phải tiêu đề
   cấp một — bốn tiêu đề to xếp dọc là một phần lý do màn hình trông rối. */
.dash-o .dash-section-title {
  font-size: 13.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 8px;
}
.dash-o .dash-section-title:first-of-type { margin-top: 0; }

/* ---------- Đường cong sống sót ---------- */
/* Chặn bề ngang chứ không để SVG giãn hết khung. Tỷ lệ 720x260 mà khung rộng
   1900px thì biểu đồ cao gần 690px — màn hình 1080px không nhìn nổi cả hình
   lẫn con số một lúc, phải cuộn hai lần mới xem hết. Chặn ở 980px cho biểu đồ
   cao chừng 354px, vừa một tầm mắt. */
.sc-do { margin: 4px 0 6px; overflow-x: auto; }
.sc-do svg { display: block; min-width: 560px; width: 100%; max-width: 980px; height: auto; }
.sc-luoi { stroke: var(--border); stroke-width: 1; }
.sc-truc { fill: var(--text-muted); font-size: 13px; }
.sc-moc-vach { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.sc-duong { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.sc-cham { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.sc-cham-mo { fill: var(--text-muted); }
/* Vùng còn quá ít người theo dõi — tô mờ để không ai đọc con số ở đó như thật */
.sc-vung-mo { fill: var(--text-muted); opacity: .07; }
.sc-ghi-mo { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); }
/* Chú thích trục để ngoài SVG — để trong thì nó đè lên nhãn mốc N30 ở góc trái. */
.sc-truc-chu { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); }

.sc-luoi-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0 0; }
.sc-o {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); display: flex; flex-direction: column; gap: 2px;
}
.sc-o-mo { opacity: .68; }
.sc-o-nhan { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted); }
.sc-o-so { margin: 2px 0 0; font-size: 29px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--primary-dark); }
.sc-o-phu { margin: 0; font-size: 13.5px; color: var(--text-muted); }

.sc-ket { margin: 14px 0 0; font-size: 15.5px; }
.sc-bang-boc { overflow-x: auto; margin-top: 14px; }
.sc-bang { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sc-bang th, .sc-bang td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.sc-bang thead th { font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; }
.sc-bang tbody tr:last-child td { border-bottom: none; }
.sc-bang .sc-p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-pham-vi { margin: 14px 0 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* Nút chuyển giữa "gộp chung" và "tách theo đợt" của đường cong sống sót */
.sc-nut { display: inline-flex; gap: 2px; padding: 3px; margin: 4px 0 12px;
  background: #eef0f3; border-radius: 9px; }
.sc-nut-1 {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted);
  padding: 6px 14px; border-radius: 7px;
}
.sc-nut-1:hover { color: var(--text); }
.sc-nut-1.dang { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.sc-nut-1:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Chấm màu nhận diện đợt trong bảng so sánh */
.sc-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: baseline; }
.sc-chua { color: var(--text-muted); font-style: italic; }
.sc-xau { color: #b8352a; }
.sc-tot { color: #1c7a4a; }

/* ---------- Đường 90 ngày, nằm trong khối Quân số sắp tới ---------- */
.db-nen { fill: var(--primary); opacity: .07; }
.db-duong { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
/* Vạch cam kết là mốc phải giữ — nét đứt để không lẫn với đường quân số. */
.db-vach-ck { stroke: #1c7a4a; stroke-width: 2; stroke-dasharray: 6 5; }
.db-ck-chu { fill: #1c7a4a; font-size: 13.5px; font-weight: 700; }
.db-vach-tut { stroke: #b8352a; stroke-width: 2; stroke-dasharray: 4 4; }
.db-cham-tut { fill: #b8352a; stroke: var(--surface); stroke-width: 2.5; }

/* Đường "nếu không ai nghỉ ngoài dự kiến" — xám phiến, nét đứt để lùi ra sau
   đường chính. Đo trên nền .db-khung (var(--surface) = #ffffff): 5,83:1,
   thừa ngưỡng 3:1 của đồ hoạ. */
.db-duong-chac {
  fill: none; stroke: #5b6675; stroke-width: 2; stroke-dasharray: 5 4;
  stroke-linejoin: round;
}
/* Vùng kẹp giữa hai đường CHÍNH LÀ phần rơi dự kiến — tô nhạt để đọc ra
   ngay "khoảng này là số người sẽ mất". */
.db-vung-roi { fill: var(--primary); opacity: .13; stroke: none; }
.db-vach-thang { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.db-thang-chu { fill: var(--text-muted); font-size: 13px; font-weight: 700; }
.db-cham-thang { fill: var(--primary); stroke: var(--surface); stroke-width: 2.5; }
.db-cham-chac { fill: #5b6675; stroke: var(--surface); stroke-width: 2.5; }

.db-chu-giai {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
  font-size: 13.5px; color: var(--text-muted);
}
.db-cg { display: inline-flex; align-items: center; gap: 6px; }
.db-cg i { width: 16px; height: 3px; border-radius: 2px; flex: none; display: block; }
.db-cg-chac { background: repeating-linear-gradient(to right, #5b6675 0 5px, transparent 5px 9px); }
.db-cg-qs { background: var(--primary); }
.db-cg-vung { height: 11px !important; background: rgba(238, 0, 51, .13); border-radius: 2px !important; }

/* Khối đường 90 ngày ngồi TRONG khối Quân số sắp tới — vạch ngăn nhẹ để
   thấy đây là phần nối tiếp của bảng phép tính, không phải khối khác. */
.db-bang-90 { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.db-chua-du {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 13.5px; color: var(--text-muted);
}

/* Chú thích nhỏ dưới nhãn từng dòng — nói ngay tại chỗ con số đó cộng tay
   được hay không, khỏi phải đi tìm lời giải thích ở cuối khối. */
.db-nhan em {
  display: block; font-style: normal; font-size: 13.5px;
  color: var(--text-muted); opacity: .85; margin-top: 1px;
}
.db-hang.db-ket .db-nhan em { font-weight: 400; color: var(--text-muted); }
/* Tổng thứ hai: cùng cỡ với tổng thứ nhất vì cả hai đều là câu trả lời,
   chỉ khác nhau ở giả định. Vạch ngăn nét đứt cho biết nó suy ra từ dòng
   trên chứ không phải một phép cộng mới. */
.db-hang.db-ket-2 { border-top: 1px dashed var(--text-muted); }
.db-hang.db-roi .db-nhan { padding-right: 8px; }

.db-vi-sao { margin-top: 12px; font-size: 14px; }
.db-vi-sao summary { cursor: pointer; font-weight: 600; color: var(--primary-dark); }
.db-vi-sao .db-luu-y { margin-top: 6px; }



/* ---------- Bảng lương: ô mã ca không hiểu được ----------
   Mọi mã lạ đều rơi về 0 công. Không tô ra thì một ô gõ sai nằm im giữa 31
   ô và người đó mất nguyên một ngày lương mà không ai biết. */
/* Nền hồng nhạt gần như không khác nền ô thường (đo được 1,14) — thứ thật
   sự chỉ ra ô hỏng là VIỀN và màu chữ, nên làm viền dày hẳn lên. */
.payroll-input.payroll-ma-la {
  background: #fdecea; border: 2px solid #b8352a; color: #8c261d; font-weight: 700;
}
.payroll-canh-bao {
  margin: 8px 0 0; padding: 9px 13px; border-radius: 8px; font-size: 14px;
  background: #fdecea; border-left: 3px solid #b8352a; color: #7d241c;
}

/* ---------- Phân bổ chi phí: khe hở giữa tiền nhập vào và tiền chia ra ---------- */
.stat-card.cp-lech-khop .stat-value { color: #1c7a4a; }
.stat-card.cp-lech-nhe  .stat-value { color: #8a5c0f; }
.stat-card.cp-lech-nang .stat-value { color: #b8352a; }
.cp-lech-chu {
  margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; font-size: 14px;
  background: var(--bg); border-left: 3px solid var(--border); color: var(--text-muted);
}

/* ---- Kế hoạch mở lớp ---- */
.khl-thanh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }

/* Ô nhập lớp mới — thay cho ba hộp prompt() của trình duyệt.
   Dùng LƯỚI có bề rộng khai sẵn, không thả flex: thả flex thì ô Ghi chú co
   giãn tới đâu không biết trước, và nút bị đẩy đè lên nó. Nút xuống hàng
   riêng — nó là hành động, không phải một ô nhập nữa. */
/* Ô mẫu trong bảng tỷ lệ: con số chính đậm, phần bóc tách nhạt hơn một bậc
   để không đánh nhau với hai con số phần trăm bên cạnh. */
.khl-mau-boc { display: block; font-size: 13.5px; color: var(--text-muted); }
.khl-mau-ky { display: block; font-size: 13px; color: var(--text-muted); opacity: .85; }
.khl-mau-trong { font-style: italic; color: var(--text-muted); }

.khl-form {
  display: grid; gap: 10px 14px;
  grid-template-columns: 160px 210px 110px minmax(160px, 1fr);
  padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.khl-form-o { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.khl-form-o label { font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
.khl-form-o .loc-o { width: 100%; }
.khl-form-nut {
  grid-column: 1 / -1; display: flex; gap: 8px; align-items: center;
  padding-top: 2px; border-top: 1px solid var(--border); margin-top: 2px;
}
.khl-form-loi { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--pt-xau, #b8352a); }
.khl-form-loi:empty { display: none; }
@media (max-width: 700px) {
  .khl-form { grid-template-columns: 1fr 1fr; }
  .khl-form-o:nth-child(4) { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
  .khl-form { grid-template-columns: 1fr; }
}
.khl-thanh label { font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
.khl-so { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 14px; }
.khl-so th { text-align: left; font-weight: 700; padding: 5px 10px 5px 0; white-space: nowrap; }
.khl-so td { padding: 5px 14px 5px 0; }
.khl-so .khl-mau { color: var(--text-muted); font-size: 13.5px; }
.khl-bang .khl-gc { font-size: 13.5px; color: var(--text-muted); }
.khl-ket {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 15px;
  background: var(--surface-2, #f4f5f7); border: 1px solid var(--border, #dcdfe4);
}
.khl-ket.khl-du { background: #eaf7ef; border-color: #b6ddc4; color: #14532d; }
.khl-ket.khl-thieu { background: #fdeceb; border-color: #f0bdb8; color: #7f2018; }
@media (prefers-color-scheme: dark) {
  .khl-ket.khl-du { background: #10281a; border-color: #2c5c3d; color: #b7e6c8; }
  .khl-ket.khl-thieu { background: #2c1512; border-color: #6b2d26; color: #f3b8b1; }
}

/* =======================================================================
   KHUNG KHỐI PHÂN TÍCH — dùng chung cho các màn con của Dashboard
   -----------------------------------------------------------------------
   Đo trước khi làm: 50 đoạn chữ / 5.989 ký tự giải thích trong 6 màn con,
   mà chỉ có ĐÚNG 1 ô bung và 8 biểu tượng. Ba màn gánh 94% lượng chữ.
   Không xoá chữ nào — xếp lại thành 4 tầng, xem ghi chú ở app.js.
   ======================================================================= */

/* Dải mục lục đầu màn. Các màn này dài, không có nó thì phải cuộn mò. */
.kh-muc {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.kh-muc-o {
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--text-muted); background: #f2f5fa;
  border: 1px solid #e0e6ef; border-radius: 999px; padding: 5px 12px;
  transition: background .15s, border-color .15s, color .15s;
}
.kh-muc-o:hover { background: #fdeaea; border-color: #f0b4b4; color: var(--primary-dark); }

/* --- Một khối --- */
.kh {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 16px; background: var(--surface);
  scroll-margin-top: 14px;
}
/* Nháy nhẹ khi nhảy tới từ mục lục — không có thì bấm xong không biết
   mình đã tới đâu. */
.kh-sang { animation: kh-nhay 1.2s ease-out; }
@keyframes kh-nhay {
  0%, 40% { box-shadow: 0 0 0 3px rgba(200, 16, 46, .28); }
  100%    { box-shadow: 0 0 0 3px rgba(200, 16, 46, 0); }
}

/* Tầng ① — huy hiệu + tên + câu hỏi khối đó trả lời */
.kh-dau {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 15px; background: #f7f9fc; border-bottom: 1px solid #e6ebf3;
}
.kh-hh {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
}
.kh-hh.do   { background: #fdeaea; color: #a3282a; } /* 6,27:1 */
.kh-hh.xanh { background: #e6f6ec; color: #1d6b3f; } /* 5,81:1 */
.kh-hh.vang { background: #fff4e0; color: #8a5300; } /* 5,81:1 */
.kh-hh.tim  { background: #efe9fb; color: #5b3fa8; } /* 6,51:1 */
.kh-hh.lam  { background: #e7effd; color: #1f4e78; } /* 7,51:1 */
/* Huy hiệu là ô vuông 38px, icon phải to hơn cỡ chữ nút mới cân */
.kh-hh .ico-nut { width: 1.15em; height: 1.15em; margin: 0; vertical-align: 0; }
.kh-tieu { min-width: 0; }
.kh-ten { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.25; }
/* Câu hỏi mà khối trả lời — để người đọc biết CÓ NÊN đọc tiếp hay không. */
.kh-hoi { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); }

.kh-than { padding: 13px 15px; }

/* Tầng ② — câu trả lời, điểm nhấn duy nhất của khối */
.kh-tl {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 13px;
  border-left: 3px solid var(--text-muted); border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(16, 24, 40, .05), rgba(16, 24, 40, 0));
}
.kh-tl-so { font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.kh-tl-chu { font-size: 15px; font-weight: 700; color: var(--text); }
.kh-tl.tone-tot  { border-left-color: #12703a; background: linear-gradient(90deg, #e6f6ec, rgba(230, 246, 236, 0)); }
.kh-tl.tone-xau  { border-left-color: #c8102e; background: linear-gradient(90deg, #fdeaea, rgba(253, 234, 234, 0)); }
.kh-tl.tone-vua  { border-left-color: #b3760a; background: linear-gradient(90deg, #fff4e0, rgba(255, 244, 224, 0)); }
.kh-tl.tone-lanh { border-left-color: #2563eb; background: linear-gradient(90deg, #e7effd, rgba(231, 239, 253, 0)); }
.kh-tl.tone-tot  .kh-tl-so { color: #12703a; }
.kh-tl.tone-xau  .kh-tl-so { color: #a11414; }
.kh-tl.tone-vua  .kh-tl-so { color: #8a5a08; }
.kh-tl.tone-lanh .kh-tl-so { color: #1d4ed8; }
/* Câu trả lời là CHỮ (tên dự án, tên tháng) chứ không phải con số. */
.kh-tl.chu .kh-tl-so { font-size: 20px; }

/* Tầng ④ — chữ giải thích, gói lại, mặc định đóng */
.kh-bung { border-top: 1px dashed #dfe4ec; margin-top: 10px; padding-top: 8px; }
.kh-bung summary {
  font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; list-style: none; user-select: none;
}
.kh-bung summary::-webkit-details-marker { display: none; }
.kh-bung summary::before { content: '▸ '; color: #9aa3b2; }
.kh-bung[open] summary::before { content: '▾ '; }
.kh-bung summary:hover { color: var(--primary-dark); }
.kh-bung-noi { padding-top: 7px; }
.kh-bung-noi > p:first-child { margin-top: 0; }
.kh-bung-noi > p:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .kh-dau { padding: 10px 12px; gap: 10px; }
  .kh-hh { width: 32px; height: 32px; font-size: 17px; }
  .kh-than { padding: 11px 12px; }
  .kh-tl-so { font-size: 23px; }
}

/* Khuôn NHẸ: ba khối scKhungHtml / vsKhungHtml / qlKhungHtml vốn đã dùng
   .pt-muc và có nhiều nhánh vẽ khác nhau. Thay vì đập đi xây lại (dễ lệch
   nhánh), giữ nguyên khung cũ và chỉ gắn thêm huy hiệu + câu hỏi vào <h3>. */
.pt-muc.kh-nhe { scroll-margin-top: 14px; }
.pt-muc.kh-nhe > h3 {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid #e6ebf3;
}
.pt-muc.kh-nhe > h3 .kh-tieu { display: flex; flex-direction: column; min-width: 0; }
.pt-muc.kh-nhe > h3 .kh-ten { font-size: 17px; font-weight: 800; line-height: 1.25; }
.pt-muc.kh-nhe > h3 .kh-hoi {
  font-size: 13.5px; font-weight: 400; color: var(--text-muted); margin-top: 2px;
}

/* Ô Trạng thái ở bảng "Từng lớp" là NÚT mở cửa sổ tick. Trước đây nó chỉ là
   chữ, người dùng nhìn thấy "mặc định" mà bấm vào không được gì — mà lớp chỉ
   có trong HR MASTER (chưa nhập vào Kế hoạch mở lớp) thì đó là lối vào DUY
   NHẤT để chốt. */
.cl-nut-chot {
  font: inherit; cursor: pointer; padding: 3px 9px; border-radius: 999px;
  border: 1px dashed var(--border); background: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.cl-nut-chot:hover { border-color: var(--primary); background: #fdeaea; }
.cl-nut-chot .cl-mac-dinh { color: var(--text-muted); }

/* Dải khoá của cửa sổ chốt lớp. Tên .cl-khoa-dai chứ KHÔNG phải .cl-khoa —
   lớp đó đã thuộc về dòng "đã lên line" trong danh sách tick. */
.cl-khoa-dai {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 11px; padding: 9px 12px; border-radius: 8px;
  background: #fff8e6; border: 1px solid #e8d08a;
}
.cl-khoa-dai.cl-kd-mo { background: #e6f6ec; border-color: #a9ddbc; }
.cl-kd-ico { font-size: 17px; line-height: 1; flex: none; }
.cl-kd-chu { font-size: 13.5px; color: #6b4e00; }
.cl-khoa-dai.cl-kd-mo .cl-kd-chu { color: #12703a; }
.cl-khoa-dai .btn { margin-left: auto; }
/* Ô Trạng thái của lớp ĐÃ chốt: vẫn bấm mở xem được, nhưng phải nhìn ra
   ngay là đã khoá chứ không mời gọi bấm vào sửa. */
.cl-nut-chot.cl-nut-khoa { border-style: solid; border-color: #e8d08a; background: #fff8e6; }
.cl-nut-chot.cl-nut-khoa:hover { border-color: #d99b00; background: #fff2d1; }

/* Bảng trong Sổ tay sử dụng. Không có luật riêng thì nó ăn `table` toàn cục
   với min-width: 720px — trong cột sổ tay hẹp là bắt kéo ngang. */
.guide-body .tbl { min-width: 0; font-size: 14px; margin: 10px 0 4px; }
.guide-body .tbl th { background: #f2f5fa; padding: 7px 10px; }
.guide-body .tbl td { padding: 7px 10px; vertical-align: top; }
.guide-body .tbl td:first-child { width: 38%; }

/* Nút Huỷ user của người ĐIỀU CHUYỂN NỘI BỘ. Vẫn phải huỷ user dự án cũ,
   nhưng không tô đỏ như người rời công ty — đây không phải nghỉ việc. */
.link-btn.dc-nut { color: #1d4ed8; }
.link-btn.dc-nut:hover { color: #12318f; }
/* Dòng "điều chuyển sang..." trong Lịch sử làm việc. */
.ls-chuyen {
  margin: 3px 0 0; font-size: 13.5px; color: #1d4ed8;
  background: #e7effd; border-radius: 6px; padding: 4px 9px; display: inline-block;
}
/* Huy hiệu phụ cho hàng ĐÃ huỷ user trước khi có nhóm lý do điều chuyển.
   Đọc từ nhóm lý do hiện tại, nên sửa nhóm lý do là hiện ngay — không phải
   huỷ user lại lần nữa. */
.badge.dc-huy-hieu { background: #e7effd; color: #1d4ed8; margin-left: 4px; }

/* HAI cờ riêng cạnh tên dự án, mỗi cờ cắm trên CỘT và mang SỐ trên lá cờ:
     đỏ + sao vàng = kiêm nhiệm  ·  lam = điều chuyển nội bộ
   Vẽ bằng SVG trong app.js (dashCoSvg) — emoji không đặt được số lên trên. */
.dash-co { display: inline-flex; align-items: flex-end; margin-left: 5px; line-height: 1; cursor: default; }
.dash-co svg { display: block; overflow: visible; }
/* Nhấc nhẹ khi rê chuột: cho biết có chú thích để đọc. */
.dash-co { transition: transform .15s; }
.dash-co:hover { transform: translateY(-2px); }

/* =======================================================================
   MÀN HÌNH KPI
   -----------------------------------------------------------------------
   Bố cục theo yêu cầu "dễ nhập và đánh giá": ô nhập gom theo TIÊU CHÍ, và
   điểm của đúng tiêu chí đó hiện NGAY TRÊN ĐẦU nhóm — gõ tới đâu thấy điểm
   tới đó, không phải kéo xuống cuối mới biết.
   ======================================================================= */
.kpi-trang-thai { font-size: 13.5px; color: var(--text-muted); }
.kpi-khoa { background: #fff8e6; border: 1px solid #e8d08a; color: #6b4e00;
  border-radius: 999px; padding: 3px 11px; font-weight: 600; }
.kpi-cong-cu { margin-left: auto; display: flex; gap: 7px; }

.kpi-chuan { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.kpi-chuan > summary { font-weight: 700; cursor: pointer; font-size: 15px; }
.kpi-giai-thich { margin: 7px 0 9px; font-size: 13.5px; color: var(--text-muted); }

.kpi-chung { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.kpi-chung h3 { margin: 0; font-size: 15.5px; }

/* Huy hiệu / màu dùng chung cho dải tổng kết và bảng tiêu chí. */
.kpi-vai-tro { font-size: 13px; font-weight: 600; background: #eef1f6;
  border-radius: 999px; padding: 2px 9px; color: var(--text-muted); }
.kpi-vai-tro.ql { background: #fdeaea; color: #a11414; }
.kpi-tt-diem.tone-a { background: #e6f6ec; border-color: #a9ddbc; color: #12703a; }
.kpi-tt-diem.tone-b { background: #e7effd; border-color: #b9cdf7; color: #1d4ed8; }
.kpi-tt-diem.tone-c { background: #fff8e6; border-color: #e8d08a; color: #6b4e00; }
.kpi-tt-diem.tone-d { background: #eef1f6; border-color: #d9dee7; color: #4b5261; }
.kpi-tt-diem.tone-e { background: #fdeaea; border-color: #f0b4b4; color: #a11414; }
.kpi-ma { font-size: 13px; font-weight: 700; color: #fff; background: #64748b;
  border-radius: 5px; padding: 2px 7px; flex: none; }
.kpi-thieu { font-size: 13px; color: #8a5a08; background: #fff8e6;
  border-radius: 999px; padding: 2px 9px; }

.kpi-o-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.kpi-o { display: flex; flex-direction: column; gap: 3px; }
.kpi-o > span { font-size: 13px; color: var(--text-muted); }
.kpi-o input { font-family: inherit; font-size: 14.5px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 7px; background: #fff;
  font-variant-numeric: tabular-nums; }
.kpi-o input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 45%, #fff); outline-offset: 1px; }
.kpi-o input:disabled { background: #f4f6f9; color: var(--text-muted); }

/* ---- Dải tổng kết, DÍNH TRÊN ĐẦU khi cuộn ----
   LƯỚI TỰ XUỐNG DÒNG, không phải hàng cuộn ngang. Bản đầu cho cuộn ngang
   thì người thứ 5 nằm ngoài mép mà không có dấu hiệu gì — người dùng tưởng
   hệ thống bỏ sót mất một nhân sự. Giấu người thì phải nói ra; ở đây tốt
   nhất là đừng giấu. */
.kpi-tom-tat { position: sticky; top: 0; z-index: 6; margin: 0 0 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 3px 12px rgba(15, 23, 42, .08); }
.kpi-tt-ds { display: grid; gap: 9px; padding: 11px;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); }

.kpi-tt { position: relative; padding: 9px 11px 11px;
  border: 1px solid var(--border); border-left: 4px solid #9aa3af;
  border-radius: 10px; background: #fbfcfe; }
.kpi-tt-tren { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.kpi-tt-ten { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hạng là một chữ cái — cho vào vòng tròn để mắt bắt được ngay từ xa. */
.kpi-tt-hang { flex: none; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
  color: #fff; background: #6b7280; }
.kpi-tt-giua { display: flex; align-items: baseline; gap: 8px; }
.kpi-tt-diem { display: inline-flex; align-items: baseline; gap: 2px;
  font-variant-numeric: tabular-nums; }
.kpi-tt-diem b { font-size: 21px; font-weight: 800; line-height: 1.15; }
.kpi-tt-diem em { font-size: 13px; font-style: normal; color: var(--text-muted); }
.kpi-tt-tien { margin-left: auto; font-size: 13px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Thanh no dần: liếc một cái là so được cả nhóm, không phải đọc từng số. */
.kpi-tt-thanh { height: 5px; margin-top: 7px; border-radius: 999px;
  background: #e6e9ef; overflow: hidden; }
.kpi-tt-thanh i { display: block; height: 100%; border-radius: 999px;
  background: #6b7280; transition: width .18s ease; }
.kpi-tt-thieu { display: inline-block; margin-top: 7px; font-size: 13px;
  color: #6b4a00; background: #fff2cc; border: 1px solid #e8d08a;
  border-radius: 999px; padding: 1px 9px; white-space: nowrap; cursor: help; }

/* Màu theo hạng — cùng bảng màu với chỗ khác trong app. */
.kpi-tt.tone-a { border-left-color: #12703a; background: #f2fbf6; }
.kpi-tt.tone-a .kpi-tt-hang, .kpi-tt.tone-a .kpi-tt-thanh i { background: #12703a; }
.kpi-tt.tone-a .kpi-tt-diem b { color: #12703a; }
.kpi-tt.tone-b { border-left-color: #1d4ed8; background: #f4f7fe; }
.kpi-tt.tone-b .kpi-tt-hang, .kpi-tt.tone-b .kpi-tt-thanh i { background: #1d4ed8; }
.kpi-tt.tone-b .kpi-tt-diem b { color: #1d4ed8; }
.kpi-tt.tone-c { border-left-color: #8a6300; background: #fffaef; }
.kpi-tt.tone-c .kpi-tt-hang, .kpi-tt.tone-c .kpi-tt-thanh i { background: #8a6300; }
.kpi-tt.tone-c .kpi-tt-diem b { color: #6b4e00; }
.kpi-tt.tone-d { border-left-color: #6b7280; background: #f7f8fa; }
.kpi-tt.tone-e { border-left-color: #a11414; background: #fdf5f5; }
.kpi-tt.tone-e .kpi-tt-hang, .kpi-tt.tone-e .kpi-tt-thanh i { background: #a11414; }
.kpi-tt.tone-e .kpi-tt-diem b { color: #a11414; }

.kpi-tt-nhac { margin: 0; padding: 0 12px 11px; font-size: 13.5px; color: #6b4e00; }

/* ---- Một TIÊU CHÍ = một khối; trong khối mỗi NGƯỜI một dòng ---- */
.kpi-khoi { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.kpi-khoi > h3 { display: flex; align-items: center; gap: 9px; margin: 0;
  padding: 11px 14px; font-size: 15.5px;
  background: linear-gradient(180deg, #f7f9fc, #f1f4f9);
  border-bottom: 1px solid var(--border); }
.kpi-bang-cuon { overflow-x: auto; }
.kpi-bang { width: 100%; border-collapse: collapse; }
.kpi-bang th, .kpi-bang td { padding: 7px 11px; text-align: left;
  border-bottom: 1px solid #eef1f6; }
.kpi-bang tbody tr:last-child th, .kpi-bang tbody tr:last-child td { border-bottom: none; }
.kpi-bang thead th { font-size: 13px; font-weight: 700; color: var(--text-muted);
  background: #fbfcfe; white-space: nowrap; }
.kpi-bang tbody tr:hover { background: #fafbfd; }
/* Cột tên DÍNH BÊN TRÁI: bảng cuộn ngang thì vẫn biết đang nhập cho ai. */
.kpi-bang .kpi-c-ten { position: sticky; left: 0; z-index: 2;
  background: var(--surface); font-weight: 700; font-size: 14.5px;
  white-space: nowrap; box-shadow: 1px 0 0 #eef1f6; }
.kpi-bang thead .kpi-c-ten { background: #fbfcfe; z-index: 3; }
.kpi-bang tbody tr:hover .kpi-c-ten { background: #fafbfd; }
.kpi-bang .kpi-c-ten .kpi-vai-tro { margin-left: 7px; }
/* width:100% ở ĐÚNG cột này làm nó hút hết chỗ thừa, các cột nhập co lại
   vừa nội dung. Không có nó thì ô số bị kéo dài cả nửa màn hình khi tiêu chí
   chỉ có một hai ô. */
.kpi-bang .kpi-c-diem { width: 100%; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; background: #fbfcfe; }
.kpi-bang .kpi-c-diem b { font-size: 16px; font-weight: 800; color: var(--primary-dark); }
.kpi-bang .kpi-c-diem em { font-size: 13px; font-style: normal; color: var(--text-muted); }
.kpi-bang td input { width: 100%; min-width: 132px; max-width: 210px; font-family: inherit;
  font-size: 14.5px; padding: 6px 9px; border: 1px solid var(--border);
  border-radius: 7px; background: #fff; font-variant-numeric: tabular-nums; }
.kpi-bang td.kpi-c-chu input { min-width: 190px; max-width: 320px; }
.kpi-bang td input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 45%, #fff);
  outline-offset: 1px; }
.kpi-bang td input:disabled { background: #f4f6f9; color: var(--text-muted); }

/* Cột "Thực đạt": con số người nhập quy ra tỷ lệ, so thẳng với chuẩn. */
.kpi-bang .kpi-c-that { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.kpi-bang thead .kpi-c-that { text-align: right; }
.kpi-chuan-nho { display: block; font-weight: 400; font-size: 13px;
  color: var(--text-muted); }
.kpi-that { font-size: 14.5px; font-weight: 700; }
.kpi-that.dat { color: #12703a; }
.kpi-that.hut { color: #a11414; }
.kpi-trong { color: var(--text-muted); }
.kpi-tu-dien { margin-left: 6px; font-style: normal; font-size: 13px;
  color: #12703a; background: #e6f6ec; border-radius: 999px; padding: 1px 8px; }

/* Mức chuẩn: khoá mặc định, có nút mở, và sổ ghi vết. */
.kpi-chuan-khoa { font-size: 13px; color: var(--text-muted); }
.kpi-chuan-mo { font-size: 13px; color: #a11414; font-weight: 700; }
.kpi-chuan-dem { font-size: 13px; color: #6b4e00; background: #fff2cc;
  border-radius: 999px; padding: 1px 9px; }
.kpi-chuan-nut { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; }
.kpi-chuan-nhac { font-size: 13.5px; color: #6b4e00; }
.kpi-chuan-vet { margin-top: 13px; border-top: 1px solid var(--border); padding-top: 11px; }
.kpi-chuan-vet h4 { margin: 0 0 8px; font-size: 14.5px; }
.kpi-chuan-vet > ul { margin: 0; padding-left: 18px; }
.kpi-vet-muc { margin-bottom: 8px; font-size: 13.5px; }
.kpi-vet-dau { font-weight: 700; }
.kpi-vet-muc ul { margin: 3px 0 0; padding-left: 16px; color: var(--text-muted); }
.kpi-vet-muc ul b { color: var(--text); }

/* Trạng thái kỳ: đang nhập → đã nộp → đã chốt. */
.kpi-tt-nhan { font-size: 13.5px; font-weight: 700; border-radius: 999px;
  padding: 3px 11px; white-space: nowrap; }
.kpi-tt-nhan.nhap { color: #12703a; background: #e6f6ec; }
.kpi-tt-nhan.nop  { color: #1d4ed8; background: #e7effd; }
.kpi-tt-nhan.chot { color: #6b4a00; background: #fff2cc; }

/* Yêu cầu xin sửa. */
.kpi-yeu-cau { margin: 0 0 14px; }
.kpi-yc { border: 1px solid #b9cdf7; border-left: 4px solid #1d4ed8;
  border-radius: 0 10px 10px 0; background: #f4f7fe; padding: 11px 14px; }
.kpi-yc.admin { border-color: #e8d08a; border-left-color: #d99b00; background: #fffaef; }
.kpi-yc-dau { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.kpi-yc-chi { font-size: 13.5px; color: var(--text-muted); }
.kpi-yc-dong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid #eadfc0; }
.kpi-yc-ky { font-weight: 700; font-size: 14px; white-space: nowrap; }
.kpi-yc-o { display: block; margin: 6px 0 9px; }
.kpi-yc-o > span { display: block; font-size: 13.5px; color: var(--text-muted); margin-bottom: 4px; }
.kpi-yc-o textarea { width: 100%; font-family: inherit; font-size: 14.5px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; resize: vertical; }
.kpi-yc-nut { display: flex; gap: 9px; flex-wrap: wrap; }

/* "Tháng sau kéo tiêu chí nào" */
.kpi-phan-tich { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; margin: 6px 0 22px; }
.kpi-phan-tich > h3 { margin: 0 0 3px; font-size: 16px; }
.kpi-pt-luoi { display: grid; gap: 11px; margin-top: 11px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.kpi-pt-the { border: 1px solid var(--border); border-radius: 10px;
  background: #fbfcfe; padding: 11px 13px; }
.kpi-pt-ten { display: flex; align-items: baseline; gap: 9px;
  font-size: 15px; font-weight: 800; margin-bottom: 5px; }
.kpi-pt-tong { margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: 17px; color: var(--primary-dark); }
.kpi-pt-tong em { font-size: 13px; font-style: normal; color: var(--text-muted); }
.kpi-pt-dich { margin: 0 0 8px; font-size: 13.5px; color: #6b4e00;
  background: #fff8e6; border-radius: 7px; padding: 5px 9px; }
.kpi-pt-tron { margin: 0; font-size: 13.5px; color: #12703a; }
.kpi-pt-ds { margin: 0; padding-left: 20px; }
.kpi-pt-ds li { margin-bottom: 7px; font-size: 13.5px; }
.kpi-pt-ma { font-size: 13px; font-weight: 700; color: #fff; background: #64748b;
  border-radius: 5px; padding: 1px 6px; margin-right: 5px; }
.kpi-pt-ten-tc { font-weight: 700; }
.kpi-pt-mat { color: #a11414; font-weight: 800; margin-left: 5px;
  font-variant-numeric: tabular-nums; }
.kpi-pt-so { display: block; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kpi-pt-con { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }

/* ---- Xem cả năm: 12 tháng một dòng, để xếp thưởng Tết ---- */
.kpi-nam { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.kn-dau { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 15px 0; }
.kn-dau h3 { margin: 0; font-size: 16.5px; }
.kn-loc { margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; white-space: nowrap; }
.kpi-nam .kpi-giai-thich { padding: 0 15px; }
.kn-nhac { margin: 9px 15px 0; padding: 9px 12px; border-left: 4px solid #d99b00;
  border-radius: 0 8px 8px 0; background: #fff6d9; color: #6b4a00; font-size: 13.5px; }

.kn-bang th, .kn-bang td { padding: 7px 9px; }
/* Dải ngăn giữa các bộ phận — ba bộ phận ba thang thưởng, dính liền thì đọc
   như một bảng xếp hạng chung. */
.kn-ngan th { position: sticky; left: 0; background: #eef2f8; font-size: 14px;
  font-weight: 800; text-align: left; letter-spacing: .01em; }
.kn-bang .kn-hang { width: 1%; text-align: right; color: var(--text-muted);
  font-weight: 400; font-size: 13.5px; }
.kn-bang .kn-ten { position: sticky; left: 0; z-index: 2; background: var(--surface);
  font-weight: 700; font-size: 14.5px; white-space: nowrap; box-shadow: 1px 0 0 #eef1f6; }
.kn-bang thead .kn-ten { background: #fbfcfe; z-index: 3; }
.kn-bang tbody tr:hover .kn-ten { background: #fafbfd; }
/* Mỗi ô là điểm một tháng, tô theo hạng của chính tháng đó — nhìn ngang một
   dòng là thấy ai đang xuống dốc, ai đều tay. */
.kn-bang .kn-o { width: 1%; text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 700; }
.kn-bang thead .kn-o { font-weight: 700; color: var(--text-muted); }
.kn-o.trong { color: #c3c9d4; font-weight: 400; }
.kn-o.tone-a { background: #e6f6ec; color: #12703a; }
.kn-o.tone-b { background: #e7effd; color: #1d4ed8; }
.kn-o.tone-c { background: #fff8e6; color: #6b4e00; }
.kn-o.tone-d { background: #eef1f6; color: #4b5261; }
.kn-o.tone-e { background: #fdeaea; color: #a11414; }
/* Kỳ chưa chốt: gạch chéo mờ, số vẫn đọc được. Giấu đi thì người ta tưởng
   con số đã chắc.
   Sọc đậm 10% kéo tương phản chữ hạng A xuống 4,39:1 — DƯỚI chuẩn. Ở 6% thì
   4,82:1. Đo rồi mới chọn, đừng ước lượng. */
.kn-o.chua-chot { background-image: repeating-linear-gradient(135deg,
  rgba(0,0,0,.06) 0 2px, transparent 2px 6px); }
.kn-bang .kn-soky { width: 1%; text-align: center; color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
.kn-bang .kn-tb { width: 1%; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.kn-tb b { font-size: 17px; font-weight: 800; }
.kn-tb.tone-a b { color: #12703a; } .kn-tb.tone-b b { color: #1d4ed8; }
.kn-tb.tone-c b { color: #6b4e00; } .kn-tb.tone-d b { color: #4b5261; }
.kn-tb.tone-e b { color: #a11414; }
.kn-bang .kn-loai { white-space: nowrap; font-size: 13.5px; font-weight: 700; }
.kn-bang .kn-tien { width: 100%; text-align: right; white-space: nowrap;
  font-size: 13.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.kpi-them-o { margin: 4px 0 20px; }

@media (max-width: 620px) {
  .kpi-cong-cu { margin-left: 0; width: 100%; }
}

/* Bảng cấp quyền KPI trong Quản trị. */
.kq-bang td { vertical-align: middle; }
.kq-bang small { color: var(--text-muted); font-size: 13px; }
.kq-bang select { font-family: inherit; font-size: 14px; padding: 4px 7px;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.kq-tick { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }
/* Dòng chưa bật thì mờ đi — nhìn lướt là biết ai đang thấy bộ phận nào. */
.kq-tat { opacity: .5; }
.kq-tat:hover { opacity: .8; }

/* Dải báo "KPI đang ẩn" — chỉ Admin thấy. Nền vàng nhạt như các dải cảnh
   báo khác; chữ #6b4a00 trên #fff6d9 đo được 7,46:1. */
.kpi-an-dai {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-left: 4px solid #d99b00;
  border-radius: 0 8px 8px 0;
  background: #fff6d9;
  color: #6b4a00;
  font-size: 14.5px;
  line-height: 1.55;
}

/* ======================= CHẤM CÔNG ======================= */
.cc-the { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
/* Chọn ca — cửa sổ các ca chồng nhau nên KHÔNG tự đoán, phải bày hết ra. */
.cc-chon { margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.cc-chon-nhan { font-size: 13.5px; color: var(--text-muted); margin-bottom: 8px; }
.cc-chip-hang { display: flex; gap: 9px; flex-wrap: wrap; }
.cc-chip-cong { font-size: 13px; color: #6b4e00; background: #fff2cc;
  border-radius: 999px; padding: 0 7px; }
.cc-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-family: inherit; text-align: left; cursor: pointer;
  padding: 8px 14px; border: 2px solid var(--border); border-radius: 10px;
  background: #fbfcfe; color: var(--text); }
.cc-chip:hover:not(.tat) { border-color: #9aa3af; }
.cc-chip.chon { border-color: #12703a; background: #f2fbf6; }
.cc-chip.tat { opacity: .45; cursor: not-allowed; }
.cc-chip-ma { font-size: 15px; font-weight: 800; }
.cc-chip.chon .cc-chip-ma { color: #12703a; }
.cc-chip-ten { font-size: 13.5px; font-weight: 700; }
.cc-chip-gio { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.cc-dau { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cc-ca { font-size: 17px; font-weight: 800; }
.cc-ngay { font-size: 13.5px; color: var(--text-muted); }
.cc-nut-o { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-nut { font-size: 17px; padding: 11px 26px; }
.cc-vi-sao { font-size: 13.5px; color: #6b4e00; background: #fff8e6;
  border-radius: 8px; padding: 5px 10px; }
.cc-xong { font-size: 15px; font-weight: 700; color: #12703a; }
.cc-vt { min-height: 0; font-size: 13.5px; color: var(--text-muted); }
.cc-dang-lay { display: inline-block; margin-top: 9px; }
/* Một mốc = một lần bấm. Ngoài vị trí thì viền đỏ, không giấu. */
.cc-moc { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 12px; border-left: 4px solid #12703a;
  border-radius: 0 8px 8px 0; background: #f2fbf6; }
.cc-moc.ngoai { border-left-color: #a11414; background: #fdf5f5; }
.cc-moc-ten { font-weight: 700; font-size: 14px; min-width: 34px; }
.cc-moc b { font-size: 19px; font-variant-numeric: tabular-nums; }
.cc-moc-chi, .cc-moc-vt { font-size: 13.5px; color: var(--text-muted); }
.cc-canh-bao { margin: 11px 0 0; padding: 10px 13px; border-left: 4px solid #a11414;
  border-radius: 0 8px 8px 0; background: #fdeaea; color: #8a1010; font-size: 14px; }

.cc-bang-o, .cc-ls { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 16px; }
.cc-bang-o > h3, .cc-ls > h3 { margin: 0 0 4px; font-size: 16px; }
.cc-bang .cc-ten { position: sticky; left: 0; z-index: 2; background: var(--surface);
  font-weight: 700; font-size: 14.5px; white-space: nowrap; box-shadow: 1px 0 0 #eef1f6; }
.cc-bang thead .cc-ten { background: #fbfcfe; z-index: 3; }
.cc-bp { margin-left: 7px; font-weight: 400; font-size: 13px; color: #1d4ed8;
  background: #e7effd; border-radius: 999px; padding: 1px 8px; }
.cc-ds { margin-left: 7px; font-weight: 400; font-size: 13px; color: var(--text-muted); }
.cc-bang .cc-o { width: 1%; text-align: center; padding: 6px 7px; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-bang thead .cc-o { font-weight: 700; color: var(--text-muted); }
.cc-o.trong { color: #c3c9d4; font-weight: 400; }
/* Ngoài vị trí: viền đỏ. Vào rồi chưa ra: gạch dưới. Hai chuyện khác nhau,
   phải phân biệt được bằng mắt chứ không cùng một màu. */
.cc-o.ngoai { box-shadow: inset 0 0 0 2px #a11414; color: #a11414; background: #fdf5f5; }
.cc-o.thieu { border-bottom: 3px solid #d99b00; }
/* Ngày làm nhiều hơn một ca — ô rộng hơn và đậm hơn để không đọc lướt qua. */
.cc-o.dup { background: #e7effd; color: #1d4ed8; }
.cc-bang .cc-tong { width: 100%; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.cc-tong b { font-size: 16px; color: var(--primary-dark); }
.cc-vd { display: inline-block; padding: 0 6px; border-radius: 4px; font-weight: 700; }
.cc-vd.ngoai { box-shadow: inset 0 0 0 2px #a11414; color: #a11414; }
.cc-vd.thieu { border-bottom: 3px solid #d99b00; }

.cc-tre { color: #a11414; font-weight: 700; }
.cc-muon { color: #6b4e00; }
.cc-vt-ok { color: #12703a; }
.cc-vt-xau { color: #a11414; font-weight: 700; }
.cc-doi-may { color: #6b4e00; background: #fff2cc; border-radius: 999px;
  padding: 1px 9px; font-size: 13px; white-space: nowrap; }

.cc-ch-luoi { display: grid; gap: 11px; margin: 11px 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cc-ch-nut { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 11px 0; }
.cc-ch-nhac { font-size: 13.5px; color: var(--text-muted); }
.cc-ch-h4 { margin: 16px 0 7px; font-size: 15px; }
.cc-ch-bang input[type="time"], .cc-ch-bang input[type="text"] {
  font-family: inherit; font-size: 14px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; }

/* ---- Phân nhóm ĐTV theo giám sát ---- */
.kpi-phan-nhom { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 20px; }
.pn-dem { display: flex; gap: 9px; flex-wrap: wrap; margin: 11px 0; }
.pn-the { display: flex; align-items: baseline; gap: 8px; padding: 6px 13px;
  border: 1px solid var(--border); border-radius: 999px; background: #fbfcfe; }
.pn-the-ten { font-size: 14px; font-weight: 700; white-space: nowrap; }
.pn-the-so { font-size: 16px; font-weight: 800; color: var(--primary-dark);
  font-variant-numeric: tabular-nums; }
/* Còn người chưa gán thì phải NỔI LÊN — mẫu số III.3 của giám sát đó thiếu. */
.pn-the.thieu { border-color: #e8d08a; background: #fff8e6; }
.pn-the.thieu .pn-the-so { color: #8a5a08; }
.pn-thanh { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.pn-thanh .loc-o { min-width: 240px; }
.pn-da-chon { font-size: 13.5px; color: var(--text-muted); }
.pn-bang .pn-tick { width: 1%; text-align: center; }
.pn-bang .pn-ten { font-weight: 700; white-space: nowrap; }
.pn-bang .pn-gs { width: 100%; }
.pn-chua { color: #8a5a08; }
.pn-la { color: #a11414; }
.pn-nhan { font-size: 13px; font-weight: 400; color: var(--text-muted);
  background: #eef1f6; border-radius: 999px; padding: 1px 8px; }
.pn-nghi td, .pn-nghi th { opacity: .72; }
/* Ô do hệ thống tự tính — nền khác hẳn để không ai tưởng mình gõ được. */
.kpi-bang td.tu-tinh input { background: #f2fbf6; color: #12703a; font-weight: 700; }

/* ---- Chấm công bù và nộp bảng công ---- */
.cc-bu { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 16px; }
.cc-bu-nut { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.cc-bu-o { margin-top: 11px; padding: 12px 14px; border: 1px solid #b9cdf7;
  border-left: 4px solid #1d4ed8; border-radius: 0 10px 10px 0; background: #f4f7fe; }
.cc-bu-hang { display: flex; align-items: flex-end; gap: 11px; flex-wrap: wrap; margin-bottom: 9px; }
.cc-bu-o textarea { width: 100%; font-family: inherit; font-size: 14.5px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; resize: vertical; }
.cc-bu-ds { margin: 11px 0 0; padding-left: 18px; }
.cc-bu-ds li { margin-bottom: 5px; font-size: 13.5px; }
.cc-bu-tt { font-size: 13px; border-radius: 999px; padding: 1px 9px; margin: 0 5px; }
.cc-bu-tt.cho { color: #6b4e00; background: #fff2cc; }
.cc-bu-tt.duyet { color: #12703a; background: #e6f6ec; }
.cc-bu-tt.tu_choi { color: #a11414; background: #fdeaea; }
.cc-bu-ly { color: var(--text-muted); }
/* Dải nộp bảng công — chỉ bộ phận nào cần mới hiện. */
.cc-nop { display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 11px 14px; border-left: 4px solid #1d4ed8;
  border-radius: 0 10px 10px 0; background: #f4f7fe; font-size: 14px; }
.cc-nop.da-nop { border-left-color: #6b4a00; background: #fff6d9; color: #6b4a00; }
.cc-nop span { flex: 1; min-width: 260px; }

/* Nút "điền xuống" ở đầu mỗi cột số liệu. */
.kpi-dien-xuong { margin-left: 6px; padding: 0 6px; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 5px;
  background: #fff; color: var(--text-muted); }
.kpi-dien-xuong:hover { border-color: var(--primary); color: var(--primary-dark); }
/* Hàng số liệu DÙNG CHUNG cho cả bộ phận (Trưởng ca). */
.kpi-hang-chung th, .kpi-hang-chung td { background: #eef4fd; }
.kpi-hang-chung .kpi-c-ten { color: #1d4ed8; }




/* Dải chọn tháng của màn Phân nhóm. Phân nhóm đổi theo tháng, nên tháng
   đang xem phải nằm ngay trên đầu, không giấu đi đâu được. */
.pn-ky {
  margin: 0 0 13px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2, #f7f8fa);
}
.pn-ky-hang {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 11px;
}
.pn-ky-o { display: flex; flex-direction: column; gap: 4px; }
.pn-ky-o > span { font-size: 14px; color: var(--text-muted); }
.pn-ky-so { font-size: 14px; color: var(--text-muted); padding-bottom: 7px; }
.pn-ky-khoa {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #6b3f05;
  font-size: 14px;
  font-weight: 700;
}
.pn-ky-chep { margin: 11px 0 0; font-size: 15px; }
.pn-ky-chep small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 14px; }
.pn-vet { margin-top: 11px; font-size: 14px; }
.pn-vet > summary { cursor: pointer; color: var(--text-muted); }
.pn-vet ul { margin: 7px 0 0; padding-left: 20px; }
.pn-vet li { margin-bottom: 5px; line-height: 1.5; }
.pn-vet-ten { color: var(--text-muted); }

/* ── Lịch sử đánh giá agent ────────────────────────────────────────────── */
.als-vien {
  display: inline-block;
  margin: 2px 5px 2px 0;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
}
/* Năm sắc thái, đo tương phản chữ trên nền: tot 7,46 · kha 8,84 ·
   thuong 9,33 · canh 7,77 · xau 7,43 — đều trên chuẩn AA 4,5:1. */
.als-man .tone-tot    { background: #d5efdb; color: #14532d; }
.als-man .tone-kha    { background: #e2efda; color: #1a4731; }
.als-man .tone-thuong { background: #f2f2f2; color: #3f3f46; }
.als-man .tone-canh   { background: #fff2cc; color: #713f12; }
.als-man .tone-xau    { background: #fbd5d5; color: #7f1d1d; }

.als-bang th.als-nhom { background: var(--surface-2, #f7f8fa); }
.als-bang th.als-th { min-width: 40px; font-size: 13px; }
.als-bang .als-ten {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  min-width: 230px;
  text-align: left;
}
.als-bang .als-nut {
  display: block;
  width: 100%;
  padding: 3px 2px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.als-bang .als-nut i {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--text-muted);
}
.als-bang .als-mui { display: inline-block; width: 14px; color: var(--text-muted); }
.als-bang .als-o { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.als-bang .als-o.als-trong { background: repeating-linear-gradient(45deg,
  transparent, transparent 4px, rgba(0, 0, 0, .04) 4px, rgba(0, 0, 0, .04) 8px); }
.als-bang .als-tb {
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.als-bang .als-tb i { display: block; font-style: normal; font-size: 13px; font-weight: 400; color: var(--text-muted); }
.als-bang .als-tb.am { color: #b42318; }
.als-bang .als-tb.duong { color: #15803d; }

.als-nhap {
  background: var(--surface);
  border: 1px solid #b9cdf7;
  border-left: 4px solid #1d4ed8;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 13px 15px;
  margin-bottom: 16px;
}
.als-nhap .als-file { margin: 0 0 9px; padding-left: 20px; font-size: 14px; }
.als-nhap-hang { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 11px; margin-top: 9px; }
/* Dấu "có ghi chú" vẽ bằng GÓC TAM GIÁC, không dùng ký tự: một glyph đủ nhỏ
   để không chiếm chỗ thì lại dưới sàn cỡ chữ 13px. Màu #b45309 trên nền nhạt
   nhất của bảng (#fbd5d5) đo được 3,73:1 — đạt chuẩn đồ hoạ 3:1. */
.als-bang .als-o { position: relative; }
.als-bang .als-cham {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  text-indent: -999px;
  border-top: 7px solid #b45309;
  border-left: 7px solid transparent;
}
.als-gc-mau {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 4px;
  border-radius: 999px;
  background: #fff2cc;
  color: #713f12;               /* 7,77:1 */
  font-size: 13px;
}

/* ── Lịch sử agent: bố cục hai chế độ ─────────────────────────────────── */
.als-nhac {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}
.als-nhat { color: var(--text-muted); font-style: normal; }
.als-bang th.als-hang, .als-bang td.als-hang { text-align: center; white-space: nowrap; }
.als-bang .als-tb i { display: block; font-style: normal; font-size: 13px; font-weight: 400; color: var(--text-muted); }

/* Ghi chú: dòng riêng ngay dưới người đó, đọc được ngay chứ không phải rê
   chuột — điện thoại không rê chuột được. */
.als-bang tr.als-gc-hang > td {
  padding: 0 10px 9px;
  border-top: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.als-bang td.als-gc-o {
  text-align: left;
  min-width: 240px;
  font-size: 14px;
  line-height: 1.6;
  white-space: normal;
}

/* Khung soi MỘT người: thay hẳn bảng, không chèn dòng vào giữa 27 cột. */
.als-dau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 13px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid #1d4ed8;
  border-radius: 0 8px 8px 0;
  background: var(--surface-2, #f7f8fa);
}
.als-dau-ten { font-size: 17px; }
.als-dau-ten i { display: block; font-style: normal; font-size: 14px; color: var(--text-muted); }
.als-dau-tb { margin-left: auto; text-align: right; font-size: 15px; }
.als-dau-tb b { font-size: 21px; }
.als-dau-tb i { display: block; font-style: normal; font-size: 13px; color: var(--text-muted); }
.als-mot .als-ten { min-width: 70px; }

/* ── Thẻ tóm tắt: có biểu tượng, có thanh tỷ lệ ───────────────────────── */
.als-tom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;              /* thẻ nào cao thẻ đó, không kéo nhau */
  gap: 12px;
  margin-bottom: 15px;
}
.als-the {
  display: flex;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.als-the-icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 19px;
  line-height: 1;
}
.als-the-noi { min-width: 0; flex: 1; }
/* TIÊU ĐỀ thẻ phải ra dáng tiêu đề: 15px đậm, màu chữ chính. Bản trước
   14px màu nhạt nên chìm hẳn, người dùng bảo "chữ nhỏ quá ko nổi bật". */
.als-the-noi > span {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.35;
}
/* Dòng so với tháng trước tách hẳn ra một dòng riêng, không dính vào dòng
   đếm người. */
.als-the-so {
  margin-bottom: 3px;
  font-size: 14px;
  color: var(--text-muted);
}
.als-the .als-lon { font-size: 27px; line-height: 1.15; display: block; }
.als-the .als-lon.am { color: #b42318; }
.als-the .als-lon.duong { color: #15803d; }
.als-the-phu { margin-top: 6px; font-size: 14px; line-height: 1.95; }
.als-the-phu .als-vien { margin: 2px 4px 2px 0; }

/* Nền huy hiệu của từng thẻ. Đo tương phản chữ trên nền ở mục dưới. */
.als-the.tone-xanh   { border-left: 4px solid #1d4ed8; }
.als-the.tone-xanh   .als-the-icon { background: #e6edfd; }
.als-the.tone-la     { border-left: 4px solid #b45309; }
.als-the.tone-la     .als-the-icon { background: #fef3c7; }
.als-the.tone-tim    { border-left: 4px solid #6d28d9; }
.als-the.tone-tim    .als-the-icon { background: #ede9fe; }
.als-the.tone-do     { border-left: 4px solid #b42318; }
.als-the.tone-do     .als-the-icon { background: #fde8e8; }
.als-the.tone-xanhla { border-left: 4px solid #15803d; }
.als-the.tone-xanhla .als-the-icon { background: #dcfce7; }

/* Thanh tỷ lệ: nhìn một cái thấy nhóm nào chiếm bao nhiêu. */
.als-thanh-ty {
  display: flex;
  height: 12px;
  margin: 3px 0 2px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2, #f2f2f2);
}
.als-thanh-ty > i { display: block; min-width: 3px; }
/* Màu đã DÒ cho đạt chuẩn đồ hoạ 3:1 so với nền máng #f2f2f2:
   tot 4,50 · kha 3,36 · thuong 3,03 · canh 3,12 · xau 3,58.
   Bản đầu dùng màu nhạt hơn, đo ra 1,44–2,83 — trượt hết. */
.als-thanh-ty > i.tone-tot    { background: #2f7d4f; }
.als-thanh-ty > i.tone-kha    { background: #4f9169; }
.als-thanh-ty > i.tone-thuong { background: #868c95; }
.als-thanh-ty > i.tone-canh   { background: #b57f14; }
.als-thanh-ty > i.tone-xau    { background: #cf5a55; }
/* Vạch trắng giữa các đoạn: hai đoạn cạnh nhau vẫn tách được bằng mắt kể cả
   khi in đen trắng hoặc người dùng mù màu. */
.als-thanh-ty > i + i { box-shadow: inset 1px 0 0 #fff; }

/* Đầu bảng: hai nhóm hai màu, có biểu tượng — không còn một dải xám. */
.als-bang th.als-nhom { font-size: 15px; letter-spacing: .01em; }
.als-bang th.nhom-ki  { background: #e6edfd; color: #16358c; }   /* 8,44:1 */
.als-bang th.nhom-ces { background: #ede9fe; color: #4c1d95; }   /* 9,10:1 */
.als-bang th.cot-tong, .als-bang td.cot-tong {
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
}
.als-bang tbody tr:nth-child(odd of :not(.als-gc-hang)) > td { background: rgba(0, 0, 0, .015); }

.als-thieu {
  margin: 0 0 13px;
  padding: 11px 14px;
  border-left: 4px solid #b45309;
  border-radius: 0 8px 8px 0;
  background: #fffbeb;
  color: #6b3f05;
  font-size: 15px;
  line-height: 1.65;
}
.als-thieu code {
  padding: 1px 6px;
  border-radius: 5px;
  background: #fef3c7;
  font-size: 14px;
}

/* ── Thẻ từng người ───────────────────────────────────────────────────── */
.als-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  align-items: start;
  gap: 13px;
}
.als-nguoi {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--vien, #c9ccd1);
  border-radius: 11px;
  background: var(--surface);
}
/* Nền và viền thẻ khai RÕ RÀNG. Bản đầu ăn nhờ luật .als-man .tone-* của
   chỗ khác một cách tình cờ — sửa luật kia là thẻ đổi màu mà không ai ngờ.
   Chữ #1c1e21 đo 14,83–15,30:1; chữ phụ #525966 đo 6,26–6,46:1. */
.als-nguoi.tone-tot    { --vien: #2f7d4f; background: #eaf6ee; color: var(--text); }
.als-nguoi.tone-kha    { --vien: #4f9169; background: #eef6f0; color: var(--text); }
.als-nguoi.tone-thuong { --vien: #868c95; background: #f4f5f6; color: var(--text); }
.als-nguoi.tone-xau    { --vien: #cf5a55; background: #fdeeee; color: var(--text); }
/* Vòng và chip bên trong thẻ vẫn giữ màu riêng của chúng. */
.als-nguoi .als-vong .als-vong-nen { stroke: #ffffff; }

.als-nguoi-dau { display: flex; align-items: center; gap: 11px; }
.als-tat {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
}
.als-tat.lon { width: 50px; height: 50px; font-size: 19px; }
/* Nền huy hiệu + chữ, đo ở mục dưới — đều trên 4,5:1. */
.als-tat.tone-tot    { background: #d5efdb; color: #14532d; }
.als-tat.tone-kha    { background: #e2efda; color: #1a4731; }
.als-tat.tone-thuong { background: #eceef1; color: #3f3f46; }
.als-tat.tone-xau    { background: #fbd5d5; color: #7f1d1d; }
.als-nguoi-ten { min-width: 0; }
.als-nguoi-ten b { display: block; font-size: 16px; line-height: 1.35; }
.als-nguoi-ten i { display: block; font-style: normal; font-size: 13px; color: var(--text-muted); }

.als-nguoi-diem { display: flex; align-items: center; gap: 13px; }
.als-vong-o { position: relative; flex: none; width: 44px; height: 44px; display: block; }
.als-vong-o.lon { width: 62px; height: 62px; }
.als-vong-o > b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.als-vong-o.lon > b { font-size: 18px; }
.als-vong { width: 100%; height: 100%; transform: rotate(-90deg); }
.als-vong circle { fill: none; stroke-width: 5; }
.als-vong .als-vong-nen { stroke: #eceef1; }
.als-vong .als-vong-chay { stroke-linecap: round; }
.als-vong.tone-tot    .als-vong-chay { stroke: #2f7d4f; }
.als-vong.tone-kha    .als-vong-chay { stroke: #4f9169; }
.als-vong.tone-thuong .als-vong-chay { stroke: #787e87; }   /* 3,52:1 trên máng */
.als-vong.tone-xau    .als-vong-chay { stroke: #cf5a55; }

.als-nguoi-hang i { display: block; font-style: normal; font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.als-vien.lon { font-size: 14px; padding: 3px 11px; font-weight: 700; }

.als-nguoi-ces {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-top: 11px;
  border-top: 1px dashed var(--border);
}
.als-nguoi-ces b { font-size: 15px; }
.als-nguoi-ces b.am { color: #b42318; }
.als-nguoi-ces b.duong { color: #15803d; }
.als-nguoi-ces b.nhat { color: var(--text-muted); font-weight: 400; }
.als-nguoi-ces i { margin-left: auto; font-style: normal; font-size: 13px; color: var(--text-muted); }
.als-nguoi-gc { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-muted); }
.als-nguoi-nut { width: 100%; margin-top: auto; }

/* ── Chi tiết một người: hai khối tách hẳn ────────────────────────────── */
.als-hai {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
  gap: 15px;
}
.als-khoi {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.als-khoi.khoi-ki  { border-top: 4px solid #1d4ed8; }
.als-khoi.khoi-ces { border-top: 4px solid #6d28d9; }
.als-khoi > h4 { margin: 0 0 12px; font-size: 17px; }
.als-khoi-dau { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 13px; }
.als-ces-so { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.als-ces-tien { margin-left: auto; font-size: 16px; }
.als-ces-tien.am { color: #b42318; }
.als-ces-tien.duong { color: #15803d; }
.als-ces-tien.nhat { color: var(--text-muted); font-weight: 400; }
/* CẠM BẪY: luật chung `table { min-width: 720px }` ở đầu tệp áp cho MỌI
   bảng. Bảng nào nằm trong .kpi-bang-cuon (overflow-x:auto) thì không thấy,
   nhưng bảng chi tiết này nằm thẳng trong thẻ nên TRÀN hẳn ra ngoài và đè
   lên khối bên cạnh. Đo được: khung 577px, bảng 720px, tràn 161px.
   Phải gỡ min-width, và ô lưới cũng cần min-width:0 để co được. */
.als-hai > * { min-width: 0; }
.als-doc { width: 100%; min-width: 0; table-layout: fixed; }
.als-doc td { padding: 7px 10px; }
.als-doc td:first-child {
  text-align: left;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.als-doc td:last-child {
  width: 104px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.als-doc tr.dam td { font-weight: 700; color: var(--text); border-top: 2px solid var(--border); }
.als-khoi-nhac { margin: 11px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* ── Xu hướng so với tháng trước, và cờ yếu lặp ───────────────────────── */
.als-xu {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Đo: lên 8,30:1 · xuống 8,53:1 · bằng 8,98:1. */
.als-xu.len   { background: #dcfce7; color: #14532d; }
.als-xu.xuong { background: #fde8e8; color: #7f1d1d; }
.als-xu.bang  { background: #eceef1; color: #3f3f46; }

.als-co {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.als-co.vang { background: #fef3c7; color: #6b3f05; }   /* 8,07:1 */
.als-co.do   { background: #fde8e8; color: #7f1d1d; }   /* 8,53:1 */
/* Lá cờ to dần theo số tháng yếu: 2 → ×1, 3 → ×1,2, 4 → ×1,4, từ 5 → ×1,6.
   Số TRẮNG trên nền cờ: vàng #b45309 = 5,02:1 · đỏ #c8102e = 5,88:1. */
.als-co-svg { flex: none; display: block; }
.als-co.do { padding: 4px 12px; font-size: 14px; }
/* Tuyên dương: nền vàng nhạt cho ra dáng khen thưởng, chữ #6b3f05 = 8,07:1.
   Lá cờ TRÒN nằm trong dải này — đỏ #c8102e trên #fdf6e0 đo được 5,44:1,
   đạt chuẩn đồ hoạ 3:1. */
.als-co.tuyen-duong { background: #fdf6e0; color: #6b3f05; padding: 4px 12px; font-size: 14px; }
/* Phải khai CỠ: svg có viewBox mà không có cỡ thì phình 100% khung chứa —
   mục 43, đã đo ra 836px một lần. Ở đây cỡ nằm sẵn trên thẻ svg. */
.als-co-tron { flex: none; display: block; }
/* Khuôn mặt trong chip xếp loại. Nét ăn currentColor nên tự lấy màu chữ của
   chip — chip đã đạt chuẩn CHỮ 4,5:1 thì mặt thừa chuẩn ĐỒ HOẠ 3:1.
   Cỡ nằm trên thẻ svg (19px), lớn hơn chữ 14px cho nổi. */
.als-vien .als-mat { flex: none; margin-right: 4px; vertical-align: -4px; }

/* ── Phân tích theo thâm niên ─────────────────────────────────────────── */
.als-tn {
  margin: 0 0 15px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-left: 4px solid #6d28d9;
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}
.als-tn > summary { cursor: pointer; font-size: 16px; font-weight: 700; }
.als-tn > div { margin-top: 11px; }
.als-tn-bang { min-width: 0; }
.als-tn-bang th, .als-tn-bang td { vertical-align: middle; }
.als-tn-ten { text-align: left; white-space: nowrap; font-weight: 700; }
.als-tn-thanh { min-width: 240px; }
.als-tn-chip { display: block; margin-top: 5px; }
.als-tn-bang td.als-o, .als-tn-bang th.als-o {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.als-tn-bang td.als-canh { color: #b42318; font-weight: 700; }

/* ── Vòng đời một người, trong hồ sơ ──────────────────────────────────── */
.vd-khung { margin: 0 0 18px; }
.vd-nhac { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); }
.vd-trong { margin: 0; font-size: 15px; color: var(--text-muted); }
.vd-truc { list-style: none; margin: 0; padding: 0 0 0 6px; }
.vd-muc {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 15px 0;
}
/* Sợi dây nối các mốc — mốc cuối không kéo dây xuống nữa. */
.vd-muc::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.vd-muc:last-child::before { display: none; }
.vd-cham {
  position: relative;
  z-index: 1;
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2, #f2f2f2);
  box-shadow: 0 0 0 2px var(--surface);
  font-size: 14px;
  line-height: 1;
}
.vd-muc.vd-line  .vd-cham { background: #dcfce7; }
.vd-muc.vd-hoc   .vd-cham { background: #e6edfd; }
.vd-muc.vd-hd    .vd-cham { background: #ede9fe; }
.vd-muc.vd-diem  .vd-cham { background: #f2f2f2; }
.vd-muc.vd-chuyen .vd-cham { background: #fef3c7; }
.vd-muc.vd-nghi  .vd-cham { background: #fde8e8; }
.vd-noi { min-width: 0; flex: 1; padding-top: 3px; }
.vd-dau { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; font-size: 15px; }
.vd-ngay { font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vd-phu { margin: 5px 0 0; font-size: 14px; line-height: 1.75; color: var(--text-muted); }
.vd-vien {
  display: inline-block;
  margin-right: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
/* Cùng bộ màu với màn Lịch sử agent — đo ở mục đó, 7,4–9,3:1. */
.vd-phu .tone-tot    { background: #d5efdb; color: #14532d; }
.vd-phu .tone-kha    { background: #e2efda; color: #1a4731; }
.vd-phu .tone-thuong { background: #eceef1; color: #3f3f46; }
.vd-phu .tone-canh   { background: #fff2cc; color: #713f12; }
.vd-phu .tone-xau    { background: #fbd5d5; color: #7f1d1d; }
.vd-tien { font-weight: 700; font-variant-numeric: tabular-nums; }
.vd-tien.am { color: #b42318; }
.vd-tien.duong { color: #15803d; }
.vd-co {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.vd-co.vang { background: #fef3c7; color: #6b3f05; }
.vd-co.do   { background: #fde8e8; color: #7f1d1d; }
.vd-gc { display: block; margin-top: 4px; font-size: 13px; }

/* Hai nút dưới thẻ agent nằm cạnh nhau, chia đôi bề ngang. */
.als-nguoi-nut { display: flex; gap: 8px; margin-top: auto; }
.als-nguoi-nut > .btn { flex: 1; }

/* Icon trong kết quả Tìm nhanh — cùng bộ với thanh menu, không để một bên
   emoji một bên nét vẽ. */
.tn-ico svg { width: 18px; height: 18px; display: block; }
.tn-ico { display: grid; place-items: center; flex: none; }

/* ===== Thanh công cụ HR MASTER gom lại =================================
   13 nút nằm ngang hàng nhau -> 3 nút. Sáu ô lọc vào một bảng, cụm
   xuất/nhập vào menu ⋯. Mọi id giữ nguyên nên dây bắt sự kiện cũ không đứt.
   Dãy thẻ dưới thanh nói ĐANG LỌC GÌ — trước đây phải mở từng ô mới biết. */
.toolbar-gon { display: block; }
.tb-hang { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tb-hang #search-input { flex: 1 1 280px; min-width: 200px; }
.tb-boc { position: relative; }
.tb-ico { flex: none; }
.tb-nut { display: inline-flex; align-items: center; gap: 7px; }
.tb-nut-tron { padding: 8px 12px; }
.tb-so {
  background: #1f4e78; color: #fff; font-size: 13px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
  display: inline-grid; place-items: center; line-height: 1;
}
.tb-vach { width: 1px; height: 26px; background: var(--border); margin: 0 2px; flex: none; }

.tb-panel {
  position: absolute; top: calc(100% + 6px); z-index: 45;
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 30, 50, 0.16);
}
.tb-loc-panel { left: 0; padding: 12px; width: min(560px, calc(100vw - 40px)); }
.tb-panel-dau { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 2px 9px; }
/* overflow phải VISIBLE: sáu ô lọc bên trong là dropdown lồng, cắt là mất panel con */
.tb-loc-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; }
.tb-loc-luoi .multiselect-trigger { width: 100%; text-align: left; }
.tb-panel-chan { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }

.tb-them-menu { right: 0; padding: 6px; min-width: 208px; }
.tb-menu-o {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; padding: 9px 10px; border-radius: 7px;
  font: inherit; font-size: 14.5px; color: var(--text); cursor: pointer;
}
.tb-menu-o:hover { background: #eef3fa; }
.tb-menu-ngan { height: 1px; background: var(--border); margin: 5px 4px; }

.tb-chip { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.chip-loc {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eaf1fb; color: #1f4e78; border: 1px solid #5d8dc4;
  border-radius: 16px; padding: 3px 6px 3px 11px; font-size: 13.5px; font-weight: 600;
}
.chip-loc .chip-nhom { font-weight: 400; color: #3f5f85; }
.chip-x {
  width: 19px; height: 19px; border-radius: 50%; border: 0; cursor: pointer;
  background: #d3e0f2; color: #1f4e78; display: grid; place-items: center;
  font-size: 14px; line-height: 1; padding: 0; font-family: inherit;
}
.chip-x:hover { background: #b9d0ea; }
.chip-xoa {
  font-size: 13.5px; color: #8a5300; background: none; border: 0;
  text-decoration: underline; cursor: pointer; font-family: inherit; padding: 3px 4px;
}
@media (max-width: 860px) {
  .tb-loc-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-loc-panel { width: calc(100vw - 32px); }
}
@media (max-width: 560px) {
  .tb-loc-luoi { grid-template-columns: 1fr; }
}
/* Nút Lọc khi đang có bộ lọc bật: viền đậm hơn để liếc là thấy */
.tb-nut.dang-loc { border-color: #1f4e78; color: #1f4e78; background: #f2f7fd; }

/* ===== Khung xương lúc chờ tải & trạng thái rỗng (dùng chung) ========== */
.xuong-bang { padding: 4px 0; }
.xuong-hang { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid #f0f3f8; }
.xuong-hang:last-child { border-bottom: 0; }
.xuong-cot { flex: 1; min-width: 0; display: grid; gap: 7px; }
.xuong-nho { height: 10px; }
.xuong-cuoi { width: 66px; flex: none; }
.xuong-dong { display: grid; gap: 10px; padding: 16px 14px; }
.xuong-luoi {
  display: grid; gap: 12px; padding: 4px 0;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}
.xuong-the {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  display: grid; gap: 12px; background: var(--surface, #fff);
}
.xuong-the-dau { display: flex; align-items: center; gap: 10px; }
.xuong-vong { height: 58px; border-radius: 10px; }

.rong-khoi { padding: 34px 20px; }
.rong-ico {
  width: 56px; height: 56px; margin: 0 auto 11px; border-radius: 50%;
  background: #eef3fa; display: grid; place-items: center;
}
/* #5b7ba6 trên #eef3fa = 3,55:1 — đạt chuẩn đồ hoạ 3:1 */
.rong-ico svg { color: #5b7ba6; fill: none; stroke: currentColor; }
.rong-nut { margin-top: 13px; }
/* Chữ chỉ dành cho trình đọc màn hình: khung xương là dấu hiệu cho MẮT,
   không nói ra thì người dùng trình đọc không biết trang đang tải. */
.chi-doc {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Icon trong nút và tiêu đề =======================================
   Thay emoji. Emoji mỗi hệ điều hành vẽ một kiểu, KHÔNG đổi màu theo trạng
   thái nút, và trước đây có hai cặp trùng nghĩa (📊 dùng cho cả Dashboard
   lẫn So sánh dự án). Cỡ theo `em` nên đi theo cỡ chữ của chính chỗ đặt —
   nút nhỏ ra icon nhỏ, tiêu đề lớn ra icon lớn, không phải khai hai lớp. */
.ico-nut {
  width: 1.08em; height: 1.08em;
  vertical-align: -.16em;
  margin-right: .1em;
  flex: none;
  fill: none; stroke: currentColor;
}
/* Nút dùng flex thì vertical-align vô nghĩa, gap lo phần cách chữ */
.btn .ico-nut, .tb-menu-o .ico-nut { margin-right: .34em; }
h2 > .ico-nut, h3 > .ico-nut, h4 > .ico-nut { margin-right: .34em; vertical-align: -.14em; }

/* ===== MÀU ICON THEO Ý NGHĨA ===========================================
   Trắng đen thì nhìn đều tăm tắp, không phân biệt được nút nào làm gì. Sáu
   tông, mỗi tông một LOẠI VIỆC — không tô cho vui:
     xanh  thêm · xác nhận · mở khoá        đỏ   xoá · rời đi · xấu đi
     lam   đọc · xuất · nhập                vàng cần để ý · sửa · khoá
     tím   người & đánh giá                 xanh mòng két  tiền
   Con số sau mỗi màu là tương phản THẤP NHẤT đo trên ba nền thật của app
   (#fff, #f4f5f7, #eef3fa). Chuẩn đồ hoạ là 3:1. */
.ico-nut.t-xanh { color: #1d6b3f; } /* 5,84:1 */
.ico-nut.t-lam  { color: #1f4e78; } /* 7,79:1 */
.ico-nut.t-tim  { color: #5b3fa8; } /* 6,92:1 */
.ico-nut.t-vang { color: #8a5300; } /* 5,68:1 */
.ico-nut.t-do   { color: #a3282a; } /* 6,51:1 */
.ico-nut.t-tien { color: #0f6b6b; } /* 5,65:1 */

/* CẤM TÔ ở những chỗ nền đã có màu hoặc đã tối — tô vào là chữ chìm mất.
   Đặt sau nên thắng, và dùng !important vì luật tông có cùng độ ưu tiên. */
.btn-primary .ico-nut,
.btn-danger .ico-nut,
.topbar-user #btn-open-admin .ico-nut,
.cp-subtab-btn.active .ico-nut,
.topbar-icon-btn .ico-nut,
.kh-hh .ico-nut,
.sidebar-item.active .sidebar-icon svg,
.tv-man .ico-nut { color: inherit !important; }
/* Icon của thanh menu và Tìm nhanh — dựng bằng icoSvg, cùng bảng tông */
/* CỠ MẶC ĐỊNH cho icon dựng lúc chạy bằng icoSvg().
   Thiếu luật này là icon PHÌNH RA 100% bề ngang khung chứa: svg có viewBox mà
   không có width thì trình duyệt cho nó chiếm hết chỗ. Trước đây không lộ vì
   .ico-mau chỉ dùng trong thanh menu và Ctrl+K, mà hai chỗ đó có luật cỡ riêng
   (.sidebar-icon svg 18px, .tn-ico svg 18px) — đặt icon ra một thẻ <p> thường
   là icon cao bằng cả đoạn văn. Người dùng bắt được ở màn Thiết bị 09/09/2026.
   Cùng cỡ với .ico-nut để nút và chữ nhìn ra một bộ. */
.ico-mau {
  width: 1.08em; height: 1.08em;
  vertical-align: -.16em;
  flex: none;
}
/* Huy hiệu tròn 38px thì icon 1,08em (~16px) trông lọt thỏm — nới riêng ở đây,
   không nới ở luật chung. */
.als-the-icon .ico-mau { width: 21px; height: 21px; vertical-align: 0; }

.ico-mau.t-xanh { color: #1d6b3f; }
.ico-mau.t-lam  { color: #1f4e78; }
.ico-mau.t-tim  { color: #5b3fa8; }
.ico-mau.t-vang { color: #8a5300; }
.ico-mau.t-do   { color: #a3282a; }
.ico-mau.t-tien { color: #0f6b6b; }
/* Mục đang chọn tô đỏ cả dòng — icon phải theo, không thì lạc màu */
.sidebar-item.active .ico-mau,
.tn-dong:hover .ico-mau { color: inherit; }
/* ---- Thanh menu: tô theo NHÓM, không theo ý nghĩa từng hình ----
   Nút thì tô theo việc nó làm; còn menu thì bốn nhóm phải ra bốn màu, không
   thì trong cùng một nhóm mỗi mục một màu, nhìn ra lộn xộn chứ không ra hệ
   thống. Mục đang chọn tô đỏ cả dòng nên icon phải theo màu dòng. */
.sidebar-icon .ico-mau, .sidebar-nhom-ico .ico-mau { color: inherit; }
[data-nhom="tong-quan"]  .ico-mau { color: #1f4e78; } /* 7,79:1 */
[data-nhom="nhan-su"]    .ico-mau { color: #5b3fa8; } /* 6,92:1 */
[data-nhom="hieu-suat"]  .ico-mau { color: #1d6b3f; } /* 5,84:1 */
[data-nhom="tai-chinh"]  .ico-mau { color: #0f6b6b; } /* 5,65:1 */
.sidebar-item.active .sidebar-icon .ico-mau { color: inherit; }

/* ===== Bốn nút lọc theo xếp loại (màn Lịch sử agent) ===================
   Chính chỗ đang hiện con số là chỗ bấm — không đẻ dãy nút thứ hai bên cạnh,
   hai nơi cùng đếm một thứ là bệnh mục 12. */
.als-nut-hang { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
button.als-nut-loc {
  margin: 0; cursor: pointer; border: 1px solid transparent;
  font-family: inherit; line-height: 1.35;
}
button.als-nut-loc:hover:not([disabled]) { filter: brightness(.94); }
button.als-nut-loc[disabled] { opacity: .45; cursor: default; }
/* Nhóm đang chọn: vòng viền kép + chữ đậm, KHÔNG đổi nền — đổi nền thì mất
   mã màu theo nhóm, mà đó là thứ để nhận ra nhóm nào. Dùng vòng viền chứ
   không dùng ký tự chấm: chấm phải nhỏ hơn sàn cỡ chữ 13px mới vừa.
   Dùng chung cho CẢ hai dãy: xếp loại KI và bậc thưởng CES. */
button.als-nut-loc.chon {
  border-color: currentColor; font-weight: 800;
  box-shadow: inset 0 0 0 1px currentColor;
}
button.als-nut-loc.bo {
  background: #eef1f6; color: #525966; border-color: #d5dbe6; font-weight: 600;
}
/* #525966 trên nền thẻ = 7,05:1 */
.als-nut-mach { margin-top: 5px; font-size: 13px; color: var(--text-muted); }

/* ===== THIẾT BỊ VẬN HÀNH ================================================
   Màu nói MỨC ĐỘ (ba mức), hình nói MÓN NÀO. Không mã hoá loại lỗi bằng
   màu: một ô chỉ tô được một màu nên hỏng hai món là mất một cái, và cặp
   đỏ/xanh là cặp tệ nhất với người mù màu. Ba màu lấy từ bảng tông đã đo
   (mục 41), không chế màu mới. */
.tb-bang { width: 100%; min-width: 0; table-layout: fixed; }
.tb-bang td, .tb-bang th { vertical-align: middle; }
.tb-nho { font-size: 13.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tb-ico { white-space: nowrap; }
.tb-ico .ico-nut { margin-right: 3px; }
.tb-nut { text-align: right; white-space: nowrap; }
.tb-nut .btn-nho { margin-left: 5px; }
tr.tb-r-nang td { background: #fdf4f4; }
tr.tb-r-nhe  td { background: #fffaf0; }
tr.tb-d-loi td { background: #fdf4f4; }
tr.tb-d-sua td { background: #fffaf0; }
tr.tb-d-thieu td { background: #f7f8fa; }
.tb-het { color: #a3282a; font-weight: 700; }              /* 6,51:1 trên nền trắng */
.tb-nhan { font-size: 13px; font-weight: 700; padding: 0 6px; border-radius: 9px; margin-left: 5px; }
.tb-nhan.dac { background: #e6edfd; color: #1f4e78; }      /* 7,79:1 */

/* ---- Sơ đồ: dựng lại ĐÚNG mặt bằng theo toạ độ ô của file gốc ---- */
.tb-so-do { display: grid; gap: 4px; align-items: start; padding: 4px 0; overflow-x: auto; }
/* Lưới theo toạ độ: cột tự sinh nên mặc định GIÃN ra chiếm hết chỗ thừa.
   Phòng Đào tạo chỉ 3 dãy nên ô to gấp đôi phòng CSKH 12 dãy — cùng một chỗ
   ngồi mà hai phòng vẽ hai cỡ, nhìn ra như hai loại bàn khác nhau.
   justify-content: start giữ mọi ô CÙNG MỘT CỠ ở cả hai phòng. */
.tb-so-do.theo-toa { justify-content: start; grid-auto-columns: minmax(118px, max-content); }
.tb-so-do:not(.theo-toa) { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.tb-o {
  display: grid; gap: 1px; width: 100%; min-width: 118px; text-align: left;
  border: 1px solid var(--border); border-left-width: 4px; border-radius: 7px;
  padding: 5px 7px; background: var(--surface, #fff); cursor: pointer;
  font-family: inherit; color: var(--text);
}
.tb-o:hover { border-color: #1f4e78; }
.tb-o.tb-r-ok   { border-left-color: #1d6b3f; }
.tb-o.tb-r-nhe  { border-left-color: #8a5300; background: #fff8ec; }
.tb-o.tb-r-nang { border-left-color: #a3282a; background: #fdeaea; }
.tb-o-ma { font-size: 13.5px; font-weight: 700; }
.tb-o-ip { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tb-o-ln { font-size: 13px; color: #1f4e78; }
.tb-o-ico { min-height: 17px; display: flex; gap: 3px; }

/* ---- Chú giải ---- */
.tb-chu { display: flex; flex-wrap: wrap; gap: 13px; align-items: center;
  padding: 10px 13px; margin: 0 0 13px; background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; }
.tb-cg { display: inline-flex; gap: 5px; align-items: center; }
.tb-cg2 { margin-left: 6px; }
.tb-sw { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--border);
  border-left-width: 4px; }
.tb-sw.ok { border-left-color: #1d6b3f; }
.tb-sw.nhe { border-left-color: #8a5300; background: #fff8ec; }
.tb-sw.nang { border-left-color: #a3282a; background: #fdeaea; }

/* ---- Chi tiết một vị trí ---- */
.tb-quay { margin: 0 0 11px; }
.tb-hd { padding: 11px 15px; background: #1f4e78; color: #fff; border-radius: 10px 10px 0 0;
  display: flex; gap: 11px; align-items: baseline; flex-wrap: wrap; }
.tb-hd b { font-size: 19px; }
.tb-hd span { font-size: 14px; opacity: .92; }
.tb-noi { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px;
  padding: 15px; background: var(--surface, #fff); }
.tb-tt { margin: 0 0 13px; padding: 10px 14px; border-radius: 9px; font-size: 15px;
  border-left: 4px solid #a3282a; background: #fdeaea; }
.tb-tt.nhe { border-left-color: #8a5300; background: #fff4e0; }
.tb-tt.ok  { border-left-color: #1d6b3f; background: #eaf7ef; }
.tb-mach { margin: 10px 2px 0; font-size: 13.5px; color: var(--text-muted); }
.tb-h3 { font-size: 15.5px; color: #1f4e78; margin: 20px 0 10px;
  padding-bottom: 5px; border-bottom: 2px solid var(--border); }
.tb-form { margin: 12px 0 0; padding: 12px 14px; border-radius: 9px;
  background: #eef3fa; border: 1px solid #5d8dc4; display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center; font-size: 14.5px; }
.tb-form .loc-o { flex: 1 1 190px; min-width: 130px; }
.tb-form .tb-mach { flex: 1 1 100%; margin: 2px 0 0; }
.tb-kho-nhan { display: inline-flex; gap: 5px; align-items: center; font-size: 13.5px;
  color: #0f6b6b; font-weight: 600; }
/* Mức "chưa kiểm kê" — XÁM, cố ý không báo động: bàn vẫn chạy, chỉ là hệ
   thống chưa biết. Tô đỏ chỗ này là 82 vị trí vừa nhập đỏ hết, toàn tin sai. */
.tb-o.tb-r-chua { border-left-color: #7d8794; background: #f7f8fa; } /* 3,43:1 */
tr.tb-r-chua td { background: #fafbfc; }
tr.tb-d-chua td { background: #f7f8fa; }
.tb-sw.chua { border-left-color: #7d8794; background: #f7f8fa; } /* 3,43:1 */
.tb-tt.chua { border-left-color: #525966; background: #f2f4f7; }
.tb-chua { font-size: 13px; color: var(--text-muted); }

/* ── VÒNG ĐỜI MỘT MÁY (mục 43) ────────────────────────────────────────── */
/* Serial là NÚT: phải nhìn ra bấm được, không thì không ai bấm. Gạch chân
   nét đứt + màu lam của tông "đọc"; đo trên nền #fff và #f7f8fa: 7,79:1. */
.tb-vd-mo {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: #1f4e78; text-decoration: underline; text-decoration-style: dashed;
  text-underline-offset: 2px;
}
.tb-vd-mo:hover { text-decoration-style: solid; }
/* Ba con số đầu trang: đọc là biết có nên thay món này chưa. */
.tb-vd-so {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 13px;
}
.tb-vd-so > span {
  padding: 5px 11px; border-radius: 7px; font-size: 14px;
  background: #eef3fa; border: 1px solid #5d8dc4; color: #1f4e78; /* chữ 7,79:1 */
}
/* Viền ĐỎ ở đây MANG NGHĨA "món này có vấn đề", nên phải đạt chuẩn đồ hoạ
   3:1 — không được lấy màu nhạt cho dịu mắt. #e8b4b4 chỉ 1,56:1, bộ kiểm
   bắt ngay. #b96f6f = 3,26:1. */
.tb-vd-so > span.xau {
  background: #fdeaea; border-color: #b96f6f; color: #a3282a; /* chữ 6,27:1 */
}
/* "x/4 món" trong ô sơ đồ — thay cho cột "Đã nhập" của bảng danh sách đã gỡ.
   Nhạt hơn phần còn lại vì đây là tiến độ nhập sổ, không phải trạng thái bàn. */
.tb-o-kk { margin-left: auto; font-size: 13px; color: #525966; } /* 7,05:1 */
.tb-o-kk.du { color: #1d6b3f; } /* 5,84:1 — đã nhập đủ */

/* ── PHÂN TÍCH SỰ CỐ THIẾT BỊ (mục 43) ────────────────────────────────── */
/* Viền thẻ dùng var(--border) như mọi thẻ khác trong app: ở đây viền chỉ để
   GOM NHÓM, không mang trạng thái — khác chip lọc, nơi viền là thứ duy nhất
   vẽ ra hình chip nên phải đạt 3:1. */
.tb-pt { margin: 22px 0 0; }
.tb-pt-hoi { margin: 0 0 12px; font-size: 14px; color: #525966; } /* 7,05:1 */
.tb-pt-luoi {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
}
.tb-pt-o {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; background: #fff; margin: 0 0 12px;
}
.tb-pt-luoi .tb-pt-o { margin: 0; }
.tb-pt-o h4 {
  margin: 0 0 9px; font-size: 14.5px; color: #1f4e78;  /* 8,68:1 */
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
/* Xếp hạng: tên · thanh · số. Thanh chỉ để so ĐỘ DÀI, con số mới là dữ liệu —
   nên thanh mang aria-hidden, không đọc lên cho trình đọc màn hình. */
.tb-xh { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tb-xh li { display: grid; grid-template-columns: minmax(0, 1fr) 74px auto; gap: 8px;
  align-items: center; font-size: 14px; }
.tb-xh-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-xh-thanh { height: 9px; border-radius: 5px; background: #eef3fa; overflow: hidden; }
.tb-xh-thanh i { display: block; height: 100%; background: #4a7fbb; } /* 3,73:1 đồ hoạ */
.tb-xh-so { font-weight: 700; font-size: 14px; white-space: nowrap; }
.tb-xh-so.lap { color: #a3282a; }                     /* 7,26:1 — từ 2 lần là lặp */
.tb-xh-so em { font-style: normal; font-weight: 400; font-size: 13px; color: #8a5300; } /* 6,33:1 */
.tb-pt-gt { margin: 9px 0 0; font-size: 13.5px; color: #525966; line-height: 1.5; }
.tb-pt-gt b { color: #212429; }                       /* 15,57:1 */
/* Dải con số: mỗi ô một phép đo, tự xuống dòng chứ KHÔNG cuộn ngang —
   cuộn ngang là giấu mất ô cuối, đúng lỗi dải KPI ở mục 30. */
.tb-pt-so {
  display: grid; gap: 8px; margin: 2px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.tb-pt-so > span {
  display: grid; gap: 1px; padding: 8px 11px; border-radius: 8px;
  background: #f4f6f9; border: 1px solid var(--border);
}
.tb-pt-so b { font-size: 21px; line-height: 1.1; color: #1f4e78; }
.tb-pt-so span span { font-size: 13px; color: #525966; }
.tb-pt-so > span.canh { background: #fff4e0; }
.tb-pt-so > span.canh b { color: #8a5300; }           /* 5,68:1 trên #fff4e0 */
.tb-pt-so > span.xau { background: #fdeaea; }
.tb-pt-so > span.xau b { color: #a3282a; }            /* 6,27:1 trên #fdeaea */