/* =========================================================================
   TNPFurniture ERP v3.4
   1. Cố định tiêu đề cột khi lăn chuột (Sticky Table Headers) toàn bộ phần mềm.
   2. Tối ưu bố cục Hợp đồng lao động: thanh tìm kiếm & tab trạng thái cạnh nút Thêm mới.
   3. Sao lưu khẩn cấp Excel từng mô-đun và Cứu hộ Excel toàn diện tất cả thông tin nhân sự.
   4. Nút ẩn/hiện tinh gọn KPI & Công thức tính lương/chấm công (Co giãn bảng tối đa).
   5. Thanh Sidebar co giãn thông minh, thuận tiện cho việc xem thông tin không bị che khuất.
   6. Đồng hồ điện tử ngày tháng năm Dương lịch & Âm lịch Việt Nam thời gian thực trên thanh tiêu đề chính.
   7. Bộ quản lý, nhập ảnh có sẵn và chỉnh sửa Logo phù hợp với giao diện phần mềm.
   8. Tinh gọn mã số giao diện: chỉ hiển thị mã số UI rõ ràng, tinh tế.
   ========================================================================= */

/* ===== 1. CỐ ĐỊNH TIÊU ĐỀ CỘT KHI LĂN CHUỘT (STICKY TABLE HEADERS) ===== */

/* Tất cả các khung cuộn bảng trong phần mềm */
:where(#attendance-table, #payroll-table, #employee-list-container, .ep-employee-list-shell,
       #personnel-profile-table, .pp-table-scroll, #insurance-table, .ep-table-scroll,
       .ops-table-wrap, .attendance-summary-scroll, .timepay-scroll-wrap) {
  overflow: auto !important;
  position: relative !important;
}

/* Đảm bảo table border-collapse không triệt tiêu sticky */
:where(.ops-table, .ep-employee-list-table, .pp-table, .pp-main-table-v216,
       .ui094-main-table-v2024, .attendance-summary-table) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Cố định thead th trên đỉnh mọi bảng khi cuộn dọc */
#screen-mainapp :where(table.ops-table, table.ep-employee-list-table, table.pp-table,
                       table.pp-main-table-v216, table.ui094-main-table-v2024,
                       table.attendance-summary-table, .app-section table) > thead > tr > th,
th.tnp-filterable-v28,
.ops-table thead th,
.ep-employee-list-table thead th,
.pp-table thead th,
.attendance-summary-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: var(--tnp23-navy, #0e2b4a) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22) !important;
}

/* Dark mode cho thead th */
.dark-mode #screen-mainapp :where(table.ops-table, table.ep-employee-list-table, table.pp-table,
                                  table.pp-main-table-v216, table.ui094-main-table-v2024,
                                  table.attendance-summary-table, .app-section table) > thead > tr > th,
.dark-mode th.tnp-filterable-v28,
.dark-mode .ops-table thead th,
.dark-mode .ep-employee-list-table thead th,
.dark-mode .pp-table thead th,
.dark-mode .attendance-summary-table thead th {
  background: #173f68 !important;
  color: #fff8eb !important;
}

/* Cột STT, Tên, Mã NV trong thead vừa sticky TOP vừa sticky LEFT (chỉ áp dụng cho cột có class .tp-sticky-1/2/3 để không chồng lấn) */
#screen-mainapp :where(table.ops-table, table.ep-employee-list-table, table.pp-table) thead th.tp-sticky-1 {
  position: sticky !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 25 !important;
  background: var(--tnp23-navy, #0e2b4a) !important;
}

#screen-mainapp :where(table.ops-table, table.ep-employee-list-table, table.pp-table) thead th.tp-sticky-2 {
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
  background: var(--tnp23-navy, #0e2b4a) !important;
}

#screen-mainapp :where(table.ops-table, table.ep-employee-list-table, table.pp-table) thead th.tp-sticky-3 {
  position: sticky !important;
  top: 0 !important;
  z-index: 24 !important;
  background: var(--tnp23-navy, #0e2b4a) !important;
}

.dark-mode #screen-mainapp :where(table.ops-table, table.ep-employee-list-table, table.pp-table) thead th.tp-sticky-1,
.dark-mode #screen-mainapp :where(table.ops-table, table.ep-employee-list-table, table.pp-table) thead th.tp-sticky-2,
.dark-mode #screen-mainapp :where(table.ops-table, table.ep-employee-list-table, table.pp-table) thead th.tp-sticky-3 {
  background: #173f68 !important;
}

/* Các cột sticky bên trái trong tbody giữ nền đặc 100% và z-index chuẩn để không chồng lấn khi cuộn ngang */
#screen-mainapp table.ops-table tbody td.tp-sticky-1 {
  position: sticky !important;
  left: 0 !important;
  z-index: 5 !important;
  background-color: #fffdf9 !important;
}
#screen-mainapp table.ops-table tbody td.tp-sticky-2 {
  position: sticky !important;
  z-index: 5 !important;
  background-color: #fffdf9 !important;
}
#screen-mainapp table.ops-table tbody td.tp-sticky-3 {
  position: sticky !important;
  z-index: 4 !important;
  background-color: #fffdf9 !important;
}
.dark-mode #screen-mainapp table.ops-table tbody td.tp-sticky-1,
.dark-mode #screen-mainapp table.ops-table tbody td.tp-sticky-2,
.dark-mode #screen-mainapp table.ops-table tbody td.tp-sticky-3 {
  background-color: #0d2339 !important;
}


/* ===== 2. BỐ CỤC MỤC HỢP ĐỒNG LAO ĐỘNG TỐI ĐA DIỆN TÍCH XEM ===== */

#screen-employees.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#employee-toolbar {
  grid-area: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: var(--ep-panel, #fff) !important;
  border: 1px solid var(--ep-line, rgba(201, 154, 76, 0.22)) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(7, 27, 49, 0.04) !important;
}

.dark-mode #employee-toolbar {
  background: var(--ep-panel, #102942) !important;
  border-color: rgba(227, 188, 112, 0.18) !important;
}

#employee-toolbar > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#employee-toolbar #employee-title {
  font-size: 17px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

#employee-toolbar > div:first-child > p {
  display: none !important; /* Ẩn dòng chú thích dài chiếm chỗ */
}

/* Cụm hành động bên phải: tabs + search + nút thêm mới + excel */
#employee-toolbar > div:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* Tabs Đang làm việc / Thôi việc dạng pills nhỏ gọn */
#employee-tabs-v198 {
  grid-area: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 2px !important;
  border: 1px solid var(--ep-line, rgba(201, 154, 76, 0.25)) !important;
  border-radius: 10px !important;
  background: rgba(14, 43, 74, 0.06) !important;
  align-self: center !important;
}

.dark-mode #employee-tabs-v198 {
  background: rgba(227, 188, 112, 0.07) !important;
  border-color: rgba(227, 188, 112, 0.22) !important;
}

#employee-tabs-v198 .employee-tab-v198 {
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

/* Thanh tìm kiếm nhỏ gọn nằm kế bên nút Thêm mới */
#employee-search-box {
  grid-area: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  width: clamp(170px, 18vw, 260px) !important;
  min-width: 160px !important;
  margin: 0 !important;
  align-self: center !important;
}

#emp-search-input {
  width: 100% !important;
  height: 30px !important;
  padding: 3px 8px 3px 26px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid var(--ep-line, rgba(201, 154, 76, 0.3)) !important;
  background: var(--ep-panel-strong, #fff) !important;
}

.dark-mode #emp-search-input {
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(227, 188, 112, 0.2) !important;
  color: #fff !important;
}

#employee-search-box .fa-magnifying-glass {
  left: 8px !important;
  font-size: 10px !important;
}

/* Các nút bấm trong toolbar */
#employee-toolbar button {
  min-height: 30px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

/* Bảng danh sách kéo lên sát toolbar */
#employee-list-container {
  grid-area: auto !important;
  margin-top: 0 !important;
}

#employee-list-container .ep-employee-list-shell {
  max-height: calc(100dvh - 236px) !important;
  min-height: 280px !important;
  border-radius: 6px !important;
}

@media (max-width: 900px) {
  #employee-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #employee-toolbar > div:last-child {
    justify-content: flex-start !important;
  }
  #employee-search-box {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ===== 3. ĐÃ BỎ TÍNH NĂNG PHÂN TRANG TOÀN BỘ GIAO DIỆN (HIỂN THỊ 100% DANH SÁCH) ===== */
.employee-toolbar-pager,
#employee-toolbar-pager,
#personnel-profile-toolbar-pager,
#insurance-toolbar-pager,
#attendance-toolbar-pager,
#payroll-toolbar-pager {
  display: none !important;
}

.dark-mode .employee-toolbar-pager {
  background: rgba(227, 188, 112, 0.07) !important;
  border-color: rgba(227, 188, 112, 0.22) !important;
}

.employee-toolbar-pager .ep-tb-pager-info {
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  padding-right: 2px !important;
  opacity: 0.85 !important;
}

.employee-toolbar-pager .ep-tb-pager-size select {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 4px !important;
  border: 1px solid var(--ep-line, rgba(201, 154, 76, 0.25)) !important;
  border-radius: 6px !important;
  background: var(--ep-panel, #fff) !important;
  color: inherit !important;
  outline: none !important;
  cursor: pointer !important;
}

.dark-mode .employee-toolbar-pager .ep-tb-pager-size select {
  background: #172b3c !important;
  color: #fff !important;
}

.employee-toolbar-pager .ep-tb-pager-btn {
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ep-line, rgba(201, 154, 76, 0.25)) !important;
  border-radius: 6px !important;
  background: var(--ep-panel, #fff) !important;
  color: inherit !important;
  cursor: pointer !important;
  font-size: 9px !important;
}

.dark-mode .employee-toolbar-pager .ep-tb-pager-btn {
  background: #172b3c !important;
  color: #fff !important;
}

.employee-toolbar-pager .ep-tb-pager-btn:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.employee-toolbar-pager .ep-tb-pager-page {
  font-size: 10px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  padding: 0 2px !important;
}

/* Ẩn dải banner phân trang cũ — dùng đa selector để phủ hết mọi vị trí inject */
:where(#employee-list-container, #personnel-profile-table, #insurance-table,
       #attendance-table, #payroll-table, .timepay-scroll-wrap,
       #screen-employees, #screen-attendance, #screen-payroll,
       #screen-personnel-profile, #screen-insurance) .tnp-pager-v26,
:where(#employee-list-container, #personnel-profile-table, #insurance-table,
       #attendance-table, #payroll-table, .timepay-scroll-wrap,
       #screen-employees, #screen-attendance, #screen-payroll) .payroll-pager-v32 {
  display: none !important;
}

/* Style cho nút sao lưu Excel khẩn cấp */
.excel-bak-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: linear-gradient(135deg,#1a6b2e,#2d9249) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: opacity .15s !important;
  white-space: nowrap !important;
  width: 100% !important;
  min-height: 34px !important;
}
.excel-bak-btn:hover { opacity: 0.88 !important; }
.dark-mode .excel-bak-btn { background: linear-gradient(135deg,#176225,#23803d) !important; }


/* ===== 4. THU GỌN VÀ CHÈN CHUNG HÀNG TOÀN BỘ CÁC THANH CÔNG CỤ (KHÔNG CHỪA KHOẢNG TRỐNG) ===== */

/* Ẩn triệt để các ghi chú dài dòng chiếm diện tích */
.timepay-scroll-note,
.pp-scroll-hint,
.pp-sensitive-note,
#screen-payroll > .glass-panel.rounded-3xl.p-4.mb-4 {
  display: none !important;
}

/* Chuẩn hóa thanh tiêu đề mọi màn hình thành 1 hàng ngang tinh gọn */
#screen-mainapp :where(#employee-toolbar, #attendance-header, #payroll-header,
                       #personnel-profile-header, #insurance-header,
                       #hr-overview-header, #hr-alerts-header, #permissions-header-v31,
                       #audit-header, #backup-header, #settings-header) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  margin-bottom: 5px !important;
  padding: 6px 12px !important;
  min-height: unset !important;
  background: var(--ep-panel, #fff) !important;
  border: 1px solid var(--ep-line, rgba(201, 154, 76, 0.22)) !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 10px rgba(7, 27, 49, 0.03) !important;
}

.dark-mode #screen-mainapp :where(#employee-toolbar, #attendance-header, #payroll-header,
                                 #personnel-profile-header, #insurance-header,
                                 #hr-overview-header, #hr-alerts-header, #permissions-header-v31,
                                 #audit-header, #backup-header, #settings-header) {
  background: var(--ep-panel, #102942) !important;
  border-color: rgba(227, 188, 112, 0.18) !important;
}

/* Tiêu đề gọn gàng, ẩn miêu tả dài */
#screen-mainapp :where(#employee-toolbar, #attendance-header, #payroll-header,
                       #personnel-profile-header, #insurance-header,
                       #hr-overview-header, #hr-alerts-header, #permissions-header-v31,
                       #audit-header, #backup-header, #settings-header) h2 {
  font-size: 16px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

#screen-mainapp :where(#employee-toolbar, #attendance-header, #payroll-header,
                       #personnel-profile-header, #insurance-header,
                       #hr-overview-header, #hr-alerts-header, #permissions-header-v31,
                       #audit-header, #backup-header, #settings-header) p,
#screen-mainapp :where(#personnel-profile-header, #insurance-header, #hr-overview-header, #hr-alerts-header) .ep-eyebrow {
  display: none !important;
}

/* Cụm thao tác & phân trang trên thanh tiêu đề */
#screen-mainapp :where(.ops-toolbar-group, .ep-page-actions) {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  margin: 0 !important;
  width: auto !important;
}

#screen-mainapp :where(.ops-toolbar-group, .ep-page-actions) button,
#screen-mainapp :where(.ops-toolbar-group, .ep-page-actions) input,
#screen-mainapp :where(.ops-toolbar-group, .ep-page-actions) select {
  min-height: 28px !important;
  height: 28px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
}

