:root {
  --brand: #465fff;
  --brand-dark: #3641f5;
  --brand-light: #ecf3ff;
  --bg: #f8f9fb;
  --border: #e5e7eb;
  --text: #111827;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --danger: #dc2626;
  --success: #16a34a;
  --white: #ffffff;
  /* 180px = đúng độ rộng thật của MISA (.big-sidebar{width:180px!important}
     trong CSS đã trích) — trước đó là 272px (tự chọn, chưa khớp bản gốc). */
  --sidebar-width: 180px;
  --sidebar-collapsed-width: 65px;

  /* Sidebar "Modern Pro" — giá trị THẬT lấy trực tiếp từ CSS đã build của
     MISA AMIS Thông tin nhân sự (trích từ file trang đã lưu "Webpage,
     Complete", xem .sidebar-item/.icon-text/.item-icon trong đó), không
     phải suy đoán — 2026-09-07. Icon và chữ dùng 2 màu KHÁC NHAU lúc chưa
     chọn (icon #717680 xám, chữ #101828 gần đen) — currentColor không đủ vì
     dùng chung 1 màu, nên .icon phải set color riêng, xem .nav-list a .icon
     bên dưới. */
  --sidebar-font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sidebar-section-title: #94a3b8;
  --sidebar-text: #101828;
  --sidebar-icon: #717680;
  --sidebar-active-bg: #f0f6fe;
  --sidebar-active-text: #245fdf;
  --sidebar-hover-bg: #e9eaeb;
}

* {
  box-sizing: border-box;
}

/* Khoá đúng chiều cao màn hình cho html/body — trước đây .app-shell chỉ có
   min-height:100vh (sàn, không phải trần) nên khi 1 khối con giãn ra
   (VD .hr-table-panel flex:1) cả TRANG bị kéo dài quá 1 màn hình thay vì
   dừng lại ở mép dưới màn hình. .content bên dưới tự cuộn riêng khi nội
   dung dài hơn 1 màn (xem overflow-y:auto ở đó) — sidebar/topbar đứng yên. */
html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  /* MISA dùng "Inter", sans-serif cho toàn app (xác nhận từ CSS thật) —
     trước đây thiếu Inter ở đây nên phần nội dung (ngoài sidebar) có thể
     rơi về font hệ thống dù đã nạp Inter qua Google Fonts. */
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* ---------- App shell ---------- */
/* (Trang đăng nhập/đăng ký giờ dùng css/auth.css riêng — xem file đó) */

.app-shell {
  display: flex;
  height: 100vh;
}

.sidebar {
  position: relative; /* neo cho .sidebar-toggle-btn định vị tuyệt đối */
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  font-family: var(--sidebar-font);
  transition: width 0.2s ease;
}

/* ----- Thu gọn sidebar (chỉ còn icon) -----
   Ẩn mọi phần chữ/nhãn/chevron/badge/thẻ AI — giữ lại icon căn giữa. Trạng
   thái được lưu ở localStorage (xem shell.js) nên không bị "nháy" giao diện
   giữa các lần chuyển trang (site tĩnh, mỗi trang là 1 lần tải mới). */
.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 0;
}

.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-list a .chevron {
  display: none;
}

.sidebar.collapsed .nav-list a,
.sidebar.collapsed .nav-list span.is-disabled {
  justify-content: center;
  padding: 10px;
}

.sidebar.collapsed .hr-nav-back {
  justify-content: center;
  padding: 8px 0;
}

.sidebar.collapsed .sidebar-toggle-btn .icon {
  transform: rotate(180deg);
}

/* Tooltip khi hover 1 mục lúc sidebar đang thu gọn — thuần CSS qua
   data-tooltip (gán trong shell.js), không cần thư viện. */
.sidebar.collapsed .nav-list a {
  position: relative;
}

.sidebar.collapsed .nav-list a:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  z-index: 50;
  pointer-events: none;
}

.sidebar-toggle-btn {
  position: absolute;
  top: 58px;
  right: -13px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  z-index: 5;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background: var(--sidebar-hover-bg);
  color: var(--text);
}

.sidebar-toggle-btn .icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 64px;
  /* 1rem (không phải 1.5rem cũ) — sidebar giờ chỉ 180px (khớp MISA thật),
     giữ padding cũ sẽ làm chữ "FOR FUTURE" chật/tràn dòng. */
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  transition: padding 0.2s ease;
}

/* Logo For Future thật (apps/web/public/images/brand/logo-icon.png) — thay
   cho ô vuông gradient chữ "N" placeholder trước đây. object-fit:contain vì
   ảnh gốc không phải hình vuông tuyệt đối. */
.sidebar-brand .logo-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
}

.sidebar-brand .logo-text {
  line-height: 1.15;
}

.sidebar-brand .logo-text strong {
  display: block;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.sidebar-brand .logo-text span {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.75rem 0;
}

/* Khoảng cách giữa 2 nhóm menu: 24px */
.nav-group + .nav-group {
  margin-top: 24px;
}

/* Section title: 11px, 600, uppercase, letter-spacing 0.05em, xám nhạt */
.nav-group-label {
  padding: 0 0.75rem;
  margin-bottom: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sidebar-section-title);
}

/* Khoảng cách giữa các item: 6px */
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Menu item — kích thước/khoảng cách khớp .sidebar-item thật của MISA
   (13px/500, padding 8px 12px, bo góc 8px, cao tối thiểu 36px). */
.nav-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-list a:hover {
  background: var(--sidebar-hover-bg);
}

/* Active state: nền xanh nhạt + chữ/icon xanh đậm + thanh chỉ báo trái */
.nav-list a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

.nav-list a.active::before {
  content: "";
  position: absolute;
  left: -0.75rem; /* chạm mép trái sidebar — bù lại padding 0.75rem của .sidebar-scroll */
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 4px 4px 0;
  background: var(--sidebar-active-text);
}

/* Icon: 20px, màu RIÊNG với chữ lúc chưa chọn (xem giải thích ở --sidebar-icon
   trong :root) — stroke-width 1.75 đã set sẵn trong SVG (xem shell.js). */
.nav-list a .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--sidebar-icon);
}

.nav-list a.active .icon {
  color: var(--sidebar-active-text);
}

.nav-list a .nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-list a .chevron,
.nav-list span.is-disabled .chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* Badge số đếm (vị trí tuyển mới, đơn chờ duyệt...) — dạng pill nhỏ gọn */
.nav-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-list a.active .nav-badge {
  background: var(--sidebar-active-text);
  color: var(--white);
}

/* "Tất cả ứng dụng" — link quay lại trang chủ launcher, chỉ có trong sidebar
   module (VD /nhan-su, xem buildHrNavHtml() trong shell.js). */
.hr-nav-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.hr-nav-back:hover {
  color: var(--text);
}

.hr-nav-back svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sidebar.collapsed .hr-nav-back span {
  display: none;
}

/* Mục menu module CHƯA có trang thật đứng sau — KHÔNG bấm được (không có
   href, cursor mặc định, tooltip "Sắp ra mắt" qua title="") nhưng cố tình
   hiện CÙNG MÀU/ĐỘ ĐẬM với mục thật (color: var(--sidebar-text), không phải
   var(--text-faint) mờ như .is-disabled ở mega-menu app.js/style.css) — bản
   gốc MISA hiển thị mọi mục sidebar cùng 1 tông màu đậm như nhau, chỉ mục
   đang chọn mới nổi bật, không có mục nào bị "xám mờ" cả. Giữ đúng thị giác
   đó dù chưa có trang thật đứng sau, khác với mega-menu (nơi user đã thấy và
   chấp nhận cách làm mờ trước đó).
*/
.nav-list span.is-disabled {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  cursor: default;
}

.nav-list span.is-disabled:hover {
  background: var(--sidebar-hover-bg);
}

.nav-list span.is-disabled .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--sidebar-icon);
}

.nav-list span.is-disabled .nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mục cha chưa có trang thật (VD "Đơn từ") nhưng đang có 1 mục CON thật sự
   được chọn (VD "Đơn xin nghỉ") — bôi đậm mục cha cùng kiểu active/before
   với .nav-list a.active để giữ dấu vết vị trí trong sidebar. */
.nav-list span.is-disabled.has-active-child {
  position: relative;
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

.nav-list span.is-disabled.has-active-child .icon {
  color: var(--sidebar-active-text);
}

.nav-list span.is-disabled.has-active-child::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 4px 4px 0;
  background: var(--sidebar-active-text);
}

.avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
}

.main-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0; /* cho .content bên trong co đúng thay vì bị đẩy tràn khỏi .app-shell đã khoá height:100vh */
}

/* ---------- Topbar ---------- */

/* Topbar "AMIS-style" — nền xanh đậm khớp module tham khảo (Thông tin nhân
   sự), thay cho nền trắng trước đây. Token riêng (không đụng --text/--bg
   dùng chung toàn site) vì chỉ topbar cần bộ màu tương phản trên nền xanh
   này — sidebar và nội dung trang vẫn nền trắng như cũ. */
.topbar {
  --topbar-bg: #245fdf;
  --topbar-text: #ffffff;
  --topbar-text-muted: rgba(255, 255, 255, 0.72);
  --topbar-surface: rgba(255, 255, 255, 0.14);
  --topbar-surface-hover: rgba(255, 255, 255, 0.22);
  --topbar-border: rgba(255, 255, 255, 0.24);

  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.5rem;
  background: var(--topbar-bg);
  border-bottom: none;
}

.app-switcher-btn {
  flex-shrink: 0;
}

.breadcrumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--topbar-text-muted);
  white-space: nowrap;
}

.breadcrumb .current {
  color: var(--topbar-text);
  font-weight: 600;
}

.topbar-search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--topbar-surface);
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.65);
}

.topbar-search .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.topbar-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 0.8125rem;
  color: var(--topbar-text);
}

.topbar-search input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.kbd-hint {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--topbar-border);
  background: transparent;
  border-radius: 5px;
  padding: 0.0625rem 0.375rem;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Ghi đè màu cho .icon-btn/.user-menu-trigger CHỈ khi nằm trong .topbar —
   2 class này còn dùng ở nhiều nơi khác trên nền trắng (vd nút lọc/tuỳ
   chỉnh cột ở trang Nhân sự), không đổi màu mặc định của chúng. */
.topbar .icon-btn {
  color: rgba(255, 255, 255, 0.85);
}

.topbar .icon-btn:hover {
  background: var(--topbar-surface-hover);
  color: var(--topbar-text);
}

.topbar .icon-btn .badge {
  border: 2px solid var(--topbar-bg);
}

.topbar .topbar-divider {
  background: var(--topbar-border);
}

.topbar .user-menu-trigger:hover {
  background: var(--topbar-surface-hover);
}

.topbar .user-menu-trigger .avatar-img {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.topbar .user-menu-trigger .name {
  color: var(--topbar-text);
}

.topbar .user-menu-trigger .role {
  color: var(--topbar-text-muted);
}

.topbar .user-menu-trigger .chevron {
  color: rgba(255, 255, 255, 0.75);
}

/* Ghost/minimalist icon button — không viền, không nền ở trạng thái nghỉ,
   chỉ hiện nền nhạt khi hover để vẫn có phản hồi thao tác. */
.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.icon-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.icon-btn .icon {
  width: 18px;
  height: 18px;
}

/* Đè lên đúng góc trên-phải của icon (không phải góc của toàn bộ nút) —
   icon 18px nằm giữa nút 38px nên căn theo mép icon, không phải mép nút. */
.icon-btn .badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.375rem;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.user-menu-trigger:hover {
  background: var(--bg);
}

/* Ảnh đại diện tròn — thay cho vòng tròn chữ cái trước đây. Chưa có tính
   năng tải ảnh hồ sơ thật nên dùng ảnh SVG placeholder trung tính (xem
   DEFAULT_AVATAR_SRC trong shell.js), object-fit:cover để sẵn sàng khi có
   ảnh thật với tỉ lệ khác. */
.user-menu-trigger .avatar-img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--brand-light);
}

/* Khối Tên/Vai trò: 2 dòng xếp dọc (flex column), không nối ngang */
.user-menu-trigger .info {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.3;
}

.user-menu-trigger .name {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.user-menu-trigger .role {
  font-size: 12px;
  color: #64748b;
}

.user-menu-trigger .chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  align-self: center; /* căn giữa dọc theo chiều cao khối info 2 dòng */
}

.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: 280px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
  padding: 0.375rem;
  display: none;
  z-index: 20;
}

.user-menu-dropdown.open {
  display: block;
}

.user-menu-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.user-menu-dropdown button:hover {
  background: var(--bg);
}

.user-menu-dropdown .icon {
  width: 16px;
  height: 16px;
}

/* ---------- Content shell ---------- */

.content {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Vùng cuộn THẬT của trang — sidebar/topbar đứng yên, chỉ nội dung này tự
     cuộn khi dài hơn 1 màn hình (tab Tổng quan nhiều panel chẳng hạn). */
  overflow-y: auto;
}

.content h1 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
}

.content .page-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 640px;
}

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1.5rem;
  margin-top: 1.5rem;
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: 16px;
}

.coming-soon .icon {
  width: 40px;
  height: 40px;
  color: var(--brand);
  opacity: 0.8;
}

.coming-soon h2 {
  margin: 1rem 0 0.25rem;
  font-size: 1.125rem;
}

.coming-soon p {
  margin: 0;
  max-width: 360px;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.badge-soon {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-dark);
  background: var(--brand-light);
  border-radius: 999px;
}

/* ---------- Dashboard: header row ---------- */

.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.dash-header h1 {
  margin: 0;
  font-size: 1.375rem;
}

.dash-header .page-desc {
  margin-top: 0.25rem;
}

.dash-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.btn-outline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}

.btn-outline:hover {
  background: var(--bg);
}

.btn-outline .icon {
  width: 15px;
  height: 15px;
}

.btn-solid {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--white);
  background: var(--brand);
  border: none;
  border-radius: 9px;
  cursor: pointer;
}

.btn-solid:hover {
  background: var(--brand-dark);
}

.btn-solid .icon {
  width: 15px;
  height: 15px;
}

/* ---------- Dashboard: KPI cards ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kpi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.125rem;
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.kpi-icon .icon {
  width: 19px;
  height: 19px;
}

.kpi-icon.tone-blue { background: #eaf0ff; color: var(--brand); }
.kpi-icon.tone-green { background: #e8f9ee; color: var(--success); }
.kpi-icon.tone-orange { background: #fff2e6; color: #ea8c1c; }
.kpi-icon.tone-purple { background: #f2ecff; color: #8151e8; }
.kpi-icon.tone-red { background: #fdeaea; color: var(--danger); }

.kpi-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.kpi-trend .icon {
  width: 13px;
  height: 13px;
}

.kpi-trend span.muted {
  font-weight: 400;
  color: var(--text-muted);
}

.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }

/* ---------- Generic panel ---------- */

.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.125rem;
  min-width: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.panel-header h3 {
  margin: 0;
  font-size: 0.9375rem;
}

.panel-select {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.25rem 0.5rem;
}

.panel-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand);
}

/* ---------- Charts row ---------- */

.charts-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.line-chart svg,
.bars-chart-svg svg {
  width: 100%;
  height: auto;
  display: block;
}

.axis-label {
  font-size: 9px;
  fill: #9ca3af;
}

.grid-line {
  stroke: #eef0f3;
  stroke-width: 1;
}

.donut-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.donut-row svg {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.donut-center-value {
  font-size: 15px;
  font-weight: 800;
  fill: var(--text);
}

.donut-center-label {
  font-size: 8.5px;
  fill: var(--text-muted);
}

.donut-legend {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.donut-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.legend-name {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend-pct {
  font-weight: 700;
  width: 40px;
  text-align: right;
}

.legend-count {
  width: 46px;
  text-align: right;
  color: var(--text-muted);
}

.bars-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  height: 180px;
  padding-top: 0.5rem;
}

.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0.5rem;
}

.bar-col .bar {
  width: 60%;
  max-width: 34px;
  border-radius: 6px 6px 0 0;
  background: var(--brand);
}

.bar-col .bar-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
}

/* ---------- Bottom row ---------- */

.bottom-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.leave-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.leave-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}

.leave-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.leave-info {
  flex: 1;
  min-width: 0;
}

