/* =========================================================================
   EXCEL PRO - WINFORMS 2010 CLASSIC THEME (EC20 DESKTOP STYLE)
   Giao diện chuẩn hóa theo phong cách WinForms 2010 Classic / Windows Desktop
   Tham khảo chính xác: D:\Visual studio code\RUST\EC20\src\styles.css
   ========================================================================= */

:root {
  /* BẢNG MÀU CHUẨN WINFORMS 2010 */
  --bg: #F0F0F0;             /* Nền desktop ngoài xám nhẹ */
  --bg-card: #FFFFFF;        /* Nền thẻ / khung nội dung TRẮNG TINH */
  --bg-card2: #F9F9F9;       /* Nền phụ trắng nhạt */
  --bg-hover: #EBF4FF;       /* Hover xanh nhạt đặc trưng Windows */
  --bg-sidebar: #D4D0C8;     /* Nền thanh sidebar xám chuẩn WinForms */
  --bg-secondary: #ECE9D8;   /* Nền thanh công cụ / status kem xám */

  --accent: #0054E3;         /* Xanh dương WinForms chuẩn */
  --accent-dark: #003399;    /* Xanh dương đậm WinForms Titlebar */
  --accent-light: #BDDFFF;   /* Xanh chọn dòng DataGrid */
  --accent-lighter: #EBF4FF; /* Xanh hover dòng */

  --accent2: #222222;
  --accent2-light: #ECE9D8;
  --accent3: #444444;
  --accent3-light: #D4D0C8;
  --accent4: #B45309;
  --accent4-light: #FFFFD4;  /* Vàng highlight */
  --accent5: #C00000;
  --accent5-light: #FDE8E8;

  --danger: #C00000;
  --danger-light: #FDE8E8;
  --warning: #B45309;
  --warning-light: #FFFFD4;
  --success: #107C41;        /* Xanh lá Excel */
  --success-light: #E8F5E9;
  --info: #0058EE;
  --info-light: #E3F2FD;

  --text: #000000;
  --text-sub: #111111;
  --text-muted: #333333;
  --text-dim: #555555;
  --text-light: #777777;

  --border: #7F9DB9;         /* Viền xanh xám WinForms kinh điển */
  --border2: #919B9C;        /* Viền xám đậm */
  --cell-border: #E0E0E0;    /* Viền ô tính DataGrid */
  --th-bg: linear-gradient(to bottom, #F9F9F9 0%, #E8E5D8 100%);
  --th-text: #111111;
  --row-hover: #EBF4FF;
  --row-sel: #BDDFFF;

  --shadow-xs: none;
  --shadow-sm: inset 1px 1px 0px #FFFFFF;
  --shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-md: 2px 3px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 3px 4px 16px rgba(0, 0, 0, 0.45);
  --btn-shadow: inset 1px 1px 0px #FFFFFF;

  --radius-xs: 0px;
  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 3px;
  --radius-xl: 3px;
  --btn-radius: 2px;

  --font-display: 'Tahoma', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Tahoma', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  --sidebar-w: 210px;
  --header-h: 36px;

  --grad-primary: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%);
  --grad-blue: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%);
  --grad-hero: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%);
  --accent-gradient: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%);

  --btn-primary-bg: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%);
  --btn-primary-text: #003399;
  --btn-secondary-bg: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%);
  --btn-secondary-border: #7F9DB9;
  --btn-secondary-text: #000000;
}

/* VÔ HIỆU HÓA HOÀN TOÀN MỌI THEME KHÁC - CỐ ĐỊNH 1 GIAO DIỆN SÁNG WINFORMS */
html[data-theme="dark"],
html[data-theme="light"],
html {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  color-scheme: light !important;
}

/* RESET CƠ BẢN */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Tahoma', 'Segoe UI', Arial, sans-serif !important;
  font-size: 11px !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #003399;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* =========================================================================
   NÚT BẤM (BUTTONS) CHUẨN WINFORMS 2010
   Lưu ý: Chỉ áp dụng cho class .btn, .win-btn, không áp dụng lên thẻ button thuần
   ========================================================================= */