/* Thu gọn thanh liên kết & tìm kiếm của Chấm công và Bảng lương */
.linked-roster-toolbar-v195 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 3px 10px !important;
  margin-bottom: 4px !important;
  min-height: unset !important;
  border-radius: 10px !important;
}

.linked-roster-source-v195 {
  gap: 6px !important;
  font-size: 11px !important;
}

.linked-roster-source-v195 div b {
  font-size: 11px !important;
}

.linked-roster-source-v195 div small {
  display: none !important;
}

.linked-roster-search-v195 {
  height: 28px !important;
}

.linked-roster-search-v195 input {
  height: 28px !important;
  padding: 2px 8px 2px 24px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

.linked-roster-search-v195 button {
  height: 24px !important;
  width: 24px !important;
  padding: 0 !important;
}

/* Thu gọn dải tab phòng ban Chấm công và Bảng lương */
:where(#tnp-departments-v29, #tnp-departments-v29-payroll) {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-bottom: 4px !important;
  padding: 2px 0 !important;
  overflow-x: auto !important;
}

:where(#tnp-departments-v29, #tnp-departments-v29-payroll) button {
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  min-height: 26px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

/* Thu gọn các thẻ KPI không làm chiếm dòng */
:where(#attendance-kpis, #payroll-kpis, #insurance-kpis, #hr-alert-kpis, #hr-overview-kpis).ops-kpi-grid,
.ep-dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
}

:where(#attendance-kpis, #payroll-kpis, #insurance-kpis) .ops-kpi,
.ep-stat-card {
  padding: 4px 8px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
}

:where(#attendance-kpis, #payroll-kpis, #insurance-kpis) .ops-kpi-label,
.ep-stat-card small {
  font-size: 10px !important;
  font-weight: 800 !important;
  margin-bottom: 1px !important;
  opacity: 0.7 !important;
}

:where(#attendance-kpis, #payroll-kpis, #insurance-kpis) .ops-kpi-value,
.ep-stat-card b {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

/* Thu gọn toolbar danh sách Lý lịch & Bảo hiểm */
.ep-list-toolbar {
  padding: 3px 8px !important;
  margin-bottom: 3px !important;
  gap: 8px !important;
  min-height: unset !important;
}

.ep-list-toolbar strong {
  font-size: 12px !important;
}

.ep-list-toolbar small {
  font-size: 11px !important;
}

.ep-list-toolbar .ops-input {
  height: 28px !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  max-width: 280px !important;
}

/* ===== 5. KHUNG CUỘN BẢNG CỐ ĐỊNH CHIỀU CAO & GIỮ NGUYÊN TIÊU ĐỀ KHI LĂN CHUỘT ===== */

/* Khung cuộn nội bộ cho tất cả các bảng chính */
#employee-list-container .ep-employee-list-shell,
#attendance-table,
#payroll-table,
#personnel-profile-table,
#insurance-table,
.pp-table-scroll,
.ep-table-scroll,
.attendance-summary-scroll {
  max-height: calc(100dvh - 238px) !important;
  min-height: 260px !important;
  overflow: auto !important;
  position: relative !important;
  border: 1.5px solid var(--ep-line, rgba(201, 154, 76, 0.45)) !important;
  border-bottom: 8px solid #b88636 !important;
  border-radius: 6px !important;
  background: var(--ep-panel, #fff) !important;
}

.dark-mode :where(#attendance-table, #payroll-table, #personnel-profile-table, #insurance-table, .ep-employee-list-shell) {
  background: var(--ep-panel, #0c2033) !important;
  border-color: rgba(227, 188, 112, 0.35) !important;
  border-bottom: 8px solid #d4a24c !important;
}

/* Cố định thead th trên đỉnh mọi bảng khi lăn chuột dọc */
:where(#attendance-table, #payroll-table, #employee-list-container, #personnel-profile-table, #insurance-table) table > thead > tr > th,
:where(.ops-table, .ep-employee-list-table, .pp-table, .pp-main-table-v216, .attendance-summary-table) > thead > tr > th {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: var(--tnp23-navy, #0e2b4a) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22) !important;
}

.dark-mode :where(#attendance-table, #payroll-table, #employee-list-container, #personnel-profile-table, #insurance-table) table > thead > tr > th,
.dark-mode :where(.ops-table, .ep-employee-list-table, .pp-table, .pp-main-table-v216, .attendance-summary-table) > thead > tr > th {
  background: #173f68 !important;
  color: #fff8eb !important;
}

/* Cột cố định STT, Tên, Mã NV khi cuộn ngang */
:where(#attendance-table, #payroll-table) thead th.tp-sticky-1,
:where(#attendance-table, #payroll-table) tbody td.tp-sticky-1 {
  position: sticky !important;
  left: 0 !important;
  z-index: 22 !important;
}

:where(#attendance-table, #payroll-table) thead th.tp-sticky-2,
:where(#attendance-table, #payroll-table) tbody td.tp-sticky-2 {
  position: sticky !important;
  left: 36px !important;
  z-index: 22 !important;
}

:where(#attendance-table, #payroll-table) thead th.tp-sticky-3,
:where(#attendance-table, #payroll-table) tbody td.tp-sticky-3 {
  position: sticky !important;
  left: 168px !important;
  z-index: 21 !important;
}

/* thead th góc cố định kép (vừa sticky top vừa sticky left) */
:where(#attendance-table, #payroll-table) thead th.tp-sticky-1,
:where(#attendance-table, #payroll-table) thead th.tp-sticky-2,
:where(#attendance-table, #payroll-table) thead th.tp-sticky-3 {
  top: 0 !important;
  z-index: 30 !important;
}

/* =========================================================================
   TNPFURNITURE v3.4 NEW STYLES:
   - Sidebar responsive push / collapse
   - Vietnam solar-lunar digital clock
   - KPI & Formula view toggle & max height expansion
   - Logo editor styling
   ========================================================================= */

/* ===== SIDEBAR CO GIÃN THUẬN TIỆN (KHÔNG CHE KHUẤT DỮ LIỆU) ===== */
@media (min-width: 901px) {
  :root {
    --ep-primary-w: 84px;
    --ep-secondary-w: 272px;
  }

  /* Khi Sidebar MỞ (show): Đẩy Topbar và Nội dung sang phải đúng 356px */
  body:not(.ep-sidebar-collapsed) {
    --ep-shell-left: calc(var(--ep-primary-w) + var(--ep-secondary-w)) !important;
  }
  body:not(.ep-sidebar-collapsed) .ep-secondary-sidebar {
    left: var(--ep-primary-w) !important;
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1) !important;
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.12) !important;
  }
  body:not(.ep-sidebar-collapsed) .ep-topbar {
    left: calc(var(--ep-primary-w) + var(--ep-secondary-w)) !important;
    transition: left .22s cubic-bezier(.2, .8, .2, 1) !important;
  }
  body:not(.ep-sidebar-collapsed) .ep-main-content {
    margin-left: calc(var(--ep-primary-w) + var(--ep-secondary-w)) !important;
    transition: margin-left .22s cubic-bezier(.2, .8, .2, 1) !important;
  }

  /* Khi Sidebar THU GỌN (collapsed): Thu về sát 84px, co giãn nội dung tối đa toàn màn hình */
  body.ep-sidebar-collapsed {
    --ep-shell-left: var(--ep-primary-w) !important;
  }
  body.ep-sidebar-collapsed .ep-secondary-sidebar {
    transform: translate3d(calc(-100% - 15px), 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s .22s !important;
  }
  body.ep-sidebar-collapsed .ep-topbar {
    left: var(--ep-primary-w) !important;
    transition: left .22s cubic-bezier(.2, .8, .2, 1) !important;
  }
  body.ep-sidebar-collapsed .ep-main-content {
    margin-left: var(--ep-primary-w) !important;
    transition: margin-left .22s cubic-bezier(.2, .8, .2, 1) !important;
  }

  /* Nút Toggle Sidebar trên Desktop */
  .ep-desktop-sidebar-toggle {
    display: grid !important;
    place-items: center;
    cursor: pointer;
    transition: all .18s ease;
  }
  .ep-desktop-sidebar-toggle:hover {
    background: rgba(201, 154, 76, 0.16) !important;
    color: #c99a4c !important;
  }
  .ep-desktop-sidebar-toggle.active {
    background: linear-gradient(135deg, #c99a4c, #9b6d2c) !important;
    color: #ffffff !important;
  }

  .ep-secondary-collapse-btn {
    display: grid !important;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--ep-line);
    background: transparent;
    color: var(--ep-text);
    cursor: pointer;
    font-size: 11px;
    transition: all .18s ease;
  }
  .ep-secondary-collapse-btn:hover {
    background: rgba(201, 154, 76, 0.14);
    color: #c99a4c;
  }
}

@media (max-width: 900px) {
  .ep-desktop-sidebar-toggle,
  .ep-secondary-collapse-btn {
    display: none !important;
  }
}

/* ===== ĐỒNG HỒ ĐIỆN TỬ DƯƠNG LỊCH & ÂM LỊCH VIỆT NAM TRÊN THANH TIÊU ĐỀ ===== */
.ep-topbar-clock-widget {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 12px !important;
  background: rgba(14, 43, 74, 0.05) !important;
  border: 1px solid rgba(201, 154, 76, 0.28) !important;
  border-radius: 14px !important;
  margin-left: 10px !important;
  user-select: none !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.dark-mode .ep-topbar-clock-widget {
  background: rgba(227, 188, 112, 0.06) !important;
  border-color: rgba(227, 188, 112, 0.22) !important;
}

.ep-clock-main {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ep-clock-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  color: #c99a4c !important;
  letter-spacing: 0.05em !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 0 10px rgba(201, 154, 76, 0.25) !important;
}
.dark-mode .ep-clock-time {
  color: #e5c78f !important;
}

.ep-clock-dates {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  border-left: 1px solid rgba(201, 154, 76, 0.25) !important;
  padding-left: 9px !important;
}
.ep-clock-solar {
  font-size: 11px !important;
  font-weight: 850 !important;
  color: var(--ep-text, #162a3d) !important;
  line-height: 1.15 !important;
}
.ep-clock-lunar {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #9b6d2c !important;
  line-height: 1.15 !important;
}
.dark-mode .ep-clock-lunar {
  color: #f0d8aa !important;
}

@media (max-width: 1080px) {
  .ep-clock-dates {
    display: none !important;
  }
  .ep-topbar-clock-widget {
    padding: 4px 8px !important;
  }
}
@media (max-width: 650px) {
  .ep-topbar-clock-widget {
    display: none !important;
  }
}

/* ===== NÚT ẨN/HIỆN KPI & CÔNG THỨC TINH GỌN (CO GIÃN TỐI ĐA) ===== */
.tnp-panel-collapsed {
  display: none !important;
}

.tnp-view-toggle-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(14, 43, 74, 0.06) !important;
  padding: 2px 4px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(201, 154, 76, 0.28) !important;
  vertical-align: middle !important;
}
.dark-mode .tnp-view-toggle-wrap {
  background: rgba(227, 188, 112, 0.08) !important;
  border-color: rgba(227, 188, 112, 0.24) !important;
}

.tnp-view-toggle-btn {
  border: none !important;
  background: transparent !important;
  color: var(--ep-muted, #7b6a51) !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all .16s ease !important;
  white-space: nowrap !important;
  min-height: 26px !important;
  height: 26px !important;
}
.tnp-view-toggle-btn:hover {
  color: #c99a4c !important;
  background: rgba(201, 154, 76, 0.1) !important;
}
.tnp-view-toggle-btn.active {
  background: #c99a4c !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
}
.dark-mode .tnp-view-toggle-btn.active {
  background: linear-gradient(135deg, #c99a4c, #9b6d2c) !important;
  color: #ffffff !important;
}

/* Khi ẩn cả 2 panel hoặc ẩn KPI: bảng mở rộng tối đa nhưng luôn chừa chân tab xem ~2mm trong màn hình */
#screen-payroll:has(#payroll-kpis.tnp-panel-collapsed) #payroll-table,
#screen-attendance:has(#attendance-kpis.tnp-panel-collapsed) #attendance-table,
#screen-insurance:has(#insurance-kpis.tnp-panel-collapsed) #insurance-table,
.tnp-hide-att-kpi #attendance-table,
.tnp-hide-payroll-kpi #payroll-table {
  max-height: calc(100dvh - 228px) !important;
  height: auto !important;
}

/* ===== LOGO EDITOR STYLES ===== */
#logo-preview-dark, #logo-preview-light {
  transition: all .2s ease;
}
.ep-primary-logo, #nav-logo, #auth-logo {
  transition: width .2s ease, height .2s ease, border-radius .2s ease;
}

/* ===== NÚT GẠT IPHONE (iOS TOGGLE SWITCH) ===== */
.tnp-ios-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  flex: none;
}
.tnp-ios-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.tnp-ios-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  border-radius: 34px;
  transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}
.dark-mode .tnp-ios-slider {
  background-color: #475569;
}
.tnp-ios-slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26), 0 0 1px rgba(0, 0, 0, 0.15);
}
.tnp-ios-switch input:checked + .tnp-ios-slider {
  background-color: #34c759 !important; /* Chuẩn Apple iOS Green */
}
.tnp-ios-switch input:checked + .tnp-ios-slider::before {
  transform: translateX(22px);
}

/* ===== TIÊU ĐỀ DẠNG NÚT CÓ ĐIỂM NHẤN LỚN & RÕ NÉT ===== */
/* 1. Tiêu đề Topbar */
.ep-breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#topbar-group-label {
  font-size: 13px !important;
  font-weight: 850 !important;
  color: var(--ep-muted, #7b6a51) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
#topbar-page-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  color: #1a1208 !important;
  background: linear-gradient(135deg, rgba(201, 154, 76, 0.25) 0%, rgba(201, 154, 76, 0.08) 100%) !important;
  border: 1.5px solid rgba(201, 154, 76, 0.6) !important;
  padding: 5px 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(201, 154, 76, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
}
.dark-mode #topbar-page-title {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(227, 188, 112, 0.3) 0%, rgba(201, 154, 76, 0.12) 100%) !important;
  border-color: rgba(227, 188, 112, 0.6) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* 2. Tiêu đề các màn hình chính (Dạng nút nổi bật, lớn và rõ nét) */
:where(.ep-page-head h2, #employee-title, #settings-title, .ops-toolbar h2,
       #payroll-header h2, #attendance-header h2, #audit-header h2,
       #accounts-header h2, #permissions-header-v31 h2, #backup-header h2) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  font-weight: 950 !important;
  color: #1a1208 !important;
  background: linear-gradient(135deg, rgba(201, 154, 76, 0.18) 0%, rgba(201, 154, 76, 0.05) 100%) !important;
  border: 2px solid rgba(201, 154, 76, 0.5) !important;
  padding: 8px 22px !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(201, 154, 76, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  letter-spacing: 0.02em !important;
  margin: 2px 0 6px 0 !important;
  line-height: 1.15 !important;
  transition: all 0.2s ease !important;
}
.dark-mode :where(.ep-page-head h2, #employee-title, #settings-title, .ops-toolbar h2,
                  #payroll-header h2, #attendance-header h2, #audit-header h2,
                  #accounts-header h2, #permissions-header-v31 h2, #backup-header h2) {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(227, 188, 112, 0.25) 0%, rgba(201, 154, 76, 0.1) 100%) !important;
  border-color: rgba(227, 188, 112, 0.55) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* ===== THANH ĐIỀU KHIỂN & BANNER KPI ĐỂ TĂNG DIỆN TÍCH BẢNG ===== */
.tnp-kpi-bar-ctrl {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 8px !important;
  margin-bottom: 4px !important;
}
.tnp-kpi-bar-title {
  font-size: 11px !important;
  font-weight: 850 !important;
  color: var(--ep-muted, #7b6a51) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.tnp-kpi-hide-btn {
  border: 1px solid rgba(201, 154, 76, 0.35) !important;
  background: rgba(201, 154, 76, 0.08) !important;
  color: var(--ep-text, #332515) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all .18s ease !important;
}
.tnp-kpi-hide-btn:hover {
  background: rgba(201, 154, 76, 0.22) !important;
  border-color: rgba(201, 154, 76, 0.65) !important;
  color: #9b6d2c !important;
}
.dark-mode .tnp-kpi-hide-btn {
  background: rgba(227, 188, 112, 0.12) !important;
  color: #fff !important;
  border-color: rgba(227, 188, 112, 0.4) !important;
}

.tnp-kpi-collapsed-banner {
  padding: 7px 14px !important;
  background: linear-gradient(135deg, rgba(201, 154, 76, 0.12), rgba(201, 154, 76, 0.04)) !important;
  border: 1px dashed rgba(201, 154, 76, 0.5) !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--ep-muted, #7b6a51) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  transition: all .2s ease !important;
}
.tnp-kpi-collapsed-banner:hover {
  background: rgba(201, 154, 76, 0.22) !important;
  border-color: #c99a4c !important;
  color: var(--ep-text, #332515) !important;
}
.dark-mode .tnp-kpi-collapsed-banner {
  color: #e0c28b !important;
  background: rgba(227, 188, 112, 0.08) !important;
  border-color: rgba(227, 188, 112, 0.4) !important;
}

/* =========================================================================
   TNPFURNITURE v3.8 — BỎ CHUYỂN TRANG TOÀN BỘ + CHÂN TAB XEM ĐỘ DÀY ~2 MM (8PX)
   & HIỂN THỊ TRỌN VẸN 100% DÒNG CUỐI (KHÔNG BỊ CẮT KHUẤT DƯỚI MÀN HÌNH)
   ========================================================================= */

/* 1. Ẩn triệt để mọi thanh chuyển trang (pagination) trên toàn bộ phần mềm */
.employee-toolbar-pager,
#employee-toolbar-pager,
#personnel-profile-toolbar-pager,
#insurance-toolbar-pager,
#attendance-toolbar-pager,
#payroll-toolbar-pager,
.tnp-pager-v26,
.payroll-pager-v32,
[data-tnp-pager-v26] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* 2. Tắt content-visibility: auto trên các dòng bảng để trình duyệt tính chính xác 100% chiều cao khi cuộn đến dòng cuối */
#screen-mainapp :where(table tbody tr),
#screen-mainapp .app-section.active :where(.ep-employee-list-table tbody tr, .pp-table tbody tr, .ops-table tbody tr, .ep-insurance-v200 tbody tr, .attendance-summary-table tbody tr) {
  content-visibility: visible !important;
  contain: none !important;
}

/* 3. Khung ngoài danh sách nhân sự (.ep-employee-list-panel): CHỈ GIỮ DUY NHẤT 1 VẠCH DƯỚI (8px), LOẠI BỎ VẠCH TRÊN */
#employee-list-container .ep-employee-list-panel,
.ep-employee-list-panel {
  border-radius: 6px !important;
  border: 1.5px solid rgba(201, 154, 76, 0.52) !important;
  border-top: 1px solid rgba(201, 154, 76, 0.38) !important;
  border-bottom: 8px solid #b88636 !important; /* Duy nhất 1 vạch dưới */
  margin-bottom: 8px !important;
  overflow: hidden !important;
}

.dark-mode #employee-list-container .ep-employee-list-panel,
.dark-mode .ep-employee-list-panel {
  border-color: rgba(227, 188, 112, 0.42) !important;
  border-top: 1px solid rgba(227, 188, 112, 0.3) !important;
  border-bottom: 8px solid #d4a24c !important;
}

/* 4. Khung cuộn bảng độc lập (khi không nằm lồng trong thẻ bao ngoài): chỉ có duy nhất 1 vạch dưới (8px), sát dòng cuối không hở khoảng trắng */
#employee-list-container .ep-employee-list-shell,
.ep-employee-list-panel > .ep-employee-list-shell,
#attendance-table,
#payroll-table,
#personnel-profile-table,
#insurance-table,
.ops-table-wrap,
.pp-table-scroll,
.ep-table-scroll,
.attendance-summary-scroll,
.timepay-scroll-wrap {
  border-radius: 6px !important;
  border: 1.5px solid var(--ep-line, rgba(201, 154, 76, 0.48)) !important;
  border-top: 1px solid var(--ep-line, rgba(201, 154, 76, 0.36)) !important;
  border-bottom: 8px solid #b88636 !important;
  padding-bottom: 0 !important;
  margin-bottom: 6px !important;
  box-sizing: border-box !important;
}

.dark-mode :where(#employee-list-container .ep-employee-list-shell, #attendance-table, #payroll-table,
                  #personnel-profile-table, #insurance-table, .ops-table-wrap,
                  .pp-table-scroll, .ep-table-scroll, .attendance-summary-scroll, .timepay-scroll-wrap) {
  border-color: rgba(227, 188, 112, 0.4) !important;
  border-top: 1px solid rgba(227, 188, 112, 0.3) !important;
  border-bottom: 8px solid #d4a24c !important;
}

/* Chiều cao chuẩn theo từng màn hình để vạch dưới duy nhất luôn nằm trọn trong khung nhìn màn hình */
#employee-list-container .ep-employee-list-shell,
.ep-employee-list-panel > .ep-employee-list-shell {
  max-height: calc(100dvh - 238px) !important;
}
#personnel-profile-table,
.pp-table-scroll {
  max-height: calc(100dvh - 246px) !important;
}
#insurance-table,
.ep-table-scroll {
  max-height: calc(100dvh - 286px) !important;
}
#attendance-table,
#payroll-table,
#attendance-table.timepay-scroll-wrap,
#payroll-table.timepay-scroll-wrap {
  max-height: calc(100dvh - 296px) !important;
}

/* Các thẻ bao ngoài: chỉ giữ duy nhất 1 vạch dưới (8px), không có vạch trên */
#screen-mainapp :where(.ep-list-card, .ep-panel, .attendance-summary-card, .timepay-formula-card, .glass-panel) {
  border-radius: 6px !important;
  border-top: 1px solid rgba(201, 154, 76, 0.34) !important;
  border-bottom: 8px solid #b88636 !important;
}
.dark-mode #screen-mainapp :where(.ep-list-card, .ep-panel, .attendance-summary-card, .timepay-formula-card, .glass-panel) {
  border-top: 1px solid rgba(227, 188, 112, 0.28) !important;
  border-bottom: 8px solid #d4a24c !important;
}

/* QUY TẮC TOÀN CỤC v3.13: Khi bất kỳ khung cuộn / thẻ con nào nằm bên trong khung bao ngoài,
   TRIỆT TIÊU 100% vạch trong (vạch trên) để toàn phần mềm CHỈ CÒN DUY NHẤT 1 VẠCH DƯỚI */
#screen-mainapp :is(.ep-employee-list-panel, .ep-list-card, .ep-panel, .attendance-summary-card, .timepay-formula-card, .glass-panel, #attendance-table, #payroll-table)
  :is(.ep-employee-list-shell, #personnel-profile-table, #insurance-table, #attendance-table, #payroll-table, .ops-table-wrap, .pp-table-scroll, .ep-table-scroll, .attendance-summary-scroll, .timepay-scroll-wrap, .ep-list-card, .ep-panel, .glass-panel),
.dark-mode #screen-mainapp :is(.ep-employee-list-panel, .ep-list-card, .ep-panel, .attendance-summary-card, .timepay-formula-card, .glass-panel, #attendance-table, #payroll-table)
  :is(.ep-employee-list-shell, #personnel-profile-table, #insurance-table, #attendance-table, #payroll-table, .ops-table-wrap, .pp-table-scroll, .ep-table-scroll, .attendance-summary-scroll, .timepay-scroll-wrap, .ep-list-card, .ep-panel, .glass-panel),
.modal-backdrop :is(.modal-card, .ep-history-modal-v2021)
  :is(.ep-employee-list-shell, .ops-table-wrap, .pp-table-scroll, .ep-table-scroll, .attendance-summary-scroll, .timepay-scroll-wrap, .ep-list-card, .ep-panel, .glass-panel) {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 0 4px 4px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* LOẠI BỎ HOÀN TOÀN VẠCH TRÊN (6px) dưới dòng cuối cùng của mọi bảng trong toàn phần mềm */
#screen-mainapp table,
.modal-backdrop table {
  margin-bottom: 0 !important;
}
#screen-mainapp table > tbody > tr:last-child > td,
.dark-mode #screen-mainapp table > tbody > tr:last-child > td,
.modal-backdrop table > tbody > tr:last-child > td,
.dark-mode .modal-backdrop table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
  padding-bottom: 8px !important;
}

/* Làm đẹp nút "Xem cảnh báo" và cụm nút Thao tác trong danh sách nhân sự */
#employee-list-container .ep-list-alert button {
  padding: 3px 9px !important;
  border-radius: 6px !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#employee-list-container .ep-list-actions {
  gap: 5px !important;
  min-width: 90px !important;
}

/* 5. Các thanh Tab xem: bỏ vạch kép bao ngoài để mỗi nút Tab chỉ có duy nhất 1 vạch chỉ thị dưới */
#screen-mainapp :where(#employee-tabs-v198, #tnp-departments-v29, #tnp-departments-v29-payroll, [role="tablist"]),
.modal-backdrop :where([role="tablist"], .ep-history-tabs-v2021) {
  border-radius: 6px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
}

#screen-mainapp :where(.employee-tab-v198, #tnp-departments-v29 button, [role="tab"]) {
  border-radius: 5px !important;
  border-top: 0 !important;
  border-bottom: 2px solid rgba(14, 43, 74, 0.24) !important;
  box-shadow: none !important;
}

#screen-mainapp :where(.employee-tab-v198.active, #tnp-departments-v29 button[aria-selected="true"], [role="tab"].active, [role="tab"][aria-selected="true"]) {
  border-radius: 5px !important;
  border-top: 0 !important;
  border-bottom: 3px solid #c99a4c !important;
  box-shadow: none !important;
}

/* =========================================================================
   TNPFURNITURE v3.10 — THU NHỎ KHUNG TÀI KHOẢN & TÌM KIẾM TOPBAR, NÚT UNDO/REDO/LỊCH SỬ
   TO RÕ ĐẸP KHÔNG TRÀN CHỮ, MỤC HỒ SƠ NỀN ĐẬM TỐI NỔI BẬT TRÊN VÙNG NGOÀI MÀU NHẸ
   KHÔNG CHỒNG LẤN, VÀ HIỆU ỨNG HOVER NÂNG MÀU RÕ RÀNG TRƯỚC KHI CHỌN
   ========================================================================= */

/* ----- 1. THU NHỎ KHUNG TÀI KHOẢN (#user-menu-button) & TÌM KIẾM + NÚT UNDO/REDO/LỊCH SỬ TO, RÕ, ĐẸP ----- */
#screen-mainapp #main-header.ep-topbar {
  height: 56px !important;
  min-height: 56px !important;
  padding: 4px 12px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  border-bottom: 2px solid rgba(201, 154, 76, 0.58) !important;
}

#screen-mainapp #main-header .ep-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

#screen-mainapp #main-header #topbar-group-label {
  font-size: 11px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

#screen-mainapp #main-header #topbar-page-title {
  font-size: 13.5px !important;
  font-weight: 950 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

/* Thu gọn đồng hồ trên thanh Topbar */
#screen-mainapp #main-header #ep-topbar-clock-widget.ep-topbar-clock-widget {
  padding: 3px 8px !important;
  gap: 7px !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
  margin-left: 4px !important;
  border: 1px solid rgba(201, 154, 76, 0.45) !important;
}
#screen-mainapp #main-header #ep-topbar-clock-widget .ep-clock-time {
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
}
#screen-mainapp #main-header #ep-topbar-clock-widget .ep-clock-solar,
#screen-mainapp #main-header #ep-topbar-clock-widget .ep-clock-lunar {
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* Cho khung tìm kiếm nhỏ gọn lại */
#screen-mainapp #main-header .ep-topbar-search {
  flex: 0 1 160px !important;
  width: clamp(115px, 11vw, 165px) !important;
  min-width: 110px !important;
  max-width: 170px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1.5px solid rgba(14, 43, 74, 0.28) !important;
  background: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
}
.dark-mode #screen-mainapp #main-header .ep-topbar-search {
  background: #0b2035 !important;
  border-color: rgba(227, 188, 112, 0.42) !important;
}
#screen-mainapp #main-header .ep-topbar-search > i {
  position: static !important;
  transform: none !important;
  font-size: 12px !important;
  flex: 0 0 auto !important;
}
#screen-mainapp #main-header .ep-topbar-search input#global-search-input {
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 0 !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Cụm nút chức năng Topbar */
#screen-mainapp #main-header .ep-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}

/* Các nút công cụ dạng biểu tượng lớn (Menu, Cảnh báo, Sáng/Tối, DuLieu, Bảo mật, Đăng xuất) — kích thước 40x38px, icon 18px to rõ, KHÔNG tràn chữ */
#screen-mainapp #main-header button.ep-topbar-icon:not(.ep-tb-labeled-btn),
#screen-mainapp #main-header button#ep-security-v27 {
  position: relative !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #133458 0%, #0e2b4a 100%) !important;
  color: #fff8eb !important;
  border: 1.5px solid #c99a4c !important;
  box-shadow: 0 3px 8px rgba(7, 27, 49, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

#screen-mainapp #main-header button.ep-topbar-icon:not(.ep-tb-labeled-btn) > i.fa-solid,
#screen-mainapp #main-header button#ep-security-v27 > i.fa-solid {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  flex: 0 0 18px !important;
  color: #ffd97d !important;
}

/* Các nút Undo, Redo, Lịch sử (.ep-tb-labeled-btn) — to, rõ, đẹp, có biểu tượng + chữ nằm gọn 100% bên trong khung nút */
#screen-mainapp #main-header button.ep-topbar-icon.ep-tb-labeled-btn {
  position: relative !important;
  width: auto !important;
  min-width: 78px !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #173f68 0%, #0e2b4a 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #d4a24c !important;
  box-shadow: 0 3px 8px rgba(7, 27, 49, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

#screen-mainapp #main-header button.ep-topbar-icon.ep-tb-labeled-btn > i.fa-solid {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  flex: 0 0 16px !important;
  color: #ffd97d !important;
}

#screen-mainapp #main-header button.ep-topbar-icon.ep-tb-labeled-btn > .ep-tb-btn-label {
  display: inline-block !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

/* Nút Undo & Redo khi chưa có thay đổi vẫn rõ nét, dễ nhìn */
#screen-mainapp #main-header button#ep-undo-v2021:disabled,
#screen-mainapp #main-header button#ep-redo-v2021:disabled {
  opacity: 0.85 !important;
  background: linear-gradient(135deg, #1b3a5c 0%, #102842 100%) !important;
  color: #f0e6d2 !important;
  border-color: rgba(201, 154, 76, 0.65) !important;
  cursor: pointer !important;
}
#screen-mainapp #main-header button#ep-undo-v2021.is-ready:not(:disabled),
#screen-mainapp #main-header button#ep-redo-v2021.is-ready:not(:disabled) {
  background: linear-gradient(135deg, #1e568f 0%, #0f355c 100%) !important;
  border-color: #ffca57 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(201, 154, 76, 0.35), 0 0 0 1px rgba(255, 202, 87, 0.4) !important;
}

/* Nút Lịch sử nổi bật */
#screen-mainapp #main-header button#ep-history-v2021 {
  min-width: 88px !important;
  background: linear-gradient(135deg, #194573 0%, #0e2b4a 100%) !important;
  border-color: #e3bc70 !important;
}
#screen-mainapp #main-header button#ep-history-v2021 > .ep-tb-btn-label {
  color: #ffe8a3 !important;
}

/* Nút Máy chủ / DuLieu */
#screen-mainapp #main-header button#ep-folder-v2021 {
  background: linear-gradient(135deg, #0f4c45 0%, #092e2a 100%) !important;
  border-color: #34d399 !important;
}
#screen-mainapp #main-header button#ep-folder-v2021 > i.fa-solid {
  color: #6ee7b7 !important;
}

/* Nút Bảo mật */
#screen-mainapp #main-header button#ep-security-v27 {
  background: linear-gradient(135deg, #4a3314 0%, #291b09 100%) !important;
  border-color: #f59e0b !important;
}
#screen-mainapp #main-header button#ep-security-v27 > i.fa-solid {
  color: #fbbf24 !important;
}

/* Nút Đăng xuất */
#screen-mainapp #main-header button.ep-logout-icon {
  background: linear-gradient(135deg, #7f1d1d 0%, #4c0d0d 100%) !important;
  border-color: #f87171 !important;
}
#screen-mainapp #main-header button.ep-logout-icon > i.fa-solid {
  color: #fca5a5 !important;
}

/* THU NHỎ KHUNG TÀI KHOẢN (#user-menu-button.ep-user-chip — khung rộng "Quản trị viên TINH..." trong ảnh chụp) */
#screen-mainapp #main-header #user-menu-button.ep-user-chip {
  width: auto !important;
  min-width: 0 !important;
  max-width: 112px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 3px 8px 3px 5px !important;
  border-radius: 10px !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #0b223b 0%, #163a63 100%) !important;
  border: 1.5px solid #c99a4c !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(7, 27, 49, 0.24) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: all 0.16s ease !important;
}
#screen-mainapp #main-header #user-menu-button.ep-user-chip .ep-user-avatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #c99a4c, #9b6d2c) !important;
  color: #ffffff !important;
  flex: 0 0 26px !important;
}
#screen-mainapp #main-header #user-menu-button.ep-user-chip > div:last-child {
  min-width: 0 !important;
  max-width: 68px !important;
  overflow: hidden !important;
}
#screen-mainapp #main-header #user-menu-button.ep-user-chip #nav-username {
  display: block !important;
  max-width: 68px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}
