.overlay-vneid,
.overlay-personalinfo,
.overlay-leaveform,
.overlay-confirm,
.overlay-consent,
.overlay-consent-download,
.overlay-preview,
.shortcut-picker-overlay,
.chuky-preview-overlay,
.np-cancel-overlay,
.np-notice-overlay,
.ntj-role-switch-overlay,
.np-detail-zone-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
}

.overlay-vneid.show,
.overlay-personalinfo.show,
.overlay-leaveform.show,
.overlay-confirm.show,
.overlay-consent.show,
.overlay-consent-download.show,
.overlay-preview.show,
.shortcut-picker-overlay.show,
.chuky-preview-overlay.show,
.np-cancel-overlay.show,
.np-notice-overlay.show,
.ntj-role-switch-overlay.show,
.np-detail-zone-overlay.show {
  display: flex !important;
}

a {
  text-decoration: none;
}

:root {
  /* Chiều rộng cố định, dùng chung cho toàn bộ sidebar trong hệ thống (Quản lý đội nhóm,
       Nghiệp vụ, Hồ sơ của tôi...) để đảm bảo đồng bộ kích thước. */
  --sidebar-width: 265px;
  /* ===== Bảng màu chính thức theo NTJ Brand Guidelines ===== */
  /* Primary: NTJ Royal Red (Pantone 7621 C / #B12028) */
  --red-primary: #AE181D;
  /* Sắc đậm hơn của Royal Red, dùng cho gradient/hover/nền đậm */
  --red-deep: #7C161C;
  /* Sắc sáng hơn của Royal Red, dùng cho hover nút/nhấn nhá */
  --red-bright: #CC343D;
  /* Primary: NTJ Chardonnay (Pantone 148 C / #FECB8B) - màu "vàng" chính thức của thương hiệu,
       dùng cho chữ/logo/điểm nhấn trên nền đỏ đậm theo đúng hướng dẫn thương hiệu */
  --gold: #FECB8B;
  /* Secondary: Papaya Whip (#FFECDA) - nền trang ấm, đúng bảng màu phụ của brand */
  --cream: #FFECDA;
  --card-bg: #FFFFFF;
  /* Sắc nhạt của Chardonnay dùng làm nền chip/icon */
  --icon-bg: #FCE7C9;
  /* Secondary: Dark Gray (#3C3C41) - màu chữ chính theo hướng dẫn Type Color */
  --text-dark: #3C3C41;
  /* Secondary: Light Gray (#6F6F6F) - màu chữ phụ theo hướng dẫn Type Color */
  --text-muted: #6F6F6F;
  --border: #D9D9D9;
  --overlay: rgba(60, 20, 22, 0.55);
  /* ===== Màu riêng cho bộ icon (không dùng chung với nút/tiêu đề/chữ) ===== */
  /* Icon đỏ: đậm hơn --red-primary một chút để icon nổi khối, rõ nét hơn trên nền sáng */
  --icon-red: #93181F;
  /* Icon xám: đậm hơn --text-muted một chút để tăng độ tương phản/dễ nhận diện của icon outline */
  --icon-gray: #57565A;
  /* Nền của toàn hệ thống — theo màu bạn cung cấp (khớp --color-bg-white200 #FFF7EC trong file gốc) */
  --bg-page: #FFFAF2;
  /* ===== Alias token cho design mới của form "Chỉnh sửa thông tin cá nhân" ===== */
  --color-primary-red500: var(--red-primary);
  --color-primary-red700: var(--red-deep);
  --color-primary-red900: #490A0C;
  --color-primary-red50: #FBEAEA;
  --color-secondary-yellow500: var(--gold);
  --color-secondary-yellow300: #FFE3B3;
  --color-secondary-yellow100: var(--cream);
  --color-secondary-yellow900: #7A4B12;
  --color-text-white: #FFFFFF;
  --color-bg-white50: var(--card-bg);
  --color-bg-white200: var(--bg-page);
  --color-bg-white400: var(--border);
  --color-grey50: #ECECEC;
  --color-grey200: var(--text-muted);
  --color-grey400: var(--text-muted);
  --color-grey500: var(--text-dark);
  --color-secondary-yellow200: #FFE0AF;
  --color-bg-white300: #FFF6EA;
  --ntj-black: var(--text-dark);
  --font-display: 'NTJ Display Regular', sans-serif;
  --font-sans: 'NTJSans-Medium', sans-serif;
  --font-bold: 'NTJSans-Bold', sans-serif;

  /* ===== Alias bổ sung cho design "An ninh / Giám sát" (tag NGHIỆP VỤ) ===== */
  --color-primary-red600: #95171D;
  --ntj-white: #FFFFFF;
  --ntj-royal-red: var(--red-primary);
  --color-bg-grey-surface: #F4F2F2;
  --color-text-black: var(--text-dark);
  /* ===== Alias bổ sung cho khối "Hợp đồng & Thoả thuận" (Hồ sơ của tôi) ===== */
  --color-success-bg: #E6F4EA;
  --color-success-text: #1E7B34;
  --color-info-bg: rgb(228, 240, 252);
  --color-info-text: rgb(23, 73, 133);
  --color-grey300: #C9C9C9;

  /* Type scale — dùng thay cho việc gõ số px trực tiếp */
  --fs-caption: 11px;
  --fs-small: 12px;
  --fs-body-sm: 13px;
  --fs-body: 14px;
  --fs-body-lg: 15px;
  --fs-title-sm: 16px;
  --fs-title: 22px;
  --fs-display: 28px;
  /* Radius scale */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  /* Spacing scale (bội số 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  /* Shadow scale */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-raised: 0 8px 24px rgba(122, 20, 32, 0.14);
  --shadow-modal: 0 20px 60px rgba(30, 5, 10, 0.35);
  /* Alias trạng thái (status), dùng cho .badge-* mới */
  --color-pending-bg: var(--cream);
  --color-pending-text: var(--color-secondary-yellow900);
  --color-rejected-bg: var(--color-primary-red50);
  --color-rejected-text: var(--red-primary);
  --color-cancelled-bg: #ece7e2;
  --color-cancelled-text: #6f6560;
  --color-approved-bg: #e4f3e6;
  --color-approved-text: #2f8f4e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  background: #F4F2F2;
  color: var(--text-dark);
}

body.body-leaveapprove-bg {
  background: #F4F2F2;
}


h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
}

/* HEADER */
.app-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.app-header-spacer {
  /* Chiều cao được JS gán = đúng chiều cao topbar + breadcrumb-bar,
       để nội dung phía dưới không bị header cố định đè lên. */
  height: 0;
}

.topbar {
  background: var(--red-primary);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 72px;
}

.logo {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--gold);
  letter-spacing: 1px;
}

.topbar-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  flex-shrink: 0;
}

.logo-img {
  height: 32px;
  width: auto;
  display: block;
}

/* Menu điều hướng cấp 1, gộp vào topbar theo thiết kế mới */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar-nav::-webkit-scrollbar {
  display: none;
}

.topbar-nav div {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 27px 2px 25px;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  opacity: 1;
  transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}

.topbar-nav div:hover {
  opacity: 1;
  color: var(--gold);
}

.topbar-nav div.active {
  opacity: 1;
  color: var(--gold);
  border-bottom: 2.5px solid var(--gold);
}

/* Đường dẫn (breadcrumb) đặt ngay dưới topbar */
.breadcrumb-bar {
  background: #EAEAEA;
  border-bottom: 1px solid #D5D5D5;
  padding: 10px 20px 10px 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  min-height: 16px;
}

.breadcrumb-bar .bc-item {
  white-space: nowrap;
  text-transform: uppercase;
}
.breadcrumb-bar .bc-item a{
  color: var(--text-dark);
}

.breadcrumb-bar .bc-item.bc-current {
  font-family: var(--font-bold);
  color: var(--text-dark);
  font-weight: 500;
}

.breadcrumb-bar .bc-sep {
  color: #B5B5B5;
  font-size: 13px;
}

.breadcrumb-bar .bc-link {
  cursor: pointer;
}

.breadcrumb-bar .bc-link:hover {
  color: var(--text-dark);
  text-decoration: underline;
}

.search-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  background: var(--red-deep);
  flex: 0 0 auto;
  transition: background .15s ease;
}

.search-icon-btn:hover {
  background: var(--red-bright);
}

.top-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

.user-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.user-dropdown {
  position: absolute;
  top: 44px;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(30, 5, 10, 0.2);
  min-width: 180px;
  padding: 6px;
  display: none;
  z-index: 60;
}

.user-dropdown.show {
  display: block;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-dark);
  border-radius: 7px;
  cursor: pointer;
}

.user-dropdown-item:hover {
  background: #f6efe9;
}

.user-dropdown-item.logout {
  color: #c0392b;
  font-weight: 500;
}

/* Submenu "Chọn role hiển thị" — hộp nổi RIÊNG hiện sang BÊN TRÁI menu avatar, chỉ mở khi bấm
     vào mục cha (xem toggleNtjRoleSubmenu()). .user-dropdown-item-wrap là mốc định vị (relative)
     bọc mục cha + submenu; right:calc(100% + 13px) = đẩy hộp ra ngoài mép trái menu cha (bù
     padding 6px + viền 1px của .user-dropdown) và chừa khe 6px; top:-7px để dòng đầu ngang mục cha. */
.user-dropdown-item-wrap {
  position: relative;
}

.user-dropdown-item.is-open {
  background: #f6efe9;
}

/* Cặp icon mũi tên chuẩn của hệ thống — IconSmallRightArrow xoay trái (đóng) / IconSmallDown (đang mở):
     cùng cặp SVG với .hoso-chevron-wrap / .qldn-chevron-wrap (sidebar), chỉ khác màu (nền trắng)
     và đặt TRƯỚC nhãn của mục cha. Đổi icon theo class .is-open của .user-dropdown-item. */
.user-dropdown-chevron-wrap {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.user-dropdown-chevron-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  color: var(--text-dark);
  transition: opacity .2s ease;
}

/* Trạng thái đóng: dùng chính IconSmallRightArrow xoay 180° thành mũi tên TRÁI (submenu hiện sang bên trái). */
.user-dropdown-chevron-wrap .ic-right {
  opacity: 1;
  transform: rotate(180deg);
}

.user-dropdown-chevron-wrap .ic-down {
  opacity: 0;
}

.user-dropdown-item.is-open .user-dropdown-chevron-wrap .ic-right {
  opacity: 0;
}

.user-dropdown-item.is-open .user-dropdown-chevron-wrap .ic-down {
  opacity: 1;
}

.user-dropdown-role-submenu {
  display: none;
  position: absolute;
  top: -7px;
  right: calc(100% + 13px);
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(30, 5, 10, 0.2);
  z-index: 61;
}

.user-dropdown-role-submenu.show {
  display: flex;
}

.user-dropdown-role-submenu .user-dropdown-role-item {
  white-space: nowrap;
}

.user-dropdown-role-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text-dark);
  border-radius: 7px;
  cursor: pointer;
}

.user-dropdown-role-item:hover {
  background: #f6efe9;
}

.user-dropdown-role-item.active {
  color: var(--red-primary);
  font-weight: 500;
}

.user-dropdown-role-item .role-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  visibility: hidden;
}

.user-dropdown-role-item.active .role-check {
  visibility: visible;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}


/* ===== BANNER THÔNG BÁO LẦN ĐẦU ĐĂNG NHẬP ===== */
.overlay-vneid {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.overlay-vneid.show {
  display: flex;
}

.vneid-sheet {
  background: #fff;
  border-radius: 16px;
  width: 420px;
  max-width: 92vw;
  padding: 32px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 20px 60px rgba(30, 5, 10, 0.28);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: slideUp .2s ease;
}



.vneid-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 20px;
}

.vneid-title {
  color: var(--red-deep);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 130%;
  margin: 0;
}

.vneid-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.vneid-qr-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  box-shadow: inset 0 0 0 1px var(--red-deep);
}

.vneid-qr-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vneid-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  pointer-events: none;
}

.vneid-corner-tl {
  top: 16px;
  left: 16px;
  border-top: 3px solid var(--gold);
  border-left: 3px solid var(--gold);
  border-top-left-radius: 8px;
}

.vneid-corner-tr {
  top: 16px;
  right: 16px;
  border-top: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
  border-top-right-radius: 8px;
}

.vneid-corner-bl {
  bottom: 16px;
  left: 16px;
  border-bottom: 3px solid var(--gold);
  border-left: 3px solid var(--gold);
  border-bottom-left-radius: 8px;
}

.vneid-corner-br {
  bottom: 16px;
  right: 16px;
  border-bottom: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
  border-bottom-right-radius: 8px;
}

.vneid-center-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold);
  opacity: .75;
  pointer-events: none;
}

.vneid-scan-line {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--red-primary);
  box-shadow: 0 0 12px rgba(177, 32, 40, 0.9);
  animation: vneidScanLine 2.6s cubic-bezier(.2, 0, .2, 1) infinite;
  pointer-events: none;
}

@keyframes vneidScanLine {
  0% {
    top: 16px;
    opacity: .2;
  }

  50% {
    top: calc(100% - 16px);
    opacity: 1;
  }

  100% {
    top: 16px;
    opacity: .2;
  }
}

.vneid-qr-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 9px 14px;
  box-sizing: border-box;
  background: rgba(30, 5, 10, 0.72);
  color: var(--gold);
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}

.vneid-camera-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-page);
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  padding: 10px;
}

.vneid-camera-fallback svg {
  width: 30px;
  height: 30px;
}

.vneid-qr-wrap.no-camera .vneid-camera-fallback {
  display: flex;
}

.vneid-qr-wrap.no-camera .vneid-corner,
.vneid-qr-wrap.no-camera .vneid-center-icon,
.vneid-qr-wrap.no-camera .vneid-scan-line,
.vneid-qr-wrap.no-camera .vneid-qr-caption,
.vneid-qr-wrap.no-camera video {
  display: none;
}

.vneid-scan-success {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(47, 143, 78, 0.92);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  padding: 10px;
}

.vneid-scan-success svg {
  width: 34px;
  height: 34px;
  stroke: #fff;
}

.vneid-qr-wrap.scan-success .vneid-scan-success {
  display: flex;
}

.vneid-divider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

.vneid-divider-row .vneid-divider-line {
  flex-grow: 1;
  height: 1px;
  background: var(--border);
}

.vneid-divider-row span {
  font-size: 13px;
  color: var(--text-muted);
}

.vneid-upload-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  align-items: center;
}

.vneid-upload-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 44px;
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  min-width: 200px;
  background: #fff;
  color: var(--red-primary);
  box-shadow: inset 0 0 0 1px var(--red-primary);
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -.03em;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}

.vneid-upload-btn:hover {
  background: #fbeaea;
}

.vneid-upload-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.vneid-upload-hint {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--text-muted);
  text-align: center;
}

.vneid-upload-error {
  font-size: 11px;
  color: #c0392b;
  min-height: 14px;
}

.vneid-footer {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.vneid-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-page);
  text-align: left;
}

.vneid-note svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--red-primary);
}

.vneid-note span {
  font-size: 12.5px;
  line-height: 19px;
  color: var(--text-muted);
}

.vneid-help {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
  text-align: center;
}


















.badge-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Trước đây badge chấm thông báo trên icon chuông dùng chung tên class ".badge" với
     style position:absolute;top:0;right:0 (định vị theo .badge-wrap). Từ khi có
     #notifBellCount (ID riêng, độ ưu tiên cao hơn, đảm nhiệm đủ style vị trí/kích
     thước cho đúng chấm đó), style position:absolute ở đây không còn dùng cho mục đích
     ban đầu nữa — nhưng vì cùng tên class ".badge" nên nó VẪN bị áp lên MỌI badge trạng
     thái khác trong toàn hệ thống (.badge-approved/-pending/-rejected/...), đẩy chúng ra
     khỏi vị trí đúng trong bảng/thẻ (nguyên nhân gây chồng chéo nội dung ở nhiều nơi,
     ví dụ mục "Đề xuất công tác"). Đã bỏ các thuộc tính định vị/kích thước dư thừa này,
     chỉ giữ lại đây làm chỗ neo lịch sử — style thật đã chuyển hẳn sang #notifBellCount. */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-deep);
  font-weight: 500;
  font-size: 14px;
}

