:root {
    --hexa-sidebar-width: 260px;
    --hexa-sidebar-collapsed-width: 68px;
    --hexa-topbar-min-height: 60px;
    /* Màu chủ đạo: giá trị mặc định; layout ghi đè theo người dùng (ThemePalette.Css). */
    --hexa-primary: #2f5c8a;
    --hexa-primary-rgb: 47,92,138;
    --hexa-primary-hover: #29517a;
    --hexa-primary-active: #25496e;
    --hexa-on-primary: #ffffff;
    --hexa-link: #2f5c8a;
    --hexa-link-hover: #264a6e;
    --hexa-primary-subtle: #e8edf3;
    --hexa-primary-subtle-text: #2f5c8a;
    --hexa-primary-border: #acbed0;
    --hexa-focus-border: #8ea5be;
    --hexa-primary-dark: #1f3c5a;
    /* Khung giao diện (sidebar + thanh tiêu đề): nền trung tính cố định, KHÔNG đổi theo màu chủ đạo. */
    --hexa-chrome-bg: #ffffff;
    --hexa-chrome-border: #e5e7eb;
    --hexa-chrome-text: #374151;
    --hexa-chrome-muted: #6b7280;
    --hexa-chrome-hover: #f3f4f6;
    --hexa-page-bg: #f5f6f8;
    --hexa-radius: .6rem;
    --hexa-transition: .2s ease-in-out;
    /* Font chữ: Lato (tự host – wwwroot/lib/lato), dự phòng font hệ thống. */
    --hexa-font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--hexa-font);
    --bs-font-sans-serif: var(--hexa-font);
}

body, button, input, select, textarea, .tooltip, .popover { font-family: var(--hexa-font); }
.apexcharts-canvas, .apexcharts-text, .apexcharts-legend-text, .apexcharts-tooltip { font-family: var(--hexa-font) !important; }

body {
    background-color: var(--hexa-page-bg);
    color: #1f2937;
}

/* Tắt animation trong lần vẽ đầu (trạng thái sidebar được áp từ localStorage) */
.hexa-preload *,
.hexa-preload *::before,
.hexa-preload *::after {
    transition: none !important;
}

.hexa-skip-link {
    position: absolute;
    z-index: 2000;
    top: .5rem;
    left: .5rem;
    padding: .5rem 1rem;
    background: #fff;
    border-radius: .375rem;
}

/* =========================================================
   Layout: sidebar + vùng nội dung
   ========================================================= */
.hexa-wrapper {
    display: flex;
    min-height: 100vh;
}

.hexa-sidebar {
    width: var(--hexa-sidebar-width);
    flex: 0 0 var(--hexa-sidebar-width);
    background: var(--hexa-chrome-bg);
    border-right: 1px solid var(--hexa-chrome-border);
    color: var(--hexa-chrome-text);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width var(--hexa-transition), flex-basis var(--hexa-transition), transform var(--hexa-transition);
    z-index: 1030;
}

.hexa-sidebar .brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: var(--hexa-topbar-min-height);
    padding: 0 1.4rem;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--hexa-chrome-border);
    color: #111827;
}

.hexa-sidebar .brand .nav-icon { color: var(--hexa-primary-subtle-text); }

.hexa-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--hexa-chrome-text);
    padding: .55rem 1rem;
    margin: .05rem .6rem;
    border-radius: .45rem;
    font-size: .92rem;
    white-space: nowrap;
}

.hexa-sidebar .nav-link:hover,
.hexa-sidebar .nav-link:focus-visible,
.hexa-sidebar .nav-link.active {
    color: #111827;
    background-color: var(--hexa-chrome-hover);
}

/* Menu đang chọn: chữ + vạch theo màu chủ đạo trên nền nhạt (tương phản đã kiểm ở ThemePalette). */
.hexa-sidebar .nav-link.active {
    color: var(--hexa-primary-subtle-text);
    background-color: var(--hexa-primary-subtle);
    box-shadow: inset 3px 0 0 var(--hexa-primary);
    font-weight: 600;
}

.hexa-sidebar .nav-icon {
    width: 1.25rem;
    flex: 0 0 1.25rem;
    text-align: center;
}

.hexa-sidebar .nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--hexa-transition);
}

.hexa-sidebar .nav-section-title {
    color: var(--hexa-chrome-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .9rem 1.4rem .25rem;
    white-space: nowrap;
}

.hexa-content {
    flex: 1 1 auto;
    min-width: 0; /* cho phép bảng co lại, không sinh thanh cuộn ngang toàn trang */
    display: flex;
    flex-direction: column;
}

/* =========================================================
   Sidebar thu gọn (desktop, >= 992px)
   ========================================================= */
@media (min-width: 992px) {
    .sidebar-collapsed .hexa-sidebar {
        width: var(--hexa-sidebar-collapsed-width);
        flex-basis: var(--hexa-sidebar-collapsed-width);
    }

    .sidebar-collapsed .hexa-sidebar .nav-text {
        opacity: 0;
        width: 0;
        pointer-events: none;
    }

    .sidebar-collapsed .hexa-sidebar .brand,
    .sidebar-collapsed .hexa-sidebar .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    /* Tiêu đề nhóm menu -> đường kẻ phân cách mảnh */
    .sidebar-collapsed .hexa-sidebar .nav-section-title {
        padding: .5rem 0 .25rem;
        margin: .4rem 1rem 0;
        border-top: 1px solid var(--hexa-chrome-border);
    }
}

/* =========================================================
   Mobile/tablet (< 992px): sidebar dạng drawer phủ lên nội dung
   ========================================================= */
@media (max-width: 991.98px) {
    .hexa-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        box-shadow: none;
        z-index: 1045;
    }

    .hexa-sidebar.show {
        transform: translateX(0);
        box-shadow: 0 0 24px rgba(0, 0, 0, .25);
    }

    .hexa-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 1040;
    }
}

/* =========================================================
   Topbar: [toggle] [TIÊU ĐỀ] [FILTER............] [actions] [user]
   ========================================================= */
.hexa-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    min-height: var(--hexa-topbar-min-height);
    padding: .5rem 1rem;
    background: var(--hexa-chrome-bg);
    border-bottom: 1px solid var(--hexa-chrome-border);
}