#screen-mainapp #main-header #user-menu-button.ep-user-chip #topbar-user-role {
  display: block !important;
  max-width: 68px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #f3d292 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

@media (max-width: 1680px) {
  #screen-mainapp #main-header #ep-topbar-clock-widget .ep-clock-dates {
    display: none !important;
  }
}

/* ----- 2. MỤC HỒ SƠ (V3.11): PHỐI MÀU CHUẨN GIAO DIỆN SÁNG & TỐI • RÕ RÀNG KHÔNG CHỒNG LẤN ----- */

/* 2A. Vùng ngoài (Outer backdrop & vùng bao ngoài màn hình) dịu mắt theo chế độ Sáng / Tối */
#screen-mainapp .ep-main-content {
  background-color: #f3ece0 !important;
  background-image: linear-gradient(180deg, #f6f1e8 0%, #ede3d3 100%) !important;
  padding: 58px 10px 16px !important;
}
body.dark-mode #screen-mainapp .ep-main-content {
  background-color: #102236 !important;
  background-image: linear-gradient(180deg, #13273e 0%, #0d1d30 100%) !important;
}
#screen-mainapp .ep-main-content > .app-section {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

#personnel-profile-archive-modal-v216.modal-backdrop,
#insurance-profile-modal-v2024.modal-backdrop,
#payroll-profile-modal-v32.modal-backdrop,
#employee-contract-profile-modal-v30.modal-backdrop,
#ep-history-overlay-v2021.ep-history-overlay-v2021 {
  background-color: rgba(232, 221, 203, 0.78) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
