/* ============================================================================
   GIAO DIỆN HIỆN ĐẠI v4 (18/10/2026) — "sáng, gọn, thoáng"
   Lớp phủ nạp SAU cùng, chỉ áp khi <html class="ui-modern"> → gỡ class là về giao diện cũ.
   Không đổi bố cục bảng / ô / id: chỉ nền, viền, bo góc, bóng, chữ, trạng thái nút.
   1. Nền + bỏ khung lồng khung   2. Thẻ   3. Tiêu đề thẻ   4. Ô nhập
   5. Nút   6. Header   7. Menu trái   8. Thẻ số liệu   9. Bảng   10. Panel trượt
   ========================================================================== */

html.ui-modern {
  --m-canvas: #f3f5f8;
  --m-surface: #ffffff;
  --m-surface-2: #f8fafc;
  --m-border: #e3e8ef;
  --m-border-strong: #cfd6e1;
  --m-text: #0f172a;
  --m-text-2: #475569;
  --m-text-3: #8a94a6;
  --m-brand: #1a56db;
  --m-brand-hover: #1546b8;
  --m-brand-soft: #eef4ff;
  --m-ring: 0 0 0 3px rgba(26, 86, 219, 0.16);
  --m-radius: 14px;
  --m-radius-sm: 10px;
  --m-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03);
  --m-shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12);
}

html.ui-modern[data-theme="dark"] {
  --m-canvas: #0b1120;
  --m-surface: #111827;
  --m-surface-2: #0f172a;
  --m-border: #1f2a3c;
  --m-border-strong: #2c3a52;
  --m-text: #e5e9f0;
  --m-text-2: #a3aec2;
  --m-text-3: #6b778c;
  --m-brand: #60a5fa;
  --m-brand-hover: #93c5fd;
  --m-brand-soft: rgba(96, 165, 250, 0.12);
  --m-ring: 0 0 0 3px rgba(96, 165, 250, 0.22);
  --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --m-shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.45);
}

/* ---------- 1. Nền + bỏ khung lồng khung ---------- */
html.ui-modern body,
html.ui-modern .main-content { background: var(--m-canvas) !important; }

/* Mỗi màn bọc trong 1 khung xám bo 28px chứa các thẻ trắng → thẻ trong thẻ. Làm phẳng khung ngoài. */
html.ui-modern .main-content .rounded-\[2rem\].bg-slate-50,
html.ui-modern .main-content :is(#dashboard-wrapper, #search-wrapper, #orders-wrapper, #search-section-box, #return-mgmt-wrapper,
  #client-create-order-section, #clients-management-wrapper, #pickup-management-wrapper, #shipper-coordination-wrapper,
  #kpi-salary-wrapper, #users-management-wrapper, #settings-management-wrapper).rounded-\[2rem\],
html.ui-modern #transfer-wrapper.transfer-console {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 8px !important;
}
html.ui-modern .main-content .rounded-\[2rem\].bg-slate-50 + .rounded-\[2rem\].bg-slate-50 { margin-top: 20px !important; }

/* ---------- 2. Thẻ ---------- */
html.ui-modern .main-content .bg-white.rounded-3xl,
html.ui-modern .main-content .bg-white.rounded-\[1\.5rem\],
html.ui-modern .main-content .bg-white.rounded-2xl.border,
html.ui-modern .main-content .rounded-2xl.border.shadow-sm,
html.ui-modern #search-section-box-return.return-query-panel,
html.ui-modern #transfer-wrapper .transfer-stat-card,
html.ui-modern #transfer-wrapper .transfer-send-panel,
html.ui-modern #transfer-wrapper .transfer-tracker-panel,
html.ui-modern .ops-tabbar {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow) !important;
}
/* Thẻ nhảy lên khi rê chuột: rối mắt khi làm việc cả ngày */
html.ui-modern .main-content [class*="hover:-translate-y"]:hover,
html.ui-modern .main-content [class*="hover:shadow"]:hover {
  transform: none !important;
  box-shadow: var(--m-shadow) !important;
}
/* Khối nền phụ bên trong thẻ */
html.ui-modern .main-content .bg-white .bg-slate-50,
html.ui-modern .main-content .bg-white .bg-slate-50\/50 {
  background: var(--m-surface-2) !important;
  border-color: var(--m-border) !important;
}

