/* ==== theme-login.css ==== */
/* Login page v2 — purple/blob theme matching reference mock.
   Scoped to /login only via :has() so it never leaks onto other routes
   that reuse the same navy/brand utility classes. */

@keyframes hrmFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hrmBlobBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.05) rotate(3deg); }
}
@keyframes hrmShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* Biến màu theo theme — mặc định sáng (light), đổi giá trị khi
   body[data-hrm-theme="dark"] (bật/tắt bằng nút mặt trời/mặt trăng do
   login-extra.js chèn, lưu lựa chọn ở localStorage). */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) {
  --hrm-page-bg: #ffffff;
  --hrm-blob-1: #b092f0;
  --hrm-blob-2: #8b5cf6;
  --hrm-blob-3: #7c3aed;
  --hrm-card-bg: #ffffff;
  --hrm-card-shadow-1: rgba(76, 29, 149, 0.35);
  --hrm-card-shadow-2: rgba(76, 29, 149, 0.18);
  --hrm-title: #1f1147;
  --hrm-input-border: #e4e0f5;
  --hrm-input-bg: #ffffff;
  --hrm-input-text: #1f1147;
  --hrm-muted: #4b5563;
  --hrm-link: #7c3aed;
  --hrm-link-hover: #5b21b6;
  --hrm-err-bg: #fef2f2;
  --hrm-err-text: #991b1b;
  --hrm-err-border: #fecaca;
  background: var(--hrm-page-bg);
  overflow-x: hidden;
  transition: background-color .25s ease;
  color-scheme: light;
}

body:has(input[placeholder="ví dụ: nguyen.van.a"])[data-hrm-theme="dark"] {
  color-scheme: dark;
  --hrm-page-bg: #0f0a1f;
  --hrm-blob-1: #6d3fc9;
  --hrm-blob-2: #4c2a99;
  --hrm-blob-3: #2c1a5e;
  --hrm-card-bg: #181129;
  --hrm-card-shadow-1: rgba(0, 0, 0, 0.55);
  --hrm-card-shadow-2: rgba(124, 58, 237, 0.25);
  --hrm-title: #f3f0fa;
  --hrm-input-border: #372a54;
  --hrm-input-bg: #221a38;
  --hrm-input-text: #f0ecfa;
  --hrm-muted: #b6acd6;
  --hrm-link: #c4b5fd;
  --hrm-link-hover: #ede9fe;
  --hrm-err-bg: rgba(127, 29, 29, 0.35);
  --hrm-err-text: #fecaca;
  --hrm-err-border: rgba(248, 113, 113, 0.4);
}

/* Large purple blob backdrop, top-left */
body:has(input[placeholder="ví dụ: nguyen.van.a"])::before {
  content: "";
  position: fixed;
  top: -18vh;
  left: -22vw;
  width: 95vw;
  height: 150vh;
  background: radial-gradient(circle at 32% 28%, var(--hrm-blob-1) 0%, var(--hrm-blob-2) 45%, var(--hrm-blob-3) 78%);
  border-radius: 48% 52% 55% 45% / 55% 45% 55% 45%;
  z-index: 0;
  pointer-events: none;
  animation: hrmBlobBreathe 14s ease-in-out infinite;
  transform-origin: 60% 50%;
  transition: background .25s ease;
}

/* Drop the side feature panel — single centered card like the reference */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) .bg-navy-900 {
  display: none !important;
}
body:has(input[placeholder="ví dụ: nguyen.van.a"]) .flex-1.items-center.justify-center.bg-white {
  background: transparent;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
}

/* The logo block used to be mobile-only (side panel carried it on desktop);
   show it on every width now that the side panel is gone */
@media (min-width: 1024px) {
  body:has(input[placeholder="ví dụ: nguyen.van.a"]) .mb-8.lg\:hidden {
    display: block !important;
  }
}

/* Floating white card */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) .flex-1.items-center.justify-center > .w-full.max-w-\[380px\] {
  position: relative;
  z-index: 1;
  background: var(--hrm-card-bg);
  border-radius: 26px;
  padding: 40px 36px;
  box-shadow: 0 30px 70px -20px var(--hrm-card-shadow-1), 0 10px 24px -12px var(--hrm-card-shadow-2);
  animation: hrmFadeUp 0.55s cubic-bezier(.16,1,.3,1) both;
  transition: background-color .25s ease;
}

body:has(input[placeholder="ví dụ: nguyen.van.a"]) h1.text-ink-900 {
  color: var(--hrm-title);
}

/* Bỏ dòng phụ đề "Dùng tên đăng nhập được HCNS cấp..." dưới tiêu đề */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) h1.text-ink-900 + p.text-ink-500 {
  display: none;
}

/* Pill inputs with left-aligned icon (person / lock), CSS-only via background-image */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 input {
  border-radius: 14px;
  border-color: var(--hrm-input-border);
  background-color: var(--hrm-input-bg);
  color: var(--hrm-input-text);
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 19px;
  padding-left: 42px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}
body:has(input[placeholder="ví dụ: nguyen.van.a"]) input[placeholder="ví dụ: nguyen.van.a"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239a94b8' stroke-width='1.7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z'/%3E%3C/svg%3E");
}
/* Password input sits inside a .relative wrapper (with the show/hide button) —
   target it that way since its `type` flips between password/text on toggle */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 .relative > input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239a94b8' stroke-width='1.7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z'/%3E%3C/svg%3E");
}
/* Icon nhạt hơn cho nền tối, cùng hình chỉ đổi màu nét vẽ */
body:has(input[placeholder="ví dụ: nguyen.van.a"])[data-hrm-theme="dark"] input[placeholder="ví dụ: nguyen.van.a"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a293c9' stroke-width='1.7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z'/%3E%3C/svg%3E");
}
body:has(input[placeholder="ví dụ: nguyen.van.a"])[data-hrm-theme="dark"] form.mt-7 .relative > input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a293c9' stroke-width='1.7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z'/%3E%3C/svg%3E");
}
/* Nút "Hiện mật khẩu" (con mắt) dùng currentColor nên tự đổi theo màu chữ input đã var() hoá ở trên */
body:has(input[placeholder="ví dụ: nguyen.van.a"])[data-hrm-theme="dark"] form.mt-7 .relative button[type="button"] {
  color: var(--hrm-muted);
}

/* Chừa chỗ cho hàng "Giữ tôi luôn đăng nhập" / "Quên mật khẩu?" được
   login-extra.js chèn đè lên (position:absolute, ngoài cây React) */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 button[type="submit"] {
  margin-top: 54px !important;
}

/* Purple pill button, uppercase like the reference */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 button[type="submit"] {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(124, 58, 237, 0.55);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(124, 58, 237, 0.6);
  background: linear-gradient(135deg, #9f75f7, #8b5cf6);
}
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 button[type="submit"]:active:not(:disabled) {
  transform: translateY(0);
}
/* Nút khi đang gửi/không hợp lệ — trước đây bị gradient tím đè lên nên nhìn
   không khác gì trạng thái bấm được, giờ làm mờ đi rõ ràng */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 button[type="submit"]:disabled {
  background: #c9bdf2;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .85;
}

/* Autofill của trình duyệt hay tô vàng/xanh đè lên input — ép nền theo
   đúng màu input hiện tại (sáng/tối) bằng inset box-shadow phủ lên trên */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 input:-webkit-autofill,
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 input:-webkit-autofill:hover,
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hrm-input-text);
  -webkit-box-shadow: 0 0 0 1000px var(--hrm-input-bg) inset;
  box-shadow: 0 0 0 1000px var(--hrm-input-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Khối báo lỗi "Tên đăng nhập hoặc mật khẩu không đúng." — bo tròn hợp với
   card, rung nhẹ một lần khi vừa xuất hiện để người dùng chú ý */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) .border-red-200.bg-red-50.text-red-800 {
  border-radius: 12px;
  animation: hrmShake .4s ease-in-out;
  background-color: var(--hrm-err-bg);
  color: var(--hrm-err-text);
  border-color: var(--hrm-err-border);
}

body:has(input[placeholder="ví dụ: nguyen.van.a"]) ::selection {
  background: rgba(139, 92, 246, 0.25);
}

/* Bỏ 2 dòng "Chưa có tài khoản?..." và "Quên mật khẩu?..." dưới nút —
   thay bằng link "Hướng dẫn sử dụng" do login-extra.js chèn vào chỗ trống này */
body:has(input[placeholder="ví dụ: nguyen.van.a"]) form.mt-7 ~ p {
  display: none;
}

/* Nút bật/tắt sáng-tối do login-extra.js chèn (#hrm-theme-toggle) */
#hrm-theme-toggle {
  transition: background-color .2s ease, transform .15s ease, border-color .2s ease;
}
#hrm-theme-toggle:hover {
  transform: translateY(-1px) scale(1.05);
}
#hrm-theme-toggle:active {
  transform: translateY(0) scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  body:has(input[placeholder="ví dụ: nguyen.van.a"]) *,
  body:has(input[placeholder="ví dụ: nguyen.van.a"])::before {
    animation: none !important;
  }
}

/* ==== theme-assistant.css ==== */
/* Đổi icon nút mở "Hỏi đáp chính sách" (trợ lý AI) sang bot 3D khớp màu
   thương hiệu (navy/gold) — áp dụng toàn site (nút này hiện ở mọi trang đã
   đăng nhập, không riêng /login nên KHÔNG bọc trong :has() như theme-login.css).
   Chỉ khớp đúng trạng thái ĐÓNG (aria-label "Hỏi đáp chính sách"); trạng thái
   đang mở ("Đóng hỏi đáp chính sách") giữ nguyên icon X có sẵn. */
button[aria-label="Hỏi đáp chính sách"] {
  background-image: url("/assets/ai-assistant-icon.webp");
  background-size: cover;
  background-position: center;
  background-color: transparent;
}
button[aria-label="Hỏi đáp chính sách"] svg {
  display: none;
}

