/* ===== BIẾN CHUNG CHO GIAO DIỆN ===== */
:root {
  /* Màu sắc chính */
  --primary-color: #3498db;
  --primary-light: #5faee3;
  --primary-dark: #2980b9;
  --secondary-color: #2ecc71;
  --secondary-light: #4fdc87;
  --secondary-dark: #27ae60;
  
  /* Màu chức năng */
  --danger-color: #e74c3c;
  --danger-light: #f1746a;
  --danger-dark: #c0392b;
  --warning-color: #f39c12;
  --success-color: #2ecc71;
  --info-color: #3498db;
  
  /* Màu văn bản và nền */
  --text-color: #333;
  --text-light: #777;
  --bg-color: #f5f5f5;
  --card-bg: #fff;
  --border-color: #ddd;
  
  /* Các thông số khác */
  --shadow: 0 2px 5px rgba(0,0,0,0.1);
  --border-radius: 4px;
  --font-family: 'Roboto', sans-serif;
  --transition: all 0.3s ease;
  
  /* Kích thước đồng nhất các trường nhập liệu - giảm chiều cao */
  --input-height: 34px;
  --input-padding: 0.35rem 0.65rem;
  
  /* Chiều rộng tối thiểu cho các trường */
  --input-min-width: 150px;
}

/* ===== RESET VÀ CẤU TRÚC CHUNG ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.5;
  font-size: 14px;
}

.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===== BUTTONS ===== */
button, .btn {
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

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

.btn-secondary {
  background-color: #f5f5f5;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: #e5e5e5;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.btn-outline:hover {
  background-color: rgba(0,0,0,0.05);
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.btn-block {
  display: block;
  width: 100%;
}

/* ===== FORMS - CHIỀU CAO ĐỒNG NHẤT ===== */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.25rem;
}

.form-control {
  display: block;
  width: 100%;
  min-width: var(--input-min-width);
  height: var(--input-height);
  padding: var(--input-padding);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-color);
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

/* Đảm bảo textarea không bị ràng buộc bởi chiều cao cố định */
textarea.form-control {
  height: auto;
  min-height: calc(var(--input-height) * 2);
  resize: vertical;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Đảm bảo select có chiều cao như input */
select.form-control {
  height: var(--input-height);
  padding: calc(var(--input-padding) - 0.1rem);
  appearance: auto; /* Đảm bảo mũi tên dropdown hiển thị */
}

/* Đảm bảo rằng input date có chiều cao đồng nhất */
input[type="date"].form-control {
  height: var(--input-height);
  line-height: 1;
}

/* Hiển thị icon date picker cho các trình duyệt khác nhau */
input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 0.5rem;
}

.help-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-light);
}

.error-message {
  color: var(--danger-color);
  margin-top: 0.5rem;
  display: none;
}

.field-error {
  border-color: var(--danger-color) !important;
  background-color: rgba(231, 76, 60, 0.05) !important;
}

/* ===== BADGE ===== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 0.7rem;
  margin-left: 5px;
  min-width: 18px;
  height: 18px;
}

.badge.user-count {
  background-color: var(--secondary-color);
}

.badge.sheet-count {
  background-color: var(--warning-color);
}

/* ===== MÀN HÌNH ĐĂNG NHẬP ===== */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--bg-color);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.auth-title {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.auth-logo {
  text-align: center;
  margin-bottom: 20px;
}

/* ===== LAYOUT CHÍNH ===== */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--card-bg);
  box-shadow: var(--shadow);
  z-index: 100;
}

.header-title h1 {
  font-size: 1.25rem;
  margin: 0;
  color: var(--primary-color);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-info span {
  font-weight: 500;
}

.app-content {
  flex: 1;
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: 220px;
  background-color: var(--card-bg);
  box-shadow: var(--shadow);
  overflow-y: auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-light);
}

.sidebar-header .btn {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.sidebar-menu li, .sheet-menu-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: var(--transition);
  color: #000000;
}

.sidebar-menu li:hover, .sheet-menu-item:hover {
  background-color: rgba(0,0,0,0.03);
}

.sidebar-menu li.active, .sheet-menu-item.active {
  background-color: rgba(52, 152, 219, 0.1);
  border-left-color: var(--primary-color);
  color: var(--primary-color);
}

.sidebar-divider {
  padding: 0;
  margin: 1rem 0;
  height: 1px;
}

.sidebar-divider hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 0;
  padding: 0;
}

.sidebar-section-title {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: var(--text-light);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: default;
}

#sheet-menu-list {
  max-height: 400px;
  overflow-y: auto;
}

.sheet-menu-empty {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem 0.6rem 1.5rem;
  color: var(--text-light);
  font-style: italic;
}

/* ===== ICONS ===== */
.fas, .far, .fab, .icon {
  margin-right: 0.5rem;
  width: 20px;
  text-align: center;
  font-style: normal;
}

.sidebar-menu li[data-page="dashboard"] .fas { color: #3498db; }
.sidebar-menu li[data-page="user-management"] .fas { color: #2ecc71; }
.sidebar-menu li[data-page="configuration"] .fas { color: #f39c12; }

.sheet-menu-item .fas { color: #7f8c8d; }
.sheet-menu-item.active .fas { color: var(--primary-color); }

.action-buttons .btn i { margin-right: 0; }
.btn .fas, .btn .far, .btn .fab { margin-right: 0.25rem; width: auto; }

/* ===== AREA CONTENT ===== */
.content {
  flex: 1;
  padding: 1.5rem;
}

.page {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.page-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

/* ===== ACTION BAR ===== */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* --- BẮT ĐẦU NÂNG CẤP --- */
  position: sticky;
  top: 0;
  z-index: 50; /* Đảm bảo luôn nổi lên trên bảng dữ liệu */
  background-color: var(--bg-color); /* Thêm màu nền để không bị trong suốt */
  padding-top: 1rem; /* Thêm khoảng đệm trên */
  padding-bottom: 1rem; /* Thêm khoảng đệm dưới */
  margin-bottom: 1rem; /* Giữ lại khoảng cách với bảng */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Thêm bóng mờ nhẹ để tách biệt */
  /* --- KẾT THÚC NÂNG CẤP --- */
}


.search-box {
  flex: 1;
  max-width: 300px;
}

/* ===== TABLE DATA ===== */
.data-table-container {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  
  margin-bottom: 1.5rem;
}

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

.data-table th,
.data-table td {
  padding: 0.5rem;
  text-align: left;
  border: 1px solid var(--border-color);
  vertical-align: middle;
}

.data-table th {
  background-color: rgba(0,0,0,0.02);
  font-weight: bold; /* Sửa lại giá trị này */
}

.data-table td {
  /* Sửa lại các thuộc tính sau */
  max-width: 150px; /* Giữ lại hoặc điều chỉnh nếu cần */
  height: 40px; /* Thêm: Cố định chiều cao của ô */
  vertical-align: middle; /* Thêm: Căn giữa nội dung theo chiều dọc */
  white-space: nowrap; /* Thêm: Ngăn không cho văn bản xuống dòng */
  overflow: hidden; /* Thêm: Ẩn nội dung bị tràn */
  text-overflow: ellipsis; /* Thêm: Hiển thị dấu "..." cho nội dung bị ẩn */
}
.data-table td.action-buttons {
  overflow: visible; /* Cho phép menu con hiển thị ra ngoài ô */
}

.text-right {
  text-align: right;
}

/* ===== ACTION BUTTONS ===== */
.action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
}

.action-buttons .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-btn {
  color: var(--primary-color);
}

.delete-btn {
  color: var(--danger-color);
}

/* ===== EMPTY STATE & LOADING ===== */
.empty-message {
  padding: 2rem;
  text-align: center;
  color: var(--text-light);
}

.loading-spinner {
  padding: 2rem;
  text-align: center;
  color: var(--text-light);
}

/* ===== PAGINATION ===== */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background-color: rgba(0,0,0,0.02);
  border-top: 1px solid var(--border-color);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

#pagination-current-page {
  margin: 0 0.5rem;
}

/* ===== MODAL ===== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.2s ease;
}

.modal-content {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: auto;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--primary-color);
  color: white;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--primary-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.close-btn {
  font-size: 1.5rem;
  cursor: pointer;
  color: white;
}

.close-btn:hover {
  color: #f0f0f0;
}

.modal-body {
  padding: 1rem;
}

.modal-footer {
  padding: 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ===== MODAL SIZES ===== */
.modal-md {
  max-width: 1400px;
}

.modal-lg {
  max-width: 1400px;
}

.modal-xl {
  max-width: 1400px;
  width: 90%;
}

/* ===== FORM LAYOUT ===== */
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
  margin-bottom: 1rem;
}

.form-group-inline {
  display: inline-block;
  vertical-align: top;
  padding-right: 10px;
}

.form-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.form-section h4 {
  margin-bottom: 1rem;
  color: var(--text-light);
}

/* ===== TABLE INPUT - ĐỒNG NHẤT CHIỀU CAO ===== */
.table-input-container {
  margin-bottom: 15px;
  /* Giới hạn chiều cao của vùng chứa bảng. 
     Số 250px là ước lượng cho chiều cao của header, footer, lề... của modal.
     Bạn có thể điều chỉnh con số này nếu cần. */
  max-height: calc(90vh - 250px);
  overflow: auto; /* Tự động hiển thị cả thanh cuộn dọc và ngang khi cần */
}

.table-input {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
}

.table-input th,
.table-input td {
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  vertical-align: middle;
  height: calc(var(--input-height) + 12px); /* Chiều cao đồng nhất cho tất cả các ô */
  min-width: var(--input-min-width); /* Thiết lập chiều rộng tối thiểu */
}

.table-input th {
  background-color: rgba(0,0,0,0.03);
  font-weight: 500;
  white-space: nowrap;
}

.table-input thead th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 10;
}

.table-input tbody tr:hover {
  background-color: rgba(0,0,0,0.02);
}

/* Các trường input trong bảng - đồng nhất chiều cao */
.table-input td input,
.table-input td select {
  width: 100%;
  height: var(--input-height);
  min-height: var(--input-height);
  padding: var(--input-padding);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: #fff;
}

/* Fix cho enumlist để đồng nhất với các input khác */
.table-input td .enumlist-checkbox-container {
  width: 100%;
  min-height: var(--input-height);
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* Để các checkbox hiển thị từ trên xuống */
  padding: var(--input-padding);
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: #fff;
  overflow-y: auto;
}

/* Đảm bảo checkbox hiển thị đúng */
.table-input td .checkbox-container-field {
  width: 100%;
  height: var(--input-height);
  display: flex;
  align-items: center;
  padding: var(--input-padding);
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: #fff;
}

.table-input td input[type="date"] {
  min-width: 150px;
}

.table-input td input:hover, 
.table-input td select:hover {
  border-color: var(--primary-color);
}

.table-input td input:focus, 
.table-input td select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.table-input th:first-child,
.table-input td:first-child {
  width: 60px;
  min-width: 60px;
}

.table-input th:last-child,
.table-input td:last-child {
  width: 70px;
  min-width: 70px;
}

.table-input td .delete-btn {
  padding: 5px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* ===== FIELD CONFIG ===== */
.fields-container {
  margin-bottom: 1rem;
}

.field-add-actions,
.bulk-fields-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.field-group-help {
  display: block;
  margin: 0.45rem 0 0.8rem;
}

.system-config-badge { display:inline-block; margin-left:7px; padding:3px 8px; border-radius:999px; color:#1f6b45; background:#def7e8; font-size:.72rem; vertical-align:middle; }

.field-config-group {
  margin: 0 0 0.75rem;
  border: 1px solid #b9cbe0;
  border-radius: var(--border-radius);
  background: #f4f8fd;
  overflow: hidden;
}

.field-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: #e6f0fb;
  border-bottom: 1px solid #c9d8e8;
}

.field-group-storage {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(220px, 1fr);
  gap: 0.55rem 0.75rem;
  align-items: end;
  padding: 0.65rem 0.75rem;
  background: #f8fbff;
  border-bottom: 1px solid #d8e4f0;
}

.field-group-storage label {
  margin: 0;
  color: #334e68;
  font-size: 0.82rem;
  font-weight: 600;
}

.field-group-storage .form-control { margin-top: 0.3rem; }
.field-group-storage-help { grid-column: 1 / -1; margin: 0; }

@media (max-width: 760px) {
  .field-group-storage { grid-template-columns: 1fr; }
  .field-group-storage-help { grid-column: 1; }
}

.field-group-drag-handle {
  cursor: grab;
  color: #7890a8;
  font-size: 1.25rem;
  line-height: 1;
}

.field-group-toggle {
  width: 1.8rem;
  border: 0;
  background: transparent;
  color: var(--primary-color);
  cursor: pointer;
}

.field-group-title {
  flex: 1;
  min-width: 180px;
  font-weight: 600;
}

.field-group-count {
  color: var(--text-light);
  font-size: 0.85rem;
  white-space: nowrap;
}

.field-group-items {
  min-height: 1.5rem;
  padding: 0.65rem;
}

.field-group-items > .field-item:last-child {
  margin-bottom: 0;
}

.field-group-select {
  flex: 0 0 auto;
  cursor: pointer;
}

.field-group-target {
  flex: 0 0 165px;
  max-width: 190px;
  font-size: 0.82rem;
}

.field-item.selected-for-field-group {
  border-color: #2f80ed;
  box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.14);
}

.field-group-move-modal-content {
  width: min(560px, calc(100vw - 32px));
  max-width: 560px;
}

.field-group-move-summary {
  margin: 0 0 0.65rem;
}

.field-group-move-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 0.8rem;
  padding: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: #f7f9fc;
}

.field-group-move-chip {
  display: inline-flex;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: #e6f0fb;
  color: #234e7d;
  font-size: 0.85rem;
}

.field-group-move-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Danh sách Chọn trường trong Bố cục Form, chia tab theo nhóm quản lý trường. */
.field-selector-modal-content {
  width: min(680px, calc(100vw - 32px));
  max-width: 680px;
}

.field-selector-body {
  padding-top: 0.75rem;
}

.field-selector-tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0 0 0.55rem;
  border-bottom: 1px solid var(--border-color);
  scrollbar-width: thin;
}

.field-selector-tab {
  flex: 0 0 auto;
  padding: 0.48rem 0.72rem;
  border: 1px solid #b9cbe0;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background: #f4f8fd;
  color: var(--text-color);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
}

.field-selector-tab:hover {
  background: #e6f0fb;
}

.field-selector-tab.active {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
}

.field-selector-panels {
  min-height: 92px;
  padding-top: 0.8rem;
}

.field-selector-panel {
  display: none;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.4rem;
}

.field-selector-panel.active {
  display: flex;
}

.field-selector-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  text-align: center;
}

.field-selector-selection-summary {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 5px;
  background: #f3f7fb;
  color: var(--text-color);
  font-size: 0.86rem;
}

.field-selector-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.field-selector-field-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.field-selector-field-btn.selected {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
}

.field-selector-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-weight: 700;
}

.field-selector-order:empty {
  display: none;
}

.bulk-fields-panel {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: rgba(0, 0, 0, 0.02);
}

.bulk-fields-row .form-group {
  min-width: 180px;
  margin-bottom: 0;
}

.bulk-fields-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
  min-height: 1.5rem;
}

.bulk-field-chip {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--card-bg);
  font-size: 0.85rem;
}

.field-item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: rgba(0,0,0,0.02);
}

.field-main-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.field-name {
  flex: 2;
  min-width: 120px;
}

.field-type {
  flex: 1;
  min-width: 100px;
}

.field-options {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.field-config {
  width: 100%;
  margin-top: 0.75rem;
}

.field-style-config {
  width: 100%;
  margin-top: 0.65rem;
  border: 1px solid #d7e2ee;
  border-radius: 6px;
  background: #fbfdff;
}

.field-style-config > summary {
  padding: 0.55rem 0.75rem;
  color: var(--primary-dark);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.field-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 0.65rem;
  padding: 0.75rem 0.75rem 0;
  border-top: 1px solid #e4ebf3;
}

.field-style-grid .form-group { margin-bottom: 0; }

.field-style-color-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 38px;
}

.field-style-color-row input[type="color"] {
  width: 52px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: #fff;
}

.pastel-color-select {
  min-width: 150px;
  border-color: #cbd5e1;
  color: #334155;
  font-weight: 500;
}

.direct-row-layout-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.field-style-preview-wrap {
  padding: 0.75rem;
}