.leave-info .name {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leave-info .role {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leave-date {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  margin-right: 0.5rem;
}

.status-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge.approved { background: #e8f9ee; color: var(--success); }
.status-badge.pending { background: #fff7e0; color: #b9860a; }
.status-badge.rejected { background: #fdeaea; color: var(--danger); }
.status-badge.active { background: #e8f9ee; color: var(--success); }

.funnel-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.funnel-visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.funnel-bar-wrap {
  display: flex;
  justify-content: center;
}

.funnel-bar {
  height: 30px;
  border-radius: 6px;
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.funnel-table {
  flex-shrink: 0;
  width: 140px;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.funnel-table th {
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  padding-bottom: 0.5rem;
  font-size: 0.6875rem;
}

.funnel-table th:first-child,
.funnel-table td:first-child {
  text-align: left;
}

.funnel-table td {
  padding: 0.3125rem 0;
  text-align: right;
}

.funnel-name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-muted);
}

.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gauge-svg-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
}

.gauge-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.gauge-value {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  text-align: center;
}

.gauge-value .pct {
  font-size: 1.375rem;
  font-weight: 800;
}

.gauge-value .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.gauge-trend {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.gauge-caption {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ---------- Employee table ---------- */

.table-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-faint);
  width: 220px;
}

.table-search .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.table-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 0.8125rem;
  color: var(--text);
}

/* overflow-x:auto để bảng cuộn ngang được, nhưng ẩn thanh cuộn NGANG mặc
   định của trình duyệt — đã có #hr-hscroll-bar tự code riêng (nút mũi tên +
   kéo thả) ngay bên dưới rồi, để cả 2 cùng hiện thành 2 thanh chồng nhau
   trông thừa/rối. Vẫn cuộn được bình thường bằng chuột/trackpad, chỉ ẩn
   thanh trượt hiển thị. */
.table-scroll {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge cũ */
}

.table-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Edge/Safari */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.data-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  padding: 0 0.625rem 0.625rem;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 0.625rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--border);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.employee-cell {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.employee-cell .name {
  font-weight: 600;
}

/* ---------- Nhân sự: bảng "Nhân viên mới gần đây" (tổng quan) — dùng
   chung .data-table, không có cột ghim ngang như bảng danh sách đầy đủ. ---------- */

.hr-recent-table-wrap {
  overflow-x: auto;
}

.hr-recent-table {
  white-space: nowrap;
}

.hr-recent-name-cell {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
}

.hr-recent-table-empty {
  text-align: center;
  padding: 2rem 0;
  color: var(--text-faint);
  white-space: normal;
}

.table-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.pagination-info {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.page-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.page-btn:hover {
  background: var(--bg);
}

.page-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.pagination-ellipsis {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--text-faint);
}

@media (max-width: 1180px) {
  .charts-grid,
  .bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .sidebar {
    display: none;
  }
  .topbar-search {
    display: none;
  }
}

/* ---------- Nhân sự: trang "Báo cáo" (tab Tổng quan) — clone theo layout
   thật của AMIS Thông tin nhân sự (khác cấu trúc "chào hỏi + donut giới
   tính + 4 mini-KPI" cũ trước đây, đã bỏ hẳn vì không khớp bản gốc). ---------- */

.hr-report-tabs {
  display: flex;
  gap: 1.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.hr-report-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 0.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: default;
}

.hr-report-tab .icon {
  width: 15px;
  height: 15px;
  color: var(--brand);
}

.hr-report-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.hr-report-tab.is-disabled {
  color: var(--text-faint);
}

.hr-report-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hr-report-title {
  margin: 0;
  font-size: 1.25rem;
}

.hr-report-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.hr-report-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hr-report-toolbar-right .hr-filter-select {
  min-width: 160px;
}

/* Ô "Tháng hiện tại" — chỉ hiển thị mốc thời gian THẬT (tự tính bằng
   JS), không phải bộ lọc chọn được nên không có style dạng nút bấm. */
.hr-month-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 38px;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.hr-month-badge .icon {
  width: 15px;
  height: 15px;
}

#hr-refresh-btn.is-spinning .icon {
  animation: hr-spin 0.7s linear infinite;
}

@keyframes hr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Nhân sự: thẻ "Trợ lý số AVA" — placeholder trực quan, CHƯA có
   AI thật đứng sau nên cố tình không bịa nội dung phân tích cụ thể. ---------- */

.hr-ai-card {
  position: relative;
  margin-bottom: 1.25rem;
  background: linear-gradient(90deg, #fdf2f8 0%, #fff7ed 100%);
  border: none;
}

.hr-ai-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.hr-ai-icon {
  display: flex;
  color: #db2777;
}

.hr-ai-icon .icon {
  width: 18px;
  height: 18px;
}

.hr-ai-header h3 {
  margin: 0;
  font-size: 0.9375rem;
}

.hr-ai-placeholder {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.hr-ai-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: flex;
  color: var(--text-muted);
  cursor: pointer;
}

.hr-ai-close .icon {
  width: 16px;
  height: 16px;
}

.hr-ai-close:hover {
  color: var(--text);
}

/* ---------- Nhân sự: hàng thẻ chỉ số — 4 thẻ ("Tổng nhân sự"/"Nhân
   viên mới tháng này"/"Thử việc thành công"/"Đã nghỉ việc") + 1 thẻ
   "Cơ cấu nhân sự hiện tại". ---------- */

.hr-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 320px;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hr-stat-card {
  display: flex;
  flex-direction: column;
}

.hr-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.hr-stat-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hr-stat-icon .icon {
  width: 16px;
  height: 16px;
}

.hr-stat-icon.tone-blue { background: #eaf0ff; color: var(--brand); }
.hr-stat-icon.tone-green { background: #e8f9ee; color: var(--success); }
.hr-stat-icon.tone-purple { background: #f2ecff; color: #8151e8; }
.hr-stat-icon.tone-red { background: #fdeaea; color: var(--danger); }
.hr-stat-icon.tone-orange { background: #fff2e6; color: #ea8c1c; }
.hr-stat-icon.tone-pink { background: #fdf2f8; color: #db2777; }

.hr-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.hr-stat-trend {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  min-height: 1em;
}

.hr-stat-trend-neutral {
  color: var(--text-faint);
  font-weight: 400;
}

.hr-metric-trend-up {
  color: var(--success);
}

.hr-metric-trend-down {
  color: var(--danger);
}

.hr-total-panel-v2 {
  display: flex;
  flex-direction: column;
}

.hr-total-panel-title {
  font-size: 0.9375rem;
  font-weight: 700;
}

.hr-total-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hr-total-breakdown li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.hr-total-breakdown-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hr-total-breakdown-icon.tone-green { background: var(--success); }
.hr-total-breakdown-icon.tone-blue { background: var(--brand); }
.hr-total-breakdown-icon.tone-pink { background: #db2777; }
.hr-total-breakdown-icon.tone-orange { background: #ea8c1c; }

.hr-total-breakdown-label {
  flex: 1;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-total-breakdown-count {
  font-weight: 700;
}

.hr-total-breakdown-pct {
  width: 34px;
  flex-shrink: 0;
  text-align: right;
  color: var(--text-faint);
  font-weight: 400;
}

/* ---------- Nhân sự: hàng biểu đồ (biến động 6 tháng / theo phòng ban /
   theo hợp đồng — 3 cột đúng bố cục ảnh mẫu), hàng "Nhắc việc"/"Sắp đến
   hạn" (2 cột) ---------- */

.hr-report-row-2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hr-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.hr-chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.hr-chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hr-chart-legend-dot.tone-blue { background: #245fdf; }
.hr-chart-legend-dot.tone-green { background: var(--success); }
.hr-chart-legend-dot.tone-red { background: var(--danger); }
.hr-chart-legend-dot.tone-orange { background: #ea8c1c; }

.hr-trend-point-label {
  font-size: 9px;
  font-weight: 700;
  fill: var(--text-muted);
  text-anchor: middle;
}

.hr-report-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hr-panel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.3125rem;
  margin-left: 0.375rem;
  border-radius: 999px;
  background: #fdeaea;
  color: var(--danger);
  font-size: 0.6875rem;
  font-weight: 700;
  vertical-align: middle;
}

.donut-legend-empty {
  list-style: none;
  font-size: 0.8125rem;
  color: var(--text-faint);
  padding: 1rem 0;
}

/* ---------- Nhân sự: "Nhắc việc hôm nay" (danh sách mẫu tĩnh) ---------- */

.hr-reminder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hr-reminder-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hr-reminder-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hr-reminder-icon .icon {
  width: 15px;
  height: 15px;
}

.hr-reminder-icon.tone-blue { background: #eaf0ff; color: var(--brand); }
.hr-reminder-icon.tone-green { background: #e8f9ee; color: var(--success); }
.hr-reminder-icon.tone-orange { background: #fff2e6; color: #ea8c1c; }
.hr-reminder-icon.tone-purple { background: #f2ecff; color: #8151e8; }
.hr-reminder-icon.tone-pink { background: #fdf2f8; color: #db2777; }

.hr-reminder-time {
  flex-shrink: 0;
  width: 40px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.hr-reminder-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hr-reminder-title {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-reminder-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ---------- Nhân sự: "Nhân sự sắp đến hạn" (danh sách mẫu tĩnh) ---------- */

.hr-upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hr-upcoming-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hr-upcoming-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hr-upcoming-name {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-upcoming-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.hr-upcoming-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  text-align: right;
}

.hr-upcoming-meta-title {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.hr-upcoming-meta-date {
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- Nhân sự: nhãn tròn "Hôm nay"/"Sắp đến hạn" ---------- */

.hr-tag {
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.hr-tag-today {
  background: var(--bg);
  color: var(--text-muted);
}

.hr-tag-warning {
  background: #fff2e6;
  color: #ea8c1c;
}

/* ---------- Nhân sự: nút "···" ở cột Thao tác của bảng "Nhân viên mới
   gần đây" — dẫn tới danh sách đầy đủ, cùng đích thật với "Xem tất cả". ---------- */

.hr-recent-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--text-muted);
}

.hr-recent-action-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.hr-recent-action-btn .icon {
  width: 15px;
  height: 15px;
}

.hr-recent-action-btn.is-disabled,
.hr-rem-more-btn.is-disabled {
  color: var(--text-faint);
  cursor: default;
}

.hr-recent-action-btn.is-disabled:hover {
  background: none;
  color: var(--text-faint);
}

/* ==================== Tab "Nhắc việc" ==================== */

/* ---------- Nhãn tròn dùng chung cho mức ưu tiên/trạng thái (tone-*) —
   cùng bảng màu với .hr-stat-icon/.hr-reminder-icon ở trên. ---------- */

.hr-tag.tone-red { background: #fdeaea; color: var(--danger); }
.hr-tag.tone-orange { background: #fff2e6; color: #ea8c1c; }
.hr-tag.tone-blue { background: #eaf0ff; color: var(--brand); }
.hr-tag.tone-green { background: #e8f9ee; color: var(--success); }
.hr-tag.tone-gray { background: var(--bg); color: var(--text-muted); }

/* ---------- Toolbar tiêu đề trang ---------- */

.hr-rem-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.hr-rem-title-block {
  min-width: 220px;
}

.hr-rem-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brand);
}

.hr-rem-title .icon {
  width: 24px;
  height: 24px;
}

.hr-rem-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.hr-rem-hero-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1.25rem;
}

.hr-rem-hero-bell {
  font-size: 2rem;
  line-height: 1;
}

.hr-rem-hero-quote {
  max-width: 180px;
  text-align: center;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--brand);
}

.hr-rem-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.hr-rem-actions .hr-filter-select {
  min-width: 130px;
}

/* ---------- 4 thẻ chỉ số ---------- */

.hr-rem-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.hr-rem-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.hr-rem-stat-body {
  flex: 1;
  min-width: 0;
}

.hr-rem-stat-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.hr-rem-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.375rem;
}

.hr-rem-stat-trend {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
}

.hr-rem-trend-orange {
  color: #ea8c1c;
}

.hr-rem-stat-arrow {
  display: flex;
  color: var(--text-faint);
  flex-shrink: 0;
}

.hr-rem-stat-arrow .icon {
  width: 16px;
  height: 16px;
}

/* ---------- Bố cục 3 cột ---------- */

.hr-rem-layout {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.hr-rem-col-left,
.hr-rem-col-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.hr-rem-col-mid {
  min-width: 0;
}

/* ---------- Lịch mini "tuần này" ---------- */

.hr-rem-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.hr-rem-calendar-head h3 {
  margin: 0;
  font-size: 0.875rem;
}

.hr-rem-calendar-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hr-rem-cal-today-btn {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.hr-rem-cal-today-btn:hover {
  background: var(--bg);
}

.hr-rem-cal-arrow {
  width: 26px;
  height: 26px;
}

.hr-rem-cal-arrow .icon {
  width: 14px;
  height: 14px;
}

.hr-rem-calendar-month {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
}

.hr-rem-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.875rem;
}

.hr-rem-cal-weekday {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--text-faint);
  padding-bottom: 0.25rem;
}

.hr-rem-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1875rem;
  padding: 0.375rem 0;
  border-radius: 9px;
}

.hr-rem-cal-day.is-today {
  background: var(--brand);
}

.hr-rem-cal-daynum {
  font-size: 0.8125rem;
  font-weight: 600;
}

.hr-rem-cal-day.is-today .hr-rem-cal-daynum {
  color: var(--white);
}

.hr-rem-cal-dots {
  display: flex;
  gap: 2px;
  min-height: 5px;
}

.hr-rem-cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.hr-rem-cal-dot.tone-red { background: var(--danger); }
.hr-rem-cal-dot.tone-orange { background: #ea8c1c; }
.hr-rem-cal-dot.tone-blue { background: var(--brand); }

.hr-rem-cal-day.is-today .hr-rem-cal-dot {
  background: var(--white);
}

.hr-rem-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.hr-rem-calendar-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.hr-rem-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hr-rem-legend-dot.tone-red { background: var(--danger); }
.hr-rem-legend-dot.tone-orange { background: #ea8c1c; }
.hr-rem-legend-dot.tone-blue { background: var(--brand); }
.hr-rem-legend-dot.tone-gray { background: #cbd2dc; }

/* ---------- "Tự động nhắc" (công tắc bật/tắt) ---------- */

.hr-rem-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}

.hr-rem-toggle-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hr-rem-toggle-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hr-rem-toggle-title {
  font-size: 0.8125rem;
  font-weight: 600;
}

.hr-rem-toggle-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.hr-toggle-switch {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 38px;
  height: 22px;
}

.hr-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.hr-toggle-slider {
  position: absolute;
  inset: 0;
  background: #d5dae3;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.hr-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--white);
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.hr-toggle-switch input:checked + .hr-toggle-slider {
  background: var(--success);
}

.hr-toggle-switch input:checked + .hr-toggle-slider::before {
  transform: translateX(16px);
}

/* ---------- "Công việc ưu tiên" (cột giữa) ---------- */

.hr-rem-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.hr-rem-pill {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.hr-rem-pill:hover {
  background: var(--bg);
}

.hr-rem-pill.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.hr-rem-task-group {
  margin-bottom: 0.75rem;
}

.hr-rem-task-group:last-child {
  margin-bottom: 0;
}

.hr-rem-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
}

.hr-rem-group-chevron {
  font-size: 0.625rem;
  color: var(--text-faint);
}

.hr-rem-group-label {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 700;
}

.hr-rem-group-count {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.hr-rem-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hr-rem-task-list.is-collapsed {
  display: none;
}

.hr-rem-task-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.hr-rem-task-list li.hr-rem-task-row:last-child {
  border-bottom: none;
}

.hr-rem-task-row.is-done .hr-rem-task-title {
  color: var(--text-faint);
  text-decoration: line-through;
}

.hr-rem-task-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}

.hr-rem-task-body {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hr-rem-task-title {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-rem-task-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-rem-task-assignee {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
}

.hr-rem-task-assignee .avatar-circle {
  width: 24px;
  height: 24px;
  font-size: 0.625rem;
  flex-shrink: 0;
}

.hr-rem-task-time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-faint);
  width: 40px;
}

.hr-rem-more-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

/* ---------- "Hiệu suất xử lý" (cột phải) ---------- */

.hr-rem-perf-footer {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ---------- "Ghi chú nhanh" (cột phải) ---------- */

.hr-rem-add-note-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.hr-rem-notes-grid {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.hr-rem-note {
  position: relative;
  padding: 0.75rem 1.5rem 0.75rem 0.75rem;
  border-radius: 10px;
}

.hr-rem-note.tone-yellow { background: #fef9e7; }
.hr-rem-note.tone-blue { background: #eaf0ff; }
.hr-rem-note.tone-pink { background: #fdf2f8; }

.hr-rem-note-text {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text);
}

.hr-rem-note-date {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.hr-rem-note-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 16px;
  height: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 0.875rem;
}

.hr-rem-note-close:hover {
  color: var(--text);
}

/* ---------- Ghi chú trống dùng chung (danh sách việc/ghi chú/sắp đến hạn) ---------- */

.hr-rem-empty-note {
  margin: 0;
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-faint);
}

/* ---------- "Danh sách nhắc việc" (bảng cuối trang) ---------- */

.hr-rem-table-title {
  margin: 0;
  font-size: 0.9375rem;
}

.hr-rem-table {
  white-space: nowrap;
}

.hr-rem-table th:first-child,
.hr-rem-table td:first-child {
  width: 32px;
}

.hr-rem-status-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.hr-rem-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hr-rem-status-dot.tone-gray { background: #9ca3af; }
.hr-rem-status-dot.tone-blue { background: var(--brand); }
.hr-rem-status-dot.tone-green { background: var(--success); }

@media (max-width: 1100px) {
  .hr-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hr-rem-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hr-rem-layout {
    grid-template-columns: 1fr 1fr;
  }
  .hr-rem-col-right {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hr-rem-col-right > .panel {
    flex: 1;
    min-width: 260px;
  }
}

@media (max-width: 900px) {
  .hr-report-row-2 {
    grid-template-columns: 1fr 1fr;
  }
  .hr-rem-layout {
    grid-template-columns: 1fr;
  }
  .hr-rem-hero-art {
    display: none;
  }
}

@media (max-width: 640px) {
  .hr-stat-grid,
  .hr-rem-stat-grid,
  .hr-report-row-2,
  .hr-report-row-3 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Nhân sự: search/filter row ---------- */

.hr-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.hr-filter-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.hr-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  width: 260px;
}

.hr-search .icon {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.hr-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 0.8125rem;
  color: var(--text);
}

.hr-filter-select {
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.5rem 0.75rem;
  min-width: 180px;
}

.hr-filter-right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* ---------- "Hồ sơ nhân sự" (#tab-list): 4 thẻ chỉ số đầu trang — tái
   dùng .hr-stat-card/.hr-stat-icon/.hr-stat-value/.hr-stat-trend đã có ở
   trang Tổng quan, chỉ thêm 1 lưới 4 cột riêng. ---------- */

.hr-list-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ---------- "Hồ sơ nhân sự": tab con "Danh sách/Thẻ/Sơ đồ tổ chức" —
   app-api chỉ có 1 kiểu xem (bảng danh sách) nên 2 mục sau luôn
   is-disabled, không bịa chế độ xem giả. ---------- */

.hr-view-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 1rem;
}

.hr-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: default;
}

.hr-view-tab .icon {
  width: 15px;
  height: 15px;
}

.hr-view-tab.active {
  background: var(--white);
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.hr-view-tab.is-disabled {
  color: var(--text-faint);
}

/* ---------- "Hồ sơ nhân sự": lưới bộ lọc có nhãn (Phòng ban/Vị trí/Trạng
   thái/Loại hợp đồng/Khoảng thời gian vào làm) ---------- */

.hr-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.4fr;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.hr-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  min-width: 0;
}

.hr-filter-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.hr-filter-field .hr-filter-select {
  width: 100%;
  min-width: 0;
}

.hr-filter-daterange {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-faint);
}

.hr-filter-daterange .hr-filter-select {
  min-width: 0;
  flex: 1;
  padding: 0.5rem 0.5rem;
}

/* ---------- "Hồ sơ nhân sự": thanh "Đã chọn N nhân viên" + thao tác hàng
   loạt (is-disabled — app-api chưa có API gán phòng ban/đổi trạng thái/gửi
   email hàng loạt) ---------- */

.hr-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.875rem;
  background: var(--bg);
  border-radius: 10px;
}

.hr-bulk-select-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
}

.hr-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hr-bulk-actions .btn-outline {
  padding: 0.4375rem 0.75rem;
  font-size: 0.75rem;
}

/* ---------- "Hồ sơ nhân sự": cột "Hồ sơ" (% hoàn thiện, THẬT — xem
   computeProfileCompleteness() trong nhan-su.js) ---------- */

.hr-profile-bar-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 90px;
}

.hr-profile-bar-pct {
  font-size: 0.75rem;
  font-weight: 700;
  width: 32px;
  flex-shrink: 0;
}

.hr-profile-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}

.hr-profile-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.hr-profile-bar-fill.tone-green { background: var(--success); }
.hr-profile-bar-fill.tone-orange { background: #ea8c1c; }
.hr-profile-bar-fill.tone-red { background: var(--danger); }
.hr-profile-bar-fill.tone-blue { background: var(--brand); }
.hr-profile-bar-fill.tone-purple { background: #8151e8; }

/* ---------- "Hồ sơ nhân sự": cột "Thao tác" (xem/sửa/···) — is-disabled vì
   chưa có trang xem/sửa chi tiết 1 hồ sơ nhân viên nào từ phía quản trị. ---------- */

.hr-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.hr-row-actions .icon-btn {
  width: 30px;
  height: 30px;
}

.hr-row-actions .icon-btn .icon {
  width: 15px;
  height: 15px;
}

.hr-row-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
  cursor: pointer;
}

@media (max-width: 1100px) {
  .hr-list-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hr-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hr-list-stat-grid,
  .hr-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Nhân sự: trang "Thêm hồ sơ" (them-ho-so.html) — trang riêng
   thật, KHÔNG phải popup, khớp bố cục 2 cột thật của MISA (sidebar mục con
   240px + khung form bên phải), số đo lấy từ CSS thật đã trích 2026-09-07
   (.box-sidebar width:240px, .item-wrapper padding:7px 16px, màu chọn
   #2566e9...). */

.hr-page-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.hr-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.hr-back-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.hr-back-btn .icon {
  width: 18px;
  height: 18px;
}

.hr-page-title {
  margin: 0;
  font-size: 1.25rem;
}

.hr-profile-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
  min-height: 0;
}

.hr-profile-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 12px;
}

.hr-profile-nav {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

.hr-profile-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 16px;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.hr-profile-nav-item:hover {
  background: #eff1f6;
}

.hr-profile-nav-item.active {
  color: #2566e9;
  border-left-color: #2566e9;
  font-weight: 600;
}

.hr-profile-nav-add {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 10px 16px;
  margin-top: 0.5rem;
  border: none;
  border-top: 1px solid #e0e1e4;
  background: none;
  color: #2566e9;
  font-size: 13px;
  font-family: inherit;
  cursor: default;
  opacity: 0.56;
}

.hr-profile-main {
  flex: 1;
  min-width: 0;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
}

.hr-profile-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.hr-profile-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.hr-profile-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

.hr-profile-avatar-placeholder .icon {
  width: 30px;
  height: 30px;
}

.hr-profile-avatar-camera {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text-muted);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
}

.hr-profile-avatar-camera .icon {
  width: 12px;
  height: 12px;
}

.hr-profile-section-title {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.hr-profile-section + .hr-profile-section {
  margin-top: 1.5rem;
}

.hr-profile-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  background: var(--white);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.form-section-title {
  margin: 1.25rem 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

.form-section-title:first-child {
  margin-top: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Cùng lý do với .modal-overlay[hidden] ở trên — display:flex trên chính
   .form-field đè mất [hidden] mặc định, khiến field Cá nhân/Doanh nghiệp ẩn
   theo type không thật sự ẩn (hiện cả 2 bộ field cùng lúc). */
.form-field[hidden] {
  display: none;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
}

.form-field textarea {
  resize: vertical;
  min-height: 72px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brand);
}

/* Popup "Xem hồ sơ" (nhan-su.html) — hiển thị field CHỈ ĐỌC, dùng chung
   lưới .form-grid với trang "Thêm hồ sơ" nhưng không có khung input. */
.view-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.view-field.full {
  grid-column: 1 / -1;
}

.view-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-faint);
}

.view-field-value {
  font-size: 0.8125rem;
  color: var(--text);
  word-break: break-word;
}

.form-field input:disabled {
  color: var(--text-faint);
  background: var(--bg);
  cursor: default;
}

.modal-alert {
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

.modal-alert.error {
  background: #fdeaea;
  color: var(--danger);
}

.modal-alert.success {
  background: #e8f9ee;
  color: var(--success);
}

.credential-box {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

.credential-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3125rem 0;
}

.credential-box .row span:first-child {
  color: var(--text-muted);
}

.credential-box .row strong {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.875rem;
}

/* ---------- Nhân sự: panel bảng chiếm hết chiều cao còn lại, footer
   (thanh trượt ngang + phân trang) luôn nằm ở đáy panel dù có ít dòng ----------
   .hr-table-panel tự nó có flex:1 nhưng CHỈ có tác dụng nếu cha trực tiếp
   (#tab-list) cũng là flex container — trước đây #tab-list là div thường
   (không flex) nên flex:1 của panel vô tác dụng, panel chỉ cao vừa đủ nội
   dung, để hở 1 mảng nền xám (--bg của main.content) phía dưới tới hết màn
   hình. Thêm rule dưới đây để bắc cầu flex từ main.content xuống panel. */

#tab-list:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.hr-table-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hr-table-panel .table-scroll {
  flex: 1;
  min-height: 160px;
}

/* ---------- Nhân sự: ghim cột (checkbox / Mã nhân viên / Họ và tên) ----------
   left của col-pin-2/3 KHÔNG hardcode bằng CSS — bảng dùng auto layout nên độ
   rộng cột thật phụ thuộc nội dung (vd "Mã nhân viên" dài hơn giá trị NV000001
   ở 1 số cỡ chữ), lệch với số cứng sẽ làm cột ghim đè lên cột "Giới tính" ngay
   sau nó. JS (updatePinnedColumnOffsets trong nhan-su.js) đo width thật của
   col-pin-1/2 rồi set style.left qua JS mỗi lần render — giá trị dưới đây chỉ
   là fallback trước khi JS chạy lần đầu. */

.col-pin {
  position: sticky;
  z-index: 2;
  background: var(--white);
}

.data-table thead .col-pin {
  z-index: 3;
}

/* Màu/font thanh header lấy đúng từ reference (div.dx-datagrid-headers nền
   #ECEDEF, div.custom-title chữ #10141B 13px Inter) — chỉ áp cho bảng
   "Nhân sự" (.hr-employee-table), không đổi .data-table dùng chung ở
   dashboard.html. */
.hr-employee-table th {
  background: #ecedef;
  color: #10141b;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  padding: 0.625rem 1rem;
  border-bottom: none;
}

.hr-employee-table thead .col-pin {
  background: #ecedef;
}

/* Dòng dữ liệu — lấy đúng số đo thật từ CSS DevExtreme grid của MISA
   (.dx-row.dx-data-row: height 36px, border #ced1d6, hover nền #f0f6fe —
   trùng đúng màu active của sidebar, cùng 1 hệ màu). */
.hr-employee-table td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ced1d6;
}

.hr-employee-table tbody tr:hover td {
  background: #f0f6fe;
}

.col-pin-1 { left: 0; }
.col-pin-2 { left: 40px; }
.col-pin-3 {
  left: 170px;
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 6px -4px rgba(15, 23, 42, 0.12);
}

.data-table tbody tr:hover .col-pin {
  background: var(--bg);
}

.hr-employee-table tbody tr:hover .col-pin {
  background: #f0f6fe;
}

/* ---------- Nhân sự: thanh trượt ngang tuỳ chỉnh cho bảng ---------- */

.hr-hscroll-bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.75rem;
}

.hr-hscroll-btn {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
}

.hr-hscroll-btn .icon {
  width: 14px;
  height: 14px;
}

.hr-hscroll-btn:hover:not(:disabled) {
  color: var(--text);
}

.hr-hscroll-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.hr-hscroll-track {
  position: relative;
  flex: 1;
  height: 8px;
  background: var(--bg);
  border-radius: 999px;
  cursor: pointer;
}

.hr-hscroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 8px;
  min-width: 24px;
  background: #c7cbd1;
  border-radius: 999px;
  cursor: grab;
}

.hr-hscroll-thumb:hover,
.hr-hscroll-thumb.dragging {
  background: #9aa0a8;
}

/* ---------- Nhân sự: badge trạng thái lao động (chấm màu + nhãn) ---------- */

.status-badge.with-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.status-badge.inactive {
  background: #f1f5f9;
  color: var(--text-muted);
}

/* ---------- Nhân sự: checkbox trong form ---------- */

.form-field-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}

.form-field-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .col-pin {
    position: static;
    width: auto;
    box-shadow: none;
    border-right: none;
  }
}

/* ================================================================
   Module "Nhân viên" (/nhan-vien) — clone app tự phục vụ nhân viên
   thật của MISA AMIS (khác app "Thông tin nhân sự" dành cho HR/admin
   ở trên). Nguồn: bản DOM + CSS đã build thật, lưu qua "Save As →
   Webpage, Complete" (2026-09-07) — mọi giá trị số/màu dưới đây lấy
   trực tiếp từ file đó (data-color-preset="purple" của tenant thật),
   không suy đoán. Tông tím #744EC7 khác hẳn xanh #245fdf của module
   "Thông tin nhân sự" vì đây là 2 app riêng biệt trong MISA thật.
   ================================================================ */

/* Sidebar: đè token màu/kích thước riêng cho module này — --sidebar-width
   thật là 200px (không phải 180px của module Thông tin nhân sự),
   --sidebar-collapsed-width thật 64px. Chỉ 3 token active/hover đổi màu,
   --sidebar-text/--sidebar-icon giữ nguyên (MISA dùng cùng 1 tông xám/đen
   trung tính cho mọi icon/label CHƯA chọn ở cả 2 module). */
body[data-nav="employee"] .sidebar {
  --sidebar-width: 200px;
  --sidebar-collapsed-width: 64px;
  --sidebar-active-bg: #f7f5fd;
  --sidebar-active-text: #744ec7;
  --sidebar-hover-bg: #e1def6;
}

/* ---------- Topbar tím (thay hẳn .topbar xanh dùng ở module khác) ---------- */

body[data-nav="employee"] .topbar {
  --topbar-bg: #744ec7;
  --topbar-text: #ffffff;
  --topbar-text-muted: rgba(255, 255, 255, 0.75);
  --topbar-surface-hover: rgba(255, 255, 255, 0.16);
  /* Chiều cao thật của .ms-header MISA là 48px (khác 64px module Thông tin
     nhân sự đã clone trước đó — module đó giữ nguyên, không sửa ở đây). */
  height: 48px;
  gap: 12px;
  padding: 0 16px;
}

.emp-topbar-menu-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  transition: background-color 0.15s ease;
}

.emp-topbar-menu-btn:hover {
  background: var(--topbar-surface-hover);
}

.emp-topbar-menu-btn svg {
  width: 20px;
  height: 20px;
}

.emp-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Không hotlink/nhại logo thật của MISA (tài sản thương hiệu riêng của họ)
   — dùng khối bo góc màu gradient tím trung tính đúng vị trí/kích thước
   (32x32) thay cho icon logo thật. */
.emp-topbar-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8577ff, #6130e9);
  flex-shrink: 0;
}

.emp-topbar-appname {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.emp-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.emp-topbar-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  cursor: default;
}

.emp-topbar-icon-btn:hover {
  background: var(--topbar-surface-hover);
}

.emp-topbar-icon-btn svg {
  width: 19px;
  height: 19px;
}

/* Avatar chữ cái — đúng kích thước thật (32x32) của
   .misa-menuaccount-avatar-trigger. Màu cam #ff7716 lấy lại từ chính token
   accent đã trích ở khối "Tổng quan" bên dưới (timekeeping-remote-button),
   không phải màu tự chọn ngẫu nhiên. */
.emp-topbar-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: #ff7716;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


/* ---------- Trang "Tổng quan" ---------- */

.emp-overview {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #f0f2f4;
}

.emp-overview-title {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 600;
  padding: 16px 0 8px 20px;
  background: #f0f2f4;
}

.emp-overview-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 20px 20px;
  gap: 24px;
}

.emp-main-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.emp-greeting-section {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  height: 160px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

/* 2 khối tròn mờ trang trí — thay cho SVG blob thật (giữ đúng 2 màu tím
   nhạt #E1DEF6/#F7F5FD đã trích), đơn giản hoá thành radial-gradient thay
   vì chép lại path SVG phức tạp của MISA. */
.emp-greeting-section::before,
.emp-greeting-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.emp-greeting-section::before {
  width: 260px;
  height: 260px;
  top: -120px;
  left: 60px;
  background: radial-gradient(circle at 50% 50%, #f7f5fd 0%, #e1def6 70%, transparent 72%);
}

.emp-greeting-section::after {
  width: 180px;
  height: 180px;
  bottom: -110px;
  right: -30px;
  background: radial-gradient(circle at 50% 50%, #f7f5fd 0%, #e1def6 70%, transparent 72%);
}

.emp-greeting-text {
  position: relative;
  z-index: 1;
  padding: 0 40px;
}

.emp-greeting-text-1 {
  color: #2a1e70;
  font-size: 24px;
  font-weight: 900;
  line-height: 28px;
  margin: 0 0 8px;
}

.emp-greeting-text-2 {
  color: #454d6b;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.emp-left-sub-columns {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.emp-left-sub-column {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.emp-tasks-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
}

.emp-task-header {
  flex-shrink: 0;
  padding-bottom: 10px;
}

.emp-task-header h2 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.emp-task-empty {
  flex: 1;
  min-height: 0;
  position: relative;
  border-radius: 8px;
  background: #fcfcfc;
}

.emp-empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 226px;
  text-align: center;
}

.emp-empty-state svg {
  width: 72px;
  height: 72px;
  color: #d9d4f0;
  margin: 0 auto;
  display: block;
}

.emp-empty-text {
  margin-top: 12px;
  color: #9e9e9e;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.522;
}

.emp-right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
  width: 30%;
  max-width: 400px;
  overflow-y: auto;
}

.emp-stat-card,
.emp-utilities-card {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
}

.emp-stat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emp-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px solid transparent;
}

.emp-stat-row--working {
  border-color: #fedf89;
}

.emp-stat-row--totalleave {
  border-color: #e9d7fe;
}

.emp-stat-row--leaveday {
  border-color: #b2ddff;
}

.emp-stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emp-stat-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.4px;
}

.emp-stat-row--working .emp-stat-value {
  color: #f79009;
}

.emp-stat-row--totalleave .emp-stat-value {
  color: #9e77ed;
}

.emp-stat-row--leaveday .emp-stat-value {
  color: #1570ef;
}

.emp-stat-label {
  color: #101828;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.4px;
}

.emp-stat-accent {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emp-stat-accent svg {
  width: 16px;
  height: 16px;
}

.emp-stat-row--working .emp-stat-accent {
  background: #fffaeb;
  color: #f79009;
}

.emp-stat-row--totalleave .emp-stat-accent {
  background: #f9f5ff;
  color: #9e77ed;
}

.emp-stat-row--leaveday .emp-stat-accent {
  background: #eff8ff;
  color: #1570ef;
}

.emp-utilities-title {
  color: #212121;
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 16px;
}

.emp-utilities-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.emp-utilities-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.emp-utilities-item .icon {
  width: 20px;
  height: 20px;
  color: #744ec7;
  flex-shrink: 0;
}

.emp-utilities-item-text {
  color: #212121;
  font-size: 13px;
}

@media (max-width: 900px) {
  .emp-overview-content {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .emp-right-column {
    width: 100%;
    max-width: none;
  }
}

/* ================================================================
   Trang "Hồ sơ" (/ho-so, module Nhân viên) — clone màn hình hồ sơ tự
   xem của MISA AMIS Nhân viên. Nguồn: bản DOM/CSS thật lưu qua
   "Save As → Webpage, Complete" (2026-09-07, file "Hồ sơ..._files/
   detail.html" — nội dung thật nằm trong 1 <iframe> riêng, phải mở
   file đó thay vì file .html ngoài cùng). Giá trị số/màu dưới đây lấy
   trực tiếp từ CSS thật của khung .header-body/.box-sidebar/.item-group/
   .label-txt/.wrap-control.view-mode/.selected, không suy đoán —
   ngoại trừ ảnh nền trang trí thật (hotlink MISA CDN) được thay bằng
   gradient CSS trung tính, giữ đúng nguyên tắc không chép tài sản
   thương hiệu riêng của MISA đã áp dụng xuyên suốt module này.
   ================================================================ */

.hoso-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 20px;
  gap: 16px;
}

.hoso-header {
  flex-shrink: 0;
  min-height: 76px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f7f5fd 0%, #eeeff1 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.hoso-header-user {
  display: flex;
  align-items: center;
  min-width: 0;
}

.hoso-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #ff7716;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hoso-user-name-block {
  margin-left: 12px;
  min-width: 0;
}

.hoso-user-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hoso-user-name {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #10141b;
}

.hoso-user-code {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #10141b;
}

.hoso-badge-check {
  width: 16px;
  height: 16px;
  color: var(--success);
  display: flex;
  flex-shrink: 0;
}

.hoso-company {
  color: #717680;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.hoso-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hoso-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  cursor: default;
}

.hoso-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.hoso-btn.is-ai {
  border-color: #744ec7;
  color: #744ec7;
}

.hoso-btn.is-disabled {
  color: var(--text-faint);
}

.hoso-btn.is-ai.is-disabled {
  color: #744ec7;
  opacity: 0.55;
}

.hoso-body {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.hoso-sidebar {
  width: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
}

.hoso-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
}

.hoso-nav-item {
  padding: 8px 12px;
  min-height: 36px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  border-left: 3px solid transparent;
  font-size: 13px;
  color: #10141b;
  cursor: default;
}

.hoso-nav-item[data-target] {
  cursor: pointer;
}

.hoso-nav-item[data-target]:hover {
  background: #eff1f6;
}

.hoso-nav-item.active {
  background: #eff1f6;
  color: #744ec7;
  font-weight: 500;
  border-left-color: #744ec7;
}

.hoso-nav-item.is-disabled {
  color: var(--text);
}

.hoso-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--white);
  border-radius: 8px;
  padding: 20px 24px;
}

.hoso-loading {
  color: var(--text-muted);
  font-size: 0.8125rem;
  padding: 1rem 0;
}

.hoso-section + .hoso-section {
  margin-top: 24px;
}

.hoso-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}

.hoso-field {
  padding: 8px 0;
  min-height: 32px;
  border-bottom: 1px solid #e9eaeb;
}

.hoso-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #8f949d;
}

.hoso-field-value {
  display: block;
  font-size: 14px;
  color: #10141b;
}

@media (max-width: 900px) {
  .hoso-body {
    flex-direction: column;
    overflow-y: auto;
  }
  .hoso-sidebar {
    width: 100%;
    max-height: 260px;
  }
  .hoso-field-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Flyout menu con của sidebar module "Nhân viên" (rê chuột vào 1 mục
   có menu con, VD "Chấm công" — xem TIMESHEET_CHILDREN trong
   shell.js). Component thật MISA dùng cho việc này (.ms-sidebar-menu/
   .ms-sidebar-menu__group/.ms-sidebar-menu-line__divider) đã trích
   được từ CSS thật lúc clone trang Tổng quan — áp lại đúng bo góc/
   khoảng cách/divider ở đây.

   LƯU Ý: overlay (#emp-nav-flyout-overlay) được JS (setupEmployeeFlyouts
   trong shell.js) gắn THẲNG VÀO <body>, không phải con của .sidebar —
   bắt buộc phải vậy vì .sidebar-scroll{overflow-y:auto} sẽ cắt/ẩn mất
   bất kỳ phần tử con nào tràn ra ngoài theo chiều ngang (lỗi thật gặp
   phải: "di chuột vào nó bị ẩn sau lớp kế bên" — không phải z-index).
   Vì không còn là hậu duệ của .sidebar, KHÔNG dùng var(--sidebar-*) ở
   đây (những biến đó được ghi đè theo tông tím riêng của module này
   trên chính .sidebar, sẽ không cascade tới 1 phần tử gắn ở <body>) —
   dùng thẳng mã màu thật thay vì biến kế thừa.
   ================================================================ */

.emp-nav-flyout {
  display: none;
  position: fixed;
  min-width: 264px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
  padding: 8px;
  z-index: 3000;
}

.emp-nav-flyout.is-open {
  display: block;
}

.emp-nav-flyout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #10141b;
  cursor: default;
  white-space: nowrap;
}

.emp-nav-flyout-item:hover {
  background: #e1def6;
}

.emp-nav-flyout-item.active {
  background: #f7f5fd;
  color: #744ec7;
  font-weight: 600;
}

.emp-nav-flyout-item.active .icon {
  color: #744ec7;
}

.emp-nav-flyout-item .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #717680;
}

.emp-nav-flyout-divider {
  height: 1px;
  margin: 6px 8px;
  background: #e9eaeb;
}

/* ================================================================
   Trang "Đơn xin nghỉ" (/don-xin-nghi, mục con đầu tiên trong flyout
   "Đơn từ"). Nguồn: ảnh chụp màn hình MISA thật (2026-09-07) — bản
   Ctrl+S lưu về lần này KHÔNG lấy được nội dung thật (route con nằm
   trong iframe lồng thêm 1 lớp nữa, "1.html" bên trong vẫn đang ở
   trạng thái skeleton-loading lúc lưu, không phải lỗi capture như 2
   lần trước — xem ghi chú trong memory) nên toàn bộ layout/màu sắc
   dưới đây dựng lại từ ảnh chụp màn hình, tái dùng các token màu tím
   #744EC7/nền #f0f2f4/thẻ trắng bo góc 12px đã xác nhận thật ở các
   trang khác của module "Nhân viên" (Tổng quan, Hồ sơ) để giữ nhất
   quán, không suy đoán số đo tuỳ tiện.
   ================================================================ */

.dxn-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
  overflow-y: auto;
  background: #f0f2f4;
}

.dxn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.dxn-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.dxn-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #10141b;
}

.dxn-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #eceef1;
  border-radius: 8px;
  padding: 3px;
}

.dxn-tab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #545861;
  cursor: default;
  white-space: nowrap;
}

.dxn-tab.active {
  background: var(--white);
  color: #10141b;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.dxn-btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  background: #744ec7;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.dxn-btn-primary:not(.is-disabled):hover {
  background: #6e49b8;
}

.dxn-btn-primary svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.dxn-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.dxn-stat-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--white);
  border-radius: 12px;
  padding: 16px;
  min-width: 0;
}

.dxn-stat-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #8f949d;
}

.dxn-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #10141b;
}

.dxn-stat-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.dxn-stat-icon svg {
  width: 18px;
  height: 18px;
}

.dxn-stat-card--blue .dxn-stat-icon {
  background: #2e90fa;
}

.dxn-stat-card--red .dxn-stat-icon {
  background: #f04438;
}

.dxn-stat-card--cyan .dxn-stat-icon {
  background: #36bffa;
}

.dxn-stat-card--green .dxn-stat-icon {
  background: #17b26a;
}

.dxn-stat-card--orange .dxn-stat-icon {
  background: #f79009;
}

.dxn-empty {
  flex: 1;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 40px 20px;
  background: var(--white);
  border-radius: 12px;
}

.dxn-empty-illustration {
  width: 260px;
  height: auto;
  margin-bottom: 8px;
}

.dxn-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #10141b;
}