body.dark-mode #personnel-profile-archive-modal-v216.modal-backdrop,
body.dark-mode #insurance-profile-modal-v2024.modal-backdrop,
body.dark-mode #payroll-profile-modal-v32.modal-backdrop,
body.dark-mode #employee-contract-profile-modal-v30.modal-backdrop,
body.dark-mode #ep-history-overlay-v2021.ep-history-overlay-v2021 {
  background-color: rgba(7, 18, 32, 0.82) !important;
}

/* 2B. Khung bao ngoài của hộp thoại Hồ sơ (.modal-card):
   - Giao diện SÁNG: nền Kem Ngà ấm (#fbf7f0 -> #f2e8d7), chữ Xanh Navy đậm (#0e2b4a)
   - Giao diện TỐI: nền Xanh Slate đậm (#162c46 -> #102238), chữ Trắng Kem (#fff8eb)
   (Luôn khai báo background-color tường minh để vượt qua kiểm tra runUi094DarkThemeCheckV27) */
#personnel-profile-archive-modal-v216 > .modal-card,
#insurance-profile-modal-v2024 > .modal-card,
#payroll-profile-modal-v32 > .modal-card,
#employee-contract-profile-modal-v30 > .modal-card,
#ep-history-overlay-v2021 > .ep-history-modal-v2021 {
  background-color: #fbf7f0 !important;
  background-image: linear-gradient(180deg, #fffdf9 0%, #f2e8d7 100%) !important;
  color: #0e2b4a !important;
  border: 2px solid #c99a4c !important;
  border-bottom: 8px solid #b88636 !important;
  border-radius: 13px !important;
  padding: 18px 20px !important;
  box-shadow: 0 22px 54px rgba(14, 43, 74, 0.28) !important;
  overflow-x: hidden !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 > .modal-card,
body.dark-mode #insurance-profile-modal-v2024 > .modal-card,
body.dark-mode #payroll-profile-modal-v32 > .modal-card,
body.dark-mode #employee-contract-profile-modal-v30 > .modal-card,
body.dark-mode #ep-history-overlay-v2021 > .ep-history-modal-v2021 {
  background-color: #162c46 !important;
  background-image: linear-gradient(180deg, #1a3452 0%, #102238 100%) !important;
  color: #fff8eb !important;
  border: 2px solid #d4a24c !important;
  border-bottom: 8px solid #c99a4c !important;
  box-shadow: 0 24px 60px rgba(3, 10, 20, 0.65) !important;
}

/* 2C. Thanh tiêu đề đầu hộp thoại Hồ sơ (Header Bar): MỎNG LẠI 1/3 & CHẠY TOÀN VIỀN TAB */
#employee-contract-profile-modal-v30 .ep-contract-profile-head-v30,
#insurance-profile-modal-v2024 .ui094-modal-head-v2024,
#payroll-profile-modal-v32 .payroll-profile-head-v32,
#personnel-profile-archive-modal-v216 > .modal-card > div:first-child,
#ep-history-overlay-v2021 .ep-history-head-v2021 {
  margin: -18px -20px 14px -20px !important;
  width: calc(100% + 40px) !important;
  max-width: calc(100% + 40px) !important;
  padding: 8px 18px !important;
  min-height: 44px !important;
  background-color: #0e2b4a !important;
  background-image: linear-gradient(135deg, #0b223b 0%, #173f68 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-bottom: 2px solid #c99a4c !important;
  border-radius: 11px 11px 0 0 !important;
  box-shadow: 0 4px 12px rgba(7, 22, 40, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}
#employee-contract-profile-modal-v30 .ep-contract-profile-head-v30 > div:first-child,
#insurance-profile-modal-v2024 .ui094-modal-head-v2024 > div:first-child,
#payroll-profile-modal-v32 .payroll-profile-head-v32 > div:first-child,
#personnel-profile-archive-modal-v216 > .modal-card > div:first-child > div:first-child {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
  min-width: 0 !important;
}
#personnel-profile-archive-modal-v216 #personnel-profile-archive-title-v216,
#insurance-profile-modal-v2024 .ui094-modal-head-v2024 h3,
#payroll-profile-modal-v32 .payroll-profile-head-v32 h3,
#employee-contract-profile-modal-v30 .ep-contract-profile-head-v30 h3,
#ep-history-overlay-v2021 #ep-history-title-v2021 {
  color: #ffffff !important;
  font-size: 16.5px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
#personnel-profile-archive-modal-v216 #personnel-profile-archive-sub-v216,
#insurance-profile-modal-v2024 #insurance-profile-sub-v2024,
#employee-contract-profile-modal-v30 .ep-contract-profile-head-v30 p,
#payroll-profile-modal-v32 .payroll-profile-head-v32 p {
  color: #f5d48f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
  margin: 0 !important;
}
#personnel-profile-archive-modal-v216 .pp-archive-footer-v216 small,
#insurance-profile-modal-v2024 .ui094-modal-foot-v2024 small {
  color: #2c4663 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-footer-v216 small,
