/* =====================================================================
   NOIBAI CMS — CRM THEME (2026 redesign)
   ---------------------------------------------------------------------
   A complete, cohesive skin layered on top of the legacy template.
   Loaded AFTER style.css so it wins via the cascade. No markup/JS logic
   is required — it restyles the existing Bootstrap-4 structure.
   Top horizontal menu is preserved (forms keep full width).
   Tune the whole look from the design tokens in :root below.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
--------------------------------------------------------------------- */
:root {
   /* Brand / accents */
   --c-primary: #4f46e5;
   --c-primary-600: #4338ca;
   --c-primary-700: #3730a3;
   --c-primary-soft: rgba(79, 70, 229, .10);
   --c-primary-soft-2: rgba(79, 70, 229, .06);
   --c-cyan: #06b6d4;

   /* Topbar gradient */
   --c-bar-1: #1e1b4b;
   --c-bar-2: #312e81;

   /* State colors */
   --c-success: #10b981;
   --c-warning: #f59e0b;
   --c-danger: #ef4444;
   --c-info: #0ea5e9;

   /* Neutrals (slate) */
   --c-bg: #f1f5f9;
   --c-surface: #ffffff;
   --c-border: #e6eaf0;
   --c-border-soft: #eef1f6;
   --c-text: #0f172a;
   --c-text-2: #334155;
   --c-muted: #64748b;
   --c-faint: #94a3b8;

   /* Radius */
   --r-sm: 8px;
   --r-md: 12px;
   --r-lg: 16px;
   --r-pill: 999px;

   /* Shadows */
   --sh-xs: 0 1px 2px rgba(15, 23, 42, .05);
   --sh-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .05);
   --sh-md: 0 4px 14px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .04);
   --sh-lg: 0 18px 48px rgba(15, 23, 42, .18);
   --sh-primary: 0 8px 22px rgba(79, 70, 229, .22);

   --ff: 'Inter', 'Roboto', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   2. BASE
--------------------------------------------------------------------- */
body {
   background-color: var(--c-bg) !important;
   color: var(--c-text-2);
   font-family: var(--ff) !important;
   font-size: 14px;
   letter-spacing: -.005em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
   color: var(--c-text);
   font-family: var(--ff);
   font-weight: 700;
   letter-spacing: -.01em;
}

a {
   color: var(--c-primary);
   transition: color .15s ease;
}

   a:hover, a:focus {
      color: var(--c-primary-600);
      text-decoration: none;
   }

::selection {
   background: var(--c-primary-soft);
}

/* Slim modern scrollbars */
* {
   scrollbar-width: thin;
   scrollbar-color: #cbd5e1 transparent;
}

   *::-webkit-scrollbar {
      width: 9px;
      height: 9px;
   }

   *::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: var(--r-pill);
      border: 2px solid transparent;
      background-clip: content-box;
   }

      *::-webkit-scrollbar-thumb:hover {
         background: #94a3b8;
         background-clip: content-box;
      }

/* ---------------------------------------------------------------------
   3. HEADER — single sticky gradient bar (brand + menu + actions)
   Sticky reserves its own space, so content is never hidden underneath
   regardless of bar height (fixes the legacy padding-top mismatch).
--------------------------------------------------------------------- */
#topnav {
   position: sticky;
   top: 0;
   background: transparent;
   box-shadow: none;
   min-height: 0;
}

/* Legacy reserved 91px for a fixed bar — not needed with sticky */
.wrapper {
   padding-top: 0 !important;
}

#topnav .topbar-main {
   background: linear-gradient(100deg, var(--c-bar-1) 0%, var(--c-bar-2) 58%, var(--c-primary) 125%);
   box-shadow: 0 2px 16px rgba(30, 27, 75, .28);
   min-height: 60px;
}

   /* One flex row: brand | menu | actions */
   #topnav .topbar-main > .container-fluid {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0 6px;
      padding-left: 18px;
      padding-right: 18px;
   }

/* Text brand (replaces the image logo) */
.brand-text {
   display: inline-flex;
   align-items: baseline;
   gap: 3px;
   flex: 0 0 auto;
   margin-right: 14px;
   padding: 14px 0;
   font-size: 21px;
   font-weight: 800;
   letter-spacing: -.03em;
   color: #fff;
   white-space: nowrap;
}

   .brand-text:hover {
      color: #fff;
   }

   .brand-text .brand-accent {
      color: #c7d2fe;
      font-weight: 700;
   }

/* Compact "2.0" version badge next to the brand (header + login) */
.brand-ver {
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0;
   margin-left: 4px;
   padding: 1px 5px;
   border-radius: 6px;
   background: rgba(255, 255, 255, .2);
   color: #fff;
   vertical-align: super;
   line-height: 1;
   top: 0;
}

/* Menu takes the remaining space, actions get pushed to the far right */
#topnav .nav-main {
   flex: 1 1 auto;
   min-width: 0;
}

#topnav .menu-extras,
#topnav .topbar-custom {
   flex: 0 0 auto;
   margin-left: auto;
}

   #topnav .topbar-right-menu {
      display: flex;
      align-items: center;
      gap: 4px;
   }

/* Header action items (account, docs, language) -> white on gradient */
#topnav .topbar-custom .nav-link,
#topnav .topbar-custom a.nav-link,
.topbar-custom .nav-user,
.topbar-right-menu > li > a {
   color: rgba(255, 255, 255, .92) !important;
}

/* Hamburger lines -> white */
#topnav .navbar-toggle span {
   background-color: rgba(255, 255, 255, .9);
}

/* ---------------------------------------------------------------------
   4. MENU — inline on the gradient bar (white links, white dropdowns)
--------------------------------------------------------------------- */
#topnav .nav-main .navigation-menu {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   margin: 0;
   padding: 0;
}

#topnav .navigation-menu > li {
   border-right: none;
}

   #topnav .navigation-menu > li > a {
      color: rgba(255, 255, 255, .85);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -.01em;
      padding: 20px 14px;
      border-bottom: 2px solid transparent;
      transition: color .15s ease, background-color .15s ease, border-color .15s ease;
   }

      #topnav .navigation-menu > li > a i {
         font-size: 16px;
         margin-right: 6px;
         opacity: .85;
      }

      #topnav .navigation-menu > li > a:hover,
      #topnav .navigation-menu > li > a:focus {
         color: #fff;
         background-color: rgba(255, 255, 255, .12);
      }

   #topnav .navigation-menu > li.active > a,
   #topnav .navigation-menu > li:hover > a {
      color: #fff;
      border-bottom-color: #fff;
      background-color: rgba(255, 255, 255, .14);
   }

      #topnav .navigation-menu > li.active > a i,
      #topnav .navigation-menu > li:hover > a i {
         opacity: 1;
      }

   /* dropdown caret */
   #topnav .navigation-menu > li > a .arrow-down {
      border-top-color: rgba(255, 255, 255, .7);
   }