/* MAIN */
.main {
  max-width: 100%;
  margin: 0 auto;
  padding: 26px 32px 60px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s cubic-bezier(.4, 0, .2, 1), transform .22s cubic-bezier(.4, 0, .2, 1);
}

.main.page-fade-out {
  opacity: 0;
  transform: translateY(-6px);
}

.main.page-anim {
  opacity: 0;
  transform: translateY(10px);
}

.main.page-anim.page-anim-in {
  opacity: 1;
  transform: translateY(0);
}

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.cicon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}




.page-head h1 {
  margin: 0;
  font-size: 22px;
  color: var(--red-primary);
  letter-spacing: .3px;
}

.page-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
}

.section-title {
  color: var(--red-primary);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .4px;
  margin: 26px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

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

.grid.grid3 {
  grid-template-columns: repeat(3, 1fr);
}

.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(122, 20, 32, 0.06), 0 1px 2px rgba(122, 20, 32, 0.05);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.card:hover {
  box-shadow: 0 6px 18px rgba(122, 20, 32, 0.12);
  border-color: #e3c9c9;
  transform: translateY(-1px);
}

.card .cicon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--icon-bg);
  color: var(--icon-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.card .clabel {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.3;
}

.card .arrow {
  margin-left: auto;
  color: var(--icon-red);
  font-size: 15px;
}

.notif-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--red-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cream);
}








/* ===== QUẢN LÝ ĐỘI NHÓM: layout sidebar (theo giao diện thiết kế mới) ===== */
.qldn-shell {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Bọc riêng 1 lớp CHỈ giữ position:sticky (không có display:flex trên chính nó) —
     Chromium có lỗi khiến position:sticky bị vô hiệu hoàn toàn khi cùng 1 phần tử vừa
     sticky vừa display:flex (đã kiểm chứng: 1 div sticky thường đặt cạnh #qldnSidebar
     dính đúng, còn #qldnSidebar dù cùng CSS sticky lại không dính cho tới khi đổi
     display:flex -> block). Toàn bộ style trực quan (nền đỏ, bo góc, flex xếp các mục
     menu) vẫn giữ nguyên ở .qldn-sidebar bên trong, không đổi gì về giao diện. */
.qldn-sidebar-wrap {
  width: var(--sidebar-width);
  flex-shrink: 0;
  box-sizing: border-box;
  position: sticky;
  top: calc(var(--fixed-header-h, 112px) + 20px);
}

.qldn-sidebar {
  box-sizing: border-box;
  background: var(--color-primary-red500);
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
  height: 100%;
}

/* #nvSidebar (trang Nghiệp vụ) dùng chung class .qldn-sidebar nhưng KHÔNG có lớp bọc
     .qldn-sidebar-wrap mới ở trên (chỉ #qldnSidebar của Quản lý đội nhóm mới có) — giữ
     lại đúng các thuộc tính layout mà .qldn-sidebar-wrap đang đảm nhiệm, để trang Nghiệp
     vụ không bị ảnh hưởng gì bởi thay đổi này (ngoài phạm vi yêu cầu hiện tại). */
#nvSidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--fixed-header-h, 112px) + 20px);
  height: auto;
}

.qldn-side-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 6px;
}

.qldn-side-header span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-secondary-yellow500);
  white-space: nowrap;
}

.qldn-side-header::after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.qldn-side-item {
  position: relative;
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .28px;
  cursor: pointer;
  transition: background .28s cubic-bezier(.4, 0, .2, 1),
    color .28s cubic-bezier(.4, 0, .2, 1),
    transform .22s cubic-bezier(.4, 0, .2, 1);
  will-change: transform, background;
}

.qldn-side-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
}

.qldn-side-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .28s cubic-bezier(.4, 0, .2, 1);
}

.qldn-side-label {
  flex: 1;
  min-width: 0;
  line-height: 16px;
}

.qldn-side-item:hover {
  background: var(--cream);
  color: #000;
  transform: translateX(3px);
}

.qldn-side-item:hover .qldn-side-icon svg {
  stroke: #000;
}

.qldn-side-item:active {
  transform: scale(.97);
}

.qldn-side-item.active {
  color: #000;
  background: var(--cream);
  transform: translateX(0);
}

.qldn-side-item.active:hover {
  background: var(--cream);
}

.qldn-side-item.active .qldn-side-icon svg {
  stroke: #000;
}

.qldn-side-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 9999px;
  background: var(--color-secondary-yellow500);
  color: var(--color-primary-red900);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qldn-side-item.active .qldn-side-badge {
  background: var(--color-primary-red500);
  color: var(--color-secondary-yellow100);
}

/* ===== Nhóm mục cha có thể mở/đóng mục con (VD: "QUẢN LÝ RA/VÀO CÔNG TY" ở sidebar
     Nghiệp vụ) — mô phỏng đúng theo cơ chế mục "NỘI QUY TÁC PHONG" ở sidebar "Hồ sơ của
     tôi" (.hoso-menu-group/.hoso-menu-parent/.hoso-chevron-wrap/.hoso-submenu). Dùng
     class riêng "qldn-*" (thay vì dùng thẳng class "hoso-*") vì cấu trúc DOM icon/badge
     của 2 sidebar khác nhau, nhưng toàn bộ giá trị màu vẫn lấy đúng từ --red-primary/
     --cream (qldn-sidebar dùng --color-primary-red500, vốn chỉ là alias của --red-primary)
     nên hình ảnh hiển thị giống hệt, đồng bộ với "Hồ sơ của tôi". */
.qldn-side-group {
  margin-bottom: 2px;
}

.qldn-side-group .qldn-side-parent {
  margin-bottom: 0;
}

.qldn-side-group.open .qldn-side-parent {
  background: var(--cream);
  color: #000;
}

.qldn-side-group.open .qldn-side-parent:hover {
  background: var(--cream);
}

.qldn-side-group.open .qldn-side-parent .qldn-side-icon svg {
  stroke: #000;
}

.qldn-chevron-wrap {
  margin-left: auto;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, .85);
}

.qldn-chevron-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  transition: opacity .2s ease, color .25s ease;
}

.qldn-chevron-wrap .ic-right {
  opacity: 1;
}

.qldn-chevron-wrap .ic-down {
  opacity: 0;
}

.qldn-side-group.open .qldn-chevron-wrap .ic-right {
  opacity: 0;
}

.qldn-side-group.open .qldn-chevron-wrap .ic-down {
  opacity: 1;
}

.qldn-side-parent:hover .qldn-chevron-wrap {
  color: #000;
}

.qldn-side-group.open .qldn-chevron-wrap {
  color: #000;
}

.qldn-submenu {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: max-height .32s cubic-bezier(.4, 0, .2, 1);
}

.qldn-side-group.open .qldn-submenu {
  max-height: 500px;
}

/* Đường kẻ dọc LIÊN TỤC nối tất cả mục con lại với nhau (chạy suốt từ mục đầu đến
     giữa mục cuối), thay vì mỗi mục vẽ riêng 1 đoạn "└" rời rạc như trước — khớp với
     hình mẫu yêu cầu (đường dọc dính liền, chỉ tách nhánh ngang ở mỗi mục con). */
.qldn-submenu::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 17px;
  width: 2px;
  background: rgba(255, 255, 255, .65);
  pointer-events: none;
}

.qldn-submenu-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px 9px 47px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  border-radius: 10px;
  min-height: 0;
  transition: background .22s cubic-bezier(.4, 0, .2, 1), color .22s cubic-bezier(.4, 0, .2, 1);
}

/* Nhánh ngang cong từ đường dọc chung vào mỗi mục con (dạng "└") — không còn tự vẽ
     đường dọc riêng (border-left) nữa vì đã do .qldn-submenu::before đảm nhiệm. */
.qldn-submenu-item::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0;
  width: 13px;
  height: 17px;
  border-bottom: 2px solid rgba(255, 255, 255, .65);
  border-bottom-left-radius: 8px;
  pointer-events: none;
}

.qldn-submenu-item:hover {
  background: transparent;
  color: #fff;
  transform: none;
}

.qldn-submenu-item.active {
  background: transparent;
  color: #fff;
  font-weight: 500;
}

.qldn-submenu-item.active:hover {
  background: transparent;
  color: #fff;
}

.qldn-submenu-item .qldn-side-label {
  flex: 1;
  min-width: 0;
}

.qldn-content {
  flex: 1;
  min-width: 0;
}

.qldn-tab {
  display: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s cubic-bezier(.4, 0, .2, 1), transform .22s cubic-bezier(.4, 0, .2, 1);
}

.qldn-tab.active {
  display: block;
}

.qldn-tab.tab-fade-out {
  opacity: 0;
  transform: translateY(-6px);
}

.qldn-tab.tab-anim {
  opacity: 0;
  transform: translateY(10px);
}

.qldn-tab.tab-anim.tab-anim-in {
  opacity: 1;
  transform: translateY(0);
}

/* Bảng "An ninh / Giám sát": chiều cao cố định (JS tính đúng bằng 10 dòng dữ
     liệu), phần dư cuộn dọc riêng bên trong, không co giãn theo số lượng dòng. */
#nvTableScroll {
  overflow-y: auto;
}

/* Bo góc trên VÀ dưới của thanh tiêu đề bảng, và khoảng cách giữa 2 tab lọc
     với thanh tiêu đề (chỉ áp dụng riêng cho trang Nghiệp vụ, không ảnh hưởng
     các bảng khác dùng chung class .gt-table trong toàn app). */
#page-nghiepvu .gt-table-scroll {
  padding-top: 16px;
}

/* Yêu cầu riêng cho tag NGHIỆP VỤ: sidebar trái luôn cố định (sticky) như bên
     Quản lý đội nhóm, nhưng chiều cao của sidebar kéo dài bằng đúng chiều cao
     của khối nội dung/bảng bên phải (thay vì chỉ cao bằng số mục trong sidebar). */
#page-nghiepvu .qldn-shell,
#page-qldn .qldn-shell {
  align-items: stretch;
}

#page-nghiepvu .qldn-sidebar {
  align-self: stretch;
}

#page-qldn .qldn-sidebar-wrap {
  align-self: stretch;
}

/* ===== TRANG THÔNG TIN CÁ NHÂN (dạng popup, nằm chồng lên trang chính) ===== */
.overlay-personalinfo {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 150;
  padding: 24px;
}

.overlay-personalinfo.show {
  display: flex;
}

.pi-card {
  background: var(--card-bg);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 28px 32px 32px;
  box-shadow: 0 20px 60px rgba(30, 5, 10, 0.35);
  width: 1196px;
  max-width: 94vw;
  max-height: 92vh;
  overflow-y: auto;
  animation: slideUp .2s ease;
}

.pi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.pi-head h2 {
  margin: 0;
  color: var(--red-primary);
  font-size: 18px;
  letter-spacing: .3px;
}

.pi-head p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.btn-pi-edit {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid var(--red-primary);
  color: var(--red-primary);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.btn-pi-edit:hover {
  background: #fbeaea;
}

.btn-pi-edit svg {
  width: 20px;
  height: 20px;
  stroke: var(--icon-red);
  fill: none;
  stroke-width: 2;
}

.pi-body {
  position: relative;
  display: flex;
  gap: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 58px 24px 24px;
  box-shadow: 0 2px 8px rgba(122, 20, 32, 0.06), 0 1px 2px rgba(122, 20, 32, 0.05);
}

.pi-body>.btn-pi-edit {
  position: absolute;
  top: 18px;
  right: 20px;
}

.overlay-personalinfo .pi-body {
  padding-top: 24px;
}

/* .pi-photo-col {
  flex: 0 0 130px;
  text-align: center;
} */

.pi-photo-box {
  width: 120px;
  height: 150px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  margin: 0 auto 8px;
}

.pi-photo-box svg {
  width: 52px;
  height: 52px;
  stroke: var(--icon-gray);
  fill: none;
  stroke-width: 1.5;
}

/* .pi-photo-label {
  font-size: 11.5px;
  color: var(--text-muted);
} */
.pi-photo-label img{
  width: 100%;
  max-width: 130px;
  height: auto;
  object-fit: cover;
}
.pi-fields {
  flex: 1;
}

.pi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.pi-row.full {
  grid-template-columns: 1fr;
}

.pi-cell {
  display: flex;
  padding: 9px 4px;
  font-size: 13px;
  gap: 10px;
}

.pi-cell .pi-label {
  flex: 0 0 168px;
  font-weight: 500;
  color: var(--text-dark);
  display: flex;
  justify-content: space-between;
}

.pi-cell .pi-label::after {
  content: ':';
  font-weight: 400;
  color: var(--text-muted);
}

.pi-cell .pi-value {
  color: var(--text-dark);
  flex: 1;
}

.pi-cell .pi-value.pi-value-tight {
  flex: 0 1 auto;
}

.pi-cell .pi-value+.pi-value {
  flex: 0 0 auto;
  margin-left: 10px;
}

.pi-section-gap {
  height: 14px;
}

.pi-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.btn-pi-continue {
  background: var(--red-primary);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 13px 32px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.btn-pi-continue:hover {
  background: var(--red-deep);
}

.pi-emergency {
  margin-top: 26px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px 24px;
  box-shadow: 0 2px 8px rgba(122, 20, 32, 0.06), 0 1px 2px rgba(122, 20, 32, 0.05);
}

.pi-emergency-title {
  color: var(--red-primary);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .3px;
  margin-bottom: 12px;
}

.pi-emergency-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pi-emergency-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .3px;
  padding: 9px 10px;
  background: #f6efe6;
}

.pi-emergency-table td {
  padding: 14px 10px;
  color: var(--text-dark);
}

.pi-emergency-table tbody tr:nth-child(even) {
  background: #FAF9F8;
}

.pi-emergency-table tbody tr:hover {
  background: var(--cream);
}

.pi-emergency-table td.empty-note {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}


/* ===== Popup chọn nút tắt muốn ghim ===== */
.shortcut-picker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 34, 34, .45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.shortcut-picker-overlay.show {
  display: flex;
}

.shortcut-picker-box {
  width: 420px;
  max-width: 92vw;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  font-family: 'NTJSans-Light', sans-serif;
}

.shortcut-picker-head {
  background: var(--red-primary);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shortcut-picker-head h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: .3px;
}

.shortcut-picker-head button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s ease;
}