body.dark-mode #insurance-profile-modal-v2024 .ui094-modal-foot-v2024 small {
  color: #d8e4f2 !important;
}

/* 2D. Các khối danh tính & nhóm hồ sơ bên trong:
   - Giao diện SÁNG: nền Kem Champagne đậm hơn vùng ngoài (#f0e6d5 -> #e6d7be), viền Vàng Đồng (#c49a52), chữ Xanh Navy (#0e2b4a)
   - Giao diện TỐI: nền Xanh Navy Đậm (#0b2038 -> #123052), viền Vàng Kim (#c99a4c), chữ Trắng (#ffffff) */
#personnel-profile-archive-modal-v216 .pp-archive-identity-v216,
#personnel-profile-archive-modal-v216 .pp-archive-group-v216:not(.pp-profile-identity-docs-v218),
#insurance-profile-modal-v2024 .ui094-profile-identity-v2024,
#insurance-profile-modal-v2024 .ui094-profile-group-v2024,
#payroll-profile-modal-v32 .payroll-profile-summary-v32 > div,
#ep-history-overlay-v2021 .ep-history-row-v2021 {
  background-color: #f0e6d5 !important;
  background-image: linear-gradient(145deg, #f6eee0 0%, #e6d7be 100%) !important;
  color: #0e2b4a !important;
  border: 1.5px solid #c49a52 !important;
  border-radius: 11px !important;
  padding: 13px 15px !important;
  box-shadow: 0 4px 12px rgba(14, 43, 74, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  box-sizing: border-box !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-identity-v216,
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-group-v216:not(.pp-profile-identity-docs-v218),
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-identity-v2024,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-group-v2024,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-summary-v32 > div,
body.dark-mode #ep-history-overlay-v2021 .ep-history-row-v2021 {
  background-color: #0b2038 !important;
  background-image: linear-gradient(145deg, #0b2038 0%, #123052 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #c99a4c !important;
  box-shadow: 0 6px 16px rgba(3, 10, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Nhóm Giấy tờ tùy thân (.pp-profile-identity-docs-v218) nằm bên trong khung danh tính: không tạo hộp lồng hộp */
#personnel-profile-archive-modal-v216 .pp-archive-group-v216.pp-profile-identity-docs-v218 {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 1.5px solid rgba(183, 136, 60, 0.45) !important;
  border-radius: 0 !important;
  padding: 12px 0 0 0 !important;
  margin-top: 8px !important;
  box-shadow: none !important;
}

/* Tên nhân viên (h4) và mô tả trong khối danh tính Hồ sơ */
#personnel-profile-archive-modal-v216 .pp-archive-identity-v216 h4,
#insurance-profile-modal-v2024 .ui094-profile-identity-v2024 h4 {
  color: #0e2b4a !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-identity-v216 h4,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-identity-v2024 h4 {
  color: #ffffff !important;
}
#personnel-profile-archive-modal-v216 .pp-archive-identity-v216 p,
#insurance-profile-modal-v2024 .ui094-profile-identity-v2024 p {
  color: #6b4c1b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  opacity: 1 !important;
  margin: 4px 0 0 0 !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-identity-v216 p,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-identity-v2024 p {
  color: #f5d48f !important;
}
#personnel-profile-archive-modal-v216 .pp-archive-identity-v216 .pp-archive-state-v217,
#insurance-profile-modal-v2024 .ui094-profile-identity-v2024 > span {
  background-color: #0e2b4a !important;
  color: #ffe8a3 !important;
  border: 1px solid #c99a4c !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
}

/* Khung ảnh cá nhân trong Hồ sơ lý lịch */
#personnel-profile-archive-modal-v216 .pp-archive-identity-v216.pp-profile-top-v218 {
  display: grid !important;
  grid-template-columns: 146px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
  margin: 10px 0 !important;
}
#personnel-profile-archive-modal-v216 .pp-profile-photo-frame-v217 {
  width: 134px !important;
  background-color: #e4d4b7 !important;
  border: 1.5px solid #b7883c !important;
  color: #0e2b4a !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-profile-photo-frame-v217 {
  background-color: #07192e !important;
  border-color: #c99a4c !important;
  color: #ffe29a !important;
}
#personnel-profile-archive-modal-v216 .pp-profile-photo-actions-v217 {
  width: 134px !important;
}
#personnel-profile-archive-modal-v216 .pp-profile-photo-actions-v217 button {
  background-color: #0e2b4a !important;
  color: #ffffff !important;
  border: 1px solid #c99a4c !important;
  font-size: 11.5px !important;
  min-height: 32px !important;
  padding: 4px 8px !important;
}

