header{
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8ecf1 !important;
}
.top-navbar{
    border-bottom: 1px solid #eef1f6 !important;
}


/* Small stat cards */
.modern-card{
    background:#ffffff !important;
    /* padding:20px; */
    border: 1px solid #e2e8f0 !important;
    border-radius: .25rem !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}

.modern-card h4{
    color: #727272 !important;
    font-weight: 500 !important;
}

.modern-card h6{
    color: #383838 !important;
    font-weight: 500 !important;
}


.balance-card{
    background: linear-gradient(135deg, rgb(var(--bs-primary-rgb)), color-mix(in srgb, rgb(var(--bs-primary-rgb)) 62%, white 38%));
    position:relative;
    overflow:hidden;
}
.balance-card h2,
.balance-card h5,
.balance-card h6{
    color: #FFFFFF !important;
}
.balance-card small{
    color: color-mix(in srgb, rgb(var(--bs-primary-rgb)) 32%, black) !important;
    font-weight: 500 !important;
    font-size: 13px;
}

.balance-card::after{
    content:'';
    position:absolute;
    right:-40px;
    top:-40px;
    width:150px;
    height:150px;
    background:rgba(255,255,255,.25);
    border-radius:50%;
}
.balance-card .btn{
    background:rgba(244, 244, 244, 0.38) !important;
    border: 1px solid rgba(244, 244, 244, 0.38) !important;
    color: color-mix(in srgb, rgb(var(--bs-primary-rgb)) 35%, black) !important;
    font-weight: 700 !important;
    --bs-btn-border-radius: .25rem;
    border-radius: .25rem !important;
    height: 31px;
    min-height: 31px;
    padding: 0 .65rem !important;
    font-size: .78rem !important;
    line-height: 1.2;
}
.balance-card .btn:hover{
    background: color-mix(in srgb, rgb(var(--bs-primary-rgb)) 78%, black) !important;
    color: #fff !important;
}

.balance-sub{
    background:rgba(244, 244, 244, 0.38);
    border-radius:.2rem;
    border: 1px solid rgba(244, 244, 244, 0.38);
}