/* ---------- 3. Tiêu đề thẻ: chữ thường, đậm vừa ---------- */
html.ui-modern .dispatch-card-label,
html.ui-modern .dispatch-card-label.uppercase {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--m-text) !important;
  gap: 8px;
}
html.ui-modern .dispatch-card-label > i { color: var(--m-brand); font-size: 14px !important; }
html.ui-modern .dispatch-card-red-label > i { color: #e02424; }
html.ui-modern .main-content h3.font-extrabold,
html.ui-modern .main-content h3.font-black,
html.ui-modern .main-content h2.font-extrabold,
html.ui-modern .main-content h2.font-black {
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: var(--m-text) !important;
}
/* Ô biểu tượng cạnh tiêu đề thẻ: vuông bo nhỏ, nền nhạt */
html.ui-modern .main-content .rounded-2xl.w-10.h-10,
html.ui-modern .main-content .rounded-2xl.w-11.h-11,
html.ui-modern .main-content .rounded-2xl.w-12.h-12 {
  border-radius: 10px !important;
  background: var(--m-brand-soft) !important;
  color: var(--m-brand) !important;
}

/* ---------- 4. Ô nhập ---------- */
/* Chỉ ô CÓ khung (input-control / form-control / class border…); ô trần nằm trong khung ghép (icon + input) giữ nguyên */
html.ui-modern .main-content :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea):is(.input-control, .form-control, .form-select, .dispatch-card-control, .border, [class*=border-slate], [class*=border-gray]):not(.border-0):not(.border-none):not(.bg-transparent) {
  background-color: var(--m-surface) !important;
  border: 1px solid var(--m-border-strong) !important;
  border-radius: var(--m-radius-sm) !important;
  box-shadow: none !important;
  color: var(--m-text) !important;
  font-style: normal !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html.ui-modern .main-content :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea):is(.input-control, .form-control, .form-select, .dispatch-card-control, .border, [class*=border-slate], [class*=border-gray]):not(.border-0):not(.border-none):not(.bg-transparent):hover { border-color: #b7c1d0 !important; }
html.ui-modern .main-content :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea):is(.input-control, .form-control, .form-select, .dispatch-card-control, .border, [class*=border-slate], [class*=border-gray]):not(.border-0):not(.border-none):not(.bg-transparent):focus {
  border-color: var(--m-brand) !important;
  box-shadow: var(--m-ring) !important;
  outline: none !important;
}
html.ui-modern .main-content :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea):is(.input-control, .form-control, .form-select, .dispatch-card-control, .border, [class*=border-slate], [class*=border-gray]):not(.border-0):not(.border-none):not(.bg-transparent):is([readonly], :disabled) { background-color: var(--m-surface-2) !important; }
html.ui-modern .main-content input::placeholder,
html.ui-modern .main-content textarea::placeholder {
  color: var(--m-text-3) !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--ui-font-sans) !important;
}
/* Ô ghép (chip mã đã dán + input): viền ở khung ngoài, input bên trong không viền */
html.ui-modern .search-code-box {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border-strong) !important;
  box-shadow: none !important;
}
html.ui-modern .search-code-box:focus-within { border-color: var(--m-brand) !important; box-shadow: var(--m-ring) !important; }
html.ui-modern .main-content .search-code-box input,
html.ui-modern .main-content .search-code-box input:focus {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html.ui-modern .dispatch-card-control,
html.ui-modern .dispatch-card-control option { font-style: normal !important; font-size: 14px !important; }

/* ---------- 5. Nút ---------- */
html.ui-modern .btn-brand-blue,
html.ui-modern .btn-brand-red,
html.ui-modern .main-content .btn-primary {
  border-radius: var(--m-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
html.ui-modern .btn-brand-blue,
html.ui-modern .main-content .btn-primary { background-color: var(--m-brand) !important; }
html.ui-modern .btn-brand-blue:hover,
html.ui-modern .main-content .btn-primary:hover { background-color: var(--m-brand-hover) !important; }
html.ui-modern .btn-brand-blue:hover,
html.ui-modern .btn-brand-red:hover,
html.ui-modern .main-content button:hover { transform: none !important; }
html.ui-modern .main-content button:focus-visible { box-shadow: var(--m-ring) !important; outline: none !important; }

/* ---------- 6. Header ---------- */
html.ui-modern .top-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.ui-modern .top-header h2,
html.ui-modern #view-title {
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--m-text) !important;
}
html.ui-modern .btn-header-action {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-sm) !important;
  box-shadow: none !important;
  color: var(--m-text-2) !important;
}
html.ui-modern .btn-header-action:hover {
  background: var(--m-surface-2) !important;
  border-color: var(--m-border-strong) !important;
  color: var(--m-text) !important;
}
html.ui-modern .top-header select {
  border-radius: var(--m-radius-sm) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* ---------- 7. Menu trái ---------- */
html.ui-modern #mainSidebar.sidebar {
  background: var(--m-surface) !important;
  border-right: 1px solid var(--m-border) !important;
  box-shadow: none !important;
}
html.ui-modern #mainSidebar .nav-item {
  border-radius: var(--m-radius-sm) !important;
  color: var(--m-text-2) !important;
  font-weight: 500 !important;
  position: relative;
}
html.ui-modern #mainSidebar .nav-item i { color: var(--m-text-3) !important; }
html.ui-modern #mainSidebar .nav-item:hover {
  background: var(--m-surface-2) !important;
  color: var(--m-text) !important;
}
html.ui-modern #mainSidebar .nav-item.active {
  background: var(--m-brand-soft) !important;
  color: var(--m-brand) !important;
  font-weight: 600 !important;
}
html.ui-modern #mainSidebar .nav-item.active i { color: var(--m-brand) !important; }
html.ui-modern #mainSidebar .nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--m-brand);
}
html.ui-modern #menu-create-order {
  border-radius: var(--m-radius-sm) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
  background: var(--m-brand) !important;
  font-weight: 600 !important;
}
html.ui-modern #mainSidebar #menu-create-order,
html.ui-modern #mainSidebar #menu-create-order * { color: #ffffff !important; }
html.ui-modern #mainSidebar #menu-create-order:hover { background: var(--m-brand-hover) !important; }
html.ui-modern #mainSidebar #menu-create-order::before { display: none; }