.shortcut-picker-head button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.shortcut-picker-note {
  padding: 12px 16px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.shortcut-picker-body {
  padding: 8px 10px 16px;
  max-height: 55vh;
  overflow-y: auto;
}

.shortcut-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.shortcut-picker-item:hover {
  background: #f6efe6;
}

.shortcut-picker-item input {
  width: 16px;
  height: 16px;
  accent-color: var(--red-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.shortcut-picker-item span {
  font-size: 13px;
  color: var(--text-dark);
}

.shortcut-picker-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.news-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s ease;
}

.news-row:hover {
  background: var(--icon-bg);
}

.news-row:last-child {
  border-bottom: none;
}

.news-row svg {
  width: 18px;
  height: 18px;
  stroke: var(--red-primary);
  fill: none;
  stroke-width: 1.6;
  flex-shrink: 0;
}

.news-row span.label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-red900);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-count {
  background: var(--icon-bg);
  color: var(--red-primary);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 32px;
  min-width: 26px;
  text-align: center;
}

.news-row .chev {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.news-row .chev svg {
  width: 14px;
  height: 14px;
  stroke: none;
  fill: var(--text-muted);
}

/* Thông báo nghỉ phép (role Quản lý cấp trung) đã chuyển sang render bên trong
     dropdown chuông (#notifBellList) — xem .notif-bell-date/.notif-bell-item.unread
     ở khối CSS "THÔNG BÁO CHUÔNG" bên dưới. Khối CSS riêng cho Bản tin nhanh (đã bỏ
     mục này) không còn cần nữa (CẬP NHẬT 2026-09-21).*/





















/* ===== FORM ĐƠN XIN NGHỈ PHÉP ===== */
.overlay-leaveform {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 150;
  padding: 24px;
  overflow-y: auto;
}

.overlay-leaveform.show {
  display: flex;
}

.leaveform-sheet {
  background: #fff;
  border: 2px solid var(--red-primary);
  border-radius: 14px;
  width: 1180px;
  max-width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 20px 60px rgba(30, 5, 10, 0.35);
  animation: slideUp .2s ease;
  position: relative;
}

.leaveform-close-x {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.leaveform-close-x:hover {
  background: #f2ece3;
  color: var(--red-primary);
}

/* Icon SVG dùng cho các nút đóng form/dialog trong toàn hệ thống — lấy đúng icon "X"
     của .pi2-close (form "Chỉnh sửa thông tin cá nhân") thay cho ký tự "✕" mặc định.
     .leaveform-close-icon chỉ để canh giữa icon, giữ nguyên vị trí/màu/hover sẵn có của
     từng nút gốc (leaveform-close-x, preview-close, np-cancel-head button, v.v.). */
.leaveform-close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.leaveform-head {
  background: var(--red-primary);
  color: #fff;
  padding: 18px 32px;
  border-radius: 12px 12px 0 0;
}

.leaveform-head h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: .4px;
}

.leaveform-sheet .leaveform-close-x {
  color: #fff;
  top: 14px;
  right: 16px;
}

.leaveform-sheet .leaveform-close-x:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}


.leaveform-title {
  color: var(--red-primary);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .3px;
  margin: 0 0 22px;
}

.leaveform-body {
  padding: 26px 32px 32px;
}

.lf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 26px;
}

.lf-field {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.pi-field-synced {
  animation: piFieldSyncFade 2.5s ease;
  border-radius: 8px;
}

@keyframes piFieldSyncFade {
  0% {
    background: rgba(212, 175, 106, 0.35);
  }

  100% {
    background: transparent;
  }
}

/* ===== Form "Chỉnh sửa thông tin cá nhân" - thiết kế mới ===== */
#piEditOverlay {
  z-index: 1000 !important;
}

#sampleCccdOverlay,
#previewOverlay {
  z-index: 10050 !important;
}

#successNoticeOverlay,
#errorNoticeOverlay {
  z-index: 10100 !important;
}

.pi2-sheet {
  background: var(--color-bg-white50);
  border-radius: 16px;
  width: 1040px;
  max-width: 96vw;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(30, 5, 10, 0.35);
  animation: slideUp .2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: auto;
  /* padding-bottom: 32px; */
}

.pi2-head {
  position: relative;
  flex-shrink: 0;
  height: 64px;
  box-sizing: border-box;
  padding: 0 24px;
  background: var(--color-primary-red500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pi2-head-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-white);
}

.pi2-close {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary-yellow300);
  cursor: pointer;
  transition: background .12s ease;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  appearance: none;
}

.pi2-close:hover {
  background: var(--color-primary-red700);
}

/* .pi2-close mặc định hover sang --color-primary-red700 (=--red-deep). Trong
     .preview-toolbar (vd popup "Hình mẫu CCCD điện tử") nền đã là --red-deep nên
     hover trùng màu, không thấy hiệu ứng — đè lại bằng lớp phủ trắng mờ cho rõ. */
.preview-toolbar .pi2-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.pi2-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pi2-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pi2-section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-red500);
  white-space: nowrap;
}

.pi2-section-title::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--color-grey50);
}

.pi2-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

.pi2-foot {
  flex-shrink: 0;
  padding: 16px 24px;
  box-sizing: border-box;
  border-top: 1px solid var(--color-grey50);
  background: var(--color-bg-white50);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.pi2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  width: 132px;
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--color-primary-red500);
  color: var(--color-primary-red500);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.2, 0, 0.2, 1);
  line-height: 1.2;
  overflow: hidden;
}

.pi2-chip:hover {
  background: #fbeaea;
}

.pi2-chip svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.pi2-chip input[type=file] {
  display: none;
}

.pi2-chip .lf-upload-icon-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-red500);
  white-space: nowrap;
  flex-shrink: 0;
}

.pi2-chip.has-file .lf-upload-icon-text {
  display: none;
}

.pi2-chip .lf-filetype-icon {
  display: none;
  line-height: 0;
  flex-shrink: 0;
}

.pi2-chip.has-file .lf-filetype-icon {
  display: inline-flex;
  align-items: center;
}

.pi2-chip .lf-upload-filename {
  margin-left: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: none;
}

.pi-cccd-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-grey200);
  cursor: pointer;
}

.pi-cccd-info-icon:hover {
  color: var(--red-primary);
}

/* Tệp chữ ký (form CHỈNH SỬA THÔNG TIN CÁ NHÂN): hiển thị thumbnail ảnh chữ ký mẫu
     hiện có + icon bút chỉnh sửa cạnh bên, thay vì kiểu "chip chọn tệp" chung như các
     mục đính kèm khác — vì đây là ảnh, xem trước trực quan hữu ích hơn tên tệp. */
.chuky-thumb-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chuky-thumb {
  width: 96px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  cursor: pointer;
  padding: 4px;
  box-sizing: border-box;
}

.chuky-edit-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-primary-red500);
  flex-shrink: 0;
  padding: 0;
}

.chuky-edit-btn:hover {
  background: #fbeaea;
}

.chuky-edit-btn svg {
  width: 15px;
  height: 15px;
}

/* .pi2-body input:not([readonly]):focus,
.pi2-body select:focus 
{
  outline: none;
  -webkit-appearance: none;
  box-shadow: inset 0 0 0 1px var(--color-bg-white400), 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}

.pi2-body input[readonly]:focus {
  outline: none;
  -webkit-appearance: none;
  box-shadow: inset 0 0 0 1px var(--color-grey50) !important;
} */

/* Override rule .lf-field label (dùng cho form nghỉ phép khác) đang có specificity cao hơn
     và đè nhầm màu nền kem lên nút "Chọn tệp" trong form Chỉnh sửa thông tin cá nhân */
.lf-field label.pi2-chip {
  background: #fff;
  color: var(--color-primary-red500);
  font-weight: 500;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  width: 132px;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 1.2;
}

.lf-field label.pi2-chip:hover {
  background: #fbeaea;
}

.lf-multi-upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.lf-multi-upload .lf-multi-row {
  position: relative;
}

.lf-multi-remove {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-grey200);
  cursor: pointer;
}

.lf-multi-row.has-file .lf-multi-remove {
  display: inline-flex;
}

.lf-multi-remove:hover {
  color: var(--color-primary-red500);
}

.pi-doc-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-primary-red500, #c0392b);
  border-radius: 6px;
  transition: all 0.15s ease;
  flex-shrink: 0;
  text-decoration: none;
}

.pi-doc-view-btn:hover {
  background: #fbeaea;
  color: var(--color-primary-red700, #962d22);
}

.pi-doc-del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 16px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.pi-doc-del-btn:hover {
  color: #ef4444;
  background: #fee2e2;
}

.lf-multi-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px !important;
  height: 19px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: opacity .15s ease;
}

.lf-multi-plus:hover {
  opacity: .65;
}

.lf-multi-plus svg {
  width: 19px;
  height: 19px;
}

.lf-multi-plus input[type=file] {
  display: none;
}

.pi-sync-toast {
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translate(-50%, -16px);
  background: var(--text-dark);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  max-width: 420px;
  text-align: center;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.pi-sync-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lf-field label {
  background: var(--cream);
  color: var(--red-primary);
  font-weight: 500;
  font-size: 12.5px;
  padding: 11px 12px;
  border-radius: 7px;
  width: 190px;
  flex-shrink: 0;
  line-height: 1.3;
}

.lf-field input[type=text],
.lf-field input[type=date],
.lf-field input[type=time],
.lf-field select,
.lf-field textarea {
  flex: 1;
  min-width: 0;
  /* border: 1px solid var(--border); */
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-dark);
  background: #fff;
}

.lf-field input[disabled],
.lf-field input[readonly],
.lf-field select[disabled] {
  background: #FFFAF2;
  color: var(--text-muted);
}

.lf-field select[disabled] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.lf-field textarea {
  resize: vertical;
  min-height: 110px;
  align-self: stretch;
}

.lf-field.lf-field-upload {
  align-items: flex-start;
}

.lf-field-content {
  flex: 1;
  min-width: 0;
}

.lf-field-content input[type=text],
.lf-field-content select {
  width: 100%;
}









.lf-upload-filename {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}




.lf-daterow {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lf-daterow div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lf-daterow span {
  font-size: 12.5px;
  color: var(--text-dark);
  font-weight: 500;
  width: 62px;
  flex-shrink: 0;
}

.lf-daterow input {
  flex: 1;
}

.lf-span2 {
  grid-column: span 2;
}

.lf-datetime-row {
  flex: 1;
  display: flex;
  gap: 10px;
}

.lf-label-bordered {
  border: 1.5px solid var(--red-primary) !important;
}

.lf-plain-label {
  width: 190px;
  flex-shrink: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-dark);
  padding: 11px 0;
  text-align: right;
}

.dt-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.dt-input-wrap.date {
  flex: 2;
}

.dt-input-wrap.time {
  flex: 1;
}

.dt-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--red-primary) !important;
  border-radius: 8px !important;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-dark);
  background: #fff;
  height: 38px;
}

.dt-input-wrap.date input {
  padding-right: 40px;
}

.dt-input-wrap.time input {
  padding-right: 30px;
}

/* Ẩn icon native của browser cho input date/time */
.dt-input-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.dt-input-wrap input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.dt-icon-box {
  flex-shrink: 0;
  margin-left: -30px;
  height: 30px;
  width: 26px;
  background: var(--red-primary);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.dt-icon-box svg {
  display: block;
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dt-icon-box.clock {
  flex-shrink: 0;
  margin-left: -30px;
  height: 30px;
  width: 26px;
  background: var(--red-primary);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.dt-icon-box.clock svg {
  display: block;
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.lf-actions {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.btn-luu {
  background: var(--red-primary);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 13px 32px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-luu:hover {
  background: var(--red-deep);
}


/* ===== POPUP XÁC NHẬN SỐ NGÀY NGHỈ CÒN LẠI ===== */
.overlay-confirm {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 160;
}

.overlay-confirm.show {
  display: flex;
}






/* ===== Thu gọn thẻ nội dung + nút trong popup "Bản ghi đồng ý" / "Thoả thuận
     sử dụng hình ảnh" (chỉ áp dụng trong #hdDialogOverlay, không đụng tới popup
     "Chi tiết quyết định" đang dùng chung .hd-btn-tertiary) — additive, giữ
     nguyên các class gốc phía trên. ===== */
#hdDialogOverlay .hd-version-row {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--border);
}

#hdDialogOverlay .hd-consent-block {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--border);
}

#hdDialogOverlay .hd-btn-tertiary {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

#hdDialogOverlay .hd-btn-small {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.btn-huy,
.btn-dongy {
  font-family: inherit;
  border-radius: 9px;
  padding: 12px 22px;
  height: 44px;
  box-sizing: border-box;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .3px;
}

.btn-huy {
  background: var(--red-primary);
  color: #fff;
  border: 1px solid var(--red-primary);
}

.btn-huy:hover {
  background: var(--red-deep);
}

.btn-dongy {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid var(--border);
}

.btn-dongy:hover {
  background: #f6efe9;
}

.btn-dongy:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: #f2eae5;
}

.btn-dongy:disabled:hover {
  background: #f2eae5;
}

/* MODAL */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn .18s ease;
}

.overlay.show {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* ===== POPUP THỎA THUẬN THU THẬP & XỬ LÝ DỮ LIỆU CÁ NHÂN ===== */
.overlay-consent {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 170;
  padding: 24px;
}

.overlay-consent.show {
  display: flex;
}

.overlay-consent-download {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 180;
  padding: 24px;
}

.overlay-consent-download.show {
  display: flex;
}

.consent-download-sheet {
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 16px;
  width: 420px;
  max-width: 92vw;
  padding: 32px 32px 26px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(30, 5, 10, 0.35);
  animation: slideUp .2s ease;
}

.consent-download-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 14px;
}

.consent-download-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 26px;
}

.consent-download-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.consent-sheet {
  background: #fff;
  border: none;
  border-radius: 16px;
  width: 820px;
  max-width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  padding: 32px 40px;
  box-shadow: 0 20px 60px rgba(30, 5, 10, 0.35);
  animation: slideUp .2s ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@keyframes slideUpConsent {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-60px);
  }
}

.overlay-consent.hiding .consent-sheet {
  animation: slideUpConsent .35s ease forwards;
}

.consent-sheet h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 130%;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  color: var(--red-primary);
  margin: 0;
}

.consent-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.consent-sheet p {
  font-size: 14px;
  line-height: 22px;
  color: var(--text-dark);
  margin: 0;
  text-align: justify;
}

.consent-sheet p.strong {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--red-primary);
}

.consent-sheet a {
  color: var(--red-primary);
  text-decoration: underline;
}

.consent-hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 0;
}

.consent-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.consent-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-dark);
  cursor: pointer;
}

.consent-check-row input[type="checkbox"] {
  margin: 1px 0 0;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--red-primary);
  cursor: pointer;
}

.consent-check-row span {
  text-align: left;
}

.consent-required {
  color: var(--red-primary);
  font-weight: 500;
}

.consent-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 0;
  padding-top: 4px;
}

.consent-actions .btn-huy {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid var(--border);
}

.consent-actions .btn-huy:hover {
  background: #f6efe9;
}

.consent-actions .btn-dongy {
  background: var(--red-primary);
  color: #fff;
  border: 1px solid var(--red-primary);
}

.consent-actions .btn-dongy:hover {
  background: var(--red-deep);
}

.consent-actions .btn-dongy:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--red-primary);
  color: #fff;
  border: 1px solid var(--red-primary);
}

.consent-actions .btn-dongy:disabled:hover {
  background: var(--red-primary);
}

.modal {
  background: #fff;
  width: 720px;
  max-width: 92vw;
  max-height: 84vh;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(30, 5, 10, 0.35);
  display: flex;
  flex-direction: column;
  animation: slideUp .2s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(14px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}






.leave-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}

.leave-row:last-child {
  border-bottom: none;
}






.leave-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}





.btn-approve,
.btn-reject,
.btn-preview {
  border: none;
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.btn-approve {
  background: var(--red-primary);
  color: #fff;
}

.btn-approve:hover {
  background: var(--red-deep);
}

.btn-reject {
  background: #f2eae5;
  color: var(--text-muted);
}

.btn-reject:hover {
  background: #e6dcd5;
}

.btn-preview {
  background: #fff;
  color: var(--red-primary);
  border: 1px solid var(--red-primary) !important;
}

.btn-preview:hover {
  background: #fbeaea;
}
.icon-icomoon{
  font-family: icomoon !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  transition: transform ease-in-out 0.3s;
  position: absolute;
  top: 35%;
  right: 8px;
}

.pi-honnhan-icon .icon-icomoon,.st-79 .icon-icomoon{
  transition: transform .15s;
}

#piHonNhan:focus+.pi-honnhan-icon .icon-icomoon,.lf-field .st-78:focus+.st-79 .icon-icomoon {
  transform: rotate(90deg);
}
.lf-field .icon-icomoon{
  top: 25%;
}
.seui-searchbox-input:focus{
  border: none;
}
/* PREVIEW MODAL - PDF FORM STYLE */
.overlay-preview {
  position: fixed;
  inset: 0;
  background: rgba(20, 8, 8, 0.6);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  padding: 36px 20px;
}