.balance-sub i{
    background: linear-gradient(135deg, color-mix(in srgb, rgb(var(--bs-primary-rgb)) 45%, black), rgb(var(--bs-primary-rgb)));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.add-bal-cart{
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid white !important;
}

/* Stat tiles: clean card with colored left-accent + soft icon bg */
.dash-stat-tile {
    background: #fff !important;
    border-left: 3px solid transparent !important;
    border-radius: .25rem !important;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.dash-stat-tile:hover {
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2) !important;
}
.dash-stat-tile h4, .dash-stat-tile h6 {
    color: var(--bs-emphasis-color, #0f172a) !important;
}
/* Waiting action — slate/gray */
.waiting-action-card {
    border-left-color: #64748b !important;
}
.waiting-action-card .avtar {
    background: rgba(100,116,139,0.12) !important;
    color: #64748b !important;
}
/* In-process — amber */
.inprocess-card {
    border-left-color: #f59e0b !important;
}
.inprocess-card .avtar {
    background: rgba(245,158,11,0.12) !important;
    color: #d97706 !important;
}
/* Success — emerald */
.success-card {
    border-left-color: #10b981 !important;
}
.success-card .avtar {
    background: rgba(16,185,129,0.12) !important;
    color: #059669 !important;
}
/* Rejected — rose */
.rejected-card {
    border-left-color: #ef4444 !important;
}
.rejected-card .avtar {
    background: rgba(239,68,68,0.12) !important;
    color: #dc2626 !important;
}
/* Total orders — primary gradient */
.total-order-card {
    background: linear-gradient(135deg, rgb(var(--bs-primary-rgb)), color-mix(in srgb, rgb(var(--bs-primary-rgb)) 62%, white 38%)) !important;
    border-left-color: transparent !important;
}
.total-order-card h4, .total-order-card h6 {
    color: #fff !important;
}
.total-order-card .avtar {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
/* Dark mode overrides */
[data-pc-theme="dark"] .dash-stat-tile {
    background: rgba(30,41,59,0.7) !important;
    border-color: rgba(148,163,184,0.1);
}
[data-pc-theme="dark"] .dash-stat-tile h4,
[data-pc-theme="dark"] .dash-stat-tile h6 {
    color: #e2e8f0 !important;
}
[data-pc-theme="dark"] .waiting-action-card { border-left-color: #94a3b8 !important; }
[data-pc-theme="dark"] .waiting-action-card .avtar { background: rgba(148,163,184,0.14) !important; color: #94a3b8 !important; }
[data-pc-theme="dark"] .inprocess-card { border-left-color: #fbbf24 !important; }
[data-pc-theme="dark"] .inprocess-card .avtar { background: rgba(251,191,36,0.14) !important; color: #fbbf24 !important; }
[data-pc-theme="dark"] .success-card { border-left-color: #34d399 !important; }
[data-pc-theme="dark"] .success-card .avtar { background: rgba(52,211,153,0.14) !important; color: #34d399 !important; }
[data-pc-theme="dark"] .rejected-card { border-left-color: #f87171 !important; }
[data-pc-theme="dark"] .rejected-card .avtar { background: rgba(248,113,113,0.14) !important; color: #f87171 !important; }


                
.rounded-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}

/* Quick cards */
.quick-card{
    background:#fff;
    padding:14px 18px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.quick-icon{
    width:32px;
    height:32px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:14px;
}

/* Chỉ ẩn panel tab cấp 1 (con trực tiếp của #content), khớp với JS .customer-m-menu-content > .section —
   descendant .section sẽ ẩn nhầm markup lồng (SVG/HTML) có class token "section". */
.customer-m-menu-content > .section {
    display: none;
}
.customer-m-menu{
    width:250px;
    display: block;
}
.customer-m-menu-content{
    width: calc(100% - 250px);
    min-height: 560px;
    overflow: auto;
}
.dash-v2-shell .dash-v2-aside.customer-m-menu {
    width: var(--dash-aside-w, 228px);
}
.dash-v2-shell .dash-v2-main.customer-m-menu-content {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* Sidebar dashboard kiểu cũ (không dùng .dash-sidebar-nav — tránh đè lên pill/mẫu mới).
   .dash-menu-square: menu vuông full khung (dashboard v2), không bo góc active. */
.customer-m-menu#menu:not(.dash-sidebar-nav):not(.dash-menu-square) .active {
    font-weight: 700;
    border-top-left-radius: 25px !important;
    border-bottom-left-radius: 25px !important;
    border-top: 1px solid #e7e7e7 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    border-left: 1px solid #e7e7e7 !important;
    background: #f5f3fa;
    margin-left: 1px;
}

.customer-m-menu#menu:not(.dash-sidebar-nav):not(.dash-menu-square) button{
    width: 100%;
    padding: 12px 20px 12px 20px;
    text-align: left;
    border: 0 !important;
    font-weight: 500;
    border-top: 1px solid #f5f4fa !important;
    border-bottom: 1px solid #f5f4fa !important;
    border-left: 1px solid #f5f4fa !important;
    margin-left: 1px;
}

.customer-m-menu#menu:not(.dash-sidebar-nav):not(.dash-menu-square) button:focus,
.customer-m-menu#menu:not(.dash-sidebar-nav):not(.dash-menu-square) button:active,
.customer-m-menu#menu:not(.dash-sidebar-nav):not(.dash-menu-square) button:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}
.customer-m-menu#menu:not(.dash-sidebar-nav):not(.dash-menu-square) button,
.customer-m-menu#menu:not(.dash-sidebar-nav):not(.dash-menu-square) .btn {
    transition: none !important;
}
.dash-v2-shell .dash-sidebar-nav#menu .dash-nav-item:focus,
.dash-v2-shell .dash-sidebar-nav#menu .dash-nav-item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.35);
}
.customer-m-menu-content label{
    color: #383838 !important;
    font-weight: 600 !important;
}
.api-copy-btn{
    background: #fafafd;
    border-top: 1px solid #d3dae1;
    border-bottom: 1px solid #d3dae1;
    border-right: 1px solid  #d3dae1;
    border-left: 0 !important;
    color: var(--bs-primary) !important;
}
.api-copy-btn:hover{
    background: #fafafd;
    border-top: 1px solid #d3dae1;
    border-bottom: 1px solid #d3dae1;
    border-right: 1px solid  #d3dae1;
    color: var(--bs-primary);
}
.api-copy-btn:active,
.api-copy-btn:focus,
.api-copy-btn:focus-visible {
    background: #fafafd !important;
    border-top: 1px solid #d3dae1 !important;
    border-bottom: 1px solid #d3dae1 !important;
    border-right: 1px solid  #d3dae1 !important;
    color: var(--bs-primary) !important;
}


.service-info-card{
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;

}
.service-order-card, .service-tag-card, .service-article-card{
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;

}

.service-info-title{
    font-weight: 500;
    font-size: 18px;
}
.service-price{
    font-weight: 600;
    font-size: 20px;
}
.service-info-icon{
    background: rgba(227, 227, 227, 1) !important;
    border: 0 !important;
}

.service-img{
    width: 130px;
}
.service-title{
    width: calc(100% - 130px);
}
.page-title{
    color: rgba(48, 48, 48, 1);
    font-size: 18px;
    font-weight: 600;
}
.service-tag{
    font-size: 13px !important;
}
.medium-height{
    min-height: 515px;
}
.maximum-height{
    min-height: 733px;
}
.dropdown-menu{
    width: 100%;
}
.modal-open-force {
    overflow: hidden !important;
    height: 100%;
}

/*  */

.invoice-container {
    max-width: 600px;
    margin: 5px auto;
    background: #ffffff;
    padding: 20px;
}

.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6c757d;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.info-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #212529;
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-header {
    background-color: #f0f0f0 !important;
    border-bottom: none;
}

.table-header th {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    padding-top: 12px;
    padding-bottom: 12px;
    border: none;
}

.table-row td {
    font-size: 0.9rem;
    padding-top: 15px;
    padding-bottom: 15px;
    vertical-align: middle;
}

.totals-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    width: 120px;
}

.totals-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: #212529;
    text-align: right;
}












@media (max-width: 1399px) {
    .resource-tab-pane .btn{
        font-size: 12px !important;
    }
}
@media (max-width: 1199px) {
    .place-order, .place-order-loader{
        max-width: 100% !important;
    }
    .medium-height{
        min-height: auto;
    }
    .maximum-height{
        min-height: auto;
    }
}
@media (max-width: 991.98px) {
    .dash-v2-shell .dash-v2-layout {
        flex-direction: column !important;
        min-height: 0;
    }
    .dash-v2-shell .dash-v2-panel {
        border-radius: 12px;
    }
    .dash-v2-shell .dash-v2-aside.customer-m-menu {
        width: 100% !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        padding: 0.25rem 0.25rem 0 !important;
    }
    .dash-v2-shell .dash-v2-main.customer-m-menu-content {
        min-height: 0;
    }
    .customer-m-menu{
        display: flex;
        gap: 10px;
        overflow: auto;
        width: 100%;
        border-bottom: 2px solid var(--bs-border-color);
        border-bottom-left-radius: 0 !important;
        border-top-left-radius: 0 !important;
    }
    .customer-m-menu .btn{
        display: inline-flex;
    }
    /* Chỉ menu cũ (horizontal tabs): .dash-sidebar-nav dùng .dash-nav-ic cố định — max-content làm lệch/cắt icon */
    .customer-m-menu:not(.dash-sidebar-nav) span {
        width: max-content !important;
    }
    .customer-m-menu#menu:not(.dash-sidebar-nav):not(.dash-menu-square) .active{
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 2px solid var(--bs-primary) !important;

    }
    .dash-v2-shell .dash-v2-aside.customer-m-menu#menu.dash-sidebar-nav,
    .customer-m-menu#menu.dash-sidebar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: space-around;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        gap: 0.15rem;
        padding-bottom: 0.35rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .dash-v2-shell .dash-v2-aside.customer-m-menu#menu.dash-sidebar-nav .dash-nav-item--desktop-only,
    .customer-m-menu#menu.dash-sidebar-nav .dash-nav-item--desktop-only {
        display: none !important;
    }
    .dash-v2-shell .dash-v2-aside.customer-m-menu#menu.dash-sidebar-nav .pc-mobile-icon-fa,
    .customer-m-menu#menu.dash-sidebar-nav .pc-mobile-icon-fa {
        display: none !important;
    }
    .dash-v2-shell .dash-v2-aside.customer-m-menu#menu.dash-sidebar-nav .dash-nav-item,
    .customer-m-menu#menu.dash-sidebar-nav .dash-nav-item {
        flex: 1 1 0;
        width: auto;
        min-width: 2.75rem;
        max-width: 4.25rem;
        flex-shrink: 0;
        box-sizing: border-box;
        border-left: 0 !important;
        border-bottom: 2px solid transparent;
        padding: 0.45rem 0.35rem;
    }
    .dash-v2-shell .dash-v2-aside.customer-m-menu#menu.dash-sidebar-nav .dash-nav-item .dash-nav-ic,
    .customer-m-menu#menu.dash-sidebar-nav .dash-nav-item .dash-nav-ic {
        width: 1.5rem !important;
        height: 1.5rem !important;
        min-width: 1.5rem !important;
        min-height: 1.5rem !important;
        flex-shrink: 0 !important;
        box-sizing: border-box;
    }
    .dash-v2-shell .dash-v2-aside.customer-m-menu#menu.dash-sidebar-nav .dash-nav-item .dash-nav-ic i.bi,
    .customer-m-menu#menu.dash-sidebar-nav .dash-nav-item .dash-nav-ic i.bi {
        line-height: 1 !important;
    }
    .dash-v2-shell .dash-v2-aside.customer-m-menu#menu.dash-sidebar-nav .dash-nav-item.active,
    .customer-m-menu#menu.dash-sidebar-nav .dash-nav-item.active {
        border-bottom: 2px solid var(--bs-primary) !important;
        border-radius: 8px !important;
    }
    .customer-m-menu-content{
        width: 100%;
    }
    .service-img{
        width: 100%;
    }
    .service-title{
        width: 100%;
    }
}