/* Submenus / dropdowns -> white cards floating below */
#topnav .navigation-menu > li .submenu {
   background: #fff;
   border: 1px solid var(--c-border);
   border-radius: var(--r-md);
   box-shadow: var(--sh-md);
   padding: 6px;
   margin-top: 0;
}

   #topnav .navigation-menu > li .submenu li a {
      color: var(--c-text-2);
      border-radius: var(--r-sm);
      padding: 9px 12px;
      font-size: 13.5px;
      transition: all .12s ease;
   }

      #topnav .navigation-menu > li .submenu li a:hover {
         background-color: var(--c-primary-soft-2);
         color: var(--c-primary);
      }

   #topnav .navigation-menu > li .submenu li.active > a {
      background-color: var(--c-primary-soft);
      color: var(--c-primary);
      font-weight: 600;
   }

/* Submenu items keep dark text even though parent bar is dark */
.has-submenu.active > a,
.has-submenu.active > a i {
   color: #fff !important;
}

.has-submenu.active .submenu li.active > a {
   color: var(--c-primary) !important;
}

/* Mobile: stack the menu below the brand row */
@media (max-width: 991.98px) {
   #topnav .nav-main {
      flex-basis: 100%;
      order: 3;
   }

      #topnav .nav-main .navigation-menu {
         flex-direction: column;
         align-items: stretch;
      }

   #topnav .navigation-menu > li > a {
      padding: 12px 14px;
      color: var(--c-text-2);
   }

   #topnav .navigation-menu > li .submenu {
      position: static;
      box-shadow: none;
      border: none;
      padding-left: 12px;
   }
}

/* Generic Bootstrap dropdown menus (account, docs, etc.) */
.dropdown-menu {
   border: 1px solid var(--c-border);
   border-radius: var(--r-md);
   box-shadow: var(--sh-md);
   padding: 6px;
   font-size: 13.5px;
}

.dropdown-item {
   border-radius: var(--r-sm);
   padding: 9px 12px;
   color: var(--c-text-2);
}

   .dropdown-item:hover, .dropdown-item:focus {
      background-color: var(--c-primary-soft-2);
      color: var(--c-primary);
   }

/* Dropdown gọn (vd menu "Tài liệu" trên header) — item sát nhau, padding nhỏ */
.dropdown-compact {
   padding: 4px;
   min-width: 11rem;
}
   .dropdown-compact .dropdown-item {
      padding: 5px 10px;
      font-size: 13px;
      line-height: 1.35;
      white-space: nowrap;
   }

/* ---------------------------------------------------------------------
   5. PAGE HEADER
--------------------------------------------------------------------- */
.wrapper {
   background: transparent;
}

.page-title-box {
   padding: 20px 0 14px;
}

   .page-title-box h4,
   .page-title-box .page-title,
   .page-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--c-text);
      margin: 0;
      position: relative;
      padding-left: 12px;
   }

      .page-title-box h4::before,
      .page-title-box .page-title::before,
      .page-title::before {
         content: "";
         position: absolute;
         left: 0;
         top: 50%;
         transform: translateY(-50%);
         width: 4px;
         height: 18px;
         border-radius: var(--r-pill);
         background: linear-gradient(180deg, var(--c-primary), var(--c-cyan));
      }

/* ---------------------------------------------------------------------
   6. CARDS / PANELS
--------------------------------------------------------------------- */
.card,
.card-box {
   background-color: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-lg);
   box-shadow: var(--sh-sm);
   transition: box-shadow .25s ease, transform .25s ease;
}

   .card:hover,
   .card-box:hover {
      box-shadow: var(--sh-md);
   }

.card-box {
   padding: 22px;
   margin-bottom: 24px;
}

.card-header {
   background-color: transparent;
   border-bottom: 1px solid var(--c-border-soft);
   font-weight: 600;
   color: var(--c-text);
   border-top-left-radius: var(--r-lg);
   border-top-right-radius: var(--r-lg);
   padding: 14px 18px;
}

.card-footer {
   background-color: transparent;
   border-top: 1px solid var(--c-border-soft);
   border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.card-title,
.header-title {
   color: var(--c-text);
   font-weight: 700;
   letter-spacing: -.01em;
}

.header-title {
   text-transform: none;
   font-size: 15px;
}

/* ---------------------------------------------------------------------
   7. BUTTONS
--------------------------------------------------------------------- */
.btn {
   border-radius: var(--r-sm);
   font-weight: 600;
   font-size: 13.5px;
   letter-spacing: -.01em;
   padding: .5rem 1.05rem;
   transition: all .15s ease;
}

   .btn:focus, .btn.focus {
      box-shadow: 0 0 0 .18rem var(--c-primary-soft) !important;
   }

.btn-group-sm > .btn, .btn-sm {
   padding: .32rem .7rem;
   font-size: 12.5px;
   border-radius: 7px;
}

.btn-lg, .btn-group-lg > .btn {
   border-radius: var(--r-md);
}

/* Primary / brand */
.btn-custom,
.btn-primary {
   background: var(--c-primary) !important;
   border-color: var(--c-primary) !important;
   color: #fff !important;
   box-shadow: 0 2px 6px rgba(79, 70, 229, .25);
}

   .btn-custom:hover, .btn-custom:focus, .btn-custom:active,
   .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
      background: var(--c-primary-600) !important;
      border-color: var(--c-primary-600) !important;
      box-shadow: var(--sh-primary);
      transform: translateY(-1px);
   }

.btn-outline-custom {
   color: var(--c-primary);
   border-color: var(--c-primary);
   background: transparent;
}

   .btn-outline-custom:hover {
      background: var(--c-primary);
      border-color: var(--c-primary);
      color: #fff;
   }

/* Light / secondary action buttons (used heavily in tables) */
.btn-light {
   background-color: #f1f5f9;
   border-color: #e2e8f0;
   color: var(--c-text-2);
}

   .btn-light:hover, .btn-light:focus {
      background-color: #e2e8f0;
      border-color: #cbd5e1;
      color: var(--c-text);
   }

.btn-success {
   background-color: var(--c-success) !important;
   border-color: var(--c-success) !important;
}

.btn-danger {
   background-color: var(--c-danger) !important;
   border-color: var(--c-danger) !important;
}

.btn-warning {
   background-color: var(--c-warning) !important;
   border-color: var(--c-warning) !important;
   color: #fff !important;
}

.btn-info {
   background-color: var(--c-info) !important;
   border-color: var(--c-info) !important;
}

.btn-rounded {
   border-radius: var(--r-pill);
}