/* Bỏ "Tài khoản" / "Phân quyền" / "Nhật ký hệ thống" khỏi sidebar trái — 3 mục
   này giờ nằm trong nhóm "Cài đặt hệ thống" ở dropdown avatar (admin-menu.js),
   để ở cả 2 chỗ thì trùng lặp. Khớp theo href thay vì text vì text còn lặp lại
   y hệt trong nhóm mới đó (không muốn lỡ tay ẩn luôn bản trong dropdown). */
nav a[href="/accounts"],
nav a[href="/permissions"],
nav a[href="/audit-logs"] {
  display: none !important;
}

/* ==== theme-payroll.css ==== */
/* Làm đẹp bảng tổng hợp kỳ lương (/payroll/{id}) — chỉ áp dụng khi
   body có class "hrm-payroll-detail" (gắn bằng theme-payroll.js vì đây là
   route của SPA, CSS không tự biết URL). Không đổi số liệu/logic. */

body.hrm-payroll-detail table.hrm-payroll-table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Khung bảng cuộn RIÊNG (cả ngang lẫn dọc) trong một vùng cao giới hạn, thay vì
   cuộn theo cả trang — nếu không thì "sticky" header chỉ dính vào khung này
   (khung vốn đã tự thành vùng cuộn vì có overflow-x-auto) chứ không dính vào
   màn hình khi cuộn cả trang, và người dùng vẫn thấy header trôi mất. */
body.hrm-payroll-detail div.thin-scroll:has(table.hrm-payroll-table) {
  max-height: calc(100vh - 260px);
  min-height: 240px;
  overflow-y: auto;
}

/* Header dính khi cuộn dọc danh sách dài */
body.hrm-payroll-detail table.hrm-payroll-table thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 2;
  box-shadow: 0 1px 0 0 #e6ebf2;
}

/* Cột "Họ tên" dính khi cuộn ngang — bảng có tới 13 cột số liệu, cuộn xa
   dễ mất dấu đang xem của ai */
body.hrm-payroll-detail table.hrm-payroll-table th:nth-child(2),
body.hrm-payroll-detail table.hrm-payroll-table td:nth-child(2) {
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 1;
  box-shadow: 1px 0 0 0 #e6ebf2;
}
body.hrm-payroll-detail table.hrm-payroll-table thead th:nth-child(2) {
  z-index: 3;
}

/* Vằn ngựa vằn + tô hàng khi rê chuột cho dễ dò theo hàng ngang */
body.hrm-payroll-detail table.hrm-payroll-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}
body.hrm-payroll-detail table.hrm-payroll-table tbody tr:hover td {
  background: #fbf5e4;
}

/* Căn phải + số đều chân cho các cột số liệu (Công chuẩn .. Nghỉ KL) */
body.hrm-payroll-detail table.hrm-payroll-table th:nth-child(n + 4):nth-child(-n + 13),
body.hrm-payroll-detail table.hrm-payroll-table td:nth-child(n + 4):nth-child(-n + 13) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Trễ / Sớm / Vắng khác 0 — cảnh báo hổ phách, đập vào mắt ngay */
body.hrm-payroll-detail td.hrm-warn {
  color: #b45309 !important;
  background: #fffbeb !important;
  font-weight: 700;
  border-radius: 6px;
}

/* OT khác 0 — nhấn màu vàng thương hiệu, dễ thấy ai có tăng ca trong kỳ */
body.hrm-payroll-detail td.hrm-ot {
  color: #855e1d !important;
  font-weight: 700;
}

body.hrm-payroll-detail table.hrm-payroll-table thead th,
body.hrm-payroll-detail table.hrm-payroll-table tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ==== theme-attendance.css ==== */
/* Làm đẹp bảng "Bảng chấm công" (/bang-cham-cong) — chỉ áp dụng khi body có
   class "hrm-attendance-page" (gắn bằng theme-attendance.js). Không đổi số
   liệu/logic — badge trạng thái (Có mặt/Đi trễ/Vắng) đã có màu sẵn từ trước,
   ở đây chỉ tận dụng lại đúng màu đó (qua :has()) để quét nhanh cả bảng dài
   mà không cần đọc từng nhãn chữ. */

/* 29/09/2026 — theo yêu cầu, bảng công kiểu liệt kê (mỗi dòng 1 nhân viên/1 ngày) không hiển
   thị nữa, thay hẳn bằng bảng công dạng lưới (attendance-grid.js/css) làm view DUY NHẤT của
   trang này. `main > div.space-y-4` là khối bọc TOÀN BỘ nội dung gốc (thẻ số liệu + bộ lọc +
   bảng + phân trang) — ẩn cả khối, không ẩn riêng bảng, để không còn gì hiện ra phía sau lưới. */
body.hrm-attendance-page main > div.space-y-4 {
  display: none !important;
}

body.hrm-attendance-page table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header dính khi cuộn — khung bảng vốn đã tự giới hạn chiều cao + cuộn riêng
   (class max-h-[...] overflow-auto có sẵn), nên sticky ở đây hoạt động ngay,
   không cần thêm khung bọc như đã phải làm ở trang Bảng lương. */
body.hrm-attendance-page table thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 2;
  box-shadow: 0 1px 0 0 #e6ebf2;
}

body.hrm-attendance-page table tbody tr:nth-child(even) td {
  background: #f8fafc;
}
body.hrm-attendance-page table tbody tr:hover td {
  background: #fbf5e4;
}

/* Viền trái theo đúng màu badge trạng thái của hàng đó */
body.hrm-attendance-page table tbody tr:has(.bg-emerald-50) td:first-child {
  box-shadow: inset 3px 0 0 0 #10b981;
}
body.hrm-attendance-page table tbody tr:has(.bg-amber-50) td:first-child {
  box-shadow: inset 3px 0 0 0 #f59e0b;
}
body.hrm-attendance-page table tbody tr:has(.bg-red-50) td:first-child {
  box-shadow: inset 3px 0 0 0 #ef4444;
}

/* Cột "Số giờ" căn phải, số đều chân, đậm hơn một chút cho dễ so sánh */
body.hrm-attendance-page table th:nth-child(6),
body.hrm-attendance-page table td:nth-child(6) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

body.hrm-attendance-page table thead th,
body.hrm-attendance-page table tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Ô "Tháng" — chữ gốc (tên tháng tiếng Anh do trình duyệt tự vẽ) ẩn đi, nhãn
   tiếng Việt "Tháng 09/2026" chèn đè lên bằng JS (theme-attendance.js), định
   vị theo toạ độ MÀN HÌNH thật của input (position: fixed) — không đụng cấu
   trúc DOM của input nên an toàn với React. */
.hrm-thang-input-goc {
  color: transparent;
}
.hrm-thang-nhan-viet {
  position: fixed;
  align-items: center;
  padding-left: 13px;
  font-size: 13.5px;
  color: #111827;
  pointer-events: none;
  white-space: nowrap;
  /* 29/09/2026 — phải cao hơn panel bảng lưới (attendance-grid.css, z-index:10) vì ô Tháng của
     chính bảng lưới cũng được đè nhãn: thấp hơn panel thì nhãn bị lớp nền trắng của panel che
     mất dù toạ độ/nội dung vẫn đúng. Vẫn thấp hơn menu dưới (z-30) và sidebar (z-40) của app. */
  z-index: 15;
  box-sizing: border-box;
}

/* ==== theme-employees.css ==== */
/* Làm đẹp bảng "Nhân sự" (/employees) — chỉ áp dụng khi body có class
   "hrm-employees-page" (gắn bằng theme-employees.js). Không đổi số liệu. */

body.hrm-employees-page table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Khung bảng vốn đã tự giới hạn chiều cao + cuộn riêng, sticky hoạt động ngay */
body.hrm-employees-page table thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 2;
  box-shadow: 0 1px 0 0 #e6ebf2;
}

body.hrm-employees-page table tbody tr:nth-child(even) td {
  background: #f8fafc;
}
body.hrm-employees-page table tbody tr:hover td {
  background: #fbf5e4;
}

/* Viền trái theo trạng thái — chỉ thấy rõ tác dụng ở tab "Tất cả" (nơi 2
   trạng thái trộn lẫn); ở 2 tab lọc riêng thì cả bảng cùng màu, vô hại. */
body.hrm-employees-page table tbody tr:has(.bg-emerald-50) td:first-child {
  box-shadow: inset 3px 0 0 0 #10b981;
}
body.hrm-employees-page table tbody tr:has(.bg-ink-100.text-ink-500.ring-ink-500\/20) td:first-child {
  box-shadow: inset 3px 0 0 0 #94a3b8;
}

/* Vòng tròn chữ cái đầu tên — đổi sang tông vàng thương hiệu thay vì xám
   trung tính, khớp màu logo/nhận diện đã dùng ở các trang khác.
   🔴 nth-child(4) chứ không phải (2): cột checkbox chiếm vị trí đầu, rồi "Mã chấm công"
   (30/09/2026) chèn TRƯỚC "Họ và tên" — đẩy nó xuống cột 4. */
body.hrm-employees-page table tbody td:nth-child(4) span.rounded-full {
  background: #f6edcc;
  color: #855e1d;
}

/* Ẩn 2 cột gốc "Tài khoản"/"Trạng thái" theo yêu cầu người dùng (30/09/2026) — không xoá
   được node React nên chỉ ẩn qua CSS (giữ nguyên bảng chấm công cũng ẩn kiểu này), không đổi
   dữ liệu/thứ tự cột thật.
   🔴 nth-child(9)/(11): cột checkbox(1) + Mã chấm công(3) + Cấp bậc(7) chèn thêm của
   theme-employees.js đẩy Tài khoản/Trạng thái xuống đúng 2 vị trí này — đổi thứ tự cột chèn
   thì PHẢI cập nhật lại 2 số này. */
body.hrm-employees-page table thead th:nth-child(9),
body.hrm-employees-page table tbody td:nth-child(9),
body.hrm-employees-page table thead th:nth-child(11),
body.hrm-employees-page table tbody td:nth-child(11) {
  display: none;
}

body.hrm-employees-page table thead th,
body.hrm-employees-page table tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ── Toolbar chọn nhiều (employee-bulk-actions.js) ──────────────────────── */