.overlay-preview.show {
  display: flex;
}

.preview-sheet {
  background: #fff;
  width: 760px;
  max-width: 94vw;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(30, 5, 10, 0.4);
  font-family: 'Times New Roman', Georgia, serif;
  color: #1a1a1a;
  position: relative;
  animation: slideUp .18s ease;
}

.preview-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--red-deep);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px 6px 0 0;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.preview-toolbar span {
  color: #f0d9d9;
  font-size: 12px;
}

.preview-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.preview-doc {
  padding: 30px 44px 40px;
}

.preview-doc .doc-top {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 6px;
  min-height: 44px;
}

.preview-doc .doc-code {
  border: 1px solid #444;
  font-size: 11px;
  padding: 6px 10px;
  line-height: 1.5;
}

.preview-doc h1 {
  text-align: center;
  font-size: 22px;
  letter-spacing: 1px;
  margin: 6px 0 20px;
}

.preview-doc .doc-center-logo {
  text-align: center;
  margin: 2px 0 10px;
  position: relative;
  top: -76px;
}

.preview-doc .doc-center-logo img {
  height: 40px;
  width: auto;
}

.preview-doc .field-line {
  font-size: 13.5px;
  margin: 9px 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.preview-doc .field-row {
  display: flex;
  margin: 9px 0;
  font-size: 13.5px;
}

.preview-doc .fcol {
  flex: 1 1 50%;
  padding-right: 14px;
  box-sizing: border-box;
}

.preview-doc .field-line b {
  font-weight: 400;
}

.preview-doc .fval {
  padding: 0 4px 1px;
  min-width: 40px;
  display: inline-block;
}

.preview-doc .diem-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 16px;
  margin: 10px 0 16px;
  font-size: 13px;
}

.preview-doc .diem-list label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.preview-doc .chk {
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.preview-doc .chk.checked {
  color: #000;
  font-weight: 500;
  font-size: 15px;
}

.preview-doc .reason-box {
  font-size: 13.5px;
  margin: 14px 0;
  line-height: 1.7;
}

.preview-doc .reason-text {}

.preview-doc .closing {
  font-size: 13px;
  margin: 18px 0 10px;
  line-height: 1.6;
}

.preview-doc .sign-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.preview-doc .sign-table th,
.preview-doc .sign-table td {
  border: 1px solid #666;
  font-size: 12px;
  padding: 8px;
  text-align: center;
  height: 70px;
  vertical-align: top;
}

.preview-doc .sign-table td {
  vertical-align: bottom;
  font-weight: 400;
  padding-bottom: 10px;
  position: relative;
}

.preview-doc .sign-table th {
  font-weight: 500;
  height: auto;
  background: #faf5f0;
}

.preview-doc .sign-table .italic {
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
}

.preview-doc .sign-img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.preview-doc .sign-img {
  max-height: 38px;
  max-width: 120px;
  object-fit: contain;
}

/* Ô "Ký, ghi rõ họ tên" của Người nhận bàn giao (field-row, không nằm trong
     .sign-table) hẹp hơn nhiều so với ô ký trong bảng chữ ký cuối đơn — thu nhỏ lại
     cho vừa vặn, tránh ảnh chữ ký tràn ra ngoài khung .fval. */
.preview-doc .field-row .sign-img-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 4px;
}

.preview-doc .field-row .sign-img {
  max-height: 38px;
  max-width: 120px;
  object-fit: contain;
}

/* "Ký lúc: ..." đặt ở góc trên-phải của Ô (không phải của khối chữ ký/tên bên trong)
     — neo trực tiếp vào .sign-table td (đã position:relative ở trên) thay vì 1 wrapper
     bọc ngoài, để vị trí LUÔN cố định ở góc trên-phải bất kể ô đó có ảnh chữ ký (Người
     viết đơn) hay chỉ có tên chữ (Quản lý trực tiếp/gián tiếp) — trước đây neo theo
     wrapper riêng của từng ô nên bị lệch vì 2 loại ô có chiều cao nội dung khác nhau. */
.preview-doc .sign-table .sign-time-corner {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  line-height: 1.35;
  color: #555;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.preview-doc .gate-blue-table th {
  background: #dce6f1;
}

.preview-doc .gate-type-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}

.preview-doc .gate-type-table td {
  border: 1px solid #666;
  font-size: 13px;
  padding: 12px 14px;
  vertical-align: middle;
}

.preview-doc .gate-type-table td:first-child {
  width: 60%;
}

.preview-doc .gate-type-table label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mẫu "ĐỀ XUẤT đi công tác" (BM.055.PQT.025) — riêng mẫu này dùng font chữ có chân
     (Times New Roman) đúng như file mẫu gốc, khác với font mặc định sans-serif của
     các mẫu PDF khác (đơn nghỉ phép/giấy ra vào công ty) nên tách riêng 1 class
     .dxct-proposal-doc thay vì sửa chung .preview-doc, tránh ảnh hưởng 2 mẫu kia.
     LƯU Ý: dùng thẳng 'Times New Roman' chứ KHÔNG dùng var(--font-display) — font
     NTJDisplay (đứng đầu trong biến đó) bị thiếu bộ dấu tiếng Việt, làm sai/mất dấu
     câu chữ (vd "Kính gửi" thành "Kinh gưi", "ngày 14" thành "ngày l4"). */
.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) {
  font-family: 'Times New Roman', Times, serif;
  font-size: 15.5px;
}

/* Header riêng cho mẫu này: logo + khung "Số hiệu" nằm CÙNG 1 hàng flex, không
     dùng lại .doc-top/.doc-center-logo (kỹ thuật kéo lệch position:relative;top:-76px
     của 2 mẫu kia được canh cho layout không có dòng "Số/Ngày ký" ở giữa — nếu tái sử
     dụng sẽ để lại khoảng trống rất lớn phía trên tiêu đề "ĐỀ XUẤT"). */
.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .dxct-doc-header {
  position: relative;
  text-align: center;
  margin-bottom: 26px;
  min-height: 50px;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .dxct-doc-header .doc-code {
  position: absolute;
  top: 0;
  right: 0;
  text-align: left;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .dxct-doc-header-logo img {
  height: 42px;
  width: auto;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) h1 {
  font-size: 26px;
  letter-spacing: 1.5px;
  margin: 8px 0 4px;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .doc-subtitle {
  font-size: 16px;
  margin: 0 0 18px;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .doc-number-date-row {
  font-size: 15.5px;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .field-line {
  font-size: 15.5px;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .dxct-doc-table {
  font-size: 15.5px;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .dxct-expense-row {
  font-size: 15.5px;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .closing {
  font-size: 15.5px;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .dxct-sign-col {
  font-size: 15px;
}

.preview-doc:is(.dxct-proposal-doc, .qt-decision-doc) .field-line b {
  font-weight: 500;
}

/* Tài liệu "QUYẾT ĐỊNH" (tab "Quá trình công tác") — thay cho popup "Chi tiết quyết
     định" cũ (đã bỏ theo yêu cầu): bấm icon mắt sẽ xuất PDF thật và mở ở tab mới,
     dùng chung cơ chế html2canvas + jsPDF + font Times New Roman với mẫu "Đề xuất đi
     công tác" (qua :is(.dxct-proposal-doc, .qt-decision-doc) ở trên), chỉ khác cấu
     trúc nội dung (không có khung "Số hiệu biểu mẫu" vì đây là văn bản quyết định,
     không phải biểu mẫu BM.xxx). */
.preview-doc .qt-doc-top-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 8px;
}

.preview-doc .qt-doc-company {
  flex: 1;
  text-align: center;
}

.preview-doc .qt-doc-company-no {
  display: block;
  margin-top: 4px;
}

.preview-doc .qt-doc-motto {
  flex: 1;
  text-align: center;
}

.preview-doc .qt-doc-motto-line {
  width: 130px;
  height: 1px;
  background: #000;
  margin: 2px auto 6px;
}

.preview-doc .qt-doc-article {
  margin: 8px 0;
  text-align: justify;
}

.preview-doc .qt-doc-receive-col {
  font-size: 13px;
  text-align: left;
}

.preview-doc .qt-doc-receive-col div {
  margin-top: 2px;
}

.hd-eye-btn.qt-eye-loading {
  opacity: .5;
  cursor: wait;
  pointer-events: none;
}

.preview-doc .doc-subtitle {
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  margin: -14px 0 16px;
}

.preview-doc .doc-number-date-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  margin: 2px 0 16px;
}

.preview-doc .dxct-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 16px;
  font-size: 13px;
}

.preview-doc .dxct-doc-table td {
  border: 1px solid #444;
  padding: 8px 10px;
  vertical-align: top;
  line-height: 1.6;
}

.preview-doc .dxct-doc-table td.lbl {
  font-weight: 500;
  width: 34%;
}

.preview-doc .dxct-expense-row {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
  margin: 4px 0 18px;
}

.preview-doc .dxct-expense-row .lbl {
  font-weight: 500;
  flex-shrink: 0;
}

.preview-doc .dxct-expense-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-doc .dxct-expense-options label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 110px;
}

/* Bảng chữ ký "NGƯỜI ĐỀ XUẤT / PHÊ DUYỆT" của mẫu Đề xuất công tác — KHÔNG có viền
     (khác .sign-table của đơn nghỉ phép/giấy ra vào công ty), chỉ 2 cột canh giữa với
     1 gạch chấm chờ ký ở đáy mỗi cột, đúng theo mẫu giấy gốc BM.055.PQT.025. */
.preview-doc .dxct-sign-row {
  display: flex;
  margin-top: 26px;
  text-align: center;
}

.preview-doc .dxct-sign-col {
  flex: 1;
  font-size: 13px;
}

.preview-doc .dxct-sign-title {
  font-weight: 500;
}

.preview-doc .dxct-sign-space {
  height: 56px;
}

/* Bố cục RIÊNG cho bảng "NGƯỜI ĐỀ XUẤT / PHÊ DUYỆT" — tách khỏi .dxct-sign-space
     mặc định ở trên (mẫu QUYẾT ĐỊNH vẫn căn giữa như cũ) bằng modifier
     .dxct-sign-row-proposal, dùng dxctSignBlockHtml() riêng (xem JS), KHÔNG gọi lại
     signCellHtml() dùng cho Đơn xin nghỉ phép/Giấy ra vào công ty.
     .dxct-sign-anchor là khối inline-block chỉ bọc vừa ẢNH CHỮ KÝ (không bọc "Ký
     lúc") nên khi canh giữa theo text-align:center của cột, vị trí chữ ký được tính
     đúng theo chiều rộng của chính nó — "Ký lúc" (.sign-time-corner) neo tuyệt đối
     (position:absolute) ra bên phải của khối đó nên KHÔNG cộng thêm vào chiều rộng
     và KHÔNG làm lệch vị trí canh giữa của chữ ký. Họ tên nằm ngoài anchor, xuống
     dòng riêng, vẫn canh giữa cột như trước. */
.preview-doc .dxct-sign-row-proposal {
  text-align: center;
}

.preview-doc .dxct-sign-row-proposal .dxct-sign-space {
  height: auto;
  min-height: 40px;
}

.preview-doc .dxct-sign-row-proposal .dxct-sign-anchor {
  position: relative;
  display: inline-block;
  min-height: 38px;
}

.preview-doc .dxct-sign-row-proposal .dxct-sign-anchor .sign-img {
  max-height: 38px;
  max-width: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.preview-doc .dxct-sign-row-proposal .sign-time-corner {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 10px;
  font-size: 10px;
  line-height: 1.35;
  color: #555;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.preview-doc .dxct-sign-row-proposal .dxct-sign-name {
  margin-top: 6px;
}

.preview-doc .dxct-sign-line {
  border-top: 1px dotted #555;
  width: 70%;
  margin: 0 auto;
}




.preview-doc .gate-confirm-block {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.preview-doc .gate-confirm-content {
  text-align: left;
  font-size: 12px;
  color: #333;
}

.preview-doc .gate-confirm-info {
  line-height: 1.6;
}

.preview-doc .gate-confirm-name {
  margin-top: 34px;
  padding-top: 6px;
  text-align: center;
  font-weight: 400;
}

.preview-doc .foot-company {
  text-align: center;
  font-size: 10.5px;
  color: #666;
  margin-top: 22px;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

/* Chỉ dùng cho khối "sandbox" ẩn ngoài màn hình khi xuất file PDF (đơn nghỉ phép +
     giấy ra/vào công ty) — KHÔNG áp dụng cho popup "Xem trước" trên màn hình (vẫn giữ
     .foot-company đi ngay sau nội dung như cũ ở đó). Ép khối sandbox cao tối thiểu
     bằng 1 trang A4 (297mm quy đổi ~1123px ở cùng tỉ lệ 794px = 210mm/96dpi đã dùng
     khi tạo sandbox) rồi đẩy foot-company xuống sát đáy bằng margin-top:auto, để khi
     chụp ảnh (html2canvas) đưa vào PDF thì footer luôn nằm ở cuối trang thay vì bám
     ngay sau nội dung khi nội dung ngắn hơn 1 trang. */
.pdf-export-page {
  display: flex;
  flex-direction: column;
  min-height: 1123px;
  box-sizing: border-box;
}

.pdf-export-page .foot-company {
  margin-top: auto;
}

.leave-row.done {
  opacity: .45;
}

.leave-row.done .leave-actions {
  visibility: hidden;
}

.status-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
}

.status-tag.approved {
  background: #e4f3e6;
  color: #2f8f4e;
}

.status-tag.rejected {
  background: #fbe6e6;
  color: #c0392b;
}





.gt-page-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(122, 20, 32, 0.06), 0 1px 2px rgba(122, 20, 32, 0.05);
  overflow: hidden;
}


.gt-header {
  padding: 20px 24px 0;
  display: flex;
  flex-direction: column;
}

.gt-header-left h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 26px;
  color: var(--text-dark);
  font-weight: 500;
}

.gt-toolbar-row {
  padding: 14px 24px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.gt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gt-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  position: relative;
  transition: transform .15s ease;
}

.gt-icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #c8202f;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 0;
}

.gt-icon-btn:hover {
  transform: translateY(-1px);
}

.gt-icon-btn:hover::before {
  opacity: 0;
  transform: scale(.7);
}



.gt-icon-btn img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 1;
  transition: opacity .18s ease;
}

.gt-icon-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
}



.gt-table-scroll {
  padding: 0 24px 24px;
  overflow-x: auto;
}

/* Các bảng trong "Quản lý đội nhóm" (Duyệt đơn nghỉ phép, Duyệt giấy ra/vào công ty...):
     giữ kích thước cố định, không co giãn theo số lượng dữ liệu (ít/nhiều/trống)
     - cuộn dọc bên trong khi cần. */
.gt-table-scroll-fixed {
  height: 560px;
  overflow-y: auto;
}

/* Bảng "Nhân viên của tôi" và bảng con "Nghỉ phép" bên dưới: khi CÓ dữ liệu, chỉ
     hiển thị khoảng 5 dòng trong khung nhìn (dù phân trang vẫn là 10 dòng/trang) -
     cuộn dọc bên trong khi trang đó có nhiều hơn 5 dòng. */
.nv-team-table-scroll {
  height: 300px;
  overflow-y: auto;
}

/* Khi CHƯA có dữ liệu (chỉ có 1 dòng thông báo) - áp dụng riêng cho bảng "Nghỉ
     phép" - khung hiển thị tự co lại vừa khít nội dung, không giữ khoảng trống
     300px thừa. */
.nv-team-table-scroll.nv-empty {
  height: auto;
  overflow-y: visible;
}

.gt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 1500px;
}

.gt-table thead th {
  position: sticky;
  top: 0;
  background: var(--cream);
  color: var(--text-dark);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-align: left;
  padding: 16px 10px;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--border);
  z-index: 2;
}