.dxn-empty-text {
  max-width: 360px;
  font-size: 13px;
  line-height: 1.5;
  color: #8f949d;
}

.dxn-empty .dxn-btn-primary {
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .dxn-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .dxn-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dxn-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================================================================
   Trang "Thêm đơn xin nghỉ" (/them-don-xin-nghi) — dựng từ ảnh chụp
   màn hình MISA thật (2026-09-07, 1 phần cột trái bị chính menu con
   "Chấm công" của MISA che khuất lúc chụp — trường ẩn duy nhất KHÔNG
   đọc được nội dung đã bỏ qua thay vì đoán bừa). Tái dùng token màu/
   khoảng cách đã xác nhận thật ở các trang khác cùng module (tím
   #744EC7, thẻ trắng bo góc 12px, nền #f0f2f4) + các class form dùng
   chung đã có sẵn (.form-grid/.form-field/.hr-profile-section-title/
   .hr-profile-footer/.btn-outline) thay vì tạo lại từ đầu.
   ================================================================ */

.dxn-form-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
  overflow-y: auto;
  background: #f0f2f4;
}

.dxn-form-card {
  background: var(--white);
  border-radius: 12px;
  padding: 20px 24px;
  flex-shrink: 0;
}

.dxn-form-columns {
  display: flex;
  gap: 40px;
}

.dxn-form-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.req {
  color: var(--danger);
}

.dxn-datetime-row {
  display: flex;
  gap: 8px;
}

.dxn-datetime-row input[type="date"] {
  flex: 1.4;
  min-width: 0;
}

.dxn-datetime-row input[type="time"] {
  flex: 1;
  min-width: 0;
}

.dxn-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.dxn-chip {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
}

.dxn-chip:hover {
  background: var(--bg);
  border-color: #744ec7;
  color: #744ec7;
}

.dxn-chip-more {
  padding: 0.375rem 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: default;
}

.dxn-chip-more:hover {
  background: var(--white);
  border-color: var(--border);
  color: var(--text);
}

.dxn-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dxn-dropzone:hover,
.dxn-dropzone.is-dragover {
  border-color: #744ec7;
  background: #f7f5fd;
}

.dxn-dropzone input[type="file"] {
  display: none;
}

.dxn-dropzone-icon {
  width: 36px;
  height: 36px;
  color: var(--text-faint);
}

.dxn-dropzone-icon svg {
  width: 100%;
  height: 100%;
}

.dxn-dropzone-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.dxn-dropzone-link {
  color: #744ec7;
  font-weight: 600;
}

.dxn-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dxn-file-list:not(:empty) {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dxn-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.dxn-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--text);
}