body.hrm-employees-page .hrm-bulk-checkbox-col {
  width: 36px;
  padding-left: 12px !important;
  padding-right: 0 !important;
}
body.hrm-employees-page .hrm-bulk-checkbox-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #b8860b;
}

.hrm-bulk-toolbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #17233b;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.35);
  font-size: 13.5px;
}
.hrm-bulk-toolbar strong {
  color: #f6c453;
  font-weight: 600;
  white-space: nowrap;
}
.hrm-bulk-toolbar button {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.hrm-bulk-toolbar button:hover {
  background: rgba(255, 255, 255, 0.18);
}
.hrm-bulk-toolbar button.hrm-bulk-danger {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(248, 113, 113, 0.4);
}
.hrm-bulk-toolbar button.hrm-bulk-danger:hover {
  background: rgba(220, 38, 38, 0.32);
}
.hrm-bulk-toolbar .hrm-bulk-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  padding: 2px 6px;
}

.hrm-bulk-menu {
  position: fixed;
  z-index: 70;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  min-width: 200px;
  overflow: hidden;
  font-size: 13.5px;
}
.hrm-bulk-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: #1e293b;
}
.hrm-bulk-menu button:hover {
  background: #f8fafc;
}
.hrm-bulk-menu button.hrm-bulk-danger {
  color: #b91c1c;
}
.hrm-bulk-menu .hrm-bulk-menu-hint {
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 2px;
}

.hrm-bulk-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hrm-bulk-modal {
  background: #fff;
  border-radius: 14px;
  width: min(480px, 92vw);
  padding: 20px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.3);
}
.hrm-bulk-modal h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #0f172a;
}
.hrm-bulk-modal p.hrm-bulk-modal-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #64748b;
}
.hrm-bulk-modal label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin: 10px 0 4px;
}
.hrm-bulk-modal input[type="text"],
.hrm-bulk-modal input[type="date"],
.hrm-bulk-modal input[type="file"],
.hrm-bulk-modal select,
.hrm-bulk-modal textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
}
.hrm-bulk-modal textarea {
  min-height: 140px;
  resize: vertical;
}
.hrm-bulk-modal .hrm-bulk-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.hrm-bulk-modal .hrm-bulk-modal-actions button {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.hrm-bulk-modal .hrm-bulk-modal-actions button.hrm-bulk-primary {
  background: #b8860b;
  border-color: #b8860b;
  color: #fff;
}

/* ── Ô tìm + chọn 1 mục (nhân viên/phòng ban...) trong modal — dùng ở "Kiêm nhiệm" ─────── */
.emp-pick-wrap {
  position: relative;
}
.emp-pick-list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 24px -8px rgba(16, 23, 42, 0.25);
  max-height: 220px;
  overflow-y: auto;
  z-index: 90;
}
.emp-pick-list.open {
  display: block;
}
.emp-pick-item {
  padding: 8px 11px;
  cursor: pointer;
  font-size: 13px;
}
.emp-pick-item:hover {
  background: #f8fafc;
}

/* ── Banner mời gán Mã chấm công ngay sau khi tạo hồ sơ mới ────────────── */
.hrm-new-emp-banner {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 14px 32px -12px rgba(15, 23, 42, 0.28);
  font-size: 13px;
  max-width: min(92vw, 560px);
}
.hrm-new-emp-banner b {
  color: #14532d;
}
.hrm-new-emp-banner a {
  flex: none;
  background: linear-gradient(135deg, #d3ad42, #c29429);
  color: #10141f;
  font-weight: 700;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
}
.hrm-new-emp-banner a:hover {
  opacity: 0.92;
}
.hrm-new-emp-banner .hrm-new-emp-close {
  flex: none;
  background: none;
  border: none;
  color: #4ade80;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
}
@media (max-width: 640px) {
  .hrm-new-emp-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    top: 12px;
  }
}

/* ==== theme-requests.css ==== */
/* Làm đẹp bảng "Quản lý đơn từ" (/request-management) — chỉ áp dụng khi body
   có class "hrm-requests-page" (gắn bằng theme-requests.js). Bảng này vốn đã
   có zebra + hover (bg-brand-50 khi rê chuột) sẵn trong code — ở đây chỉ
   thêm: header dính, viền trái theo đúng màu badge trạng thái (Chờ duyệt/Đã
   duyệt/Từ chối/Đã huỷ) để quét nhanh cả danh sách dài. Không đổi số liệu. */

body.hrm-requests-page table {
  border-collapse: separate;
  border-spacing: 0;
}

body.hrm-requests-page table thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 2;
  box-shadow: 0 1px 0 0 #e6ebf2;
}

body.hrm-requests-page table tbody tr:has(.bg-amber-50) td:first-child {
  box-shadow: inset 3px 0 0 0 #f59e0b; /* Chờ duyệt */
}
body.hrm-requests-page table tbody tr:has(.bg-emerald-50) td:first-child {
  box-shadow: inset 3px 0 0 0 #10b981; /* Đã duyệt */
}
body.hrm-requests-page table tbody tr:has(.bg-red-50) td:first-child {
  box-shadow: inset 3px 0 0 0 #ef4444; /* Từ chối */
}
body.hrm-requests-page table tbody tr:has(.bg-ink-100.text-ink-500) td:first-child {
  box-shadow: inset 3px 0 0 0 #94a3b8; /* Đã huỷ */
}

body.hrm-requests-page table thead th,
body.hrm-requests-page table tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ==== attendance-grid.css ==== */
/*
 * Giao diện cho lớp phủ "Xem theo lưới" ở /bang-cham-cong (xem attendance-grid.js).
 * Toàn bộ selector đứng độc lập (không phụ thuộc class Tailwind của bundle React) vì đây là
 * DOM do JS của ta tự dựng, không phải DOM do React quản lý.
 *
 * 30/09/2026 — làm mới giao diện (màu sắc/đổ bóng/chip trạng thái/hover/scrollbar) theo hướng
 * hiện đại hơn. KHÔNG đổi các trị số cấu trúc (position/z-index/left offset cột ghim/sticky top)
 * vì các trị số đó khớp với toạ độ tính bằng tay ở nơi khác (xem chú thích gốc bên dưới) — đổi
 * lệch 1 chỗ là vỡ layout ghim cột hoặc menu con.
 */

/* 29/09/2026 — không còn là modal/lớp phủ toàn màn hình nữa (trước đây `inset:0` che luôn cả
   sidebar/header/menu dưới, khiến không bấm sang trang khác được vì panel không còn nút đóng).
   Giờ panel định vị đúng bằng khung của <main> (tính bằng getBoundingClientRect(), xem
   `dinhViPanel()` trong attendance-grid.js) — chỉ choán đúng vùng nội dung chính, sidebar/menu
   điều hướng xung quanh vẫn lộ ra và bấm được bình thường. top/left/width/height đặt qua JS
   (inline style), CSS ở đây chỉ định vị NỀN (position:fixed, không set sẵn kích thước). */
#hrm-grid-panel {
  display: none;
  position: fixed;
  /* Thấp hơn sidebar (aside z-40) và thanh menu dưới (nav z-30) của app thật — panel chỉ to
     bằng đúng vùng <main> nhưng phần dưới cùng vẫn nằm dưới thanh menu (fixed, không chiếm
     chỗ trong layout flex), nên phải nhường z-index để 2 thứ đó luôn hiện/bấm được. */
  z-index: 10;
}
#hrm-grid-panel.hrm-open {
  display: block;
}

.hrm-grid-backdrop {
  display: none;
}

.hrm-grid-modal {
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e9edf3;
  box-shadow: 0 24px 48px -24px rgba(16, 20, 31, 0.16), 0 2px 8px -2px rgba(16, 20, 31, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
  animation: hrm-fade-in 0.16s ease;
}

@keyframes hrm-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Tiêu đề ---------- */
.hrm-grid-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 20px 12px;
}
.hrm-grid-titlebar h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0b1b34;
}
.hrm-grid-titlebar p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #667085;
}

.hrm-grid-progress {
  margin-top: 7px;
  width: 180px;
  max-width: 40vw;
  height: 5px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}
.hrm-grid-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2c94c, #e2a430);
  transition: width 0.35s ease;
}

/* ---------- Tab "Bảng chấm công" / "Chi tiết bảng chấm công" (30/09/2026) ---------- */
.hrm-grid-tabs {
  display: flex;
  gap: 22px;
  padding: 0 20px;
  border-bottom: 1px solid #e9edf3;
}
.hrm-grid-tab {
  border: none;
  background: transparent;
  padding: 10px 2px;
  font-size: 13px;
  font-weight: 600;
  color: #667085;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.12s ease;
}
.hrm-grid-tab-active {
  color: #0b1b34;
  border-bottom-color: #f2c94c;
}
.hrm-grid-tab:hover:not(.hrm-grid-tab-active) {
  color: #475467;
}

/* Cả 2 view (lưới / chi tiết bảng công) đều phải tự là flex column + flex:1 để
   `.hrm-grid-scroll{flex:1}` bên trong #hrm-view-grid còn hoạt động đúng — nếu không bọc thêm
   1 lớp div thường (không flex) thì con `flex:1` mất tác dụng, bảng không còn tự co giãn hết
   chiều cao modal. */
#hrm-view-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#hrm-view-detail {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
#hrm-view-settings {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ---------- Toolbar (29/09/2026 — kiểu nút icon+chữ theo mẫu hình gửi) ---------- */
.hrm-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex-wrap: wrap;
  padding: 8px 20px;
  background: #fbfcfd;
  border-bottom: 1px solid #e9edf3;
  position: relative;
}

.hrm-tb-divider {
  width: 1px;
  height: 22px;
  flex: none;
  background: #e6ebf2;
  margin: 0 5px;
}