/* Bo góc trên VÀ dưới của ô đầu/cuối trong hàng tiêu đề — áp dụng cho mọi
     bảng dùng chung class .gt-table trong toàn app (Duyệt đơn nghỉ phép,
     Duyệt giấy ra/vào công ty, An ninh/Giám sát...). */
.gt-table thead th:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.gt-table thead th:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.gt-table tbody td {
  padding: 12px;
  color: var(--text-dark);
  vertical-align: top;
  white-space: nowrap;
}

.gt-table tbody td.wrap {
  white-space: normal;
  min-width: 180px;
}

/* Bảng "Duyệt đăng ký nghỉ phép" chỉ còn 8 cột sau khi gộp "Chi tiết" — thu gọn lại
     min-width/padding riêng cho bảng này (không đổi các bảng .gt-table khác vẫn còn
     nhiều cột như "Duyệt đăng ký ra/vào công ty") để vừa khung nhìn, không cần cuộn
     ngang trên màn hình thông thường. */
.gt-table-compact {
  min-width: 0;
}

.gt-table-compact thead th {
  padding: 12px 8px;
  font-size: 11px;
}

.gt-table-compact tbody td {
  padding: 10px 8px;
  font-size: 12px;
}

.gt-table-compact tbody td.wrap {
  min-width: 140px;
}

/* Sọc dòng sáng-tối xen kẽ, giống bảng "Quản lý ra/vào công ty" (Nghiệp vụ) —
     áp dụng chung cho mọi bảng dùng class .gt-table trong toàn app. */
.gt-table tbody tr:nth-child(even) {
  background: #FAF9F8;
}

.gt-table tbody tr:hover {
  background: var(--cream);
}



.gt-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 32px;
}

.gt-status-badge.approved {
  background: #e4f3e6;
  color: #2f8f4e;
}

.gt-status-badge.rejected {
  background: var(--color-primary-red50);
  color: var(--red-primary);
}

.gt-status-badge.pending {
  background: var(--cream);
  color: var(--color-secondary-yellow900);
}

.gt-status-badge.cancelled {
  background: #ece7e2;
  color: #6f6560;
}

.gt-row-actions {
  display: grid;
  grid-template-columns: 36px 36px 36px;
  gap: 6px;
  justify-content: center;
}

.gt-icon-slot-empty {
  width: 36px;
  height: 36px;
}

.gt-row-actions button {
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.gt-row-actions .gt-btn-preview {
  background: transparent;
  color: var(--icon-gray);
  border: none;
  transition: color .15s ease;
}

.gt-row-actions .gt-btn-preview:hover {
  color: var(--red-primary);
}

.gt-btn-preview .icon2 {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.gt-btn-preview .icon2 svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  transition: opacity .15s ease;
  fill: currentColor;
  stroke: none;
}

.gt-btn-preview .icon2 .ic-o {
  opacity: 1;
}

.gt-btn-preview .icon2 .ic-f {
  opacity: 0;
}

.gt-btn-preview:hover .icon2 .ic-o,
.gt-btn-preview:active .icon2 .ic-o {
  opacity: 0;
}

.gt-btn-preview:hover .icon2 .ic-f,
.gt-btn-preview:active .icon2 .ic-f {
  opacity: 1;
}

.gt-row-actions .gt-btn-approve {
  background: transparent;
  color: rgb(23, 120, 63);
}

.gt-btn-approve .icon2 {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.gt-btn-approve .icon2 svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  transition: opacity .15s ease;
  fill: currentColor;
  stroke: none;
}

.gt-btn-approve .icon2 .ic-o {
  opacity: 1;
}

.gt-btn-approve .icon2 .ic-f {
  opacity: 0;
}

.gt-btn-approve:hover .icon2 .ic-o,
.gt-btn-approve:active .icon2 .ic-o {
  opacity: 0;
}

.gt-btn-approve:hover .icon2 .ic-f,
.gt-btn-approve:active .icon2 .ic-f {
  opacity: 1;
}

.gt-row-actions .gt-btn-reject {
  background: transparent;
  color: var(--red-primary);
}

.gt-btn-reject .icon2 {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.gt-btn-reject .icon2 svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  transition: opacity .15s ease;
}

.gt-btn-reject .icon2 .ic-o {
  opacity: 1;
  fill: currentColor;
  stroke: none;
}

.gt-btn-reject .icon2 .ic-f {
  opacity: 0;
  fill: currentColor;
  stroke: none;
}

.gt-btn-reject:hover .icon2 .ic-o,
.gt-btn-reject:active .icon2 .ic-o {
  opacity: 0;
}

.gt-btn-reject:hover .icon2 .ic-f,
.gt-btn-reject:active .icon2 .ic-f {
  opacity: 1;
}

.gt-row-actions button.gt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

/* ===== Popup "Chi tiết" (bảng "Lịch sử đăng ký" - Nghỉ phép, Hồ sơ của tôi):
     đổi từ dropdown bám theo vị trí bấm (.np-detail-panel dùng chung với 2 bảng
     khác — Duyệt đăng ký nghỉ phép, Giấy ra/vào công ty) sang popup riêng, chỉ
     hiển thị/che phủ trong phạm vi khung zone "Lịch sử đăng ký" (:is(#np-zone3, #np-zone3Vinh), đã
     thêm position:relative ở trên). Đóng bằng nút X hoặc bấm ra vùng nền mờ
     xung quanh khung trắng. Class mới, không đụng tới .np-detail-panel gốc. */
.np-detail-zone-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  background: var(--overlay);
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 12px;
}

.np-detail-zone-overlay.show {
  display: flex;
}

.np-detail-zone-box {
  position: relative;
  background: #fff;
  border: 3px solid var(--red-primary);
  border-radius: 14px;
  box-shadow: var(--shadow-modal);
  padding: 20px 24px 18px;
  width: 680px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

/* Nút đóng: dùng lại đúng icon "X" của .pi2-close (form Chỉnh sửa thông tin cá
     nhân), đổi màu cho phù hợp nền trắng ở đây (thay vì nền đỏ như .pi2-close gốc). */
.np-detail-zone-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
}

.np-detail-zone-close:hover {
  background: var(--color-primary-red50);
  color: var(--red-primary);
}

.np-detail-zone-close svg {
  width: 18px;
  height: 18px;
}

/* Thu hẹp khoảng cách giữa các dòng + canh giữa theo chiều dọc label/value (thay
     vì mặc định stretch của .pi-cell khiến icon/nút trong value bị lệch xuống) +
     nới rộng cột nhãn để nội dung từng dòng nằm gọn trên 1 hàng, không bị xuống
     dòng — chỉ áp dụng trong popup này. */
:is(#npDetailPanel, #npDetailPanelVinh) .np-detail-panel-header {
  font-size: 16px;
  font-weight: 800;
}

:is(#npDetailPanel, #npDetailPanelVinh) .pi-cell {
  padding: 0;
  align-items: center;
  min-height: 32px;
  box-sizing: border-box;
}

:is(#npDetailPanel, #npDetailPanelVinh) .np-detail-zone-box {
  width: 560px;
}

:is(#npDetailPanel, #npDetailPanelVinh) .pi-cell .pi-label {
  flex: 0 0 270px;
  white-space: nowrap;
  align-self: center;
}

:is(#npDetailPanel, #npDetailPanelVinh) .pi-value {
  display: flex;
  align-items: center;
  min-height: 32px;
}

/* Popup "Chi tiết" (bảng "Lịch sử đăng ký" - tag Giấy ra/vào công ty, Nội quy tác
     phong): đổi từ dropdown bám theo vị trí bấm (.np-detail-panel) sang popup riêng,
     chỉ hiển thị/che phủ trong phạm vi khung zone "Lịch sử đăng ký" (#nq-zone3) —
     dùng lại đúng cơ chế .np-detail-zone-overlay/.np-detail-zone-box + cách canh
     pi-cell với :is(#npDetailPanel, #npDetailPanelVinh) ở trên. */
#nqDetailPanel .np-detail-panel-header {
  font-size: 16px;
  font-weight: 800;
}

#nqDetailPanel .pi-cell {
  padding: 0;
  align-items: center;
  min-height: 32px;
  box-sizing: border-box;
}

#nqDetailPanel .np-detail-zone-box {
  width: 440px;
}

#nqDetailPanel .pi-cell .pi-label {
  flex: 0 0 180px;
  white-space: nowrap;
  align-self: center;
}

#nqDetailPanel .pi-value {
  display: flex;
  align-items: center;
  min-height: 32px;
}

/* Popup "Chi tiết đề xuất" (bảng "Lịch sử đề xuất" - tab "Đề xuất công tác",
     Công tác phí): cùng cơ chế .np-detail-zone-overlay/.np-detail-zone-box như các
     zone khác ở trên, chỉ hiển thị/che phủ trong phạm vi khung "Lịch sử đề xuất"
     (#dxctZoneHistory, cần position:relative để .np-detail-zone-overlay inset:0
     khớp đúng khung này). */