.field-style-preview-wrap > label {
  display: block;
  margin-bottom: 0.35rem;
}

.dropdown-config, 
.formula-config {
  padding: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.depends-detail {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  font-weight: normal;
  margin: 0;
}

.input-type-selector {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
}

.required-mark {
  color: #e74c3c !important;
  font-weight: bold;
}

/* ===== FORMULA CONFIG ===== */
.formula-tooltip {
  position: relative;
  cursor: help;
}

.formula-tooltip .tooltip-text {
  display: none;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px 10px;
  width: max-content;
  max-width: 300px;
  z-index: 1000;
  font-size: 12px;
  white-space: nowrap;
}

.formula-tooltip:hover .tooltip-text {
  display: block;
}

.formula-tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

.formula-guide-link {
  color: #3498db !important;
  text-decoration: underline !important;
  cursor: pointer;
  font-size: 0.875rem;
}

.formula-guide-link:hover {
  color: #2980b9 !important;
  text-decoration: none !important;
}

/* ===== FORM LAYOUT BUILDER ===== */
.form-layout-builder {
  margin-top: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1rem;
  background-color: rgba(0,0,0,0.02);
}

.form-layout-row {
  display: flex;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  background-color: white;
}

.form-layout-field {
  margin-right: 0.5rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--primary-light);
  color: white;
  border-radius: var(--border-radius);
  cursor: pointer;
}

.form-layout-field.selected {
  background-color: var(--primary-dark);
}

.form-layout-add-field {
  padding: 0.25rem 0.5rem;
  background-color: rgba(0,0,0,0.05);
  border-radius: var(--border-radius);
  cursor: pointer;
}

.form-layout-remove-row {
  margin-left: auto;
  cursor: pointer;
  color: var(--danger-color);
}

/* ===== DROPDOWN CONFIG ===== */
.dependent-dropdown-builder {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 10px;
  margin-top: 10px;
  background-color: #f9f9f9;
}

.builder-header {
  display: grid;
  grid-template-columns: 1fr 2.5fr 60px;
  gap: 10px;
  font-weight: bold;
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
  background-color: #f0f8ff;
  border-radius: 4px 4px 0 0;
}

.builder-row {
  display: grid;
  grid-template-columns: 1fr 2.5fr 60px;
  gap: 10px;
  margin-bottom: 10px;
  padding: 5px;
  background-color: white;
  border-radius: var(--border-radius);
  border: 1px solid #eee;
  align-items: center;
}