.hrm-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #475467;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.hrm-tb-btn:hover {
  background: #eef1f6;
  color: #0b1b34;
}
.hrm-tb-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Nút chưa nối chức năng thật — mờ hơn 1 chút để phân biệt với nút dùng được ngay */
.hrm-tb-btn[data-soon] {
  opacity: 0.7;
}
.hrm-tb-btn[data-soon]:hover {
  opacity: 1;
}
#hrm-tb-xemtheo-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Nút xổ menu (Xem theo / Tháng) */
.hrm-tb-dropdown {
  position: relative;
}
.hrm-tb-dropdown.hrm-tb-open > .hrm-tb-btn {
  background: #fbf7ea;
  color: #6b4a00;
}
.hrm-tb-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 180px;
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  box-shadow: 0 12px 32px -10px rgba(16, 20, 31, 0.22);
  padding: 6px;
}
.hrm-tb-dropdown.hrm-tb-open .hrm-tb-menu {
  display: block;
}
.hrm-tb-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12.5px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: #344054;
  transition: background-color 0.12s ease;
}
.hrm-tb-menu-item:hover {
  background: #fbf7ea;
  color: #0b1b34;
}
.hrm-tb-menu-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: #667085;
}

/* Popup chọn Tháng — lịch năm/tháng riêng thay input[type=month] gốc trình duyệt */
.hrm-tb-thang-menu {
  min-width: 220px;
  padding: 10px;
}
.hrm-tb-thang-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0b1b34;
}
.hrm-tb-thang-year button {
  border: none;
  background: #f2f4f7;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  color: #475467;
  transition: background-color 0.12s ease;
}
.hrm-tb-thang-year button:hover {
  background: #eef2f7;
  color: #0b1b34;
}
.hrm-tb-thang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.hrm-tb-thang-cell {
  border: none;
  background: #f8fafc;
  padding: 8px 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: #344054;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.hrm-tb-thang-cell:hover {
  background: #fbf7ea;
}
.hrm-tb-thang-cell-active {
  background: #0b1b34;
  color: #fff;
}

/* Toast "sắp có" cho các nút chưa nối chức năng thật (Chốt/Chốt đơn/Import/Tính toán/Cài đặt) */
#hrm-tb-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 60;
  background: #0b1b34;
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.18s ease, transform 0.18s ease;
  max-width: 90vw;
  text-align: center;
}
#hrm-tb-toast.hrm-tb-toast-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Chú thích (ẩn mặc định) ---------- */
.hrm-grid-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 20px;
  font-size: 12px;
  color: #475467;
  background: #f8fafc;
  border-bottom: 1px solid #e9edf3;
}
.hrm-legend-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hrm-legend-divider {
  width: 1px;
  height: 16px;
  flex: none;
  background: #dde3ec;
}
.hrm-grid-legend .hrm-cell {
  display: inline-flex;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 5px;
  border-bottom: none;
}
.hrm-sup-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
}
.hrm-sup-chip.hrm-sup-bad {
  background: #fef3f2;
  color: #b42318;
}
.hrm-sup-chip.hrm-sup-info {
  background: #eff4ff;
  color: #3538cd;
}
.hrm-sup-chip.hrm-sup-good {
  background: #f0fdfa;
  color: #0f766e;
}

.hrm-grid-meta {
  padding: 8px 20px 0;
  font-size: 12px;
  color: #667085;
}

.hrm-grid-status {
  /* Dòng "Đang tải…" canh GIỮA bề ngang thay vì nép trái: lưới rộng vài nghìn pixel nên nép
     trái là chữ nằm tít góc, người dùng không thấy hệ thống đang làm gì. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 20px;
  font-size: 13px;
  color: #475467;
}
.hrm-grid-status:not(.hrm-grid-status-error)::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 2px solid #e6ebf2;
  border-top-color: #f2c94c;
  animation: hrm-spin 0.7s linear infinite;
}
@keyframes hrm-spin {
  to {
    transform: rotate(360deg);
  }
}
.hrm-grid-status-error {
  color: #b91c1c;
}

/* ---------- Bảng ---------- */
.hrm-grid-scroll {
  flex: 1;
  overflow: auto;
}
.hrm-grid-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.hrm-grid-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.hrm-grid-scroll::-webkit-scrollbar-thumb {
  background: #d0d5dd;
  border-radius: 999px;
  border: 2px solid #fff;
  background-clip: padding-box;
}
.hrm-grid-scroll::-webkit-scrollbar-thumb:hover {
  background: #98a2b3;
  background-clip: padding-box;
}

#hrm-grid-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  white-space: nowrap;
}

#hrm-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #eef2f7;
  color: #344054;
  font-weight: 700;
  padding: 5px 4px;
  text-align: center;
  border-bottom: 1px solid #d0d5dd;
  border-right: 1px solid #e6ebf2;
}
#hrm-grid-table thead th .hrm-dow {
  font-size: 10px;
  color: #667085;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
#hrm-grid-table thead th .hrm-daynum {
  font-size: 12.5px;
}
#hrm-grid-table thead th.hrm-dow-sun {
  background: #fbecec;
  color: #b42318;
}
#hrm-grid-table thead th.hrm-dow-sun .hrm-dow {
  color: #c0554a;
}
#hrm-grid-table thead th.hrm-dow-sat {
  background: #f3f5f8;
  color: #475467;
}

#hrm-grid-table td,
#hrm-grid-table th {
  border-right: 1px solid #eef1f5;
}

#hrm-grid-table .hrm-col-stt,
#hrm-grid-table .hrm-col-code,
#hrm-grid-table .hrm-col-name,
#hrm-grid-table .hrm-col-dept,
#hrm-grid-table .hrm-col-pos {
  position: sticky;
  background: #fff;
  z-index: 2;
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid #eef1f5;
  transition: background-color 0.1s ease;
}
#hrm-grid-table thead .hrm-col-stt,
#hrm-grid-table thead .hrm-col-code,
#hrm-grid-table thead .hrm-col-name,
#hrm-grid-table thead .hrm-col-dept,
#hrm-grid-table thead .hrm-col-pos {
  z-index: 4;
  background: #eef2f7;
}

#hrm-grid-table .hrm-col-stt {
  left: 0;
  width: 34px;
  text-align: center;
  color: #667085;
}
#hrm-grid-table .hrm-col-code {
  left: 34px;
  min-width: 76px;
  font-weight: 600;
  color: #0b1b34;
}
#hrm-grid-table .hrm-col-name {
  left: 110px;
  min-width: 170px;
  font-weight: 600;
  color: #101828;
}
#hrm-grid-table .hrm-col-dept {
  left: 280px;
  min-width: 150px;
  color: #667085;
}
#hrm-grid-table .hrm-col-pos {
  left: 430px;
  min-width: 150px;
  color: #667085;
  box-shadow: 2px 0 4px -2px rgba(16, 20, 31, 0.12);
}

/* Vằn xen kẽ dòng + hover cả dòng — chỉ áp cho các cột định danh ghim (không đụng màu trạng
   thái của các ô ngày, để không làm lệch/nhoè hệ màu L/N/x/số đã định nghĩa bên dưới). */
#hrm-grid-table tbody tr:nth-child(even) .hrm-col-stt,
#hrm-grid-table tbody tr:nth-child(even) .hrm-col-code,
#hrm-grid-table tbody tr:nth-child(even) .hrm-col-name,
#hrm-grid-table tbody tr:nth-child(even) .hrm-col-dept,
#hrm-grid-table tbody tr:nth-child(even) .hrm-col-pos,
#hrm-grid-table tbody tr:nth-child(even) .hrm-code-blank {
  background: #fafbfc;
}
#hrm-grid-table tbody tr:hover .hrm-col-stt,
#hrm-grid-table tbody tr:hover .hrm-col-code,
#hrm-grid-table tbody tr:hover .hrm-col-name,
#hrm-grid-table tbody tr:hover .hrm-col-dept,
#hrm-grid-table tbody tr:hover .hrm-col-pos,
#hrm-grid-table tbody tr:hover .hrm-code-blank {
  background: #f3f6fb;
}

.hrm-cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 5px 4px;
  min-width: 32px;
  border-bottom: 1px solid #eef1f5;
  font-variant-numeric: tabular-nums;
}
.hrm-cell sup {
  font-size: 9px;
  margin-left: 1px;
  font-weight: 700;
  color: #b54708;
}
.hrm-cell sup.hrm-sup-bad {
  color: #b42318;
}
.hrm-cell sup.hrm-sup-info {
  color: #3538cd;
}
.hrm-cell sup.hrm-sup-good {
  color: #0f766e;
}

/* Dải màu nhạt xuyên suốt cột Chủ nhật/Thứ Bảy, khớp với header đã tô ở trên — đứng TRƯỚC các
   rule màu trạng thái (hrm-code-*/hrm-num-*) bên dưới nên trên ô đã có trạng thái riêng, màu
   trạng thái vẫn thắng (đúng ý đồ: chỉ ô trống mới lộ rõ dải màu cột cuối tuần). */
.hrm-dow-sun-col {
  background: #fbf3f2;
}
.hrm-dow-sat-col {
  background: #fafbfc;
}

.hrm-code-blank {
  background: #fbfbfc;
}
.hrm-code-L {
  background: #f2c94c;
  color: #6b4a00;
  font-weight: 700;
  border-radius: 5px;
}
.hrm-code-N {
  background: #eef2f6;
  color: #667085;
  font-weight: 600;
  border-radius: 5px;
}
.hrm-code-x {
  background: #fef3f2;
  color: #b42318;
  font-weight: 700;
  border-radius: 5px;
}
.hrm-num-full {
  background: #ecfdf3;
  color: #067647;
  font-weight: 600;
}
.hrm-num-partial {
  background: #fffaeb;
  color: #b54708;
  font-weight: 700;
}
.hrm-num-bad {
  background: #fef3f2;
  color: #b42318;
  font-weight: 700;
}
.hrm-num-info {
  background: #eff4ff;
  color: #3538cd;
  font-weight: 600;
}
.hrm-num-good {
  background: #f0fdfa;
  color: #0f766e;
  font-weight: 700;
}

.hrm-cell-clickable {
  cursor: pointer;
  transition: background-color 0.12s ease, outline-color 0.12s ease;
}
.hrm-cell-clickable:hover {
  outline: 2px solid #0b1b34;
  outline-offset: -2px;
  background: #fff8e1;
}