/* ---------- 8. Thẻ số liệu Tổng quan ---------- */
html.ui-modern .dashboard-kpi-card {
  border-radius: var(--m-radius) !important;
  border-color: var(--m-border) !important;
  box-shadow: var(--m-shadow) !important;
}
html.ui-modern .dashboard-kpi-card::before {
  /* thanh màu trên đầu thẻ → chấm màu nhỏ cạnh nhãn */
  inset: 22px auto auto 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
html.ui-modern .dashboard-kpi-card > .flex:first-child > span {
  padding-left: 14px;
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--m-text-2) !important;
}
html.ui-modern .dashboard-kpi-card:hover { transform: none !important; box-shadow: var(--m-shadow) !important; }

/* ---------- 9. Bảng ---------- */
html.ui-modern .main-content table thead th {
  background: var(--m-surface-2) !important;
  color: var(--m-text-2) !important;
  border-bottom: 1px solid var(--m-border) !important;
}
html.ui-modern .main-content table tbody tr:hover > td { background-color: #f6f9ff; }
html.ui-modern[data-theme="dark"] .main-content table tbody tr:hover > td { background-color: rgba(96, 165, 250, 0.06); }
html.ui-modern #pagination-controls {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- 10. Panel trượt đang đóng vẫn đổ bóng vào mép phải màn hình ---------- */
html.ui-modern .detail-sidebar:not(.show):not(.open),
html.ui-modern .add-code-sidebar:not(.show):not(.open) { box-shadow: none !important; }

/* ---------- 11. Bổ sung sau khi soát ảnh ---------- */
/* ô tìm của Quản lý đơn có luật theo id riêng → phải nhắm id */
html.ui-modern #search-code-box #searchInput,
html.ui-modern #search-code-box #searchInput:focus {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Một màu nút chính cho toàn hệ thống (trước: xanh dương + tím lẫn lộn) */
html.ui-modern .main-content button.bg-indigo-600,
html.ui-modern .main-content .bg-indigo-600[role="tab"],
html.ui-modern #transfer-wrapper .transfer-mode-tabs button.bg-indigo-600,
html.ui-modern #transfer-wrapper button.bg-indigo-600 {
  background-color: var(--m-brand) !important;
  box-shadow: none !important;
}
html.ui-modern .main-content button.bg-indigo-600:hover { background-color: var(--m-brand-hover) !important; }

