p {
	font-size: 15px !important;	
}
label {
	font-size: 15px !important;	
}
input {
	font-size: 15px !important;	
}
select {
	font-size: 15px !important;	
}
span {
	font-size: 15px !important;	
}
a {
	font-size: 15px !important;	
}
button {
	font-size: 15px !important;	
}

table th {
    background-color: #d5f3ff !important;
}

/* Uniform header cells on every list table — DataTables and server-rendered alike. */
.dataTable th,
.table thead th {
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 20px !important; /* 20px text + 8px/8px padding = 36px header row */
}

/* Table footers: give the record info and the paging controls room to breathe on both
   DataTables pages and the server-rendered CRM lists (bootstrap .pagination). */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: .75rem;
    margin-bottom: 1.25rem;
}

.nk-content .pagination {
    margin-top: .75rem;
    margin-bottom: 1.25rem;
}

/* DataTables length ("Hiển thị N dữ liệu"): modern pill select + space before the table.
   Selectors mirror dashlite's (div-qualified) so these win the cascade, and the explicit
   margins neutralize any inherited negative offsets. */
div.dataTables_wrapper div.dataTables_length {
    /* Negative top eats into the banner's 1rem bottom margin for a snug fit. */
    margin-top: -6px !important;
    margin-bottom: 7px !important;
    padding-top: 6px;
}

div.dataTables_wrapper div.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #526484;
    font-weight: 500;
    margin: 0;
}

div.dataTables_wrapper div.dataTables_length select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 88px;
    height: auto;
    padding: 7px 36px 7px 18px !important;
    border-radius: 999px !important;
    border: 1.5px solid #b6ddef !important;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%233f74d6'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px !important;
    font-weight: 600;
    color: #16315f;
    box-shadow: 0 2px 8px rgba(63, 116, 214, .10);
    transition: border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

div.dataTables_wrapper div.dataTables_length select:hover {
    border-color: var(--brand-1) !important;
}

div.dataTables_wrapper div.dataTables_length select:focus {
    outline: none;
    border-color: var(--brand-1) !important;
    box-shadow: 0 0 0 3px rgba(63, 116, 214, .18);
}
.crmodd td {
    padding-left: 4px !important;
    padding-right: 4px !important;
    background-color: #f4fff9;
}
.crmeven td {
    padding-left: 4px !important;
    padding-right: 4px !important;
    background-color: #e3e7fc;
}
.redrow td {
    background-color: #ffc6cf !important;
}

/* ============================================================
   Responsive / mobile refinements (admin CRM + logistics)
   ============================================================ */

/* Data tables get horizontal scroll on small screens (auto-wrapped by JS). */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Card headers used across the CRM pages stack cleanly on phones. */
@media (max-width: 767.98px) {
    .card-header h3 {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .card-header .text-md-end {
        text-align: left !important;
        margin-top: .5rem;
    }

    /* Keep rows on one line so the horizontal scroll (not wrapping) governs width. */
    .table.table-sm td,
    .table.table-sm th {
        white-space: nowrap;
    }

    /* Action buttons inside table cells breathe a little when they wrap. */
    td .btn,
    td form.d-inline {
        margin-bottom: 2px;
    }

    /* Button toolbars (AI hub panels, etc.) wrap instead of overflowing. */
    .card-inner .btn-group {
        flex-wrap: wrap;
    }

    /* Side "result" panels are pinned on desktop; let them flow on mobile. */
    .card[style*="sticky"] {
        position: static !important;
    }
}

/* Very small screens: filter/search bars stack their controls full width. */
@media (max-width: 575.98px) {
    form.row.g-2 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Input groups (lead picker, enrol/adjust forms) stack instead of overflowing. */
    .input-group {
        flex-wrap: wrap;
    }

    .input-group > .form-control,
    .input-group > .form-select {
        flex: 1 1 100%;
        width: 100%;
        margin-bottom: 4px;
        border-radius: .25rem !important;
    }

    .input-group > .btn {
        flex: 1 1 100%;
        width: 100%;
        border-radius: .25rem !important;
    }

    .input-group > .input-group-text {
        border-radius: .25rem 0 0 .25rem;
    }
}

/* ------------------------------------------------------------
   Stacked "card" layout for key list tables on phones.
   Add class="... cards-sm" to the <table> and data-label="..."
   to each <td>. Below 768px each row becomes a labelled card.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    table.cards-sm thead {
        display: none;
    }

    table.cards-sm,
    table.cards-sm tbody,
    table.cards-sm tr,
    table.cards-sm td {
        display: block;
        width: 100%;
    }

    table.cards-sm tr {
        margin-bottom: .75rem;
        border: 1px solid #dbdfea;
        border-radius: .5rem;
        padding: .25rem .75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(43, 55, 72, .08);
    }

    table.cards-sm td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border: none;
        border-bottom: 1px solid #f0f2f7;
        padding: .5rem .1rem;
        text-align: right;
        white-space: normal !important;
    }

    table.cards-sm td:last-child {
        border-bottom: none;
    }

    table.cards-sm td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #526484;
        text-align: left;
        flex: 0 0 40%;
        white-space: nowrap;
    }

    /* Cells with no label (or hidden empties) don't render a label column. */
    table.cards-sm td:not([data-label])::before,
    table.cards-sm td[data-label=""]::before {
        content: none;
    }

    /* Action cells: full-width, left-aligned, buttons wrap. */
    table.cards-sm td.cell-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .25rem;
        padding-top: .6rem;
    }

    table.cards-sm td.cell-actions::before {
        content: none;
    }

    /* Footer total rows (e.g. quote total) stay a tidy single line as a card. */
    table.cards-sm tfoot tr {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 1px solid #dbdfea;
        border-radius: .5rem;
        padding: .5rem .75rem;
        background: #f5f6fa;
        font-weight: 600;
    }

    table.cards-sm tfoot th {
        border: none;
        padding: 0;
    }

    table.cards-sm tfoot th:empty {
        display: none;
    }
}