/* ---------- Popup chi tiết ngày công (giờ vào/ra + lịch sử chấm công) ---------- */
#hrm-detail-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
}
#hrm-detail-popup.hrm-open {
  /* 🔴 Canh GIỮA cả hai chiều. Bản trước ghim `top: 12vh` nên hộp luôn lệch lên, và vì chiều
     cao thay đổi theo tab đang xem (Tổng hợp / Đơn từ / Lịch sử chấm công) nên mỗi lần đổi tab
     hộp lại nhảy — mắt phải đi tìm lại nội dung. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.hrm-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 27, 52, 0.4);
}

.hrm-detail-card {
  position: relative;
  width: min(92vw, 480px);
  /* min-height giữ hộp không co giãn giật khi đổi tab có ít/nhiều nội dung. */
  min-height: 240px;
  max-height: 80vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 60px -16px rgba(0, 0, 0, 0.32), 0 4px 14px -4px rgba(0, 0, 0, 0.16);
  animation: hrm-fade-in 0.16s ease;
}

.hrm-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #e6ebf2;
  position: sticky;
  top: 0;
  background: #fff;
}
.hrm-detail-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0b1b34;
}
#hrm-detail-close {
  border: none;
  background: transparent;
  color: #d92d20;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  border-radius: 6px;
  padding: 4px 6px;
  transition: background-color 0.12s ease;
}
#hrm-detail-close:hover {
  background: #fef3f2;
}

.hrm-detail-tabs {
  display: flex;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid #e6ebf2;
  position: sticky;
  top: 53px;
  background: #fff;
  z-index: 1;
}
.hrm-dtab {
  border: none;
  background: transparent;
  padding: 10px 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: #667085;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.12s ease;
}
.hrm-dtab-active {
  color: #0b1b34;
  border-bottom-color: #f2c94c;
}
.hrm-dtab:hover:not(.hrm-dtab-active) {
  color: #475467;
}

#hrm-detail-body {
  padding: 16px 18px 20px;
  font-size: 13px;
  color: #344054;
}

.hrm-detail-requests {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hrm-detail-requests li {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  margin-bottom: 8px;
}
.hrm-req-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hrm-req-top b {
  font-size: 13px;
  color: #0b1b34;
}
.hrm-req-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.hrm-req-status-approved {
  background: #d1fadf;
  color: #05603a;
}
.hrm-req-status-pending,
.hrm-req-status-waiting_peer {
  background: #fef0c7;
  color: #93370d;
}
.hrm-req-status-rejected,
.hrm-req-status-peer_declined {
  background: #fee4e2;
  color: #b91c1c;
}
.hrm-req-status-cancelled {
  background: #e4e7ec;
  color: #475467;
}
.hrm-req-summary {
  font-size: 12.5px;
  color: #475467;
}

.hrm-detail-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eef1f5;
}
.hrm-detail-summary div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hrm-detail-summary span {
  font-size: 11px;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hrm-detail-summary b {
  font-size: 14px;
  color: #101828;
}

.hrm-detail-events-head {
  font-size: 12px;
  font-weight: 700;
  color: #475467;
  margin-bottom: 8px;
}
.hrm-detail-events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hrm-detail-events li {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.hrm-detail-events li b {
  font-variant-numeric: tabular-nums;
  color: #0b1b34;
}
.hrm-detail-empty,
.hrm-detail-error {
  color: #667085;
  font-size: 13px;
}
.hrm-detail-error {
  color: #b91c1c;
}

/* ---------- Tab "Chi tiết bảng chấm công" — Thông tin chung (30/09/2026) ---------- */
.hrm-tt-form {
  max-width: 760px;
  padding: 20px;
}
.hrm-tt-heading {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  color: #0b1b34;
}
.hrm-tt-readonly-banner {
  margin: -6px 0 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fffaeb;
  color: #b54708;
  font-size: 12.5px;
  font-weight: 600;
}
.hrm-tt-input:disabled,
.hrm-tt-input:disabled + span {
  background: #f8fafc;
  color: #667085;
  cursor: not-allowed;
}
.hrm-tt-check input:disabled {
  cursor: not-allowed;
}
.hrm-tt-check:has(input:disabled) {
  color: #667085;
  cursor: not-allowed;
}
.hrm-tt-toggle:has(input:disabled) {
  cursor: not-allowed;
}
.hrm-tt-toggle input:disabled + span {
  opacity: 0.6;
}
.hrm-tt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
.hrm-tt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hrm-tt-field-full {
  grid-column: 1 / -1;
}
.hrm-tt-field > label {
  font-size: 12px;
  font-weight: 600;
  color: #667085;
}
.hrm-tt-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: #101828;
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.hrm-tt-input:focus {
  outline: none;
  border-color: #c29429;
  box-shadow: 0 0 0 3px rgba(194, 148, 41, 0.15);
}
.hrm-tt-textarea {
  resize: vertical;
  min-height: 60px;
}
.hrm-tt-cycle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #475467;
}
.hrm-tt-cycle-num {
  width: 64px;
  flex: none;
}
.hrm-tt-hint {
  margin-top: 2px;
  font-size: 11.5px;
  color: #667085;
}

/* Công tắc bật/tắt "Hoạt động" */
.hrm-tt-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.hrm-tt-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.hrm-tt-toggle span {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d0d5dd;
  transition: background-color 0.15s ease;
  flex: none;
}
.hrm-tt-toggle span::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.hrm-tt-toggle input:checked + span {
  background: #067647;
}
.hrm-tt-toggle input:checked + span::before {
  transform: translateX(16px);
}

/* Ô chọn kiểu chip (Phòng ban áp dụng / Nhân sự có quyền xem) */
.hrm-tt-picker {
  position: relative;
}
.hrm-tt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.hrm-tt-chips-empty {
  font-size: 12.5px;
  color: #667085;
}
.hrm-tt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #344054;
  font-size: 12.5px;
  font-weight: 600;
}
.hrm-tt-chip button {
  border: none;
  background: transparent;
  color: #667085;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
}
.hrm-tt-chip button:hover {
  background: #e4e7ec;
  color: #475467;
}
.hrm-tt-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 4px;
  max-height: 220px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(16, 20, 31, 0.25);
  padding: 6px;
}

/* Checkbox "Tách dòng chấm công của nhân sự" */
.hrm-tt-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.hrm-tt-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #344054;
  cursor: pointer;
}

.hrm-tt-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #eef1f5;
}
.hrm-tt-save-btn {
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  background: linear-gradient(135deg, #d3ad42, #c29429);
  color: #10141f;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(194, 148, 41, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hrm-tt-save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(194, 148, 41, 0.6);
}
.hrm-tt-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.hrm-tt-save-msg {
  font-size: 12.5px;
  color: #667085;
}
.hrm-tt-save-msg-ok {
  color: #067647;
  font-weight: 600;
}
.hrm-tt-save-msg-error {
  color: #b42318;
  font-weight: 600;
}

/* ---------- Tab "Cài đặt" — Ca làm việc (30/09/2026) ---------- */
.hrm-settings-layout {
  display: flex;
  height: 100%;
}
.hrm-settings-nav {
  width: 200px;
  flex: none;
  padding: 18px 12px;
  border-right: 1px solid #eef1f5;
  overflow-y: auto;
}
.hrm-settings-nav-heading {
  padding: 0 10px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #667085;
}
.hrm-settings-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-bottom: 2px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  cursor: pointer;
}
.hrm-settings-nav-item:hover:not(:disabled) {
  background: #f2f4f7;
}
.hrm-settings-nav-item:disabled {
  color: #c8cfd8;
  cursor: not-allowed;
}
.hrm-settings-nav-active {
  background: #fbf7ea !important;
  color: #6b4a00;
  font-weight: 700;
}
.hrm-settings-nav-empty {
  padding: 0 10px;
  font-size: 12px;
  color: #c8cfd8;
}
.hrm-settings-content {
  flex: 1;
  min-width: 0;
  padding: 20px 24px;
  overflow-y: auto;
}
.hrm-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.hrm-settings-head h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #0b1b34;
}
.hrm-settings-head p {
  margin: 0;
  font-size: 12.5px;
  color: #667085;
}

/* Sub-tab trong 1 mục Cài đặt (VD "Địa điểm chấm công GPS" / "Địa chỉ chấm công Wifi" trong
   "Chấm công GPS/Wifi") — tái dùng nút .hrm-grid-tab có sẵn, chỉ thêm khung bọc gọn hơn khung
   .hrm-grid-tabs gốc (khung gốc thiết kế để tràn sát viền toàn trang, không hợp trong 1 khối
   nội dung đã có padding riêng). */
/* "Đối tượng áp dụng"/"Người tạo"/"Người sửa" trong bảng "Chấm công GPS/Wifi" — không có ảnh
   đại diện thật (Employee không có cột avatar), dùng vòng tròn chữ cái đầu màu theo hash tên
   thay thế, đủ để phân biệt nhanh bằng mắt mà không cần thêm cột lưu ảnh. */
.hrm-wl-avatar-stack {
  display: flex;
  align-items: center;
}
.hrm-wl-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #fff;
  margin-left: -7px;
}
.hrm-wl-avatar-stack .hrm-wl-avatar:first-child {
  margin-left: 0;
}
.hrm-wl-avatar-more {
  background: #eef2f6 !important;
  color: #667085 !important;
}
.hrm-wl-avatar-empty {
  background: #eef2f6 !important;
  color: #c8cfd8 !important;
  border: none;
  margin-left: 0;
}

.hrm-wl-subtabs {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eef1f5;
}