.btn, .win-btn, input[type="button"].btn, input[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 2px 10px;
  border-radius: 2px !important;
  font-family: 'Tahoma', 'Segoe UI', sans-serif !important;
  font-size: 11px !important;
  font-weight: normal;
  border: 1px solid #7F9DB9 !important;
  background: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%) !important;
  color: #000000 !important;
  cursor: pointer;
  box-shadow: inset 1px 1px 0px #FFFFFF !important;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  outline: none;
  transition: none !important;
}

.btn:hover, .win-btn:hover {
  background: linear-gradient(to bottom, #F5F5F5 0%, #DCD8C8 100%) !important;
  border-color: #7F9DB9 !important;
  color: #000000 !important;
}

.btn:active, .win-btn:active {
  background: #D8D4C8 !important;
  box-shadow: inset 1px 1px 2px #888888 !important;
}

.btn-primary, .btn-blue, .win-btn-primary {
  font-weight: bold !important;
  color: #003399 !important;
}

.btn-success, .win-btn-excel {
  font-weight: bold !important;
  color: #107C41 !important;
}

.btn-danger {
  font-weight: bold !important;
  color: #C00000 !important;
}

.btn-secondary {
  color: #000000 !important;
}

.btn-ghost {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: #333333 !important;
}
.btn-ghost:hover {
  background: #EBF4FF !important;
  border-color: #7F9DB9 !important;
  color: #000000 !important;
}

.btn-sm {
  height: 21px !important;
  padding: 1px 6px !important;
  font-size: 10.5px !important;
}

.btn-lg {
  height: 28px !important;
  padding: 3px 14px !important;
  font-size: 12px !important;
}

.btn-icon {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
}

.btn:disabled, .btn[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  background: #ECE9D8 !important;
  color: #888888 !important;
  border-color: #A0A0A0 !important;
  box-shadow: none !important;
}

/* Ẩn nút đổi theme vì hệ thống cố định 1 theme duy nhất */
.ep-theme-btn, #themeToggle, .theme-toggle {
  display: none !important;
}

/* =========================================================================
   TRƯỜNG NHẬP LIỆU (INPUTS, SELECTS, TEXTAREA) WINFORMS 2010
   ========================================================================= */
.form-input, .fi, .search-inp, .pg-sel, .win-input,
input[type="text"], input[type="password"], input[type="number"], input[type="email"], select {
  border: 1px solid #7F9DB9 !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
  font-family: 'Tahoma', sans-serif !important;
  outline: none !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-radius: 0px !important;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.08) !important;
  height: 24px;
}

textarea, .win-textarea {
  border: 1px solid #7F9DB9 !important;
  padding: 4px 6px !important;
  font-size: 11px !important;
  font-family: 'Tahoma', 'Consolas', monospace !important;
  outline: none !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-radius: 0px !important;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.08) !important;
  height: auto;
  min-height: 50px;
}

.form-input:focus, .fi:focus, .search-inp:focus, .win-input:focus,
input:focus, select:focus, textarea:focus {
  border-color: #3399FF !important;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.08), 0 0 3px rgba(51, 153, 255, 0.4) !important;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}

.form-label {
  font-size: 11px !important;
  font-weight: bold !important;
  color: #222222 !important;
}

/* =========================================================================
   TAB STRIP & TAB BUTTONS (WINFORMS TABCONTROL)
   ========================================================================= */
.tab-strip, .staff-tabs, .cfg-tabs, .stabs {
  display: flex !important;
  background-color: #D4D0C8 !important;
  border-bottom: 1px solid #919B9C !important;
  padding-left: 5px !important;
  padding-top: 3px !important;
  gap: 2px !important;
}

.tab-button, .staff-tab, .cfg-tab, .stab {
  background: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%) !important;
  border: 1px solid #919B9C !important;
  border-bottom: none !important;
  padding: 4px 14px !important;
  font-family: 'Tahoma', sans-serif !important;
  font-size: 11px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  color: #444444 !important;
  box-shadow: none !important;
}

.tab-button.active, .staff-tab.active, .cfg-tab.active, .stab.on {
  background: #FFFFFF !important;
  border-bottom: 1px solid #FFFFFF !important;
  margin-bottom: -1px !important;
  color: #000000 !important;
}

.tab-content {
  background: #FFFFFF !important;
}

/* =========================================================================
   TOOLBAR & TOPBAR WINFORMS
   ========================================================================= */