/* ---------------------------------------------------------------------
   8. FORMS
--------------------------------------------------------------------- */
.form-control {
   border: 1px solid var(--c-border);
   border-radius: var(--r-sm);
   color: var(--c-text);
   font-size: 13.5px;
   padding: .5rem .75rem;
   transition: border-color .15s ease, box-shadow .15s ease;
}

   .form-control:focus {
      border-color: var(--c-primary);
      box-shadow: 0 0 0 .18rem var(--c-primary-soft);
   }

   .form-control::placeholder {
      color: var(--c-faint);
   }

label {
   font-weight: 600;
   color: var(--c-text-2);
   font-size: 13px;
   margin-bottom: .35rem;
}

/* Select2 single — match form-control look */
.select2-container--default .select2-selection--single {
   border: 1px solid var(--c-border) !important;
   border-radius: var(--r-sm) !important;
   height: calc(1.5em + 1rem + 2px) !important;
}

   .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: calc(1.5em + 1rem) !important;
      color: var(--c-text);
   }

   .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: calc(1.5em + 1rem) !important;
   }

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
   border-color: var(--c-primary) !important;
   box-shadow: 0 0 0 .18rem var(--c-primary-soft);
}

.select2-dropdown {
   border: 1px solid var(--c-border);
   border-radius: var(--r-md);
   box-shadow: var(--sh-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: var(--c-primary);
}

/* Input groups */
.input-group .form-control {
   border-top-left-radius: var(--r-sm);
   border-bottom-left-radius: var(--r-sm);
}

.input-group-append .btn,
.input-group .btn {
   border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ---------------------------------------------------------------------
   9. TABLES
--------------------------------------------------------------------- */
.table {
   color: var(--c-text-2);
}

   .table thead th {
      background-color: #f8fafc;
      color: var(--c-muted);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
      border-top: none;
      border-bottom: 1px solid var(--c-border);
      padding: 11px 12px;
      vertical-align: middle;
   }

   .table td {
      padding: 11px 12px;
      vertical-align: middle;
      border-top: 1px solid var(--c-border-soft);
   }

   .table tbody tr {
      transition: background-color .12s ease;
   }

      .table tbody tr:hover {
         background-color: var(--c-primary-soft-2);
      }

.table-bordered,
.table-bordered td,
.table-bordered th {
   border-color: var(--c-border-soft);
}

.table-striped tbody tr:nth-of-type(odd) {
   background-color: #fbfcfe;
}

   .table-striped tbody tr:nth-of-type(odd):hover {
      background-color: var(--c-primary-soft-2);
   }

/* Card-wrapped tables: let the table reach card edges cleanly */
.card-body.p-0 .table,
.card .card-body > .table-responsive > .table {
   margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   10. BADGES / PILLS
--------------------------------------------------------------------- */
.badge {
   font-weight: 600;
   font-size: 11px;
   letter-spacing: .01em;
   padding: .4em .6em;
   border-radius: 6px;
}

.badge-custom,
.badge-primary {
   background-color: var(--c-primary) !important;
   color: #fff !important;
}

.badge-success {
   background-color: rgba(16, 185, 129, .14) !important;
   color: #047857 !important;
}

.badge-danger {
   background-color: rgba(239, 68, 68, .14) !important;
   color: #b91c1c !important;
}

.badge-warning {
   background-color: rgba(245, 158, 11, .16) !important;
   color: #b45309 !important;
}

.badge-info {
   background-color: rgba(14, 165, 233, .14) !important;
   color: #0369a1 !important;
}

.badge-secondary {
   background-color: #eef1f6 !important;
   color: var(--c-muted) !important;
}

/* ---------------------------------------------------------------------
   11. TABS
--------------------------------------------------------------------- */
.nav-tabs {
   border-bottom: 1px solid var(--c-border);
}

   .nav-tabs .nav-link {
      color: var(--c-muted);
      font-weight: 600;
      border: none;
      border-bottom: 2px solid transparent;
      padding: 11px 16px;
      transition: all .15s ease;
   }

      .nav-tabs .nav-link:hover {
         color: var(--c-primary);
         border-bottom-color: var(--c-primary-soft);
      }

      .nav-tabs .nav-link.active {
         color: var(--c-primary);
         background: transparent;
         border-bottom-color: var(--c-primary);
      }

/* ---------------------------------------------------------------------
   12. MODALS
--------------------------------------------------------------------- */
.modal-content {
   border: none;
   border-radius: var(--r-lg);
   box-shadow: var(--sh-lg);
   /* NOTE: overflow must stay visible — the legacy close button is a
      circular element pinned to the top-right corner and would be
      clipped by overflow:hidden. */
   overflow: visible;
}

/* Light header — safe for both static and JS-injected modal content.
   Rounded top corners so the header bg follows the modal radius. */
.modal-header {
   background: #f8fafc;
   border-bottom: 1px solid var(--c-border);
   align-items: center;
   padding: 15px 20px;
   border-top-left-radius: var(--r-lg);
   border-top-right-radius: var(--r-lg);
}

   .modal-header .modal-title {
      color: var(--c-text);
      font-weight: 700;
      /* chừa chỗ cho nút X tròn ở góc phải, tránh tiêu đề dài chạy xuống dưới nút */
      padding-right: 42px;
   }

/* Themed, always-visible circular close button.
   Theme cũ ghim nút × ở góc (top:0/right:0); theme mới bo góc 16px + có modal
   dùng overflow:hidden → góc nút × bị cắt/che. Dời nút × vào trong, khỏi vùng bo,
   và nâng z-index để nút × luôn hiện đầy đủ ở mọi popup. */
.modal .modal-dialog .close {
   position: absolute;
   top: 12px;
   right: 14px;
   width: 34px;
   height: 34px;
   margin: 0;
   padding: 0;
   line-height: 28px;
   text-align: center;
   background-color: var(--c-primary);
   border: 2px solid #fff;
   border-radius: 50%;
   color: #fff;
   opacity: 1;
   box-shadow: 0 3px 10px rgba(79, 70, 229, .4);
   z-index: 20;
   transition: background-color .15s ease, transform .15s ease;
}

   .modal .modal-dialog .close:hover {
      background-color: var(--c-primary-600);
      transform: scale(1.06);
      color: #fff;
   }

.modal-body {
   color: var(--c-text-2);
}

/* ---------------------------------------------------------------------
   13. PAGINATION
--------------------------------------------------------------------- */
.pagination {
   gap: 4px;
}

.page-link {
   color: var(--c-text-2);
   border: 1px solid var(--c-border);
   border-radius: var(--r-sm) !important;
   margin: 0 1px;
   font-size: 13px;
   font-weight: 600;
   transition: all .12s ease;
}

   .page-link:hover {
      background-color: var(--c-primary-soft-2);
      border-color: var(--c-primary-soft);
      color: var(--c-primary);
   }

.page-item.active .page-link {
   background-color: var(--c-primary);
   border-color: var(--c-primary);
   color: #fff;
   box-shadow: 0 2px 6px rgba(79, 70, 229, .25);
}

.page-item.disabled .page-link {
   color: var(--c-faint);
   background: transparent;
   border-color: var(--c-border-soft);
}

/* ---------------------------------------------------------------------
   14. ALERTS / MISC
--------------------------------------------------------------------- */
.alert {
   border: 1px solid transparent;
   border-radius: var(--r-md);
   font-size: 13.5px;
}

.alert-custom,
.alert-info {
   background-color: rgba(14, 165, 233, .08);
   border-color: rgba(14, 165, 233, .2);
   color: #075985;
}

hr {
   border-top-color: var(--c-border-soft);
}

.text-custom {
   color: var(--c-primary) !important;
}

.text-primary {
   color: var(--c-primary) !important;
}

.bg-custom {
   background-color: var(--c-primary) !important;
   background-image: linear-gradient(135deg, var(--c-bar-2), var(--c-primary)) !important;
   color: #fff !important;
}

.bg-light {
   background-color: #f8fafc !important;
}

/* ---------------------------------------------------------------------
   15. DASHBOARD — KPI CARDS
--------------------------------------------------------------------- */
.kpi-card {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px 20px;
}

   .kpi-card .kpi-icon {
      flex: 0 0 auto;
      width: 54px;
      height: 54px;
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
   }

   .kpi-card .kpi-body {
      min-width: 0;
      flex: 1 1 auto;
   }

   .kpi-card .kpi-label {
      margin: 0 0 3px;
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--c-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   .kpi-card .kpi-value {
      margin: 0;
      font-size: 27px;
      font-weight: 800;
      line-height: 1.05;
      color: var(--c-text);
      letter-spacing: -.02em;
   }

   .kpi-card .kpi-foot {
      margin-top: 6px;
      font-size: 12px;
      color: var(--c-muted);
      display: flex;
      align-items: center;
   }

      .kpi-card .kpi-foot .badge {
         margin-right: 4px;
      }

   .kpi-card .kpi-link {
      margin-left: auto;
      color: var(--c-primary);
      opacity: .5;
      font-size: 16px;
      transition: opacity .15s ease, transform .15s ease;
   }

      .kpi-card .kpi-link:hover {
         opacity: 1;
         transform: translateX(2px);
      }

.kpi-card:hover {
   transform: translateY(-3px);
}

/* Icon-chip accent palette */
.kpi-accent-1 .kpi-icon { background: rgba(79, 70, 229, .12); color: #4f46e5; }
.kpi-accent-2 .kpi-icon { background: rgba(16, 185, 129, .12); color: #10b981; }
.kpi-accent-3 .kpi-icon { background: rgba(245, 158, 11, .15); color: #d97706; }
.kpi-accent-4 .kpi-icon { background: rgba(6, 182, 212, .13); color: #0891b2; }
.kpi-accent-5 .kpi-icon { background: rgba(239, 68, 68, .12); color: #ef4444; }
.kpi-accent-6 .kpi-icon { background: rgba(100, 116, 139, .14); color: #475569; }

/* ---------------------------------------------------------------------
   16. LIST PAGES — filter bar, density
--------------------------------------------------------------------- */
.filter-bar {
   margin-bottom: 16px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--c-border-soft);
}

   .filter-bar .select2,
   .filter-bar select,
   .filter-bar .input-group {
      margin-bottom: 8px;
   }

/* Reusable modern filter toolbar (date range + action buttons) */
.filter-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 14px;
   margin-bottom: 18px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--c-border-soft);
}

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

      .filter-toolbar .filter-field > label {
         font-size: 12px;
         font-weight: 600;
         color: var(--c-muted);
         margin-bottom: 6px;
      }

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

      .filter-toolbar .filter-actions .btn i {
         margin-right: 4px;
      }

/* Date-range field with a leading calendar icon */
.filter-daterange {
   position: relative;
}

   .filter-daterange > i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--c-muted);
      font-size: 16px;
      pointer-events: none;
   }

   .filter-daterange .form-control {
      height: 42px;
      padding-left: 36px;
      min-width: 250px;
      font-weight: 600;
      color: var(--c-text);
   }

/* Plain text inputs inside the toolbar get a usable width + matching height */
.filter-toolbar .filter-field > .form-control {
   min-width: 210px;
   height: 42px;
}

/* Global: every #reportrange date input (incl. pages NOT converted to the
   toolbar) gets a calendar icon + modern sizing — no markup change needed. */
#reportrange {
   min-width: 190px;
   padding-left: 34px;
   font-weight: 600;
   color: var(--c-text);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: 11px center;
   background-size: 15px;
}

/* Toolbar pages already show a calendar <i>, so suppress the bg icon there */
.filter-daterange #reportrange {
   background-image: none;
   padding-left: 36px;
}

/* Daterangepicker popup polish */
.daterangepicker {
   border: 1px solid var(--c-border);
   border-radius: var(--r-md);
   box-shadow: var(--sh-md);
   font-family: var(--ff);
}

   .daterangepicker td.active,
   .daterangepicker td.active:hover {
      background-color: var(--c-primary);
   }

   .daterangepicker .ranges li.active {
      background-color: var(--c-primary);
   }

   .daterangepicker .ranges li:hover {
      background-color: var(--c-primary-soft);
      color: var(--c-primary);
   }

/* User list */
.user-list .contact-img {
   width: 42px;
   height: 42px;
   object-fit: cover;
   border-radius: var(--r-pill);
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px var(--c-border);
}

.user-list .user-cell {
   display: flex;
   align-items: center;
   gap: 10px;
}

   .user-list .user-cell .contact-img {
      flex: 0 0 auto;
      float: none;
   }

   .user-list .user-cell-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
   }

   .user-list .user-name {
      font-weight: 600;
      line-height: 1.2;
      color: var(--c-text);
   }

   .user-list .user-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 3px;
      font-size: 12px;
      color: var(--c-muted);
   }

/* ---------------------------------------------------------------------
   17. LOGIN PAGE (v2 — full split-screen redesign)
--------------------------------------------------------------------- */
body.login-v2 {
   background: #ffffff !important;
   min-height: 100vh;
   margin: 0;
   padding: 0;
   font-family: var(--ff);
}

.login-shell {
   display: flex;
   min-height: 100vh;
}

/* Left brand panel */
.login-brand {
   flex: 1 1 52%;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 56px;
   background: linear-gradient(150deg, var(--c-bar-1) 0%, var(--c-bar-2) 52%, var(--c-primary) 120%);
   color: #fff;
}

   .login-brand::before,
   .login-brand::after {
      content: "";
      position: absolute;
      border-radius: 50%;
   }

   .login-brand::before {
      width: 460px;
      height: 460px;
      top: -160px;
      right: -120px;
      background: rgba(255, 255, 255, .06);
   }

   .login-brand::after {
      width: 320px;
      height: 320px;
      bottom: -120px;
      left: -80px;
      background: rgba(6, 182, 212, .12);
   }

.login-brand-inner {
   position: relative;
   z-index: 2;
   max-width: 460px;
}

   .login-brand-inner .login-logo {
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -.03em;
      margin-bottom: 30px;
      color: #fff;
   }

      .login-brand-inner .login-logo .brand-accent {
         color: #c7d2fe;
      }

   .login-brand-inner h1 {
      color: #fff;
      font-size: 30px;
      line-height: 1.25;
      font-weight: 800;
      letter-spacing: -.02em;
      margin-bottom: 16px;
   }

   .login-brand-inner p {
      color: rgba(255, 255, 255, .82);
      font-size: 15px;
      line-height: 1.6;
      margin: 0;
   }

.login-points {
   list-style: none;
   padding: 0;
   margin: 30px 0 0;
}

   .login-points li {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 13px;
      color: rgba(255, 255, 255, .92);
      font-size: 14.5px;
   }

      .login-points li i {
         width: 26px;
         height: 26px;
         border-radius: 50%;
         background: rgba(255, 255, 255, .15);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 14px;
      }

/* Right form side */
.login-form-wrap {
   flex: 1 1 48%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 40px 24px;
}

.login-card {
   width: 100%;
   max-width: 380px;
}

   .login-card h2 {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -.02em;
      margin: 0 0 6px;
   }

   .login-card .login-sub {
      color: var(--c-muted);
      font-size: 14px;
      margin-bottom: 28px;
   }

   .login-card .form-group {
      margin-bottom: 18px;
   }

   .login-card label {
      font-weight: 600;
      font-size: 13px;
      color: var(--c-text-2);
      margin-bottom: 6px;
   }

   .login-card .form-control {
      height: 48px;
      border-radius: var(--r-md);
      background: #f8fafc;
      border-color: var(--c-border);
      font-size: 14px;
   }

      .login-card .form-control:focus {
         background: #fff;
         border-color: var(--c-primary);
         box-shadow: 0 0 0 .2rem var(--c-primary-soft);
      }

.login-btn {
   width: 100%;
   height: 50px;
   margin-top: 6px;
   border: none;
   border-radius: var(--r-md);
   background: linear-gradient(100deg, var(--c-bar-2), var(--c-primary));
   color: #fff;
   font-weight: 700;
   font-size: 15px;
   letter-spacing: .01em;
   box-shadow: var(--sh-primary);
   transition: transform .15s ease, box-shadow .15s ease;
}

   .login-btn:hover, .login-btn:focus {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(79, 70, 229, .34);
      color: #fff;
   }

.login-copyright {
   margin-top: 30px;
   color: var(--c-faint);
   font-size: 12px;
   text-align: center;
}

@media (max-width: 860px) {
   .login-brand {
      display: none;
   }

   .login-form-wrap {
      flex-basis: 100%;
   }
}

/* Checkbox accent */
.checkbox-custom input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked + label::before {
   background-color: var(--c-primary);
   border-color: var(--c-primary);
}

/* ---------------------------------------------------------------------
   18. TOP PROGRESS BAR (nanobar)
   Idle: KHÔNG chiếm chiều cao (position:fixed → ngoài luồng), trong suốt.
   Loading: thanh đỏ trượt ngang, ĐÈ lên đỉnh header (z-index cao).
--------------------------------------------------------------------- */
.nanobar {
   position: fixed !important;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   z-index: 9999;          /* trên cả header sticky */
   background: transparent; /* bình thường: vô hình, không có dải nền */
   pointer-events: none;    /* không chặn click ở mép trên header */
}

   .nanobar .bar {
      height: 4px;
      background: #ff3b3b !important;
      box-shadow: 0 0 10px rgba(255, 59, 59, .7);
   }

/* ---------------------------------------------------------------------
   19. DASHBOARD — executive header, KPI accents, chart cards
--------------------------------------------------------------------- */
.dash-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   margin: 4px 0 22px;
}

   .dash-header .dash-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.02em;
      margin: 0;
      color: var(--c-text);
   }

   .dash-header .dash-subtitle {
      margin: 4px 0 0;
      color: var(--c-muted);
      font-size: 13.5px;
   }