.hrm-shift-table-wrap {
  border: 1px solid #eef1f5;
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
}
.hrm-shift-table-ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hrm-shift-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hrm-shift-table thead th {
  text-align: left;
  padding: 10px 14px;
  background: linear-gradient(#fbfcfd, #eef2f7);
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #d0d5dd;
}
.hrm-shift-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #eef1f5;
  color: #344054;
}
.hrm-shift-table tbody tr:last-child td {
  border-bottom: none;
}
.hrm-shift-table tbody tr:hover td {
  background: #fbf8ef;
}
.hrm-shift-name {
  font-weight: 600;
  color: #101828;
}
.hrm-shift-empty {
  text-align: center;
  color: #667085;
  padding: 32px 20px !important;
}
.hrm-shift-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #eef2f6;
  color: #667085;
  margin-left: 6px;
}
.hrm-shift-badge-flex {
  background: #f0fdfa;
  color: #0f766e;
}
.hrm-shift-badge-default {
  background: #fdf2d8;
  color: #92620a;
}
.hrm-shift-actions {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}
.hrm-shift-actions button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 7px;
  color: #667085;
  display: flex;
}
.hrm-shift-actions button:hover {
  background: #eef2f6;
  color: #0b1b34;
}
.hrm-shift-actions button.danger:hover {
  background: #fef3f2;
  color: #b42318;
}
.hrm-shift-actions svg {
  width: 15px;
  height: 15px;
}

/* Modal Tạo mới/Sửa/Nhân bản ca — cùng khung với #hrm-detail-popup, ID riêng để không đụng
   trạng thái mở/đóng của popup chi tiết ngày công. */
#hrm-shift-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
}
#hrm-shift-modal.hrm-open {
  display: block;
}

/* Modal "Chấm công GPS/Wifi" — Tạo mới/Sửa địa điểm (#hrm-wl-modal) và Thêm dải IP
   (#hrm-wl-ip-modal), cùng khung với #hrm-shift-modal ở trên, mỗi cái 1 ID riêng vì có thể
   cần mở độc lập nhau (không dùng chung 1 modal). */
#hrm-wl-modal,
#hrm-wl-ip-modal,
#hrm-wf-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
}
#hrm-wl-modal.hrm-open,
#hrm-wl-ip-modal.hrm-open,
#hrm-wf-modal.hrm-open {
  display: block;
}
.hrm-shift-card {
  width: min(92vw, 560px);
}
.hrm-shift-card .hrm-tt-grid {
  grid-template-columns: 1fr 1fr;
}

/* "Quy trình duyệt" (30/09/2026) — card tổng quan 9 loại đơn + modal Tạo/Sửa với danh sách
   cấp duyệt động, xem attendance-grid.js (renderWorkflowGrid/renderWorkflowStepsUI). */
.hrm-wf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hrm-wf-card {
  border: 1px solid #eef1f5;
  border-radius: 12px;
  padding: 14px 16px;
}
.hrm-wf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hrm-wf-card-head b {
  font-size: 13.5px;
  color: #101828;
}
.hrm-wf-edit-btn {
  flex: none;
  border: 1px solid #d0d5dd;
  background: #fff;
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
}
.hrm-wf-edit-btn:hover {
  background: #f9fafb;
}
.hrm-wf-scope {
  font-size: 11.5px;
  color: #667085;
  margin-bottom: 6px;
}
.hrm-wf-steps {
  font-size: 12.5px;
  color: #475467;
}
.hrm-wf-steps-empty {
  color: #c8cfd8;
  font-style: italic;
}

.hrm-wf-modal-card {
  width: min(92vw, 620px);
}
.hrm-wf-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hrm-wf-step-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fdf2d8;
  color: #92620a;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hrm-wf-step-del-btn {
  flex: none;
  background: none;
  border: none;
  color: #667085;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
}
.hrm-wf-step-del-btn:hover {
  color: #b42318;
}
.hrm-wf-add-btn {
  margin-top: 4px;
  background: none;
  border: 1px dashed #d0d5dd;
  border-radius: 8px;
  padding: 8px;
  width: 100%;
  color: #667085;
  font-size: 13px;
  cursor: pointer;
}
.hrm-wf-add-btn:hover {
  background: #f9fafb;
}
.hrm-wf-user-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  margin-top: 4px;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: 0 8px 20px -8px rgba(16, 20, 31, 0.18);
}
.hrm-wf-user-results div {
  padding: 7px 10px;
  font-size: 12.5px;
  cursor: pointer;
}
.hrm-wf-user-results div:hover {
  background: #fbf8ef;
}
.hrm-wf-delete-link {
  background: none;
  border: none;
  color: #b42318;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
}
.hrm-wf-delete-link:hover {
  text-decoration: underline;
}

/* ==== hr-menu.css ==== */
/* REQ-EMP-2x (29/09/2026) — style cho menu xổ "Nhân sự" chèn bằng hr-menu.js.
   Màu lấy theo đúng token sidebar đang dùng (navy tối + vàng thương hiệu). */

nav a[href="/employees"],
nav a[href="/bang-cham-cong"] {
  position: relative;
  padding-right: 34px !important;
}

/* "Phân ca" (30/09/2026) — menu cha LỒNG trong "Chấm công", là 1 .hr-menu-sub-item chứ không
   phải link cấp 1 như 2 cái trên, nên cần tự khai position:relative + chừa chỗ cho caret riêng
   (không dùng chung selector trên vì .hr-menu-sub-item đã có padding-left khác hẳn cấp 1). */
a.hr-menu-sub-item[href="/hr-shift-plans-list.html"] {
  position: relative;
  padding-right: 30px;
}

.hr-menu-caret {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  opacity: 0.7;
  transition: transform 0.15s;
}
.hr-menu-caret:hover {
  opacity: 1;
}
.hr-menu-caret-thu-gon {
  transform: translateY(-50%) rotate(-90deg);
}

.hr-menu-sub {
  padding: 2px 2.5px 4px 30px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hr-menu-sub-item {
  display: block;
  padding: 6px 10px;
  font-size: 12.5px;
  color: #a8b3c7;
  text-decoration: none;
  border-radius: 6px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  padding-left: 12px;
  transition: background 0.12s, color 0.12s;
}
.hr-menu-sub-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.hr-menu-sub-item-active {
  color: #f6c453;
  border-left-color: #f6c453;
  font-weight: 600;
}

/* ==== hr-app-shell.css ==== */
/* Khung sidebar cho 3 trang tĩnh (hr-dashboard/hr-contracts/hr-decisions.html) — xem
   hr-app-shell.js. Chỉ áp dụng khi trang đó tự thêm class "hrm-has-shell" vào <body>. */

body.hrm-has-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  margin: 0;
  padding: 0 !important; /* đè padding riêng của từng trang tĩnh — chuyển padding đó sang .hrm-shell-main */
}

#hrm-app-shell {
  display: flex;
}
#hrm-app-shell aside {
  height: 100vh;
  position: sticky;
  top: 0;
}

.hrm-shell-main {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 28px 16px 60px;
  box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════════════
   ĐIỆN THOẠI: sidebar thành NGĂN KÉO trượt ra, không chiếm chỗ nữa

   🔴 Đo trên màn 375px: sidebar cố định 222px ⇒ nội dung chỉ còn ~150px, bảng biểu bóp
   nát, không có nút nào để đóng. Trên điện thoại trang tĩnh coi như không dùng được.

   Dưới 768px: đẩy sidebar ra ngoài màn, thêm thanh đỉnh có nút ☰ và lớp phủ.
   ══════════════════════════════════════════════════════════════════════ */
#hrm-thanh-dinh { display: none; }

@media (max-width: 767px) {
  #hrm-thanh-dinh {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    inset: 0 0 auto 0;
    height: 52px;
    padding: 0 12px;
    background: #fff;
    border-bottom: 1px solid #e4e7ec;
    z-index: 59;
  }

  #hrm-thanh-dinh button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #101828;
    /* Ô bấm 38px — nhỏ hơn thì trên điện thoại bấm trượt. */
  }

  #hrm-thanh-dinh span {
    font-weight: 700;
    font-size: 15px;
    color: #101828;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hrm-has-shell { display: block; }

  #hrm-app-shell aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 264px;
    max-width: 85vw;
    z-index: 61;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }

  body.hrm-mo-menu #hrm-app-shell aside { transform: translateX(0); }

  #hrm-lop-phu {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  body.hrm-mo-menu #hrm-lop-phu { opacity: 1; pointer-events: auto; }

  /* Lề nội dung do giao-dien-chung.css quy định — để một chỗ duy nhất, hai nơi cùng khai
     là sau này sửa một chỗ rồi tưởng đã xong. */
}

/* ==== giao-dien-chung.css ==== */
/*
 * REQ-UI-05 (01/10/2026) — đồng bộ giao diện giữa app React và 18 trang tĩnh, và chia đều
 * thanh điều hướng dưới trên điện thoại.
 *
 * ── Vì sao cần ─────────────────────────────────────────────────────────────────
 * Đo trên production, cùng một hệ thống mà hai nửa trông như hai phần mềm khác nhau:
 *
 *                    trang tĩnh (.html)        app React
 *   font             "Segoe UI"                "Be Vietnam Pro"
 *   nền              rgb(248,250,252)          rgb(241,245,249)
 *   màu chữ          rgb(17,24,39)             rgb(31,41,55)
 *   lề nội dung      28px 16px 60px            24px
 *
 * 🔴 "Be Vietnam Pro" ĐÃ được tải sẵn trên chính các trang tĩnh (chúng nạp bundle CSS của
 * app), chỉ là CSS riêng của từng trang khai đè bằng 'Segoe UI'. Nên đây không phải việc thêm
 * font, chỉ là thôi đè lên nó.
 *
 * ── Phạm vi: CỐ Ý HẸP ──────────────────────────────────────────────────────────
 * Chỉ đồng bộ phần nền tảng: font, nền, màu chữ, lề. KHÔNG đụng cỡ tiêu đề, bố cục thẻ hay
 * bề rộng nội dung của từng trang — mỗi trang có nội dung khác nhau (có trang là biểu mẫu hẹp,
 * có trang là bảng rộng), ép chung một khuôn là làm hỏng những trang đang vừa vặn, mà lại
 * không giải quyết được cảm giác "hai phần mềm" — thứ đó đến từ font và màu nền.
 */