.toolbar, .topbar {
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #FAFAFA 0%, #ECE9D8 100%) !important;
  border-bottom: 1px solid #D0D0D0 !important;
  padding: 3px 8px !important;
  gap: 8px !important;
  color: #000000 !important;
}

/* =========================================================================
   BẢNG TÍNH & DATAGRIDVIEW WINFORMS 2010 (EC20 STYLE)
   ========================================================================= */
.grid-container, .table-container, .grid-wrap, .main-table-wrap {
  background: #FFFFFF !important;
}

.win-grid, .ag-table, .ag, table.excel-table {
  width: 100%;
  border-collapse: collapse !important;
  background-color: #FFFFFF !important;
  font-family: 'Tahoma', 'Segoe UI', Arial, sans-serif !important;
  font-size: 11px !important;
}

.win-grid th, .ag-table th, .ag th, table.excel-table th {
  background: linear-gradient(to bottom, #F9F9F9 0%, #E8E5D8 100%) !important;
  border-right: 1px solid #C0C0C0 !important;
  border-bottom: 1px solid #999999 !important;
  padding: 4px 6px !important;
  font-size: 11px !important;
  font-weight: bold !important;
  color: #111111 !important;
  text-align: left;
  user-select: none;
  vertical-align: middle;
}

.win-grid td, .ag-table td, .ag td, table.excel-table td {
  border-right: 1px solid #E0E0E0 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
  color: #000000 !important;
  background-color: #FFFFFF;
  vertical-align: middle;
}

/* Zebra row */
.win-grid tr:nth-child(even) td,
.ag-table tbody tr:nth-child(even) td:not([data-has-bg]),
.ag tbody tr:nth-child(even) td:not([data-has-bg]),
table.excel-table tbody tr:nth-child(even) td {
  background-color: #F9F9F9 !important;
}

/* Row Hover */
.win-grid tbody tr:hover td,
.ag-table tbody tr:hover td,
.ag tbody tr:hover td:not([data-has-bg]),
table.excel-table tbody tr:hover td {
  background-color: #EBF4FF !important;
}

/* Row Selected */
.win-grid tbody tr.row-selected td,
.ag-table tbody tr.ag-row-selected td,
.ag tbody tr.sel td,
table.excel-table tbody tr.selected td {
  background-color: #BDDFFF !important;
  font-weight: bold;
}

/* Row Priority / Warning */
tr.row-priority td {
  background-color: #FFFFD4 !important;
  font-weight: bold;
}

/* Header số thứ tự cột / hàng */
.ag th:first-child, .ag td:first-child,
.ag-table th:first-child, .ag-table td:first-child {
  background: #ECE9D8 !important;
  color: #333333 !important;
  border-right: 1px solid #999999 !important;
  font-weight: bold !important;
  text-align: center !important;
}

/* Cell Editor */
.c-inp, .ag-cell-input {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid #3399FF !important;
  outline: none !important;
  font-family: 'Tahoma', sans-serif !important;
  font-size: 11px !important;
}

/* =========================================================================
   STATUS STRIP & PAGINATION BAR
   ========================================================================= */
.status-strip, .ag-footer, .pagination-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background-color: #ECE9D8 !important;
  border-top: 1px solid #919B9C !important;
  height: 24px !important;
  line-height: 22px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  color: #222222 !important;
  box-shadow: none !important;
}

.status-pane {
  border-right: 1px solid #919B9C;
  padding: 0 8px;
  font-size: 11px;
}
.status-pane:last-child {
  border-right: none;
}

.page-btn {
  padding: 2px 6px;
  font-size: 10.5px;
  font-family: 'Tahoma', sans-serif;
  border: 1px solid #7F9DB9;
  background: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%);
  cursor: pointer;
}
.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================================
   POPUP, MODAL & DIALOG (CHUẨN WINFORMS DIALOG 2010)
   ========================================================================= */