.dash-header-meta {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
}

   .dash-header-meta .dash-label {
      color: var(--c-faint);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-right: 2px;
   }

   .dash-header-meta .dash-airport {
      font-size: 12px;
      padding: .5em .75em;
   }

/* KPI cards: subtle colored top accent that matches the icon chip */
.kpi-card {
   position: relative;
   overflow: hidden;
}

   .kpi-card::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      opacity: .85;
   }

.kpi-accent-1::after { background: #4f46e5; }
.kpi-accent-2::after { background: #10b981; }
.kpi-accent-3::after { background: #d97706; }
.kpi-accent-4::after { background: #0891b2; }
.kpi-accent-5::after { background: #ef4444; }
.kpi-accent-6::after { background: #64748b; }

/* Chart / panel card titles -> clean header with a dot + divider */
.card .card-body > .header-title {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: 15px;
   font-weight: 700;
   color: var(--c-text);
   padding-bottom: 12px;
   margin-bottom: 16px;
   border-bottom: 1px solid var(--c-border-soft);
}

   .card .card-body > .header-title::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(180deg, var(--c-primary), var(--c-cyan));
      flex: 0 0 auto;
   }

/* Give chart canvases breathing room + consistent rhythm */
.chartjs-chart {
   padding-top: 4px;
}

/* Revenue / stats tables inside dashboard cards: a touch more air */
.card .table th[scope="row"] {
   color: var(--c-text-2);
   font-weight: 600;
}

/* KPI trend chips (today vs yesterday) */
.kpi-trend-row {
   margin-bottom: 4px;
}

.kpi-value .kpi-unit {
   font-size: 15px;
   font-weight: 700;
   color: var(--c-muted);
   margin-left: 2px;
}

.kpi-trend {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   font-weight: 700;
   font-size: 12px;
   padding: 2px 7px;
   border-radius: var(--r-pill);
   line-height: 1.4;
}

   .kpi-trend i {
      font-size: 13px;
   }

.kpi-trend-up {
   color: #047857;
   background: rgba(16, 185, 129, .14);
}

.kpi-trend-down {
   color: #b91c1c;
   background: rgba(239, 68, 68, .14);
}

.kpi-trend-flat {
   color: var(--c-muted);
   background: #eef1f6;
}

.kpi-foot .kpi-foot-note {
   margin-left: 6px;
   color: var(--c-faint);
   font-size: 11.5px;
}

/* ---------------------------------------------------------------------
   20. USER DETAIL MODAL — upgraded layout (CSS only; JS field IDs intact)
--------------------------------------------------------------------- */
#viewmodal.user-detail .modal-dialog {
   max-width: 920px;
}

#viewmodal.user-detail .modal-body {
   max-height: calc(100vh - 180px);
   overflow-y: auto;
   padding: 20px 22px;
}

#viewmodal.user-detail .tab-content {
   padding-top: 18px;
}

/* Profile banner */
#viewmodal.user-detail .profile-user-box {
   border-radius: var(--r-lg);
   padding: 22px 24px;
   margin-bottom: 4px;
   background-image: linear-gradient(120deg, var(--c-bar-1) 0%, var(--c-bar-2) 55%, var(--c-primary) 120%) !important;
   box-shadow: var(--sh-md);
   border: none;
}

   #viewmodal.user-detail .profile-user-box .thumb-lg {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid rgba(255, 255, 255, .35);
      box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
   }

   #viewmodal.user-detail .profile-user-box .media-body h4 {
      color: #fff;
      font-weight: 800;
      letter-spacing: -.02em;
   }

   #viewmodal.user-detail .profile-user-box .media-body p {
      margin-bottom: 4px;
      opacity: .92;
   }