/* Telegram tab: QR đọc được trên nền tối */
.telegram-bot-qr-box {
    background: #fff !important;
    border: 1px solid var(--bs-border-color);
}
.telegram-bot-qr-svg-wrap svg {
    display: block;
    max-width: 168px;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
[data-pc-theme="dark"] .telegram-bot-qr-box {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Customer dashboard (/client/dashboard): avoid capsule/pill shapes from theme --bs-btn-border-radius (~20px) */
#dashboard-tab .btn {
    --bs-btn-border-radius: .25rem;
    border-radius: .25rem !important;
}
.customer-m-menu-content .table .badge:not(.rounded-pill) {
    --bs-badge-border-radius: .2rem;
    border-radius: .2rem !important;
}

/* Customer dashboard API tab: tắt DHRU/PHP = làm mờ nội dung, không thu gọn */
#api-tab .api-dhru-column.api-access-column-off .api-section {
    opacity: 0.48;
    filter: grayscale(0.25);
    pointer-events: none;
    transition: opacity 0.2s ease, filter 0.2s ease;
}
#api-tab .api-docs-section.php-access-panel-off .api-section-php {
    opacity: 0.48;
    filter: grayscale(0.25);
    pointer-events: none;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* API Access: DHRU | PHP — hai cột khi cả hai panel hiển thị */