.dxn-file-size {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dxn-file-remove {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.dxn-file-remove:hover {
  background: var(--border);
  color: var(--danger);
}

.dxn-file-remove svg {
  width: 13px;
  height: 13px;
}

.btn-outline.is-disabled {
  color: var(--text-faint);
  cursor: default;
}

.dxn-btn-primary.is-disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 900px) {
  .dxn-form-columns {
    flex-direction: column;
    gap: 14px;
  }
}

/* ================================================================
   Module "Chấm công" (/cham-cong) — MỘT APP MISA RIÊNG (AMIS Chấm
   công, data-color-preset="orange"), khác "Nhân viên" (tím) dù dùng
   chung 1 hệ thiết kế .ms-sidebar-*/.ms-header. Nguồn: bản DOM +
   ~8MB CSS build thật (style-B6l2fCpd.css) trích qua Ctrl+S
   (2026-09-08) — mọi giá trị số/màu/breakpoint dưới đây (kể cả các
   @media theo độ rộng màn hình) lấy trực tiếp từ file đó, không suy
   đoán. 10 ảnh minh hoạ thẻ AI là ảnh thật của MISA (URL ổn định,
   dạng .jpg đơn giản, không phải artwork nhân vật/logo riêng) — đã
   tải về tự lưu ở app-frontend/images/timesheet-ai/, không hotlink.
   ================================================================ */

/* Sidebar: cùng cơ chế ghi đè token như module "Nhân viên", đổi sang
   bộ giá trị cam thật (--ms-brand-orange-600 / preset "orange"). */
body[data-nav="timesheet"] .sidebar {
  --sidebar-width: 200px;
  --sidebar-collapsed-width: 64px;
  --sidebar-active-bg: #fff7ed;
  --sidebar-active-text: #ea580c;
  --sidebar-hover-bg: #fed7aa;
}

body[data-nav="timesheet"] .topbar {
  --topbar-bg: #ea580c;
  --topbar-text: #ffffff;
  --topbar-text-muted: rgba(255, 255, 255, 0.75);
  --topbar-surface-hover: rgba(255, 255, 255, 0.16);
  height: 48px;
  gap: 12px;
  padding: 0 16px;
}

/* Ô tìm kiếm giữa topbar — CHỈ module "Chấm công" có (module "Nhân viên"
   không có), đúng bản DOM thật ".block-search"/".ms-search". Disabled vì
   chưa có chỉ mục dữ liệu thật để tìm. */
.tc-topbar-search {
  flex: 1;
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  cursor: default;
}

.tc-topbar-search .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tc-topbar-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 0.8125rem;
  color: #fff;
}

.tc-topbar-search input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.tc-topbar-avatar {
  background: #ff7716;
}

/* ---------- Trang "Tổng quan" — tab "Trợ lý AI" ---------- */

.tc-dashboard {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.tc-header-row {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 0.5px solid #e9eaeb;
}

.tc-tab-group {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}

.tc-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: #1f1f1f;
  cursor: default;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
}

.tc-tab-item.active {
  border-bottom: 2px solid #ea580c;
  color: #ea580c;
  font-weight: 600;
}

.tc-tab-item.tc-tab-ai {
  background: linear-gradient(111deg, #1482ff 8.87%, #cf11ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

.tc-tab-item.tc-tab-ai.active {
  border-bottom: 2px solid #ea580c;
}

.tc-tab-item .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #cf11ff;
}

.tc-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  color: #ea580c;
  font-size: 13px;
  font-weight: 500;
  cursor: default;
  white-space: nowrap;
}

.tc-start-btn .icon {
  width: 20px;
  height: 20px;
}

.tc-ai-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: transparent;
}

.ai-assistant-container {
  width: 100%;
  min-width: 1366px;
  padding: 32px 40px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.ai-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.ai-avatar-ava {
  height: 64px;
  width: 64px;
  flex-shrink: 0;
  color: #cf11ff;
}

.ai-avatar-ava svg {
  width: 100%;
  height: 100%;
}

.ai-greeting {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ai-greeting-title {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1f1f1f;
}

.ai-greeting-subtitle {
  font-variant-numeric: lining-nums tabular-nums;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
  background: linear-gradient(90deg, #163bf3, #bc3cdb);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-features-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  margin: 0 0 32px;
  padding: 0;
  box-sizing: border-box;
}

.ai-feature-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  cursor: default;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 250px;
}

.ai-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
  margin-bottom: 8px;
  position: relative;
  z-index: 3;
  height: 74px;
}

.card-category {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  padding: 4px 8px;
  border-radius: 14px;
  display: inline-block;
  margin-bottom: 8px;
}

.card-category.setup-initial {
  color: #40a33b;
  background: #e9ffe6;
}

.card-category.attendance-feature {
  color: #9322c8;
  background: #fbe8ff;
}

.card-category.request-feature {
  color: #3f7ed1;
  background: #e2f4ff;
}

.card-category.report-feature {
  color: #d13f3f;
  background: #ffe4e2;
}

.card-title {
  color: #212121;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.card-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  min-height: 140px;
}

@media (min-width: 1367px) {
  .ai-feature-card {
    height: 306px;
  }
  .card-content {
    min-height: 160px;
  }
}

@media (min-width: 1600px) {
  .ai-feature-card {
    height: 300px;
  }
}

@media (min-width: 1920px) {
  .ai-feature-card {
    height: 332px;
  }
  .card-content {
    min-height: 220px;
  }
  .ai-assistant-container {
    padding-left: 92px;
    padding-right: 92px;
  }
}

@media (max-width: 1366px) {
  .tc-ai-scroll {
    overflow-x: auto;
  }
}

/* ==================== Trang "Hợp đồng" (hop-dong.html) ====================
   app-api chưa có model Contract riêng — dữ liệu hợp đồng cụ thể là MẪU,
   nối vào nhân viên thật (xem chú thích đầu js/hop-dong.js). Tái dùng tối
   đa các class đã có ở trang Tổng quan/Nhắc việc (.hr-stat-card,
   .hr-chart-legend, .hr-upcoming-list, .hr-rem-status-*, .hr-tag...), chỉ
   thêm class riêng cho các thành phần mới (sparkline mini-chart, mẫu hợp
   đồng phổ biến, bố cục 2 cột chính). ---------- */

.hd-stat-grid {
  grid-template-columns: repeat(4, 1fr);
}

.hd-stat-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.hd-stat-body {
  flex: 1;
  min-width: 0;
}

.hd-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 56px;
  height: 36px;
  flex-shrink: 0;
}