.builder-row:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-row {
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-row {
  margin-top: 10px;
  width: 100%;
  background-color: #f5f5f5;
  border: 1px dashed #ccc;
  color: #666;
  padding: 8px;
  transition: all 0.2s;
}

.add-row:hover {
  background-color: #e5e5e5;
  border-color: #aaa;
  color: #333;
}

.parent-value, .child-values {
  padding: 4px 8px;
  min-height: 34px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.2s;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

.parent-value:focus, .child-values:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.builder-row .child-values {
  min-height: 38px;
  height: auto;
  white-space: pre-wrap;
  resize: vertical;
}

/* ===== CONFIG TABS ===== */
.config-tabs {
  display: flex;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.tab {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}

.tab:hover {
  background-color: rgba(0,0,0,0.02);
}

.tab.active {
  border-bottom-color: var(--primary-color);
  color: var(--primary-color);
}

/* ===== CONFIG CARDS ===== */
.config-card {
  margin-bottom: 1rem;
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.config-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem;
  background-color: rgb(29 151 247 / 11%);
  border-bottom: 1px solid var(--border-color);
}

.config-title h3 {
  margin: 0;
}

.config-actions {
  display: flex;
  gap: 0.5rem;
}

.config-info {
  padding: 1rem;
}

.info-item {
  margin-bottom: 0.5rem;
}

/* ===== COLOR PICKER ===== */
.color-picker {
  width: 50px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-color);
}

/* ===== CHECKBOX CONTAINER ===== */
.checkbox-container {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.5rem;
  background-color: white;
  margin-bottom: 0.5rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  margin-bottom: 3px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}

.checkbox-item:hover {
  background-color: rgba(52, 152, 219, 0.1);
}

.checkbox-item input[type="checkbox"]:checked + label {
  color: var(--primary-color);
  font-weight: 500;
}

.checkbox-item label {
  padding-left: 5px;
  cursor: pointer;
  flex: 1;
}

.checkbox-item:has(input[type="checkbox"]:checked) {
  background-color: rgba(52, 152, 219, 0.1);
}

.checkbox-item input[type="checkbox"] {
  accent-color: var(--primary-color);
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.checkbox-search {
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.checkbox-search input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

/* ===== PERMISSIONS ===== */
.permissions-container {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-top: 0.5rem;
}

.permissions-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.permissions-table th,
.permissions-table td {
  padding: 0.5rem;
  text-align: center;
  border: 1px solid var(--border-color);
}

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

.permissions-list {
  margin: 0;
  padding-left: 1rem;
}

/* ===== ENUMLIST & CHECKBOX - FIX CHO ENUMLIST ===== */
.enumlist-checkbox-container {
  height: auto;
  min-height: calc(var(--input-height) * 2); /* Hiển thị 2-3 dòng */
  max-height: calc(var(--input-height) * 3); /* Giới hạn chiều cao */
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.5rem;
  background-color: white;
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* Để các item hiển thị đều từ trên xuống */
  align-content: flex-start; /* Đảm bảo các hàng bắt đầu từ trên xuống */
  width: 100%;
}

.enumlist-checkbox-item {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  margin-right: 6px;
  margin-bottom: 4px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
  background-color: #f0f7ff;
  border: 1px solid #d0e6ff;
}

.enumlist-checkbox-item:hover {
  background-color: #e0f0ff;
}

.enumlist-checkbox-item input[type="checkbox"]:checked + label,
.enumlist-checkbox-item input[type="radio"]:checked + label {
  color: var(--primary-color);
  font-weight: 500;
}

.enumlist-checkbox-item label {
  padding-left: 5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 0.9rem;
}

.enumlist-checkbox-item:has(input[type="checkbox"]:checked),
.enumlist-checkbox-item:has(input[type="radio"]:checked) {
  background-color: #d0e6ff;
}

.enumlist-checkbox-item input[type="checkbox"],
.enumlist-checkbox-item input[type="radio"] {
  accent-color: var(--primary-color);
  cursor: pointer;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


.single-choice-radio-container {
  min-height: var(--input-height);
  max-height: none;
  overflow-y: visible;
}
.single-choice-radio-container .radio-help-text {
  flex-basis: 100%;
  margin: 0 0 0.35rem 0;
}
.single-choice-radio-item {
  cursor: pointer;
}

.enumlist-tag {
  display: inline-block;
  background-color: rgba(52, 152, 219, 0.1);
  color: var(--primary-color);
  padding: 2px 6px;
  border-radius: 3px;
  margin: 2px;
  font-size: 0.9em;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Đồng nhất chiều cao checkbox */
.checkbox-container-field {
  display: flex;
  align-items: center;
  height: var(--input-height);
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0 0.75rem;
}

.checkbox-container-field .form-check-input {
  margin: 0;
  margin-right: 8px;
}

.form-check-label {
  margin-bottom: 0;
}

input[type="checkbox"].form-check-input {
  margin-top: 0;
  vertical-align: middle;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.toast {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  background-color: white;
  color: var(--text-color);
  transform: translateX(120%);
  transition: transform 0.3s ease;
  max-width: 300px;
}

.toast.show {
  transform: translateX(0);
}

.toast-success {
  border-left: 4px solid var(--success-color);
}

.toast-error {
  border-left: 4px solid var(--danger-color);
}

.toast-info {
  border-left: 4px solid var(--info-color);
}

.toast-warning {
  border-left: 4px solid var(--warning-color);
}

/* ===== PREVIEW TABLE ===== */
.import-preview {
  margin-top: 1rem;
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.preview-table td, .preview-table th {
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  font-size: 0.875rem;
}

.preview-table th {
  background-color: rgba(0,0,0,0.02);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .app-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    max-height: 48px;
    overflow: hidden;
    position: relative;
    z-index: 200;
    transition: max-height 0.3s ease;
    background-color: var(--card-bg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .sidebar.expanded {
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: 15px;
  }
  
  .sidebar-header {
    cursor: pointer;
  }
  
  .toggle-arrow {
    color: var(--text-light);
    font-size: 14px;
  }
  
  .content {
    padding-top: 10px;
  }
  
  .sidebar:not(.expanded)::-webkit-scrollbar {
    display: none;
  }
  
  .sidebar-menu li,
  .sheet-menu-item {
    padding: 12px 15px;
  }
  
  .sidebar-header + button#update-config-menu {
    margin: 10px 15px;
    width: calc(100% - 30px);
  }
  
  #sheet-menu-list {
    max-height: none;
  }
  
  /* Cải thiện hiển thị modal trên điện thoại */
  .modal-content {
    max-height: 85vh;
    margin: 0 10px;
    width: calc(100% - 20px);
  }
  
  /* Tăng kích thước nút bấm cho dễ nhấn */
  .table-input td .delete-btn,
  .action-buttons .btn {
    width: 38px;
    height: 38px;
  }
  
  /* Fix cho các trường trong form cấu hình */
  .field-main-row {
    flex-wrap: wrap;
  }
  
  .field-name, 
  .field-type {
    flex: 1 0 100%;
    margin-bottom: 8px;
  }
  
  .field-options {
    flex: 1;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .app-header {
    flex-direction: column;
    padding: 0.5rem;
  }
  
  .user-info {
    margin-top: 0.5rem;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .sheet-selector {
    margin-top: 0.5rem;
    width: 100%;
  }
  
  .action-bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
  }
  
  .action-bar > .btn {
    flex: 0 0 auto;
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    min-height: 32px;
  }
  
  .search-box {
    flex: 1 1 100%;
    max-width: none;
    margin-top: 0.5rem;
    order: 10;
  }
  
  .data-table-container {
    overflow-x: auto;
  }
  
  /* Cải thiện hiển thị form nhập liệu trên mobile */
  .table-input th, 
  .table-input td {
    min-width: 100px; /* Đảm bảo độ rộng tối thiểu */
  }
  
  /* Cải thiện hiển thị pagination trên mobile */
  .pagination-container {
    flex-direction: column;
    gap: 10px;
  }
  
  /* Tăng kích thước của form-controls cho dễ nhấn */
  .form-control {
    height: 40px;
    font-size: 16px; /* Ngăn zoom trên iOS */
  }
  
  select.form-control {
    height: 40px;
  }
  
  /* Đảm bảo modal body có padding đủ lớn */
  .modal-body {
    padding: 15px;
  }
  
  /* Fix hiển thị trường trong modal cấu hình */
  .field-item {
    padding: 10px;
  }
  
  .field-main-row {
    gap: 8px;
  }
  
  /* Tránh hiển thị trường trùng/bị che khi sửa cấu hình */
  .modal-content:has(.field-item) {
    width: 95%;
    max-width: 95%;
  }
}

@media (max-width: 576px) {
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  
  .sheet-list {
    grid-template-columns: 1fr;
  }
  
  .content {
    padding: 10px;
  }
  
  .config-title {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .config-actions {
    margin-top: 0.5rem;
  }
  
  .app-header {
    padding: 10px;
  }
  
  .sidebar.expanded {
    max-height: 70vh;
  }
  
  .sidebar-menu li,
  .sheet-menu-item {
    padding: 14px 15px;
  }
  
  #update-config-menu {
    display: block;
    width: 100%;
    margin: 10px 0;
    text-align: center;
  }
  
  /* Cải thiện table input trên điện thoại */
  .table-input-container {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-input {
    min-width: 100%;
  }
  
  .table-input th:first-child {
    position: sticky;
    left: 0;
    background-color: #f8f9fa;
    z-index: 9;
  }
  
  /* Tăng độ tương phản cho dễ đọc */
  .table-input td, .table-input th {
    border: 1px solid #ccc;
  }
  
  /* Style nút để dễ bấm hơn */
  .btn {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .btn-sm {
    padding: 6px 10px;
    font-size: 13px;
  }
  
  /* Cải thiện modal header */
  .modal-header {
    padding: 12px 15px;
  }
  
  .modal-header h3 {
    font-size: 16px;
  }
  
  /* Đảm bảo dropdown/select có kích thước phù hợp */
  select {
    font-size: 16px; /* Ngăn zoom trên iOS */
  }
  
  /* Rút gọn padding cho các trường */
  .form-group {
    margin-bottom: 0.75rem;
  }
  
  /* Fix for enumlist chiếm nhiều không gian trên mobile */
  .enumlist-checkbox-container {
    max-height: 150px;
  }
  
  /* Cải thiện hiển thị tên trường trong form config */
  .field-name {
    width: 100%;
  }
  
  /* Đảm bảo nút Lưu, Hủy dễ nhấn và đúng kích thước */
  .modal-footer .btn {
    min-width: 80px;
    padding: 10px 15px;
  }
}


/* Định dạng các trường đóng băng (readonly/disabled) */
.form-control[readonly],
.form-control[disabled],
select[disabled],
.field-frozen {
  background-color: #f2f2f2 !important;
  border-color: #ddd !important;
  color: #666 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Làm nổi bật container của các trường bị đóng băng */
.form-group input[readonly] + label,
.form-group select[disabled] + label,
.field-frozen + label {
  color: #666 !important;
  font-style: italic;
}

/* Định dạng cho các checkbox bị disabled */
input[type="checkbox"][disabled] {
  opacity: 0.6;
}

/* Thêm icon khóa cho các trường đóng băng */
.form-group input[readonly],
.form-group select[disabled] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 30px;
}

/* Định dạng cho các trường trong table input */
.table-input input[readonly],
.table-input select[disabled] {
  background-color: #f2f2f2 !important;
  border-color: #ddd !important;
}

/* Thêm hiệu ứng khi hover */
.form-control[readonly]:hover,
select[disabled]:hover {
  background-color: #e9e9e9 !important;
}



.alert {
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.alert-info {
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  color: #0c5460;
}

#import-data-btn, button[id^="import-excel"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  transition: all 0.3s;
}

#import-data-btn:hover, button[id^="import-excel"]:hover {
  background-color: #45a049;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* V35.2.25 - Menu thao tác Import Excel: chỉ hiện sau khi bấm nút chính */
.import-excel-actions-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.import-excel-caret {
  margin-left: 4px;
  font-size: 11px;
  transition: transform .16s ease;
}

.import-excel-actions-wrap.is-open .import-excel-caret {
  transform: rotate(180deg);
}

.import-excel-actions-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 220;
  width: min(330px, calc(100vw - 28px));
  padding: 7px;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  background: var(--card-bg, #fff);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(.985);
  transform-origin: top left;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

.import-excel-actions-wrap.is-open .import-excel-actions-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.import-excel-menu-item {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-color, #1f2937);
  text-align: left;
  cursor: pointer;
}

.import-excel-menu-item:hover,
.import-excel-menu-item:focus-visible {
  background: #eef5ff;
  outline: none;
}

.import-excel-menu-item > i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #eaf7ed;
  color: #25813b;
}

.import-excel-menu-item span,
.import-excel-menu-item strong,
.import-excel-menu-item small {
  display: block;
}

.import-excel-menu-item strong {
  font-size: 13px;
  line-height: 1.3;
}

.import-excel-menu-item small {
  margin-top: 2px;
  color: #6b7280;
  font-size: 11px;
  line-height: 1.3;
}

/* Màu sắc cho nút Tải Template */
#export-data-btn, button[id^="tai-template"] {
  background-color: #2196F3;
  color: white;
  border: none;
  transition: all 0.3s;
}

#export-data-btn:hover, button[id^="tai-template"]:hover {
  background-color: #0b7dda;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* CSS cho các icon quyền hạn */
.permissions-list i {
  font-size: 14px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.permissions-list i:hover {
  transform: scale(1.2);
}

/* Các màu cho icon */
.permissions-list i.fa-eye { color: #3498db; }       /* Xanh dương */
.permissions-list i.fa-edit { color: #f39c12; }      /* Cam */
.permissions-list i.fa-trash-alt { color: #e74c3c; } /* Đỏ */
.permissions-list i.fa-plus-circle { color: #2ecc71; } /* Xanh lá */

/* Style cho nút tạo bản sao */
.duplicate-config-btn {
  background-color: #17a2b8;
  color: white;
  margin-right: 5px;
}

.duplicate-config-btn:hover {
  background-color: #138496;
}

.duplicate-config-btn .icon {
  color: white;
}
/* ===== TAB LAYOUT BUILDER (CONFIGURATION) ===== */
.tab-layout-builder {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1rem;
  background-color: #f9f9f9;
}

.tab-config-item {
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.tab-config-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0.75rem;
  background-color: #f0f8ff;
  border-bottom: 1px solid var(--border-color);
}

.tab-config-header input {
  flex-grow: 1;
  font-weight: bold;
  border: 1px solid transparent;
  background: transparent;
}

.tab-config-header input:focus {
  border-color: var(--primary-color);
  background: white;
}

.tab-config-body {
  padding: 1rem;
}

/* ===== MODAL DATA ENTRY TABS ===== */
.tab-pane {
  display: none; /* Hidden by default */
  animation: fadeIn 0.3s ease;
}

.tab-pane.active {
  display: block; /* Shown when active */
}
/* ===== SUB-TABS (NESTED TABS) ===== */
.sub-tab-pane {
  display: none;
  padding-left: 1rem;
}

.sub-tab-pane.active {
  display: block;
}

/* ===== SUB-TAB BUILDER (CONFIGURATION) ===== */
.tab-content-type-selector {
  margin: 10px 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-color);
}

.sub-tab-builder {
  padding: 10px;
  background-color: #f0f8ff;
  border-radius: var(--border-radius);
  margin: 10px;
}
/* ===== ADVANCED FORM LAYOUT BUILDER ===== */
.form-layout-row {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #e9ecef; /* Nền xám nhạt, tương phản tốt hơn */
  border: 1px solid #ced4da;
  border-radius: var(--border-radius);
  margin-bottom: 10px;
}

.fields-wrapper {
  display: flex;
  flex-grow: 1;
  background-color: #ffffff; /* Nền trắng cho khu vực kéo thả */
  /* Thêm vạch chia rõ ràng hơn */
  background-image: repeating-linear-gradient(90deg, transparent, transparent 9.9%, #e9ecef 10%);
  border: 1px solid #adb5bd;
  height: 40px;
  align-items: center;
}

.form-layout-field {
  position: relative;
  background-color: var(--primary-color);
  color: white;
  padding: 8px 12px;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  border-right: 2px solid #f0f8ff;
  white-space: nowrap;
}

.form-layout-field:active {
  cursor: grabbing;
}

.resize-handle {
  position: absolute;
  right: -5px;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 10;
}

.row-actions-container {
  display: flex;
  align-items: center;
  padding-left: 10px;
  gap: 5px;
}
/* ===== COLLAPSIBLE GROUP BUILDER (CONFIGURATION) ===== */
.collapsible-group-builder {
  border: 1px solid #b0c4de; /* Light Steel Blue border */
  border-radius: var(--border-radius);
  margin-bottom: 10px;
  background-color: #f8faff;
}

.collapsible-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background-color: #e6f0ff;
  border-bottom: 1px solid #b0c4de;
}

.collapsible-group-header input[type="text"] {
  flex-grow: 1;
  font-weight: 500;
}

.collapsible-group-body {
  padding: 10px;
}

/* ===== COLLAPSIBLE SECTION (DATA ENTRY FORM) ===== */
.collapsible-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #3498db;
  color: white;
  border: 1px solid #ccc;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  margin-bottom: 10px;
  transition: var(--transition);
}

.collapsible-toggle-btn:hover {
  background-color: #e0e0e0;
}

.collapsible-toggle-btn .icon {
  transition: transform 0.3s ease;
}

.collapsible-toggle-btn.expanded .icon {
  transform: rotate(90deg);
}

.collapsible-content {
  display: none; /* Hidden by default */
  padding-left: 20px;
  border-left: 2px solid var(--primary-light);
  animation: fadeIn 0.4s ease;
  margin-bottom: 1rem;
}
/* ===== GIAO DIỆN TAB ĐỒNG BỘ (V4 - SỬA LỖI) ===== */

/* 1. In đậm các tiêu đề và nhãn */
.form-group label {
  font-weight: 600;
  color: #333;
}

/* 5. Nền của khối nội dung */
.tab-content {
  background-color: var(--card-bg); /* Nền trắng */
  border: 1px solid #dee2e6;
  border-top: none;
  padding: 1.5rem;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* 6. Style cho thanh chứa các tab con */
.modal-sub-tabs {
  background-color: transparent;
  padding: 0;
  margin: 0 0 1rem 0;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  list-style: none;
  gap: 5px;
}

/* 7. Style cho nút tab con (cả active và inactive) */
.modal-sub-tabs .sub-tab-link {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  font-weight: 600;
  border: 1px solid #dee2e6;
  border-bottom: none;
  background-color: #f8f9fa; /* Nền xám rất nhạt */
  color: var(--secondary-dark);
  margin-bottom: -1px; /* Dịch lên để che đường kẻ */
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.9rem;
}
/* THÊM MỚI: Style khi di chuột qua tab con */
.modal-sub-tabs .sub-tab-link:hover {
  text-decoration: none; /* Tắt gạch chân */
  color: var(--secondary-color); /* Đổi màu chữ cho đẹp hơn */
}

/* 8. Style cho nút tab con ĐANG ACTIVE (Màu xanh lá) */
.modal-sub-tabs .sub-tab-link.active {
  background-color: var(--secondary-color);
  color: white;
  border-color: var(--secondary-dark);
  font-weight: 500;
}

.sub-tab-pane {
  padding-top: 1rem;
}
/* ===== SUGGESTION FIELD CONFIG ===== */
.suggestion-config {
  padding: 0.75rem;
  border-top: 1px solid var(--border-color);
  background-color: #fdfdfd;
}
/* ===== CẢI TIẾN BỘ DỰNG LAYOUT (V2) ===== */
.form-layout-field {
  display: flex; /* Để căn chỉnh tên trường và nút xóa */
  align-items: center;
  padding-left: 12px; /* Thêm padding bên trái cho đẹp */
}

.form-layout-field > span {
  flex-grow: 1; /* Tên trường sẽ chiếm hết không gian có thể */
  padding-right: 5px;
}

.remove-field-btn {
  background: none;
  border: none;
  color: white;
  opacity: 0.7;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 8px;
  margin-left: 5px;
  font-weight: 300;
}

.remove-field-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}
/* ===== CẢI TIẾN BỘ DỰNG LAYOUT - KÉO THẢ HÀNG ===== */

/* Thêm tay nắm kéo-thả cho các hàng và nhóm */
.form-layout-row,
.collapsible-group-builder {
  position: relative; /* Cần thiết để định vị tay nắm */
  padding-left: 30px; /* Tạo không gian cho tay nắm */
}

.drag-handle {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  color: #adb5bd;
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Style cho phần tử đang được kéo */
.sortable-ghost {
  opacity: 0.4;
  background-color: #d0e6ff;
}
/* ===== CÀI TIẾN MODAL NHẬP LIỆU (KÍCH THƯỚC TỐI ĐA & RESIZE) ===== */

/* 1. Mở rộng modal Nhập liệu (Thêm/Sửa bản ghi) ra gần toàn màn hình */
#record-modal .modal-content {
  resize: both; /* Vẫn cho phép kéo để thay đổi kích thước */
  overflow: auto;
  width: 99vw; /* Chiều rộng mặc định là 90% chiều rộng màn hình */
  height: 99vh; /* Chiều cao mặc định là 85% chiều cao màn hình */
  min-width: 800px; /* Giữ lại kích thước tối thiểu để không bị vỡ layout */
  min-height: 600px; /* Giữ lại kích thước tối thiểu */
}

/* 2. Đảm bảo khu vực nội dung co giãn theo kích thước modal */
#record-modal .modal-body,
#record-modal #record-form,
#record-modal .tab-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#record-modal .tab-content {
  min-height: 0; /* Bỏ min-height cũ để co giãn linh hoạt */
}
/* File: Stylesheet.html */

/* ===== STYLE CHO BỘ LỌC NÂNG CAO ===== */
.filter-container {
  background-color: #f8f9fa;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-bottom: 1rem;
  animation: fadeIn 0.3s ease;
}

.filter-controls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.filter-field {
  display: flex;
  flex-direction: column;
}

.filter-field label {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 0.25rem;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

/* ===== STYLE CHO SẮP XẾP CỘT ===== */
.sortable-header {
  cursor: pointer;
  transition: background-color 0.2s ease;
  user-select: none; /* Ngăn bôi đen chữ khi click nhanh */
}

.sortable-header:hover {
  background-color: #e9ecef;
}

.sortable-header .fas {
  transition: opacity 0.2s ease;
}
/* File: Stylesheet.html - CSS BỔ SUNG CHO GIAI ĐOẠN 3 */

/* ===== STYLE CHO QUY TẮC XÁC THỰC (VALIDATION RULES) ===== */
.validation-rules-container {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed #b0c4de;
  border-radius: var(--border-radius);
  background-color: #f8faff;
}
.validation-rules-container > label {
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}
.validation-rule-item {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr 30px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9ecef;
}
.validation-rule-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.validation-rule-item .form-control {
  height: 32px;
  font-size: 0.9rem;
}
.validation-rule-item .remove-rule-btn {
  padding: 0;
  width: 28px;
  height: 28px;
  color: var(--danger-color);
}

/* ===== STYLE CHO THÔNG BÁO LỖI DƯỚI TRƯỜNG DỮ LIỆU ===== */
.validation-error-message {
  color: var(--danger-color);
  font-size: 0.8rem;
  margin-top: 4px;
  display: none; /* Ẩn mặc định */
}
.form-group.has-error .form-control,
.table-input td.has-error input,
.table-input td.has-error select {
  border-color: var(--danger-color);
  background-color: #fff9f8;
}
td .validation-error-message { /* Cho table input */
  position: absolute;
  bottom: -16px;
  left: 5px;
  background: white;
  padding: 0 3px;
}
.table-input td {
  position: relative;
}

/* ===== STYLE CHO TRẠNG THÁI TỰ ĐỘNG LƯU (AUTO-SAVE) ===== */
.auto-save-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.auto-save-status.show {
  opacity: 1;
}
.auto-save-status .fa-spin {
  color: var(--primary-color);
}
.auto-save-status .fa-check-circle {
  color: var(--success-color);
}
.auto-save-status .fa-exclamation-circle {
  color: var(--danger-color);
  cursor: pointer;
}
.table-input th.status-column,
.table-input td.status-column {
  width: 40px;
  min-width: 40px;
  text-align: center;
}
/* File: Stylesheet.html */

/* STYLE CHO LINK HƯỚNG DẪN REGEX */
.regex-guide-link {
  color: #3498db !important;
  text-decoration: underline !important;
  cursor: pointer;
  font-size: 0.875rem;
  margin-left: 8px; /* Thêm một chút khoảng cách */
}

.regex-guide-link:hover {
  color: #2980b9 !important;
  text-decoration: none !important;
}

/* Căn chỉnh lại các item trong hàng quy tắc để có chỗ cho link */
.validation-rule-item {
  grid-template-columns: 100px 1fr 1fr 1fr auto 30px; /* Thêm một cột tự động */
}
/* File: Stylesheet.html.txt - BỔ SUNG CHO NÂNG CẤP 1 */

/* ===== STYLE CHO NÚT SAO CHÉP GIỮA CÁC TAB ===== */
.copy-fields-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #f0f8ff;
  border: 1px solid var(--primary-light);
  color: var(--primary-dark);
  padding: 4px 8px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.8rem;
  margin-top: 1rem;
  transition: all 0.2s ease;
}

.copy-fields-btn:hover {
  background-color: #dbeeff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ===== STYLE CHO NÚT SAO CHÉP TRÊN BẢNG DỮ LIỆU ===== */
.duplicate-btn {
  color: #17a2b8; /* Màu xanh ngọc */
}
/* File: Stylesheet.html.txt - BỔ SUNG CHO TÌM & TẢI DỮ LIỆU */

/* ===== STYLE CHO KHU VỰC CẤU HÌNH TẢI DỮ LIỆU ===== */
.data-load-config-wrapper {
  margin-top: 1rem;
  border-top: 2px solid var(--primary-color);
  padding-top: 1rem;
}
.data-load-config-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.config-section h4 {
  font-weight: 500;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}
.config-section .checkbox-list {
  max-height: 310px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  border-radius: var(--border-radius);
  background-color: #fff;
}
.config-section .checkbox-list .checkbox-item {
  padding: 3px 6px;
}
.copy-presets-list .preset-item {
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  margin-bottom: 10px;
  background-color: #fff;
}
.preset-item-header {
  display: flex;
  gap: 10px;
  padding: 8px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
}
.preset-item-header .preset-name { flex: 2; }
.preset-item-header .preset-type { flex: 1; min-width: 190px; }
.preset-item-body {
  padding: 10px;
}
.preset-full-record-options,
.preset-single-person-options {
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: #f7fbff;
  border: 1px solid #dbeafe;
}
.preset-single-person-options {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: end;
}
.preset-single-person-options .help-text { grid-column: 1 / -1; }
.preset-single-person-options label { display: grid; gap: 5px; }
.copy-match-info { margin-bottom: 5px; white-space: nowrap; }
.preset-mapping-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.preset-mapping-row select {
  flex: 1;
}
/* File: Stylesheet.html.txt - BỔ SUNG CHO GIAO DIỆN TÌM & TẢI */

/* ===== STYLE CHO KHU VỰC TÌM & TẢI TRÊN FORM ===== */
.search-and-load-container {
  padding: 10px;
  background-color: #f8faff;
  border: 1px solid #dbeeff;
  border-radius: var(--border-radius);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.search-and-load-container .form-group {
  margin-bottom: 0;
  flex-grow: 1;
}
.search-and-load-container .form-group label {
  font-size: 0.9rem;
}

/* ===== STYLE CHO MODAL KẾT QUẢ TÌM KIẾM ===== */
#search-results-table .action-dropdown {
  width: 100%;
  height: var(--input-height);
}
/* File: Stylesheet.html.txt - BỔ SUNG VÀ THAY THẾ CHO NÚT BÁO CÁO */

.action-buttons .report-btn {
  color: #5d6d7e; /* Màu xám xanh */
}

/* Kiểu cho dropdown-content sẽ được JavaScript quản lý */
.report-dropdown-content {
  display: none; /* Ẩn mặc định */
  position: absolute;
  top: 100%; /* Sửa: Luôn nằm ngay dưới thẻ cha */
  right: 0; /* Sửa: Căn lề phải với thẻ cha */
  margin-top: 5px; /* Sửa: Thêm một khoảng cách nhỏ */
  background-color: #ffffff;
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9999;
  border-radius: var(--border-radius);
  border: 1px solid #ddd;
  padding: 5px 0;
}

/* THÊM MỚI CLASS NÀY */
.report-dropdown-content.show {
  display: block; /* Dùng class 'show' để hiện menu */
}

.report-dropdown-content a {
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  font-size: 0.9rem;
}

.report-dropdown-content a:hover {
  background-color: #f1f1f1;
}
.app-loader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: var(--primary-color);
  animation: spin 1s ease infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* File: Stylesheet.html.txt - BỔ SUNG CHO CẤU HÌNH ÁNH XẠ */

.preset-options {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e0e0e0;
}
.config-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}

.config-section-header h4 {
  margin: 0;
}

.checkbox-list-toolbar {
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
}

.checkbox-list-toolbar input {
  flex-grow: 1;
}

/* File: Stylesheet.html.txt - BỔ SUNG CHO DANH SÁCH KÉO-THẢ */

.reorder-list-container {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.reorder-list {
  flex: 1;
  min-height: 290px;
  max-height: 290px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.5rem;
  background-color: #fff;
}

.reorder-list-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 4px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  cursor: grab;
  user-select: none;
}

.reorder-list-item:active {
  cursor: grabbing;
}

.reorder-list-item .item-order {
  font-weight: bold;
  color: var(--primary-color);
  margin-right: 8px;
  min-width: 20px;
  text-align: right;
}

.reorder-list-item .item-name {
  flex-grow: 1;
}

.reorder-list-item.sortable-ghost {
  opacity: 0.4;
  background: #cce5ff;
}

.reorder-list#inactive-fields .reorder-list-item {
  background-color: #f1f3f5;
  color: #868e96;
}

.reorder-list#inactive-fields .item-order {
  display: none;
}
/* Stylesheet.html */



#excel-report-container {
    position: relative; 
}

#excel-report-options {
    display: none; /* SỬA LỖI: Chỉ giữ lại thuộc tính này để mặc định ẩn đi */
    position: absolute; 
    top: 100%; 
    left: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    z-index: 100; 
    align-items: flex-end; 
    gap: 10px; 
    margin-top: 5px; 
    width: max-content;
    /* Dòng "display: flex;" bị lỗi đã được xóa bỏ khỏi đây */
}

#excel-report-options .form-group {
    margin-bottom: 0; 
}

#excel-report-options .form-group label {
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    display: block; 
}

#excel-report-options #generate-excel-report-btn {
    white-space: nowrap; 
}
/* Stylesheet.html - CSS BỔ SUNG CHO GIAO DIỆN TẢI TỆP */

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius);
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 1rem;
}

.drop-zone:hover, .drop-zone.drag-over {
  background-color: #eef7ff;
  border-color: var(--primary-color);
}

.drop-zone-icon {
  font-size: 3rem;
  color: var(--primary-light);
  margin-bottom: 0.5rem;
}

.drop-zone-prompt {
  color: var(--text-light);
}

.file-list-preview {
  margin-top: 1rem;
  max-height: 150px;
  overflow-y: auto;
}

.file-list-item {
  display: flex;
  align-items: center;
  padding: 5px;
  background-color: #f1f3f5;
  border-radius: 3px;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.file-list-item i {
  margin-right: 8px;
  color: #868e96;
}
/* Stylesheet.html */

/* ===== STYLE CHO MODAL CHI TIẾT (MỚI) ===== */
.form-readonly-container .form-group {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.form-readonly-container .form-group:last-child {
    border-bottom: none;
}

.form-readonly-container .form-group label {
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 0.1rem;
}

.form-readonly-container .form-group p {
    margin: 0;
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: var(--border-radius);
    min-height: 34px;
    word-wrap: break-word;
}

.info-btn {
    color: #3498db; /* Màu xanh dương */
}

#info-report-container .report-dropdown-content {
    right: 0; /* Căn phải cho menu */
    left: auto;
}
#search-results-modal,
#duplicate-sheet-modal {
  z-index: 1010;
}
/* ===== STYLE CHO MENU HÀNH ĐỘNG MỚI (THAY THẾ NHIỀU NÚT) ===== */
.action-buttons {
  /* Ghi đè để đảm bảo nội dung không bị cắt xén khi menu mở */
  overflow: visible !important;
  position: relative; /* Cần thiết để định vị menu con */
}

.action-menu-container {
  position: relative;
  display: inline-block;
}

.action-menu-trigger {
  width: 32px;
  height: 32px;
  padding: 0;
  color: #5d6d7e; /* Màu xám xanh */
}

.action-menu-trigger .fas {
  margin: 0; /* Xóa margin của icon */
}

.action-menu-flyout {
  display: none; /* Mặc định ẩn đi */
  position: absolute;
  top: 50%;
  left: calc(100% + 5px); /* Hiển thị bên phải nút trigger */
  transform: translateY(-50%);
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  z-index: 10;
  display: flex;
  padding: 5px;
  gap: 5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.action-menu-flyout.show {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Giữ lại style gốc của các nút bên trong menu */
.action-menu-flyout .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Thêm mũi tên nhỏ chỉ vào nút trigger */
.action-menu-flyout::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%; /* Mũi tên ở bên trái của menu */
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent var(--card-bg) transparent transparent;
}

.action-menu-flyout::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: transparent var(--border-color) transparent transparent;
  z-index: -1;
}
/* ===== TÙY CHỈNH ĐỘ RỘNG CỘT THAO TÁC ===== */

/* Điều chỉnh lại vị trí của menu con để không bị khuất khi cột hẹp */
.data-table td:nth-child(2) .action-menu-flyout {
   left: 55px; /* Đẩy menu con ra xa hơn một chút về bên phải */
}
/* Stylesheet.html - THÊM VÀO CUỐI TỆP */

/* ===== NÂNG CẤP GIAO DIỆN MODAL CẤU HÌNH SHEET (GIẢI QUYẾT 3 VẤN ĐỀ) ===== */

/* 1. CỐ ĐỊNH KÍCH THƯỚC MODAL VÀ BỐ CỤC HEADER/FOOTER */
#sheet-modal .modal-content {
  /* Chuyển sang layout flexbox theo chiều dọc */
  display: flex;
  flex-direction: column; 
  /* Cố định chiều cao, ví dụ 90% chiều cao màn hình */
  height: 90vh; 
  max-height: 800px; /* Có thể giới hạn chiều cao tối đa */
  min-height: 600px; /* Chiều cao tối thiểu */
}

#sheet-modal .modal-header,
#sheet-modal .modal-footer {
  flex-shrink: 0; /* Không cho phép header và footer co lại */
}