:root {
  /* Đúng dãy font app React đang dùng, chép từ computed style của nó. */
  --hrm-font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --hrm-nen: #f1f5f9;
  --hrm-chu: #1f2937;

  /* ── Token thiết kế, chép nguyên từ trang Bảng chấm công (attendance-grid.css) ──
     Đây là trang đang được lấy làm chuẩn, nên mọi giá trị dưới đây là ĐO từ nó, không tự
     nghĩ ra — có vậy hai bên mới thật sự giống nhau chứ không chỉ "na ná". */
  --hrm-vien: #e9edf3;          /* viền thẻ */
  --hrm-vien-nhat: #eef1f5;     /* viền trong bảng */
  --hrm-vien-dam: #d0d5dd;      /* viền dưới hàng tiêu đề, viền ô nhập */
  --hrm-goc: 14px;              /* bo góc thẻ */
  --hrm-goc-nho: 8px;           /* bo góc nút, ô nhập */
  --hrm-bong: 0 24px 48px -24px rgba(16, 20, 31, 0.16),
              0 2px 8px -2px rgba(16, 20, 31, 0.06);
  --hrm-tieu-de: #0b1b34;       /* chữ tiêu đề */
  --hrm-chu-vua: #344054;
  --hrm-chu-nhat: #667085;      /* chữ phụ */
  --hrm-chu-mo: #98a2b3;
  --hrm-nen-bang-dau: #eef2f7;  /* nền hàng tiêu đề bảng */
  --hrm-nen-ro: #fbfcfd;        /* nền thanh công cụ / hàng rê chuột */
  --hrm-vang: #f2c94c;          /* màu nhấn */
  --hrm-vang-nhat: #fbf7ea;
}

/* ══════════════════════════════════════════════════════════════════════════
   1. FONT — áp cho mọi phần tử trong trang tĩnh

   🔴 Phải dùng `*` + `!important`: từng trang tĩnh khai `font-family` ở nhiều chỗ (body,
   .wrap, bảng, nút), đặt mỗi ở `body` thì những chỗ đó vẫn giữ Segoe UI và trang thành
   nửa nọ nửa kia — khó chịu hơn cả để nguyên.

   🔴 Trừ phần chữ ĐƠN CÁCH: mã token (`kgvt_xH0e3…`), serial máy, số liệu căn cột đang cố ý
   dùng monospace. Đổi chúng sang font thường là cột số lệch hàng và mã khó dò bằng mắt.
   ══════════════════════════════════════════════════════════════════════════ */
body.hrm-has-shell,
body.hrm-has-shell *:not(code):not(pre):not(kbd):not(samp):not([class*="mono"]):not([style*="mono"]) {
  font-family: var(--hrm-font) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. NỀN VÀ MÀU CHỮ
   ══════════════════════════════════════════════════════════════════════════ */
body.hrm-has-shell {
  background: var(--hrm-nen) !important;
  color: var(--hrm-chu);
}

/* ══════════════════════════════════════════════════════════════════════════
   3. LỀ NỘI DUNG — bằng app (24px), và trên điện thoại chừa chỗ cho thanh đỉnh
      (52px) lẫn thanh điều hướng dưới.
   ══════════════════════════════════════════════════════════════════════════ */
.hrm-shell-main {
  padding: 24px !important;
}

@media (max-width: 767px) {
  .hrm-shell-main {
    /* 68 = 52 (thanh đỉnh) + 16 (lề). 86 = chừa thanh dưới + lề. */
    padding: 68px 16px 86px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. THANH ĐIỀU HƯỚNG DƯỚI (điện thoại) — CHIA ĐỀU

   🔴 Các mục đã có `flex: 1 1 0%` nhưng THIẾU `min-width: 0`. Mặc định `min-width` của ô
   flex là `auto`, nghĩa là không co nhỏ hơn nội dung — nên nhãn dài tự đẩy ô rộng ra. Đo
   trên màn 375px: bề rộng 61 / 74 / 86 / 94 / 60px, khoảng cách giữa các tâm icon
   68 / 79 / 90 / 78px. Nhìn là thấy lệch, và icon không nằm trên lưới nào cả.

   Thêm `min-width: 0` + bỏ padding ngang là mỗi ô đúng 1/5 bề ngang ⇒ các tâm cách đều.

   🔴 Nhãn phải cắt bằng "…" chứ không được xuống dòng hay đẩy rộng: đó chính là thứ đã phá
   lưới ngay từ đầu.
   ══════════════════════════════════════════════════════════════════════════ */
nav[class*="bottom-0"] > div {
  display: flex;
  align-items: stretch;
}

nav[class*="bottom-0"] > div > a,
nav[class*="bottom-0"] > div > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  justify-content: center;
}

nav[class*="bottom-0"] > div > a > span,
nav[class*="bottom-0"] > div > button > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* Icon luôn ở giữa ô, không bị nhãn kéo lệch. */
nav[class*="bottom-0"] > div > a > svg,
nav[class*="bottom-0"] > div > button > svg {
  margin-left: auto;
  margin-right: auto;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. THIẾT KẾ CHUẨN — lấy trang Bảng chấm công làm mẫu

   🔴 Chỉ áp trong `body.hrm-has-shell`, tức 18 trang tĩnh. App React KHÔNG bị đụng tới: nó
   đang là cái chuẩn, sửa nó là tự phá mẫu của chính mình.

   🔴 Dựa vào ĐỘ ƯU TIÊN chứ không dựa vào thứ tự nạp. CSS riêng của từng trang nằm trong
   thẻ <style> của chính trang đó, nạp SAU bundle này — cùng độ ưu tiên thì nó thắng. Thêm
   `body.hrm-has-shell` phía trước nâng độ ưu tiên lên đủ để thắng mà vẫn không cần
   `!important` rải khắp nơi (rải `!important` là sau này không ai đè lại được nữa, kể cả khi
   có lý do chính đáng).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tiêu đề ─────────────────────────────────────────────────────────────── */
body.hrm-has-shell h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hrm-tieu-de);
  margin: 0 0 4px;
}

body.hrm-has-shell h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hrm-tieu-de);
}

body.hrm-has-shell h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--hrm-tieu-de);
}

/* Dòng mô tả dưới tiêu đề — trang mẫu dùng 12px xám. */
body.hrm-has-shell h1 + p,
body.hrm-has-shell h2 + p,
body.hrm-has-shell .sub {
  font-size: 12.5px;
  color: var(--hrm-chu-nhat);
  line-height: 1.5;
}

/* ── Thẻ ─────────────────────────────────────────────────────────────────────
   Chỉ đổi vỏ (nền, viền, bo góc, đổ bóng). KHÔNG đụng padding: mỗi trang tự đặt theo nội
   dung của nó, ép chung một con số là có trang bị chật, có trang thừa chỗ. */
body.hrm-has-shell .card,
body.hrm-has-shell .panel,
body.hrm-has-shell .box {
  background: #fff;
  border: 1px solid var(--hrm-vien);
  border-radius: var(--hrm-goc);
  box-shadow: var(--hrm-bong);
}

/* ── Bảng ───────────────────────────────────────────────────────────────── */
body.hrm-has-shell table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  width: 100%;
}

body.hrm-has-shell thead th {
  background: var(--hrm-nen-bang-dau);
  color: var(--hrm-chu-vua);
  font-weight: 700;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hrm-vien-dam);
  white-space: nowrap;
}

body.hrm-has-shell tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--hrm-vien-nhat);
  color: #101828;
}

body.hrm-has-shell tbody tr:last-child td {
  border-bottom: none;
}

body.hrm-has-shell tbody tr:hover td {
  background: var(--hrm-nen-ro);
}

/* ── Nút ─────────────────────────────────────────────────────────────────────
   🔴 Chia hai mức, cố ý.

   Mọi nút chỉ nhận chữ + bo góc. Chỉ nút KHÔNG có class mới nhận trọn bộ màu nền/viền —
   nút có class là nút trang đó đã tự tạo kiểu riêng (nút chính màu vàng, nút nguy hiểm màu
   đỏ), đè màu lên chúng là xoá sạch phân cấp hành động: người dùng không còn biết nút nào là
   nút chính. */
body.hrm-has-shell button,
body.hrm-has-shell .btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--hrm-goc-nho);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

body.hrm-has-shell button:not([class]) {
  padding: 7px 12px;
  border: 1px solid var(--hrm-vien);
  background: #fff;
  color: #475467;
}

body.hrm-has-shell button:not([class]):hover {
  background: #eef1f6;
  color: var(--hrm-tieu-de);
  border-color: var(--hrm-vien-dam);
}

/* ── Ô nhập ──────────────────────────────────────────────────────────────── */
body.hrm-has-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.hrm-has-shell select,
body.hrm-has-shell textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--hrm-goc-nho);
  border: 1px solid var(--hrm-vien-dam);
  background: #fff;
  color: #101828;
}

body.hrm-has-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
body.hrm-has-shell select:focus,
body.hrm-has-shell textarea:focus {
  outline: none;
  border-color: var(--hrm-vang);
  /* Vòng sáng thay cho outline mặc định — vẫn thấy rõ đang ở ô nào khi đi bằng phím Tab. */
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.25);
}

/* ── Nhãn trạng thái ─────────────────────────────────────────────────────────
   Chỉ chuẩn hoá hình dáng, GIỮ NGUYÊN màu của từng trang: màu ở đây đang mang nghĩa
   (đỏ = thiếu, xanh = đủ), đổi màu là đổi luôn thông tin. */
body.hrm-has-shell .badge,
body.hrm-has-shell .chip,
body.hrm-has-shell .tag {
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-block;
  line-height: 1.6;
}