.modal-overlay, .ag-modal-overlay, .ov, .license-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  z-index: 1500;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Chỉ hiển thị khi có class active / on / open / show */
.modal-overlay.active, .modal-overlay.on, .modal-overlay.open, .modal-overlay.show,
.ag-modal-overlay.active, .ag-modal-overlay.on, .ag-modal-overlay.open, .ag-modal-overlay.show,
.ov.active, .ov.on, .ov.open, .ov.show,
.license-overlay.active, .license-overlay.on {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Tôn trọng style inline display: none */
.modal-overlay[style*="display: none"],
.modal-overlay[style*="display:none"],
.ov[style*="display: none"],
.ov[style*="display:none"],
.ag-modal-overlay[style*="display: none"],
.ag-modal-overlay[style*="display:none"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal, .win-dialog, .ag-modal {
  width: 520px;
  max-width: 95vw;
  background-color: #ECE9D8 !important;
  border: 2px solid #475569 !important;
  border-radius: 4px 4px 0 0 !important;
  box-shadow: 3px 4px 16px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Tahoma', sans-serif !important;
  transform: none !important;
  transition: none !important;
}

.modal-header, .win-dialog-titlebar, .ag-modal-header, .mh {
  background: linear-gradient(to right, #475569 0%, #334155 100%) !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
  font-size: 12px !important;
  padding: 5px 8px 5px 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #1E293B !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.modal-header h3, .modal-title, .ag-modal-header h3, .mh h3 {
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  font-family: 'Tahoma', sans-serif !important;
  margin: 0;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.modal-close, .win-dialog-close, .popup-close, #closeProfileModal,
.modal-header button, .mh button, .ag-modal-header button {
  background: linear-gradient(to bottom, #64748B 0%, #475569 100%) !important;
  border: 1px solid #94A3B8 !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
  font-size: 11px !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  line-height: 17px !important;
  text-align: center !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-close:hover, .win-dialog-close:hover,
.modal-header button:hover, .mh button:hover, .ag-modal-header button:hover {
  background: linear-gradient(to bottom, #EF4444 0%, #DC2626 100%) !important;
  border-color: #F87171 !important;
}

.modal-close:active, .win-dialog-close:active {
  background: #B91C1C !important;
}

.modal-body, .win-dialog-body, .ag-modal-body, .mb {
  background-color: #ECE9D8 !important;
  color: #000000 !important;
  padding: 10px 12px !important;
  font-size: 11px !important;
  overflow-y: auto;
}

.modal-footer, .win-dialog-footer, .ag-modal-footer, .mf {
  background-color: #ECE9D8 !important;
  border-top: 1px solid #D0D0D0 !important;
  padding: 6px 10px !important;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* GroupBox kiểu Windows Classic */
.win-groupbox, fieldset {
  border: 1px solid #919B9C !important;
  padding: 8px 10px 10px 10px !important;
  border-radius: 3px !important;
  margin-bottom: 8px !important;
  background: #ECE9D8 !important;
}

.win-groupbox legend, fieldset legend {
  font-weight: bold !important;
  color: #003399 !important;
  padding: 0 5px !important;
  font-size: 11px !important;
}

/* =========================================================================
   TOAST THÔNG BÁO (WINFORMS 2010 NOTIFICATION)
   ========================================================================= */
.toast-container {
  position: fixed !important;
  top: 36px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  pointer-events: none !important;
  max-width: 90vw !important;
}

.toast, .toast-notification {
  background: #475569 !important;
  color: #FFFFFF !important;
  padding: 6px 14px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-family: 'Tahoma', sans-serif !important;
  font-weight: bold !important;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 420px !important;
  width: auto !important;
  pointer-events: all !important;
  animation: none !important;
}

.toast svg, .toast-container svg, .toast-icon svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* =========================================================================
   CONTEXT MENU WINFORMS
   ========================================================================= */
.ctx, .col-ctx, .ctx-menu, .col-menu, .win-context-menu, .ag-context-menu {
  position: absolute !important;
  background: #FFFFFF !important;
  border: 1px solid #7F9DB9 !important;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
  z-index: 2000 !important;
  width: 190px !important;
  padding: 2px 0 !important;
  border-radius: 0px !important;
  font-family: 'Tahoma', sans-serif !important;
}

.ctx-item, .menu-item, .col-ctx-item, .ag-ctx-item {
  padding: 4px 12px !important;
  font-size: 11px !important;
  color: #000000 !important;
  cursor: pointer !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ctx-item:hover, .menu-item:hover, .col-ctx-item:hover, .ag-ctx-item:hover {
  background-color: #3399FF !important;
  color: #FFFFFF !important;
}

.ctx-divider, .menu-divider, .ag-ctx-divider {
  height: 1px !important;
  background-color: #D0D0D0 !important;
  margin: 2px 0 !important;
}

/* =========================================================================
   BADGES & LABELS
   ========================================================================= */
.badge, .otp-badge {
  font-weight: bold !important;
  font-size: 11px !important;
  color: #000000 !important;
  background: #EFEFEF !important;
  padding: 1px 5px !important;
  border-radius: 2px !important;
  border: 1px solid #D0D0D0 !important;
  display: inline-block;
}

.badge-success { background: #E8F5E9 !important; color: #107C41 !important; border-color: #81C784 !important; }
.badge-warning { background: #FFFFD4 !important; color: #B45309 !important; border-color: #D6C372 !important; }
.badge-danger { background: #FDE8E8 !important; color: #C00000 !important; border-color: #FCA5A5 !important; }
.badge-info { background: #E3F2FD !important; color: #0054E3 !important; border-color: #90CAF9 !important; }

/* SPINNER TIỆN ÍCH */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #D0D0D0;
  border-top-color: #0054E3;
  border-radius: 50%;
  animation: epSpin 0.7s linear infinite;
  display: inline-block;
}
@keyframes epSpin {
  to { transform: rotate(360deg); }
}

/* =========================================================================
   KHỐNG CHẾ KÍCH THƯỚC SVG & KHỐI TÌM KIẾM
   ========================================================================= */
.top-search, .db-search, .search-box, .ag-search-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.top-search svg, .db-search svg, .search-box svg, .ag-search-wrap svg {
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #666666 !important;
  pointer-events: none !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.top-search input, .db-search input, .search-box input, .ag-search-wrap input {
  padding-left: 22px !important;
  height: 23px !important;
}

/* =========================================================================
   MODAL TẢI FILE (DROP ZONE)
   ========================================================================= */
.drop-zone {
  border: 1.5px dashed #7F9DB9 !important;
  background-color: #FFFFFF !important;
  border-radius: 3px !important;
  padding: 24px 16px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.drop-zone:hover, .drop-zone.dragover {
  background-color: #EBF4FF !important;
  border-color: #3399FF !important;
}

.drop-icon {
  margin: 0 auto 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.drop-icon svg {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  color: #475569 !important;
  display: block !important;
}

.drop-title {
  font-size: 12px !important;
  font-weight: bold !important;
  color: #000000 !important;
  margin-bottom: 3px !important;
  font-family: 'Tahoma', sans-serif !important;
}

.drop-sub {
  font-size: 11px !important;
  color: #003399 !important;
  margin-bottom: 6px !important;
  font-family: 'Tahoma', sans-serif !important;
  text-decoration: underline !important;
}

.drop-types {
  font-size: 10px !important;
  color: #666666 !important;
  font-family: 'Tahoma', sans-serif !important;
}

.upload-progress {
  margin-top: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid #7F9DB9 !important;
  padding: 8px 10px !important;
  border-radius: 2px !important;
}

.progress-bar-wrap {
  height: 14px !important;
  background: #ECE9D8 !important;
  border: 1px solid #7F9DB9 !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin: 4px 0 !important;
}

.progress-bar {
  height: 100% !important;
  background: #0054E3 !important;
  transition: width 0.2s ease !important;
}

/* Chống bung to SVG trong file card & meta */
.file-meta-item svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  flex-shrink: 0 !important;
}
.file-card svg, .file-card-list svg {
  max-width: 24px !important;
  max-height: 24px !important;
}

/* Chuẩn hóa font-weight menu sidebar toàn hệ thống (không in đậm mục chưa active) */
.sidebar .nav-item, .sb .nav-item, button.nav-item, a.nav-item, .nav-sub-item, .Z-ni {
  font-weight: normal !important;
  font-family: 'Tahoma', sans-serif !important;
}
.sidebar .nav-item *, .sb .nav-item *, button.nav-item *, a.nav-item *, .nav-sub-item *, .Z-ni * {
  font-weight: inherit !important;
  font-family: inherit !important;
}
.sidebar .nav-item.active, .sb .nav-item.active, button.nav-item.active, a.nav-item.active, .Z-ni.active {
  font-weight: bold !important;
}
.sidebar .nav-item.active *, .sb .nav-item.active *, button.nav-item.active *, a.nav-item.active *, .Z-ni.active * {
  font-weight: bold !important;
}