#dxctZoneHistory,
#htlDxctZoneHistory {
  position: relative;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .np-detail-panel-header {
  font-size: 16px;
  font-weight: 800;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .pi-cell {
  padding: 0;
  align-items: center;
  min-height: 32px;
  box-sizing: border-box;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .np-detail-zone-box {
  width: 680px;
  max-width: 92vw;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .pi-cell .pi-label {
  flex: 0 0 210px;
  white-space: nowrap;
  align-self: center;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .pi-value {
  display: flex;
  align-items: center;
  min-height: 32px;
}

/* Ô "Chi phí phát sinh" khi có bảng kê: khác các pi-cell còn lại (label/value 1
     hàng) — cần xếp dọc, chiếm toàn bộ chiều ngang popup để đủ chỗ cho bảng nhiều
     cột, nên bỏ qua bố cục flex-row/min-height mặc định của .pi-cell ở trên. */
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .pi-cell.dxct-expense-cell {
  display: block;
  min-height: 0;
  padding: 4px 0 10px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-table-wrap {
  width: 100%;
}

/* Bảng kê tiền hóa đơn công tác — dùng CSS Grid (không phải <table> thật) để có thể
     đặt nút "×" xóa dòng RA NGOÀI khung viền chính (cột cuối .dxct-exp-remove-cell
     không có border/nền, nằm ngoài phần bo viền của bảng). Cột STT thu hẹp vừa khít
     nội dung theo yêu cầu; cột cuối trong khung đổi tên thành "Hình ảnh chứng từ". */
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-table {
  display: grid;
  grid-template-columns: 30px 82px 128px 1fr 90px 110px 22px;
  font-size: 12.5px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-h,
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-cell,
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-total-label,
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-empty {
  border: 1px solid var(--border-light, #ddd);
  padding: 5px 6px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 30px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-h {
  background: var(--color-secondary-yellow100, #fbeed8);
  font-weight: 500;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-h-stt {
  padding-left: 2px;
  padding-right: 2px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-stt {
  color: var(--text-muted, #888);
  padding-left: 2px;
  padding-right: 2px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12.5px;
  padding: 3px 4px;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: inherit;
  text-align: center;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-input:hover,
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-input:focus {
  border-color: var(--border-light, #ccc);
  background: #fff;
  outline: none;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-input:disabled {
  color: var(--text-muted, #888);
  background: transparent;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-input.dxct-exp-money {
  text-align: right;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-input.dxct-exp-date {
  padding: 3px 2px;
  font-size: 11.5px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-attach {
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-attach input[type="file"] {
  display: none;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-filename {
  font-size: 11px;
  color: var(--red-primary, #a33);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-filename:hover {
  color: var(--red-deep, #7C161C);
}

/* Cột "×" xóa dòng: KHÔNG có border/nền — nằm ngoài khung viền chính của bảng. */
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-remove-cell,
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-h-remove-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-remove {
  cursor: pointer;
  color: var(--red-primary, #a33);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  transition: background .12s ease;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-remove:hover {
  background: var(--color-secondary-yellow100, #fbeed8);
  color: var(--red-deep, #7C161C);
}

/* Icon "chỉnh sửa" (thay icon "×" khi dòng đã điền đủ + đính kèm tệp) — cùng kích
     thước/vị trí với .dxct-exp-remove, đổi màu xanh dương để phân biệt hành động sửa
     (không phải xóa). Bấm lại lần nữa để khóa dòng lại (xem dxctToggleExpenseRowEdit()). */
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-edit {
  cursor: pointer;
  color: var(--color-info-text, #174985);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  transition: background .12s ease;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-edit:hover {
  background: var(--color-info-bg, #e4f0fc);
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-empty {
  color: var(--text-muted, #888);
}

/* Ghi chú lý do khóa "Chi phí phát sinh" ngoài khung 24h sau ngày đi công tác (CẬP
     NHẬT 2026-09-23) — xem dxctExpenseEditableNow()/buildDxctExpenseTableHTML(). */
:is(#dxctDetailPanel, #htlDxctDetailPanel) .dxct-exp-window-note {
  font-size: 12px;
  color: var(--color-pending-text, #7A4B12);
  background: var(--color-pending-bg, #FFECDA);
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 8px;
  line-height: 1.4;
  box-sizing: border-box;
  /* Bảng bên dưới có 7 cột (grid-template-columns của .dxct-expense-table) nhưng cột
       cuối (22px, .dxct-exp-remove-cell) KHÔNG có viền/nền — nằm ngoài phần khung nhìn
       thấy của bảng. Trừ đúng 22px này để nền dòng ghi chú khớp bề rộng phần bảng có
       viền, không rộng hơn ra tới hết .dxct-expense-table-wrap. */
  width: calc(100% - 22px);
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-total-label {
  justify-content: flex-end;
  font-weight: 500;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-exp-cell.dxct-exp-money {
  justify-content: flex-end;
  font-weight: 500;
}

/* Hàng chứa "Thêm dòng" + "Lưu" (CẬP NHẬT 2026-09-23) — 2 nút cạnh nhau. */
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 5px 12px;
  border: 1px dashed var(--border-light, #ccc);
  border-radius: 6px;
  background: transparent;
  font-size: 12.5px;
  color: var(--red-primary, #a33);
  cursor: pointer;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-add-btn svg {
  width: 14px;
  height: 14px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-add-btn:hover {
  background: var(--color-secondary-yellow100, #fbeed8);
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-add-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Nút "Lưu" bảng kê — tô nền đặc (khác nút "Thêm dòng" viền chấm) vì đây là hành
     động chốt cuối cùng, khoá cứng toàn bộ bảng (xem dxctSaveExpenseTable()). */
:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  background: var(--red-primary, #a33);
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-save-btn svg {
  width: 14px;
  height: 14px;
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-save-btn:hover {
  background: var(--red-deep, #7C161C);
}

:is(#dxctDetailPanel, #htlDxctDetailPanel, #dxctQldnDetailPanel) .dxct-expense-save-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: var(--red-primary, #a33);
}

/* Popup "Chi tiết" (bảng "Duyệt đăng ký nghỉ phép" - Quản lý đội nhóm): đổi từ
     dropdown bám theo vị trí bấm (dùng chung .np-detail-panel với bảng "Duyệt đăng ký
     ra/vào công ty") sang popup riêng — dùng lại đúng cơ chế .np-detail-zone-overlay/
     .np-detail-zone-box + cách canh pi-cell với :is(#npDetailPanel, #npDetailPanelVinh) ở trên, chỉ hiển thị/
     che phủ trong phạm vi khung "Duyệt đơn nghỉ phép" (#leaveApproveCard, cần
     position:relative để .np-detail-zone-overlay inset:0 khớp đúng khung này). */
#leaveApproveCard {
  position: relative;
}

#leaveApproveDetailPanel .np-detail-panel-header {
  font-size: 16px;
  font-weight: 800;
}

#leaveApproveDetailPanel .pi-cell {
  padding: 0;
  align-items: center;
  min-height: 32px;
  box-sizing: border-box;
}

#leaveApproveDetailPanel .np-detail-zone-box {
  width: 560px;
}

#leaveApproveDetailPanel .pi-cell .pi-label {
  flex: 0 0 270px;
  white-space: nowrap;
  align-self: center;
}

#leaveApproveDetailPanel .pi-value {
  display: flex;
  align-items: center;
  min-height: 32px;
}

/* Popup "Chi tiết" (bảng "Duyệt đăng ký ra/vào công ty" - Quản lý đội nhóm): cùng
     cơ chế .np-detail-zone-overlay/.np-detail-zone-box như #leaveApproveCard ở trên,
     chỉ hiển thị/che phủ trong phạm vi khung bảng này (#gateApproveCard). Đã đổi từ
     dropdown cũ (.np-detail-panel) sang popup riêng theo yêu cầu. */
#gateApproveCard {
  position: relative;
}

#gateApproveDetailPanel .np-detail-panel-header {
  font-size: 16px;
  font-weight: 800;
}

#gateApproveDetailPanel .pi-cell {
  padding: 0;
  align-items: center;
  min-height: 32px;
  box-sizing: border-box;
}

#gateApproveDetailPanel .np-detail-zone-box {
  width: 440px;
}

#gateApproveDetailPanel .pi-cell .pi-label {
  flex: 0 0 180px;
  white-space: nowrap;
  align-self: center;
}

#gateApproveDetailPanel .pi-value {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.np-view-pdf-label {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--red-primary);
  cursor: pointer;
  margin-left: 2px;
}

/* "Xem đơn nghỉ phép": icon + chữ "Xem/Ẩn bản PDF" gộp thành 1 cụm bấm/hover duy
     nhất (thay vì icon và chữ là 2 phần tử tách rời, mỗi cái hover/click riêng).
     Không gạch chân chữ khi hover (chỉ đổi hiệu ứng icon). */
.np-view-pdf-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--red-primary);
  font-family: inherit;
}

.np-view-pdf-group .np-view-pdf-label {
  margin-left: 0;
}

.np-view-pdf-group .icon2 {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.np-view-pdf-group .icon2 svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  transition: opacity .15s ease;
  fill: currentColor;
  stroke: none;
}

.np-view-pdf-group .icon2 .ic-o {
  opacity: 1;
}

.np-view-pdf-group .icon2 .ic-f {
  opacity: 0;
}

.np-view-pdf-group:hover .icon2 .ic-o {
  opacity: 0;
}

.np-view-pdf-group:hover .icon2 .ic-f {
  opacity: 1;
}

/* Trạng thái đang xuất PDF (html2canvas + jsPDF đang chụp/dựng file) — tạm
     khoá nút + đổi icon mắt thành spinner xoay. Không ảnh hưởng trạng thái
     mặc định/hover ở trên. */
.np-view-pdf-group.np-pdf-loading {
  opacity: .6;
  cursor: wait;
  pointer-events: none;
}

.np-view-pdf-group.np-pdf-loading .icon2 {
  display: none;
}

.np-pdf-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(174, 24, 29, .25);
  border-top-color: var(--red-primary);
  animation: npPdfSpin .7s linear infinite;
}

.np-view-pdf-group.np-pdf-loading .np-pdf-spinner {
  display: inline-block;
}

@keyframes npPdfSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Màn hình load nhẹ khi đổi "Chọn role hiển thị" (xem ntjSelectRole()) — cùng kiểu
     animation fadeIn/spinner đã dùng ở nơi khác trong hệ thống, không tạo hiệu ứng
     mới. Che toàn màn hình 1 chốc rồi tự ẩn, không chặn thao tác gì thêm (không phải
     load dữ liệu thật, chỉ là hiệu ứng chuyển tiếp). */
.ntj-role-switch-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, .92);
  align-items: center;
  justify-content: center;
  animation: fadeIn .15s ease;
}

.ntj-role-switch-overlay.show {
  display: flex;
}

.ntj-role-switch-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ntj-role-switch-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(174, 24, 29, .2);
  border-top-color: var(--red-primary);
  animation: npPdfSpin .7s linear infinite;
}

.ntj-role-switch-text {
  font-size: 14px;
  color: var(--text-dark);
}

.ntj-role-switch-text b {
  color: var(--red-primary);
}

.np-bhxh-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  max-width: 260px;
  padding: 8px 1px 2px;
}

.np-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  flex-shrink: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  transition: opacity .15s ease;
}

.np-upload-btn:hover {
  opacity: .65;
}

/* Tên file "Chứng từ (nếu có)": bấm vào để mở lại file đã tải lên — PDF mở
     thẳng tab mới, ảnh mở popup xem trước (xử lý trong npOpenBhxhImage()). Giữ
     màu đỏ như link nhưng không gạch chân. */
.np-bhxh-file-name {
  color: var(--color-primary-red500, #c0392b);
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}




/* Popup "Hình ảnh minh chứng hưởng BHXH": xem từng ảnh một (điều hướng ảnh trước/
     sau + phóng to), có dấu X trên ảnh đang xem để xóa riêng ảnh đó — dấu X này ẩn
     đi sau khi đã bấm LƯU (l.bhxhSaved), và nút LƯU ở cuối popup. */
.np-bhxh-preview-body {
  position: relative;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 78vh;
  max-height: 760px;
  overflow: hidden;
}

.np-bhxh-preview-body.np-bhxh-zoom-active {
  overflow: auto;
  justify-content: flex-start;
  align-items: flex-start;
}

.np-bhxh-img-wrap {
  position: relative;
  max-width: calc(100% - 96px);
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.np-bhxh-preview-body img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
  position: relative;
  z-index: 1;
}

.np-bhxh-preview-body img.np-bhxh-zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
  border-radius: 4px;
}

.np-bhxh-img-del {
  position: absolute;
  top: 58px;
  right: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: background .15s ease;
}

.np-bhxh-img-del:hover {
  background: rgba(0, 0, 0, 0.75);
}

.np-bhxh-img-del.hidden {
  display: none;
}

.np-bhxh-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
}

.np-bhxh-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.np-bhxh-zoom-btn.active {
  background: #fff;
  color: var(--red-deep);
}

.np-bhxh-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  z-index: 5;
  transition: background .15s ease;
}

.np-bhxh-nav-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

.np-bhxh-nav-btn:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

.np-bhxh-nav-prev {
  left: 14px;
}

.np-bhxh-nav-next {
  right: 14px;
}

.np-bhxh-save-row {
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px 20px;
  background: #fff;
  border-radius: 0 0 6px 6px;
}


.np-trash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--red-primary);
  cursor: pointer;
}

.np-trash-btn:hover {
  background: transparent;
}

.np-trash-btn .icon2 {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.np-trash-btn .icon2 svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  transition: opacity .15s ease;
  fill: currentColor;
  stroke: none;
}

.np-trash-btn .icon2 .ic-o {
  opacity: 1;
}

.np-trash-btn .icon2 .ic-f {
  opacity: 0;
}

.np-trash-btn:hover .icon2 .ic-o {
  opacity: 0;
}

.np-trash-btn:hover .icon2 .ic-f {
  opacity: 1;
}


/* ===== Khung chat nhập lý do hủy đơn ===== */
.np-cancel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 34, 34, .45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.np-cancel-overlay.show {
  display: flex;
}

.np-cancel-box {
  width: 380px;
  max-width: 92vw;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.np-cancel-head {
  background: var(--red-primary);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.np-cancel-head h3 {
  margin: 0;
  font-size: 19px;
  letter-spacing: .3px;
}

.np-cancel-head button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s ease;
}

.np-cancel-head button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.np-cancel-body {
  padding: 16px;
}

.np-cancel-bubble {
  background: #f6efe6;
  border-radius: 12px 12px 12px 2px;
  padding: 10px 14px;
  font-size: var(--fs-body);
  color: var(--text-dark);
  margin-bottom: 12px;
}

.np-cancel-body textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-dark);
  resize: vertical;
}

.np-cancel-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}

.np-cancel-btn-cancel {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.np-cancel-btn-send {
  border: none;
  background: var(--red-primary);
  color: #fff;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.np-cancel-btn-send:hover {
  background: var(--red-deep);
}

/* Popup "Hủy đăng ký ra/vào công ty" (bảng "Lịch sử đăng ký" - tag Giấy ra/vào công
     ty, Nội quy tác phong): bản zone-confined của .np-cancel-overlay, chỉ hiển thị/
     che phủ trong phạm vi khung zone "Lịch sử đăng ký" (#nq-zone3, đã có
     position:relative) khi bấm icon hủy (X) ở cột "Thao tác" — thay vì che toàn màn
     hình như .np-cancel-overlay gốc. Giữ nguyên cấu trúc bên trong (.np-cancel-box:
     head/body/foot), chỉ đổi cách định vị overlay bao ngoài. Class mới, KHÔNG đụng
     .np-cancel-overlay gốc — các modal Hủy/Từ chối khác (đơn nghỉ phép, gate reject...)
     vẫn giữ overlay toàn màn hình như cũ. */
.np-cancel-zone-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  background: var(--overlay);
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 12px;
}

.np-cancel-zone-overlay.show {
  display: flex;
}


/* ===== Xem ảnh Chữ ký mẫu ===== */
.chuky-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 34, 34, .55);
  z-index: 10100;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.chuky-preview-overlay.show {
  display: flex;
}

.chuky-preview-box {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  max-width: min(520px, 92vw);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.chuky-preview-head {
  background: var(--red-primary);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chuky-preview-head h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: .3px;
}

.chuky-preview-head button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s ease;
}

.chuky-preview-head button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.chuky-preview-body {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(#f1efec 0% 25%, #ffffff 0% 50%) 0 0 / 20px 20px;
}

.chuky-preview-body img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.pi-value .chuky-view-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary-red500, #c0392b);
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14.5px;
}

.pi-value .chuky-view-link svg {
  flex-shrink: 0;
  color: inherit;
}

.pi-doc-link {
  color: var(--color-primary-red500, #c0392b);
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}

.pi-value-sub {
  font-style: italic;
  font-size: 0.87em;
  color: var(--color-grey400, #8a8a8a);
}


.np-notice-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 34, 34, .45);
  z-index: 10050;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.np-notice-overlay.show {
  display: flex;
}

.np-notice-box {
  width: 460px;
  max-width: 100%;
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid var(--gold);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
  padding: 30px 24px 24px;
  text-align: center;
  position: relative;
  animation: noticePop .2s ease;
}


@keyframes noticePop {
  from {
    transform: scale(.94);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}


.np-notice-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 12px;
  letter-spacing: .3px;
}

.np-notice-text {
  font-size: 15.5px;
  color: var(--text-dark);
  line-height: 1.7;
  margin-bottom: 22px;
}

.np-notice-btn {
  border: none;
  background: var(--red-primary);
  color: #fff;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .3px;
}

.np-notice-btn:hover {
  background: var(--red-deep);
}


/* Biến thể gọn hơn cho các thông báo ngắn (VD: "Chờ xác nhận", "Xác nhận thành công")
     — hộp mặc định 460px rộng quá khổ so với 1 câu ngắn, trông trống trải. Chỉ áp dụng
     khi openSuccessNotice() được gọi với tham số compact=true, không ảnh hưởng các
     thông báo khác đang dùng kích thước mặc định. */
.np-notice-box.compact {
  width: auto;
  max-width: min(560px, 92vw);
  padding: 24px 30px 20px;
}

.np-notice-box.compact .np-notice-title {
  font-size: 19px;
  margin-bottom: 10px;
  white-space: nowrap;
}

.np-notice-box.compact .np-notice-text {
  font-size: var(--fs-body);
  line-height: 1.6;
  margin-bottom: 18px;
  white-space: nowrap;
}


/* =====================================================================
     COMPONENT CHUẨN — bổ sung 2026 (design system)
     Dùng cho MODULE MỚI từ nay. Không đổi/xoá class cũ (btn-luu, gt-status-
     badge, hd-card...) — xem component-mapping.md để biết đối chiếu class
     cũ ↔ class chuẩn khi muốn migrate module cũ.
     ===================================================================== */

/* --- Button --- */
.btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  cursor: pointer;
  height: 44px;
  padding: 0 var(--space-6);
  transition: background .15s ease;
  border: none;
}

.btn-primary {
  background: var(--red-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--red-deep);
}

.btn-secondary {
  background: #fff;
  color: var(--red-primary);
  border: 2px solid var(--red-primary);
}

.btn-secondary:hover {
  background: var(--color-primary-red50);
}

.btn-tertiary {
  background: #fff;
  color: var(--text-dark);
  border: 1.5px solid var(--border);
}

.btn-tertiary:hover {
  background: #f6efe9;
  border-color: var(--gold);
}

.btn-link {
  background: none;
  border: none;
  color: var(--red-primary);
  font-weight: 500;
  height: auto;
  padding: 0;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* --- Badge / trạng thái --- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
}

.badge-pending {
  background: var(--color-pending-bg);
  color: var(--color-pending-text);
}

.badge-approved {
  background: var(--color-approved-bg);
  color: var(--color-approved-text);
}

.badge-rejected {
  background: var(--color-rejected-bg);
  color: var(--color-rejected-text);
}

.badge-cancelled {
  background: var(--color-cancelled-bg);
  color: var(--color-cancelled-text);
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.badge-outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* --- Counter dot (số đếm thông báo sidebar) --- */
.counter-dot {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--color-secondary-yellow500);
  color: var(--color-primary-red900);
  font-size: var(--fs-caption);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.counter-dot.active {
  background: var(--color-primary-red500);
  color: var(--color-secondary-yellow100);
}

/* --- Card --- */
.card {
  background: var(--color-bg-white50);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* --- Icon button (duyệt/từ chối/xem) --- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background .12s ease;
}

.icon-btn-approve {
  color: var(--color-approved-text);
  box-shadow: inset 0 0 0 1px var(--color-approved-text);
}

.icon-btn-reject {
  color: var(--red-primary);
  box-shadow: inset 0 0 0 1px var(--red-primary);
}

.icon-btn-preview {
  color: var(--icon-gray);
  box-shadow: inset 0 0 0 1px var(--border);
}

.icon-btn-ghost {
  box-shadow: none;
}

.icon-btn-ghost:hover {
  background: var(--color-bg-grey-surface);
}

/* ICON_EYE/ICON_CHECK (dùng ở dropdown thông báo chuông) là icon2 2 lớp (ic-o/ic-f,
     đổi icon khi hover) — cần khai báo scope riêng cho .icon-btn giống hệt các nơi khác
     đang dùng icon2 (.gt-btn-preview, .gt-btn-approve, .np-eye-btn...), nếu không cả 2
     lớp icon sẽ hiện chồng/cạnh nhau cùng lúc thay vì chỉ 1 icon. */
.icon-btn .icon2 {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.icon-btn .icon2 svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  transition: opacity .15s ease;
  fill: currentColor;
  stroke: none;
}

.icon-btn .icon2 .ic-o {
  opacity: 1;
}

.icon-btn .icon2 .ic-f {
  opacity: 0;
}

.icon-btn:hover .icon2 .ic-o {
  opacity: 0;
}

.icon-btn:hover .icon2 .ic-f {
  opacity: 1;
}

/* Thẻ thông báo chuông (topbar): bỏ khung viền quanh icon Xem/Duyệt theo yêu cầu,
     chỉ giữ lại icon trần (không ảnh hưởng .icon-btn dùng ở các nơi khác). */
.notif-bell-item-actions .icon-btn {
  box-shadow: none;
  background: transparent;
}

/* --- Filter panel chuẩn (tham chiếu từ .np-filter-*) --- */
.filter-panel {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.filter-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-white300);
  font-size: var(--fs-small);
}

.filter-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* --- Dropdown thông báo (chuông topbar) — "Thông tin bàn giao công việc" chờ duyệt.
     THIẾT KẾ: khung viền đỏ MỎNG, bo tròn đều cả 4 góc; tiêu đề "Thông báo" và nút đóng
     (X) đè lên đường viền trên/góc trên-phải, dùng nền trắng che 1 đoạn viền phía sau
     để tạo hiệu ứng "đứt đoạn" tại đúng 2 vị trí đó (kiểu fieldset/legend). Kèm nền phủ
     khối (giống các popup khác trong hệ thống) khi dropdown đang mở. --- */
.notif-bell-wrap {
  position: relative;
}

/* Lớp NGOÀI: nền trắng, bo góc lớn, đổ bóng — đây là "khoảng trắng của dropdown" nằm
     BÊN NGOÀI khung viền đỏ (khung đỏ thụt vào trong, không chạm mép dropdown). */
.notif-bell-dropdown {
  position: absolute;
  top: 44px;
  right: -6px;
  width: 560px;
  max-width: 92vw;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(30, 5, 10, 0.25);
  box-sizing: border-box;
  padding: 20px;
  display: none;
  z-index: 9060;
}

.notif-bell-dropdown.show {
  display: block;
}

/* Mũi tên trỏ về icon chuông — tam giác trắng cùng màu/bóng đổ với lớp ngoài dropdown,
     nằm NGOÀI mép trên (top âm), không bị cắt vì .notif-bell-dropdown không đặt overflow. */
.notif-bell-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 26px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
  box-shadow: -3px -3px 6px rgba(30, 5, 10, 0.06);
}

/* Khung bao quanh danh sách thông báo: viền đỏ MỎNG (1.5px, trước là 2px), bo tròn
     ĐỀU CẢ 4 GÓC (16px) — không còn kiểu "bỏ viền trên" như trước. */
.notif-bell-frame {
  position: relative;
  box-sizing: border-box;
  border: 1.5px solid var(--red-primary);
  border-radius: 16px;
  background: #fff;
  padding-top: 22px;
}

/* Tiêu đề "Thông báo" đè lên viền trên, căn giữa theo chiều ngang — nền trắng phía
     sau chữ che đứt đoạn viền ngay tại vị trí chữ, viền vẫn liền mạch ở 2 bên. */
.notif-bell-title-mask {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 10px;
  line-height: 1;
  z-index: 2;
}

.notif-bell-head-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--red-primary);
  white-space: nowrap;
}

/* Nút đóng (X): đặt ĐÚNG vị trí giao nhau của viền trên và viền phải (góc bo tròn) để
     che đứt đoạn ngay tại góc — to hơn (28px) và dấu X đậm hơn (stroke dày, weight cao)
     theo yêu cầu. */
.notif-bell-close {
  position: absolute;
  top: -14px;
  right: -4px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  border: none;
  z-index: 2;
  cursor: pointer;
  color: var(--red-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-bell-scroll {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 14px;
}

.notif-bell-body {
  padding: 0 16px 16px;
}

.notif-bell-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}

/* Nền phủ khối phía sau dropdown khi đang mở — giống cách các popup khác trong hệ
     thống hiển thị (dùng lại biến --overlay chung). Click vào nền này sẽ đóng dropdown
     (xử lý qua listener đóng khi click ra ngoài đã có sẵn). */
.notif-bell-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay);
  display: none;
  z-index: 9059;
}

.notif-bell-backdrop.show {
  display: block;
}

/* Theo đúng mẫu thẻ thông báo tham khảo: khung gọn vừa nội dung (không đệm quá tay),
     bo góc nhẹ, font chữ serif (--font-display) thường (không đậm) — khác với kiểu chữ
     đậm sans-serif trước đó. */
.notif-bell-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 6px 12px;
  margin-bottom: 4px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.notif-bell-item:last-child {
  margin-bottom: 0;
}

/* Header nhóm theo ngày ("Hôm nay · dd/mm/yyyy"...) cho các thông báo nghỉ phép
     (CẬP NHẬT 2026-09-21: chuyển từ Bản tin nhanh vào đây, xem renderNotifBellList()). */
.notif-bell-date {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--space-2) 4px var(--space-1);
}

.notif-bell-date:first-child {
  padding-top: 0;
}

/* Thông báo nghỉ phép CHƯA ĐỌC — viền trái đỏ + nền nhạt để nổi bật, giống kiểu tô
     nổi "is-new" trước đây. Tự bỏ khi mở dropdown (đánh dấu đã đọc — xem toggleNotifBell()). */
.notif-bell-item.unread {
  background: var(--icon-bg);
  border-left: 3px solid var(--red-primary);
}

/* Câu thông báo nghỉ phép dài hơn nhiều so với tiêu đề bàn giao công việc (vốn được
     thiết kế 1 dòng + "..." ở cuối) — cho xuống dòng tự nhiên thay vì cắt dở dang. */
.notif-bell-item.leave-notif .notif-bell-item-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Hiệu ứng nổi lên khi hover: nhích nhẹ lên trên + đổ bóng, giống thẻ card nổi. */
.notif-bell-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(30, 5, 10, 0.12);
  background: #EDF1F5;
}

.notif-bell-item-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hàng dưới: gộp chung giờ (trái) + icon Xem/Duyệt (phải) trên cùng 1 hàng để tiết
     kiệm không gian, thay vì tách 2 hàng riêng như trước — kích thước icon giữ nguyên
     mặc định của .icon-btn (36x36), không thu nhỏ. */
.notif-bell-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
}

/* [ngày-giờ] đậm/rõ như nội dung — đổi màu từ text-muted (nhạt) sang text-dark, khớp
     đúng độ đậm của dòng nội dung phía trên. */
.notif-bell-item-time {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.1;
}

/* Giảm khoảng cách giữa 2 icon Xem/Duyệt (trước 4px) */
.notif-bell-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0px;
}

/* Trước đây dùng opacity:.6 làm mờ cả thẻ sau khi duyệt, khiến chữ trông nhạt/kém
     đậm hơn — bỏ đi theo yêu cầu, giữ nguyên độ đậm của chữ dù đã duyệt hay chưa. */
.notif-bell-item.done {}

/* Chấm thông báo trên icon chuông: dùng class chung ".badge" (chip trạng thái, cao
     24px, bo pill) đang bị 1 luật ".badge" khác định nghĩa TRƯỚC ĐÓ (18px, tròn, dùng
     riêng cho chuông) ghi đè 1 phần thuộc tính do đứng sau trong stylesheet — khiến
     chấm to hơn dự kiến và che lấp icon chuông. Ghi đè lại bằng ID riêng (độ ưu tiên
     cao hơn, không đụng đến class ".badge" dùng chung toàn hệ thống) để chấm nhỏ gọn,
     tròn, đúng vị trí góc icon.
  */
#notifBellCount {
  height: 18px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  color: var(--red-deep);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}

/* --- Dropdown "MSNV - Họ tên người nhận bàn giao" mở LÊN TRÊN thay vì xuống dưới
     (popup "Đăng ký nghỉ phép" thường không đủ khoảng trống phía dưới trường này). --- */
#lafHandoverWrap .np-select-panel {
  top: auto;
  bottom: calc(100% + 6px);
}


/* ===== MULTI-PAGE & LINK ROUTING ADDITIONS ===== */
#appRoot {
  display: block;
}

/* body.page-trangchu #page-trangchu,
body.page-qldn #page-qldn,
body.page-hoso .page-hoso,
body.page-nghiepvu #page-nghiepvu {
  display: block !important;
} */

.topbar-nav a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 27px 2px 25px;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  opacity: 1;
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
  transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}

.topbar-nav a:hover {
  opacity: 1;
  color: var(--gold);
}

.topbar-nav a.active {
  opacity: 1;
  color: var(--gold);
  border-bottom: 2.5px solid var(--gold);
}

.breadcrumb-bar a.bc-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.breadcrumb-bar a.bc-link:hover {
  color: var(--text-dark);
  text-decoration: underline;
}

/* ===== MIGRATED INLINE STYLES ===== */
.st-hidden {
  display: none;
}

.st-1 {
  display: flex;
}

.st-2 {
  fill: currentColor;
  stroke: none;
}

.st-3 {
  stroke: none;
  fill: currentColor;
}

.st-4 {
  visibility: hidden;
}

.st-5 {
  color: var(--red-primary);
}

.st-6 {
  display: block;
}

.st-7 {
  width: 64px;
}

.st-8 {
  width: 78px;
}

.st-9 {
  stroke: none;
  color: var(--red-primary);
}

.st-10 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.st-11 {
  background: rgb(255, 254, 253);
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 8px 0px;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.st-12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.st-13 {
  font-family: var(--font-display), 'Times New Roman', serif;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary-red600);
}

.st-14 {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--color-primary-red500);
  color: var(--color-text-white);
  box-shadow: inset 0 0 0 1px var(--color-primary-red500);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.st-15 {
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-16 {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.st-17 {
  width: 50px;
  padding: 10px 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey400);
  border-bottom: 1px solid var(--color-grey50);
}

.st-18 {
  padding: 10px 8px 10px 0;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey400);
  border-bottom: 1px solid var(--color-grey50);
}

.st-19 {
  width: 132px;
  padding: 10px 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey400);
  border-bottom: 1px solid var(--color-grey50);
}

.st-20 {
  width: 136px;
  padding: 10px 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey400);
  border-bottom: 1px solid var(--color-grey50);
}

.st-21 {
  padding: 14px 8px;
  font-size: 13px;
  color: var(--color-grey400);
  border-bottom: 1px solid var(--color-grey50);
}

.st-22 {
  padding: 14px 8px 14px 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-grey500);
  border-bottom: 1px solid var(--color-grey50);
}