/* ── Thanh cuộn mảnh, giống trang mẫu ────────────────────────────────────── */
body.hrm-has-shell ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.hrm-has-shell ::-webkit-scrollbar-thumb {
  background: #d7dde7;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

body.hrm-has-shell ::-webkit-scrollbar-thumb:hover {
  background: #c2cad8;
  background-clip: content-box;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. BẢNG TRÀN NGANG THÌ CUỘN ĐƯỢC

   🔴 Đo trên hr-users-list.html ở bề ngang 699px: bảng rộng 766px, khung bọc 512px, mà
   `overflow-x` của khung là `visible` ⇒ các cột bên phải bị cắt và không có cách nào kéo
   tới. Không phải lỗi mới (bỏ `nowrap` vẫn tràn: 737px), nhưng đây đúng là thứ trang Bảng
   chấm công đã xử lý bằng `.hrm-grid-scroll` còn 18 trang tĩnh thì chưa.

   Lớp này do `hr-app-shell.js` gắn vào, chỉ cho bảng nào THẬT SỰ tràn — gắn cho mọi bảng là
   những bảng đang vừa khít cũng mọc thanh cuộn thừa.
   ══════════════════════════════════════════════════════════════════════════ */
body.hrm-has-shell .hrm-bang-cuon {
  overflow-x: auto;
  max-width: 100%;
  /* Cuộn mượt trên điện thoại và không nuốt cử chỉ cuộn dọc của trang. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

body.hrm-has-shell .hrm-bang-cuon::-webkit-scrollbar {
  height: 8px;
}


/* ══════════════════════════════════════════════════════════════════════════
   7. BẢNG MÀU CHUNG — định nghĩa lại biến của từng trang

   🔴 Đây là cách ít rủi ro nhất để đổi màu 18 trang: cả 18 trang đều đọc màu qua
   `var(--…)` và định nghĩa biến ở `:root`. `body.hrm-has-shell` là con cháu của `:root`
   nên định nghĩa lại cùng tên ở đây là thắng, và MỌI nơi dùng biến đó đổi theo — không
   phải đi đè từng luật, không cần biết trang nào vẽ cái gì.

   Giá trị bên phải lấy từ trang Bảng chấm công. Bên trái là giá trị cũ, ghi lại để sau này
   còn đối chiếu được.
   ══════════════════════════════════════════════════════════════════════════ */
body.hrm-has-shell {
  --navy-900: #0b1b34;   /* cũ #10141f — gần đen, trang mẫu dùng xanh navy */
  --navy-800: #15294a;   /* cũ #1b2336 */
  --ink-900: #101828;    /* cũ #111827 */
  --ink-700: #344054;    /* cũ #374151 */
  --ink-500: #5a6473;    /* cũ #6b7789 — đậm thêm cho đủ tương phản, xem mục 12 */
  --ink-300: #d0d5dd;    /* cũ #cfd8e3 */
  --ink-200: #e9edf3;    /* cũ #e6ebf2 */
  --ink-50: #fbfcfd;     /* cũ #f8fafc — nền chìm nhẹ, trang mẫu dùng cho thanh công cụ */

  /* 🔴 GIỮ NGUYÊN cả hai bậc vàng đậm — đã thử đổi và đo ra là SAI.

     `--brand-500` là màu CHỮ và icon: đổi sang vàng nhạt là chữ vàng trên nền trắng.

     `--brand-400` là đầu SÁNG của gradient nút chính (`linear-gradient(135deg,
     var(--brand-400), var(--brand-500))`) và nút đó có CHỮ TRẮNG. Đổi nó sang #f2c94c của
     trang mẫu làm nền sáng lên, tức là chữ trắng càng khó đọc — đo được tương phản tụt từ
     ~2.0 xuống ~1.6. Trang mẫu dùng #f2c94c cho GẠCH CHÂN và VÒNG SÁNG, chỗ không có chữ
     nào nằm trên, nên bê nguyên sang làm nền nút là hiểu sai công dụng của nó.

     (Tương phản ~2.0 của nút chính là vấn đề CÓ SẴN, không phải do bản này — xem ghi chú
     cuối nhật ký deploy.) */
  --brand-500: #c29429;
  --brand-400: #d3ad42;
  --brand-100: #fbf7ea;  /* cũ #f6edcc / #fbf3de (hai trang khai hai giá trị khác nhau) */

  --soft-shadow: 0 24px 48px -24px rgba(16, 20, 31, 0.16),
                 0 2px 8px -2px rgba(16, 20, 31, 0.06);
  --soft-shadow-sm: 0 2px 8px -2px rgba(16, 20, 31, 0.08);

  /* Biến riêng của 2 trang máy vân tay — gom về cùng một bảng màu. */
  --the: #ffffff;
  --vien: #e9edf3;
  --nen: #f1f5f9;
  --navy: #0b1b34;
  --chu: #101828;
  --nhat: #667085;

  /* Màu mang NGHĨA: giữ đúng ý nghĩa, chỉ thống nhất sắc độ giữa các trang. */
  --do: #b42318;
  --do-nhat: #fef3f2;
  --cam: #b54708;
  --cam-nhat: #fffaeb;
  --xanh: #067647;
  --xanh-nhat: #ecfdf3;
  --red-600: #b42318;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. MỘT BỀ RỘNG DUY NHẤT

   🔴 Đo được 10 bề rộng khác nhau trên 18 trang (620 → 1280 → không giới hạn). Chuyển
   trang là nội dung nhảy qua nhảy lại — thứ làm người dùng thấy "mỗi trang một kiểu" rõ
   nhất, hơn cả màu sắc.

   1280px là bề rộng rộng nhất đang dùng, và xấp xỉ bề ngang vùng nội dung của app trên
   màn 1440 — nên lấy làm chuẩn thì không trang nào bị bóp lại.
   ══════════════════════════════════════════════════════════════════════════ */
body.hrm-has-shell .wrap,
body.hrm-has-shell .bao,
body.hrm-has-shell .shell {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. THẺ — thêm các tên lớp mà từng trang tự đặt

   Phần 5 mới bắt `.card/.panel/.box`, nhưng đo ra còn `.so` (thẻ số liệu),
   `.dep-stat-card`, `.pos-list` cũng đang đóng vai trò thẻ với bo góc 12px.
   ══════════════════════════════════════════════════════════════════════════ */
body.hrm-has-shell .so,
body.hrm-has-shell .dep-stat-card,
body.hrm-has-shell .pos-list {
  background: #fff;
  border: 1px solid var(--hrm-vien);
  border-radius: var(--hrm-goc);
  box-shadow: var(--hrm-bong);
}

/* ══════════════════════════════════════════════════════════════════════════
   10. KHỐI THÔNG BÁO — cùng hình dáng, GIỮ NGUYÊN màu

   Màu ở đây đang mang nghĩa (đỏ = lỗi, cam = cảnh báo, xanh = ổn). Chỉ thống nhất bo góc
   và lề để chúng trông cùng một hệ, không đụng màu.
   ══════════════════════════════════════════════════════════════════════════ */
body.hrm-has-shell .msg,
body.hrm-has-shell .err,
body.hrm-has-shell .hs-note,
body.hrm-has-shell .c-do,
body.hrm-has-shell .c-cam,
body.hrm-has-shell .c-xanh {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   11. ĐẦU TRANG — cùng một nhịp

   Trang mẫu: tiêu đề cách mép trên 14px, dòng mô tả cách tiêu đề 3px, rồi mới tới nội
   dung. Áp cùng nhịp đó cho khối tiêu đề của trang tĩnh.
   ══════════════════════════════════════════════════════════════════════════ */
body.hrm-has-shell .hrm-shell-main > .wrap > h1:first-child,
body.hrm-has-shell .hrm-shell-main > .bao > h1:first-child,
body.hrm-has-shell .hrm-shell-main > .shell > h1:first-child {
  margin-top: 0;
}

body.hrm-has-shell h1 + p {
  margin: 3px 0 18px;
}


/* ══════════════════════════════════════════════════════════════════════════
   12. TƯƠNG PHẢN CHỮ PHỤ — áp cho CẢ app React lẫn trang tĩnh

   🔴 Đo trên 17 màn hình: 214 chỗ chữ dưới ngưỡng dễ đọc (WCAG AA cần 4.5:1 cho chữ
   thường), và tất cả gom vào ĐÚNG HAI token:

     .text-ink-400  #97a3b6  →  2.55:1   (112 chỗ)  — tệ nhất
     .text-ink-500  #6b7789  →  4.14:1   ( 53 chỗ)  — sát ngưỡng

   Chúng là chữ phụ cỡ 10,5–14px: mã nhân viên dưới tên, ghi chú, nhãn cột phụ. Trên màn
   sáng hoặc ngoài trời gần như không đọc được.

   🔴 KHÔNG dùng `!important`. `overrides-bundle.css` nạp SAU bundle của app nên luật cùng
   độ ưu tiên đã thắng rồi; thêm `!important` sẽ đè luôn cả biến thể `hover:` (độ ưu tiên
   0,2,0) làm chữ không đổi màu khi rê chuột — hỏng một thứ đang đúng để sửa một thứ khác.

   🔴 Giữ nguyên THỨ BẬC: ink-400 vẫn nhạt hơn ink-500. Gán cùng một màu cho cả hai là xoá
   mất phân cấp thông tin mà bảng màu đang diễn đạt.
   ══════════════════════════════════════════════════════════════════════════ */
.text-ink-400 {
  color: #667085; /* 4.86:1 trên nền trắng */
}

.text-ink-500 {
  color: #5a6473; /* 5.99:1 */
}

/* Link vàng `text-brand-600` (#a67a20) ở 12–14px chỉ đạt 3.87:1. Đậm thêm một bậc rất nhỏ
   để qua 4.5 mà sắc vàng gần như không đổi — đây là màu thương hiệu, không nên kéo tối. */
.text-brand-600 {
  color: #96701c; /* 4.53:1 */
}

/* ══════════════════════════════════════════════════════════════════════════
   13. VÙNG BẤM TRÊN ĐIỆN THOẠI

   🔴 Nút ▾ thu gọn nhóm menu đo được `21 × 19px` — nhỏ hơn mọi ngưỡng (khuyến nghị
   44×44, tối thiểu 32). Đây đúng là nút mà tính năng thu gọn nhóm bắt người dùng bấm,
   nên nhỏ như vậy là tự làm khó chính thứ mình vừa thêm.

   🔴 Mục menu trong ngăn kéo cao `31px` ở màn 375px — hai mục liền nhau dễ bấm nhầm.

   Chỉ nới VÙNG BẤM, không phóng to chữ hay icon: giao diện nhìn y như cũ.
   ══════════════════════════════════════════════════════════════════════════ */
aside nav a > button {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  aside nav a {
    min-height: 44px;
  }

  aside nav a > button {
    min-width: 44px;
    min-height: 44px;
  }
}