#api-tab .api-access-two-col > .api-dhru-column,
#api-tab .api-access-two-col > .api-docs-section {
    min-width: 0;
}
@media (min-width: 1200px) {
    #api-tab .api-access-two-col > .api-dhru-column:has(+ .api-docs-section:not(.d-none)) {
        padding-right: 0.85rem;
        border-right: 1px solid rgba(15, 23, 42, 0.06);
    }
    [data-pc-theme="dark"] #api-tab .api-access-two-col > .api-dhru-column:has(+ .api-docs-section:not(.d-none)) {
        border-right-color: rgba(148, 163, 184, 0.12);
    }
    #api-tab .api-access-two-col > .api-docs-section:not(.d-none) {
        padding-left: 0.85rem;
    }
}

/* ========== Client portal: bảng (Invoice/Statement/Order…) — class .dash-table-modern ========== */
.dash-list-card { border-radius: .25rem !important; overflow: hidden; box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); }
table.dash-table-modern {
    --dash-tb-border: rgba(148, 163, 184, 0.18);
    margin-bottom: 0;
}
table.dash-table-modern tbody tr { transition: background 0.15s ease; }
table.dash-table-modern tbody tr:hover { background: rgba(var(--bs-primary-rgb), 0.06); }
table.dash-table-modern tbody tr td {
    border-bottom: 1px solid var(--dash-tb-border);
    padding: 0.4rem 0.55rem;
    vertical-align: middle;
    font-size: 0.78rem;
}
table.dash-table-modern tbody tr:last-child td { border-bottom: none; }
.dash-row-ic {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-size: 0.78rem;
}
.dash-table-amount { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bs-emphasis-color); }
.dash-st-pill { font-size: 0.62rem; letter-spacing: 0.04em; font-weight: 700; padding: 0.22em 0.5em; border-radius: .2rem; }
.dash-st-pill--credit { background: linear-gradient(135deg, #059669, #10b981) !important; color: #fff !important; }
.dash-st-pill--debit { background: linear-gradient(135deg, #be123c, #f43f5e) !important; color: #fff !important; }
.dash-inv-pill { font-size: 0.62rem; letter-spacing: 0.04em; font-weight: 700; padding: 0.22em 0.5em; border-radius: .2rem; }
.dash-inv-pill--unpaid { background: linear-gradient(135deg, #d97706, #fbbf24) !important; color: #1c1917 !important; }
.dash-inv-pill--paid { background: linear-gradient(135deg, #047857, #34d399) !important; color: #fff !important; }
.dash-inv-pill--cancelled { background: linear-gradient(135deg, #991b1b, #f87171) !important; color: #fff !important; }
.dash-inv-pill--unknown { background: rgba(148, 163, 184, 0.35) !important; color: var(--bs-body-color) !important; }
.dash-section-ic {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: .2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.12);
    font-size: 0.85rem;
}
[data-pc-theme="dark"] table.dash-table-modern { --dash-tb-border: rgba(255, 255, 255, 0.08); }
[data-pc-theme="dark"] table.dash-table-modern tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
[data-pc-theme="dark"] .dash-section-ic { background: rgba(56, 189, 248, 0.15); color: #38bdf8 !important; }

/* DataTables (Invoice / Statement / Order history) */
#customer-invoice-table.dataTable,
#customer-statement-table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}
.dash-list-card .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
    #customer-invoice-table.dataTable {
        min-width: 860px;
    }
    #customer-statement-table.dataTable {
        min-width: 720px;
    }
}
#order-history-table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: auto !important;
    min-width: 100%;
}
#customer-invoice-table.dataTable thead th,
#customer-statement-table.dataTable thead th,
#order-history-table.dataTable thead th {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    padding: 0.85rem 1rem;
    background: rgba(var(--bs-primary-rgb), 0.05);
    vertical-align: middle;
}
#customer-invoice-table.dataTable tbody td,
#customer-statement-table.dataTable tbody td,
#order-history-table.dataTable tbody td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
#customer-invoice-table.dataTable tbody tr:hover td,
#customer-statement-table.dataTable tbody tr:hover td,
#order-history-table.dataTable tbody tr:hover td {
    background: rgba(var(--bs-primary-rgb), 0.05);
}
[data-pc-theme="dark"] #customer-invoice-table.dataTable thead th,
[data-pc-theme="dark"] #customer-statement-table.dataTable thead th,
[data-pc-theme="dark"] #order-history-table.dataTable thead th {
    background: rgba(255, 255, 255, 0.06);
    border-bottom-color: #5c5c64;
    color: #c4c4cc;
}
[data-pc-theme="dark"] #customer-invoice-table.dataTable tbody td,
[data-pc-theme="dark"] #customer-statement-table.dataTable tbody td,
[data-pc-theme="dark"] #order-history-table.dataTable tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-pc-theme="dark"] #customer-invoice-table.dataTable tbody tr:hover td,
[data-pc-theme="dark"] #customer-statement-table.dataTable tbody tr:hover td,
[data-pc-theme="dark"] #order-history-table.dataTable tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}

/* Client invoice / statement — mobile: card-style rows, class-based column visibility */
@media (max-width: 767.98px) {
    .customer-invoice-table-wrap.table-responsive,
    .customer-invoice-table-wrap {
        overflow-x: visible !important;
    }
    .customer-invoice-table-wrap .dataTables_wrapper {
        overflow: visible;
    }
    #customer-invoice-table.dataTable,
    #customer-statement-table.dataTable {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto !important;
    }
    #customer-invoice-table.dataTable colgroup {
        display: none;
    }
    #customer-invoice-table.dataTable,
    #customer-invoice-table.dataTable tbody {
        display: block;
        width: 100%;
    }
    #customer-invoice-table.dataTable thead {
        display: none;
    }
    #customer-invoice-table.dataTable tbody tr {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
    }
    #customer-invoice-table.dataTable tbody td {
        display: block;
    }
    #customer-invoice-table.dataTable tbody td,
    #customer-invoice-table.dataTable thead th {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0.75rem 0.35rem;
        font-size: 0.8125rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }
    #customer-invoice-table .ci-col-date,
    #customer-invoice-table .ci-col-gateway,
    #customer-invoice-table .ci-col-trx,
    #customer-invoice-table .ci-col-paid {
        display: none !important;
    }
    #customer-invoice-table .ci-col-status {
        flex: 0 0 auto;
        padding-left: 0.75rem !important;
        padding-right: 0.25rem !important;
    }
    #customer-invoice-table .ci-col-id {
        flex: 0 0 auto;
        font-weight: 600;
        white-space: nowrap;
    }
    #customer-invoice-table .ci-col-amount {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right !important;
        white-space: nowrap;
        font-weight: 500;
    }
    #customer-invoice-table .ci-col-view {
        flex: 0 0 1.25rem;
        padding-right: 0.75rem !important;
        text-align: center !important;
    }
    #customer-invoice-table.dataTable .dash-inv-pill {
        font-size: 0.58rem;
        padding: 0.35em 0.55em;
        letter-spacing: 0.03em;
    }
    /* Statement: hide Description + Order ref on small screens */
    #customer-statement-table.dataTable thead th,
    #customer-statement-table.dataTable tbody td {
        padding: 0.7rem 0.45rem;
        font-size: 0.8125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #customer-statement-table.dataTable thead th:first-child,
    #customer-statement-table.dataTable tbody td:first-child {
        padding-left: 0.75rem;
    }
    #customer-statement-table.dataTable thead th:last-child,
    #customer-statement-table.dataTable tbody td:last-child {
        padding-right: 0.75rem;
    }
    #customer-statement-table.dataTable thead th:nth-child(2),
    #customer-statement-table.dataTable thead th:nth-child(6),
    #customer-statement-table.dataTable tbody td:nth-child(2),
    #customer-statement-table.dataTable tbody td:nth-child(6) {
        display: none !important;
    }
    .dash-list-card .card-header.service-card-header .d-sm-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.65rem;
    }
    .dash-list-card .card-header.service-card-header .form-control#order-search {
        width: 100%;
        max-width: none;
    }
    .dash-list-card .card-header.service-card-header .d-sm-flex > .d-flex {
        width: 100%;
    }
}