#sheet-modal .modal-body {
  flex-grow: 1; /* Cho phép body lấp đầy không gian còn lại */
  overflow-y: hidden; /* QUAN TRỌNG: Tắt cuộn của body */
  padding: 0; /* Xóa padding mặc định để layout flex con hoạt động đúng */
  display: flex; /* Biến body thành flex container... */
  flex-direction: column; /* ...để chứa thanh tab và nội dung tab */
}

/* 2. CỐ ĐỊNH THANH TAB VÀ CHO PHÉP NỘI DUNG CUỘN */
#sheet-modal .tab-content {
  flex-grow: 1; /* Cho phép nội dung tab lấp đầy không gian còn lại */
  overflow-y: auto; /* QUAN TRỌNG: Chỉ phần nội dung này được phép cuộn */
  padding: 1rem; /* Thêm lại padding cho nội dung bên trong */
}

/* 3. CẢI THIỆN PHỐI MÀU TAB CHO DỄ NHÌN */
.modal-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
  background-color: #f1f3f5; /* Nền xám rất nhạt cho toàn bộ thanh tab */
  padding-left: 1rem;
  padding-top: 5px;
  gap: 5px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  flex-shrink: 0; /* Không cho thanh tab co lại */
}

.modal-tabs .tab-link {
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none; /* Xóa border dưới mặc định */
  border-radius: 4px 4px 0 0; /* Bo góc trên */
  margin-bottom: -1px; /* Dịch lên 1px để che đường kẻ của container */
  transition: all 0.2s ease-in-out;
  color: #3498db; /* Màu chữ tối hơn cho dễ đọc */
  font-weight: 500;
  background-color: #f8f9fa; /* Nền cho tab không active */
  border-color:#3498db;
}

.modal-tabs .tab-link:hover:not(.active) {
  background-color: #f1f3f5;
  color: var(--primary-color);
  text-decoration: none;
}

/* Đây là style quan trọng nhất cho tab đang được chọn */
.modal-tabs .tab-link.active {
  color: #fff;
  font-weight: 600;
  background-color: #3498db; /* Nền trắng, liền mạch với nội dung */
  border-color: var(--border-color); /* Đường viền xám nhạt */
  border-bottom-color: #fff; /* Xóa đường viền dưới để tạo hiệu ứng nối liền */
}
.field-hidden-formula-container {
    display: none;
}
/* ===== GIAO DIỆN SẮP XẾP TAB CHÍNH BẰNG NÚT KÉO-THẢ ===== */
.tab-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background-color: #e9ecef;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.tab-pill {
  padding: 8px 12px;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: var(--border-radius);
  cursor: grab;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.tab-pill:active {
  cursor: grabbing;
}

.tab-pill .drag-icon {
  color: #adb5bd;
}

/* Hiệu ứng cho "bóng ma" khi đang kéo */
.pill-ghost {
  opacity: 0.4;
  background-color: #cce5ff;
  border-style: dashed;
}
/* ===== CẢI TIẾN CÂN BẰNG CỘT BẢNG (V5) ===== */

/* --- Bảng Quản lý Báo cáo --- */
#report-configs-table th:nth-child(1), /* Tên Báo cáo */
#report-configs-table td:nth-child(1) {
  width: 45%; /* Cho cột này rộng nhất */
}

#report-configs-table th:nth-child(2), /* Áp dụng cho Sheet */
#report-configs-table td:nth-child(2) {
  width: 25%;
}

#report-configs-table th:nth-child(3), /* Loại Báo cáo */
#report-configs-table td:nth-child(3) {
  width: 15%;
}

#report-configs-table th:nth-child(4), /* Thao tác */
#report-configs-table td:nth-child(4) {
  width: 120px; /* Cố định độ rộng */
  text-align: center;
}

/* ================= V35.2.20 REPORT PACKAGE + EXCEL DOWNLOADS ================= */
.report-package-note {
  padding: 11px 13px;
  margin-bottom: 14px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: #f0f9ff;
  color: #0c4a6e;
  line-height: 1.45;
}
#report-management-page .page-header {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}
#report-management-page .page-header h2 { margin-right: auto; }
.report-package-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 8px;
}
.report-package-list {
  max-height: 330px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px;
}
.report-package-list .checkbox-item {
  align-items: flex-start;
  padding: 9px 8px;
  border-bottom: 1px solid #f1f5f9;
}
.report-package-list .checkbox-item:last-child { border-bottom: 0; }
.report-package-list .report-package-missing {
  color: #b91c1c;
  font-size: 12px;
  margin-left: 6px;
}
.report-download-list {
  display: grid;
  gap: 9px;
  max-height: 420px;
  overflow: auto;
}
.report-download-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}
.report-download-item strong,
.report-download-item small { display: block; }
.report-download-item small { color: #64748b; margin-top: 3px; }
@media(max-width:700px){
  .report-package-toolbar,.report-download-item{display:grid;grid-template-columns:1fr;}
}
/* ================= END V35.2.20 ================= */


/* --- Bảng Quản lý Người dùng --- */
#users-table th:nth-child(1), /* Email */
#users-table td:nth-child(1) {
  width: 25%;
}

#users-table th:nth-child(2), /* Tên người dùng */
#users-table td:nth-child(2) {
  width: 18%;
}

#users-table th:nth-child(3), /* Vai trò */
#users-table td:nth-child(3) {
  width: 10%;
}

#users-table th:nth-child(4), /* Quyền hạn */
#users-table td:nth-child(4) {
  width: 27%; /* Cho cột này rộng để chứa nhiều quyền */
}

/* Cột "Quản lý người dùng" sẽ tự động co giãn */

#users-table th:nth-child(6), /* Thao tác */
#users-table td:nth-child(6) {
  width: 120px; /* Cố định độ rộng */
  text-align: center;
}
/* ===== CẢI TIẾN BẢNG DỮ LIỆU - RESIZE CỘT (GIAI ĐOẠN 2) ===== */
.data-table th {
  position: relative; /* Bắt buộc để định vị tay nắm */
}

.resize-handle {
  position: absolute;
  top: 0;
  right: -3px; /* Nằm lệch sang phải một chút để dễ bấm */
  width: 6px;
  height: 100%;
  cursor: col-resize; /* Biểu tượng con trỏ thay đổi kích thước cột */
  user-select: none; /* Ngăn bôi đen chữ khi kéo */
  z-index: 2; /* Nằm trên các thành phần khác */
}

/* Hiển thị một đường kẻ trực quan khi người dùng di chuột qua tay nắm */
.resize-handle:hover,
.data-table th.resizing .resize-handle {
  background-color: var(--primary-color);
}

/* Thêm một lớp phủ khi đang kéo để ngăn các sự kiện không mong muốn */
.resizing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  cursor: col-resize;
  z-index: 9999;
}
/* CSS cho Trạng thái Tác vụ Hàng loạt */
.batch-item-status {
  width: 20px;
  text-align: center;
  margin-right: 8px;
}
.batch-item-status .fa-spinner {
  color: var(--primary-color);
}
.batch-item-status .fa-check-circle {
  color: var(--success-color);
}
.batch-item-status .fa-times-circle {
  color: var(--danger-color);
}
.checkbox-item {
  transition: background-color 0.3s ease;
}
.checkbox-item.processing {
  background-color: #eaf2ff !important;
}
.checkbox-item.success {
    background-color: #e8f8f5 !important;
}
.checkbox-item.error {
    background-color: #feefef !important;
}
/* ===== STYLE CHO NHÃN TRẠNG THÁI IMPORT ===== */
.status-tag {
  padding: 3px 8px;
  border-radius: 12px; /* Bo tròn hơn */
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  white-space: nowrap;
}

.status-tag.status-update {
  background-color: var(--warning-color); /* Màu cam */
}

.status-tag.status-new {
  background-color: var(--success-color); /* Màu xanh lá */
}
/* File: Stylesheet.html.txt - BỔ SUNG CHO KÉO-THẢ TRƯỜNG */

.drag-handle-field {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 100%;
  cursor: grab; /* Biểu tượng bàn tay nắm */
  color: #adb5bd; /* Màu xám nhạt */
  font-size: 1.5rem;
  margin-right: 10px;
}

.drag-handle-field:active {
  cursor: grabbing; /* Biểu tượng bàn tay đang nắm */
}

.field-item.sortable-ghost {
  opacity: 0.4;
  background: #d0e6ff;
}
/* File: Stylesheet.html.txt - BỔ SUNG CHO TÍNH NĂNG IMPORT LINH HOẠT */

.mapping-table th, .mapping-table td {
  padding: 0.75rem;
  vertical-align: middle;
}

.mapping-table td:first-child {
  width: 40%;
  font-weight: 500;
}


.mapping-table td.field-error {
    background-color: #fff9f8;
}
.mapping-table td.field-error select {
    border-color: var(--danger-color);
}
/* ===== TỐI ƯU BẢNG XEM TRƯỚC IMPORT (V2 - Giới hạn ký tự) ===== */
.preview-import-table {
  table-layout: auto; /* Để trình duyệt tự động tính độ rộng cột thông minh */
  width: 100%;
}

.preview-import-table th,
.preview-import-table td {
  /* Các thuộc tính mới để kiểm soát văn bản theo yêu cầu của bạn */
  white-space: nowrap;      /* 1. Bắt buộc văn bản nằm trên một dòng */
  overflow: hidden;         /* 2. Ẩn đi phần văn bản bị tràn ra ngoài ô */
  text-overflow: ellipsis;  /* 3. Hiển thị dấu "..." cho phần bị ẩn */
  max-width: 350px;         /* 4. Đặt độ rộng tối đa cho mỗi ô (tương đương khoảng 50 ký tự, bạn có thể điều chỉnh số này nếu muốn) */

  /* Giữ lại các định dạng chiều cao cho đồng đều */
  height: 40px;
  vertical-align: middle;
}
/* ===== STYLE CHO BẢNG XEM TRƯỚC IMPORT V3 ===== */
.preview-import-table tr.header-row-preview th {
  background-color: #dbeeff !important; /* Màu xanh dương nhạt */
  color: #004085;
  font-weight: bold;
}
/* ===== GIẢI PHÁP CSS HOÀN CHỈNH CHO TOM SELECT TRONG MODAL ===== */

/* 2. Sửa lỗi chiều rộng của dropdown */
.ts-dropdown[data-tomselect-dropdown] {
  min-width: 350px; /* Đặt một chiều rộng tối thiểu hợp lý */
  width: auto !important; /* Cho phép nó tự mở rộng theo nội dung dài hơn */
}

/* 3. Giải quyết vấn đề "không đồng nhất" bằng cách đánh dấu lựa chọn đã dùng */
.ts-dropdown .option-already-used {
  background-color: #f0f8ff !important; /* Màu nền xanh nhạt để phân biệt */
  color: #6c757d !important;          /* Màu chữ hơi xám nhưng vẫn rõ nét, không bị mờ */
  font-style: italic;
}

/* Thêm icon check ✓ vào trước các lựa chọn đã dùng */
.ts-dropdown .option-already-used:before {
  content: "✓ ";
  color: var(--success-color);
  font-weight: bold;
  margin-right: 5px;
}
.ts-dropdown {
    /* Thêm thuộc tính này để dropdown có nền màu trắng */
    background: #ffffff !important;

    /* Các thuộc tính khác đã có để đảm bảo nó hiển thị đúng */
    z-index: 9999 !important;
    min-width: 350px;
    width: auto !important;
    border: 1px solid #d0d0d0; /* Thêm đường viền cho đẹp hơn */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ cho nổi bật */
}
/* ===== STYLE CHO THANH TRẠNG THÁI TIẾN TRÌNH (PROGRESS BAR) ===== */
.progress-bar-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  background-color: var(--card-bg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: var(--border-radius);
  z-index: 10000;
  overflow: hidden;
  border-top: 3px solid var(--primary-color);
  animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.progress-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #f8f9fa;
}