/* ============================================================
   Modern theme layer — sidebar, background, header, cards.
   Applied globally (this stylesheet loads on every page).
   ============================================================ */
:root {
    --brand-1: #3f74d6;
    --brand-2: #4f86e6;
    --brand-3: #34c9d6;
    --brand-cyan: #3fd9c4;
}

/* ---- App background: soft, airy, hint of color ---- */
.nk-body {
    background:
        radial-gradient(1100px 560px at 100% -8%, rgba(63,116,214,.12), transparent 60%),
        radial-gradient(880px 500px at -8% 112%, rgba(63,217,196,.10), transparent 55%),
        linear-gradient(160deg, #f1f6ff 0%, #e8f0fb 100%) !important;
    background-attachment: fixed !important;
}

/* ---- Sidebar (left panel menu) ---- */
.nk-sidebar {
    background: linear-gradient(185deg, #16315f 0%, #102a4e 45%, #0d2240 100%) !important;
    border-right: none !important;
    box-shadow: 10px 0 34px rgba(19, 14, 46, .22);
}

.nk-sidebar .nk-menu {
    padding: 10px 12px;
}

.nk-sidebar .nk-menu-item {
    margin: 2px 0;
}

.nk-sidebar .nk-menu-link {
    border-radius: 11px;
    padding: 10px 14px;
    color: #aebbd9 !important;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.nk-sidebar .nk-menu-link .nk-menu-icon {
    color: #8093bd;
    transition: color .18s ease, transform .18s ease;
}

.nk-sidebar .nk-menu-link .nk-menu-text {
    font-weight: 500;
    letter-spacing: .1px;
}

.nk-sidebar .nk-menu-link:hover {
    color: #fff !important;
    background: rgba(63, 116, 214, .15);
    transform: translateX(3px);
}

.nk-sidebar .nk-menu-link:hover .nk-menu-icon {
    color: #5fe0cf;
    transform: scale(1.06);
}

/* Active item: gradient pill + glow. Highlight is driven by the CURRENT page (menu-active.js), not the
   .active/expand state — every group is expanded by default, so .active can't mean "highlighted". */
.nk-sidebar .nk-menu-item.current-page > .nk-menu-link,
.nk-sidebar .nk-menu-link.current-page,
.nk-sidebar .nk-menu-item.current-menu > .nk-menu-link {
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
    box-shadow: 0 8px 22px rgba(63, 116, 214, .42);
}

/* Neutralize dashlite's blue active-icon colour (it would tint every expanded group); the current
   page's icon goes white via the rule below. */
.nk-sidebar .nk-menu-item.active > .nk-menu-link .nk-menu-icon {
    color: #8093bd;
}

.nk-sidebar .nk-menu-item.current-page > .nk-menu-link .nk-menu-icon,
.nk-sidebar .nk-menu-link.current-page .nk-menu-icon {
    color: #fff;
}

/* Sub-menu: guide line + softer active */
.nk-sidebar .nk-menu-sub {
    margin: 3px 0 5px 12px;
    padding-left: 8px;
    border-left: 1px dashed rgba(150, 168, 210, .28);
}

.nk-sidebar .nk-menu-sub .nk-menu-link {
    padding: 8px 12px;
    font-size: 13px;
    color: #9aa9cb !important;
}

/* Dashlite indents sub-menu links 60px; matches its specificity to pull them in (60 → 32px). */
.nk-sidebar .nk-menu > li .nk-menu-sub .nk-menu-link {
    padding-left: 32px;
}

.nk-sidebar .nk-menu-sub .nk-menu-link:hover {
    color: #fff !important;
    background: rgba(63, 116, 214, .13);
}

.nk-sidebar .nk-menu-sub .nk-menu-item.current-page > .nk-menu-link,
.nk-sidebar .nk-menu-sub .nk-menu-link.current-page {
    color: #fff !important;
    background: rgba(63, 116, 214, .22) !important;
    box-shadow: none;
}

.nk-sidebar .nk-menu-badge {
    background: linear-gradient(135deg, var(--brand-2), var(--brand-3)) !important;
    color: #fff !important;
    border: none;
}

.nk-sidebar .simplebar-scrollbar:before {
    background: rgba(150, 168, 210, .38);
}

/* ---- Sidebar feature-function section headings (luxury / minimal) ---- */
.nk-sidebar .nk-menu .mgn-menu-section {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 10px 4px;
    padding: 10px 10px 7px;
    border-top: 1px solid rgba(201, 162, 75, .16);
}

.nk-sidebar .nk-menu .mgn-menu-section:first-of-type {
    margin-top: 8px;
    border-top: none;
}

.nk-sidebar .nk-menu .mgn-menu-section .mgn-section-ic {
    font-size: 15px;
    line-height: 1;
    color: #c9a24b;
    filter: drop-shadow(0 1px 3px rgba(201, 162, 75, .28));
}

.nk-sidebar .nk-menu .mgn-menu-section .mgn-section-title {
    /* !important beats the theme's span{font-size:15px!important} override — a 15px heading overflows. */
    font-size: 10.5px !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a9bc0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact/collapsed sidebar: drop the labels, keep a slim gold divider. */
.nk-sidebar.is-compact:not(:hover) .nk-menu .mgn-menu-section .mgn-section-title {
    display: none;
}

/* ---- Menu labels always one line; every group expanded by default (no collapse) ---- */
.nk-sidebar .nk-menu-link .nk-menu-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

.nk-sidebar .nk-menu-toggle + .nk-menu-sub {
    display: block !important;
}

.nk-sidebar .nk-menu > .nk-menu-item.has-sub > .nk-menu-toggle:after {
    display: none;
}

/* ---- Header (top bar): light glass ---- */
.nk-header.is-light {
    background: rgba(255, 255, 255, .78) !important;
    backdrop-filter: saturate(150%) blur(9px);
    -webkit-backdrop-filter: saturate(150%) blur(9px);
    box-shadow: 0 2px 18px rgba(43, 55, 90, .06);
    border-bottom: 1px solid rgba(120, 139, 255, .10);
}

/* ---- Cards: soft, elevated, rounded ---- */
.card,
.card-bordered {
    border: 1px solid rgba(120, 139, 255, .10) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(43, 55, 90, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.card-bordered:hover {
    box-shadow: 0 12px 32px rgba(43, 55, 90, .11);
}

/* Content area sits flush — dashlite's 32px/22px .nk-content padding removed. */
.nk-content {
    padding: 0 !important;
}

/* Tight card body (was 12px 20px). */
.card-body {
    padding: 6px 6px !important;
}

/* The sign-in card wants breathing room instead: it is a narrow, standalone card rather than one
   panel in a dense list. !important is required only to beat the global rule above. */
.card-body.auth-card-body {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Page banners / search panels match the table header colour so the page reads as one
   palette. One rule set styles every list/search panel (Customer, Leads, Tasks, Settings, ...). */
.card-header.bg-info.bg-gradient,
.card-header.bg-info {
    background: #d5f3ff !important; /* same as table th */
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(63, 116, 214, .10);
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 2px !important; /* beats per-view mb-2/mb-3 utilities for a uniform gap */
}

/* Even vertical rhythm: title row → filter rows → action row. */
.card-header.bg-info .row + .row {
    margin-top: .875rem;
    margin-bottom: 0 !important;
}

/* Filter fields breathe evenly, also when they wrap on smaller screens. */
.card-header.bg-info .row > [class*="col-"] {
    margin-bottom: .5rem;
}

.card-header.bg-info label {
    margin-bottom: .375rem;
    font-weight: 500;
    font-size: .8125rem;
    letter-spacing: .01em;
}

/* Inputs/selects on the banner: consistent soft edge on the light-blue panel. */
.card-header.bg-info .form-control {
    border: 1px solid #b6ddef;
    box-shadow: 0 1px 3px rgba(22, 49, 95, .08);
}

/* Searchable dropdowns (Select2 via crm-select.js): hide dashlite's wrapper arrow
   behind the Select2 container so selects don't show a double chevron, and give the
   Select2 box the same soft edge as other banner inputs. */
.form-control-select:has(.select2-container)::after {
    display: none;
}

.card-header.bg-info .select2-container--default .select2-selection--single {
    border: 1px solid #b6ddef;
    box-shadow: 0 1px 3px rgba(22, 49, 95, .08);
}

/* Search/reset action row: right-aligned flex with a uniform gap. Flex neutralizes the
   per-view float:right hacks, and primary action naturally sits rightmost. */
.card-header.bg-info .col-12.mt-4 {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: .5rem !important;
    margin-bottom: 0;
}

.card-header.bg-info .col-12.mt-4 .btn {
    float: none;
}

/* ---- Buttons: subtle gradient on primary ---- */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(63, 116, 214, .30);
    transition: filter .15s ease, box-shadow .15s ease;
}

.btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 7px 20px rgba(63, 116, 214, .42);
}

.badge {
    border-radius: 6px;
    letter-spacing: .2px;
}

/* Softer, modern scrollbars app-wide */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 139, 255, .35) transparent;
}
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
*::-webkit-scrollbar-thumb {
    background: rgba(120, 139, 255, .35);
    border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 139, 255, .55);
}

/* Labels/titles on the light-blue banner use the navy heading colour for contrast
   (overrides the text-white utility the views still carry from the gradient era). */
.card-header.bg-info label,
.card-header.bg-info .form-label,
.card-header.bg-info .control-label,
.card-header.bg-info legend,
.card-header.bg-info p,
.card-header.bg-info h1,
.card-header.bg-info h2,
.card-header.bg-info h3,
.card-header.bg-info h4,
.card-header.bg-info h5,
.card-header.bg-info h6 {
    color: #16315f !important;
}

/* Wider sidebar: +28px (242 → 270) so the VVB Solutions brand fits and the menu
   breathes. Scoped with :not(.is-compact) so the 74px compact-collapse still works. */
.nk-sidebar:not(.is-compact) {
    width: 270px;
}

@media (min-width: 1200px) {
    .nk-sidebar:not(.is-compact) {
        width: 270px;
    }

    .nk-sidebar:not(.is-compact) + .nk-wrap,
    .nk-sidebar-overlay + .nk-wrap {
        padding-left: 270px;
    }

    .nk-sidebar:not(.is-compact) + .nk-wrap > .nk-header-fixed,
    .nk-sidebar-overlay + .nk-wrap > .nk-header-fixed {
        left: 270px;
    }
}

@media (max-width: 991.98px) {
    .nk-sidebar-mobile {
        width: 270px !important;
    }
}


/* ---- Dashboard: hero KPI cards, attention list, action lists ---- */
.dash-hero {
    border: none;
    border-radius: 14px;
    color: #fff;
    overflow: hidden;
}

.dash-hero .card-inner { padding: 18px 20px; }
.dash-hero .hero-label { font-size: .8125rem; opacity: .88; letter-spacing: .01em; }
.dash-hero .hero-value { font-size: 1.65rem; font-weight: 700; line-height: 1.25; margin: 2px 0; color: #fff; }
.dash-hero .hero-sub { font-size: .78rem; opacity: .92; }
.dash-hero .hero-sub strong { color: #fff; }
.dash-hero .hero-sub.up em { color: #b6ffdc; }
.dash-hero .hero-sub.down em { color: #ffd2cc; }

.dash-hero .hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}

.hero-a { background: linear-gradient(135deg, #3f74d6, #2a4f9e); box-shadow: 0 8px 20px rgba(63, 116, 214, .28); }
.hero-b { background: linear-gradient(135deg, #12b3a2, #0b7d72); box-shadow: 0 8px 20px rgba(18, 179, 162, .28); }
.hero-c { background: linear-gradient(135deg, #8b5cf6, #5f36c9); box-shadow: 0 8px 20px rgba(139, 92, 246, .28); }
.hero-d { background: linear-gradient(135deg, #f4a10e, #cf7e00); box-shadow: 0 8px 20px rgba(244, 161, 14, .28); }

.dash-attention a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 8px;
    color: #526484;
}

.dash-attention a:hover { background: #f4f8ff; color: #16315f; }
.dash-attention .num { margin-left: auto; font-weight: 700; }

.dash-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px dashed #e6ecf5;
}

.dash-list li:last-child { border-bottom: none; }
.dash-list a { min-width: 0; }
.dash-list .t { display: block; font-weight: 600; color: #16315f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.dash-list .s { display: block; font-size: .75rem; color: #8094ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.dash-list .r { text-align: right; flex-shrink: 0; }
.dash-list .v { display: block; font-weight: 600; font-size: .8125rem; color: #364a63; }

/* ============================================================
   Global mobile polish (phones & small tablets).
   Additive layer applied on every page (this stylesheet loads
   on both the app layout and the auth layout). No per-view
   markup changes required — it hardens the shared patterns the
   CRM uses everywhere: page/card headers, action toolbars, tab
   strips, modals, media, code blocks and container padding.
   ============================================================ */

/* Media never forces the page wider than the screen. */
img,
video,
canvas,
svg.responsive-svg {
    max-width: 100%;
}

/* Pre-formatted / code blocks scroll internally instead of
   stretching the layout (JSON viewers, audit payloads, etc.). */
pre,
code,
.font-monospace {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
}

/* ---- Tablets and below: ≤ 991.98px ---- */
@media (max-width: 991.98px) {
    /* Page/card header rows (title on the left, action buttons on
       the right) wrap gracefully instead of colliding. Covers both
       the DashLite block header and the Bootstrap card header the
       CRM listing/detail pages use. */
    .nk-block-between,
    .nk-block-head-content + .nk-block-head-content {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Tab strips scroll sideways rather than wrapping into a tall,
       broken stack (opportunity/detail pages have many tabs). */
    .nav-tabs,
    .nk-nav.nav-tabs,
    .nav.nav-tabs-s2 {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }
}

/* ---- Phones: ≤ 767.98px ---- */
@media (max-width: 767.98px) {
    /* Reclaim the horizontal space desktop padding eats up so
       forms and tables get the full narrow viewport. */
    .nk-content {
        padding: 18px 0;
    }

    .card-inner,
    .card-inner-lg {
        padding: 1rem;
    }

    /* Listing headers built as a Bootstrap .row inside .card-header:
       the right-aligned "add / actions" column becomes left-aligned
       full width under the title instead of a cramped right sliver. */
    .card-header .row > [style*="text-align: right"],
    .card-header .row > [style*="text-align:right"] {
        text-align: left !important;
        margin-top: .5rem;
    }

    /* Action buttons in page/card headers go full width and stack so
       they are easy tap targets and never overflow. */
    .card-header .row > [style*="text-align: right"] .btn,
    .card-header .row > [style*="text-align:right"] .btn,
    .nk-block-tools .btn {
        margin-bottom: .25rem;
    }

    /* Every other action row: buttons wrap onto their own line on a phone and would otherwise sit
       edge to edge. Most headers align their actions with the Bootstrap utility classes rather than
       the inline style matched above — `text-end` and `text-md-end` are two different class names,
       so both need listing. */
    [class*="text-end"] > .btn,
    [class*="text-md-end"] > .btn,
    [class*="text-right"] > .btn,
    .card-tools .btn,
    .btn-toolbar > .btn,
    .crm-filter-actions .btn,
    .dash-toolbar-actions .btn,
    .modal-footer > .btn {
        margin-top: .25rem;
        margin-bottom: .25rem;
    }

    /* Buttons that are meant to touch: a segmented group, an input add-on or a pager reads as one
       control, so the spacing above must not break them apart. */
    .btn-group > .btn,
    .btn-group-sm > .btn,
    .input-group > .btn,
    .pagination .btn,
    .dash-tools .btn {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Button toolbars / tool groups wrap instead of overflowing. */
    .btn-toolbar,
    .card-tools,
    .nk-block-tools,
    .btn-group {
        flex-wrap: wrap;
    }

    /* Headings scale down so long Vietnamese titles don't wrap into
       three lines and push content off-screen. */
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3, .card-header h3 { font-size: 1.2rem; line-height: 1.3; }

    /* Modals use nearly the full width and scroll their body so tall
       CRM forms (quotes, tickets) are usable on a phone. */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-body {
        max-height: 75vh;
        overflow-y: auto;
    }

    /* Bootstrap grid form filters (label + control per column) each
       take the full row so nothing is squeezed. Complements the
       .row.g-2 rule already defined above for search bars. */
    .card-header .row > [class*="col-"] {
        margin-bottom: .25rem;
    }
}

/* ---- Small phones: ≤ 575.98px ---- */
@media (max-width: 575.98px) {
    /* Header action buttons span the full width on the smallest
       screens for comfortable one-thumb tapping. */
    .card-header .row > [style*="text-align: right"] .btn,
    .card-header .row > [style*="text-align:right"] .btn {
        display: block;
        width: 100%;
    }

    /* Pagination stays on one scrollable line instead of wrapping. */
    .pagination {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------
   Mobile search-panel toggle (wired up in crm-select.js).
   The toggle button is desktop-hidden; only on phones/tablets
   does it appear and gate the collapsible filter panel. Because
   collapse is media-query scoped, the panel can never stay hidden
   on a wide screen.
   ------------------------------------------------------------ */
.crm-search-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 8px;
    margin-bottom: .75rem;
    padding: .5rem .85rem;
    font-size: .9375rem;
    font-weight: 600;
    color: #364a63;
    background: #f5f6fa;
    border: 1px solid #dbdfea;
    border-radius: .5rem;
}

.crm-search-toggle .crm-search-caret {
    margin-left: auto;
    transition: transform .2s ease;
}

.crm-search-toggle.is-open .crm-search-caret {
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .crm-search-toggle {
        display: inline-flex;
    }

    .crm-search-panel.is-collapsed {
        display: none !important;
    }
}

/* ------------------------------------------------------------
   Listing tables & page-level overflow guards (phones/tablets).
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    /* DataTables build their own .dataTables_wrapper, so the global
       table auto-wrap (in _Layout) intentionally skips them. Give that
       wrapper the horizontal scroll instead, so wide grids (customers,
       users, tasks, …) never push the page wider than the screen. */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* DataTables lays its length/search/pager controls in Bootstrap
       rows whose negative gutter would otherwise bleed a few px past
       the viewport. */
    .dataTables_wrapper > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Safety net: clip any small horizontal bleed at the content edge
       (e.g. a top-level .row's negative gutter on pages that render a
       bare .card-header). `clip` establishes no scroll container, so
       inner scrollers (.table-responsive, .dataTables_wrapper) keep
       their own horizontal scroll and sticky/fixed chrome is unaffected. */
    .nk-content-body {
        overflow-x: clip;
    }
}

/* ------------------------------------------------------------
   Projects upsert form (#frmProject): the desktop layout places
   tiny label columns (col-2) beside inputs (col-6) with empty
   spacer columns. On phones those fixed widths crush the labels,
   so stack every field full-width (label above input) and drop
   the now-pointless empty spacer/filler columns.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    #frmProject > [class*="col-"],
    #frmProject .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: .25rem;
    }

    /* Columns that hold no actual control (spacers / layout fillers,
       which contain only an HTML comment) collapse away. :has keeps
       this robust; where unsupported the rule is simply ignored and
       the fields still stack (just with a little extra spacing). */
    #frmProject > [class*="col-"]:not(:has(*)),
    #frmProject .row > [class*="col-"]:not(:has(*)) {
        display: none;
    }

    #frmProject label.control-label {
        margin-top: .35rem;
        margin-bottom: .1rem;
        font-weight: 600;
    }

    /* Save / Back / Delete become full-width, easy-to-tap, stacked. */
    #frmProject > .mt-4 .btn {
        width: 100%;
        margin: 0 0 .5rem 0 !important;
        float: none !important;
    }
}

/* ============================================================
   Project Type / Stage admin: icon + colour pickers, and the
   coloured badges / process timeline used across projects.
   ============================================================ */

/* Icon picker grid */
#iconPickerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border: 1.5px solid #dbe4f0;
    border-radius: 12px;
    background: #fbfdff;
}
.icon-pick {
    height: 44px;
    border: 1.5px solid #e2e8f2;
    border-radius: 10px;
    background: #fff;
    color: #526484;
    cursor: pointer;
    transition: all .14s ease;
}
.icon-pick .icon { font-size: 20px; }
.icon-pick:hover { border-color: var(--brand-1); color: var(--brand-1); transform: translateY(-1px); }
.icon-pick.selected {
    border-color: var(--brand-1);
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff;
    box-shadow: 0 4px 12px rgba(63,116,214,.35);
}

/* Colour swatches */
#colorSwatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px #dbe4f0;
    cursor: pointer;
    padding: 0;
    transition: transform .12s ease, box-shadow .12s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch.selected { box-shadow: 0 0 0 2.5px var(--brand-1); transform: scale(1.08); }

.lookup-preview {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 12px;
    background: #f4f8ff; border: 1.5px dashed #cddaf0;
    font-weight: 600;
}
.lookup-preview .icon { font-size: 24px; }

/* Coloured pill badge for a type / stage / status */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; line-height: 1.4;
    color: #fff; white-space: nowrap;
}
.chip .icon { font-size: 13px; }
.chip.chip-soft { background: transparent; }

/* Swatch cell shown in the admin list tables */
.chip-dot {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 4px; vertical-align: middle; margin-right: 6px;
}

/* -------- Project detail: process timeline -------- */
.proc-track {
    display: flex; flex-wrap: wrap; gap: 6px 0; align-items: flex-start;
    counter-reset: step;
}
.proc-step { flex: 1 1 0; min-width: 90px; text-align: center; position: relative; }
.proc-step::before {
    content: ""; position: absolute; top: 21px; left: -50%; width: 100%; height: 3px;
    background: #e2e8f2; z-index: 0;
}
.proc-step:first-child::before { display: none; }
.proc-step.done::before { background: #22c55e; }
.proc-node {
    position: relative; z-index: 1;
    width: 44px; height: 44px; margin: 0 auto 6px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 2.5px solid #e2e8f2; color: #8094ae;
    font-size: 19px;
}
.proc-step.done .proc-node,
.proc-step.current .proc-node { border-color: currentColor; color: #fff; }
.proc-step.current .proc-node { box-shadow: 0 0 0 5px rgba(63,116,214,.15); }
.proc-label { font-size: 12.5px; font-weight: 600; color: #364a63; }
.proc-step.pending .proc-label { color: #8094ae; }

/* -------- Project detail: vertical stage history -------- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 2px; background: #e2e8f2; }
.tl-item { position: relative; padding: 0 0 18px 52px; }
.tl-dot {
    position: absolute; left: 8px; top: 2px;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; box-shadow: 0 0 0 3px #fff;
}
.tl-card { background: #fff; border: 1px solid #e5e9f2; border-radius: 12px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(43,55,72,.06); }
.tl-time { font-size: 12px; color: #8094ae; }

/* ============================================================
   Stage checklist editor + per-project activity tracking.
   ============================================================ */
.btn-xs { padding: 2px 7px; font-size: 12px; line-height: 1.3; border-radius: 7px; }
.badge.bg-danger-dim { background: #fde8e8 !important; color: #d92d20 !important; }
.badge.bg-warning-dim { background: #fef3e2 !important; color: #b25e09 !important; }

.chk-tree, .chk-subs { list-style: none; margin: 0; padding: 0; }
.chk-task { border: 1px solid #e5e9f2; border-radius: 12px; margin-bottom: 10px; background: #fff; box-shadow: 0 1px 3px rgba(43,55,72,.05); }
.chk-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
.chk-ic { font-size: 18px; color: var(--brand-1); margin-top: 2px; }
.chk-bullet { width: 8px; height: 8px; border-radius: 50%; background: #b6c2d9; margin: 8px 5px 0; flex: 0 0 auto; }
.chk-main { flex: 1 1 auto; min-width: 0; }
.chk-name { font-weight: 600; color: #253858; }
.chk-desc { font-size: 12.5px; color: #8094ae; margin-top: 2px; }
.chk-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.chk-subs { border-top: 1px dashed #e9edf5; padding: 4px 12px 8px 22px; }
.chk-sub { padding: 6px 0; border-bottom: 1px dashed #f0f2f7; }
.chk-subs .chk-sub:last-child { border-bottom: none; }

/* Per-project checklist (project detail) */
.pchk { list-style: none; margin: 0; padding: 0; }
.pchk-task > .pchk-row { background: #f7f9fd; border-radius: 8px; }
.pchk-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #f0f2f7; }
.pchk-row.done .pchk-name { text-decoration: line-through; color: #8094ae; }
.pchk-sub { padding-left: 26px; }
.pchk-main { flex: 1 1 auto; min-width: 0; }
.pchk-name { font-weight: 600; color: #253858; }
.pchk-ctl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pchk-ctl select, .pchk-ctl input { font-size: 12.5px; }
.risk-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.acc-head { cursor: pointer; }

/* ============================================================
   Modern project detail form (Projects/Upsert) — sectioned,
   label-on-top, responsive; professional on desktop + mobile.
   ============================================================ */
.project-card .card-header h3 { color: #16315f; }
.hdr-chips .chip { box-shadow: 0 2px 6px rgba(43,55,72,.12); }

.project-form .form-section { margin-bottom: 22px; }
.project-form .form-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #16315f; margin: 4px 0 0;
}
.project-form .form-section-title .icon { font-size: 18px; color: var(--brand-1); }
.project-form .sec-divider {
    height: 1px; margin: 8px 0 16px;
    background: linear-gradient(90deg, #dbe6f5 0%, rgba(219,230,245,0) 100%);
}
.project-form .form-label { font-weight: 600; color: #3a4a63; margin-bottom: .35rem; }
.project-form .form-control { border-radius: 10px; padding: .55rem .8rem; }
.project-form input[type="file"].form-control { padding: .4rem .6rem; }
.project-form .form-control:focus {
    border-color: var(--brand-1);
    box-shadow: 0 0 0 3px rgba(63,116,214,.15);
}

/* Uploaded-file chips */
.file-list { list-style: none; padding: 0; margin: .55rem 0 0; display: flex; flex-direction: column; gap: 6px; }
.file-list li {
    display: flex; align-items: center; gap: 8px;
    background: #f7f9fd; border: 1px solid #e9eef7; border-radius: 9px;
    padding: 6px 10px; font-size: 13px;
}
.file-list li img { width: 22px; height: 22px; flex: 0 0 auto; }
.file-list li a { flex: 1 1 auto; min-width: 0; color: #2456b3; }
.file-list li .delete-file { cursor: pointer; flex: 0 0 auto; }
.file-empty { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #8094ae; margin-top: .5rem; }

.img-list { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.img-list li { position: relative; }
.img-list li img { width: 150px; height: 110px; object-fit: cover; border: 1px solid #e5e9f2; border-radius: 10px; }
.img-list li .delete-file {
    position: absolute; top: 6px; right: 6px; cursor: pointer;
    background: #fff; border-radius: 50%; padding: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* Sticky-ish action bar */
.project-form .form-actions {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    border-top: 1px solid #eef1f7; padding-top: 18px; margin-top: 6px;
}
@media (max-width: 575.98px) {
    .project-form .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .project-form .form-actions .btn { width: 100%; justify-content: center; }
    .project-form .form-actions .ms-auto { width: 100%; }
    .project-form .form-actions .ms-auto .btn { flex: 1; }
}

/* ============================================================
   Project form polish: left inset, colour-separated section
   panels, and equal-size action buttons.
   ============================================================ */
.project-card > .card-header,
.project-card > .card-body { padding-left: 20px; padding-right: 20px; padding-bottom: 20px; }

/* Each info group becomes a tinted panel with a coloured left accent */
.project-form .form-section {
    background: #fbfdff;
    border: 1px solid #eaf0f9;
    border-left: 4px solid var(--brand-1);
    border-radius: 12px;
    padding: 14px 18px 18px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(43,55,72,.04);
}
.project-form .sec-blue   { border-left-color:#3f74d6; background:#f4f8ff; }
.project-form .sec-blue   .form-section-title .icon { color:#3f74d6; }
.project-form .sec-purple { border-left-color:#8b5cf6; background:#f8f6ff; }
.project-form .sec-purple .form-section-title .icon { color:#8b5cf6; }
.project-form .sec-teal   { border-left-color:#14b8a6; background:#f1fcfa; }
.project-form .sec-teal   .form-section-title .icon { color:#14b8a6; }
.project-form .sec-amber  { border-left-color:#f4a10e; background:#fffaf0; }
.project-form .sec-amber  .form-section-title .icon { color:#f4a10e; }
.project-form .form-section .sec-divider {
    background: linear-gradient(90deg, rgba(22,49,95,.16) 0%, rgba(22,49,95,0) 100%);
}
.project-form .form-section .form-control { background: #fff; }

/* Equal-size buttons (uniform W x H) — fixed height so gradient/shadow
   variants don't render taller than the plain one, keeping them on one line. */
.project-form .form-actions { align-items: center; }
.project-form .form-actions .ms-auto { display: inline-flex; align-items: center; gap: 10px; }
.project-form .form-actions .btn {
    width: 150px;
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    border-radius: 10px;
    vertical-align: middle;
}
@media (max-width: 575.98px) {
    .project-form .form-actions .btn { width: 100%; }
}

/*
 * Dải hướng dẫn + nút hành động ở đầu trang danh sách (Khu vực dự án).
 *
 * Cố ý KHÔNG dùng các class .gap-* của Bootstrap: theme Dashlite định nghĩa
 * .gap-2 là spacer với height: .75rem, nên đặt nó lên một flex container sẽ ép
 * chiều cao khối, nội dung tràn khỏi viền và đè lên panel tìm kiếm bên dưới.
 * Khoảng cách ở đây đặt bằng thuộc tính `gap` thật.
 */
.area-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid #e5e9f2;
    border-radius: 8px;
    background: #f8f9fc;
}

/* Chữ co giãn và tự xuống dòng; dưới 320px thì nút rơi xuống hàng dưới thay vì chèn nhau. */
.area-hint-text {
    flex: 1 1 320px;
    min-width: 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: #526484;
}

.area-hint-text p { margin: 0; }
.area-hint-text strong { display: block; margin-top: 4px; color: #364a63; }

.area-hint-action { flex: 0 0 auto; margin: 0; }
.area-hint-action .btn { white-space: nowrap; }

/*
 * Header trang Dự án: tiêu đề + chip trạng thái bên trái, cụm nút hành động bám phải.
 *
 * Khoảng cách đặt bằng thuộc tính `gap` thật thay vì class .gap-* của Bootstrap —
 * theme Dashlite định nghĩa .gap-1/.gap-2/.gap-3 là spacer có height cố định
 * (6/12/16px), nên đặt lên flex container sẽ ép chiều cao khối và làm nội dung
 * tràn ra ngoài, đè lên nhau.
 */
.project-hdr {
    gap: 10px 14px;
    row-gap: 10px;
}

.project-hdr > h3 { margin-bottom: 0; }

.hdr-chips { gap: 6px; }

/* margin-left:auto đẩy cả cụm về mép phải, và giữ 3 nút dính nhau thành một nhóm
   thay vì bị justify-content:space-between rải đều ra khắp hàng. */
.hdr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.hdr-actions .btn { white-space: nowrap; }

@media (max-width: 767.98px) {
    /* Hàng đã xếp dọc (crm-mobile.css), nên bỏ đẩy phải và cho cụm nút chiếm trọn bề ngang. */
    .hdr-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ------------------------------------------------------------------------- *
 * Gỡ va chạm tên class: .gap-* của Dashlite vs utility flex-gap của Bootstrap
 * ------------------------------------------------------------------------- *
 *
 * dashlite.css khai .gap-* HAI lần, ở hai chỗ khác nhau trong cùng file:
 *
 *   dòng ~8662   .gap-2 { gap: .75rem !important }   ← khoảng cách flex (Bootstrap)
 *   dòng ~31831  .gap-2 { height: .75rem }           ← size modifier cho component
 *                                                       spacer dọc `.gap`
 *
 * Rule thứ hai nằm sau nên nó thắng về `height`. Hệ quả: mọi
 * `<div class="d-flex gap-2">` viết theo phản xạ Bootstrap đều bị ép chiều cao
 * xuống đúng bằng giá trị gap (6/12/16px...), nội dung tràn ra ngoài khối và đè
 * lên phần tử bên dưới. Đã gặp ở ít nhất 3 màn hình trong repo, và đo được 5 khối
 * đang tràn chỉ riêng trên /admin/settings/customerstatuses.
 *
 * `height` chỉ có nghĩa khi đi kèm class `.gap` (spacer thật: display:block,
 * width:100%). Nên `:not(.gap)` gỡ chiều cao cho mọi cách dùng kiểu Bootstrap mà
 * KHÔNG đụng tới component spacer của theme — nếu sau này có ai dùng
 * `<div class="gap gap-2"></div>` thì nó vẫn cao 12px như thiết kế.
 *
 * Sửa ở một chỗ thay vì bỏ class ở từng view: các chỗ đang sai được vá hết, và
 * người viết view sau này gõ `d-flex gap-2` theo thói quen Bootstrap cũng không
 * dính bẫy nữa.
 */
.gap-0:not(.gap),
.gap-1:not(.gap),
.gap-2:not(.gap),
.gap-3:not(.gap),
.gap-4:not(.gap),
.gap-5:not(.gap),
.gap-gs:not(.gap),
.gap-sm:not(.gap),
.gap-md:not(.gap),
.gap-lg:not(.gap),
.gap-xl:not(.gap),
.gap-10px:not(.gap) {
    height: auto;
}