.st-23 {
  padding: 14px 8px;
  border-bottom: 1px solid var(--color-grey50);
}

.st-24 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  border-radius: 32px;
  font-size: 12px;
  font-weight: 500;
  background: var(--color-grey50);
  color: var(--color-grey500);
}

.st-25 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  border-radius: 32px;
  font-size: 12px;
  font-weight: 500;
  background: var(--color-secondary-yellow100);
  color: var(--color-secondary-yellow900);
}

.st-26 {
  padding: 14px 8px;
  font-size: 13px;
  color: var(--color-grey400);
}

.st-27 {
  padding: 14px 8px 14px 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-grey500);
}

.st-28 {
  padding: 14px 8px;
}

.st-29 {
  background: rgb(255, 254, 253);
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 8px 0px;
  padding: 24px;
  box-sizing: border-box;
  height: 520px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.st-30 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.st-31 {
  font-family: var(--font-display), 'Times New Roman', serif;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary-red600);
  white-space: nowrap;
}

.st-32 {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--color-bg-white300);
}

.st-33 {
  height: 30px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 6px;
  background: var(--color-primary-red500);
  color: var(--color-secondary-yellow500);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.st-34 {
  height: 30px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 6px;
  background: transparent;
  color: var(--color-grey400);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.st-35 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.st-36 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.st-37 {
  display: inline-flex;
  color: var(--color-grey200);
  cursor: pointer;
}

.st-38 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-grey500);
  white-space: nowrap;
}

.st-39 {
  display: inline-flex;
  color: var(--color-grey500);
  cursor: pointer;
}

.st-40 {
  height: 296px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-41 {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: stretch;
}

.st-42 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--color-grey400);
  padding-top: 12px;
  white-space: nowrap;
}

.st-43 {
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--color-secondary-yellow100);
  box-shadow: inset 3px 0 0 0 var(--color-secondary-yellow500);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.st-44 {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--color-text-black);
}

.st-45 {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-grey400);
}

.st-46 {
  display: none;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.st-47 {
  height: 296px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-content: start;
}

.st-48 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.st-49 {
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--color-primary-red500);
  box-shadow: none;
  padding: 6px 4px;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.st-50 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-secondary-yellow500);
}

.st-51 {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-secondary-yellow500);
}

.st-52 {
  box-sizing: border-box;
  border-radius: 6px;
  background: var(--color-secondary-yellow100);
  padding: 6px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.st-53 {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-text-black);
  white-space: nowrap;
}

.st-54 {
  font-size: 10px;
  line-height: 13px;
  color: var(--color-grey400);
  white-space: nowrap;
}

.st-55 {
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--color-bg-white50);
  box-shadow: inset 0 0 0 1px var(--color-grey50);
  padding: 6px 4px;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.st-56 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey500);
}

.st-57 {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-grey500);
}

.st-58 {
  height: 296px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.st-59 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.st-60 {
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey400);
}

.st-61 {
  height: 38px;
  box-sizing: border-box;
  border-radius: 6px;
  background: var(--color-bg-grey-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.st-62 {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-grey200);
}

.st-63 {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: transparent;
}

.st-64 {
  height: 38px;
  box-sizing: border-box;
  border-radius: 6px;
  background: var(--color-bg-white50);
  box-shadow: inset 0 0 0 1px var(--color-grey50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.st-65 {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-black);
}

.st-66 {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--color-secondary-yellow500);
}

.st-67 {
  height: 38px;
  box-sizing: border-box;
  border-radius: 6px;
  background: var(--color-primary-red500);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.st-68 {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-secondary-yellow500);
}

.st-69 {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-top: 4px;
}

.st-70 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-grey400);
  white-space: nowrap;
}

.st-71 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--color-secondary-yellow500);
}

.st-72 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--color-grey50);
}

.st-73 {
  display: grid;
  grid-template-columns: 186px 1fr;
  gap: 16px;
  align-items: start;
}

.st-74 {
  height: 44px;
  box-sizing: border-box;
  padding: 12px 12px;
  border-radius: 8px;
  background: rgba(255, 236, 218, 0.22);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-primary-red900);
  white-space: nowrap;
}

.st-75 {
  height: 44px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: none;
  outline: none;
  border-radius: 8px;
  background: var(--color-bg-white200);
  box-shadow: inset 0 0 0 1px var(--color-grey50);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-grey200);
  cursor: not-allowed;
}

.st-76 {
  height: 44px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: none;
  outline: none;
  border-radius: 8px;
  background: var(--color-bg-white50);
  box-shadow: inset 0 0 0 1px var(--color-bg-white400), 0 1px 2px rgba(16, 24, 40, 0.05);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-grey500);
}

.st-77 {
  position: relative;
  display: flex;
}

.st-78 {
  flex-grow: 1;
  height: 44px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: none;
  outline: none;
  border-radius: 8px;
  background: var(--color-bg-white50);
  box-shadow: inset 0 0 0 1px var(--color-bg-white400), 0 1px 2px rgba(16, 24, 40, 0.05);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-grey500);
  appearance: none;
  padding-right: 40px;
}

.st-79 {
  position: absolute;
  top: 0;
  right: 12px;
  height: 44px;
  display: flex;
  align-items: center;
  color: var(--color-grey200);
  pointer-events: none;
}

.st-80 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-81 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.st-82 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.st-83 {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-red900);
}

.st-84 {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.st-85 {
  max-width: 150px;
}

.st-86 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.st-87 {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-red900);
  white-space: nowrap;
}

.st-88 {
  width: 100px;
  min-width: 0;
  max-width: 100%;
}

.st-89 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.st-90 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-91 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.st-92 {
  position: relative;
  display: flex;
}

.st-93 {
  flex-grow: 1;
  height: 44px;
  box-sizing: border-box;
  padding: 10px 40px 10px 14px;
  border: none;
  outline: none;
  border-radius: 8px;
  background: var(--color-bg-white50);
  box-shadow: inset 0 0 0 1px var(--color-bg-white400), 0 1px 2px rgba(16, 24, 40, 0.05);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-grey500);
}

select.st-93 {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-color: var(--color-bg-white50);
}

select.st-93:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}

.st-94 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.st-95 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-red900);
}

.st-96 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.st-97 {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.st-98 {
  font-size: 13px;
  color: var(--text-muted);
}

.st-99 {
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: -4px;
}

.st-100 {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-primary-red500);
  margin-top: 1px;
}

.st-101 {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-grey400);
}

.st-102 {
  align-items: center;
  padding: 20px;
}