/* Tiêu đề các nhóm thông tin trong mục Hồ sơ */
#personnel-profile-archive-modal-v216 .pp-archive-group-v216 h4,
#insurance-profile-modal-v2024 .ui094-profile-group-v2024 h4 {
  color: #0e2b4a !important;
  font-size: 15.5px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  margin: 0 0 10px 0 !important;
  padding-bottom: 7px !important;
  border-bottom: 1.5px solid rgba(183, 136, 60, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-group-v216 h4,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-group-v2024 h4 {
  color: #ffd97d !important;
  border-bottom-color: rgba(227, 188, 112, 0.35) !important;
}

/* Bố cục lưới các nhóm & các trường trong Hồ sơ — tách bạch, không chồng lấn */
.pp-archive-modal-v216 {
  --pp-096-group-heading-v220: 15.5px !important;
  --pp-096-field-type-v220: 13.5px !important;
}
#personnel-profile-archive-modal-v216 .pp-archive-groups-v216,
#insurance-profile-modal-v2024 .ui094-profile-groups-v2024,
#employee-contract-profile-modal-v30 .ep-contract-profile-grid-v30,
#payroll-profile-modal-v32 .payroll-profile-grid-v32 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px !important;
  align-items: start !important;
}
#personnel-profile-archive-modal-v216 .pp-archive-fields-v216,
#insurance-profile-modal-v2024 .ui094-profile-fields-v2024 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
#personnel-profile-archive-modal-v216 .pp-profile-basic-v30 .pp-archive-fields-v216,
#personnel-profile-archive-modal-v216 .pp-profile-identity-docs-v218 .pp-archive-fields-v216 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* 2E. Từng ô mục dữ liệu trong Hồ sơ (.pp-archive-field-v216, .ui094-profile-field-v2024, .ep-contract-profile-field-v30, .payroll-profile-field-v32):
   - Giao diện SÁNG: nền Vàng Cát ấm đậm hơn vùng ngoài (#e7d8be -> #ddd0b4), viền Vàng Đồng (#b7883c), nhãn Xanh Navy (#0b2540), ô nhập Trắng Tinh (#ffffff)
   - Giao diện TỐI: nền Xanh Đêm Sâu (#07172a -> #0e2644), viền Vàng Kim (#d4a24c), nhãn Vàng Sáng (#ffe29a), ô nhập Xanh Slate (#15375c) */
#personnel-profile-archive-modal-v216 .pp-archive-field-v216,
#insurance-profile-modal-v2024 .ui094-profile-field-v2024,
#employee-contract-profile-modal-v30 .ep-contract-profile-field-v30,
#payroll-profile-modal-v32 .payroll-profile-field-v32 {
  background-color: #e7d8be !important;
  background-image: linear-gradient(145deg, #eee1ca 0%, #ddd0b4 100%) !important;
  color: #0e2b4a !important;
  border: 1.5px solid #b7883c !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(14, 43, 74, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  transition: background-color 0.16s ease, background-image 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-field-v216,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-field-v2024,
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-field-v30,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-field-v32 {
  background-color: #07172a !important;
  background-image: linear-gradient(145deg, #07172a 0%, #0e2644 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(212, 162, 76, 0.68) !important;
  box-shadow: 0 4px 10px rgba(3, 10, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Nhãn (<label>) của từng mục trong Hồ sơ */
#personnel-profile-archive-modal-v216 .pp-archive-field-v216 > label,
#insurance-profile-modal-v2024 .ui094-profile-field-v2024 > label,
#employee-contract-profile-modal-v30 .ep-contract-profile-field-v30 > label,
#payroll-profile-modal-v32 .payroll-profile-field-v32 > label,
#payroll-profile-modal-v32 .payroll-profile-field-v32 > span:first-child {
  color: #0b2540 !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  opacity: 1 !important;
  margin: 0 !important;
  display: block !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-field-v216 > label,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-field-v2024 > label,
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-field-v30 > label,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-field-v32 > label,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-field-v32 > span:first-child {
  color: #ffe29a !important;
}

/* Ô nhập liệu & ô chỉ đọc (Input, Select, Textarea, Readonly) trong Hồ sơ — đồng bộ tuyệt đối giữa Input và Select ở cả Sáng & Tối */
#personnel-profile-archive-modal-v216 .pp-archive-field-v216 .pp-input,
#personnel-profile-archive-modal-v216 .pp-archive-field-v216 .pp-select,
#personnel-profile-archive-modal-v216 .pp-archive-field-v216 .pp-readonly,
#insurance-profile-modal-v2024 .ui094-profile-field-v2024 .ui094-control-v2024,
#insurance-profile-modal-v2024 .ui094-profile-field-v2024 .ui094-readonly-v2024,
#employee-contract-profile-modal-v30 .ep-contract-profile-field-v30 input,
#employee-contract-profile-modal-v30 .ep-contract-profile-field-v30 select,
#employee-contract-profile-modal-v30 .ep-contract-profile-field-v30 .ep-contract-profile-readonly-v30,
#payroll-profile-modal-v32 .payroll-profile-field-v32 input,
#payroll-profile-modal-v32 .payroll-profile-field-v32 select {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0b223b !important;
  border: 1.5px solid #9b7332 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 6px 10px !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  color-scheme: light !important;
  box-shadow: inset 0 1px 2px rgba(14, 43, 74, 0.06) !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-field-v216 .pp-input,
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-field-v216 .pp-select,
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-field-v216 .pp-readonly,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-field-v2024 .ui094-control-v2024,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-field-v2024 .ui094-readonly-v2024,
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-field-v30 input,
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-field-v30 select,
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-field-v30 .ep-contract-profile-readonly-v30,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-field-v32 input,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-field-v32 select {
  background-color: #15375c !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1.5px solid #d4a24c !important;
  color-scheme: dark !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

/* Option trong Select và biểu tượng lịch của input[type="date"] rõ nét trong cả Sáng & Tối */
#personnel-profile-archive-modal-v216 select option,
#insurance-profile-modal-v2024 select option,
#employee-contract-profile-modal-v30 select option,
#payroll-profile-modal-v32 select option {
  background-color: #ffffff !important;
  color: #0b223b !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 select option,
body.dark-mode #insurance-profile-modal-v2024 select option,
body.dark-mode #employee-contract-profile-modal-v30 select option,
body.dark-mode #payroll-profile-modal-v32 select option {
  background-color: #0d2542 !important;
  color: #ffffff !important;
}
#personnel-profile-archive-modal-v216 input[type="date"]::-webkit-calendar-picker-indicator,
#insurance-profile-modal-v2024 input[type="date"]::-webkit-calendar-picker-indicator,
#employee-contract-profile-modal-v30 input[type="date"]::-webkit-calendar-picker-indicator,
#payroll-profile-modal-v32 input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: 0.85 !important;
  cursor: pointer !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode #insurance-profile-modal-v2024 input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode #employee-contract-profile-modal-v30 input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode #payroll-profile-modal-v32 input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.92) sepia(0.35) saturate(2.5) hue-rotate(350deg) brightness(1.15) !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Nút hành động dưới chân hộp thoại Hồ sơ (Đóng, Khôi phục từ bảng, Mở hồ sơ nhân sự, Áp dụng vào bảng...) hài hòa Sáng & Tối */
#personnel-profile-archive-modal-v216 .pp-archive-footer-v216 button,
#insurance-profile-modal-v2024 .ui094-modal-foot-v2024 button,
#employee-contract-profile-modal-v30 .ep-contract-profile-actions-v30 button,
#employee-contract-profile-modal-v30 .ep-contract-profile-head-v30 button,
#payroll-profile-modal-v32 button {
  background-color: #efe3ce !important;
  background-image: linear-gradient(135deg, #f8f1e4 0%, #e4d3b5 100%) !important;
  color: #0e2b4a !important;
  border: 1.5px solid #b7883c !important;
  border-radius: 9px !important;
  font-weight: 900 !important;
  padding: 7px 14px !important;
  min-height: 36px !important;
  box-shadow: 0 2px 6px rgba(14, 43, 74, 0.1) !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-footer-v216 button,
body.dark-mode #insurance-profile-modal-v2024 .ui094-modal-foot-v2024 button,
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-actions-v30 button,
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-head-v30 button,
body.dark-mode #payroll-profile-modal-v32 button {
  background-color: #15375c !important;
  background-image: linear-gradient(135deg, #1b4573 0%, #102a46 100%) !important;
  color: #fff8eb !important;
  border: 1.5px solid #d4a24c !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35) !important;
}
/* Nút chính (Primary / Save / Apply) và nút Đóng trên thanh tiêu đề */
#employee-contract-profile-modal-v30 #employee-contract-profile-save-v30,
#personnel-profile-archive-modal-v216 #personnel-profile-archive-save-v216,
#insurance-profile-modal-v2024 #insurance-profile-save-v2024,
#employee-contract-profile-modal-v30 .ep-contract-profile-head-v30 button,
#insurance-profile-modal-v2024 .ui094-modal-head-v2024 button,
#personnel-profile-archive-modal-v216 > .modal-card > div:first-child button {
  background-color: #0e2b4a !important;
  background-image: linear-gradient(135deg, #173f68 0%, #0b223b 100%) !important;
  color: #ffe29a !important;
  border: 1.5px solid #e3bc70 !important;
}

/* 2F. KHUNG CÀI ĐẶT THƯƠNG HIỆU (#brand-settings-panel / UI-034 & .ep-secondary-brand): MỎNG LẠI 1/3 & CHẠY TOÀN VIỀN TAB */
#screen-mainapp #screen-settings,
#screen-mainapp #screen-settings > div {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
#screen-mainapp #brand-settings-panel,
#screen-mainapp #screen-settings .settings-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 8px 0 !important;
  border-radius: 8px !important;
  border: 1.5px solid #c99a4c !important;
  box-sizing: border-box !important;
}
#screen-mainapp #brand-settings-panel > .settings-card-header,
#screen-mainapp #screen-settings .settings-card > .settings-card-header {
  padding: 6px 14px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background-color: #0e2b4a !important;
  background-image: linear-gradient(135deg, #0b223b 0%, #173f68 100%) !important;
  color: #ffffff !important;
  border-bottom: 1.5px solid #c99a4c !important;
}
#screen-mainapp #brand-settings-panel > .settings-card-header h3,
#screen-mainapp #screen-settings .settings-card > .settings-card-header h3 {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
#screen-mainapp #brand-settings-panel > .settings-card-header p,
#screen-mainapp #screen-settings .settings-card > .settings-card-header p {
  color: #f5d48f !important;
  font-size: 11px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
#screen-mainapp #brand-settings-panel .settings-row,
#screen-mainapp #screen-settings .settings-card .settings-row {
  padding: 5px 14px !important;
  min-height: 34px !important;
  gap: 10px !important;
  align-items: center !important;
}
#screen-mainapp #brand-settings-panel .settings-row-info p,
#screen-mainapp #screen-settings .settings-card .settings-row-info p {
  display: none !important;
}
#screen-mainapp #brand-settings-panel .settings-row-info h4,
#screen-mainapp #screen-settings .settings-card .settings-row-info h4 {
  font-size: 12.5px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}
#screen-mainapp #brand-settings-panel #settings-brand-logo-preview,
#screen-mainapp #brand-settings-panel #settings-tab-icon-preview {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 6px !important;
}
#screen-mainapp #brand-settings-panel input,
#screen-mainapp #brand-settings-panel select,
#screen-mainapp #brand-settings-panel button,
#screen-mainapp #brand-settings-panel label.settings-btn {
  min-height: 28px !important;
  height: 28px !important;
  padding: 2px 10px !important;
  font-size: 11.5px !important;
}

/* Khung thương hiệu trên đỉnh Sidebar phụ (.ep-secondary-brand) & Topbar (#main-header.ep-topbar): mỏng lại 1/3 (48px) và chạy sát toàn viền tab */
#screen-mainapp #secondary-sidebar .ep-secondary-brand {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #c99a4c !important;
  background-color: #0e2b4a !important;
  background-image: linear-gradient(135deg, #0b223b 0%, #173f68 100%) !important;
  box-sizing: border-box !important;
}
#screen-mainapp #secondary-sidebar .ep-secondary-brand #brand-title,
#screen-mainapp #secondary-sidebar .ep-secondary-brand .ep-secondary-brand-copy strong,
#screen-mainapp #secondary-sidebar .ep-secondary-brand .dyn-company {
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}
#screen-mainapp #secondary-sidebar .ep-secondary-brand #brand-subtitle,
#screen-mainapp #secondary-sidebar .ep-secondary-brand .ep-secondary-brand-copy small {
  color: #f5d48f !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}
#screen-mainapp #secondary-sidebar .ep-secondary-brand .ep-secondary-close {
  color: #ffffff !important;
  border-color: rgba(245, 212, 143, 0.35) !important;
}
#screen-mainapp #main-header.ep-topbar {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 10px !important;
  border-bottom: 2px solid #c99a4c !important;
}