/* Field labels -> compact uppercase */
#viewmodal.user-detail .col-form-label {
   font-size: 11.5px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .03em;
   color: var(--c-muted);
   margin-bottom: 4px;
   padding: 0;
   line-height: 1.4;
}

#viewmodal.user-detail .form-group {
   margin-bottom: 14px;
}

/* Read-only values (getFieldP renders <p class="form-control">) -> clean info
   field instead of looking like a disabled input box. */
#viewmodal.user-detail p.form-control {
   height: auto;
   min-height: 40px;
   background: #f8fafc;
   border: 1px solid var(--c-border-soft);
   border-radius: var(--r-sm);
   color: var(--c-text);
   font-weight: 600;
   margin-bottom: 0;
   padding: 8px 12px;
   display: flex;
   align-items: center;
}

/* Editable inputs/selects: consistent comfortable height */
#viewmodal.user-detail input.form-control,
#viewmodal.user-detail select.form-control,
#viewmodal.user-detail .select2-container--default .select2-selection--single {
   height: 40px;
}

/* Image thumbnails (giấy tờ, ảnh xe) */
#viewmodal.user-detail .car-thumb,
#viewmodal.user-detail .img-edit {
   border-radius: var(--r-sm);
   border: 1px solid var(--c-border);
   padding: 2px;
   transition: transform .15s ease;
}

   #viewmodal.user-detail .car-thumb:hover,
   #viewmodal.user-detail .img-edit:hover {
      transform: scale(1.03);
   }