#progress-bar-title {
  font-size: 0.9rem;
}

#progress-bar-percentage {
  font-weight: bold;
  color: var(--primary-color);
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background-color: #e9ecef;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.2s ease-in-out;
}

.progress-bar-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

#progress-bar-status {
  font-size: 0.85rem;
  color: var(--text-light);
}

#progress-bar-cancel-btn {
  padding: 2px 8px;
  font-size: 0.8rem;
}
/* === BỔ SUNG CSS CHO BỐ CỤC ÁNH XẠ 2 CỘT (PHIÊN BẢN CẬP NHẬT) === */
#word-mapping-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Chia thành 2 cột bằng nhau */
  gap: 1rem 1.5rem; /* Tạo khoảng cách giữa các hàng và cột */
}

/* Ghi đè lại style cũ của preset-mapping-row */
#word-mapping-list .preset-mapping-row {
  display: flex;
  flex-direction: column; /* Sắp xếp label và input theo chiều dọc */
  gap: 5px; /* Khoảng cách giữa label và input */
  align-items: stretch; /* Đảm bảo các thành phần co giãn theo chiều rộng */
}

/* === THAY ĐỔI DUY NHẤT NẰM Ở ĐÂY === */
#word-mapping-list .preset-mapping-row label {
  text-align: left !important; /* Căn lề trái cho label */
  font-weight: bold;            /* IN ĐẬM TÊN TRƯỜNG */
  font-size: 0.95rem;           /* TĂNG KÍCH THƯỚC CHỮ LÊN MỘT CHÚT */
  flex: initial !important;     /* Reset lại thuộc tính flex */
}

#word-mapping-list .preset-mapping-row span {
  display: none; /* Ẩn mũi tên "->" không cần thiết nữa */
}

#word-mapping-list .preset-mapping-row .mapping-placeholder {
  width: 100%; /* Cho input chiếm toàn bộ chiều rộng của cột */
}
/* ===== BỔ SUNG CHO NÂNG CẤP BẢNG DỮ LIỆU & TÌM KIẾM ===== */

/* 1. Bật thanh cuộn ngang cho khu vực chứa bảng DỮ LIỆU CHÍNH */
.data-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 2. Thiết lập layout cho bảng DỮ LIỆU CHÍNH để có thể cuộn và co giãn cột */
#data-management-page .data-table {
  table-layout: fixed; 
  width: 100%;
  min-width: 900px; /* Chiều rộng tối thiểu để bảng không bị vỡ trên màn hình nhỏ */
}

/* 3. Thiết lập mặc định cho tất cả các cột DỮ LIỆU CHÍNH */
.data-table th, .data-table td {
  min-width: 170px; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word; 
  position: relative; /* Cần thiết cho tay nắm co giãn */
}

/* 4. Ghi đè cho các cột đặc biệt của bảng DỮ LIỆU CHÍNH */
.data-table th:first-child, .data-table td:first-child { /* Checkbox */
  width: 40px; min-width: 40px; max-width: 40px; text-align: center;
}
.data-table th:nth-child(2), .data-table td:nth-child(2) { /* Thao tác */
  width: 70px; min-width: 60px; max-width: 70px; padding-left: 0.5rem; padding-right: 0.5rem; text-align: center; overflow: visible; 
}
/* 5. Style cho tay nắm co giãn cột */
.data-table th .resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 2;
}
.data-table th .resize-handle:hover,
.data-table th.resizing .resize-handle {
  background-color: var(--primary-color);
}
/* =================================================================== */
/* ===== BỔ SUNG NÂNG CẤP GIAO DIỆN (PHIÊN BẢN SỬA LỖI CUỐI CÙNG) ===== */
/* =================================================================== */

/* ----- Ý TƯỞNG VỀ THANH CUỘN DỌC CHUNG ----- */
#app, #main-app {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}
.app-content {
  overflow: visible;
  display: block;
}
.content {
  overflow-y: visible;
  transition: margin-left 0.3s ease;
  margin-left: 220px;
}


/* ----- Ý TƯỞNG 1: SIDEBAR (MENU) CÓ THỂ THU GỌN ----- */
#sidebar-toggle-btn {
  margin-right: 15px; border-color: transparent;
}
#sidebar-toggle-btn:hover {
  border-color: var(--border-color); background-color: #f5f5f5;
}
.sidebar {
  position: fixed; height: 100vh; transition: width 0.3s ease;
}
.sidebar-collapsed .content {
  margin-left: 60px;
}
.sidebar-collapsed .sidebar {
  width: 60px;
}
.sidebar-collapsed .sidebar-menu li > span,
.sidebar-collapsed .sidebar-header h3,
.sidebar-collapsed .sidebar-section-title > span {
  display: none;
}
.sidebar-collapsed .sidebar-menu li,
.sidebar-collapsed .sidebar-header {
  justify-content: center;
}
.sidebar-collapsed .sidebar-menu li .fas,
.sidebar-collapsed .sidebar-header .fas {
  margin-right: 0;
}
.sidebar-collapsed .sidebar-section-title .fas {
    margin: 0 auto;
}


/* ----- Ý TƯỞNG 2: TIÊU ĐỀ BẢNG "DÍNH" LẠI KHI CUỘN (ĐÃ SỬA LỖI) ----- */
#data-management-page .data-table th {
  position: -webkit-sticky;
  position: sticky;
  
  /* THAY ĐỔI DUY NHẤT NẰM Ở ĐÂY: Sửa từ 56px thành -1px */
  top: -1px; 
  
  z-index: 11;
  background-color: #f8f9fa; 
  /* Thêm một đường viền dưới mỏng để phân tách rõ hơn khi cuộn */
  border-bottom: 2px solid #dee2e6;
}


/* ----- Ý TƯỞNG 3: HIỆU ỨNG VÀ CẢM NHẬN CHUNG + SỬA LỖI ĐỘ RỘNG CỘT ----- */
:root {
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn, .sheet-menu-item, .sidebar-menu li, .config-card {
  transition: all 0.2s ease-in-out;
}
.data-table tbody tr:hover {
  background-color: rgba(52, 152, 219, 0.1);
}
.modal-content, .config-card, .auth-card {
  border-radius: 8px;
}

#data-management-page .data-table th, 
#data-management-page .data-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word; 
  position: relative;
}