/* 2G. Chống chồng lấn các cột trong bảng Hợp đồng, Hồ sơ lý lịch, Hồ sơ BHXH */
#employee-list-container .ep-employee-list-table :is(th, td):nth-child(1),
#employee-list-container .ep-employee-list-table :is(th, td):nth-child(2),
#personnel-profile-table .pp-table :is(th, td):nth-child(1),
#personnel-profile-table .pp-table :is(th, td):nth-child(2),
#insurance-table .ui094-main-table-v2024 :is(th, td):nth-child(1),
#insurance-table .ui094-main-table-v2024 :is(th, td):nth-child(2),
#insurance-table .ui094-main-table-v2024 :is(th, td):nth-child(3) {
  left: auto !important;
}
#employee-list-container .ep-employee-list-table tbody td,
#personnel-profile-table .pp-table tbody td,
#insurance-table .ui094-main-table-v2024 tbody td {
  position: relative !important;
  left: auto !important;
  z-index: 1 !important;
}

/* 2H. Các nút "[📁 Hồ sơ]" trong mọi bảng & các mục Hồ sơ trên thanh điều hướng phụ (#secondary-sidebar) */
#screen-mainapp .app-section button.ep-profile-button-v30:not(:disabled),
#screen-mainapp .app-section button.pp-row-button-v216.profile:not(:disabled),
#screen-mainapp .app-section button.ui094-row-button-v2024.profile:not(:disabled),
#screen-mainapp .app-section button.payroll-profile-button-v32:not(:disabled) {
  background-color: #0e2b4a !important;
  background-image: linear-gradient(135deg, #0b223b 0%, #173f68 100%) !important;
  color: #ffe29a !important;
  border: 1.5px solid #c99a4c !important;
  border-radius: 8px !important;
  padding: 6px 11px !important;
  min-height: 34px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 6px rgba(7, 27, 49, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
#screen-mainapp .app-section button.ep-profile-button-v30:not(:disabled) i,
#screen-mainapp .app-section button.pp-row-button-v216.profile:not(:disabled) i,
#screen-mainapp .app-section button.ui094-row-button-v2024.profile:not(:disabled) i,
#screen-mainapp .app-section button.payroll-profile-button-v32:not(:disabled) i {
  color: #ffd97d !important;
}

/* Vùng ngoài của Sidebar phụ (#secondary-sidebar) và các mục điều hướng */
#screen-mainapp #secondary-sidebar.ep-secondary-sidebar {
  background-color: #f2eadb !important;
  background-image: linear-gradient(180deg, #f6f0e4 0%, #ebe1cf 100%) !important;
}
body.dark-mode #screen-mainapp #secondary-sidebar.ep-secondary-sidebar {
  background-color: #12253b !important;
  background-image: linear-gradient(180deg, #152b44 0%, #0e1f33 100%) !important;
}
#screen-mainapp #secondary-sidebar #navigation-panel .ep-secondary-item {
  background-color: #0e2b4a !important;
  background-image: linear-gradient(135deg, #0e2b4a 0%, #163a62 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(201, 154, 76, 0.55) !important;
  border-radius: 10px !important;
  margin: 0 0 5px 0 !important;
  padding: 8px 10px !important;
  box-shadow: 0 3px 8px rgba(7, 27, 49, 0.16) !important;
  transition: all 0.16s ease !important;
}
#screen-mainapp #secondary-sidebar #navigation-panel .ep-secondary-item .ep-secondary-copy b {
  color: #ffffff !important;
  font-size: 12.5px !important;
}
#screen-mainapp #secondary-sidebar #navigation-panel .ep-secondary-item .ep-secondary-copy small {
  color: #e6cfa0 !important;
  font-size: 10px !important;
}
#screen-mainapp #secondary-sidebar #navigation-panel .ep-secondary-item .ep-secondary-icon {
  background-color: rgba(201, 154, 76, 0.2) !important;
  color: #ffd97d !important;
}
#screen-mainapp #secondary-sidebar #navigation-panel .ep-secondary-item.is-active {
  background-color: #1b4d82 !important;
  background-image: linear-gradient(135deg, #1b4d82 0%, #0e2b4a 100%) !important;
  border: 2px solid #ffca57 !important;
  box-shadow: inset 4px 0 0 #ffca57, 0 5px 14px rgba(7, 27, 49, 0.3) !important;
}
#screen-mainapp #secondary-sidebar #navigation-panel .ep-secondary-item.is-active .ep-secondary-copy b {
  color: #ffe8a3 !important;
}

/* ----- 3. HIỆU ỨNG KHI CON TRỎ CHUỘT LƯỚT VÀO (HOVER): NÂNG MÀU LÊN RÕ RÀNG TRƯỚC KHI CHỌN Ở CẢ SÁNG & TỐI ----- */

/* 3A. Dòng trong bảng dữ liệu: tắt transition trên 1000 dòng để cuộn/rê chuột 0ms không giật lag; giữ nâng màu sáng nổi bật kèm thanh chỉ thị Vàng Kim 5px bên trái */
#screen-mainapp .app-section table tbody tr {
  transition: none !important;
}
#screen-mainapp .app-section table tbody tr:hover > td {
  background-color: #f6e1b3 !important;
  color: #081c33 !important;
  border-top-color: #c99a4c !important;
  border-bottom-color: #c99a4c !important;
}
body.dark-mode #screen-mainapp .app-section table tbody tr:hover > td {
  background-color: #1f4f82 !important;
  color: #ffffff !important;
  border-top-color: #e3bc70 !important;
  border-bottom-color: #e3bc70 !important;
}
#screen-mainapp .app-section table tbody tr:hover > td:first-child {
  box-shadow: inset 5px 0 0 #c99a4c !important;
}
body.dark-mode #screen-mainapp .app-section table tbody tr:hover > td:first-child {
  box-shadow: inset 5px 0 0 #ffd97d !important;
}

/* 3B. Khi lướt chuột vào từng mục trong Hồ sơ (Field & Group):
   - Giao diện SÁNG: nâng lên Vàng Hoàng Kim sáng (#f7e2b8 -> #efd296) + viền Xanh Navy đậm (#0e2b4a)
   - Giao diện TỐI: nâng lên Xanh Hoàng Gia sáng (#174475 -> #235d9c) + viền Vàng Kim (#ffca57) */
#personnel-profile-archive-modal-v216 .pp-archive-group-v216:not(.pp-profile-identity-docs-v218):hover,
#insurance-profile-modal-v2024 .ui094-profile-group-v2024:hover,
#payroll-profile-modal-v32 .payroll-profile-summary-v32 > div:hover,
#ep-history-overlay-v2021 .ep-history-row-v2021:hover {
  background-color: #ead8b8 !important;
  background-image: linear-gradient(145deg, #f3e5cb 0%, #e0cba6 100%) !important;
  border-color: #0e2b4a !important;
  box-shadow: 0 6px 18px rgba(14, 43, 74, 0.16) !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-group-v216:not(.pp-profile-identity-docs-v218):hover,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-group-v2024:hover,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-summary-v32 > div:hover,
body.dark-mode #ep-history-overlay-v2021 .ep-history-row-v2021:hover {
  background-color: #143c68 !important;
  background-image: linear-gradient(145deg, #143c68 0%, #1e528a 100%) !important;
  border-color: #ffd97d !important;
  box-shadow: 0 8px 22px rgba(3, 10, 20, 0.45) !important;
}

#personnel-profile-archive-modal-v216 .pp-archive-field-v216:hover,
#insurance-profile-modal-v2024 .ui094-profile-field-v2024:hover,
#employee-contract-profile-modal-v30 .ep-contract-profile-field-v30:hover,
#payroll-profile-modal-v32 .payroll-profile-field-v32:hover {
  background-color: #f7e2b8 !important;
  background-image: linear-gradient(145deg, #fcebc9 0%, #efd296 100%) !important;
  border-color: #0e2b4a !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px rgba(14, 43, 74, 0.18), 0 0 0 1.5px rgba(201, 154, 76, 0.55) !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-field-v216:hover,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-field-v2024:hover,
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-field-v30:hover,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-field-v32:hover {
  background-color: #174475 !important;
  background-image: linear-gradient(145deg, #174475 0%, #235d9c 100%) !important;
  border-color: #ffca57 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px rgba(3, 10, 20, 0.45), 0 0 0 1.5px rgba(255, 202, 87, 0.55) !important;
}

#personnel-profile-archive-modal-v216 .pp-archive-field-v216:hover > label,
#insurance-profile-modal-v2024 .ui094-profile-field-v2024:hover > label,
#employee-contract-profile-modal-v30 .ep-contract-profile-field-v30:hover > label,
#payroll-profile-modal-v32 .payroll-profile-field-v32:hover > label,
#payroll-profile-modal-v32 .payroll-profile-field-v32:hover > span:first-child {
  color: #07192e !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-field-v216:hover > label,
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-field-v2024:hover > label,
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-field-v30:hover > label,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-field-v32:hover > label,
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-field-v32:hover > span:first-child {
  color: #ffffff !important;
}

#personnel-profile-archive-modal-v216 .pp-archive-field-v216:hover :is(.pp-input, .pp-select, .pp-readonly),
#insurance-profile-modal-v2024 .ui094-profile-field-v2024:hover :is(.ui094-control-v2024, .ui094-readonly-v2024),
#employee-contract-profile-modal-v30 .ep-contract-profile-field-v30:hover :is(input, select, .ep-contract-profile-readonly-v30),
#payroll-profile-modal-v32 .payroll-profile-field-v32:hover :is(input, select) {
  background-color: #ffffff !important;
  border-color: #0e2b4a !important;
}
body.dark-mode #personnel-profile-archive-modal-v216 .pp-archive-field-v216:hover :is(.pp-input, .pp-select, .pp-readonly),
body.dark-mode #insurance-profile-modal-v2024 .ui094-profile-field-v2024:hover :is(.ui094-control-v2024, .ui094-readonly-v2024),
body.dark-mode #employee-contract-profile-modal-v30 .ep-contract-profile-field-v30:hover :is(input, select, .ep-contract-profile-readonly-v30),
body.dark-mode #payroll-profile-modal-v32 .payroll-profile-field-v32:hover :is(input, select) {
  background-color: #21548a !important;
  border-color: #ffe29a !important;
}

/* 3C. Khi lướt chuột vào các nút Topbar, nút Hồ sơ, nút bấm và mục Menu: nâng màu Vàng Kim / Xanh Sáng rõ rệt */
#screen-mainapp #main-header button.ep-topbar-icon:hover,
#screen-mainapp #main-header button#ep-security-v27:hover,
#screen-mainapp #main-header #user-menu-button.ep-user-chip:hover {
  background-color: #c99a4c !important;
  background-image: linear-gradient(135deg, #c99a4c 0%, #9b6d2c 100%) !important;
  color: #ffffff !important;
  border-color: #fff3c4 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px rgba(201, 154, 76, 0.45) !important;
  opacity: 1 !important;
}
#screen-mainapp #main-header button.ep-topbar-icon:hover > i.fa-solid,
#screen-mainapp #main-header button#ep-security-v27:hover > i.fa-solid,
#screen-mainapp #main-header button.ep-topbar-icon.ep-tb-labeled-btn:hover > .ep-tb-btn-label,
#screen-mainapp #main-header #user-menu-button.ep-user-chip:hover #topbar-user-role {
  color: #ffffff !important;
}