.hexa-sidebar-toggle {
    flex: 0 0 auto;
}

.hexa-page-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 32ch;
}

.hexa-page-title h1 {
    font-weight: 600;
}

.hexa-header-filter {
    flex: 1 1 320px;
    min-width: 0;
}

/* Form filter trong header: các ô co giãn, tự xuống dòng khi thiếu chỗ */
.hexa-header-filter form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.hexa-header-filter .form-control,
.hexa-header-filter .form-select {
    width: auto;
    flex: 1 1 140px;
    min-width: 120px;
}

.hexa-header-filter .hexa-filter-keyword {
    flex-basis: 220px;
}

.hexa-header-filter .btn {
    flex: 0 0 auto;
}

.hexa-header-actions {
    flex: 0 0 auto;
    display: flex;
    gap: .4rem;
}

.hexa-user {
    flex: 0 0 auto;
    margin-left: auto;
}

.hexa-user-name {
    max-width: 18ch;
}

/* Màn hình hẹp: filter chiếm nguyên một hàng riêng bên dưới tiêu đề */
@media (max-width: 1199.98px) {
    .hexa-header-filter {
        order: 10;
        flex-basis: 100%;
    }
}

@media (max-width: 575.98px) {
    .hexa-user-name {
        display: none;
    }

    .hexa-page-title {
        max-width: 50vw;
    }

    .hexa-header-filter .form-control,
    .hexa-header-filter .form-select {
        flex-basis: 100%;
    }
}

.hexa-main {
    padding: 1.25rem;
    flex: 1 1 auto;
}

/* =========================================================
   Cards / KPI
   ========================================================= */
.hexa-kpi-card {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.hexa-kpi-card .kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
}

.hexa-chart-card {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* =========================================================
   Misc
   ========================================================= */
.hexa-table-actions {
    white-space: nowrap;
}

.hexa-table-actions .btn {
    padding: .2rem .5rem;
}

.cursor-pointer {
    cursor: pointer;
}

/* ASP.NET Core validation summary: ẩn khi không có lỗi */
.validation-summary-valid {
    display: none;
}

/* =========================================================
   Bộ chọn chi nhánh (đầu sidebar)
   ========================================================= */
.hexa-branch-switcher {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--hexa-chrome-border);
}

.hexa-branch-btn {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--hexa-chrome-text);
    background: #f9fafb;
    border: 1px solid var(--hexa-chrome-border);
    padding: .4rem .65rem;
    white-space: nowrap;
    overflow: hidden;
}

.hexa-branch-btn:hover,
.hexa-branch-btn:focus-visible,
.hexa-branch-btn.show {
    color: #111827;
    background: var(--hexa-chrome-hover);
    border-color: var(--hexa-primary-border);
}

.hexa-branch-btn:disabled {
    color: var(--hexa-chrome-text);
    opacity: 1;
}

.hexa-branch-btn .nav-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hexa-branch-code {
    display: none;
    font-weight: 700;
    font-size: .75rem;
}

.hexa-branch-menu {
    max-height: 60vh;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .sidebar-collapsed .hexa-branch-switcher {
        padding: .5rem .35rem;
    }

    .sidebar-collapsed .hexa-branch-btn {
        justify-content: center;
        flex-direction: column;
        gap: .1rem;
        padding: .35rem 0;
    }

    .sidebar-collapsed .hexa-branch-btn::after {
        display: none;
    }

    .sidebar-collapsed .hexa-branch-btn .nav-icon {
        display: none;
    }

    .sidebar-collapsed .hexa-branch-code {
        display: block;
    }
}

/* =========================================================
   Chuông thông báo
   ========================================================= */
.hexa-bell-menu {
    width: min(360px, 92vw);
    max-height: 70vh;
    overflow-y: auto;
}

.hexa-bell-item {
    white-space: normal;
    border-bottom: 1px solid #f1f3f5;
    padding: .55rem 1rem;
}

.hexa-bell-item.unread {
    background: #eef4fb;
}

/* Chuông: chừa chỗ cho số đếm (badge nhô sang phải) để không bị nút tài khoản che; chữ trong hộp thông báo gọn hơn. */
.hexa-bell { margin-right: .75rem; }
.hexa-bell-menu { font-size: .8125rem; }
.hexa-bell-menu .nav-tabs { font-size: .8rem; }
.hexa-bell-item { padding: .45rem .85rem; line-height: 1.35; }
.hexa-bell-item .fw-semibold { font-size: .8125rem; }
.hexa-bell-item .small { font-size: .72rem; }

/* =========================================================
   Giai đoạn dự án (thẻ span trong project_step_all)
   ========================================================= */