.hd-spark-bar {
  flex: 1;
  min-width: 3px;
  border-radius: 2px 2px 0 0;
  background: #cfe0ff;
}

.hd-sparkline.tone-red .hd-spark-bar { background: #f7c9c9; }
.hd-sparkline.tone-orange .hd-spark-bar { background: #fbdbb3; }
.hd-sparkline.tone-green .hd-spark-bar { background: #bce6cb; }

.hd-chart-row {
  grid-template-columns: 1.5fr 1fr;
}

.hd-chart-legend {
  margin-bottom: 0.5rem;
}

.hd-filter-panel {
  margin-bottom: 1rem;
}

.hd-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hd-filter-search {
  width: 240px;
  flex-shrink: 0;
}

.hd-filter-field {
  width: 150px;
  flex-shrink: 0;
}

.hd-filter-row .hr-filter-daterange {
  width: 210px;
}

.hd-filter-row #hd-refresh-btn {
  flex-shrink: 0;
}

.hd-main-row {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1rem;
  align-items: start;
}

.hd-side-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.hd-table {
  white-space: nowrap;
}

.hd-template-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hd-template-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hd-template-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hd-template-title {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hd-template-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

@media (max-width: 1100px) {
  .hd-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hd-chart-row {
    grid-template-columns: 1fr;
  }
  .hd-main-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hd-stat-grid {
    grid-template-columns: 1fr;
  }
  .hd-filter-search,
  .hd-filter-field,
  .hd-filter-row .hr-filter-daterange {
    width: 100%;
  }
}

/* ==================== Trang "Công việc" (cong-viec.html) ====================
   app-api chưa có model Task/Project/Document/Workflow riêng — dữ liệu công
   việc/dự án cụ thể là MẪU, nối vào nhân viên thật (xem chú thích đầu
   js/cong-viec.js). Tái dùng tối đa class đã có ở trang Nhắc việc/Hồ sơ/Hợp
   đồng (.hr-rem-*, .hr-profile-bar-*, .hr-tag, .hd-sparkline, .hd-stat-*),
   chỉ thêm class riêng cho phần tiêu đề, lưới 5 thẻ chỉ số, bố cục 3+2 cột,
   "Dự án nổi bật", "Sắp đến hạn" (ô ngày/tháng) và "Hoạt động gần đây". ---------- */

.wk-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.wk-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.wk-greeting {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}

.wk-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.wk-row-2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.wk-row-3 {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  align-items: start;
}

.wk-col-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* ---------- "Dự án nổi bật" — danh sách gọn, thanh tiến độ mảnh ---------- */

.wk-featured-project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wk-featured-project-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wk-featured-project-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.wk-featured-project-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.wk-featured-project-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-featured-project-pct {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.wk-featured-project-body .hr-profile-bar-track {
  height: 5px;
}

/* ---------- Cột "Dự án" trong bảng "Công việc gần đây" ---------- */

.wk-project-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
}

.wk-project-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wk-project-dot.tone-blue { background: var(--brand); }
.wk-project-dot.tone-green { background: var(--success); }
.wk-project-dot.tone-orange { background: #ea8c1c; }
.wk-project-dot.tone-purple { background: #8151e8; }
.wk-project-dot.tone-gray { background: #9ca3af; }

.wk-due-overdue {
  color: var(--danger);
  font-weight: 600;
}

/* ---------- "Sắp đến hạn" — ô ngày/tháng giống lịch, cùng tinh thần
   .hr-total-breakdown/.hr-upcoming-item nhưng có ô ngày riêng. ---------- */

.wk-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wk-schedule-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wk-schedule-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-muted);
}

.wk-schedule-month {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
}

.wk-schedule-day {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.wk-schedule-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.wk-schedule-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-schedule-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ---------- "Hoạt động gần đây" ---------- */

.wk-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.wk-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.wk-activity-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.wk-activity-text {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.4;
}

.wk-activity-target {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-activity-time {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

@media (max-width: 1300px) {
  .wk-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .wk-row-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .wk-row-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .wk-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .wk-header-row {
    flex-direction: column;
  }
}

/* ==================== Trang "Lịch trình" (lich-trinh.html) ====================
   app-api chưa có model Event/Schedule riêng — sự kiện/cuộc họp cụ thể là
   MẪU, nối vào nhân viên thật (xem chú thích đầu js/lich-trinh.js). Tuần/
   tháng/ô "hôm nay" trên lưới đều tính bằng ngày THẬT. ---------- */

.sch-topline {
  margin-bottom: 0.5rem;
}

.wk-back-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.wk-back-link:hover {
  color: var(--brand);
}

.sch-toolbar {
  flex-wrap: wrap;
}

.sch-today-btn {
  height: 38px;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.sch-today-btn:hover {
  background: var(--bg);
}

.sch-nav-btn {
  width: 34px;
  height: 34px;
}

/* ---------- Panel lịch chính ---------- */

.sch-col-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.sch-view-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.sch-view-tabs {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.sch-view-tab {
  padding: 0.5rem 0.125rem 0.75rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.sch-view-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.sch-view-tab.is-disabled {
  color: var(--text-faint);
  cursor: default;
}

/* ---------- Lưới tuần ---------- */

.sch-grid-wrap {
  overflow-x: auto;
}

.sch-grid {
  --sch-row-h: 56px;
  min-width: 760px;
}

.sch-grid-header {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}

.sch-time-col-header {
  border-right: 1px solid var(--border);
}

.sch-day-col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 0.25rem;
  border-right: 1px solid var(--border);
}

.sch-day-col-header:last-child {
  border-right: none;
}

.sch-day-col-header.is-today {
  background: #eaf0ff;
  border-radius: 8px 8px 0 0;
}

.sch-day-name {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sch-day-col-header.is-today .sch-day-name {
  color: var(--brand);
  font-weight: 700;
}

.sch-day-date {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.sch-day-col-header.is-today .sch-day-date {
  color: var(--brand);
}

.sch-grid-body {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
}

.sch-time-col {
  position: relative;
  border-right: 1px solid var(--border);
}

.sch-time-label {
  position: absolute;
  left: 0;
  right: 6px;
  transform: translateY(-50%);
  text-align: right;
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.sch-day-col {
  position: relative;
  border-right: 1px solid var(--border);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--border) 0,
    var(--border) 1px,
    transparent 1px,
    transparent var(--sch-row-h)
  );
}

.sch-day-col:last-child {
  border-right: none;
}

.sch-day-col.is-today {
  background-color: #f7f9ff;
}

.sch-event {
  position: absolute;
  left: 3px;
  right: 3px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.6875rem;
  line-height: 1.25;
  cursor: default;
}

.sch-event.tone-meeting { background: #dbe6ff; color: #1d4ed8; }
.sch-event.tone-training { background: #fef3c7; color: #92660a; }
.sch-event.tone-project { background: #d7f5e0; color: #15803d; }
.sch-event.tone-event { background: #fbd9ea; color: #a3155e; }
.sch-event.tone-personal { background: #ffe4c7; color: #9a5209; }

.sch-event-time {
  font-weight: 700;
  font-size: 0.625rem;
  opacity: 0.85;
}

.sch-event-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sch-event-loc {
  font-size: 0.625rem;
  opacity: 0.8;
}

.sch-event-avatars {
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.sch-event-avatar,
.sch-event-avatar-more {
  width: 16px;
  height: 16px;
  margin-left: -5px;
  border: 1.5px solid #fff;
  font-size: 0.5625rem;
}

.sch-event-avatar:first-child {
  margin-left: 0;
}

.sch-event-avatar-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  font-weight: 700;
}

/* ---------- Chú giải màu ---------- */

.sch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.875rem 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sch-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.sch-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sch-legend-dot.tone-meeting { background: #245fdf; }
.sch-legend-dot.tone-training { background: #ca8a04; }
.sch-legend-dot.tone-project { background: #16a34a; }
.sch-legend-dot.tone-event { background: #db2777; }
.sch-legend-dot.tone-personal { background: #ea8c1c; }

/* ---------- "Lịch của đội nhóm" ---------- */

.sch-team-tabs {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.sch-team-tab {
  padding: 0.5rem 0.125rem 0.75rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.sch-team-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.sch-team-tab.is-disabled {
  color: var(--text-faint);
  cursor: default;
}

.sch-member-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sch-member-chip {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sch-member-chip:hover {
  background: var(--bg);
}

.sch-member-info {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.sch-member-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.sch-member-dept {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.sch-member-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 700;
}

.sch-member-chip.is-hidden {
  opacity: 0.5;
}

.sch-member-chip.is-hidden .sch-member-check {
  background: var(--bg);
  border: 1px solid var(--border);
}

/* ---------- Sidebar: "Sự kiện sắp tới" ---------- */

.sch-upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sch-upcoming-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sch-upcoming-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg);
}

.sch-upcoming-weekday {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--text-faint);
}

.sch-upcoming-date {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text);
}

.sch-upcoming-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.sch-upcoming-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sch-upcoming-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ---------- Sidebar: "Việc cần chuẩn bị" ---------- */

.sch-prep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sch-prep-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sch-prep-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--text);
  cursor: pointer;
}

.sch-prep-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
}

.sch-prep-label .is-done {
  color: var(--text-faint);
  text-decoration: line-through;
}

.sch-prep-date {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ---------- Sidebar: "Nhóm tham gia" ---------- */

.sch-participant-row {
  display: flex;
  align-items: center;
}

.sch-participant-avatar {
  margin-left: -8px;
  border: 2px solid var(--white);
}

.sch-participant-avatar:first-child {
  margin-left: 0;
}

.sch-participant-more {
  background: var(--bg);
  color: var(--text-muted);
}

.sch-participant-note {
  margin: 0.625rem 0 0;
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ---------- Sidebar: lịch tháng mini ---------- */

.sch-mini-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.sch-mini-cal-nav {
  display: flex;
  gap: 0.25rem;
}

.sch-mini-cal-nav .sch-nav-btn {
  width: 26px;
  height: 26px;
}

.sch-mini-cal-nav .icon {
  width: 14px;
  height: 14px;
}

.sch-mini-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.375rem;
}

.sch-mini-cal-weekdays span {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.sch-mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.sch-mini-cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--text);
}

.sch-mini-cal-cell.is-empty {
  visibility: hidden;
}

.sch-mini-cal-cell.is-in-week {
  background: #eaf0ff;
  color: var(--brand);
  font-weight: 600;
}

.sch-mini-cal-cell.is-today {
  background: var(--brand);
  color: var(--white);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .sch-toolbar {
    width: 100%;
  }
}

/* ==================== Trang "Công việc" / Kanban (quan-ly-cong-viec.html) ====================
   app-api chưa có model Task/Project riêng — công việc cụ thể là MẪU, nối
   vào nhân viên thật (xem chú thích đầu js/quan-ly-cong-viec.js). Tái dùng
   .sch-mini-cal-* từ trang Lịch trình cho lịch mini bên sidebar. ---------- */

.qv-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: 10px;
  background: var(--bg);
}

.qv-view-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.qv-view-btn .icon {
  width: 16px;
  height: 16px;
}

.qv-view-btn.active {
  background: var(--white);
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.qv-view-btn.is-disabled {
  color: var(--text-faint);
  cursor: default;
}

.qv-col-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* ---------- Thanh công cụ trên bảng Kanban ---------- */

.qv-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.qv-mode-tabs {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.qv-mode-tab {
  padding: 0.5rem 0.125rem 0.75rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.qv-mode-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.qv-mode-tab.is-disabled {
  color: var(--text-faint);
  cursor: default;
}

.qv-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qv-search {
  width: 220px;
}

/* ---------- Bảng Kanban ---------- */

.qv-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.qv-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
  border-radius: 12px;
  padding: 0.875rem;
}

.qv-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.qv-column-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.qv-column-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.qv-column-dot.tone-gray { background: #9ca3af; }
.qv-column-dot.tone-blue { background: var(--brand); }
.qv-column-dot.tone-purple { background: #8151e8; }
.qv-column-dot.tone-green { background: var(--success); }
.qv-column-dot.tone-orange { background: #ea8c1c; }

.qv-column-add {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 9px;
  background: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.qv-column-add:hover {
  background: var(--bg);
  border-color: var(--brand);
  color: var(--brand);
}

.qv-column-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 40px;
}

/* ---------- Thẻ công việc ---------- */

.qv-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.qv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.qv-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.qv-card-done-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8f9ee;
  color: var(--success);
  font-size: 0.6875rem;
  font-weight: 700;
}

.qv-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.qv-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.qv-tag-category {
  background: #eef1f6;
  color: var(--text-muted);
}

.qv-card-progress {
  width: 100%;
}

.qv-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.qv-card-date {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.qv-card-date .icon {
  width: 12px;
  height: 12px;
}

.qv-card-avatars {
  display: flex;
  align-items: center;
}

.qv-card-avatar,
.qv-card-avatar-more {
  width: 22px;
  height: 22px;
  font-size: 0.625rem;
  margin-left: -6px;
  border: 1.5px solid var(--white);
}

.qv-card-avatar:first-child {
  margin-left: 0;
}

.qv-card-avatar-more {
  background: var(--bg);
  color: var(--text-muted);
}

/* ---------- "Công việc của tôi" ---------- */

.qv-mytasks-table {
  white-space: nowrap;
}

/* ---------- Lịch mini — chấm nhỏ ở ngày có việc đến hạn ---------- */

.sch-mini-cal-cell {
  position: relative;
}

.qv-mini-cal-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
}

.sch-mini-cal-cell.is-today .qv-mini-cal-dot {
  background: var(--white);
}

/* ---------- "Công việc sắp đến hạn" ---------- */

.qv-upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qv-upcoming-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.qv-upcoming-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.qv-upcoming-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qv-upcoming-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ---------- "Thành viên hoạt động nhiều nhất" ---------- */

.qv-period-badge {
  display: inline-flex;
  width: auto;
  min-width: 0;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  cursor: default;
}

.qv-leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qv-leader-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.qv-leader-rank {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-faint);
}

.qv-leader-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qv-leader-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-faint);
}

@media (max-width: 1100px) {
  .qv-board {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 640px) {
  .qv-board {
    grid-template-columns: minmax(220px, 1fr);
  }
  .qv-search {
    width: 100%;
  }
}

/* ==================== Trang "Khách hàng" / CRM (khach-hang.html) ====================
   apps/api (Bearer token, Admin/Staff riêng) không gọi được trực tiếp từ
   app-api (Employee + cookie) — dữ liệu khách hàng cụ thể là MẪU, xem chú
   thích đầu js/khach-hang.js. Tái dùng .hr-filter-grid/.hr-list-stat-grid/
   .hr-tag đã có ở trang Hồ sơ nhân sự, chỉ thêm class riêng cho nhãn loại
   khách hàng và dòng phụ "công ty/lĩnh vực". ---------- */

.kh-filter-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Bớt 1 cột "Loại khách hàng" (đã chuyển thành 2 tab con "Cá nhân"/"Doanh
   nghiệp" ở trên, xem #kh-type-tabs) — còn lại đúng 3 bộ lọc. */
.kh-filter-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.kh-type-tabs {
  margin-bottom: 1rem;
}

.kh-name-col {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.kh-company-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-faint);
}

.kh-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.kh-type-individual {
  background: #e8f9ee;
  color: var(--success);
}

.kh-type-business {
  background: #f2ecff;
  color: #8151e8;
}

.kh-tag-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  white-space: normal;
}

.kh-address-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bảng "Khách hàng" nhiều cột hơn (thêm Ngày sinh/Nguồn/Thẻ phân loại/Địa
   chỉ) nên rộng hơn khung nhìn — .table-scroll mặc định ẩn thanh cuộn
   (dùng cho các dải cuộn ngang hẹp khác), riêng bảng này cần thanh cuộn
   NHÌN THẤY ĐƯỢC để người dùng biết có thể kéo ngang. */
.kh-table-scroll {
  scrollbar-width: thin;
}

.kh-table-scroll::-webkit-scrollbar {
  display: block;
  height: 10px;
}

.kh-table-scroll::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 999px;
}

.kh-table-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.kh-table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

@media (max-width: 1100px) {
  .kh-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .kh-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== Trang "Tổng quan" CRM (crm.html) ====================
   apps/api (Bearer token riêng) không gọi được trực tiếp từ app-api —
   phần lớn số liệu là MẪU (khớp đúng "Khách hàng"), xem chú thích đầu
   js/crm.js. Tái dùng .hr-list-stat-grid/.hr-rem-stat-arrow/.hd-sparkline/
   .donut-row/.hr-tag đã có, chỉ thêm class riêng cho khối chào mừng, thẻ
   trích dẫn, thẻ chỉ số bố cục dọc và 2 danh sách "Hoạt động"/"Nhiệm vụ". ---------- */

.panel-subtitle {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ---------- Badge "Hôm nay" + thẻ trích dẫn ---------- */

.crm-today-badge {
  height: auto;
  padding: 0.5rem 0.875rem;
  align-items: flex-start;
  gap: 0.625rem;
}

.crm-today-badge .icon {
  margin-top: 0.125rem;
}

.crm-today-badge-text {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.crm-today-label {
  font-size: 0.6875rem;
  color: var(--text-faint);
  font-weight: 500;
}

.crm-quote-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  background: linear-gradient(90deg, #eef0ff 0%, #f5ecff 100%);
  border-radius: 12px;
  overflow: hidden;
}

.crm-quote-mark {
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #8151e8;
  line-height: 1;
}

.crm-quote-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4c3a8c;
  line-height: 1.4;
}

.crm-quote-icon {
  position: absolute;
  right: -6px;
  bottom: -6px;
  color: #dc2626;
  opacity: 0.85;
}

.crm-quote-icon .icon {
  width: 40px;
  height: 40px;
}

/* ---------- Thẻ chỉ số (bố cục dọc: icon+mũi tên, nhãn, giá trị, xu
   hướng, sparkline ở góc) ---------- */

.crm-stat-card {
  position: relative;
  overflow: hidden;
}

.crm-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.crm-stat-spark {
  position: absolute;
  right: 1rem;
  bottom: 0.875rem;
  width: 72px;
  height: 28px;
  opacity: 0.6;
}

/* ---------- Hàng 2 (biểu đồ) / hàng 3 (danh sách) — 3 cột ---------- */

.crm-row-2,
.crm-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.crm-row-3 {
  margin-bottom: 0;
}

.crm-chart-period {
  display: inline-flex;
  width: auto;
  min-width: 0;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  cursor: default;
}

/* ---------- "Hoạt động gần đây" ---------- */

.crm-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.crm-activity-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.crm-activity-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.crm-activity-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.crm-activity-target {
  font-size: 0.75rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-activity-time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ---------- "Nhiệm vụ của tôi" ---------- */

.crm-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crm-task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (max-width: 1300px) {
  .crm-row-2,
  .crm-row-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .crm-row-2,
  .crm-row-3 {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Trang "Cơ hội bán hàng" (co-hoi-ban-hang.html) — module CRM.
   Tái dùng .hr-rem-stat-card/.hd-sparkline (thẻ chỉ số), .qv-board/
   .qv-column/.qv-card (Kanban, từ quan-ly-cong-viec.html), .crm-activity-*
   (hoạt động gần đây), .line-chart (khung biểu đồ). Chỉ thêm class mới cho
   phần thật sự riêng: lưới 5 thẻ chỉ số, cột giá trị pipeline, thẻ deal,
   bảng danh sách cơ hội.
   ================================================================ */

.dl-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.dl-stat-value-money {
  font-size: 1.125rem;
}

.dl-row-2 {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.dl-pipeline-panel .qv-board {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
}

.dl-column-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand);
  margin: -0.375rem 0 0.75rem;
}

.dl-card-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.dl-card-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.625rem;
}

.dl-table-card {
  margin-top: 0;
}

.dl-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.dl-search {
  flex: 1 1 260px;
  max-width: 320px;
}

@media (max-width: 1300px) {
  .dl-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dl-row-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .dl-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dl-pipeline-panel .qv-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .wk-header-row {
    align-items: stretch;
  }
  .hr-rem-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ================================================================
   Trang "Lịch sử tương tác" (lich-su-tuong-tac.html) — module CRM.
   Tái dùng .dl-stat-grid (lưới 5 thẻ), .crm-stat-card/.hr-stat-icon (thẻ
   chỉ số), .line-chart (khung biểu đồ cột), .donut-row/.donut-legend (biểu
   đồ Kênh tương tác), .hr-upcoming-list (Nhắc việc), .dl-table-card/
   .dl-filter-row/.dl-search (bảng danh sách). Chỉ thêm class mới cho thẻ
   chỉ số dạng icon+nhãn cùng hàng và timeline hoạt động gần đây.
   ================================================================ */

.ls-stat-top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.ls-stat-label {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-row-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.ls-timeline {
  display: flex;
  flex-direction: column;
}

.ls-timeline-item {
  display: grid;
  grid-template-columns: 52px 16px 1fr auto;
  column-gap: 0.75rem;
  align-items: start;
  padding-bottom: 1.25rem;
}

.ls-timeline-item:last-child {
  padding-bottom: 0;
}

.ls-timeline-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  font-size: 0.6875rem;
  color: var(--text-faint);
  text-align: right;
}

.ls-timeline-time strong {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.ls-timeline-marker-col {
  display: flex;
  justify-content: center;
  position: relative;
  align-self: stretch;
}

.ls-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  z-index: 1;
}

.ls-timeline-dot.tone-blue { background: var(--brand); }
.ls-timeline-dot.tone-green { background: var(--success); }
.ls-timeline-dot.tone-purple { background: #8151e8; }
.ls-timeline-dot.tone-red { background: var(--danger); }

.ls-timeline-item:not(:last-child) .ls-timeline-marker-col::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: -1.25rem;
  left: 50%;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
}

.ls-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ls-timeline-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.ls-timeline-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-timeline-person {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.ls-timeline-person-info {
  display: flex;
  flex-direction: column;
}

.ls-timeline-person-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.ls-timeline-person-role {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

@media (max-width: 1300px) {
  .ls-row-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .ls-row-2 {
    grid-template-columns: 1fr;
  }
  .ls-timeline-item {
    grid-template-columns: 44px 14px 1fr;
  }
  .ls-timeline-person {
    display: none;
  }
}

/* ================================================================
   Trang "Báo cáo" (bao-cao.html) — module CRM, trang tổng hợp cuối cùng.
   Tái dùng .dl-stat-grid (lưới 4 thẻ), .crm-stat-card/.hr-stat-icon (thẻ
   chỉ số), .line-chart (biểu đồ cột+đường), .donut-row/.donut-legend
   (Nguồn khách hàng), .hr-upcoming-list (Báo cáo nhanh), .hr-profile-bar-*
   (thanh tiến độ mục tiêu), .dl-table-card/.dl-filter-row (bảng báo cáo).
   Chỉ thêm class mới cho: bố cục 2 hàng riêng của trang, danh sách hiệu
   suất nhân viên, phễu chuyển đổi theo giai đoạn, danh sách mục tiêu.
   ================================================================ */

.rp-row-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.rp-row-3 {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1rem;
  align-items: start;
}

.rp-perf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.rp-perf-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.rp-perf-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.rp-perf-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-perf-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.rp-funnel {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.rp-funnel-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 0.25rem;
}

.rp-funnel-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
}

.rp-funnel-bar-track {
  width: 100%;
  max-width: 34px;
  height: 90px;
  background: var(--bg);
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.rp-funnel-bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
}

.rp-funnel-bar-fill.tone-gray { background: #9ca3af; }
.rp-funnel-bar-fill.tone-blue { background: var(--brand); }
.rp-funnel-bar-fill.tone-orange { background: #ea8c1c; }
.rp-funnel-bar-fill.tone-green { background: var(--success); }

.rp-funnel-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 0.125rem;
}

.rp-funnel-label {
  font-size: 0.6875rem;
  color: var(--text-faint);
  text-align: center;
}

.rp-goal-list {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.rp-goal-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.rp-goal-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.rp-goal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.rp-goal-top span:first-child {
  font-weight: 600;
  color: var(--text);
}

.rp-goal-top span:last-child {
  color: var(--text-faint);
  white-space: nowrap;
}

@media (max-width: 1300px) {
  .rp-row-2 {
    grid-template-columns: 1fr 1fr;
  }
  .rp-row-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .rp-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Popup "Thêm khách hàng" (khach-hang.html) — khung modal dùng chung
   (.modal-overlay/.modal-dialog/.modal-header/.modal-body/.modal-footer)
   có thể tái dùng cho các popup khác sau này. Tái dùng .form-field/
   .form-grid (đã có sẵn từ them-ho-so.html) cho input/select/textarea.
   ================================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
}

/* CSS "display" trên chính .modal-overlay đè mất display:none mặc định
   của thuộc tính [hidden] (author stylesheet luôn thắng UA stylesheet dù
   cùng specificity) — không có dòng này thì gán overlay.hidden=true bằng
   JS không ẩn được popup. */
.modal-overlay[hidden] {
  display: none;
}

.modal-dialog {
  background: var(--white);
  border-radius: 16px;
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header-main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.modal-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-header-icon .icon {
  width: 22px;
  height: 22px;
}

.modal-header-icon.tone-blue {
  background: #eaf0ff;
  color: var(--brand);
}

.modal-header h2 {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.modal-header-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.modal-close-btn .icon {
  width: 18px;
  height: 18px;
}

.modal-body {
  padding: 1.5rem 1.75rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.125rem 1.75rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-footer .modal-alert {
  margin-bottom: 0;
  margin-right: auto;
}

.modal-footer-actions {
  display: flex;
  gap: 0.625rem;
}

.kh-add-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}

.kh-add-col-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.kh-add-col-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.kh-add-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.875rem;
}

.kh-add-section-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #eaf0ff;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kh-add-section-icon .icon {
  width: 15px;
  height: 15px;
}

.kh-add-required {
  color: var(--danger);
}

.kh-add-radio-row {
  display: flex;
  gap: 1.25rem;
  padding-top: 0.375rem;
  min-height: 34px;
  align-items: center;
}

.kh-add-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  position: relative;
}

.kh-add-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.kh-add-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.kh-add-radio input:checked + .kh-add-radio-dot {
  border-color: var(--brand);
}

.kh-add-radio input:checked + .kh-add-radio-dot::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.kh-add-input-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.kh-add-input-icon .icon {
  position: absolute;
  left: 0.75rem;
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  pointer-events: none;
}

.kh-add-input-icon input,
.kh-add-input-icon select {
  width: 100%;
  padding-left: 2.25rem;
}

.kh-add-note-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 1rem;
}

.kh-add-tip-box {
  background: #eaf0ff;
  border-radius: 12px;
  padding: 1rem;
}

.kh-add-box-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.kh-add-box-title .icon {
  width: 15px;
  height: 15px;
}

.kh-add-note-box .kh-add-box-title {
  color: #92400e;
}

.kh-add-note-box .kh-add-box-title .icon {
  color: #d97706;
}

.kh-add-tip-box .kh-add-box-title {
  color: var(--brand);
}

.kh-add-note-box textarea {
  width: 100%;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: var(--white);
  padding: 0.625rem;
  font-size: 0.8125rem;
  font-family: inherit;
  resize: vertical;
  min-height: 64px;
}

.kh-add-note-counter {
  display: block;
  text-align: right;
  font-size: 0.6875rem;
  color: var(--text-faint);
  margin-top: 0.25rem;
}

.kh-add-tip-box ul {
  margin: 0;
  padding-left: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.kh-add-tip-box li {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .kh-add-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .modal-overlay {
    padding: 0.75rem;
  }
  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }
  .modal-footer {
    flex-wrap: wrap;
  }
  .modal-footer .modal-alert {
    flex-basis: 100%;
    margin-right: 0;
  }
  .modal-footer-actions {
    margin-left: auto;
  }
}

/* ================================================================
   Trang "Danh sách" khóa học (khoa-hoc.html) — tái dùng .hr-list-stat-grid/
   .hr-stat-card/.crm-stat-top/.hr-rem-stat-arrow (thẻ chỉ số), .kh-add-
   input-icon (select có icon), .hr-search/.kh-table-scroll/.kh-name-col/
   .kh-company-sub/.hr-tag (bảng). Chỉ thêm class mới cho: hàng số liệu +
   pill xu hướng trong thẻ chỉ số, lưới bộ lọc 4 cột, ô tìm kiếm trong lưới
   đó, và thumbnail màu theo danh mục ở cột "Khóa học".
   ================================================================ */

.kh2-stat-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.kh2-filter-grid {
  grid-template-columns: repeat(3, 1fr) 1.3fr;
}

.kh2-search {
  width: 100%;
}

.kh2-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kh2-thumb .icon {
  width: 20px;
  height: 20px;
}

.kh2-thumb.tone-red { background: #fdeaea; color: var(--danger); }
.kh2-thumb.tone-blue { background: #eaf0ff; color: var(--brand); }
.kh2-thumb.tone-orange { background: #fff2e6; color: #ea8c1c; }
.kh2-thumb.tone-pink { background: #fdf2f8; color: #db2777; }
.kh2-thumb.tone-purple { background: #f2ecff; color: #8151e8; }
.kh2-thumb.tone-teal { background: #e0f7f5; color: #0d9488; }
.kh2-thumb.tone-green { background: #e8f9ee; color: var(--success); }
.kh2-thumb.tone-gray { background: #f1f5f9; color: #64748b; }

@media (max-width: 1100px) {
  .kh2-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .kh2-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Trang "Duyệt khóa học" (duyet-khoa-hoc.html) — tái dùng .hr-list-stat-
   grid/.hr-stat-card/.kh2-stat-value-row (thẻ chỉ số), .dl-row-2 (khung 2
   cột nội dung + panel bên phải), .kh-add-input-icon (select có icon),
   .kh2-thumb (thumbnail màu theo danh mục), .modal-close-btn (nút đóng
   panel), .btn-solid/.btn-outline. Chỉ thêm class mới cho: hàng icon+nhãn
   trong thẻ chỉ số, lưới bộ lọc 5 cột, ô "Xem chi tiết" trong bảng, và
   toàn bộ panel "Chi tiết khóa học" bên phải.
   ================================================================ */

.dk-stat-top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.dk-filter-grid {
  grid-template-columns: repeat(4, 1fr) 1.3fr;
}

.dk-actions-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dk-view-link {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  white-space: nowrap;
}

.dk-view-link:hover {
  text-decoration: underline;
}

.btn-solid.is-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* ---------- Panel "Chi tiết khóa học" ---------- */

.dk-detail-panel {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  position: sticky;
  top: 1.5rem;
}

.dk-detail-thumb {
  position: relative;
  height: 130px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.dk-detail-thumb .icon {
  width: 40px;
  height: 40px;
  opacity: 0.85;
}

.dk-detail-status-badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
}

.dk-detail-title {
  margin: 0 0 0.875rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.dk-detail-instructor-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.dk-detail-instructor-info {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.dk-detail-instructor-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dk-detail-instructor-label {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.dk-detail-category-tag {
  margin-left: auto;
  flex-shrink: 0;
}

.dk-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.125rem;
}

.dk-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.dk-detail-chip .icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.dk-detail-tabs {
  display: flex;
  gap: 1.125rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.dk-detail-tab {
  border: none;
  background: none;
  padding: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.dk-detail-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.dk-detail-tab-content {
  margin-bottom: 1.25rem;
}

.dk-detail-section + .dk-detail-section {
  margin-top: 1.125rem;
}

.dk-detail-section h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.dk-detail-description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.dk-outcome-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dk-outcome-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.dk-outcome-list .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--success);
}

.dk-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.dk-approve-btn {
  background: var(--success);
}

.dk-reject-btn {
  background: var(--danger);
}

.dk-revision-btn {
  width: 100%;
}

@media (max-width: 1300px) {
  .dk-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dk-filter-grid {
    grid-template-columns: 1fr;
  }
  .dk-detail-panel {
    position: static;
    max-height: none;
  }
}

/* ================================================================
   Trang "Gói học tập" (goi-hoc-tap.html) — .gh-thumb: ẢNH thumbnail cột
   "Gói học tập" (to hơn, nền gradient theo danh mục + họa tiết mờ), khác
   hẳn icon phẳng nhỏ .kh2-thumb dùng ở Danh sách/Duyệt khóa học — theo yêu
   cầu người dùng "phải có ảnh thumbnail chứ không phải icon".
   ================================================================ */

.gh-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.gh-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.35), transparent 55%);
}

.gh-thumb::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  right: -18px;
  bottom: -20px;
}

.gh-thumb .icon {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  color: #fff;
}

.gh-thumb.tone-blue { background: linear-gradient(135deg, #5b8def, #2450c9); }
.gh-thumb.tone-orange { background: linear-gradient(135deg, #ffb066, #d9730d); }
.gh-thumb.tone-teal { background: linear-gradient(135deg, #2dd4c7, #0d7d73); }
.gh-thumb.tone-red { background: linear-gradient(135deg, #fb8b8b, #c62828); }
.gh-thumb.tone-purple { background: linear-gradient(135deg, #ab8ff5, #6d28d9); }
.gh-thumb.tone-green { background: linear-gradient(135deg, #5fdb8f, #15803d); }
.gh-thumb.tone-pink { background: linear-gradient(135deg, #f68cc0, #be1867); }

/* ---------- Trang "Thêm cộng tác viên" (them-cong-tac-vien.html) ---------- */
/* Tái dùng .panel/.form-grid/.form-field/.kh-add-section-title/.kh-add-
   section-icon/.kh-add-input-icon/.kh-add-note-box/.hr-toggle-switch/.hr-tag
   (đã có sẵn từ khach-hang.html/cong-tac-vien.html) — chỉ thêm phần layout
   2 cột + các khối riêng của trang này (avatar upload, ô % suffix, xem
   trước hồ sơ, checklist tiến độ). */

.ctv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
  margin-bottom: 0.75rem;
}

.ctv-breadcrumb a {
  color: var(--text-faint);
  text-decoration: none;
}

.ctv-breadcrumb a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.ctv-breadcrumb .current {
  color: var(--text);
  font-weight: 600;
}

.ctv-add-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1rem;
  align-items: start;
  margin-top: 1.25rem;
}

.ctv-add-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.ctv-add-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 1.5rem;
}

.kh-add-section-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-faint);
  margin-top: 0.125rem;
}

.ctv-panel-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.form-grid.ctv-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-grid.ctv-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.form-field-hint {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.ctv-personal-row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.ctv-avatar-upload {
  width: 128px;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text-faint);
  cursor: pointer;
  flex-shrink: 0;
}

.ctv-avatar-upload .icon {
  width: 28px;
  height: 28px;
}

.ctv-avatar-upload-text {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.ctv-avatar-upload-hint {
  font-size: 0.625rem;
  color: var(--text-faint);
}

.ctv-avatar-upload.has-image {
  background-size: cover;
  background-position: center;
  border-style: solid;
}

.ctv-avatar-upload.has-image .icon,
.ctv-avatar-upload.has-image .ctv-avatar-upload-text,
.ctv-avatar-upload.has-image .ctv-avatar-upload-hint {
  display: none;
}

.kh-add-input-suffix {
  position: relative;
  display: flex;
  align-items: center;
}

.kh-add-input-suffix input {
  width: 100%;
  padding-right: 2rem;
}

.kh-add-input-suffix .suffix {
  position: absolute;
  right: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
  pointer-events: none;
}

.ctv-password-field {
  position: relative;
}

.ctv-password-field input {
  padding-right: 2.25rem;
}

.ctv-eye-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.25rem;
  display: flex;
  cursor: pointer;
  color: var(--text-faint);
}

.ctv-eye-toggle .icon {
  width: 15px;
  height: 15px;
}

.ctv-upload-btn {
  width: 100%;
  justify-content: center;
  cursor: pointer;
}

.ctv-toggle-field {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ctv-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.ctv-toggle-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-faint);
}

.ctv-preview-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.375rem;
  padding-bottom: 1rem;
  margin-bottom: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.ctv-preview-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.ctv-preview-avatar .icon {
  width: 26px;
  height: 26px;
}

.ctv-preview-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ctv-preview-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

.ctv-preview-code {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.ctv-preview-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.ctv-preview-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.ctv-preview-row .icon {
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.ctv-preview-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 0.875rem;
}

.ctv-summary-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  padding: 0.375rem 0;
}

.ctv-summary-stat-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
}

.ctv-summary-stat-label .icon {
  width: 14px;
  height: 14px;
  color: var(--text-faint);
}

.ctv-summary-stat-row strong {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.ctv-checklist {
  display: flex;
  flex-direction: column;
}

.ctv-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}

.ctv-checklist-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ctv-checklist-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.ctv-checklist-item.is-complete .ctv-checklist-icon {
  border-color: var(--success);
  background: var(--success);
}

.ctv-checklist-item.is-complete .ctv-checklist-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ctv-checklist-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.ctv-checklist-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.ctv-checklist-sub {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.kh-add-note-box ul {
  margin: 0;
  padding-left: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.kh-add-note-box li {
  font-size: 0.75rem;
  color: #78350f;
  line-height: 1.4;
}

.ctv-add-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

@media (max-width: 1300px) {
  .ctv-add-layout {
    grid-template-columns: 1fr;
  }
  .ctv-add-sidebar {
    position: static;
  }
}

@media (max-width: 900px) {
  .ctv-personal-row {
    grid-template-columns: 1fr;
  }
  .form-grid.ctv-grid-3,
  .form-grid.ctv-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}
.gh-thumb.tone-gray { background: linear-gradient(135deg, #a8b4c4, #5b6779); }

/* ---------- Trang "Danh mục" (danh-muc.html) ---------- */
/* Tái dùng .hr-list-stat-grid/.dk-stat-top/.kh2-stat-value-row (thẻ chỉ
   số), .dl-row-2 (khung 2 cột), .ctv-add-sidebar (cột phải sticky, đã có từ
   them-cong-tac-vien.html), .donut-row/.donut-legend (biểu đồ tròn, đã có
   từ nhan-su.html), .hr-total-breakdown (danh sách trạng thái theo chấm
   màu), .kh2-thumb (icon danh mục trong bảng), .kh-add-tip-box/.kh-add-
   modal (mẹo + popup thêm) — chỉ thêm phần riêng của trang này.  */

.hr-total-breakdown-icon.tone-red { background: var(--danger); }

.dm-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

.legend-value {
  font-weight: 700;
  flex-shrink: 0;
  text-align: right;
}

.legend-value-pct {
  font-weight: 400;
  color: var(--text-faint);
}

.dm-structure-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dm-structure-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.375rem;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.dm-structure-row:hover {
  background: var(--bg);
}

.dm-structure-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dm-structure-icon .icon {
  width: 15px;
  height: 15px;
}

.dm-structure-icon.tone-blue { background: #eaf0ff; color: var(--brand); }
.dm-structure-icon.tone-green { background: #e8f9ee; color: var(--success); }
.dm-structure-icon.tone-purple { background: #f2ecff; color: #8151e8; }
.dm-structure-icon.tone-orange { background: #fff2e6; color: #ea8c1c; }
.dm-structure-icon.tone-gray { background: #f1f5f9; color: #64748b; }

.dm-structure-label {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.dm-structure-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

.dm-structure-chevron {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* ---------- LMS: menu con SỔ XUỐNG ngay dưới mục cha (accordion) thay vì
   flyout sang bên — yêu cầu 2026-09-16 ("tôi muốn menu mục con sổ xuống
   dưới chứ không phải sang bên"). Chỉ áp dụng cho navMode="lms"
   (buildLmsNavHtml/setupLmsAccordion trong shell.js); "Nhân viên"
   (EMPLOYEE_NAV_ITEMS) vẫn giữ nguyên flyout sang bên (.emp-nav-flyout*
   phía trên), không đổi vì không có phản hồi gì về mục đó. Kích thước/màu
   phỏng theo đúng .nav-list a/.nav-list span.is-disabled đã có, chỉ tách
   riêng vì .lms-nav-trigger là <button> (không phải <a>) nên selector
   ".nav-list a" gốc không khớp được. */

.lms-nav-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  min-height: 36px;
  border-radius: 8px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lms-nav-trigger:hover {
  background: var(--sidebar-hover-bg);
}

.lms-nav-trigger.has-active-child {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}

.lms-nav-trigger.has-active-child::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 4px 4px 0;
  background: var(--sidebar-active-text);
}

.lms-nav-trigger .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--sidebar-icon);
}

.lms-nav-trigger.has-active-child .icon {
  color: var(--sidebar-active-text);
}

.lms-nav-trigger .nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lms-nav-trigger .chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

.lms-nav-trigger[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
}

.lms-nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Lùi lề 16px (không phải 28px như phác thảo ban đầu) — sidebar chỉ
     180px, thụt sâu hơn không còn đủ chỗ cho nhãn dài ("Duyệt khóa học",
     "Thời khóa biểu") dù đã rút gọn font/padding bên dưới, bị cắt "..." mất
     chữ (báo lỗi 2026-09-16). */
  padding: 2px 0 2px 16px;
}

/* Cùng lý do với .modal-overlay[hidden]/.form-field[hidden] đã sửa ở nơi
   khác — display:flex trên chính .lms-nav-submenu đè mất [hidden] mặc định
   nếu không có dòng này, khiến mục con hiện cả khi đang đóng. */
.lms-nav-submenu[hidden] {
  display: none;
}

.lms-nav-subitem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  min-height: 30px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sidebar-text);
  cursor: default;
}

a.lms-nav-subitem {
  cursor: pointer;
}

a.lms-nav-subitem:hover {
  background: var(--sidebar-hover-bg);
}

.lms-nav-subitem.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

.lms-nav-subitem .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--sidebar-icon);
}

.lms-nav-subitem.active .icon {
  color: var(--sidebar-active-text);
}

.lms-nav-subitem .nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar thu gọn (~65px, chỉ icon): danh sách mục con sổ xuống không còn
   đủ chỗ để đọc được, ẩn hẳn thay vì hiện chữ tràn cột — giống cách mega-
   menu app.js/style.css xử lý khi không đủ không gian hiển thị. */
.sidebar.collapsed .lms-nav-trigger .chevron {
  display: none;
}

.sidebar.collapsed .lms-nav-trigger {
  justify-content: center;
  padding: 10px;
}

.sidebar.collapsed .lms-nav-submenu {
  display: none;
}

.sidebar.collapsed .lms-nav-trigger:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  z-index: 50;
  pointer-events: none;
}

/* ---------- Trang "Danh sách" của "Giáo viên" (giao-vien.html) ---------- */
/* Tái dùng .hr-list-stat-grid/.dk-stat-top/.hr-stat-trend (thẻ chỉ số kiểu
   ĐƠN GIẢN — giá trị lớn rồi 1 dòng xu hướng có màu, KHÔNG có pill như
   .kh2-stat-value-row/.hr-tag ở Cộng tác viên/Danh mục — đúng theo ảnh mẫu
   trang này), .dl-row-2/.ctv-add-sidebar (khung 2 cột), .donut-row/.donut-
   legend (biểu đồ tròn), .hr-search/.hr-filter-field (bộ lọc), .kh2-thumb/
   .hr-profile-bar-* (đã có) — chỉ thêm phần riêng của trang này. */

.gv-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.gv-search-field {
  flex: 1 1 220px;
  min-width: 220px;
}

.gv-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.gv-schedule-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.gv-schedule-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 42px;
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--text-faint);
  line-height: 1.3;
}

.gv-schedule-time strong {
  font-size: 0.75rem;
  color: var(--text);
  font-weight: 700;
}

.gv-schedule-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 0.375rem;
}

.gv-schedule-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.gv-schedule-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.gv-schedule-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gv-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.gv-top-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.gv-top-rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.gv-top-rank.rank-1 {
  background: #fff2cc;
  color: #b7791f;
}

.gv-top-rank.rank-1 .icon {
  width: 14px;
  height: 14px;
}

.gv-top-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.gv-top-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gv-top-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.gv-top-score {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--success);
}

.dk-view-link.is-disabled,
.panel-link.is-disabled {
  color: var(--text-faint);
  cursor: default;
  pointer-events: none;
}

/* ---------- Trang "Nghỉ việc" (nghi-viec.html) ---------- */
/* Tái dùng .hr-report-tabs/.hr-report-toolbar/.hr-month-badge (đã có từ
   nhan-su.html), .hr-list-stat-grid/.dk-stat-top/.hr-stat-trend (thẻ chỉ
   số), .dl-row-2/.ctv-add-sidebar/.gv-filter-row/.donut-row/.donut-legend/
   .hr-upcoming-list/.hr-upcoming-item/.crm-activity-list/.crm-activity-item
   (đã có từ các trang khác) — chỉ thêm phần riêng của trang này. */

.nv-stat-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.nv-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.nv-offboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.nv-offboard-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.nv-offboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.nv-offboard-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.nv-offboard-frac {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.hr-upcoming-meta-date.tone-red {
  color: var(--danger);
}

@media (max-width: 1300px) {
  .nv-stat-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .nv-bottom-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Trang "Khen thưởng" (khen-thuong.html) ---------- */
/* Tái dùng gần hết từ nghi-viec.html/giao-vien.html (.hr-report-tabs/.hr-
   report-toolbar/.hr-month-badge/.nv-stat-grid-5/.dl-row-2/.ctv-add-main/
   .ctv-add-sidebar/.gv-filter-row/.donut-row/.hr-upcoming-list/.crm-
   activity-list/.gv-top-list/.gv-top-rank/.nv-bottom-row/.bars-chart —
   xem chú thích ở các khối tương ứng phía trên) — chỉ thêm phần số "lần
   vinh danh" riêng của "Top nhân sự nổi bật" trang này. */

.kt-top-count {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.kt-top-count span {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-faint);
}

#kt-budget-chart .bar {
  background: #93c5fd;
}

#kt-budget-chart .bar.is-current {
  background: #1e3a8a;
}

/* ---------- Trang "Kỷ luật / Sự cố" (ky-luat-su-co.html) ---------- */
/* Tái dùng gần hết từ nghi-viec.html/khen-thuong.html (.hr-report-tabs/.hr-
   report-toolbar/.hr-month-badge/.nv-stat-grid-5/.dl-row-2/.ctv-add-main/
   .ctv-add-sidebar/.gv-filter-row/.donut-row/.nv-offboard-list/.hr-
   upcoming-list/.crm-activity-list/.nv-bottom-row/.bars-chart/.bar-col —
   xem chú thích ở các khối tương ứng phía trên) — chỉ thêm cột dồn nhiều
   màu (stacked bar) cho "Mức độ theo tháng" và chú thích 3 màu ngang. */

.kl-chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.kl-chart-legend li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.kl-stack {
  width: 60%;
  max-width: 34px;
  display: flex;
  flex-direction: column;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.kl-stack-seg.tone-green { background: var(--success); }
.kl-stack-seg.tone-orange { background: #ea8c1c; }
.kl-stack-seg.tone-red { background: var(--danger); }

/* ---------- Trang "Phúc lợi" (phuc-loi.html) ---------- */
/* Tái dùng gần hết từ nghi-viec.html/khen-thuong.html/ky-luat-su-co.html
   (.hr-report-tabs/.hr-report-toolbar/.hr-month-badge/.nv-stat-grid-5/.dl-
   row-2/.ctv-add-main/.ctv-add-sidebar/.gv-filter-row/.donut-row/.crm-
   activity-list/.nv-bottom-row/.bars-chart/.bar-col/.hr-profile-bar-* —
   xem chú thích ở các khối tương ứng phía trên), .hr-chart-legend (đã có
   từ bao-cao.html) — chỉ thêm phần riêng của trang này. */

.hr-chart-legend-dash {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(to right, #9ca3af 0, #9ca3af 4px, transparent 4px, transparent 7px);
  flex-shrink: 0;
}

.pl-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fdf2f8;
  color: #db2777;
}

.pl-thumb .icon {
  width: 20px;
  height: 20px;
}

.pl-bar-value {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
}

.pl-quarter-chart {
  height: 140px;
}

.pl-upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.pl-upcoming-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.pl-upcoming-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eaf0ff;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pl-upcoming-icon .icon {
  width: 16px;
  height: 16px;
}

.pl-upcoming-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.pl-upcoming-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-upcoming-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.pl-upcoming-date {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.pl-usage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pl-usage-item {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.pl-usage-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

/* ---------- Menu xổ xuống của avatar topbar (rich, MISA-style) ---------- */
/* buildUserMenuDropdownHtml() trong shell.js — dùng chung cho cả 3 kiểu
   topbar (.user-menu-dropdown cơ bản đã có width/border/shadow ở trên, chỉ
   thêm nội dung bên trong: hồ sơ tóm tắt, thanh tiến độ hoàn thiện, tên
   công ty, danh sách mục, đăng xuất). */

.user-menu-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  padding: 0.75rem 0.625rem 0.875rem;
}

.user-menu-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff8a5c, #ee5a36);
  color: #fff;
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.user-menu-fullname {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.user-menu-email {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.user-menu-progress-box {
  background: #fdeaea;
  border-radius: 10px;
  padding: 0.75rem;
  margin: 0 0.25rem 0.5rem;
}

.user-menu-progress-label {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--success);
}

.user-menu-progress-bar {
  display: flex;
  gap: 0.1875rem;
  margin-bottom: 0.625rem;
}

.user-menu-progress-seg {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #f7c9c9;
}

.user-menu-progress-seg.is-filled {
  background: var(--success);
}

.user-menu-progress-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
}

.user-menu-progress-hint .icon {
  width: 15px;
  height: 15px;
  color: var(--danger);
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.user-menu-update-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.5rem;
  font-size: 0.8125rem;
}

.user-menu-company {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem;
  margin-bottom: 0.25rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.user-menu-company .icon {
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.user-menu-company .icon:last-child:not(:first-child) {
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.user-menu-company-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-list {
  display: flex;
  flex-direction: column;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  border-radius: 6px;
}

.user-menu-item .icon {
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* :not(:first-child) bắt buộc phải có — nếu không, 3 mục chỉ có đúng 1
   icon (Đổi mật khẩu/Thiết lập tài khoản/Thiết lập bảo mật) sẽ bị chính
   luật này khớp nhầm (icon đó vừa là first-child vừa là last-child), khiến
   icon bị co nhỏ 14px và đẩy sang phải thay vì nằm bên trái như thiết kế —
   chỉ mục "Ngôn ngữ" (2 icon: cờ + chevron) mới cần luật này. */
.user-menu-item .icon:last-child:not(:first-child) {
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.user-menu-flag {
  font-size: 0.9375rem;
  line-height: 1;
}

.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0.375rem 0.625rem;
}

/* ---------- Trang "Kho tiềm năng" (kho-tiem-nang.html) ---------- */
/* Tái dùng gần hết từ nghi-viec.html/khen-thuong.html/ky-luat-su-co.html/
   phuc-loi.html (.hr-report-tabs/.hr-report-toolbar/.hr-month-badge/.nv-
   stat-grid-5/.dl-row-2/.ctv-add-main/.ctv-add-sidebar/.gv-filter-row/
   .donut-row/.crm-activity-list/.nv-bottom-row/.gv-top-list — xem chú
   thích ở các khối tương ứng phía trên) — chỉ thêm danh sách hàng đơn giản
   (icon+nhãn+giá trị) và stepper "Lộ trình phát triển" riêng của trang
   này. */

.kt2-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kt2-row-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.kt2-row-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #eaf0ff;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kt2-row-icon .icon {
  width: 15px;
  height: 15px;
}

.kt2-row-label {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kt2-row-value {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.kt2-roadmap-person {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

.kt2-roadmap-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.kt2-roadmap-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-faint);
}

.kt2-roadmap-track {
  display: flex;
}

.kt2-roadmap-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  position: relative;
  padding-top: 14px;
}

.kt2-roadmap-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.kt2-roadmap-step.is-done:not(:last-child)::after {
  background: var(--success);
}

.kt2-roadmap-dot {
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.kt2-roadmap-dot .icon {
  width: 14px;
  height: 14px;
}

.kt2-roadmap-step.is-done .kt2-roadmap-dot {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.kt2-roadmap-step.is-active .kt2-roadmap-dot {
  border-color: var(--brand);
  border-width: 3px;
}

.kt2-roadmap-label {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.kt2-roadmap-step.is-active .kt2-roadmap-label {
  color: var(--brand);
}

.kt2-roadmap-status {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.kt2-roadmap-month {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- Trang "Đánh giá năng lực" (danh-gia-nang-luc.html) ---------- */
/* Tái dùng gần hết từ nghi-viec.html/khen-thuong.html/ky-luat-su-co.html/
   phuc-loi.html/kho-tiem-nang.html (.hr-report-tabs/.hr-report-toolbar/
   .hr-month-badge/.nv-stat-grid-5/.dl-row-2/.ctv-add-main/.ctv-add-sidebar/
   .gv-filter-row/.donut-row/.crm-activity-list/.line-chart/.hr-chart-
   legend/.bars-chart/.bar-col/.kt2-row-list/.gv-top-list — xem chú thích ở
   các khối tương ứng phía trên). Chỉ khác Nghỉ việc/Khen thưởng/Kỷ luật ở
   chỗ hàng dưới có 3 cột (thêm biểu đồ xu hướng + biểu đồ theo phòng ban)
   thay vì 2 cột như .nv-bottom-row, nên cần 1 class riêng. */

.dg-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (max-width: 1300px) {
  .dg-bottom-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Trang "Tuyển dụng" (tuyen-dung.html) ---------- */
/* Tái dùng gần hết từ các trang Thông tin nhân sự khác (.hr-report-tabs/
   .hr-report-toolbar/.hr-month-badge/.nv-stat-grid-5/.dl-row-2/.ctv-add-
   main/.ctv-add-sidebar/.gv-filter-row/.donut-row/.crm-activity-list/.dg-
   bottom-row/.kh2-thumb/.hr-profile-bar-* — xem chú thích ở các khối tương
   ứng phía trên) — chỉ thêm "Phễu tuyển dụng", "Lịch phỏng vấn sắp tới"
   (ô ngày dạng số lớn) và "Top vị trí nổi bật" (thanh ngang) riêng của
   trang này. */

.td-funnel {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.td-funnel-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.td-funnel-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.td-funnel-bar-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
}

.td-funnel-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 34px;
  border-radius: 6px;
  padding: 0 0.625rem;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0% 100%);
}

.td-funnel-value {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.td-funnel-pct {
  font-weight: 500;
  opacity: 0.85;
}

.td-interview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.td-interview-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.td-interview-date {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 0;
  border-radius: 8px;
  background: #eaf0ff;
  color: var(--brand);
}

.td-interview-date strong {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}

.td-interview-date span {
  font-size: 0.625rem;
  font-weight: 600;
}

.td-interview-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.td-interview-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-interview-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.td-interview-chevron {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.td-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.td-top-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.td-top-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.td-top-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-top-count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- Trang "Đề xuất" (de-xuat.html) ---------- */
/* Tái dùng .ctv-breadcrumb/.wk-header-row/.hr-rem-actions/.hr-list-stat-
   grid.nv-stat-grid-5/.hr-search/.hr-filter-select/.dg-bottom-row/.donut-
   row/.hr-chart-legend/.line-chart (đã có từ các trang khác) — chỉ thêm
   kiểu thẻ chỉ số riêng (icon+số cùng hàng), thanh tab trạng thái, và danh
   sách "Ý tưởng nổi bật" của trang này. */

.dx-stat-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.dx-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dx-stat-icon .icon {
  width: 20px;
  height: 20px;
}

.dx-stat-icon.tone-blue { background: #eaf0ff; color: var(--brand); }
.dx-stat-icon.tone-green { background: #e8f9ee; color: var(--success); }
.dx-stat-icon.tone-orange { background: #fff2e6; color: #ea8c1c; }
.dx-stat-icon.tone-red { background: #fdeaea; color: var(--danger); }
.dx-stat-icon.tone-pink { background: #fdf2f8; color: #db2777; }

.dx-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.dx-status-tabs {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.dx-status-tab {
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  border: none;
  background: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.dx-status-tab:hover {
  background: var(--bg);
}

.dx-status-tab.active {
  background: var(--brand);
  color: #fff;
}

.dx-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.dx-featured-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dx-featured-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.dx-featured-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fff2e6;
  color: #ea8c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dx-featured-icon .icon {
  width: 15px;
  height: 15px;
}

.dx-featured-title {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Trang "Báo cáo" (bao-cao-nhan-su.html) ---------- */
/* Tái dùng gần hết từ các trang Thông tin nhân sự khác (.hr-report-tabs/
   .hr-report-toolbar/.hr-month-badge/.nv-stat-grid-5/.dl-row-2/.ctv-add-
   main/.ctv-add-sidebar/.gv-filter-row/.donut-row/.crm-activity-list/.nv-
   bottom-row/.line-chart/.hr-chart-legend/.dx-featured-item/.dx-featured-
   icon/.dx-featured-title/.pl-usage-list — xem chú thích ở các khối tương
   ứng phía trên) — chỉ thêm phần hiển thị ngày+"Còn N ngày" bên phải mỗi
   dòng "Lịch gửi báo cáo sắp tới" (khác .hr-upcoming-item vì có avatar,
   còn ở đây icon vuông giống Sắp diễn ra của trang Phúc lợi). */

.bc-upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.bc-upcoming-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.bc-upcoming-sub {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.bc-upcoming-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
}

.bc-upcoming-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- Trang "Định biên" (dinh-bien.html) ---------- */
/* Tái dùng gần hết từ các trang Thông tin nhân sự khác (.hr-report-tabs/
   .hr-report-toolbar/.hr-month-badge/.nv-stat-grid-5/.dl-row-2/.ctv-add-
   main/.ctv-add-sidebar/.gv-filter-row/.donut-row/.crm-activity-list/.dg-
   bottom-row/.line-chart/.hr-chart-legend/.pl-usage-list/.data-table — xem
   chú thích ở các khối tương ứng phía trên) — chỉ thu nhỏ bảng "Phòng ban
   thiếu nhân sự" cho vừa cột phải hẹp (340px), khác bảng chính full-width.
   */

.db-shortage-table th,
.db-shortage-table td {
  padding: 0.5rem 0.375rem;
  font-size: 0.75rem;
}

.db-shortage-table th:first-child,
.db-shortage-table td:first-child {
  width: 24px;
}

/* ================================================================
   Trang "Kho ảnh" (kho-anh.html) — tự thiết kế (không có ảnh mẫu người
   dùng cung cấp cho trang này). Tái dùng .hr-list-stat-grid/.hr-stat-card/
   .dk-stat-top/.hr-search/.hr-filter-select/.hr-bulk-bar-style-bar/
   .pagination/.page-btn/.hr-profile-bar-wrap/.modal-overlay/.view-field
   (đã có từ các trang khác) — chỉ thêm phần riêng của trang này.
   ================================================================ */

.nv-stat-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.ka-connect-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: #fff7e0;
  border: 1px solid #f5deab;
  margin-bottom: 1.25rem;
}

.ka-connect-banner[hidden] {
  display: none;
}

.ka-connect-banner strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.ka-connect-banner p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.ka-connect-banner .btn-solid {
  flex-shrink: 0;
}

/* .btn-solid có display:flex riêng — cùng lý do cần override [hidden] đã
   gặp ở .modal-overlay/.ka-bulk-bar. */
#ka-connect-link[hidden] {
  display: none;
}

.ka-upload-progress {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.ka-upload-progress-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.ka-upload-progress-text #ka-upload-progress-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 1rem;
}

.ka-upload-progress-text #ka-upload-progress-pct {
  flex-shrink: 0;
  font-weight: 600;
}

.ka-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.ka-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ka-album-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ka-album-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  cursor: pointer;
}

.ka-album-item:hover {
  background: var(--bg);
}

.ka-album-item.active {
  background: #eaf0ff;
}

.ka-album-item.active .ka-album-name {
  color: var(--brand);
  font-weight: 600;
}

.ka-album-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ka-album-icon .icon {
  width: 16px;
  height: 16px;
}

.ka-album-icon.tone-gray { background: #f1f5f9; color: #64748b; }
.ka-album-icon.tone-blue { background: #eaf0ff; color: var(--brand); }
.ka-album-icon.tone-green { background: #e8f9ee; color: var(--success); }
.ka-album-icon.tone-orange { background: #fff2e6; color: #ea8c1c; }
.ka-album-icon.tone-purple { background: #f2ecff; color: #8151e8; }
.ka-album-icon.tone-teal { background: #e0f7f5; color: #0d9488; }
.ka-album-icon.tone-pink { background: #fdf2f8; color: #db2777; }

.ka-album-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ka-album-count {
  font-size: 0.75rem;
  color: var(--text-faint);
  font-weight: 600;
}

.ka-album-delete-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-faint);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
}

.ka-album-delete-btn .icon {
  width: 14px;
  height: 14px;
}

.ka-album-delete-btn:hover {
  background: var(--bg);
  color: var(--danger);
}

.ka-album-item:hover .ka-album-delete-btn {
  display: flex;
}

.ka-album-rename-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-faint);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
}

.ka-album-rename-btn .icon {
  width: 13px;
  height: 13px;
}

.ka-album-rename-btn:hover {
  background: var(--bg);
  color: var(--brand);
}

.ka-album-item:hover .ka-album-rename-btn {
  display: flex;
}

.ka-bulk-move-select {
  min-width: 150px;
}

.ka-preview-thumb-wrap {
  position: relative;
}

.ka-preview-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.55);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.ka-preview-nav-btn:hover {
  background: rgba(15, 23, 42, 0.75);
}

.ka-preview-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.ka-preview-nav-prev {
  left: 0.75rem;
}

.ka-preview-nav-next {
  right: 0.75rem;
}

/* .btn-outline/.icon-btn có display:flex riêng — cùng lý do cần override
   [hidden] đã gặp nhiều lần ở trên (modal-overlay/ka-bulk-bar/...). Áp dụng
   cho các nút hành động trong popup xem ảnh, ẩn/hiện tuỳ quyền. */
#ka-preview-delete-btn[hidden],
#ka-preview-rename-btn[hidden],
#ka-preview-move-btn[hidden] {
  display: none;
}

.ka-small-modal {
  max-width: 420px;
}

.ka-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  margin: 1rem 0;
}

.ka-upload-dropzone .icon {
  width: 28px;
  height: 28px;
  color: var(--text-faint);
}

.ka-upload-dropzone strong {
  color: var(--brand);
  font-weight: 600;
}

.ka-upload-dropzone.ka-drag-over {
  border-color: var(--brand);
  background: #eaf0ff;
}

.ka-upload-filelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
}

.ka-upload-file-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ka-upload-file-name {
  font-size: 0.8125rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ka-upload-file-size {
  font-size: 0.75rem;
  color: var(--text-faint);
  flex-shrink: 0;
}

.ka-upload-file-remove {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}

.ka-upload-file-remove .icon {
  width: 14px;
  height: 14px;
}

.ka-upload-file-remove:hover {
  background: var(--bg);
  color: var(--danger);
}

.ka-upload-file-progress {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

.ka-upload-file-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brand);
  transition: width 0.15s ease;
}

.ka-main.ka-drag-over {
  outline: 2px dashed var(--brand);
  outline-offset: -6px;
  background: #eaf0ff;
  border-radius: 12px;
}

.ka-main {
  min-width: 0;
}

.ka-grid-count-badge {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-faint);
}

.ka-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  background: #eaf0ff;
  font-size: 0.8125rem;
  color: var(--text);
  margin-bottom: 0.75rem;
}

/* display:flex ở trên đè mất [hidden] mặc định (author stylesheet luôn
   thắng UA stylesheet dù cùng specificity) — không có dòng này thì gán
   bar.hidden=true bằng JS không ẩn được thanh này (cùng lỗi đã gặp ở
   .modal-overlay/.form-field trước đây). */
.ka-bulk-bar[hidden] {
  display: none;
}

.ka-bulk-actions {
  display: flex;
  gap: 0.5rem;
}

.ka-select-all-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0.875rem;
  font-size: 0.8125rem;
  color: var(--brand);
  cursor: pointer;
}

.ka-select-all-link:hover {
  text-decoration: underline;
}

.ka-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.ka-photo-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--white);
}

.ka-photo-checkbox {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: flex;
}

.ka-photo-checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.ka-photo-thumb-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg);
}

.ka-photo-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ka-photo-meta {
  padding: 0.5rem 0.625rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.ka-photo-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ka-photo-sub {
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.ka-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.ka-preview-thumb {
  width: 100%;
  max-height: 420px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  background: var(--bg);
  overflow: hidden;
}

.ka-preview-thumb img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .ka-layout {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Trang "Danh mục ca" (danh-muc-ca.html, module Chấm công) — clone bố cục
   từ file HTML thật AMIS Chấm công đã lưu (_misa-ref/). Tái dùng .panel/
   .gv-filter-row/.hr-search/.hr-filter-select/.table-scroll/.data-table/
   .hr-row-actions/.hr-tag/.ka-bulk-bar (đã có từ các trang khác) — chỉ
   thêm phần căn lề cột riêng của bảng 25 cột này.
   ================================================================ */

.dmc-th-left, .dmc-td-left { text-align: left; }
.dmc-th-center, .dmc-td-center { text-align: center; }
.dmc-th-right, .dmc-td-right { text-align: right; }

.dmc-ai-btn {
  background: linear-gradient(98deg, #1482ff 8.87%, #cf11ff 100%);
  color: var(--white);
  border: none;
}

.dmc-ai-btn.is-disabled {
  opacity: 0.55;
}

/* Theo yêu cầu người dùng (2026-09-17): thanh tiêu đề bảng nền xám chữ đen
   (giống thanh tiêu đề Excel/MISA thật) thay vì chữ xám nhạt/nền trong suốt
   mặc định của .data-table th, cột giãn rộng hơn để không bị cắt chữ (bảng
   này có nhãn cột rất dài, VD "Hệ số hưởng lương ngày thường"), và thanh
   cuộn ngang HIỆN RÕ (không ẩn như .table-scroll mặc định) vì bảng quá rộng
   (27 cột), cần gợi ý rõ có thể cuộn ngang. */
.dmc-table thead th {
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  padding: 0.625rem;
  font-size: 0.75rem;
}

.dmc-table td {
  font-size: 0.875rem;
}

.dmc-table th,
.dmc-table td {
  min-width: 150px;
}

.dmc-table th:first-child,
.dmc-table td:first-child,
.dmc-table th:last-child,
.dmc-table td:last-child {
  min-width: 56px;
  width: 56px;
}

.dmc-table-scroll {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
  padding-bottom: 0.5rem;
}

.dmc-table-scroll::-webkit-scrollbar {
  display: block;
  height: 10px;
}

.dmc-table-scroll::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 999px;
}

.dmc-table-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.dmc-table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

/* ================================================================
   Trang "Thêm mới ca làm việc" (them-ca-lam-viec.html) — clone theo ảnh
   chụp màn hình người dùng gửi. Tái dùng .hr-page-header/.hr-back-btn/
   .form-grid/.form-field/.form-section-title/.hr-profile-footer/.panel/
   .tc-tab-item (đã có từ trang /cham-cong) — chỉ thêm phần riêng của
   trang này (dải giờ "Từ/Đến" và công tắc "Tách theo khung giờ làm việc").
   ================================================================ */

.tcv-time-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.tcv-time-range span {
  font-size: 0.8125rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tcv-time-range input[type="time"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  min-width: 0;
  flex: 1;
}

.tcv-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--text);
  cursor: default;
}

.tcv-toggle-row.is-disabled {
  opacity: 0.6;
}

.tcv-toggle-switch {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
}

.tcv-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
}

/* .btn-solid có display:flex riêng — cùng lý do cần override [hidden] đã
   gặp nhiều lần ở trên. Áp dụng cho nút Lưu khi ẩn do không có quyền. */
#tcv-save-btn[hidden] {
  display: none;
}