/* Note/chat panel in the "Quản trị & Note" tab */
#viewmodal.user-detail .chat-box-right {
   border-radius: var(--r-md) !important;
   border-color: var(--c-border) !important;
   overflow: hidden;
}

#viewmodal.user-detail .chat-footer {
   border-top: 1px solid var(--c-border-soft);
   padding: 10px;
}

/* ---------------------------------------------------------------------
   21. DETAIL MODALS — read-only "info row" (getContentP) styling.
   Used by ~17 CRUD detail popups (transaction, cartype, feedback, ...).
   Turns a flat label/value list into a clean bordered definition list.
--------------------------------------------------------------------- */
.modal-body .info-row {
   margin: 0;
   padding: 10px 2px;
   border-bottom: 1px solid var(--c-border-soft);
   align-items: center;
}

   .modal-body .info-row:last-child {
      border-bottom: none;
   }

   .modal-body .info-row:hover {
      background: #f8fafc;
   }

   .modal-body .info-row > .col-form-label {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .02em;
      color: var(--c-muted);
      padding-top: 0;
      padding-bottom: 0;
   }

   .modal-body .info-row .ilabel {
      margin: 0;
      padding: 0;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--c-text);
      word-break: break-word;
   }

/* A touch wider so the label/value columns breathe */
#viewmodal .modal-body .info-row + .info-row {
   /* spacing handled by padding; keep selector for clarity */
}

/* ---------------------------------------------------------------------
   22. LIST-PAGE INLINE FILTER BARS
   Many list pages put their search/filter controls in a floated
   `page-title-box form-inline` next to the title. They were loose
   (big title-box padding + uneven control margins). This tidies them
   into a neat, compact, aligned row — globally, no per-page markup.
--------------------------------------------------------------------- */
.page-title-box.form-inline,
.form-inline.float-right,
.form-inline.pull-right {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   padding: 6px 0;
   margin: 0;
}

   /* gap handles spacing — neutralize stray mr-1 / m-r-5 on direct children */
   .page-title-box.form-inline > *,
   .form-inline.float-right > *,
   .form-inline.pull-right > * {
      margin: 0 !important;
      vertical-align: middle;
   }

   /* consistent control height so inputs / selects / buttons line up */
   .page-title-box.form-inline .form-control,
   .form-inline.float-right .form-control,
   .form-inline.pull-right .form-control,
   .page-title-box.form-inline .btn,
   .form-inline.float-right .btn,
   .form-inline.pull-right .btn,
   .page-title-box.form-inline .select2-container .select2-selection,
   .form-inline.float-right .select2-container .select2-selection,
   .form-inline.pull-right .select2-container .select2-selection {
      height: 38px;
      display: inline-flex;
      align-items: center;
   }

   /* select2 vertical centering inside the 38px box */
   .page-title-box.form-inline .select2-container--default .select2-selection--single .select2-selection__rendered,
   .form-inline.float-right .select2-container--default .select2-selection--single .select2-selection__rendered,
   .form-inline.pull-right .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 36px;
   }

   /* keep an input-group (search box + button) as one tight unit */
   .page-title-box.form-inline .input-group,
   .form-inline.float-right .input-group,
   .form-inline.pull-right .input-group {
      width: auto;
      flex-wrap: nowrap;
   }

/* /trips live auto-refresh toggle pill */
.trip-autorefresh {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
   background: var(--c-primary-soft-2);
   border: 1px solid rgba(79, 70, 229, .18);
   border-radius: var(--r-sm);
   font-size: 13px;
   white-space: nowrap;
}

   .trip-autorefresh input[type="checkbox"] {
      margin: 0;
      cursor: pointer;
   }

   .trip-autorefresh label {
      margin: 0;
      font-weight: 600;
      color: var(--c-primary);
      cursor: pointer;
   }

   .trip-autorefresh .ar-status {
      color: var(--c-muted);
      font-size: 11px;
   }

/* Live bid countdown — tabular digits so it doesn't jiggle while ticking */
.cd-live {
   font-variant-numeric: tabular-nums;
   font-weight: 700;
}