/* Record-list widths are independent; narrower columns wrap instead of hiding values. */
#data-management-page > .data-table-container {
  min-width: 0;
  overflow: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
}
#data-management-page #data-table {
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
}
#data-management-page #data-table th,
#data-management-page #data-table td {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  overflow: visible;
  border-width: 0 1px 1px 0;
}
#data-management-page #data-table th {
  position: sticky;
  top: 0;
  z-index: 11;
  padding-right: 14px;
  background: #f8f9fa;
  text-align: left;
}
#data-management-page #data-table td.action-buttons {
  display: table-cell;
  text-align: center;
}
#data-management-page #data-table .enumlist-tag {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
#data-management-page #data-table.record-table-measuring th,
#data-management-page #data-table.record-table-measuring td,
#data-management-page #data-table.record-table-measuring .enumlist-tag {
  white-space: nowrap;
}
#data-management-page #data-table .resize-handle {
  right: 0;
  width: 8px;
  touch-action: none;
}
#data-management-page #data-table .resize-handle:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}
body.record-column-resizing,
body.record-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.repeat-rule-item {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1fr) 100px minmax(190px, 1fr) minmax(190px, 1.2fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
}
.repeat-fields-sortable {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.repeat-field-sort-item {
  display: grid;
  grid-template-columns: 30px 28px 22px minmax(140px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #d9e2ec;
  border-radius: 6px;
  background: #fff;
}
.repeat-field-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #edf4fb;
  color: #486581;
  font-size: 0.8rem;
  font-weight: 600;
}
.repeat-field-drag-handle {
  cursor: grab;
  color: #7890a8;
  font-size: 1.25rem;
  line-height: 1;
}
.repeat-field-move-buttons { display: flex; gap: 4px; }
.repeat-field-move-buttons .btn { min-width: 32px; padding: 0.2rem 0.45rem; }
.repeat-range { display: flex; gap: 6px; }
.repeat-people-section { margin-top: 12px; padding-top: 12px; border-top: 2px solid #d7e3f0; }
.repeat-people-header, .repeat-person-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.repeat-people-header {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #b9d2ee;
  border-left: 5px solid #4f91d8;
  border-radius: 7px;
  background: #eaf3fd;
  color: #174f86;
}
.repeat-people-header h4 { margin: 0; font-size: 1rem; font-weight: 700; }
.repeat-person-card {
  --repeat-card-bg: #f8fafc;
  --repeat-card-border: #d9e2ec;
  --repeat-card-accent: #5b7fa3;
  margin: 12px 0;
  padding: 0 14px 14px;
  overflow: hidden;
  border: 1px solid var(--repeat-card-border);
  border-left: 5px solid var(--repeat-card-accent);
  border-radius: 8px;
  background: var(--repeat-card-bg);
}
.repeat-person-tone-1 { --repeat-card-bg: #f4f8ff; --repeat-card-border: #c9daf2; --repeat-card-accent: #4f86c6; }
.repeat-person-tone-2 { --repeat-card-bg: #f3fbf7; --repeat-card-border: #c5e6d3; --repeat-card-accent: #46a06c; }
.repeat-person-tone-3 { --repeat-card-bg: #fff9f0; --repeat-card-border: #efd9b7; --repeat-card-accent: #d39435; }
.repeat-person-tone-4 { --repeat-card-bg: #faf5ff; --repeat-card-border: #ddcbed; --repeat-card-accent: #9065b4; }
.repeat-person-card-header {
  margin: 0 -14px 12px;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px solid var(--repeat-card-border);
  background: color-mix(in srgb, var(--repeat-card-accent) 11%, white);
  color: #243b53;
}
.repeat-person-card-header strong { font-size: .94rem; font-weight: 700; color: var(--repeat-card-accent); }
.repeat-people-footer { display: flex; justify-content: flex-end; padding: 2px 0 4px; }
.repeat-people-footer .btn { min-height: 34px; }
.repeat-person-fields { display: block; margin-top: 10px; }
.repeat-person-row { display: flex; flex-wrap: nowrap; gap: 12px; width: 100%; margin-bottom: 12px; }
.repeat-person-row > .form-group { min-width: 0; flex-grow: 0; margin-bottom: 0; }
.repeat-layout-builder-section { padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fbff; }
.repeat-layout-rows { margin-bottom: 10px; }
.repeat-layout-config-row .fields-wrapper { min-width: 360px; }
.global-form-style-section { margin: 0 1rem 1rem; padding: 14px; border: 1px solid #d9e2ec; border-radius: 8px; background: #f8fbff; }
.global-form-style-section h4 { margin: 0 0 4px; }
.global-form-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.global-style-card { min-width: 0; padding: 12px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; }
.global-style-card legend { padding: 0 6px; font-weight: 700; color: #334e68; }
.global-style-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.global-style-controls label { display: flex; flex-direction: column; gap: 5px; font-size: .86rem; }
.global-style-controls .color-control { min-height: 36px; padding: 3px; }
.tab-background-control { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .84rem; }
.tab-background-control input[type="color"] { width: 42px; height: 32px; padding: 2px; border: 1px solid #b8c2cc; border-radius: 4px; background: #fff; }
.form-layout-preview { margin-top: 14px; padding: 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.form-preview-tab { margin-top: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 6px; }
.form-preview-row { display: flex; gap: 10px; margin: 10px 0; }
.form-preview-field { min-width: 0; flex-grow: 1; }
.form-preview-field label { display: block; font-size: .85rem; margin-bottom: 4px; }
.form-preview-input { height: 34px; border: 1px solid #cbd5e1; border-radius: 4px; background: #f8fafc; }
.multi-record-permissions { display:flex; flex-wrap:wrap; gap:14px; margin:12px 0; }
.config-note { padding:12px; border-radius:8px; background:#eff6ff; color:#1e3a5f; border:1px solid #bfdbfe; }
.linked-record-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-top:18px; padding:6px; border:1px solid #cbd5e1; border-radius:10px; background:#eef4fa; }
.linked-record-tab { padding:9px 15px; border:0; border-radius:7px; color:#486581; background:transparent; font-weight:700; cursor:pointer; }
.linked-record-tab.active { color:#fff; background:#2f80ed; box-shadow:0 2px 7px rgba(47,128,237,.22); }
.linked-record-section { margin-top:8px; padding:14px; border:1px solid #cbd5e1; border-radius:12px; background:#f8fafc; }
.linked-record-section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.linked-record-section-header h3 { margin:0 0 3px; color:#24496b; }
.linked-record-count { padding:5px 10px; border-radius:999px; background:#dbeafe; color:#1e40af; font-size:.84rem; font-weight:600; }
.linked-record-list { display:grid; gap:12px; }
.linked-record-card { border:1px solid #bfdbfe; border-left:5px solid #60a5fa; border-radius:10px; background:#fff; overflow:hidden; box-shadow:0 2px 7px rgba(30,64,175,.07); }
.linked-record-card:nth-child(4n+2) { border-left-color:#34d399; }
.linked-record-card:nth-child(4n+3) { border-left-color:#fbbf24; }
.linked-record-card:nth-child(4n+4) { border-left-color:#c084fc; }
.linked-record-card-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; background:#eff6ff; }
.linked-card-actions { display:flex; gap:5px; }
.linked-record-fields { padding:12px; }
.linked-record-row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.linked-record-row > .form-group { min-width:150px; }
.linked-record-footer { margin-top:12px; }
.linked-enumlist { min-height:76px; }
@media (max-width: 900px) {
  .field-style-grid { grid-template-columns: 1fr; }
  .global-form-style-grid { grid-template-columns: 1fr; }
  .repeat-rule-item { grid-template-columns: 1fr; }
  .repeat-person-row { flex-wrap: wrap; }
  .repeat-person-row > .form-group { flex-basis: 100% !important; }
  .repeat-field-sort-item { grid-template-columns: 28px 24px 22px minmax(100px, 1fr) auto; }
  .linked-record-row > .form-group { flex-basis:100% !important; }
  .linked-record-card-header { align-items:flex-start; }
}

/* ===== V33.3 Import Wizard ===== */
.import-wizard-modal-content{max-width:1500px;width:96vw;height:92vh;display:flex;flex-direction:column;}
.import-wizard-body{overflow:auto;flex:1;padding:16px;}
.import-wizard-steps{display:grid;grid-template-columns:repeat(7,minmax(125px,1fr));gap:8px;margin-bottom:16px;position:sticky;top:0;background:#fff;z-index:3;padding-bottom:8px;}
.import-wizard-step{border:1px solid #cbd5e1;background:#f8fafc;border-radius:6px;padding:10px 8px;font-weight:600;cursor:pointer;color:#334155;}
.import-wizard-step.active{background:#4f86f7;color:#fff;border-color:#4f86f7;}
.import-wizard-pane{display:none;} .import-wizard-pane.active{display:block;}
.import-wizard-grid{display:grid;gap:12px;} .import-wizard-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));} .import-wizard-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.import-wizard-preview{max-height:390px;overflow:auto;border:1px solid #e2e8f0;border-radius:6px;}
.import-wizard-map-container{max-height:520px;overflow:auto;}
.import-wizard-inline-summary{margin:10px 0;padding:10px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;}
.import-rule-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0;}
.import-rule-box>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #dbeafe;background:#eff6ff;border-radius:6px;}
.import-rule-box .import-rule-error{background:#fff7ed;border-color:#fed7aa;}
.import-transform-row{display:grid;grid-template-columns:minmax(220px,1fr) 180px minmax(300px,2fr);gap:12px;align-items:start;padding:10px;border-bottom:1px solid #e5e7eb;}
.import-transform-row textarea{min-height:74px;resize:vertical;}
.import-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:8px;}
.import-stat-card{padding:12px;border:1px solid #e2e8f0;border-radius:7px;background:#f8fafc;}
.import-stat-card strong{display:block;font-size:20px;margin-top:4px;}
.import-template-save-box{display:flex;gap:10px;margin-top:14px;align-items:center;}
.import-template-save-box input{max-width:520px;}
.import-wizard-footer{justify-content:space-between;} .import-wizard-footer-right{display:flex;gap:8px;}
.iw-error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;padding:10px;border-radius:6px;margin:10px 0;}
.iw-ok{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0;padding:10px;border-radius:6px;margin:10px 0;}
.iw-warning{color:#92400e;background:#fffbeb;border:1px solid #fde68a;padding:10px;border-radius:6px;margin:10px 0;}
@media(max-width:1000px){.import-wizard-steps{grid-template-columns:1fr 1fr}.import-wizard-grid-4,.import-wizard-grid-2{grid-template-columns:1fr}.import-transform-row{grid-template-columns:1fr}.import-stat-grid{grid-template-columns:1fr 1fr}}


/* V33.8 - Tìm nhiều trường kiểu EnumList + tải dữ liệu nhanh */
.search-multi-container{display:block;padding:12px 14px;border:1px solid #d9e2ef;border-radius:8px;background:#f8fbff;margin-bottom:14px}
.search-multi-head{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(420px,2fr);gap:12px;align-items:start}
.search-field-chips{display:flex;flex-wrap:wrap;gap:8px}
.search-field-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #cbd7e6;border-radius:6px;background:#fff;cursor:pointer;font-weight:600;margin:0}
.search-field-chip:has(input:checked){border-color:#6a88ff;background:#edf2ff;color:#2747b8}
.search-field-chip input{margin:0}
.search-values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:12px}
.search-value-item{display:flex;flex-direction:column;gap:5px;margin:0;font-weight:600}
.search-actions{display:flex;justify-content:flex-end;margin-top:10px}
.copy-quick-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:390px}
.copy-quick-actions .action-dropdown{width:auto;min-width:150px}
@media(max-width:900px){.search-multi-head{grid-template-columns:1fr}.copy-quick-actions{min-width:0}.search-actions{justify-content:stretch}.search-actions button{width:100%}}


/* V33.25.9 - Sao chép mẫu Import giữa các Sheet */
.iw-copy-template-btn{margin-top:7px;width:100%;}
.iw-template-copy-modal-content{max-width:760px;width:min(760px,94vw);}
.iw-copy-compatibility{margin-top:10px;border:1px solid #dfe5ec;border-radius:8px;padding:12px;background:#f8fafc;min-height:54px;}
.iw-copy-compatibility.iw-copy-ok{border-color:#b7dfc4;background:#f0fff5;color:#236a37;}
.iw-copy-compatibility.iw-copy-warn{border-color:#efd58b;background:#fff9e8;color:#7a5b00;}
.iw-copy-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;}
.iw-copy-check-item{background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.08);border-radius:7px;padding:8px;}
.iw-copy-check-item strong{display:block;font-size:18px;line-height:1.2;margin-top:2px;}
.iw-copy-missing{margin-top:8px;font-size:12px;line-height:1.45;}
@media(max-width:700px){.iw-copy-check-grid{grid-template-columns:1fr;}}


/* ================= V33.27.4 VALIDATION TOAST HISTORY ================= */
.validation-history-tag-v33274 {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10020;
  border: 1px solid #d93025;
  background: #fff;
  color: #b3261e;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
  cursor: pointer;
}
.validation-history-tag-v33274:hover { background: #fff3f2; }
.validation-history-panel-v33274 {
  position: fixed;
  right: 16px;
  bottom: 52px;
  width: min(390px, calc(100vw - 32px));
  max-height: 52vh;
  z-index: 10019;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.validation-history-panel-v33274.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.validation-history-head-v33274 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #fff5f4;
  border-bottom: 1px solid #f1d5d2;
  color: #9b1c16;
  font-size: 13px;
}
.validation-history-close-v33274 {
  border: 0;
  background: transparent;
  color: #6b6b6b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.validation-history-list-v33274 {
  padding: 8px;
  overflow: auto;
  max-height: calc(52vh - 44px);
}
.validation-history-item-v33274 {
  padding: 8px 9px;
  border-left: 3px solid #d93025;
  background: #fffafa;
  border-radius: 5px;
  margin-bottom: 7px;
}
.validation-history-item-v33274:last-child { margin-bottom: 0; }
.validation-history-message-v33274 {
  color: #8f1812;
  font-size: 12.5px;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}
.validation-history-meta-v33274 {
  color: #777;
  font-size: 11px;
  margin-top: 3px;
}
/* Lỗi validation chỉ tô viền trường nhìn thấy; thông báo chi tiết đi qua toast. */
.form-group.has-error .validation-error-message { display: none !important; }
/* ================= END V33.27.4 ================= */

/* ================= V34.7.7 TOKEN SCHEMA REBUILD + CLIENT NORMALIZATION ================= */
/* V33: nhóm dữ liệu liên kết hiển thị đúng vị trí trong Bố cục Form, không tạo tab backend riêng. */
.linked-inline-placeholder { width: 100%; min-width: 0; }
.linked-record-section-inline { margin: .35rem 0 1rem; width: 100%; }
.linked-record-section-inline .linked-record-section-header { margin-bottom: .5rem; }

/* V33.4 - Import wizard grouped mapping */
.import-mapping-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:12px;align-items:center;margin:10px 0 12px;}
.iw-map-group-row td{background:#eef4ff;font-weight:700;color:#234a8a;padding:10px 12px!important;border-top:2px solid #d6e4ff;}
.iw-map-scope{font-size:12px;color:#64748b;margin-top:3px;}
.iw-auto-badge{display:inline-block;padding:3px 7px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:12px;margin:2px 5px 2px 0;}
.iw-formula-badge{background:#f3e8ff;color:#7e22ce;}
.iw-system-badge{background:#fef3c7;color:#92400e;}
@media(max-width:900px){.import-mapping-toolbar{grid-template-columns:1fr}.import-wizard-steps{grid-template-columns:1fr 1fr}}


/* V33.4.2 - Two explicit grouping keys */
.iw-group-key-panel{min-width:0;}
.iw-group-key-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 8px;}
.iw-sub-label{display:block;font-size:12px;font-weight:700;color:#475569;margin:0 0 5px;}
.iw-group-key-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.iw-group-key-chip{background:#e8f1ff;border:1px solid #b9d3ff;color:#1d4f91;border-radius:8px;padding:9px 14px;font-weight:700;min-width:120px;text-align:center;}
.iw-group-key-and{font-weight:800;color:#64748b;}
.iw-group-key-example{font-size:13px;color:#475569;line-height:1.45;}
@media(max-width:800px){.iw-group-key-grid{grid-template-columns:1fr;}}

/* V33.5 - đối chiếu thêm mới / cập nhật */
.iw-match-card{border:1px solid #d9e2ef;background:#f8fbff;border-radius:8px;padding:14px;margin-bottom:14px;}
.iw-match-card h4{margin:0 0 10px 0;color:#234a72;}
.iw-match-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;}
.iw-match-head{font-weight:700;color:#536477;margin-bottom:5px;}
.iw-update-options{margin-top:12px;}
.iw-danger-option{display:flex;align-items:center;gap:8px;border:1px solid #f0c36d;background:#fff9e8;padding:10px 12px;border-radius:6px;margin:8px 0 12px;}
.iw-match-status-new{font-weight:700;color:#18794e}.iw-match-status-update{font-weight:700;color:#2457c5}.iw-match-status-skip{font-weight:700;color:#8a5a00}.iw-match-status-error{font-weight:700;color:#b42318}
@media(max-width:900px){.iw-match-pair-grid{grid-template-columns:1fr}}

/* V33.7 - Cấu hình Excel xuất */
.excel-export-wizard{display:flex;flex-direction:column;gap:14px}
.excel-export-section{border:1px solid #ddd;border-radius:10px;padding:12px;background:#fff}
.excel-export-section h4{margin:0 0 10px 0}
.excel-export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px}
.excel-row-rule-box{background:#f7f7f7;border-radius:8px;padding:10px;line-height:1.55}
.excel-export-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:10px}.excel-export-toolbar .form-control{max-width:320px}
.excel-map-row{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(220px,1.7fr) minmax(130px,.8fr) minmax(180px,1fr);gap:8px;align-items:center;padding:8px;border-bottom:1px solid #eee}
.excel-map-row.excel-map-header{font-weight:700;background:#f7f7f7;border-radius:6px 6px 0 0}
.excel-source-group{font-weight:700;background:#f3f5f7;padding:6px 8px;border-radius:6px;margin-top:6px}
.excel-map-transform-extra{display:flex;gap:6px}.excel-map-transform-extra input{min-width:0}
#excel-export-preview{margin-top:10px;overflow:auto;max-height:320px}#excel-export-preview table{width:max-content;min-width:100%;border-collapse:collapse}#excel-export-preview th,#excel-export-preview td{border:1px solid #ddd;padding:5px 7px;white-space:nowrap}
@media(max-width:900px){.excel-export-grid{grid-template-columns:1fr}.excel-map-row{grid-template-columns:1fr}.excel-map-row.excel-map-header{display:none}}


/* ===== V33.9 - Tối ưu Form tìm kiếm, Form nhập và kết quả tìm ===== */
#record-modal .modal-content.modal-xl,
#record-modal .modal-content {
  width: calc(100vw - 28px) !important;
  max-width: calc(100vw - 28px) !important;
  height: calc(100vh - 30px) !important;
  max-height: calc(100vh - 30px) !important;
  min-width: min(900px, calc(100vw - 28px));
  min-height: min(650px, calc(100vh - 30px));
}
#record-modal .modal-body { padding: 10px 14px; }
#record-modal .modal-footer { padding: 8px 14px; }

/* Thanh tìm kiếm gọn hơn, ưu tiên diện tích cho Form nhập */
#record-modal .search-multi-container {
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 7px;
}
#record-modal .search-multi-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
#record-modal .search-multi-title { white-space: nowrap; font-size: 13px; }
#record-modal .search-field-chips { gap: 5px; }
#record-modal .search-field-chip {
  padding: 5px 8px;
  gap: 5px;
  font-size: 13px;
  border-radius: 5px;
}
#record-modal .search-values-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
  margin-top: 7px;
}
#record-modal .search-value-item { gap: 3px; font-size: 12px; }
#record-modal .search-value-item .form-control { min-height: 32px; height: 32px; padding: 4px 8px; }
#record-modal .search-actions { margin: 0; display:flex; align-items:center; }
#record-modal .search-actions .btn { padding: 6px 12px; white-space: nowrap; }

/* Modal kết quả tìm kiếm rộng và cao hơn, không cắt trường */
#search-results-modal .modal-content {
  width: 96vw !important;
  max-width: 96vw !important;
  height: 86vh;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
#search-results-modal .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px;
}
#search-results-modal .data-table-container {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: auto;
  padding: 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
#search-results-modal .data-table {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}
#search-results-modal .data-table th,
#search-results-modal .data-table td {
  width: auto;
  min-width: 0;
  white-space: nowrap !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal;
  overflow-wrap: normal;
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
}
#search-results-modal .data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f8fb;
}
#search-results-modal .data-table th:last-child,
#search-results-modal .data-table td:last-child {
  width: 300px;
  min-width: 300px;
  right: auto;
  white-space: normal !important;
  box-shadow: none;
}
#search-results-modal .data-table td:last-child {
  position: static;
  z-index: auto;
}
#search-results-modal .copy-match-info {
  white-space: normal;
}
#search-results-more {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 8px;
}

/* Gói sao chép hiển thị dạng nút chọn nhanh, không dropdown */
#search-results-modal .copy-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: 300px;
  min-width: 0;
}
#search-results-modal .copy-quick-actions .btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  min-height: 30px;
}
#search-results-modal .copy-custom-preset-btn {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
}
#search-results-modal .copy-custom-preset-btn:hover {
  background: #eef4ff;
  border-color: #9bbcff;
  color: #234a8a;
}

@media (max-width: 900px) {
  #record-modal .modal-content.modal-xl,
  #record-modal .modal-content { width: 99vw !important; max-width: 99vw !important; height: 97vh !important; }
  #record-modal .search-multi-head { grid-template-columns: 1fr; }
  #search-results-modal .modal-content { width: 99vw !important; max-width: 99vw !important; height: 92vh; max-height: 92vh; }
}


/* V35.2.22 - Hai chế độ hiển thị/chọn dùng chung một trạng thái */
.display-mode-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 10px;
  margin: 8px 0 6px;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 7px;
}
.display-mode-label { font-weight: 600; color: #46566b; margin-right: 4px; }
.display-mode-btn.active { background: #4f8edc; color: #fff; border-color: #4f8edc; }
.display-mode-config-default { display:flex; align-items:center; gap:12px; margin:10px 0 12px; }
.display-mode-config-tabs { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0; }
.display-mode-config-panel { display:none; padding-top:4px; }
.display-mode-config-panel.active { display:block; }
@media (max-width: 720px) {
  .display-mode-switch { align-items: stretch; }
  .display-mode-label { width:100%; }
  .display-mode-btn { flex:1 1 auto; }
}


/* V33.24.1 - Làm rõ 3 bộ cột hiển thị độc lập */
.display-mode-config-tabs-strong {
  margin-top: 14px;
  border-bottom: 1px solid #d9e5f5;
  padding-bottom: 8px;
}
.display-mode-config-tabs-strong .display-config-tab {
  min-width: 132px;
  font-weight: 600;
}
.display-mode-current-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px;
  padding: 10px 14px;
  border: 1px solid #9fc5f8;
  border-radius: 6px;
  background: #eef6ff;
  color: #244b78;
}
.display-mode-current-banner span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .25px;
}
.display-mode-current-banner strong {
  font-size: 15px;
  color: #0b57a4;
}
.display-mode-save-note {
  margin: 0 0 10px;
  font-size: 12px;
  color: #64748b;
}
.display-mode-panel-title {
  margin: 8px 0 8px;
  padding-left: 2px;
  font-size: 13px;
  color: #334155;
}

/* V33.25.3 - Bước 4: Gom hồ sơ & nhận diện Thửa */
.iw-import-model-card{border:1px solid #dfe5ec;border-radius:8px;padding:14px;background:#fff;}
.iw-import-model-card h4{margin:0 0 10px 0;font-size:15px;color:#24364b;}
/* ===== V33.26 - Excel Export đầy đủ CSD × TD + tìm kiếm nguồn ===== */
.ee-source-picker{display:flex;flex-direction:column;gap:5px;min-width:0}
.ee-source-search{height:32px!important;font-size:12px!important;padding:5px 8px!important}
.ee-source{min-width:0;width:100%}
.ee-source-count{font-size:11px;color:#6b7280;line-height:1.2}
.ee-source-selected{font-size:11px;color:#2563eb;line-height:1.25;white-space:normal;word-break:break-word}
.excel-map-row{align-items:start}
.excel-map-row>div:first-child{padding-top:7px}
#excel-report-copy-modal .iw-copy-check-grid{margin-top:10px}
@media(max-width:900px){.ee-source-picker{width:100%}}
#excel-system-search-summary{line-height:1.45;white-space:normal}
/* ===== V33.26.1.3 - 5 mức kích thước Form ngay trên màn hình danh sách ===== */
.record-form-size-control{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:4px;
  min-height:28px;
  padding:2px 5px;
  border:1px solid #d7e0eb;
  border-radius:6px;
  background:#fff;
  white-space:nowrap;
}
.record-form-size-title{
  font-size:11px;
  font-weight:700;
  color:#64748b;
  margin-right:1px;
}
.record-form-size-option{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin:0;
  cursor:pointer;
  user-select:none;
}
.record-form-size-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.record-form-size-option span{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #b9c5d4;
  border-radius:4px;
  background:#fff;
  color:#526174;
  font-size:10px;
  font-weight:700;
  line-height:1;
  transition:all .12s ease;
}
.record-form-size-option:hover span{border-color:#6d9fe0;background:#f2f7ff;color:#2e65a8}
.record-form-size-option input:checked + span{
  border-color:#4f8edc;
  background:#4f8edc;
  color:#fff;
  box-shadow:0 0 0 1px rgba(79,142,220,.12);
}

/* Ghi đè dứt điểm các rule Form lớn cũ. data-form-size nằm trên #record-modal. */
#record-modal[data-form-size="xs"] .modal-content{
  width:62vw !important; max-width:62vw !important;
  height:68vh !important; max-height:68vh !important;
  min-width:min(680px, calc(100vw - 24px)) !important;
  min-height:min(480px, calc(100vh - 24px)) !important;
}
#record-modal[data-form-size="sm"] .modal-content{
  width:72vw !important; max-width:72vw !important;
  height:75vh !important; max-height:75vh !important;
  min-width:min(720px, calc(100vw - 24px)) !important;
  min-height:min(520px, calc(100vh - 24px)) !important;
}
#record-modal[data-form-size="md"] .modal-content{
  width:82vw !important; max-width:82vw !important;
  height:82vh !important; max-height:82vh !important;
  min-width:min(760px, calc(100vw - 24px)) !important;
  min-height:min(560px, calc(100vh - 24px)) !important;
}
#record-modal[data-form-size="lg"] .modal-content{
  width:91vw !important; max-width:91vw !important;
  height:90vh !important; max-height:90vh !important;
  min-width:min(800px, calc(100vw - 24px)) !important;
  min-height:min(600px, calc(100vh - 24px)) !important;
}
#record-modal[data-form-size="xl"] .modal-content{
  width:calc(100vw - 28px) !important; max-width:calc(100vw - 28px) !important;
  height:calc(100vh - 30px) !important; max-height:calc(100vh - 30px) !important;
  min-width:min(900px, calc(100vw - 28px)) !important;
  min-height:min(650px, calc(100vh - 30px)) !important;
}

/* Modal giữ header/footer và chỉ cuộn phần nội dung khi thu nhỏ. */
#record-modal .modal-content{display:flex !important;flex-direction:column !important;overflow:hidden !important;}
#record-modal .modal-header,#record-modal .modal-footer{flex:0 0 auto;}
#record-modal .modal-body{flex:1 1 auto !important;min-height:0 !important;overflow:auto !important;}

@media(max-width:900px){
  .record-form-size-control{margin-left:0}
  #record-modal[data-form-size] .modal-content{
    width:calc(100vw - 12px) !important;max-width:calc(100vw - 12px) !important;
    height:calc(100vh - 12px) !important;max-height:calc(100vh - 12px) !important;
    min-width:0 !important;min-height:0 !important;
  }
}


/* ===== V33.27.0 - WORD REPEAT ENGINE ===== */
.word-config-head,.word-section-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.word-config-actions{display:flex;gap:6px;flex-wrap:wrap}
.word-config-section{border:1px solid #dfe6ee;border-radius:8px;padding:12px;margin:10px 0;background:#fbfcfe}
.word-config-section h4{margin:0 0 8px;color:#2c3e50}
.word-map-row,.word-repeat-map-row{display:grid;grid-template-columns:minmax(150px,220px) minmax(180px,1fr) minmax(180px,1.2fr) 34px;gap:8px;align-items:start;margin:7px 0}
.word-map-row .word-source-selected,.word-repeat-map-row .word-source-selected{font-size:11px;color:#657483;margin-top:3px;white-space:normal}
.word-repeat-block{border:1px solid #ccd8e4;border-radius:8px;background:#fff;margin:10px 0;overflow:hidden}
.word-repeat-block-head{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#eef4fa;padding:9px 10px}
.word-repeat-block-body{padding:10px}
.word-repeat-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px;margin-bottom:8px}
.word-repeat-numbering{display:flex;gap:12px;align-items:end;flex-wrap:wrap;border-top:1px dashed #dce3ea;padding-top:8px;margin-top:8px}
.word-repeat-numbering .form-group{margin:0}
.word-empty{padding:10px;border:1px dashed #cdd7e1;border-radius:6px;color:#718096;background:#fff}
.word-guide-modal-content{max-width:980px!important}
.word-guide-body{display:grid;gap:10px}
.word-guide-card{border:1px solid #dce4ec;border-radius:8px;padding:12px;background:#fff}
.word-guide-card h4{margin:0 0 8px;color:#234}
.word-guide-card pre{white-space:pre-wrap;background:#f6f8fa;border:1px solid #e1e6eb;border-radius:6px;padding:10px;line-height:1.5;overflow:auto}
.word-guide-map{display:grid;grid-template-columns:auto 30px 1fr;gap:5px 8px;align-items:center}
.word-csd-select-meta{background:#f5f8fb;border:1px solid #dce5ed;padding:9px 10px;border-radius:7px;margin-bottom:10px}
.word-csd-mode-box{display:flex;gap:20px;flex-wrap:wrap;margin:8px 0 10px}
.word-csd-mode{display:flex;align-items:center;gap:6px;cursor:pointer}
.word-csd-choice-list{max-height:360px;overflow:auto;border:1px solid #dce4ec;border-radius:7px;padding:8px;background:#fff}
.word-csd-choice-item{display:grid;grid-template-columns:24px 42px 1fr;gap:7px;align-items:start;padding:7px;border-bottom:1px solid #edf1f4}
.word-csd-choice-item:last-child{border-bottom:0}
.word-csd-choice-item .word-csd-detail{font-size:12px;color:#6b7785;margin-top:2px}
.word-csd-choice-list.disabled{opacity:.55;pointer-events:none;background:#f6f7f8}
.word-scan-summary{padding:8px 10px;background:#eef8ff;border:1px solid #cfe7f7;border-radius:6px;margin:7px 0}
@media(max-width:900px){
  .word-map-row,.word-repeat-map-row{grid-template-columns:1fr}
  .word-repeat-grid{grid-template-columns:1fr 1fr}
}

/* ================= V33.27.1 WORD CSD + TD SELECTION ================= */
.word-selection-panel{border:1px solid #dce4ec;border-radius:8px;padding:10px;margin:10px 0;background:#fff}
.word-selection-panel-title{margin-bottom:5px;color:#273746}
#word-td-choice-list{max-height:260px}
.word-repeat-source-hint{font-size:11px;color:#6b7785;margin-top:3px}
/* ================= END V33.27.1 ================= */

/* V33.27.5 - Chọn theo hồ sơ / thửa và Word hàng loạt */
.selection-scope-control {
  display:inline-flex; align-items:center; gap:5px; margin-left:8px;
  padding-left:9px; border-left:1px solid #d8e0ea; white-space:nowrap;
}
.selection-scope-label { font-size:12px; font-weight:600; color:#526174; }
.selection-scope-option { display:inline-flex; align-items:center; cursor:pointer; margin:0; }
.selection-scope-option input { position:absolute; opacity:0; pointer-events:none; }
.selection-scope-option span {
  font-size:12px; padding:3px 8px; border:1px solid #cbd5e1; border-radius:12px;
  background:#fff; color:#526174; transition:.15s;
}
.selection-scope-option.active span {
  background:#5d6d7e; color:#fff; border-color:#5d6d7e; font-weight:600;
}
.selection-scope-count {
  font-size:11px; color:#64748b; background:#eef2f7; border-radius:10px; padding:2px 7px;
}
.selection-scope-status { color:#526174; }
.selection-scope-current { font-size:12px; }
.selection-scope-current strong { color:#234a78; }
.display-mode-btn i { margin-right:4px; }
.batch-word-selection-summary {
  padding:10px 12px; margin-bottom:12px; border:1px solid #dbe4f0;
  border-radius:8px; background:#f8fafc; color:#405064;
}
.batch-word-option-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.batch-word-option-card {
  border:1px solid #dbe4f0; border-radius:8px; padding:10px 12px; background:#fff;
}
.batch-word-option-card label { display:block; margin:7px 0; cursor:pointer; }
.batch-word-option-title { font-weight:700; color:#405064; margin-bottom:5px; }
.batch-word-target-list { max-height:210px; overflow:auto; padding:7px; }
.batch-word-target-item {
  display:flex; gap:8px; align-items:flex-start; padding:6px 7px; border-bottom:1px solid #edf1f5;
}
.batch-word-target-item:last-child { border-bottom:0; }
.batch-word-target-badge {
  min-width:42px; text-align:center; font-size:10px; font-weight:700;
  border-radius:8px; padding:2px 5px; background:#e9eef5; color:#506070;
}
.batch-word-td-disabled { opacity:.55; }
@media (max-width:760px) {
  .selection-scope-control { width:100%; margin-left:0; padding-left:0; border-left:0; }
  .batch-word-option-grid { grid-template-columns:1fr; }
}


/* ===== V33.27.7 - Các thửa đã chọn trong modal Word hàng loạt ===== */
.batch-word-selected-parcels-v33277 { margin-top: 8px; }
.batch-word-selected-fields-note { font-size: 12px; color: #6b7785; margin: -1px 0 7px; }
.batch-word-selected-parcel-table-wrap {
  max-height: 255px !important;
  overflow: auto !important;
  padding: 0 !important;
  border: 1px solid #d9e1ea;
  border-radius: 6px;
  background: #fff;
}
.batch-word-selected-parcel-table-v33277 {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.batch-word-selected-parcel-table-v33277 th,
.batch-word-selected-parcel-table-v33277 td {
  padding: 7px 9px;
  border-right: 1px solid #e3e8ee;
  border-bottom: 1px solid #e3e8ee;
  white-space: nowrap;
  vertical-align: top;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.batch-word-selected-parcel-table-v33277 th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f5f8fb;
  color: #34495e;
  font-weight: 700;
  text-align: left;
}
.batch-word-selected-parcel-table-v33277 tr:last-child td { border-bottom: 0; }
.batch-word-selected-parcel-table-v33277 th:last-child,
.batch-word-selected-parcel-table-v33277 td:last-child { border-right: 0; }
.batch-word-selected-parcel-table-v33277 tbody tr:hover td { background: #f7fbff; }
.batch-word-stt-v33277 { width: 42px; min-width: 42px; text-align: center !important; }
.batch-word-empty-v33277 { color: #a0a7af; }
.batch-word-file-name-v33277 { display:block; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.batch-word-no-selected-parcel-v33277 { padding: 14px; color: #667788; background:#f8fafc; }


/* ================= V34.0 PERFORMANCE DEBUG ================= */
#v34-perf-btn{position:fixed;right:18px;bottom:18px;z-index:12020;border:1px solid #d8dee8;background:#fff;border-radius:999px;padding:8px 12px;display:none;align-items:center;gap:6px;box-shadow:0 4px 18px rgba(0,0,0,.14);font-size:12px;font-weight:700;cursor:pointer;color:#334155}
#v34-perf-btn:hover{background:#f8fafc;box-shadow:0 6px 20px rgba(0,0,0,.17)}
#v34-perf-btn.v35223-perf-dragging{cursor:grabbing!important;will-change:transform;transition:none!important;box-shadow:0 8px 24px rgba(15,23,42,.22);backface-visibility:hidden}
#v34-perf-panel{position:fixed;right:18px;bottom:58px;width:min(540px,calc(100vw - 28px));max-height:min(72vh,640px);z-index:12019;background:#fff;border:1px solid #d8dee8;border-radius:12px;box-shadow:0 14px 45px rgba(15,23,42,.22);display:none;overflow:hidden;color:#1f2937}
#v34-perf-panel.open{display:block}
.v34-perf-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #e5e7eb;background:#f8fafc}
.v34-perf-head strong{display:block;font-size:14px}.v34-perf-head small{display:block;color:#64748b;font-size:11px;margin-top:2px}.v34-perf-head button{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#64748b}
.v34-perf-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 12px;border-bottom:1px solid #eef2f7;background:#fff}
.v34-perf-meta>div{min-width:0;padding:7px 8px;border-radius:8px;background:#f8fafc}.v34-perf-meta span{display:block;font-size:10px;color:#64748b}.v34-perf-meta strong{display:block;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v34-perf-actions{display:flex;gap:8px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid #eef2f7}.v34-perf-actions button{border:1px solid #d8dee8;background:#fff;border-radius:7px;padding:5px 9px;font-size:11px;cursor:pointer}
.v34-perf-table-wrap{overflow:auto;max-height:420px}.v34-perf-table{width:100%;border-collapse:collapse;font-size:11px}.v34-perf-table th{position:sticky;top:0;background:#f8fafc;text-align:left;padding:7px 9px;border-bottom:1px solid #e5e7eb;z-index:1}.v34-perf-table td{padding:7px 9px;border-bottom:1px solid #f1f5f9;vertical-align:top}.v34-perf-table th:nth-child(2),.v34-perf-table th:nth-child(3),.v34-perf-table td:nth-child(2),.v34-perf-table td:nth-child(3){width:78px;text-align:right;white-space:nowrap}.v34-perf-table td strong{display:block;font-size:11px}.v34-perf-table td small{display:block;color:#64748b;margin-top:2px;line-height:1.3}.v34-perf-empty{text-align:center!important;color:#94a3b8;padding:18px!important}
@media(max-width:640px){#v34-perf-btn{right:10px;bottom:10px}#v34-perf-panel{right:8px;bottom:50px;width:calc(100vw - 16px)}.v34-perf-meta{grid-template-columns:repeat(2,1fr)}}
.v34-record-stale-warning{margin:10px 14px 0;padding:9px 11px;border:1px solid #f2c66d;background:#fff8e8;border-radius:8px;color:#7c5700;font-size:12px;display:flex;gap:4px;flex-direction:column}.v34-record-stale-warning span{font-size:11px;line-height:1.35;color:#805f18}
/* ================= END V34.0 ================= */


/* ================= V34.1 IDX ENGINE ================= */
.v341-index-box{margin:10px 12px;padding:10px;border:1px solid #d8dee8;border-radius:10px;background:#fff}
.v341-index-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}.v341-index-title strong{font-size:13px}.v341-index-title span{font-size:10px;color:#6b7280}
.v341-index-status{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;font-size:11px}.v341-index-status>div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed #eef1f5;padding-bottom:3px}.v341-index-status span{color:#6b7280}.v341-index-status strong{font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis}.v341-index-status .ok{color:#15803d}.v341-index-status .warn{color:#b45309}.v341-index-status .bad{color:#b91c1c}
.v341-index-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.v341-index-actions button{border:1px solid #d1d5db;background:#f8fafc;border-radius:7px;padding:5px 8px;font-size:11px;cursor:pointer}.v341-index-actions button:hover{background:#eef2f7}.v341-index-actions button:disabled{opacity:.55;cursor:wait}
/* ================= END V34.1 ================= */


/* ================= V34.3 CLIENT CACHE STATUS ================= */
.v343-cache-badge{display:none;align-items:center;margin-left:8px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;line-height:1.2;vertical-align:middle;border:1px solid #dbe3ef;background:#f8fafc;color:#475569;white-space:nowrap}
.v343-cache-badge[data-state="synced"]{background:#ecfdf3;border-color:#bbf7d0;color:#166534}
.v343-cache-badge[data-state="cached"],.v343-cache-badge[data-state="ram"],.v343-cache-badge[data-state="idx"]{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.v343-cache-badge[data-state="syncing"]{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.v343-cache-badge[data-state="warn"],.v343-cache-badge[data-state="error"]{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
/* ================= END V34.3 ================= */

/* ================= V34.6 SAVE HOT PATH MEASUREMENT =================
   Base UI: V34.3. Save Engine: V34.5.
   V34.6 giữ Copy Log đo và bổ sung Save Hot Path Context; không polling server.
================= END V34.6 ================= */

/* ================= V34.6.1 SAVE PRIORITY SCHEDULER ================= */
/* Client scheduler only; no visual rule changes. */

/* ================= V34.6.2 UPDATE HOT PATH + SCHEDULER LEASE ================= */

/* ================= V34.6.2.3 STABLE LIVE EDIT TOKEN ================= */

/* V34.6.2.3: trong vài trăm ms lấy LIVE edit token, khóa thao tác để không có race với snapshot IDX. */
#record-form.v34622-baseline-lock { pointer-events: none; opacity: .985; }
#record-form.v34622-baseline-lock::before { content: ""; }
/* ================= END V34.6.2.3 ================= */

/* ================= V34.6.2.4 LIVE-AUTHORITATIVE EDIT FORM ================= */
.v34624-live-loading,.v34624-live-error{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center}
.v34624-live-spinner{width:38px;height:38px;border:4px solid rgba(52,152,219,.18);border-top-color:currentColor;border-radius:50%;animation:v34624spin .8s linear infinite}
.v34624-live-loading-title,.v34624-live-error-title{font-size:16px;font-weight:700}
.v34624-live-loading-note,.v34624-live-error-note{max-width:560px;color:#6b7280;line-height:1.5}
@keyframes v34624spin{to{transform:rotate(360deg)}}
/* ================= END V34.6.2.4 ================= */

/* ================= V34.6.2.5 CACHE COHERENCE V2 ================= */

/* ================= V34.6.2.6 IDX FAST OPEN ================= */
/* Sửa/Chi tiết render trực tiếp từ snapshot Browser Full trong RAM. */

/* ================= V34.6.3 UPDATE SAVE FAST PATH ================= */

/* ================= V34.6.3.1 FOREGROUND RESERVATION ================= */

/* ================= V34.6.4 CONFLICT + VALIDATION FAST PATH ================= */
/* CSS structure fix: all V34.x markers/rules stay inside CSS blocks; never render as page text. */
/* ================= END V34.6.4 ================= */
/* ================= V34.7.1 SEARCH + COPY FAST PATH ================= */
/* Sao chép dùng bộ nhớ trang khi đủ dữ liệu, nếu thiếu sẽ tải snapshot từ server. */
/* ================= END V34.7.1 ================= */
/* ================= V34.7.2 DIRECT DUPLICATE FAST PATH ================= */
/* ================= V34.7.3 OBJECT TYPE TRANSITION SAFE SAVE ================= */
/* ================= V34.7.4 LEGACY OBJECT TYPE NORMALIZATION ================= */
/* ================= V34.7.5 DROPDOWN + ENUMLIST LEADING APOSTROPHE NORMALIZATION ================= */
/* ================= V34.8.1 PERF LIVE STATUS REFRESH · NO VISUAL CSS CHANGE ================= */

/* ================= V34.8.1 EXCEL EXPORT INTEGRITY ================= */
/* Không đổi layout; chỉ nâng quy tắc dữ liệu và nguồn ánh xạ Excel. */
/* ================= END V34.8.1 ================= */


/* ================= V34.8.1.1 EXCEL EXPORT BUTTON ================= */
#batch-excel-report-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
/* ================= END V34.8.1.1 ================= */

/* ================= V34.8.1.2 BATCH EXCEL SHEET ARRAY FIX ================= */

/* ================= V35.2.27 SMOOTH UX + NOTIFICATION CENTER ================= */
.notification-center-shell{position:relative;display:flex;align-items:center}
.notification-bell-btn{position:relative;width:38px;height:38px;border:1px solid #d7e0eb;border-radius:50%;background:#fff;color:#475569;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.08);transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.notification-bell-btn:hover,.notification-bell-btn[aria-expanded="true"]{background:#eef5ff;border-color:#8db5ed;color:#2563a9;box-shadow:0 4px 14px rgba(37,99,169,.16)}
.notification-bell-btn:active{transform:scale(.96)}
.notification-bell-btn.has-error{color:#c0392b;border-color:#efb4ae;background:#fff5f4}
.notification-unread-badge{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e53935;color:#fff;border:2px solid #fff;font-size:10px;font-weight:800;line-height:15px;text-align:center;box-shadow:0 2px 7px rgba(185,28,28,.28)}
.notification-unread-badge[hidden]{display:none!important}
.notification-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:950;width:min(430px,calc(100vw - 24px));max-height:min(680px,calc(100vh - 82px));display:flex;flex-direction:column;background:#fff;border:1px solid #d8e1ec;border-radius:14px;box-shadow:0 18px 50px rgba(15,23,42,.23);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.985);transform-origin:top right;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;overflow:hidden;color:#263445}
.notification-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
.notification-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 15px 11px;border-bottom:1px solid #e8edf3;background:#f8fafc}
.notification-panel-head strong{display:block;font-size:16px;color:#24364b}.notification-panel-head small{display:block;margin-top:2px;color:#738195;font-size:11px;font-weight:500}
.notification-icon-btn{width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:#64748b;font-size:22px;line-height:1;cursor:pointer}.notification-icon-btn:hover{background:#e9eef5;color:#24364b}
.notification-filters{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid #edf1f5;overflow-x:auto;background:#fff}
.notification-filter{border:1px solid #d9e2ec;border-radius:999px;padding:5px 9px;background:#fff;color:#5c6b7e;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer;transition:all .14s ease}.notification-filter:hover{border-color:#97b9e7;color:#2764a7}.notification-filter.active{background:#4f8edc;border-color:#4f8edc;color:#fff}
.notification-list{flex:1;min-height:170px;max-height:480px;overflow:auto;overscroll-behavior:contain;background:#f8fafc;padding:8px}
.notification-empty{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#8a98a9;text-align:center;padding:24px}.notification-empty i{font-size:28px;color:#c2ccd8}.notification-empty strong{font-size:13px}.notification-empty span{font-size:11px}
.notification-row{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 27px;gap:9px;padding:10px 8px 10px 9px;margin-bottom:7px;border:1px solid #e3e9f0;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.04);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.notification-row:last-child{margin-bottom:0}.notification-row:hover{border-color:#c6d5e6;box-shadow:0 3px 10px rgba(15,23,42,.07)}.notification-row.unread{background:#f5f9ff;border-color:#c9dcf4}.notification-row.unread::before{content:"";position:absolute;left:3px;top:13px;width:4px;height:4px;border-radius:50%;background:#4f8edc}
.notification-type-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px}.notification-row.type-success .notification-type-icon{background:#eaf8ef;color:#178344}.notification-row.type-error .notification-type-icon{background:#fff0ef;color:#c23a2b}.notification-row.type-warning .notification-type-icon{background:#fff7df;color:#a56c00}.notification-row.type-info .notification-type-icon{background:#edf5ff;color:#2e6eb5}
.notification-row-main{min-width:0;cursor:pointer}.notification-message{font-size:12px;font-weight:650;line-height:1.42;color:#2f3d4e;overflow-wrap:anywhere}.notification-row-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;font-size:10px;color:#7b8898}.notification-row-meta span+span::before{content:"·";margin-right:6px}.notification-count{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:999px;background:#e7eef7;color:#53667e;font-size:9px;font-weight:800;margin-left:5px}
.notification-delete{width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#8895a5;font-size:17px;cursor:pointer}.notification-delete:hover{background:#feeceb;color:#c0392b}
.notification-detail{display:none;grid-column:2/4;margin-top:1px;padding:8px 9px;border-radius:7px;background:#f5f7fa;border:1px solid #e4e9ef;color:#5b6878;font-size:10px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.notification-row.expanded .notification-detail{display:block}.notification-detail-actions{display:flex;justify-content:flex-end;margin-top:6px}.notification-copy-detail{border:0;background:transparent;color:#3478bf;font-size:10px;font-weight:700;cursor:pointer;padding:2px 0}
.notification-panel-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;padding:9px 11px;border-top:1px solid #e6ebf1;background:#fff}.notification-panel-actions .btn{font-size:10px;padding:5px 8px}

/* Toast vẫn phản hồi tức thời, còn toàn bộ lịch sử nằm trong chuông. */
.toast-container{top:72px;right:18px;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.toast{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) 22px;align-items:start;gap:8px;min-width:260px;max-width:min(390px,calc(100vw - 28px));padding:10px 9px 10px 11px;margin-bottom:7px;border:1px solid #dfe6ee;border-left-width:4px;border-radius:9px;box-shadow:0 9px 26px rgba(15,23,42,.16);pointer-events:auto;will-change:transform,opacity;opacity:0;transform:translate3d(34px,0,0);transition:transform .2s ease,opacity .2s ease}
.toast.show{opacity:1;transform:translate3d(0,0,0)}.toast-icon{padding-top:1px;text-align:center}.toast-message{font-size:12px;line-height:1.42;overflow-wrap:anywhere}.toast-close{width:22px;height:22px;border:0;background:transparent;border-radius:5px;color:#7c8998;cursor:pointer;font-size:17px;line-height:19px}.toast-close:hover{background:#eef2f6;color:#344256}
.toast-success{border-left-color:#2aa65a}.toast-success .toast-icon{color:#208b4a}.toast-error{border-left-color:#d4473a}.toast-error .toast-icon{color:#c53d31}.toast-warning{border-left-color:#e0a116}.toast-warning .toast-icon{color:#b67a00}.toast-info{border-left-color:#3c82c8}.toast-info .toast-icon{color:#3275b8}

/* Bộ điều khiển modal dùng transform/RAF; header/footer cố định, body tự cuộn. */
.modal.v35227-modal-managed{--v35227-modal-x:0px;--v35227-modal-y:0px}
.modal.v35227-modal-managed .modal-content{position:relative;display:flex;flex-direction:column;overflow:hidden;resize:none!important;transform:translate3d(var(--v35227-modal-x),var(--v35227-modal-y),0);animation:v35227ModalAppear .16s ease both;will-change:transform;backface-visibility:hidden}
@keyframes v35227ModalAppear{from{opacity:.25}to{opacity:1}}
.modal.v35227-modal-managed .modal-header{flex:0 0 auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.modal.v35227-modal-managed.v35227-dragging .modal-header{cursor:grabbing}.modal.v35227-modal-managed.v35227-dragging .modal-content,.modal.v35227-modal-managed.v35227-resizing .modal-content{transition:none!important;animation:none!important;box-shadow:0 18px 50px rgba(15,23,42,.3)}
.modal.v35227-modal-managed .modal-header button,.modal.v35227-modal-managed .modal-header input,.modal.v35227-modal-managed .modal-header select,.modal.v35227-modal-managed .modal-header a,.modal.v35227-modal-managed .modal-header .close-btn{cursor:pointer;touch-action:auto}
.modal.v35227-modal-managed .modal-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}.modal.v35227-modal-managed .modal-footer{position:relative;z-index:5;flex:0 0 auto;background:#fff;box-shadow:0 -3px 10px rgba(15,23,42,.045)}
.v35227-modal-actions{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:5px}.v35227-modal-action{width:28px;height:28px;border:1px solid rgba(255,255,255,.38);border-radius:6px;background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;transition:background .13s ease,border-color .13s ease}.v35227-modal-action:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.68)}
.v35227-resize-handle{position:absolute;right:1px;bottom:1px;z-index:12;width:22px;height:22px;cursor:nwse-resize;touch-action:none;border-radius:7px 0 7px 0;background:linear-gradient(135deg,transparent 0 42%,rgba(69,91,117,.24) 43% 51%,transparent 52% 61%,rgba(69,91,117,.38) 62% 70%,transparent 71%)}
.modal.v35227-modal-managed .modal-content.v35227-user-sized{width:var(--v35227-modal-width)!important;max-width:calc(100vw - 16px)!important;height:var(--v35227-modal-height)!important;max-height:calc(100vh - 16px)!important}
.modal.v35227-modal-managed.v35227-maximized .modal-content{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;height:calc(100vh - 12px)!important;max-height:calc(100vh - 12px)!important;min-width:0!important;min-height:0!important;transform:translate3d(0,0,0)!important}
.modal.v35227-modal-managed.v35227-maximized .v35227-resize-handle{display:none}
body.v35227-ux-interacting{user-select:none!important;-webkit-user-select:none!important;cursor:grabbing}
.tab-pane.active,.sub-tab-pane.active{animation:v35227PaneIn .15s ease both}@keyframes v35227PaneIn{from{opacity:.35;transform:translate3d(0,3px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

@media(max-width:900px){
  .notification-panel{position:fixed;right:6px;top:62px;width:calc(100vw - 12px);max-height:calc(100vh - 68px)}
  .notification-list{max-height:none}.notification-panel-actions{justify-content:stretch}.notification-panel-actions .btn{flex:1 1 auto}
  .toast-container{top:66px;right:7px}.toast{max-width:calc(100vw - 14px);min-width:min(310px,calc(100vw - 14px))}
  .modal.v35227-modal-managed .modal-content,.modal.v35227-modal-managed .modal-content.v35227-user-sized{width:calc(100vw - 8px)!important;max-width:calc(100vw - 8px)!important;height:calc(100vh - 8px)!important;max-height:calc(100vh - 8px)!important;min-width:0!important;min-height:0!important;transform:none!important;margin:0!important;border-radius:8px}
  .modal.v35227-modal-managed .modal-header{cursor:default;touch-action:auto}.v35227-resize-handle,.v35227-modal-action[data-action="center"]{display:none!important}
}
@media(prefers-reduced-motion:reduce){.notification-panel,.notification-bell-btn,.notification-filter,.notification-row,.toast,.modal.v35227-modal-managed .modal-content,.tab-pane.active,.sub-tab-pane.active{animation:none!important;transition:none!important}}
/* ================= END V35.2.27 ================= */

/* ================= V35.2.36 CẤU HÌNH ĐỐI TƯỢNG SỬ DỤNG ================= */
.object-type-config-v35236{margin-top:1rem;border:1px solid #cfe0f2!important;background:#f8fbff!important}
.object-type-config-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.object-type-config-head h4{margin:0 0 4px;color:#294a70}.object-type-config-head p{margin:0;max-width:760px}
.object-type-config-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.object-type-classifier-label{display:block;max-width:500px;margin-bottom:12px;font-size:12px;font-weight:700;color:#40536a}.object-type-classifier-label .form-control{margin-top:5px}
#object-type-config-list{display:flex;flex-direction:column;gap:10px}.object-type-card-v35236{padding:12px;border:1px solid #d8e3ef;border-radius:10px;background:#fff;box-shadow:0 2px 7px rgba(15,23,42,.045)}
.object-type-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.object-type-card-title{color:#304964;font-size:13px}.object-type-remove{width:30px;color:#ad3d32;font-size:18px;line-height:1}
.object-type-grid{display:grid;gap:9px;margin-bottom:9px}.object-type-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.object-type-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.object-type-grid label{min-width:0;color:#56687d;font-size:10px;font-weight:700}.object-type-grid .form-control{margin-top:4px;height:34px;font-size:11px}
.object-type-checks{display:flex;gap:8px 18px;flex-wrap:wrap;margin:3px 0 10px;padding:8px 10px;border-radius:7px;background:#f5f8fc}.object-type-checks label{color:#4f6277;font-size:10px;cursor:pointer}.object-type-checks input{vertical-align:middle}
.object-type-import-rule{margin:4px 0 0;padding:8px 10px 2px;border:1px solid #dce5ee;border-radius:8px;background:#fbfcfe}.object-type-import-rule legend{padding:0 6px;color:#405a76;font-size:10px;font-weight:800}.object-type-import-rule legend label{cursor:pointer}.object-type-config-foot{margin-top:9px}
@media(max-width:900px){.object-type-config-head{flex-direction:column}.object-type-config-actions{justify-content:flex-start}.object-type-grid-2,.object-type-grid-3{grid-template-columns:1fr}}
/* ================= END V35.2.36 ================= */

#recent-sheet-history-btn[hidden],
#recent-sheet-history-modal [hidden] { display: none !important; }
#recent-sheet-history-modal .modal-content {
  width: min(940px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 32px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--primary-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 6px;
  overflow: hidden;
}
#recent-sheet-history-modal .modal-header {
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #d7e5ef;
  background: #f3f9ff;
  color: #34495e;
}
#recent-sheet-history-modal .modal-header h3 { margin: 0; font-size: 17px; line-height: 1.4; }
#recent-sheet-history-modal .close-btn,
#recent-sheet-history-modal .v35227-modal-action,
#refresh-recent-sheet-history {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #4c6576;
  background: #fff;
  border: 1px solid #d4dfe7;
  border-radius: 4px;
  font-size: 13px;
}
#recent-sheet-history-modal button:focus-visible,
#recent-sheet-history-scroll:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
#recent-sheet-history-modal .recent-history-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #dce4ea;
}
#recent-sheet-history-modal .recent-history-toolbar > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; }
#recent-sheet-history-name { overflow-wrap: anywhere; }
#recent-sheet-history-count { color: #667783; font-size: 12px; }
#recent-sheet-history-modal .modal-body { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
#recent-sheet-history-status:not(:empty) { padding: 24px 14px; color: #526574; overflow-wrap: anywhere; }
#retry-recent-sheet-history { align-self: flex-start; margin: 0 14px 14px; }
#recent-sheet-history-scroll { flex: 1 1 auto; max-height: 62vh; overflow: auto; scrollbar-gutter: stable; }
#recent-sheet-history-modal .recent-history-table { width: 100%; min-width: 640px; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 13px; }
#recent-sheet-history-modal .recent-history-table th,
#recent-sheet-history-modal .recent-history-table td { padding: 9px 12px; text-align: left; vertical-align: top; border-right: 1px solid #e4e9ed; border-bottom: 1px solid #e4e9ed; white-space: nowrap; }
#recent-sheet-history-modal .recent-history-table th { position: sticky; top: 0; z-index: 1; background: #eff7fd; color: #40596b; font-weight: 600; }
#recent-sheet-history-modal .recent-history-table tr:nth-child(even) td { background: #f8fafc; }