/* Order history: trạng thái — chỉ màu chữ, không nền */
.oh-dt-pill {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    font-weight: 600;
    text-transform: none;
    padding: 0 !important;
    min-width: 0;
    justify-content: flex-start;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.oh-dt-pill--success { background: transparent !important; color: #16a34a !important; }
.oh-dt-pill--danger { background: transparent !important; color: #dc2626 !important; }
.oh-dt-pill--warning { background: transparent !important; color: #d97706 !important; }
.oh-dt-pill--muted { background: transparent !important; color: #64748b !important; }
.oh-dt-pill--info { background: transparent !important; color: #0284c7 !important; }
[data-pc-theme="dark"] .oh-dt-pill--success { color: #4ade80 !important; }
[data-pc-theme="dark"] .oh-dt-pill--danger { color: #f87171 !important; }
[data-pc-theme="dark"] .oh-dt-pill--warning { color: #fbbf24 !important; }
[data-pc-theme="dark"] .oh-dt-pill--muted { color: #94a3b8 !important; }
[data-pc-theme="dark"] .oh-dt-pill--info { color: #38bdf8 !important; }

/**
 * Balance card (dashboard): modernstyle đặt gradient primary; ở dark mode bỏ nền xanh/teal.
 * Đặt cuối file (sau stylesheet.css/preset trong head vẫn là modernstyle) + !important để thắng .balance-card.
 */
html[data-pc-theme="dark"] .balance-card,
html[data-pc-theme="dark"] body[data-pc-theme="dark"] .balance-card,
[data-pc-theme="dark"] .balance-card,
[data-pc-theme=dark] .balance-card {
	--bs-card-bg: transparent;
	--bs-card-border-color: rgba(148, 163, 184, 0.22);
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}
html[data-pc-theme="dark"] .balance-card::after,
body[data-pc-theme="dark"] .balance-card::after,
[data-pc-theme="dark"] .balance-card::after,
[data-pc-theme=dark] .balance-card::after {
	display: none !important;
	content: none !important;
}
html[data-pc-theme="dark"] .balance-card h2,
html[data-pc-theme="dark"] .balance-card h5,
html[data-pc-theme="dark"] .balance-card h6,
[data-pc-theme="dark"] .balance-card h2,
[data-pc-theme="dark"] .balance-card h5,
[data-pc-theme="dark"] .balance-card h6,
[data-pc-theme=dark] .balance-card h2,
[data-pc-theme=dark] .balance-card h5,
[data-pc-theme=dark] .balance-card h6 {
	color: var(--bs-heading-color, #fafafa) !important;
}
html[data-pc-theme="dark"] .balance-card small,
[data-pc-theme="dark"] .balance-card small,
[data-pc-theme=dark] .balance-card small {
	color: var(--bs-secondary-color, #94a3b8) !important;
}
html[data-pc-theme="dark"] .balance-sub,
[data-pc-theme="dark"] .balance-sub,
[data-pc-theme=dark] .balance-sub {
	background: rgba(148, 163, 184, 0.1) !important;
	border: 1px solid rgba(148, 163, 184, 0.22) !important;
}
html[data-pc-theme="dark"] .balance-card .btn,
[data-pc-theme="dark"] .balance-card .btn,
[data-pc-theme=dark] .balance-card .btn {
	background: rgba(var(--bs-primary-rgb), 0.2) !important;
	border-color: rgba(var(--bs-primary-rgb), 0.38) !important;
	color: #e2e8f0 !important;
}
html[data-pc-theme="dark"] .balance-card .btn:hover,
[data-pc-theme="dark"] .balance-card .btn:hover,
[data-pc-theme=dark] .balance-card .btn:hover {
	background: rgba(var(--bs-primary-rgb), 0.38) !important;
	color: #fff !important;
}