/* Flash trips that newly appeared after an auto-refresh */
@keyframes tripRowFlash {
   0% { background-color: rgba(16, 185, 129, .30); }
   100% { background-color: transparent; }
}

tr.trip-row-new > td {
   animation: tripRowFlash 3s ease-out;
}

/* Per-phone debt summary banner (Công nợ page) */
.debt-summary {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 18px;
   padding: 14px 18px;
   border-left: 4px solid var(--c-primary);
}

   .debt-summary.is-settled { border-left-color: var(--c-success); }
   .debt-summary.is-open { border-left-color: var(--c-warning); }
   .debt-summary .ds-label { font-weight: 700; color: var(--c-text); }
   .debt-summary .ds-item { color: var(--c-muted); font-size: 13px; }
   .debt-summary .ds-balance { font-weight: 700; color: var(--c-text); }
   .debt-summary .ds-hint { font-weight: 700; }
   .debt-summary.is-settled .ds-hint { color: var(--c-success); }
   .debt-summary.is-open .ds-hint { color: var(--c-warning); }
   .debt-summary .ds-count { margin-left: auto; color: var(--c-faint); font-size: 12px; }

/* Backlog count badge on the trip filter tabs */
.btn .tab-count {
   display: inline-block;
   margin-left: 5px;
   min-width: 18px;
   padding: 1px 6px;
   border-radius: var(--r-pill);
   background: rgba(0, 0, 0, .22);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   line-height: 16px;
   text-align: center;
   vertical-align: middle;
}

/* =====================================================================
 * §22 GUIDE — "Hướng dẫn sử dụng" cho tổng đài viên
 * ===================================================================== */
/* Nút mở hướng dẫn trên thanh công cụ */
.btn-guide {
   border: 1px solid var(--c-border);
   background: var(--c-surface);
   color: var(--c-primary) !important;
   font-weight: 600;
}
   .btn-guide:hover,
   .btn-guide:focus {
      background: var(--c-primary-soft);
      border-color: var(--c-primary);
      color: var(--c-primary-700) !important;
   }
   .btn-guide i { font-size: 15px; vertical-align: -1px; }

/* Modal hướng dẫn (id riêng #guideModal — không đụng popup khác) */
#guideModal .modal-content.guide-modal {
   border: 0;
   border-radius: var(--r-lg);
   box-shadow: var(--sh-lg);
   overflow: hidden;
}
#guideModal .modal-header {
   background: linear-gradient(100deg, var(--c-bar-1) 0%, var(--c-bar-2) 60%, var(--c-primary) 125%);
   color: #fff;
   border-bottom: 0;
   padding: 16px 22px;
}
   #guideModal .modal-header .modal-title { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 8px; }
   #guideModal .modal-header .modal-title i { font-size: 20px; }
   #guideModal .modal-header .close { color: #fff; opacity: .85; text-shadow: none; }
   #guideModal .modal-header .close:hover { opacity: 1; }
#guideModal .modal-body.guide-modal-body { padding: 22px 24px; max-height: 72vh; overflow-y: auto; color: var(--c-text-2); }
#guideModal .modal-footer { border-top: 1px solid var(--c-border-soft); padding: 12px 22px; }

/* ---- Bố cục nội dung hướng dẫn (dùng trong .guide-source) ---- */
.guide-lead {
   font-size: 14.5px;
   color: var(--c-text-2);
   margin: 0 0 18px;
   padding: 12px 16px;
   background: var(--c-primary-soft-2);
   border-radius: var(--r-md);
}
.guide-sec { margin: 0 0 20px; }
   .guide-sec:last-child { margin-bottom: 0; }
   .guide-sec > h6 {
      display: flex; align-items: center; gap: 8px;
      margin: 0 0 10px;
      font-size: 14px; font-weight: 700; color: var(--c-primary);
      text-transform: none; letter-spacing: 0;
   }
   .guide-sec > h6 i { font-size: 18px; }
.guide-list { margin: 0; padding-left: 0; list-style: none; }
   .guide-list > li {
      position: relative;
      padding: 6px 0 6px 26px;
      border-bottom: 1px dashed var(--c-border-soft);
      line-height: 1.55;
   }
   .guide-list > li:last-child { border-bottom: 0; }
   .guide-list > li::before {
      content: "";
      position: absolute; left: 6px; top: 13px;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--c-primary);
   }
.guide-list strong { color: var(--c-text); }

/* Khung mẹo / lưu ý */
.guide-tip {
   display: flex; gap: 10px; align-items: flex-start;
   margin-top: 14px;
   padding: 12px 14px;
   border-radius: var(--r-md);
   border-left: 4px solid var(--c-info);
   background: rgba(14, 165, 233, .08);
   font-size: 13.5px;
}
   .guide-tip.is-warn { border-left-color: var(--c-warning); background: rgba(245, 158, 11, .10); }
   .guide-tip i { font-size: 18px; color: var(--c-info); margin-top: 1px; }
   .guide-tip.is-warn i { color: var(--c-warning); }