#screen-mainapp .app-section button:not(:disabled):hover,
#screen-mainapp .modal-backdrop button:not(:disabled):hover,
.modal-backdrop button:not(:disabled):hover {
  background-color: #c99a4c !important;
  background-image: linear-gradient(135deg, #c99a4c 0%, #9b6d2c 100%) !important;
  color: #ffffff !important;
  border-color: #ffe29a !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px rgba(201, 154, 76, 0.38) !important;
}
#screen-mainapp .app-section button:not(:disabled):hover i,
#screen-mainapp .modal-backdrop button:not(:disabled):hover i,
.modal-backdrop button:not(:disabled):hover i {
  color: #ffffff !important;
}

#screen-mainapp #main-sidebar .ep-primary-item:hover,
#screen-mainapp #secondary-sidebar #navigation-panel .ep-secondary-item:hover {
  background-color: #215891 !important;
  background-image: linear-gradient(135deg, #215891 0%, #153c66 100%) !important;
  color: #ffffff !important;
  border-color: #ffca57 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px rgba(7, 27, 49, 0.32) !important;
}
#screen-mainapp #secondary-sidebar #navigation-panel .ep-secondary-item:hover .ep-secondary-copy b {
  color: #ffe8a3 !important;
}

/* Đồng bộ biến --ins-panel giữa #screen-insurance và #insurance-profile-modal-v2024 ở chế độ Sáng cho runUi094DarkThemeCheckV27() */
body:not(.dark-mode) #screen-insurance,
body:not(.dark-mode) #insurance-profile-modal-v2024 {
  --ins-panel: #fffdf9;
}

/* =========================================================================
   TNPFURNITURE v3.13 — MODULE LIÊN KẾT TÊN MIỀN, INTERNET & KHO DỮ LIỆU ONLINE
   TRONG CÀI ĐẶT HỆ THỐNG (#internet-domain-settings-panel-v313)
   Tuân thủ tuyệt đối: CHỈ DUY NHẤT 1 VẠCH DƯỚI ở khung ngoài .glass-panel,
   toàn bộ thẻ con bên trong dùng viền mỏng 1px + nền đặc chuẩn Sáng / Tối.
   ========================================================================= */

#internet-domain-settings-panel-v313 .tnp-net-block-v313 {
  background-color: #fbf5e9 !important;
  background-image: linear-gradient(145deg, #fffdf9 0%, #f5ebd8 100%) !important;
  border: 1px solid rgba(201, 154, 76, 0.36) !important;
  border-top: 1px solid rgba(201, 154, 76, 0.36) !important;
  border-bottom: 1px solid rgba(201, 154, 76, 0.36) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  color: #0e2b4a !important;
}

body.dark-mode #internet-domain-settings-panel-v313 .tnp-net-block-v313 {
  background-color: #102a45 !important;
  background-image: linear-gradient(145deg, #133252 0%, #0b2036 100%) !important;
  border-color: rgba(227, 188, 112, 0.32) !important;
  border-top-color: rgba(227, 188, 112, 0.32) !important;
  border-bottom-color: rgba(227, 188, 112, 0.32) !important;
  color: #f8eedb !important;
}

#internet-domain-settings-panel-v313 .tnp-net-chip-v313 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  background-color: #f3e6ce !important;
  color: #0e2b4a !important;
  border: 1px solid rgba(201, 154, 76, 0.42) !important;
}

body.dark-mode #internet-domain-settings-panel-v313 .tnp-net-chip-v313 {
  background-color: #173b61 !important;
  color: #ffe8b3 !important;
  border-color: rgba(227, 188, 112, 0.38) !important;
}

#internet-domain-settings-panel-v313 .tnp-net-chip-v313.is-online {
  background-color: #dcfce7 !important;
  color: #14532d !important;
  border-color: #22c55e !important;
}

body.dark-mode #internet-domain-settings-panel-v313 .tnp-net-chip-v313.is-online {
  background-color: #113d29 !important;
  color: #bbf7d0 !important;
  border-color: #34d399 !important;
}

#internet-domain-settings-panel-v313 .tnp-net-chip-v313.is-warn {
  background-color: #fef3c7 !important;
  color: #78350f !important;
  border-color: #f59e0b !important;
}

body.dark-mode #internet-domain-settings-panel-v313 .tnp-net-chip-v313.is-warn {
  background-color: #3b2a0e !important;
  color: #fde68a !important;
  border-color: #fbbf24 !important;
}

#internet-domain-settings-panel-v313 .tnp-net-grid-v313 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#internet-domain-settings-panel-v313 .tnp-net-grid-4-v313 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

@media (max-width: 860px) {
  #internet-domain-settings-panel-v313 .tnp-net-grid-v313,
  #internet-domain-settings-panel-v313 .tnp-net-grid-4-v313 {
    grid-template-columns: 1fr !important;
  }
}

#internet-domain-settings-panel-v313 .tnp-net-field-v313 {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  color: #0e2b4a !important;
}

body.dark-mode #internet-domain-settings-panel-v313 .tnp-net-field-v313 {
  color: #f5e9d3 !important;
}

#internet-domain-settings-panel-v313 .tnp-net-field-v313.span-2 {
  grid-column: 1 / -1 !important;
}

#internet-domain-settings-panel-v313 .tnp-net-field-v313 small {
  font-size: 10px !important;
  font-weight: 700 !important;
  opacity: 0.75 !important;
}

#internet-domain-settings-panel-v313 .tnp-net-field-v313 :is(input, select) {
  background-color: #ffffff !important;
  color: #0e2b4a !important;
  border: 1px solid rgba(14, 43, 74, 0.25) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  width: 100% !important;
}

body.dark-mode #internet-domain-settings-panel-v313 .tnp-net-field-v313 :is(input, select) {
  background-color: #091b2e !important;
  color: #fff8eb !important;
  border-color: rgba(227, 188, 112, 0.38) !important;
}

#internet-domain-settings-panel-v313 .tnp-net-stat-v313 {
  background-color: #ffffff !important;
  border: 1px solid rgba(201, 154, 76, 0.34) !important;
  border-radius: 12px !important;
  padding: 9px 11px !important;
}

body.dark-mode #internet-domain-settings-panel-v313 .tnp-net-stat-v313 {
  background-color: #091b2e !important;
  border-color: rgba(227, 188, 112, 0.3) !important;
}

#internet-domain-settings-panel-v313 .tnp-net-stat-v313 small {
  display: block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  opacity: 0.72 !important;
}

#internet-domain-settings-panel-v313 .tnp-net-stat-v313 b {
  display: block !important;
  margin-top: 2px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  color: #0e2b4a !important;
  overflow-wrap: anywhere !important;
}

body.dark-mode #internet-domain-settings-panel-v313 .tnp-net-stat-v313 b {
  color: #ffe8b3 !important;
}

#internet-domain-settings-panel-v313 .tnp-net-code-v313 {
  background-color: #0b1f35 !important;
  color: #f8eedb !important;
  border: 1px solid rgba(227, 188, 112, 0.38) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  max-height: 190px !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* v3.13: Mở rộng content-visibility cho bảng Chấm công & Bảng lương để dựng 1.000 dòng 0 giật lag */
#screen-mainapp :where(#attendance-table tbody tr:not(.tnp-filtered-v28), #payroll-table tbody tr:not(.tnp-filtered-v28), .terminated-table-v198 tbody tr:not(.tnp-filtered-v28)) {
  content-visibility: auto;
  contain: layout style;
  contain-intrinsic-size: auto 48px;
}

/* =========================================================================
   TNPFURNITURE v3.14 — CHUẨN HÓA BỘ FONT HỆ THỐNG VÀ HIỂN THỊ TÊN CÔNG TY TOÀN PHẦN MỀM
   1. Bộ font hệ thống cao cấp -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Arial
      cho khả năng hiển thị tiếng Việt sắc nét, mượt mà trên Windows ClearType, macOS Retina, Android Termux.
   2. Bật tối ưu hóa kết xuất chữ: optimizeLegibility, antialiased, grayscale chống nhòe vỡ chữ.
   3. Đồng bộ tên công ty động .dyn-company trên thanh điều hướng, màn hình đăng nhập, in ấn và tiêu đề trang.
   ========================================================================= */
:root, :host {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif !important;
  --default-font-family: var(--font-sans) !important;
}

html, body, button, input, select, textarea {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

#screen-mainapp #secondary-sidebar .ep-secondary-brand .dyn-company,
#screen-mainapp #secondary-sidebar .ep-secondary-brand-copy strong,
#auth-title.dyn-company {
  font-family: var(--font-sans) !important;
  letter-spacing: 0.02em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* =========================================================================
   TNPFURNITURE v3.20 — THU GỌN MỤC CÀI ĐẶT, CHỈNH CỠ CHỮ % & CÂN BẰNG NÚT
   1. Các mục Cài Đặt có thể đóng mở (Thu gọn / Mở rộng) với nút Ẩn/Hiện riêng từng mục.
   2. Bộ điều khiển tỉ lệ cỡ chữ (%) toàn phần mềm từ 80% đến 140% có xem trước trực tiếp.
   3. Cân bằng khoảng cách trên dưới phù hợp cho mọi nút bấm, thẻ danh sách và văn bản.
   ========================================================================= */

/* Thanh tiêu đề mục Cài Đặt có thể bấm để đóng / mở */
.tnp-settings-sec-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 18px !important;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  background: rgba(14, 43, 74, 0.06) !important;
  border: 1px solid rgba(201, 154, 76, 0.28) !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
}
.dark-mode .tnp-settings-sec-head {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(227, 188, 112, 0.22) !important;
}
.tnp-settings-sec-head:hover {
  background: rgba(201, 154, 76, 0.14) !important;
  border-color: #c99a4c !important;
}

.tnp-sec-badge {
  font-size: 10.5px !important;
  font-weight: 850 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(201, 154, 76, 0.16) !important;
  color: #b88636 !important;
  border: 1px solid rgba(201, 154, 76, 0.35) !important;
}
.dark-mode .tnp-sec-badge {
  color: #f5d48f !important;
  background: rgba(227, 188, 112, 0.14) !important;
  border-color: rgba(227, 188, 112, 0.3) !important;
}

.tnp-sec-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  border: 1px solid rgba(201, 154, 76, 0.45) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #0e2b4a !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
.dark-mode .tnp-sec-toggle-btn {
  background: rgba(14, 43, 74, 0.88) !important;
  color: #ffe8b3 !important;
  border-color: rgba(227, 188, 112, 0.45) !important;
}
.tnp-sec-toggle-btn:hover {
  background: #c99a4c !important;
  color: #ffffff !important;
  border-color: #c99a4c !important;
}

.tnp-settings-panel.is-collapsed {
  display: none !important;
}

/* Nút thao tác nhanh đầu màn hình Cài Đặt (Thu gọn tất cả / Mở rộng tất cả) */
.tnp-settings-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  border: 1px solid rgba(201, 154, 76, 0.35) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  color: #0e2b4a !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
.dark-mode .tnp-settings-action-btn {
  background: rgba(14, 43, 74, 0.75) !important;
  color: #f8eedb !important;
  border-color: rgba(227, 188, 112, 0.35) !important;
}
.tnp-settings-action-btn:hover {
  background: #c99a4c !important;
  color: #ffffff !important;
  border-color: #c99a4c !important;
}

/* Các nút chọn nhanh cỡ chữ % */
.tnp-font-preset-btn {
  min-height: 38px !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  border: 1px solid rgba(14, 43, 74, 0.2) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  color: #0e2b4a !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.dark-mode .tnp-font-preset-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
.tnp-font-preset-btn:hover {
  border-color: #c99a4c !important;
  background: rgba(201, 154, 76, 0.18) !important;
}
.tnp-font-preset-btn.active {
  background: linear-gradient(135deg, #0e2b4a 0%, #173f68 100%) !important;
  color: #f5d48f !important;
  border-color: #c99a4c !important;
  box-shadow: 0 3px 8px rgba(14, 43, 74, 0.28) !important;
}
.dark-mode .tnp-font-preset-btn.active {
  background: linear-gradient(135deg, #c99a4c 0%, #b88636 100%) !important;
  color: #ffffff !important;
  border-color: #ffe8b3 !important;
}

/* Cân bằng chữ và khoảng cách trên dưới cho nút và danh sách cài đặt */
.glass-list-item {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  min-height: 54px !important;
  align-items: center !important;
}
.ops-button, .ui-recovery-button, .excel-bak-btn {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 38px !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}
#screen-settings .glass-panel {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}