.hexa-phases {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Mỗi nhóm giai đoạn (steps_group) một hàng */
.phase-row {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.phase-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 1.55rem;
    padding: 0 .45rem;
    border-radius: .4rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid transparent;
    cursor: default;
    line-height: 1;
    transition: transform .08s ease, box-shadow .08s ease;
}

.hexa-phases[data-step-dialog-url] .phase-status[data-step-id] { cursor: pointer; }
.hexa-phases[data-step-dialog-url] .phase-status[data-step-id]:hover,
.hexa-phases[data-step-dialog-url] .phase-status[data-step-id]:focus {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
    outline: none;
}

/* Mặc định (mới khởi tạo) */
.phase-status.status-none { background: #f1f3f5; color: #868e96; border-color: #dee2e6; }
/* Đang thực hiện */
.phase-status.status-doing { background: #ffe3ec; color: #c2255c; border-color: #fcc2d7; }
/* Hoàn thành */
.phase-status.status-done { background: #d0ebff; color: #1864ab; border-color: #a5d8ff; }
/* Bỏ qua */
.phase-status.status-skip { background: #fff3bf; color: #946800; border-color: #ffe066; text-decoration: line-through; text-decoration-thickness: 1px; }

.hexa-step-badge.status-none { background: #e9ecef; color: #495057; }
.hexa-step-badge.status-doing { background: #ffe3ec; color: #c2255c; }
.hexa-step-badge.status-done { background: #d0ebff; color: #1864ab; }
.hexa-step-badge.status-skip { background: #fff3bf; color: #946800; }

.hexa-step-btn { background: #fff; font-weight: 500; }
.step-btn-doing { border-color: #fcc2d7; color: #c2255c; }
.step-btn-done { border-color: #a5d8ff; color: #1864ab; }
.step-btn-skip { border-color: #ffd43b; color: #946800; }
.step-btn-reset { border-color: #868e96; color: #343a40; }
.hexa-step-btn:hover:not(:disabled) { background: #f8f9fa; }

/* Trạng thái tổng dự án (tên nhóm giai đoạn) */
.hexa-stage-badge { background: #ffe3ec; color: #c2255c; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.hexa-stage-badge.stage-done { background: #d0ebff; color: #1864ab; }

.hexa-step-log li + li { margin-top: .15rem; }

/* =========================================================
   Phê duyệt
   ========================================================= */
.hexa-approval-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.hexa-approval-steps li {
    border: 1px solid #dee2e6;
    border-radius: .4rem;
    padding: .35rem .6rem;
    font-size: .85rem;
    background: #fff;
}

.hexa-approval-steps li.state-done { border-color: #a3cfbb; background: #d1e7dd; }
.hexa-approval-steps li.state-current { border-color: #ffc107; background: #fff3cd; font-weight: 600; }
.hexa-approval-steps li.state-rejected { border-color: #f1aeb5; background: #f8d7da; }

/* Danh sách checkbox dài (khai báo bước duyệt, phân quyền) */
.hexa-check-scroll { max-height: 14rem; overflow-y: auto; }

/* Chuông thông báo: 2 tab */
.hexa-bell-menu .nav-tabs .nav-link { padding: .35rem .5rem; }

/* Tom Select trong form Bootstrap: cao bằng .form-select, dropdown nổi trên modal */
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0; }
.ts-dropdown { z-index: 1065; }
.datepicker.dropdown-menu { z-index: 1070 !important; }


.hexa-project-preview { background: #f6f8fb; border: 1px dashed #c9d3e0; border-radius: .5rem; padding: .5rem .75rem; }
.hexa-project-preview strong { letter-spacing: .01em; }


/* Giai đoạn căn giữa trong danh sách */
.hexa-phases-center { align-items: center; }
.hexa-phases-center .phase-row { justify-content: center; }

/* ---------- Ghi chú dự án ---------- */
.hexa-note {
    position: relative;
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 3px solid #74c0fc;
    border-radius: .45rem;
    padding: .4rem .55rem;
    margin-bottom: .4rem;
}
.hexa-note-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.hexa-note-author { font-weight: 600; font-size: .78rem; color: #343a40; }
.hexa-note-date { font-size: .72rem; color: #868e96; }
.hexa-note-actions { white-space: nowrap; opacity: .55; transition: opacity .1s; }
.hexa-note:hover .hexa-note-actions { opacity: 1; }
.hexa-note-actions .btn-link { font-size: .78rem; padding: 0 .15rem; text-decoration: none; }
.hexa-note-content { white-space: pre-line; font-size: .86rem; color: #212529; margin-top: .15rem; }
.hexa-notes-compact { max-height: 10rem; overflow-y: auto; min-width: 17rem; padding-right: .2rem; }
.hexa-notes-compact .hexa-note { padding: .3rem .45rem; margin-bottom: .3rem; }
.hexa-notes-compact .hexa-note-content { font-size: .8rem; }
.hexa-note-add { font-size: .8rem; text-decoration: none; }

/* ---------- Danh sách dự án ---------- */
.hexa-project-table thead th { white-space: nowrap; vertical-align: middle; }

/* Danh sách nhiều cột (dự án, công trình dự kiến): cùng kiểu bảng chung, chỉ thêm độ rộng tối thiểu cho ô tiền. */
.hexa-project-table td.hexa-money { min-width: 9.5rem; }
/* Danh sách dự án: chữ nhỏ hơn một chút (≈13px) cho gọn. */
table[data-hexa-grid="projects"] { font-size: .8125rem; }
table[data-hexa-grid="projects"] > thead th { font-size: .78rem; }
table[data-hexa-grid="projects"] .badge { font-size: .72rem; }
.hexa-money-head .hexa-head-month { font-size: .72rem; font-weight: 600; color: #2b8a3e; }
.hexa-money-head .hexa-head-total { font-size: .8rem; }
.hexa-money-month { font-size: .7rem; color: #2b8a3e; min-height: .9rem; line-height: 1; }
.hexa-row-links { margin-top: .25rem; display: flex; gap: .65rem; flex-wrap: wrap; }
.hexa-row-links a { font-size: .76rem; }
.hexa-status-card .badge.fs-6 { font-weight: 600; }

/* Tiến độ dự án (nhóm giai đoạn) – màu theo thứ tự nhóm */
.hexa-stage-badge.stage-c0 { background: #e7f5ff; color: #1971c2; }
.hexa-stage-badge.stage-c1 { background: #fff4e6; color: #d9480f; }
.hexa-stage-badge.stage-c2 { background: #ebfbee; color: #2b8a3e; }
.hexa-stage-badge.stage-c3 { background: #f3f0ff; color: #6741d9; }
.hexa-stage-badge.stage-c4 { background: #fff0f6; color: #c2255c; }
.hexa-stage-badge.stage-c5 { background: #e3fafc; color: #0c8599; }
.hexa-stage-badge.stage-c6 { background: #fff9db; color: #e67700; }
.hexa-stage-badge.stage-c7 { background: #f1f3f5; color: #495057; }
.hexa-status-final { font-weight: 700; letter-spacing: .03em; padding: .45em .7em; }

/* Form doanh số (nguồn / thương hiệu / thuế) */
.hexa-revenue-table { border: 1px solid var(--bs-border-color); }
.hexa-revenue-table thead th { text-align: center; }
.hexa-revenue-table td, .hexa-revenue-table th { vertical-align: middle; }
.hexa-revenue-table .hexa-revenue-sum th, .hexa-revenue-table .hexa-revenue-sum td { font-weight: 700; }

/* Biểu đồ doanh số (trang Tổng quan) */
.hexa-chart-panel { background: #f4f7ec; border: 1px solid #dfe6cf; border-radius: .5rem; padding: .75rem .75rem .25rem; }
.hexa-chart-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #3a3a38; margin-bottom: .25rem; }

/* Mọi bảng: kẻ đường cột, tiêu đề căn giữa. */
.table > :not(caption) > * > * { border-left: var(--bs-border-width) solid var(--bs-border-color); }
.table > :not(caption) > * > *:last-child { border-right: var(--bs-border-width) solid var(--bs-border-color); }
.table > thead th { text-align: center !important; vertical-align: middle; }
/* Bảng có cột khóa (hexa-grid): border-collapse: separate để đường kẻ đi theo ô khi cuộn (collapse làm mất kẻ ở ô sticky). */
table.hexa-grid-has-frozen { border-collapse: separate; border-spacing: 0; }
table.hexa-grid-has-frozen > :not(caption) > * > * { border-width: 0 1px 1px 0 !important; border-style: solid; border-color: var(--bs-border-color); }
table.hexa-grid-has-frozen > :not(caption) > * > *:first-child { border-left-width: 1px !important; }

/* Ngày bàn giao trên danh sách dự án */
.hexa-handover-cell { min-width: 13rem; }
.hexa-handover { display: flex; align-items: center; gap: .35rem; text-decoration: none; color: inherit; padding: .1rem 0; white-space: nowrap; }
.hexa-handover + .hexa-handover { border-top: 1px dashed #e3e6e4; }
.hexa-handover-date { font-variant-numeric: tabular-nums; font-size: .82rem; }
.hexa-handover-done .hexa-handover-date { color: #6c757d; }

/* Thông tin tổng hợp ở đầu trang chi tiết dự án */
.hexa-summary-status { min-width: 9rem; }
.hexa-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .5rem; flex: 1 1 32rem; }
.hexa-summary-item { border: 1px solid #e3e6e4; border-radius: .5rem; padding: .4rem .65rem; background: #fbfcfb; }
.hexa-summary-item .label { font-size: .75rem; color: #495057; }
.hexa-summary-item .value { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hexa-summary-item .hint { font-size: .7rem; color: #6c757d; }
.hexa-summary-balance.by-settlement { border-color: #8fd19e; background: #f1fbf3; }
.hexa-summary-balance.by-revenue { border-color: #ced4da; border-style: dashed; }

/* Ô chữ dài trong danh sách: tối đa 3 dòng, rê chuột xem đủ */
.hexa-cell-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 22rem; white-space: pre-line; }

/* Doanh số theo thương hiệu: thanh chọn thương hiệu + nút Thêm phía trên bảng */
.hexa-brand-toolbar {
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}
.hexa-brand-toolbar .hexa-brand-picker { width: 18rem; max-width: 100%; }
@media (max-width: 575.98px) {
    .hexa-brand-toolbar .hexa-brand-picker { width: auto; flex: 1 1 10rem; }
}

/* Dashboard – ô thống kê công trình dự kiến (bấm mở danh sách đã lọc) */
.hexa-prospect-kpi { transition: border-color .15s, box-shadow .15s; }
.hexa-prospect-kpi:hover, .hexa-prospect-kpi:focus-visible { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .15); }

/* =========================================================
   Popup: kéo di chuyển bằng thanh tiêu đề, popup xác nhận
   ========================================================= */
@media (min-width: 576px) {
    .modal .modal-header { cursor: move; user-select: none; }
    .modal .modal-header .btn-close { cursor: pointer; }
}
.modal-dialog.hexa-dragging { transition: none !important; }
.modal-dialog.hexa-dragging .modal-content { box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .25); }

.hexa-confirm-modal .modal-content { border: 0; border-radius: .75rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2); }
.hexa-confirm-modal .modal-header { border-bottom: 0; padding-bottom: 0; }
.hexa-confirm-modal .modal-footer { border-top: 0; padding-top: 0; }
.hexa-confirm-modal .modal-dialog { max-width: 440px; }
.hexa-confirm-icon {
    flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.hexa-confirm-danger { background: #fde8e8; color: #c62828; }
.hexa-confirm-primary { background: #e3eefc; color: #1a5fb4; }
.hexa-confirm-success { background: #e3f4ea; color: #1b7a43; }
.hexa-confirm-warning { background: #fff4d6; color: #a86b00; }
.hexa-confirm-message { font-size: .975rem; }

/* Thông báo ngắn sau thao tác AJAX; ô vừa cập nhật nháy nhẹ */
.hexa-flash-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1090; width: min(420px, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .5rem; }
.hexa-flash { margin: 0; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .15); }
@keyframes hexaCellFlash { from { background-color: #fff3bf; } to { background-color: transparent; } }
.hexa-cell-updated { animation: hexaCellFlash 1.6s ease-out; }

/* =========================================================
   Bộ lọc danh sách: ô từ khóa trên thanh tiêu đề + khung bộ lọc thả xuống
   ========================================================= */
.hexa-header-filter form.hexa-filter-form { position: relative; display: block; }
.hexa-filter-search { max-width: 520px; flex-wrap: nowrap; }
.hexa-filter-search .hexa-filter-keyword { min-width: 0; }
.hexa-filter-toggle { position: relative; }
.hexa-filter-toggle.active { color: var(--bs-primary); border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); }
.hexa-filter-count { position: absolute; top: -.45rem; right: -.45rem; font-size: .65rem; }

.hexa-filter-panel {
    position: absolute; top: calc(100% + .4rem); left: 0; z-index: 1045;
    width: min(560px, calc(100vw - 2rem));
    background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: .6rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .16);
    display: flex; flex-direction: column; max-height: min(80vh, 640px);
}
.hexa-filter-panel[hidden] { display: none; }
.hexa-filter-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem 1rem; border-bottom: 1px solid var(--bs-border-color);
}
.hexa-filter-panel-body {
    padding: .9rem 1rem; overflow: auto;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem;
}
.hexa-filter-panel-body .form-label { font-size: .825rem; margin-bottom: .25rem; color: var(--bs-secondary-color); }
.hexa-header-filter .hexa-filter-panel .form-control,
.hexa-header-filter .hexa-filter-panel .form-select { width: 100%; min-width: 0; flex: none; }
.hexa-saved-filters { padding: .6rem 1rem 0; }
.hexa-saved-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .3rem .15rem .6rem;
    border: 1px solid var(--bs-border-color); border-radius: 999px; background: var(--bs-tertiary-bg, #f8f9fa); font-size: .825rem;
}
.hexa-saved-chip a { text-decoration: none; }
.hexa-saved-chip .btn-close { font-size: .55rem; padding: .25rem; }
.hexa-filter-save { padding: 0 1rem .6rem; }
.hexa-filter-panel-foot {
    display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem 1rem;
    border-top: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg, #f8f9fa); border-radius: 0 0 .6rem .6rem;
}
.hexa-header-filter .hexa-filter-panel .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
    .hexa-filter-panel-body { grid-template-columns: 1fr; }
    .hexa-filter-panel { position: fixed; top: 4rem; left: 1rem; right: 1rem; width: auto; }
}

/* =========================================================
   Bảng danh sách dùng chung (hexa-grid.js): tùy chỉnh cột + xuất Excel
   ========================================================= */
.hexa-grid-toolbar { position: relative; display: flex; justify-content: flex-end; gap: .4rem; padding: .4rem .5rem; }
.card > .hexa-grid-toolbar { border-bottom: 1px solid var(--bs-border-color); }
.hexa-grid-menu {
    position: absolute; top: calc(100% - .1rem); right: .5rem; z-index: 1046; width: min(340px, calc(100vw - 2rem));
    background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: .6rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .16); display: flex; flex-direction: column; max-height: min(70vh, 560px);
}
.hexa-grid-menu[hidden] { display: none; }
.hexa-grid-menu-head { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem .3rem; }
.hexa-grid-menu-list { list-style: none; margin: 0; padding: .25rem .5rem; overflow: auto; }
.hexa-grid-menu-list li {
    display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: .4rem; border: 1px solid transparent;
    background: var(--bs-body-bg, #fff); cursor: grab; font-size: .875rem;
}
.hexa-grid-menu-list li:hover { background: var(--bs-tertiary-bg, #f8f9fa); }
.hexa-grid-menu-list li.fixed { cursor: default; opacity: .75; }
.hexa-grid-menu-list li.dragging { opacity: .4; }
.hexa-grid-menu-list li.drop-before { box-shadow: inset 0 2px 0 var(--bs-primary); }
.hexa-grid-menu-list li.drop-after { box-shadow: inset 0 -2px 0 var(--bs-primary); }
.hexa-grid-menu-list .form-check-input { margin: 0; flex: 0 0 auto; }
.hexa-grid-menu-list label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.hexa-grid-grip { color: var(--bs-secondary-color); width: 1rem; text-align: center; flex: 0 0 auto; }
.hexa-grid-move { display: inline-flex; gap: .1rem; opacity: 0; }
.hexa-grid-menu-list li:hover .hexa-grid-move, .hexa-grid-move:focus-within { opacity: 1; }
.hexa-grid-move button { border: 0; background: transparent; font-size: .65rem; color: var(--bs-secondary-color); padding: .1rem .25rem; line-height: 1; }
.hexa-grid-move button:hover { color: var(--bs-primary); }
.hexa-grid-menu-foot { border-top: 1px solid var(--bs-border-color); padding: .5rem 1rem; }

table.hexa-grid thead th { position: relative; }
table.hexa-grid th.hexa-grid-draggable { cursor: grab; }
table.hexa-grid th.dragging { opacity: .5; }
table.hexa-grid th.drop-before { box-shadow: inset 3px 0 0 var(--bs-primary) !important; }
table.hexa-grid th.drop-after { box-shadow: inset -3px 0 0 var(--bs-primary) !important; }
.hexa-col-resizer {
    position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none;
}
.hexa-col-resizer:hover, th.resizing .hexa-col-resizer { background: rgba(var(--bs-primary-rgb), .35); }

/* =========================================================
   MÀU CHỦ ĐẠO (theo người dùng) – áp nhất quán cho thành phần tương tác.
   Biến lấy từ :root (ThemePalette.Css). KHÔNG áp cho màu ngữ nghĩa trạng thái nghiệp vụ:
   success / warning / danger / info / secondary và .hexa-badge-processing giữ nguyên màu cố định.
   ========================================================= */
/* Link: Bootstrap dùng --bs-link-color-rgb / --bs-link-hover-color-rgb (đặt ở :root theo màu chủ đạo). */
.text-primary { color: var(--hexa-link) !important; }
.link-primary { color: var(--hexa-link) !important; text-decoration-color: rgba(var(--hexa-primary-rgb), .5) !important; }
.btn-link { --bs-btn-color: var(--hexa-link); --bs-btn-hover-color: var(--hexa-link-hover); --bs-btn-active-color: var(--hexa-link-hover); }

.btn-primary {
    --bs-btn-color: var(--hexa-on-primary); --bs-btn-bg: var(--hexa-primary); --bs-btn-border-color: var(--hexa-primary);
    --bs-btn-hover-color: var(--hexa-on-primary); --bs-btn-hover-bg: var(--hexa-primary-hover); --bs-btn-hover-border-color: var(--hexa-primary-hover);
    --bs-btn-active-color: var(--hexa-on-primary); --bs-btn-active-bg: var(--hexa-primary-active); --bs-btn-active-border-color: var(--hexa-primary-active);
    --bs-btn-disabled-color: var(--hexa-on-primary); --bs-btn-disabled-bg: var(--hexa-primary); --bs-btn-disabled-border-color: var(--hexa-primary);
    --bs-btn-focus-shadow-rgb: var(--hexa-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--hexa-link); --bs-btn-border-color: var(--hexa-primary);
    --bs-btn-hover-color: var(--hexa-on-primary); --bs-btn-hover-bg: var(--hexa-primary); --bs-btn-hover-border-color: var(--hexa-primary);
    --bs-btn-active-color: var(--hexa-on-primary); --bs-btn-active-bg: var(--hexa-primary-active); --bs-btn-active-border-color: var(--hexa-primary-active);
    --bs-btn-disabled-color: var(--hexa-link); --bs-btn-disabled-border-color: var(--hexa-primary);
    --bs-btn-focus-shadow-rgb: var(--hexa-primary-rgb);
}
.btn-check:checked + .btn-outline-primary { color: var(--hexa-on-primary); }

/* Nền / nhãn màu chủ đạo (không dùng cho trạng thái nghiệp vụ) */
.text-bg-primary { color: var(--hexa-on-primary) !important; background-color: var(--hexa-primary) !important; }
.badge.bg-primary, .bg-primary { background-color: var(--hexa-primary) !important; color: var(--hexa-on-primary); }
.border-primary { border-color: var(--hexa-primary) !important; }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--hexa-primary); --bs-progress-bar-color: var(--hexa-on-primary); }

/* Phân trang */
.pagination {
    --bs-pagination-color: var(--hexa-link); --bs-pagination-hover-color: var(--hexa-link-hover);
    --bs-pagination-focus-color: var(--hexa-link-hover); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--hexa-primary-rgb), .25);
    --bs-pagination-active-color: var(--hexa-on-primary); --bs-pagination-active-bg: var(--hexa-primary); --bs-pagination-active-border-color: var(--hexa-primary);
}

/* Checkbox, radio, switch, focus */
.form-check-input:checked { background-color: var(--hexa-primary); border-color: var(--hexa-primary); }
.form-check-input:checked[type=checkbox]:not([role=switch]) { --bs-form-check-bg-image: var(--hexa-check-img); }
.form-check-input:checked[type=radio] { --bs-form-check-bg-image: var(--hexa-radio-img); }
.form-check-input[type=checkbox]:indeterminate { background-color: var(--hexa-primary); border-color: var(--hexa-primary); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: var(--hexa-switch-focus-img); }
.form-switch .form-check-input:checked { --bs-form-switch-bg: var(--hexa-switch-on-img); }
.form-check-input:focus, .form-control:focus, .form-select:focus, .btn-check:focus-visible + .btn {
    border-color: var(--hexa-focus-border);
    box-shadow: 0 0 0 .25rem rgba(var(--hexa-primary-rgb), .25);
}
.form-range::-webkit-slider-thumb { background-color: var(--hexa-primary); }
.form-range::-moz-range-thumb { background-color: var(--hexa-primary); }
:focus-visible { outline-color: var(--hexa-primary); }

/* Tab / pill đang chọn */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--hexa-link); }
.nav-tabs .nav-link.active { box-shadow: inset 0 3px 0 var(--hexa-primary); font-weight: 600; }
.nav-link { --bs-nav-link-color: var(--hexa-link); --bs-nav-link-hover-color: var(--hexa-link-hover); }
.nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(var(--hexa-primary-rgb), .25); }
.nav-pills { --bs-nav-pills-link-active-color: var(--hexa-on-primary); --bs-nav-pills-link-active-bg: var(--hexa-primary); }

/* Dropdown, list-group: mục đang chọn */
.dropdown-menu { --bs-dropdown-link-active-color: var(--hexa-on-primary); --bs-dropdown-link-active-bg: var(--hexa-primary); }
.list-group { --bs-list-group-active-color: var(--hexa-on-primary); --bs-list-group-active-bg: var(--hexa-primary); --bs-list-group-active-border-color: var(--hexa-primary); }

/* Tom Select (ô chọn có tìm kiếm – thay Select2 trong ứng dụng) */
.ts-wrapper.focus .ts-control, .ts-control:focus { border-color: var(--hexa-focus-border) !important; box-shadow: 0 0 0 .25rem rgba(var(--hexa-primary-rgb), .25) !important; }
.ts-dropdown .active { background-color: var(--hexa-primary-subtle); color: var(--hexa-primary-subtle-text); }
.ts-dropdown .option.selected:not(.active) { color: var(--hexa-primary-subtle-text); font-weight: 600; }
.ts-wrapper.multi .ts-control > .item { background: var(--hexa-primary-subtle); color: var(--hexa-primary-subtle-text); border: 1px solid var(--hexa-primary-border); }
.ts-wrapper.multi .ts-control > .item.active { background: var(--hexa-primary); color: var(--hexa-on-primary); border-color: var(--hexa-primary); }
.ts-dropdown .create:hover, .ts-dropdown .create.active { color: var(--hexa-primary-subtle-text); }
/* select gốc: mục đã chọn trong danh sách mở rộng (multiple) */
select[multiple] option:checked { background: var(--hexa-primary-subtle) linear-gradient(0deg, var(--hexa-primary-subtle), var(--hexa-primary-subtle)); color: var(--hexa-primary-subtle-text); }

/* Ô chọn ngày (bootstrap-datepicker) */
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.active {
    background-image: none !important; background-color: var(--hexa-primary) !important; border-color: var(--hexa-primary) !important;
    color: var(--hexa-on-primary) !important; text-shadow: none !important;
}
.datepicker table tr td.today { background-image: none !important; background-color: var(--hexa-primary-subtle) !important; color: var(--hexa-primary-subtle-text) !important; }

/* Bảng dùng chung (hexa-grid), bộ lọc, toast */
.hexa-grid-toolbar .btn-outline-secondary[aria-expanded="true"] { color: var(--hexa-link); border-color: var(--hexa-primary); background: var(--hexa-primary-subtle); }
.hexa-filter-toggle.active { color: var(--hexa-link); border-color: var(--hexa-primary); background: var(--hexa-primary-subtle); }

/* Trạng thái nghiệp vụ "Đang thực hiện / Đang xử lý": màu cố định, KHÔNG theo màu chủ đạo. */
.hexa-badge-processing { background-color: #1c7ed6 !important; color: #fff !important; }

/* Cài đặt cá nhân: ô màu gợi ý */
.hexa-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.hexa-swatch { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); cursor: pointer; padding: 0; }
.hexa-swatch:hover { transform: scale(1.08); }
.hexa-swatch.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #212529; }
.hexa-swatch:focus-visible { outline: 3px solid #212529; outline-offset: 2px; }

/* Phân trang gọn: dưới bảng (mặc định) hoặc trên thanh công cụ bảng (cùng dòng Cột / Xuất Excel). */
.hexa-pager { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.hexa-grid-toolbar { align-items: center; flex-wrap: nowrap; }
.hexa-grid-toolbar > .btn { flex: 0 0 auto; white-space: nowrap; }
.hexa-grid-toolbar .hexa-pager { margin: 0 auto 0 0; justify-content: flex-start; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.hexa-grid-toolbar .hexa-pager .pagination { flex-wrap: nowrap; }
@media (max-width: 575.98px) {
    .hexa-grid-toolbar .hexa-pager-info { display: none; }
}

/* =========================================================
   GIAO DIỆN CHUNG – thẻ, bảng: một kiểu cho mọi danh sách (theo bảng Khách hàng).
   ========================================================= */
.card { border: 1px solid var(--hexa-chrome-border); border-radius: var(--hexa-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card > .card-header { background: #fff; border-bottom-color: var(--hexa-chrome-border); }
.card > .card-header:first-child { border-radius: var(--hexa-radius) var(--hexa-radius) 0 0; }
.btn { border-radius: .45rem; }
.form-control, .form-select { border-color: #d1d5db; }

/* Tiêu đề bảng: nền xám nhạt, chữ đậm vừa – áp cho mọi bảng (có hay không .table-light). */
.table > thead th, .table > thead td {
    background-color: #f8f9fa;
    color: #374151;
    font-weight: 600;
    font-size: .85rem;
    border-bottom-color: var(--hexa-chrome-border);
}
.table { --bs-table-hover-bg: rgba(var(--hexa-primary-rgb), .04); border-color: var(--hexa-chrome-border); }
.table > :not(caption) > * > * { border-color: var(--hexa-chrome-border); }
.table-responsive { border-radius: inherit; }
.card > .table-responsive:last-child > .table, .card > .table-responsive:last-child { border-bottom-left-radius: var(--hexa-radius); border-bottom-right-radius: var(--hexa-radius); }

/* Khung bảng danh sách dài: tiêu đề bảng dính khi cuộn dọc trong khung. */
.hexa-project-table { max-height: calc(100vh - 12rem); overflow: auto; }
.hexa-project-table thead { position: sticky; top: 0; z-index: 4; }

/* Khóa cột trái (hexa-grid): biểu tượng ghim ở tiêu đề cột khóa + nút ghim trong menu Cột. */
/* Biểu tượng ghim chỉ ở cột khóa CUỐI (khóa 4 cột đầu → ghim ở cột thứ 4). */
table.hexa-grid thead th.hexa-frozen-last::before {
    content: "\f08d"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: .2rem; left: .3rem; font-size: .62rem; color: var(--hexa-primary-subtle-text); opacity: .85;
}
.hexa-grid-pin { border: 0; background: transparent; color: #adb5bd; padding: .1rem .3rem; font-size: .75rem; line-height: 1; border-radius: .3rem; transform: rotate(45deg); }
.hexa-grid-pin:hover { color: var(--hexa-primary-subtle-text); background: var(--hexa-primary-subtle); }
.hexa-grid-pin.on { color: var(--hexa-primary-subtle-text); transform: none; }
.hexa-grid-menu-list li.frozen { background: var(--hexa-primary-subtle); }
.hexa-grid-freeze-info { color: var(--hexa-chrome-muted); }

/* Bộ lọc đặt trên thanh công cụ bảng (cùng dòng Cột / Xuất Excel). */
.hexa-grid-slot-filter { display: flex; align-items: center; gap: .4rem; margin-right: auto; min-width: 0; flex-wrap: nowrap; }
.hexa-grid-slot-filter .form-select { width: auto; max-width: 16rem; min-width: 8rem; }
@media (max-width: 575.98px) { .hexa-grid-toolbar:has(.hexa-grid-slot-filter) { flex-wrap: wrap; } }

/* Bộ lọc đã lưu: ngôi sao = bộ lọc mặc định khi mở trang */
.hexa-saved-star { border: 0; background: transparent; padding: 0 .15rem; min-width: 1rem; min-height: 1rem; color: #adb5bd; font-size: .8rem; line-height: 1; }
.hexa-saved-star:hover { color: #e8a200; }
.hexa-saved-star.on { color: #e8a200; }
.hexa-saved-chip.is-default { border-color: #f0c040; background: #fff8e1; }

/* Phân loại dự án: nhãn viền + nền nhạt, màu theo loại (cố định, không theo màu chủ đạo) */
.hexa-type-badge { font-weight: 600; border: 1px solid currentColor; background: #fff; white-space: normal; text-align: left; line-height: 1.25; }
.hexa-type-c0 { color: #1864ab; background: #e7f5ff; }
.hexa-type-c1 { color: #a61e4d; background: #fff0f6; }
.hexa-type-c2 { color: #2b8a3e; background: #ebfbee; }
.hexa-type-c3 { color: #5f3dc4; background: #f3f0ff; }
.hexa-type-c4 { color: #c2410c; background: #fff4e6; }
.hexa-type-c5 { color: #0b7285; background: #e3fafc; }
.hexa-type-c6 { color: #8f5b00; background: #fff9db; }
.hexa-type-c7 { color: #495057; background: #f1f3f5; }

/* Sắp xếp khi bấm tiêu đề cột */
table.hexa-grid thead th.hexa-sortable { cursor: pointer; user-select: none; }
table.hexa-grid thead th.hexa-sortable:hover { background-color: #eef1f5; }
table.hexa-grid thead th.hexa-sortable::after { content: "\2195"; margin-left: .3rem; font-size: .75em; color: #adb5bd; font-weight: 400; }
table.hexa-grid thead th.hexa-sort-asc::after { content: "\25B2"; color: var(--hexa-primary-subtle-text); }
table.hexa-grid thead th.hexa-sort-desc::after { content: "\25BC"; color: var(--hexa-primary-subtle-text); }
.hexa-text-processing { color: #1c7ed6 !important; }

/* =========================================================
   Tiến độ công việc (Gantt) – DHTMLX Gantt 10 Community (MIT), tự lưu ở wwwroot/lib/dhtmlx-gantt.
   Font dùng font hệ thống (đã bỏ font Inter tải từ Google trong dhtmlxgantt.css).
   ========================================================= */
:root { --hexa-gantt-off: #eef0f3; }
.hexa-gantt.is-busy { cursor: progress; }
.hexa-gantt.is-busy .hexa-gantt-body { opacity: .7; pointer-events: none; }
.hexa-gantt-body { overflow: hidden; }
.hexa-gantt-chart { width: 100%; min-height: 360px; }
.hexa-gantt .gantt_container, .hexa-gantt .gantt_tooltip, .gantt_tooltip {
    --dhx-gantt-font-family: var(--hexa-font); --dhx-gantt-font-size: 12px; font-family: var(--hexa-font); }
.hexa-gantt .gantt_container { border: 0; }
.hexa-gantt .gantt_grid_head_cell { font-weight: 600; font-size: .74rem; color: var(--bs-secondary-color); }
.hexa-gantt .gantt_grid_data .gantt_cell { font-size: .8rem; }
.hexa-gantt .gantt_row.hx-head .gantt_cell[data-column-name="text"] { font-weight: 600; }
.hexa-gantt .gantt_row.gantt_selected, .hexa-gantt .gantt_task_row.gantt_selected { background: var(--hexa-primary-subtle); }
.hexa-gantt .gantt_grid .badge { font-size: .68rem; font-weight: 600; }
.hexa-gantt .gantt_scale_cell .hx-d { display: block; line-height: 1.1; font-weight: 600; }
.hexa-gantt .gantt_scale_cell .hx-w { display: block; line-height: 1.1; font-size: .62rem; color: var(--bs-secondary-color); }
.hexa-gantt .gantt_scale_line { line-height: 1.2; }
.hexa-gantt .gantt_scale_line:last-child .gantt_scale_cell { display: flex; flex-direction: column; justify-content: center; }
/* Ngày nghỉ / hôm nay (chế độ Ngày) */
.hexa-gantt .gantt_task_cell.hx-off, .hexa-gantt .gantt_scale_cell.hx-off { background: var(--hexa-gantt-off); }
.hexa-gantt .gantt_task_cell.hx-today, .hexa-gantt .gantt_scale_cell.hx-today { background: rgba(42,120,214,.12); }
/* Thanh việc theo trạng thái: 0 mới, 1 đang làm, 2 tạm dừng, 3 chờ xác nhận, 4 xong, 5 hủy */
.hexa-gantt .gantt_task_line { background: #a9c5ea; border-color: #7fa7dc; color: #10233f; border-radius: 3px; }
.hexa-gantt .gantt_task_line .gantt_task_progress { background: #2a78d6; opacity: .55; }
.hexa-gantt .gantt_task_line .gantt_task_content { color: #10233f; font-size: .74rem; }
.hexa-gantt .gantt_task_line.hx-st4 { background: #b7e1c7; border-color: #7cc49a; }
.hexa-gantt .gantt_task_line.hx-st4 .gantt_task_progress { background: #198754; }
.hexa-gantt .gantt_task_line.hx-st2 { background: #ffe8a3; border-color: #f0c64d; }
.hexa-gantt .gantt_task_line.hx-st2 .gantt_task_progress { background: #f59f00; }
.hexa-gantt .gantt_task_line.hx-st3 .gantt_task_progress { background: #0aa2c0; }
.hexa-gantt .gantt_task_line.hx-st5 { background: #e9ecef; border-color: #ced4da; }
.hexa-gantt .gantt_task_line.hx-st5 .gantt_task_progress { background: #adb5bd; }
.hexa-gantt .gantt_task_line.hx-st5 .gantt_task_content { text-decoration: line-through; color: #6c757d; }
.hexa-gantt .gantt_task_line.hx-frame { background: rgba(42,120,214,.06); border: 1.25px dashed #6c757d; }
.hexa-gantt .gantt_task_line.hx-frame .gantt_task_progress { background: rgba(42,120,214,.28); opacity: 1; }
.hexa-gantt .gantt_task_line.hx-summary { background: #343a40; border-color: #212529; }
.hexa-gantt .gantt_task_line.hx-summary .gantt_task_progress { background: #000; opacity: .6; }
.hexa-gantt .gantt_task_line.hx-summary .gantt_task_content { color: #fff; }
.hexa-gantt .gantt_task_line.gantt_milestone { background: #212529; border-color: #212529; }
.hexa-gantt .gantt_task_line.hx-overdue { box-shadow: 0 0 0 1.5px #c92a2a; }
.hexa-gantt .gantt_task_line.gantt_selected { box-shadow: 0 0 0 2.5px var(--hexa-primary); }
.hexa-gantt .gantt_task_line.hx-locked .gantt_task_drag, .hexa-gantt .gantt_task_line.hx-moveonly .gantt_task_drag,
.hexa-gantt .gantt_task_line.hx-locked .gantt_task_progress_drag, .hexa-gantt .gantt_task_line.hx-moveonly .gantt_task_progress_drag { display: none !important; }
.hexa-gantt .gantt_task_line.hx-locked .gantt_link_control { display: none !important; }
.hexa-gantt .gantt_task_line.hx-locked { cursor: default; }
.hexa-gantt .gantt_side_content { font-size: .74rem; }
/* Bảng "Hiển thị cột" + tiêu đề cột (cùng kiểu bảng danh sách) */
.hexa-gantt-colmenu { position: relative; }
.hexa-gantt-colmenu .hexa-grid-menu { left: 0; right: auto; top: calc(100% + .25rem); }
.hexa-gantt-colmenu [data-grid-columns][aria-expanded="true"] { color: var(--hexa-link); border-color: var(--hexa-primary); background: var(--hexa-primary-subtle); }
.hexa-gantt .gantt_grid_head_cell { position: relative; }
.hexa-gantt .gantt_grid_head_cell.hexa-grid-draggable { cursor: grab; }
.hexa-gantt .gantt_grid_head_cell.dragging { opacity: .5; }
.hexa-gantt .gantt_grid_head_cell.drop-before { box-shadow: inset 3px 0 0 var(--bs-primary); }
.hexa-gantt .gantt_grid_head_cell.drop-after { box-shadow: inset -3px 0 0 var(--bs-primary); }
.hexa-gantt .gantt_grid_head_cell .hexa-col-resizer { right: 0; }
.hexa-gantt .gantt_grid_head_cell.resizing .hexa-col-resizer { background: rgba(var(--bs-primary-rgb), .35); }
.hexa-gantt-chart { position: relative; }
.hexa-gantt-resize-guide { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bs-primary); z-index: 20; pointer-events: none; }
/* Phụ thuộc vi phạm */
.hexa-gantt .gantt_task_link.hx-link-violated .gantt_line_wrapper div { background-color: #c92a2a; }
.hexa-gantt .gantt_task_link.hx-link-violated .gantt_link_arrow { border-color: #c92a2a; }
@media (max-width: 767.98px) {
    .hexa-gantt-chart { min-height: 420px; }
}