/* Chú giải nhãn (legend) */
.guide-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-chip {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 3px 10px;
   border-radius: var(--r-pill);
   font-size: 12.5px; font-weight: 600;
   background: #eef2f7; color: var(--c-text-2);
}
   .guide-chip.is-success { background: rgba(16,185,129,.14); color: #047857; }
   .guide-chip.is-warning { background: rgba(245,158,11,.16); color: #b45309; }
   .guide-chip.is-danger  { background: rgba(239,68,68,.14);  color: #b91c1c; }
   .guide-chip.is-info    { background: rgba(14,165,233,.14); color: #0369a1; }

/* Nhấn tên nút trong câu hướng dẫn */
.guide-kbd {
   display: inline-block;
   padding: 1px 7px;
   border-radius: var(--r-sm);
   background: var(--c-text);
   color: #fff;
   font-size: 12px; font-weight: 600;
}

/* =====================================================================
 * §23 TRIPS TOOLBAR — tab đang chọn (active) rõ ràng + responsive mobile
 * ===================================================================== */
/* Tab lọc trạng thái ĐANG CHỌN: viền trong nổi rõ trên mọi màu nút,
   không lấn nút bên cạnh (inset) → luôn biết đang ở tab nào. */
.trip-status-tabs .btn.active {
   position: relative;
   z-index: 2;
   font-weight: 700;
   box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--c-text);
}

/* tách nhẹ nhóm nút hành động khỏi nhóm tab trên desktop */
.trip-toolbar-actions { margin-left: 8px; }

@media (max-width: 991px) {
   /* Hai cột toolbar xếp DỌC, mỗi cụm chiếm trọn chiều ngang
      (mặc định .col chia đôi 50/50 nên bị bóp/che trên mobile). */
   #divAccount > .col,
   #divAccount > .col.pull-right {
      flex: 0 0 100%;
      max-width: 100%;
      text-align: left !important;
   }

   /* DÒNG 1: tab trạng thái (cuộn ngang) + nút Mới + Thêm CHUNG 1 HÀNG.
      Tab co giãn & cuộn trong khoảng trống; Mới/Thêm giữ nguyên bên phải
      (không nằm trong vùng cuộn nên dropdown "Thêm" không bị cắt). */
   .trip-tabbar {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      gap: 6px;
      width: 100%;
   }
   .trip-status-tabs {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 5px;
      scrollbar-width: thin;
   }
      .trip-status-tabs > .btn { flex: 0 0 auto; white-space: nowrap; }
      .trip-status-tabs::-webkit-scrollbar { height: 5px; }
      .trip-status-tabs::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }
      .trip-status-tabs .btn.active { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--c-text); }
   .trip-toolbar-actions { flex: 0 0 auto; margin-left: 0; }

   /* DÒNG 2: tìm kiếm + tự làm mới + hướng dẫn — dồn trái, gọn */
   #divAccount .form-inline.pull-right,
   #divAccount .form-inline {
      float: none !important;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      gap: 6px;
      width: 100%;
   }
      #divAccount .form-inline > * { margin-right: 0 !important; }

   /* Ẩn MỌI nhãn chữ kèm icon trên mobile: Mới, Hướng dẫn, Tự làm mới,
      đồng hồ cập nhật, và nút Tổng đài ở header → chỉ còn icon. */
   .tlabel { display: none !important; }
   #divAccount .btn-guide { padding-left: 11px; padding-right: 11px; }

   /* Tự làm mới: thu thành icon nhỏ giống nút Hướng dẫn (giữ ô tích trạng thái) */
   #divAccount .trip-autorefresh {
      margin-right: 0 !important;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 9px;
      border: 1px solid var(--c-border);
      border-radius: var(--r-sm);
   }
      #divAccount .trip-autorefresh label { margin: 0; }
      #divAccount .trip-autorefresh label i { font-size: 16px; }

   /* Ô tìm kiếm thu nhỏ để vừa hàng */
   #divAccount #txttripid { width: 74px !important; }
   #divAccount #txtsearchphone { width: 90px !important; }

   /* Header: nút Tổng đài chỉ còn icon (tránh xuống dòng topbar) */
   #topnav .btn-cc { padding-left: 9px; padding-right: 9px; }
}

/* =====================================================================
 * §24 TẠO CHUYẾN (/trip/add) — map dính theo khi cuộn + form gọn
 * ===================================================================== */
/* Bản đồ DÍNH lại khi cuộn form dài → luôn thấy map lúc nhập địa chỉ */
.trip-add { align-items: flex-start; }
.trip-map-col {
   position: sticky;
   top: 74px;
   align-self: flex-start;
}
.trip-map-col #map {
   box-shadow: var(--sh-sm);
   border: 1px solid var(--c-border);
}
@media (max-width: 991px) {
   .trip-map-col { position: static; margin-top: 14px; }
   .trip-map-col #map { height: 360px !important; min-height: 0 !important; }
}

/* Form gọn, nhịp đều, nhãn rõ */
.trip-form-col .card-box { padding: 18px 20px; }
.trip-form-col .form-group.row { margin-bottom: 12px; }
.trip-form-col .col-form-label {
   font-weight: 600;
   color: var(--c-text-2);
   font-size: 13px;
   line-height: 1.3;
}
.trip-form-col hr { margin: 14px 0; border-top-color: var(--c-border-soft); }

/* Giá tiền & khuyến mãi nổi bật, không bị "trôi" chữ */
.trip-form-col #textPrice { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.trip-form-col #textCoupon { margin: 0; font-size: 15px; font-weight: 700; }

/* Thanh giá nổi (góc dưới trái) — gọn, bo tròn, đổ bóng */
.fixButtonPrice {
   position: fixed;
   bottom: 14px;
   left: 14px;
   z-index: 999;
   display: flex;
   gap: 8px;
}
   .fixButtonPrice .btn {
      border-radius: var(--r-pill);
      box-shadow: var(--sh-md);
      font-size: 14px;
      padding: 8px 14px;
   }

/* §24b — Tiêu đề mục trong form tạo chuyến + thanh nút thao tác dính dưới */
.trip-form-col .trip-form-section {
   display: flex;
   align-items: center;
   gap: 7px;
   margin: 4px 0 12px;
   padding-bottom: 6px;
   border-bottom: 1px solid var(--c-border-soft);
   font-size: 12.5px;
   font-weight: 700;
   color: var(--c-primary);
   text-transform: uppercase;
   letter-spacing: .02em;
}
   .trip-form-col .trip-form-section:not(:first-child) { margin-top: 18px; }
   .trip-form-col .trip-form-section i { font-size: 17px; }

.trip-action-bar {
   position: sticky;
   bottom: 0;
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   margin: 10px -20px -18px;
   padding: 12px 20px;
   background: var(--c-surface);
   border-top: 1px solid var(--c-border);
   border-radius: 0 0 var(--r-md) var(--r-md);
   z-index: 3;
}

/* §24c — Pill quãng đường/thời gian overlay ở đáy bản đồ tạo chuyến */
.trip-route-info {
   position: absolute;
   left: 50%;
   bottom: 16px;
   transform: translateX(-50%);
   z-index: 5;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   max-width: calc(100% - 40px);
   padding: 7px 14px;
   border-radius: var(--r-pill);
   background: rgba(15, 23, 42, .88);
   color: #fff;
   font-size: 13.5px;
   font-weight: 600;
   box-shadow: var(--sh-md);
   white-space: nowrap;
}
   .trip-route-info i { font-size: 16px; color: #c7d2fe; }

/* =====================================================================
 * §25 /users — thanh lọc + nút TRÊN 1 DÒNG (flexbox phẳng, không dùng grid)
 * ===================================================================== */
.filter-bar.user-filter {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
}
   /* 5 ô select: tự giãn lấp đầy bề ngang, đủ rộng đọc chữ */
   .filter-bar.user-filter > .ufb-sel {
      flex: 1 1 150px;
      min-width: 140px;
      margin-bottom: 0;
   }
   /* ô tìm kiếm: rộng hơn select một chút */
   .filter-bar.user-filter > .ufb-search {
      flex: 1.4 1 210px;
      min-width: 190px;
      margin-bottom: 0;
   }
   /* cụm nút Excel / refresh / Hướng dẫn: dồn sang phải, không xuống dòng */
   .filter-bar.user-filter > .ufb-actions {
      flex: 0 0 auto;
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
   }

/* Màn rất hẹp: cụm nút khỏi dồn phải để xuống dòng gọn */
@media (max-width: 767px) {
   .filter-bar.user-filter > .ufb-actions { margin-left: 0; }
}