.st-103 {
  max-width: 420px;
  width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.st-104 {
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.st-105 {
  max-width: 100%;
  max-height: calc(90vh - 100px);
  object-fit: contain;
  border-radius: 8px;
}

.st-106 {
  max-width: 640px;
  width: 92vw;
}

.st-107 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.st-108 {
  visibility: hidden;
}

.st-109 {
  margin-top: 26px;
}

.st-110 {
  stroke: none;
}

.st-111 {
  text-align: center;
}

.st-112 {
  left: auto;
  right: 0;
  width: auto;
}

.st-113 {
  font-size: 13px;
  color: #8a8a8a;
  margin-top: 2px;
}

.st-114 {
  width: 96px;
  text-align: center;
}

.st-115 {
  position: relative;
}

.st-116 {
  right: 0;
  left: auto;
  width: 860px;
}

.st-117 {
  width: 60px;
  text-align: center;
}

.st-118 {
  gap: 12px;
}

.st-119 {
  width: 70px;
  text-align: center;
}

.st-120 {
  width: 90px;
  text-align: center;
}

.st-121 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.st-122 {
  padding: 20px 24px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.st-123 {
  background: linear-gradient(135deg, rgb(255, 240, 229) 0%, rgb(255, 251, 246) 58%, rgb(255, 254, 253) 100%);
}

.st-124 {
  background: linear-gradient(135deg, rgb(228, 240, 252) 0%, rgb(243, 249, 255) 58%, rgb(253, 254, 255) 100%);
}

.st-125 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.st-126 {
  width: 56px;
}

.st-127 {
  width: 130px;
}

.st-128 {
  width: 120px;
}

.st-129 {
  text-align: center;
  color: #8a8a8a;
  padding: 18px;
}

.st-130 {
  width: 150px;
}

.st-131 {
  margin-top: 0;
}

.st-132 {
  border-right: 1px solid rgba(174, 24, 29, 0.15);
}

.st-133 {
  margin-right: 0;
  padding-right: 0;
}

.st-134 {
  letter-spacing: normal;
}

.st-135 {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.st-136 {
  right: 0;
  left: auto;
  width: 640px;
}

.st-137 {
  flex-wrap: nowrap;
}

.st-138 {
  min-width: 110px;
}

.st-139 {
  min-width: 130px;
}

.st-140 {
  flex-shrink: 0;
}

.st-141 {
  width: 380px;
}

.st-142 {
  width: 110px;
  text-align: center;
}

.st-143 {
  grid-column: span 1;
}

.st-144 {
  grid-column: span 2;
}

.st-145 {
  color: var(--color-secondary-yellow900);
}

.st-146 {
  width: 50px;
}

.st-147 {
  width: 110px;
}

.st-148 {
  width: 220px;
}

.st-149 {
  width: 180px;
}

.st-150 {
  width: 170px;
}

.st-151 {
  margin-bottom: 16px;
}

.st-152 {
  text-transform: uppercase;
}

.st-153 {
  display: grid;
  grid-template-columns: 1fr 1.9fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}

.st-154 {
  padding: 16px 24px 0;
  justify-content: space-between;
}

.st-155 {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.st-156 {
  min-width: 1900px;
}

.st-157 {
  width: 40px;
}

.st-158 {
  width: 88px;
}

.st-159 {
  width: 200px;
}

.st-160 {
  width: 190px;
}

.st-161 {
  width: 210px;
}



/* ====================================================================== */
/* SHARED UI COMPONENTS (USED ACROSS HOSO, QLDN, NGHIỆPVU, TRANGCHU)       */
/* ====================================================================== */

/* 1. Header Top & Headers */
.gt-header-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* 2. Placeholders for incomplete / coming soon tabs */
.hoso-placeholder {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 70px 24px;
  text-align: center;
  color: var(--text-muted);
  box-shadow: 0 2px 8px rgba(122, 20, 32, 0.06), 0 1px 2px rgba(122, 20, 32, 0.05);
}
.hoso-tab .pi-photo-label {
    font-size: 12.5px;
    margin-top: 4px;
    text-align: center;
}
.hoso-placeholder svg {
  width: 52px;
  height: 52px;
  stroke: var(--icon-gray, #888);
  fill: none;
  stroke-width: 1.5;
  margin-bottom: 14px;
}

.hoso-placeholder-title {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 14px;
  margin-bottom: 6px;
}

.hoso-placeholder-desc {
  font-size: 12.5px;
}

/* 3. Filter Controls & Panels */
.np-z3-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.np-z3-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.np-filter-wrap {
  position: relative;
  display: inline-block;
}

.np-filter-btn {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--red-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.np-filter-btn:hover {
  background: #FFF8F1;
  border-color: var(--red-primary);
}

.np-filter-panel {
  display: none;
  position: absolute;
  top: 46px;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(122, 20, 32, 0.14);
  padding: 14px;
  z-index: 30;
}

.np-filter-panel.show {
  display: block;
}

.np-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.np-filter-field {
  flex: 1 1 140px;
  min-width: 130px;
  max-width: 220px;
}

.np-filter-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 5px;
  white-space: nowrap;
}

.np-filter-field input[type=date],
.np-filter-field input[type=text],
.np-filter-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-dark);
  background: #fff;
}

.np-filter-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.np-filter-btn-reset,
.np-filter-btn-apply {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
}

.np-filter-btn-reset {
  background: #fff;
  color: var(--text-dark);
}

.np-filter-btn-reset:hover {
  background: #f6efe9;
}

.np-filter-btn-apply {
  background: var(--red-primary);
  color: #fff;
  border-color: var(--red-primary);
}

.np-filter-btn-apply:hover {
  background: var(--color-primary-red900);
}

/* 4. Filter Chips & Clear All */
.np-filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.np-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFDFA;
  color: #2b2b2b;
  border: 1px solid #E4DAC6;
  border-radius: 6px;
  padding: 7px 12px 7px 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.np-filter-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.np-filter-chip button:hover {
  color: var(--red-deep);
}

.np-filter-clear-all {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #333;
  border: 1px solid #D8D8D8;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.np-filter-clear-all:hover {
  border-color: var(--red-primary);
  color: var(--red-deep);
}

/* 5. Custom Select Dropdowns */
.np-select-wrap {
  position: relative;
}

.np-select-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  height: 44px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(16, 24, 40, 0.05);
  font-family: inherit;
  color: var(--text-muted);
  background: #fff;
  width: 100%;
  text-align: left;
}

.np-select-display span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-select-display svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .15s;
}

.np-select-wrap.open .np-select-display svg {
  transform: rotate(90deg);
}

.np-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.14), 0 0 0 1px var(--border);
  overflow-y: auto;
  display: none;
  max-height: 236px;
}

.np-select-wrap.open .np-select-panel {
  display: block;
}

.np-select-option {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dark);
  cursor: pointer;
}

.np-select-option:hover {
  background: #0b57d0;
  color: #fff;
}

.np-select-option.selected {
  background: #0b57d0;
  color: #fff;
  font-weight: 500;
}

.np-filter-field .np-select-wrap {
  position: relative;
}

.np-filter-field .np-select-display {
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px var(--border);
}

.np-filter-field .np-select-display svg {
  width: 14px;
  height: 14px;
}

.np-filter-field .np-select-option {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 18px;
}

.np-select-native-wrap {
  position: relative;
  display: flex;
}

.np-select-native-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  width: 100%;
}

.np-select-native-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}

.pi-honnhan-icon svg {
  transition: transform .15s;
}

#piHonNhan:focus+.pi-honnhan-icon svg {
  transform: rotate(90deg);
}

/* 6. Pagination */
.np-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding-top: 5px;
  margin-top: 8px;
}

.gt-page-card>.np-pagination {
  padding: 14px 24px 22px;
  margin-top: 0;
}

.np-pagination-total {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dark);
}

.np-pagination-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.np-page-arrow {
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.np-page-arrow svg {
  width: 13px;
  height: 13px;
}

.np-page-arrow.disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.np-page-btn {
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

.np-page-btn.active {
  background: var(--red-primary);
  color: var(--gold);
  font-weight: 500;
}

.np-page-btn.ellipsis {
  cursor: default;
}

/* 7. Dialog Sheets */
.hd-dialog-sheet {
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 20px;
  width: fit-content;
  min-width: 560px;
  max-width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(30, 5, 10, 0.3);
  animation: slideUp .2s ease;
}

.hd-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px 18px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--color-primary-red500);
}

.hd-dialog-close {
  display: inline-flex;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.hd-dialog-close:hover {
  color: var(--red-primary);
}

.hd-dialog-body {
  padding: 4px 26px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hd-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 26px 26px;
}

/* 8. QLDN Team Subtabs */
.nv-team-subtabs-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.nv-team-subtabs-wrap .lv-mgmt-tabs {
  flex-wrap: wrap;
  row-gap: 6px;
}

.nv-team-subtab-content {
  margin-top: 12px;
}

.nv-inner-subtabs {
  display: flex;
  gap: 8px;
  background: var(--color-grey50);
  border-radius: 0;
  padding: 16px 0 0 24px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.nv-inner-subtab {
  padding: 8px 16px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}

.nv-inner-subtab:hover {
  color: var(--text-dark);
}

.nv-inner-subtab.active {
  background: rgb(228, 240, 252);
  color: rgb(23, 73, 133);
}

/* 9. Location Selectors / Editors */
:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-editor {
  position: relative;
  display: inline-block;
  min-width: 200px;
  max-width: 100%;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-dark);
  cursor: pointer;
  text-align: left;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-display svg {
  flex-shrink: 0;
  color: var(--text-muted, #888);
  transition: transform .15s;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-editor.open .dxct-qldn-loc-display svg {
  transform: rotate(90deg);
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 80;
  width: max(260px, 100%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .16), 0 0 0 1px var(--border);
  overflow: hidden;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-editor.open .dxct-qldn-loc-panel {
  display: block;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-panel-head span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-info-text, #174985);
  cursor: pointer;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-panel-head span:hover {
  text-decoration: underline;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-list {
  max-height: 236px;
  overflow-y: auto;
  padding: 4px;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-dark);
  cursor: pointer;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-option:hover {
  background: var(--color-bg-grey-surface, #f4f2f2);
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-option input {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--red-primary);
  cursor: pointer;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--color-bg-grey-surface, #f4f2f2);
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-cancel {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 12.5px;
  color: var(--text-dark);
  cursor: pointer;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-cancel:hover {
  background: var(--color-bg-grey-surface, #f4f2f2);
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-confirm {
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  background: var(--red-primary);
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-confirm:hover {
  background: var(--red-deep);
}

:is(#dxctQldnCard, #dxctLocationList, #htlDxctLocationList, #tcEmpPicker) .dxct-qldn-loc-confirm:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--red-primary);
}

.dxct-form-loc-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.dxct-form-loc-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 8px);
  box-shadow: inset 0 0 0 1px var(--color-bg-white400, #e0e0e0), 0 1px 2px rgba(16, 24, 40, 0.05);
  background: var(--card-bg, #fff);
  font-size: 15px;
  color: var(--text-dark);
}

.dxct-form-loc-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 0;
}

.dxct-form-loc-chip button svg {
  width: 14px;
  height: 14px;
}

.dxct-form-loc-chip button:hover {
  background: var(--color-bg-grey-surface, #f4f2f2);
  color: var(--red-primary);
}

/* 10. Handover other row */
.lf-handover-other-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-dark);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.lf-handover-other-row input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.lf-field .np-select-wrap .lf-handover-other-input {
  cursor: text;
}

.lf-handover-other-results {
  max-height: 150px;
  overflow-y: auto;
  margin-top: 4px;
}

.lf-handover-other-item {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-dark);
  border-radius: 6px;
  cursor: pointer;
}

.lf-handover-other-item:hover {
  background: #0b57d0;
  color: #fff;
}

.lf-handover-other-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* 11. 2-column form/history layout (.np-row23, .np-lf-daterow, .np-lf-field) */
.np-row23 {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: stretch;
}

.np-row23>div {
  height: 100%;
  min-width: 0;
}

@media (max-width: 900px) {
  .np-row23 {
    grid-template-columns: 1fr;
  }
}

.np-lf-daterow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.np-lf-daterow div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.np-lf-daterow span {
  font-size: 14px;
  color: var(--red-deep);
  font-weight: 500;
  width: 72px;
  flex-shrink: 0;
  white-space: nowrap;
}

.np-lf-daterow input {
  flex: 1;
  min-width: 0;
}

.np-lf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.np-lf-field label {
  background: #FFEFDB;
  color: #6B553A;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  padding: 4px 12px;
  border-radius: 32px;
  width: fit-content;
}

.np-lf-field label.np-plain-label {
  background: transparent;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 12px;
  padding: 0;
  border-radius: 0;
  width: fit-content;
}

.np-lf-field input[type=text],
.np-lf-field input[type=date],
.np-lf-field select,
.np-lf-field textarea {
  border: none;
  outline: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  height: 44px;
  box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(16, 24, 40, 0.05);
  font-family: var(--font-sans);
  color: var(--text-muted);
  background: #fff;
  width: 100%;
}

.np-lf-field input[readonly] {
  background: #f2ece3;
  color: var(--text-muted);
}

.np-lf-field textarea:disabled {
  background: #f2ece3;
  color: var(--text-muted);
  cursor: not-allowed;
}

.np-lf-field textarea {
  resize: vertical;
  min-height: 96px;
  height: auto;
  line-height: 22px;
}

.nghiphep-module {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 12. History Tables (.np-hist-table) and status tags (.np-status-tag) */
.np-hist-table,
.nghiphep-module table.np-hist-table,
.tangca-module table.np-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 0;
}

.np-hist-table thead th,
.nghiphep-module table.np-hist-table thead th,
.tangca-module table.np-hist-table thead th {
  background: var(--cream);
  color: #000;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .2px;
  text-align: left;
  padding: 12px 8px;
  box-shadow: inset 0 -2px 0 var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.np-hist-table thead th:first-child,
.nghiphep-module table.np-hist-table thead th:first-child,
.tangca-module table.np-hist-table thead th:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.np-hist-table thead th:last-child,
.nghiphep-module table.np-hist-table thead th:last-child,
.tangca-module table.np-hist-table thead th:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.np-hist-table tbody td,
.nghiphep-module table.np-hist-table tbody td,
.tangca-module table.np-hist-table tbody td {
  padding: 10px 8px;
  color: var(--text-muted);
  vertical-align: top;
  font-size: 13.5px;
  white-space: nowrap;
}

.np-hist-table tbody td.wrap,
.nghiphep-module table.np-hist-table tbody td.wrap,
.tangca-module table.np-hist-table tbody td.wrap {
  white-space: normal;
}

.np-hist-table tbody tr:nth-child(even),
.nghiphep-module table.np-hist-table tbody tr:nth-child(even),
.tangca-module table.np-hist-table tbody tr:nth-child(even) {
  background: #FAF9F8;
}

.np-hist-table tbody tr:hover,
.nghiphep-module table.np-hist-table tbody tr:hover,
.tangca-module table.np-hist-table tbody tr:hover {
  background: var(--cream);
}

.np-status-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
}

.np-status-tag.approved {
  background: #e4f3e6;
  color: #2f8f4e;
}

.np-status-tag.pending {
  background: #fdecd2;
  color: #b5651d;
}

.np-status-tag.rejected {
  background: #fbe6e6;
  color: #c0392b;
}

.np-status-tag.cancelled {
  background: #ece7e2;
  color: #6f6560;
}

.np-status-tag.awaiting-supplement {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.np-status-tag.completed {
  background: #ede7f6;
  color: #5e35b1;
}
/*Css loading */
.ajax-loader {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: 0;
    transform: translate(-50%, -50%);
    border: 4px solid rgba(0, 0, 0, .08);
    border-top-color: #a2041b;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .08), 0 0 20px rgba(0, 0, 0, .12);
    animation: ajaxLoaderSpin .8s linear infinite;
    z-index: 10002;
    -webkit-animation: ajaxLoaderSpin .8s linear infinite;
}
.loadajax {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(255, 255, 255, .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
@keyframes ajaxLoaderSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}