/* Nền tối: nút đặc dùng xanh đậm (chữ trắng đọc được), --m-brand nhạt chỉ dùng cho chữ/viền */
html.ui-modern { --m-brand-solid: #1a56db; --m-brand-solid-hover: #1546b8; }
html.ui-modern[data-theme="dark"] { --m-brand-solid: #2563eb; --m-brand-solid-hover: #1d4ed8; }
html.ui-modern .btn-brand-blue,
html.ui-modern .main-content .btn-primary,
html.ui-modern .main-content button.bg-indigo-600,
html.ui-modern #transfer-wrapper button.bg-indigo-600,
html.ui-modern #mainSidebar #menu-create-order,
html.ui-modern #mainSidebar #menu-create-order.active { background: var(--m-brand-solid) !important; }
html.ui-modern .btn-brand-blue:hover,
html.ui-modern .main-content .btn-primary:hover,
html.ui-modern .main-content button.bg-indigo-600:hover,
html.ui-modern #mainSidebar #menu-create-order:hover { background: var(--m-brand-solid-hover) !important; }
html.ui-modern[data-theme="dark"] .main-content .bg-blue-600,
html.ui-modern[data-theme="dark"] .main-content .ops-tabbar .active { background-color: var(--m-brand-solid) !important; }

/* Khung "Đang tạo đơn cho dự án" (create-order.js viết style inline nền sáng) — nền tối */
html.ui-modern[data-theme="dark"] #create-order-project-badge > div {
  background: var(--m-surface) !important;
  border-color: var(--m-border-strong) !important;
}
html.ui-modern[data-theme="dark"] #create-order-project-badge > div div[style*="font-size:19px"] { color: var(--m-text) !important; }
html.ui-modern[data-theme="dark"] #create-order-project-badge label { color: var(--m-text-2) !important; }
html.ui-modern[data-theme="dark"] #create-order-project-badge input { background: var(--m-surface-2) !important; color: var(--m-text) !important; }

/* Nhóm nút *-modern / .btn-primary (style.css: IN HOA, đậm 800, nhảy lên khi rê) */
html.ui-modern :is(.btn-primary-modern, .btn-cyan-modern, .btn-purple-modern, .btn-indigo-modern, .btn-primary, .btn-success-modern, .btn-warning-modern) {
  background: var(--m-brand-solid) !important;
  border-radius: var(--m-radius-sm) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html.ui-modern .btn-success-modern { background: #059669 !important; }
html.ui-modern .btn-warning-modern { background: #d97706 !important; }
html.ui-modern :is(.btn-primary-modern, .btn-cyan-modern, .btn-purple-modern, .btn-indigo-modern, .btn-primary, .btn-success-modern, .btn-warning-modern):hover {
  transform: none !important;
  box-shadow: none !important;
  filter: brightness(0.94) !important;
}
html.ui-modern .return-action-primary,
html.ui-modern .return-query-tab.active {
  background: var(--m-brand-solid) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html.ui-modern .return-action-primary:hover { background: var(--m-brand-solid-hover) !important; transform: none !important; }

/* ============================================================================
   v5 (18/10/2026) — user: "nâng cấp nào nó RÕ RỆT hơn, ĐẸP hơn"
   Menu trái nền xanh đậm, nền trang có ánh màu thương hiệu, ô biểu tượng màu đặc,
   thẻ số liệu số to + ô icon theo màu chỉ số, nút chính có chiều sâu, tab dạng viên.
   ========================================================================== */
html.ui-modern {
  --m-nav-bg: linear-gradient(180deg, #0c2240 0%, #0a1b33 55%, #08162b 100%);
  --m-nav-text: rgba(226, 235, 248, 0.74);
  --m-nav-icon: rgba(186, 204, 230, 0.6);
  --m-nav-hover: rgba(255, 255, 255, 0.06);
  --m-nav-active: linear-gradient(90deg, rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0.08));
  --m-grad: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --m-grad-hover: linear-gradient(135deg, #2f74ec 0%, #1a45c4 100%);
  --m-glow: 0 6px 16px -4px rgba(29, 78, 216, 0.45);
  --m-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px -8px rgba(16, 24, 40, 0.08);
}
html.ui-modern[data-theme="dark"] {
  --m-nav-bg: linear-gradient(180deg, #0a1426 0%, #070f1e 100%);
  --m-glow: 0 6px 16px -4px rgba(37, 99, 235, 0.55);
  --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
}

/* --- Nền trang: ánh xanh nhẹ ở đầu trang --- */
html.ui-modern .main-content {
  background:
    radial-gradient(1100px 420px at 8% -120px, rgba(59, 130, 246, 0.13), transparent 70%),
    radial-gradient(900px 380px at 100% -160px, rgba(14, 165, 233, 0.10), transparent 70%),
    var(--m-canvas) !important;
}
html.ui-modern[data-theme="dark"] .main-content {
  background:
    radial-gradient(1100px 420px at 8% -120px, rgba(59, 130, 246, 0.16), transparent 70%),
    radial-gradient(900px 380px at 100% -160px, rgba(14, 165, 233, 0.08), transparent 70%),
    var(--m-canvas) !important;
}
html.ui-modern .top-header h2,
html.ui-modern #view-title { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; }

/* --- Menu trái nền xanh đậm --- */
html.ui-modern #mainSidebar.sidebar {
  background: var(--m-nav-bg) !important;
  border-right: 0 !important;
}
html.ui-modern #mainSidebar .sidebar-brand-text span:first-child { color: #ffffff !important; }
html.ui-modern #mainSidebar .sidebar-brand-text span:last-child { color: #fb7185 !important; }
html.ui-modern #mainSidebar img[alt="TrungThanh Express"] { background: #fff; }
html.ui-modern #mainSidebar .nav-section-label { color: rgba(186, 204, 230, 0.45) !important; letter-spacing: 0.08em !important; }
html.ui-modern #mainSidebar .nav-item { color: var(--m-nav-text) !important; }
html.ui-modern #mainSidebar .nav-item i { color: var(--m-nav-icon) !important; }
html.ui-modern #mainSidebar .nav-item:hover { background: var(--m-nav-hover) !important; color: #ffffff !important; }
html.ui-modern #mainSidebar .nav-item:hover i { color: #ffffff !important; }
html.ui-modern #mainSidebar .nav-item.active {
  background: var(--m-nav-active) !important;
  color: #ffffff !important;
}
html.ui-modern #mainSidebar .nav-item.active i { color: #93c5fd !important; }
html.ui-modern #mainSidebar .nav-item.active::before { background: #60a5fa; box-shadow: 0 0 10px rgba(96, 165, 250, 0.8); }
html.ui-modern #mainSidebar #menu-create-order,
html.ui-modern #mainSidebar #menu-create-order.active {
  background: var(--m-grad) !important;
  box-shadow: var(--m-glow) !important;
}
html.ui-modern #mainSidebar #menu-create-order:hover { background: var(--m-grad-hover) !important; }
html.ui-modern #mainSidebar .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.08) !important; }
html.ui-modern #mainSidebar .sidebar-footer,
html.ui-modern #mainSidebar .sidebar-footer * { color: rgba(186, 204, 230, 0.6) !important; }
html.ui-modern #mainSidebar .btn-sidebar-collapse { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
html.ui-modern #mainSidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }

/* --- Ô biểu tượng cạnh tiêu đề thẻ: màu đặc --- */
html.ui-modern .main-content .rounded-2xl.w-10.h-10,
html.ui-modern .main-content .rounded-2xl.w-11.h-11,
html.ui-modern .main-content .rounded-2xl.w-12.h-12 {
  background: var(--m-grad) !important;
  color: #ffffff !important;
  box-shadow: var(--m-glow) !important;
  border-radius: 12px !important;
}
html.ui-modern .main-content .rounded-2xl.w-10.h-10 i,
html.ui-modern .main-content .rounded-2xl.w-11.h-11 i,
html.ui-modern .main-content .rounded-2xl.w-12.h-12 i { color: #ffffff !important; }

/* --- Thẻ số liệu Tổng quan: số to, ô icon theo màu chỉ số --- */
html.ui-modern .dashboard-kpi-card::before { display: none; }
html.ui-modern .dashboard-kpi-card > .flex:first-child > span { padding-left: 0; font-size: 13.5px !important; }
html.ui-modern .dashboard-kpi-card > .flex:first-child > div {
  background: var(--kpi-accent) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.35) !important;
}
html.ui-modern .dashboard-kpi-card > .flex:first-child > div i { color: #ffffff !important; }
html.ui-modern .dashboard-kpi-card [id^="st-"] { font-size: 34px !important; font-weight: 750 !important; letter-spacing: -0.03em !important; }
html.ui-modern .dashboard-kpi-card {
  background:
    radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--kpi-accent, #3b82f6) 9%, transparent), transparent 70%),
    var(--m-surface) !important;
}

/* --- Nút chính: chuyển màu + bóng màu --- */
html.ui-modern :is(.btn-brand-blue, .btn-primary-modern, .btn-cyan-modern, .btn-purple-modern, .btn-indigo-modern, .return-action-primary),
html.ui-modern .main-content :is(.btn-primary, button.bg-indigo-600) {
  background: var(--m-grad) !important;
  box-shadow: var(--m-glow) !important;
  color: #ffffff !important;
}
html.ui-modern :is(.btn-brand-blue, .btn-primary-modern, .btn-cyan-modern, .btn-purple-modern, .btn-indigo-modern, .return-action-primary):hover,
html.ui-modern .main-content :is(.btn-primary, button.bg-indigo-600):hover { background: var(--m-grad-hover) !important; filter: none !important; }
html.ui-modern .btn-success-modern { background: linear-gradient(135deg, #10b981, #047857) !important; box-shadow: 0 6px 16px -4px rgba(4, 120, 87, 0.4) !important; }

/* --- Thanh tab bước: dạng viên, tab đang chọn màu chuyển --- */
html.ui-modern .ops-tabbar { padding: 5px !important; background: var(--m-surface) !important; }
html.ui-modern .ops-tab { border-radius: 10px !important; font-weight: 600 !important; }
html.ui-modern .ops-tab.active,
html.ui-modern[data-theme="dark"] .ops-tab.active {
  background: var(--m-grad) !important;
  color: #ffffff !important;
  box-shadow: var(--m-glow) !important;
}

/* --- Bảng: đầu bảng đậm nét hơn, dòng rê chuột có vạch xanh --- */
html.ui-modern .main-content table thead th { color: #64748b !important; font-weight: 700 !important; }
html.ui-modern .main-content table tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 #3b82f6; }
/* thẻ số liệu: ô icon theo màu chỉ số (thắng luật ô icon màu chuyển chung ở trên) */
html.ui-modern .main-content .dashboard-kpi-card > .flex:first-child > div.rounded-2xl {
  background: var(--kpi-accent) !important;
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.35) !important;
}
/* Luân chuyển: tab đang chọn (transfer.js gán bg-indigo-600) + khung form (style trong system.html ép nền sáng) */
html.ui-modern #transfer-wrapper button.bg-indigo-600,
html.ui-modern[data-theme="dark"] #transfer-wrapper button.bg-indigo-600 {
  background: var(--m-grad) !important;
  color: #ffffff !important;
  box-shadow: var(--m-glow) !important;
}
html.ui-modern[data-theme="dark"] #transfer-wrapper .transfer-form-surface {
  background: var(--m-surface-2) !important;
  border-color: var(--m-border) !important;
}
html.ui-modern[data-theme="dark"] #transfer-wrapper .bg-slate-100,
html.ui-modern[data-theme="dark"] #transfer-wrapper .bg-slate-50 {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--m-border) !important;
}
html.ui-modern[data-theme="dark"] #transfer-wrapper .transfer-pack-tabs {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--m-border) !important;
}
html.ui-modern[data-theme="dark"] #transfer-wrapper .transfer-pack-tabs button:not(.bg-indigo-600) { color: var(--m-text-2) !important; background: transparent !important; }

/* ============================================================================
   TAB SÂU (18/10/2026) — mảnh dùng chung (js/ui-visual.js) + từng tab
   ========================================================================== */
.uv-avatar {
  --uv-c: #2563eb;
  align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--uv-c) 82%, #fff), var(--uv-c));
  border-radius: 10px;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--uv-c) 70%, transparent);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 34px;
}
.uv-avatar-round { border-radius: 50%; }
.uv-avatar-sm { font-size: 11px; height: 28px; width: 28px; }
.uv-entity { align-items: center; display: flex; gap: 10px; min-width: 0; }
.uv-entity-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.uv-entity-name {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--m-text, #0f172a);
  display: -webkit-box;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  overflow: hidden;
  word-break: break-word;
}
.uv-entity-person .uv-entity-name { font-weight: 600; font-size: 13px; }
.uv-muted { color: var(--m-text-3, #94a3b8); font-size: 12.5px; font-style: italic; }
.uv-tag { border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; padding: 1px 6px; }
.uv-tag-red { background: #fff1f2; color: #e11d48; box-shadow: inset 0 0 0 1px #fecdd3; }
.uv-tag-green { background: #ecfdf5; color: #059669; box-shadow: inset 0 0 0 1px #a7f3d0; }

.uv-progress { align-items: center; display: inline-flex; gap: 8px; margin-top: 6px; width: 100%; max-width: 120px; }
.uv-progress-track { background: color-mix(in srgb, var(--m-border, #e3e8ef) 80%, transparent); border-radius: 99px; flex: 1; height: 6px; overflow: hidden; }
.uv-progress-fill { border-radius: 99px; display: block; height: 100%; transition: width .4s ease; }
.uv-progress-low .uv-progress-fill { background: linear-gradient(90deg, #f59e0b, #f97316); }
.uv-progress-mid .uv-progress-fill { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.uv-progress-ok .uv-progress-fill { background: linear-gradient(90deg, #10b981, #059669); }
.uv-progress-text { color: var(--m-text-2, #475569); font-size: 12px; font-weight: 700; white-space: nowrap; }

.uv-pill {
  align-items: center;
  border-radius: 99px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 650;
  gap: 6px;
  line-height: 1;
  padding: 6px 10px;
  white-space: nowrap;
}
.uv-pill .uv-dot { border-radius: 50%; display: inline-block; height: 7px; width: 7px; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.uv-pill-blue { background: #eff6ff; color: #1d4ed8; }
.uv-pill-violet { background: #f5f3ff; color: #6d28d9; }
.uv-pill-amber { background: #fffbeb; color: #b45309; }
.uv-pill-green { background: #ecfdf5; color: #047857; }
.uv-pill-red { background: #fef2f2; color: #b91c1c; }
.uv-pill-slate { background: #f1f5f9; color: #475569; }
html[data-theme="dark"] .uv-pill-blue { background: rgba(59, 130, 246, .14); color: #93c5fd; }
html[data-theme="dark"] .uv-pill-violet { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
html[data-theme="dark"] .uv-pill-amber { background: rgba(245, 158, 11, .14); color: #fcd34d; }
html[data-theme="dark"] .uv-pill-green { background: rgba(16, 185, 129, .14); color: #6ee7b7; }
html[data-theme="dark"] .uv-pill-red { background: rgba(239, 68, 68, .14); color: #fca5a5; }
html[data-theme="dark"] .uv-pill-slate { background: rgba(148, 163, 184, .12); color: #cbd5e1; }
html[data-theme="dark"] .uv-tag-red { background: rgba(225, 29, 72, .14); box-shadow: none; color: #fda4af; }
html[data-theme="dark"] .uv-tag-green { background: rgba(5, 150, 105, .16); box-shadow: none; color: #6ee7b7; }

/* ---- Bảng Lấy hàng: cột cố định theo %, vừa khung 1280→2560 (trước khuất Trạng thái/Chức năng) ---- */
html.ui-modern #pickup-bento-table { table-layout: fixed !important; width: 100% !important; }
html.ui-modern #pickup-bento-table thead th:nth-child(1) { width: 40px; }
html.ui-modern #pickup-bento-table thead th:nth-child(2) { width: 16%; min-width: 0 !important; }
html.ui-modern #pickup-bento-table thead th:nth-child(3) { width: 23%; min-width: 0 !important; }
html.ui-modern #pickup-bento-table thead th:nth-child(4) { width: 8%; min-width: 0 !important; }
html.ui-modern #pickup-bento-table thead th:nth-child(5) { width: 14%; min-width: 0 !important; }
html.ui-modern #pickup-bento-table thead th:nth-child(6),
html.ui-modern #pickup-bento-table thead th:nth-child(7) { width: 7%; min-width: 0 !important; }
html.ui-modern #pickup-bento-table thead th:nth-child(8) { width: 8%; min-width: 0 !important; }
html.ui-modern #pickup-bento-table thead th:nth-child(9) { width: 11%; min-width: 0 !important; }
html.ui-modern #pickup-bento-table thead th:nth-child(10) { width: 9%; min-width: 0 !important; }
html.ui-modern #pickup-bento-table thead th { white-space: normal !important; }
html.ui-modern #pickup-bento-table tbody td:nth-child(2) { min-width: 0 !important; cursor: pointer; }
html.ui-modern #pickup-bento-table tbody tr.uv-row > td { vertical-align: middle; border-bottom: 1px solid var(--m-border) !important; }
html.ui-modern #pickup-bento-table tbody tr.uv-row:hover > td { background: color-mix(in srgb, var(--m-brand) 5%, transparent) !important; }
html.ui-modern #pickup-bento-table .uv-num { font-size: 15px; font-weight: 800; }
html.ui-modern #pickup-bento-table .uv-num .uv-progress { margin-top: 6px; max-width: 64px; }
.uv-sender { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.uv-sender-name { color: var(--m-text, #0f172a); font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uv-phone { align-self: flex-start; background: #ecfdf5; border-radius: 6px; color: #047857; font-size: 12px; font-weight: 600; padding: 1px 7px; }
.uv-phone i { font-size: 10px; margin-right: 5px; }
html[data-theme="dark"] .uv-phone { background: rgba(16, 185, 129, .14); color: #6ee7b7; }
.uv-address { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--m-text-2, #64748b); display: -webkit-box; font-size: 12px; line-height: 1.4; overflow: hidden; }
.uv-address i { color: #f43f5e; font-size: 10.5px; margin-right: 5px; }

/* ---- Thẻ số liệu nhỏ (Điều phối, …): ô icon màu đặc, nhãn chữ thường, số to ---- */
html.ui-modern .main-content .bg-white.rounded-2xl.flex.items-center.gap-3 { padding: 16px 18px !important; gap: 14px !important; }
html.ui-modern .main-content .rounded-xl.w-10.h-10:is(.bg-blue-50, .bg-emerald-50, .bg-amber-50, .bg-indigo-50, .bg-rose-50, .bg-violet-50) {
  border-radius: 12px !important;
  color: #fff !important;
  height: 44px !important;
  width: 44px !important;
}
html.ui-modern .main-content .rounded-xl.w-10.h-10.bg-blue-50 { background: linear-gradient(135deg, #60a5fa, #2563eb) !important; box-shadow: 0 6px 14px -6px #2563eb !important; }
html.ui-modern .main-content .rounded-xl.w-10.h-10.bg-emerald-50 { background: linear-gradient(135deg, #34d399, #059669) !important; box-shadow: 0 6px 14px -6px #059669 !important; }
html.ui-modern .main-content .rounded-xl.w-10.h-10.bg-amber-50 { background: linear-gradient(135deg, #fbbf24, #d97706) !important; box-shadow: 0 6px 14px -6px #d97706 !important; }
html.ui-modern .main-content .rounded-xl.w-10.h-10.bg-indigo-50 { background: linear-gradient(135deg, #818cf8, #4f46e5) !important; box-shadow: 0 6px 14px -6px #4f46e5 !important; }
html.ui-modern .main-content .rounded-xl.w-10.h-10:is(.bg-blue-50, .bg-emerald-50, .bg-amber-50, .bg-indigo-50) i { color: #fff !important; font-size: 17px !important; }
html.ui-modern .main-content .bg-white.rounded-2xl.flex.items-center.gap-3 .uppercase {
  color: var(--m-text-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html.ui-modern .main-content .bg-white.rounded-2xl.flex.items-center.gap-3 [id^="coord-stat-"] {
  font-size: 26px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
  line-height: 1.15 !important;
}

/* ---- Luân chuyển: 4 chip số có ô icon màu bên trái ---- */
html.ui-modern #transfer-wrapper .transfer-stat-card {
  grid-template-areas: "icon label label" "icon value sub" !important;
  grid-template-columns: 40px auto minmax(0, 1fr) !important;
  align-items: center !important;
  row-gap: 2px;
  column-gap: 12px !important;
}
html.ui-modern #transfer-wrapper .transfer-stat-card > :first-child { display: contents !important; }
html.ui-modern #transfer-wrapper .transfer-stat-card > :first-child > span { grid-area: label; align-self: end; }
html.ui-modern #transfer-wrapper .transfer-stat-card > :first-child > div {
  display: flex !important;
  grid-area: icon;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: var(--trf-c, #2563eb) !important;
  box-shadow: 0 6px 14px -6px var(--trf-c, #2563eb) !important;
}
html.ui-modern #transfer-wrapper .transfer-stat-card > :first-child > div i { color: #fff !important; }
html.ui-modern #transfer-wrapper .transfer-stat-card > :nth-child(2) { align-self: start; }
html.ui-modern #transfer-wrapper .transfer-stat-card:nth-child(1) { --trf-c: #2563eb; }
html.ui-modern #transfer-wrapper .transfer-stat-card:nth-child(2) { --trf-c: #d97706; }
html.ui-modern #transfer-wrapper .transfer-stat-card:nth-child(3) { --trf-c: #059669; }
html.ui-modern #transfer-wrapper .transfer-stat-card:nth-child(4) { --trf-c: #7c3aed; }
html.ui-modern #transfer-wrapper .transfer-stat-card .trf-kpi-label { color: var(--m-text-2) !important; font-weight: 600 !important; font-size: 13px !important; }

/* ---- Bảng Điều phối shipper ---- */
html.ui-modern #shipper-coordination-table-body tr.uv-row > td { padding: 12px 12px !important; vertical-align: middle; border-bottom: 1px solid var(--m-border); }
html.ui-modern #shipper-coordination-table-body tr.uv-row:hover > td { background: color-mix(in srgb, var(--m-brand) 5%, transparent); }
html.ui-modern #shipper-coordination-table-body .uv-coord-name { cursor: pointer; }
html.ui-modern #shipper-coordination-table-body .uv-coord-name:hover .uv-entity-name { color: var(--m-brand) !important; text-decoration: underline; }
html.ui-modern #shipper-coordination-table-body .uv-num { font-size: 15px; font-weight: 800; color: var(--m-text); }
html.ui-modern #shipper-coordination-table-body .uv-num .uv-progress { max-width: 70px; margin: 6px auto 0; display: flex; }
.uv-num-green { color: #059669 !important; }
.uv-num-red { color: #dc2626 !important; }
.uv-num-muted { color: var(--m-text-3, #94a3b8) !important; }
.uv-money { font-size: 14px; font-weight: 700; color: var(--m-text-2, #475569); white-space: nowrap; font-variant-numeric: tabular-nums; }
.uv-money-green { color: #059669; }
.uv-branch { background: var(--m-brand-soft, #eef4ff); border-radius: 8px; color: var(--m-brand, #1a56db); font-size: 12px; font-weight: 700; padding: 4px 10px; }

/* ---- Khách hàng: thẻ dự án ---- */
html.ui-modern .main-content .client-bento-card .client-avatar.rounded-2xl.w-12.h-12 {
  background: var(--client-g) !important;
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.45) !important;
  border-radius: 14px !important;
  letter-spacing: 0.02em;
}
html.ui-modern .client-bento-card { padding: 20px !important; }
html.ui-modern .client-bento-card h4 { font-size: 16px !important; font-weight: 700 !important; }
html.ui-modern .client-bento-card .uppercase { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; }
html.ui-modern .client-bento-card .grid.grid-cols-3 { background: var(--m-surface-2) !important; border: 1px solid var(--m-border) !important; border-radius: 12px !important; }
html.ui-modern .client-bento-card .grid.grid-cols-3 .text-lg { font-size: 22px !important; font-weight: 750 !important; }
html.ui-modern .client-bento-card .h-2.rounded-full { height: 8px !important; }
html.ui-modern .client-bento-card .h-2.rounded-full > .h-2 { height: 8px !important; }

/* ---- Tài khoản NV: con mắt hiện mật khẩu rơi xuống dưới ô (.password-field-wrap chưa từng có CSS) ---- */
.password-field-wrap { position: relative; }
.password-field-wrap .input-password-field { padding-right: 42px !important; }
.password-field-wrap .toggle-password {
  color: var(--m-text-3, #94a3b8);
  cursor: pointer;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.password-field-wrap .toggle-password:hover { color: var(--m-brand, #1a56db); }

/* ---- Tìm kiếm đơn hệ thống: ô tìm to, rõ ---- */
html.ui-modern #globalSearchInput { font-size: 15px !important; min-height: 48px !important; padding-left: 16px !important; }
html.ui-modern #globalSearchInput + button,
html.ui-modern #search-wrapper button.btn-purple-modern,
html.ui-modern #search-wrapper .btn-indigo-modern { min-height: 48px !important; font-size: 14px !important; padding: 0 22px !important; }

/* ---- Tài khoản NV: dòng tài khoản ---- */
html.ui-modern #users-management-wrapper .user-row {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html.ui-modern #users-management-wrapper .user-row:hover { border-color: color-mix(in srgb, var(--m-brand) 40%, var(--m-border)) !important; box-shadow: var(--m-shadow) !important; }