.theme-green .navbar-fixed-top {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}
.theme-green .navbar-fixed-top {
    height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}
.theme-green #main-content {
    margin-top: 56px;
}

.theme-green .navbar-fixed-top .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.theme-green #left-sidebar .navbar-brand {
    height: 56px;
    margin: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
}
.theme-green #left-sidebar .navbar-brand a {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.theme-green .navbar-brand .brand-mark {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: #29bd73;
}

.theme-green .navbar-brand .brand-mark svg {
    width: 100%;
    height: 100%;
    display: block;
}
.theme-green .navbar-fixed-top .icon-menu i {
    color: #29bd73;
}

.theme-green .navbar-fixed-top .icon-menu:hover i,
.theme-green .navbar-fixed-top .icon-menu:focus i {
    color: #1e9c5c;
}
.theme-green .navbar-fixed-top .navbar-btn {
    border-right-color: #e8e8e8;
}

.theme-green .navbar-fixed-top .navbar-btn a,
.theme-green .navbar-fixed-top .navbar-btn button {
    color: #29bd73;
}

.theme-green .navbar-fixed-top .navbar-nav > li > a {
    color: #29bd73;
}
.theme-green .navbar-fixed-top .navbar-left {
    display: flex;
    align-items: center;
}
.theme-green .navbar-fixed-top .header-page-title {
    margin: 0 0 0 18px;
    padding-left: 18px;
    border-left: 1px solid #e8e8e8;
    color: #2f3542;
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .theme-green .navbar-fixed-top .header-page-title {
        margin-left: 10px;
        padding-left: 10px;
        font-size: 15px;
    }
}
.theme-green .navbar-fixed-top .notification-dot {
    background-color: #ff5252;
}
.theme-green .navbar-fixed-top .header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.theme-green .navbar-fixed-top .header-greeting {
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.theme-green .navbar-fixed-top .header-greeting strong {
    color: #1a1a1a;
    font-weight: 700;
}
@media (max-width: 991px) {
    .theme-green .navbar-fixed-top .header-greeting {
        display: none;
    }
}
.theme-green .navbar-fixed-top .balance-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: #f3f5f9;
    border: 1px solid #e6e9f0;
    border-radius: 9px;
    line-height: 1;
    padding: 6px 12px;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.theme-green .navbar-fixed-top .balance-pill:hover,
.theme-green .navbar-fixed-top .balance-pill:focus {
    background: #eaf1fb;
    border-color: #c5d8f5;
    box-shadow: 0 2px 8px rgba(31, 95, 216, 0.14);
}
/* Bên admin viên số dư chỉ để xem (là <span>, không dẫn đi đâu) — bỏ con trỏ tay
   và hiệu ứng hover để không mời bấm một thứ không bấm được. */
.theme-green .navbar-fixed-top span.balance-pill { cursor: default; }
.theme-green .navbar-fixed-top span.balance-pill:hover,
.theme-green .navbar-fixed-top span.balance-pill:focus {
    background: #f3f5f9;
    border-color: #e6e9f0;
    box-shadow: none;
}
.theme-green .navbar-fixed-top .balance-pill .balance-amount {
    color: #1f5fd8;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.2px;
}
.theme-green .navbar-fixed-top .balance-pill .balance-unit {
    color: #6b8fe6;
    font-weight: 600;
    font-size: 12px;
}
.theme-green .navbar-fixed-top .header-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #4b5563;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.theme-green .navbar-fixed-top .header-icon-btn:hover {
    background: #eef0f3;
    color: #29bd73;
}
.theme-green .navbar-fixed-top .header-icon-btn .notif-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff5252;
    border: 2px solid #fff;
    display: none;
}
.theme-green .navbar-fixed-top .header-icon-btn .notif-dot.show {
    display: block;
}
.theme-green .navbar-fixed-top .avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0ad6b, #e2823a);
    color: #fdf6ee;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(226, 130, 58, 0.22);
    transition: filter 0.18s ease;
}
.theme-green .navbar-fixed-top .avatar-btn:hover {
    filter: brightness(1.04);
}
.theme-green .navbar-fixed-top .avatar-btn::after {
    display: none;
}
.theme-green .navbar-fixed-top .account-menu,
.theme-green .navbar-fixed-top .notif-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
}
.theme-green .navbar-fixed-top .account-menu {
    min-width: 200px;
    padding: 8px;
}
.theme-green .navbar-fixed-top .account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #2f3542;
}
.theme-green .navbar-fixed-top .account-menu .dropdown-item:hover {
    background: #eef0f3;
}
/* Đăng xuất bên admin gửi bằng POST nên item là <button> trong <form>, không phải
   <a> như bên khách — kéo nút về đúng dáng một dòng menu. */
.theme-green .navbar-fixed-top .account-menu form {
    margin: 0;
}
.theme-green .navbar-fixed-top .account-menu button.dropdown-item {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}
.theme-green .navbar-fixed-top .account-menu .dropdown-item.danger {
    color: #dc2626;
}
.theme-green .navbar-fixed-top .account-menu .dropdown-item.danger:hover {
    background: #fdecec;
    color: #dc2626;
}
.theme-green .navbar-fixed-top .notif-menu {
    min-width: 320px;
}
.theme-green .navbar-fixed-top .notif-menu-head {
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #2f3542;
    border-bottom: 1px solid #eef0f3;
}
.theme-green .navbar-fixed-top .notif-menu-body {
    max-height: 340px;
    overflow-y: auto;
}
.theme-green .navbar-fixed-top .notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid #f4f5f7;
    font-size: 13px;
    line-height: 1.5;
    color: #4b5563;
    text-decoration: none;
}
.theme-green .navbar-fixed-top .notif-item:last-child {
    border-bottom: none;
}
.theme-green .navbar-fixed-top .notif-item:hover {
    background: #f8f9fb;
}
.theme-green .navbar-fixed-top .notif-item .notif-ic {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eafaf1;
    color: #29bd73;
    font-size: 14px;
}
.theme-green .navbar-fixed-top .btn-toggle-fullwidth {
    border-radius: 8px;
    transition: background 0.2s ease;
}

.theme-green .navbar-fixed-top .btn-toggle-fullwidth:hover {
    background: rgba(41, 189, 115, 0.12);
}
body.theme-green {
    background: #e9edf4;
    font-family: 'Inter', 'Open Sans', sans-serif;
}
.theme-green .container-fluid,
.theme-green .container-fluid .fw-medium,
.theme-green .container-fluid .text-success,
.theme-green .container-fluid .text-primary,
.theme-green .container-fluid .text-muted,
.theme-green .container-fluid label,
.theme-green .container-fluid small,
.theme-green .container-fluid input[type="number"],
.theme-green .container-fluid .service-info-textarea {
    font-family: 'Inter', 'Open Sans', sans-serif !important;
}
.theme-green #left-sidebar {
    background: #fff;
    border-right: 1px solid #e3e8f0;
}

.theme-green #left-sidebar .sidebar-nav {
    margin-top: 16px;
}

.theme-green #left-sidebar .sidebar-nav .metismenu a {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #000;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.theme-green #left-sidebar .sidebar-nav .metismenu > li {
    margin-bottom: 4px;
}
.theme-green #left-sidebar .sidebar-nav .metismenu .menu-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.theme-green #left-sidebar .sidebar-nav .metismenu .menu-icon svg {
    width: 100%;
    height: 100%;
}
.theme-green #left-sidebar .sidebar-nav .metismenu a:hover,
.theme-green #left-sidebar .sidebar-nav .metismenu a:focus {
    background: #e5eeff;
    color: #29bd73;
}
.theme-green #left-sidebar .sidebar-nav .metismenu > li.active > a {
    position: relative;
    background: #29bd73;
    color: #fff;
    font-weight: 700;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(41, 189, 115, 0.3);
}

.theme-green #left-sidebar .sidebar-nav .metismenu > li.active > a::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #29bd73;
    border-radius: 0 4px 4px 0;
}
.theme-green #left-sidebar .sidebar-nav .metismenu li.menu-group-label {
    padding: 18px 16px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6d7a6f;
    list-style: none;
    cursor: default;
}

.theme-green #left-sidebar .sidebar-nav .metismenu li.menu-group-label:first-child {
    padding-top: 4px;
}
.theme-green #left-sidebar .sidebar-nav .metismenu li.menu-logout > a {
    color: #ba1a1a;
}

.theme-green #left-sidebar .sidebar-nav .metismenu li.menu-logout > a:hover,
.theme-green #left-sidebar .sidebar-nav .metismenu li.menu-logout > a:focus {
    background: rgba(255, 218, 214, 0.45);
    color: #93000a;
}
.theme-green .service-id {
    color: #262626;
}
.theme-green .card,
.theme-green .panel,
.theme-green .modal-content {
    border-radius: 12px;
    border: 1px solid #d9dfea;
    box-shadow: 0 1px 3px rgba(30, 41, 59, 0.06);
}

@media (min-width: 1201px) {
    .theme-green #left-sidebar {
        top: 14px;
        left: 14px;
        height: calc(100vh - 28px);
        border: 1px solid #d9dfea;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(30, 41, 59, 0.07);
        overflow-y: auto;
    }
    .theme-green #left-sidebar::-webkit-scrollbar { width: 0; height: 0; }

    .theme-green .navbar-fixed-top {
        top: 14px;
        left: 278px !important;
        right: 14px;
        width: auto !important;
        border: 1px solid #d9dfea;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(30, 41, 59, 0.07);
    }

    .theme-green #main-content {
        margin-top: 84px;
        width: calc(100% - 292px) !important;
        margin-right: 14px;
    }

    .theme-green #left-sidebar .sidebar-nav .metismenu > li.active > a {
        transform: none;
    }
    .theme-green #left-sidebar .sidebar-nav .metismenu > li.active > a::before {
        display: none;
    }

    .layout-fullwidth #wrapper .navbar-fixed-top {
        left: 14px !important;
    }
    .layout-fullwidth #wrapper #main-content {
        width: calc(100% - 28px) !important;
        margin-left: 14px;
        margin-right: 14px;
    }

    .theme-green #main-content > .container-fluid {
        padding-left: 6px;
        padding-right: 6px;
    }
}
.theme-green .widget-card {
    border-radius: 20px !important;
}
.theme-green .service-item {
    border-radius: 12px !important;
}
.theme-green #main-content > .container-fluid {
    padding-top: 4px;
}
.theme-green #main-content .row {
    margin-left: -8px;
    margin-right: -8px;
}

.theme-green #main-content .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}
.theme-green .svc-widget {
    background: #fff;
    border: 1px solid #d9dfea;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(30, 41, 59, 0.06);
    overflow: hidden;
    margin-bottom: 20px;
}
.theme-green .svc-widget-head {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #0b1c30;
    border-bottom: 1px solid #eef2f6;
}
.theme-green .svc-widget-body {
    padding: 14px 16px 16px;
}
.theme-green .app-footer {
    margin-top: 28px;
    padding: 24px 24px 22px;
    border-top: 1px solid #e3e8f0;
    text-align: center;
    font-size: 12.5px;
    color: #94a3b8;
}

.theme-green .app-footer strong {
    color: #64748b;
    font-weight: 700;
}
.theme-green .service-id-badge {
    background: #28a745 !important;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.35) !important;
}
.theme-green .service-id-badge:hover {
    background: #218838 !important;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.45) !important;
}
.theme-green .app-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.theme-green .app-footer-links {
    display: flex;
    gap: 22px;
}

.theme-green .app-footer-links a {
    color: #64748b;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.theme-green .app-footer-links a:hover {
    color: #29bd73;
}
.theme-green #main-content.has-app-footer {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
}
.theme-green #main-content.has-app-footer > .container-fluid {
    flex: 1 0 auto;
}

.theme-green #main-content.has-app-footer > .app-footer {
    flex: 0 0 auto;
}

@media (min-width: 1201px) {
    .theme-green #main-content.has-app-footer {
        min-height: calc(100vh - 98px);
        min-height: calc(100dvh - 98px);
        margin-bottom: 14px;
    }
}

.theme-green .svc-price {
    background: #fff !important;
    border: 1.5px solid #29bd73 !important;
    color: #29bd73 !important;
    font-weight: 700;
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 6px;
}
.theme-green .svc-new {
    background: rgba(117, 108, 235, 0.12) !important;
    color: #756CEB !important;
    border: none !important;
    font-weight: 700;
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 6px;
}

.theme-green #left-sidebar .navbar-brand .fw-bold {
    color: #29bd73;
    font-weight: 800;
    letter-spacing: .2px;
}
.theme-green .custom-platform-options,
.theme-green .custom-category-options,
.theme-green .custom-service-options {
    margin-top: 6px;
    border: 1px solid #e3e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
    padding: 6px;
    max-height: 280px !important;
    overflow-y: auto;
}

.theme-green .custom-platform-option,
.theme-green .custom-category-option,
.theme-green .custom-service-option {
    border-bottom: none !important;
    border-radius: 8px;
    padding: 10px 12px !important;
    font-size: 13.5px;
    font-weight: 500;
    color: #1e293b;
    transition: background 0.12s ease;
}

.theme-green .custom-platform-option:hover,
.theme-green .custom-category-option:hover,
.theme-green .custom-service-option:hover {
    background: #e5eeff !important;
}
.theme-green .custom-platform-options::-webkit-scrollbar,
.theme-green .custom-category-options::-webkit-scrollbar,
.theme-green .custom-service-options::-webkit-scrollbar { width: 6px; }
.theme-green .custom-platform-options::-webkit-scrollbar-thumb,
.theme-green .custom-category-options::-webkit-scrollbar-thumb,
.theme-green .custom-service-options::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* Dropdown chọn service: cao hơn để thấy nhiều option, scrollbar to để dễ kéo */
.theme-green .custom-service-options {
    max-height: min(70vh, 720px) !important;
}
.theme-green .custom-service-options::-webkit-scrollbar { width: 20px; }
.theme-green .custom-service-options::-webkit-scrollbar-track {
    background: #eef2f7;
    border-radius: 10px;
}
.theme-green .custom-service-options::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
    border: 4px solid #eef2f7;
}
.theme-green .custom-service-options::-webkit-scrollbar-thumb:hover { background: #64748b; }
@supports not selector(::-webkit-scrollbar) {
    .theme-green .custom-service-options {
        scrollbar-width: auto;
        scrollbar-color: #94a3b8 #eef2f7;
    }
}
.theme-green .custom-category-display.is-empty {
    color: #94a3b8;
    cursor: default;
}

.theme-green #orderForm .custom-category-display.is-empty::after {
    content: none;
}
.theme-green #calculateLoopCost {
    background: #fff !important;
    border: 1.5px solid #2563eb !important;
    color: #2563eb !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    transition: all 0.15s ease !important;
}

.theme-green #calculateLoopCost:hover,
.theme-green #calculateLoopCost:focus {
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

.theme-green .fa,
.theme-green .fas,
.theme-green .fa-solid,
.theme-green .far,
.theme-green .fa-regular,
.theme-green .container-fluid .fa,
.theme-green .container-fluid .fas,
.theme-green .container-fluid .fa-solid,
.theme-green .container-fluid .far,
.theme-green .container-fluid .fa-regular {
    font-family: "Font Awesome 6 Free" !important;
}

.theme-green .fab,
.theme-green .fa-brands,
.theme-green .container-fluid .fab,
.theme-green .container-fluid .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}
.theme-green #totalCostDisplay {
    background: #e2e8f0 !important;
    color: #475569 !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    padding: 4px 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.theme-green #totalCostDisplay.success {
    background: #2563eb !important;
    color: #fff !important;
}
.theme-green .btn-order-green {
    background: linear-gradient(135deg, #06b6d4, #10b981) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 18px !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

.theme-green .btn-order-green:hover,
.theme-green .btn-order-green:focus {
    background: linear-gradient(135deg, #0891b2, #059669) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}
.theme-green #submitBtn {
    background: linear-gradient(135deg, #2ed07f, #1fa05f) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(41, 189, 115, 0.28) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.theme-green #submitBtn:not([disabled]):hover {
    filter: brightness(1.05) !important;
    box-shadow: 0 8px 20px rgba(41, 189, 115, 0.4) !important;
}
.theme-green #submitBtn {
    color: #fff !important;
}

.theme-green #submitBtn:disabled,
.theme-green #submitBtn.btn-warning,
.theme-green #submitBtn.btn-danger {
    background: #29bd73 !important;
    color: #fff !important;
    opacity: 0.4 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}
@media (max-width: 1199.98px) {
    .theme-green .support-fab { display: none !important; }
}
@media (max-width: 767.98px) {
    .theme-green .navbar-fixed-top .header-greeting { display: none; }
    .theme-green .navbar-fixed-top .header-actions { gap: 10px; }
}

@media (max-width: 479.98px) {
    .theme-green .navbar-fixed-top .header-page-title { display: none; }
}
.theme-green .overlay.show { display: block; }
/* Sidebar phải nổi TRÊN overlay (main.css cho sidebar z-index:9 < overlay 10):
   không thì trên mobile menu mở ra bị lớp phủ đen đè lên, bấm mục nào cũng chỉ trúng overlay. */
.theme-green #left-sidebar { z-index: 11; }
/* Khoảng ≤1200px sidebar chạy chế độ offcanvas (trượt từ trái) — nút "thu gọn sidebar"
   của desktop phải ẩn đi: rule display:inline-flex phía dưới từng đè mất media query ẩn
   của main.css (chỉ ẩn ≤1024px), khách bấm nhầm là dính layout-fullwidth lưu localStorage. */
@media (max-width: 1200px) {
    .theme-green .navbar-fixed-top .btn-toggle-fullwidth { display: none !important; }
}
/* Máy nào đã lỡ lưu panel_sidebar_collapsed=1: class layout-fullwidth vẫn được JS gắn lại
   mỗi lần tải trang, mà rule ".layout-fullwidth #wrapper #left-sidebar{left:-250px}" thắng
   ".offcanvas-active #left-sidebar{left:0}" về specificity → bấm hamburger không mở được gì.
   Khi người dùng chủ động mở offcanvas thì offcanvas phải thắng. */
body.offcanvas-active #wrapper #left-sidebar { left: 0 !important; }
@media (max-width: 575.98px) {
    #orderForm .custom-service-display { flex-wrap: wrap; row-gap: 6px; }
    #orderForm .custom-service-display .flex-grow-1 { min-width: 70%; }
}
.theme-green .service-info-textarea::-webkit-scrollbar { width: 6px; }
.theme-green .service-info-textarea::-webkit-scrollbar-track { background: transparent; }
.theme-green .service-info-textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.theme-green .svc-price {
    color: #147a48 !important;
    border-color: #147a48 !important;
}

.theme-green .svc-new {
    color: #5b51d8 !important;
}

.theme-green .app-footer { color: #5b6a80; }
.theme-green .app-footer strong { color: #475569; }
.theme-green .app-footer-links a { color: #475569; }
.theme-green .navbar-fixed-top .btn-toggle-fullwidth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.theme-green .notice-close { position: relative; }
.theme-green .notice-close::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.theme-green .service-id-badge { position: relative; }
.theme-green .service-id-badge::after {
    content: '';
    position: absolute;
    top: -11px;
    bottom: -11px;
    left: -2px;
    right: -2px;
}

.theme-green .header-icon-btn,
.theme-green .avatar-btn,
.theme-green .balance-pill { position: relative; }
.theme-green .header-icon-btn::after,
.theme-green .avatar-btn::after {
    content: '';
    position: absolute;
    inset: -3px;
}
.theme-green .balance-pill::after {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 0;
    right: 0;
}
.theme-green .service-id-badge:focus-visible {
    outline: 2px solid #1e357f;
    outline-offset: 2px;
}
@media (max-width: 767.98px) {
    #orderForm .form-control { font-size: 16px; }
}
.theme-green #left-sidebar {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

.theme-green #left-sidebar .navbar-brand {
    flex: 0 0 auto;
}

.theme-green #left-sidebar .sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.theme-green #left-sidebar .sidebar-scroll::-webkit-scrollbar { width: 0; height: 0; }

.theme-green .sidebar-user {
    flex: 0 0 auto;
    margin: 0 20px 16px;
}
.theme-green .sidebar-user-logout {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    border-radius: 8px;
    color: #ba1a1a;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}
.theme-green .sidebar-user-logout:hover,
.theme-green .sidebar-user-logout:focus {
    background: rgba(255, 218, 214, 0.45);
    color: #93000a;
    text-decoration: none;
}
.theme-green .sidebar-user-logout:focus-visible {
    outline: 2px solid #ba1a1a;
    outline-offset: 2px;
}
.theme-green .sidebar-user-logout .menu-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}
.theme-green .sidebar-user-logout .menu-icon svg {
    width: 100%;
    height: 100%;
}
.theme-green #searchResults {
    margin-top: 6px;
    border: 1px solid #e3e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
    padding: 6px;
}

.theme-green #searchResults .search-result-item {
    border-bottom: none !important;
    border-radius: 8px;
    padding: 6px 10px !important;
    transition: background 0.12s ease;
}

.theme-green #searchResults .search-result-item:hover {
    background: #d8e5fc;
}

.theme-green #searchResults .search-result-item:hover .fw-medium {
    color: #0b1c30;
}
.theme-green #searchResults .search-result-item small.text-muted {
    font-size: 11px;
    line-height: 1.3;
    display: inline-block;
    margin-top: 1px;
}
.theme-green #searchResults .search-result-item .fw-medium {
    font-size: 13px;
    font-weight: 500 !important;
    color: #1e293b;
}

.theme-green #searchResults .badge-secondary {
    background: transparent !important;
    border: none !important;
    color: #2563eb !important;
    font-size: 13px;
    font-weight: 800;
    padding: 0;
    text-transform: none;
}

.theme-green #searchResults small.text-muted { color: #5d6d82 !important; }

.theme-green #searchResults::-webkit-scrollbar { width: 6px; }
.theme-green #searchResults::-webkit-scrollbar-track { background: transparent; }
.theme-green #searchResults::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.theme-green #searchResults .search-result-item:hover,
.theme-green .custom-platform-option:hover,
.theme-green .custom-category-option:hover,
.theme-green .custom-service-option:hover {
    background: #2563eb !important;
    color: #fff !important;
}

.theme-green #searchResults .search-result-item:hover .fw-medium,
.theme-green #searchResults .search-result-item:hover .badge-secondary,
.theme-green .custom-service-option:hover .flex-grow-1,
.theme-green .custom-service-option:hover .badge-secondary {
    color: #fff !important;
}
.theme-green .btn-order-green { position: relative; }
.theme-green .btn-order-green::after {
    content: '';
    position: absolute;
    top: -7px;
    bottom: -7px;
    left: 0;
    right: 0;
}
.theme-green #searchResults .search-result-item:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    background: #d8e5fc;
}

@media (max-width: 767.98px) {
    .theme-green #searchResults .search-result-item { padding: 11px 10px !important; }
}
.theme-green .service-order-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
}

.theme-green h1,.theme-green h2,.theme-green h3,.theme-green h4,.theme-green h5,.theme-green h6,
.theme-green .card-header,.theme-green .widget-title,.theme-green .svc-widget-head,
.theme-green .header-page-title,.theme-green .notice-title,.theme-green .page-title{
    font-family:'Poppins','Inter',sans-serif !important;
    letter-spacing:-.01em;
}
.theme-green .cell-truncate { max-width: var(--cell-max, 320px); }
.theme-green .cell-truncate .truncate-text {
    display: block;
    max-width: var(--cell-max, 320px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.theme-green .cell-truncate.expanded .truncate-text {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.theme-green .cell-toggle {
    display: inline-block;
    margin-top: 2px;
    padding: 0;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.theme-green .cell-toggle:hover { text-decoration: underline; }
.btn-search-blue,
.btn-search-blue.btn-search-blue {
    background: linear-gradient(135deg,#54bffa,#1f9fe8) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(51,177,249,.32) !important;
    transition: filter .15s ease, box-shadow .15s ease;
}
.btn-search-blue:hover,
.btn-search-blue:focus,
.btn-search-blue.btn-search-blue:hover,
.btn-search-blue.btn-search-blue:focus {
    background: linear-gradient(135deg,#33b1f9,#0f8fdc) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(51,177,249,.42) !important;
}
.btn-search-blue:active { transform: translateY(1px); }
.btn-close-ink,
.btn-close-ink.btn-close-ink {
    background: #fff !important;
    border: 1.5px solid #0b1c30 !important;
    color: #0b1c30 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-close-ink:hover,
.btn-close-ink:focus,
.btn-close-ink.btn-close-ink:hover,
.btn-close-ink.btn-close-ink:focus {
    background: #0b1c30 !important;
    border-color: #0b1c30 !important;
    color: #fff !important;
}
.btn-close-ink:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11,28,48,.25) !important;
}

.adash {
    --adash-ink:    #0b1c30;
    --adash-ink-2:  #1e293b;
    --adash-muted:  #475569;
    --adash-faint:  #94a3b8;
    --adash-line:   #dfe5ee;
    --adash-edge:   #ccd6e4;
    --adash-hair:   #eaeef4;
    --adash-warn:   #b45309;
    --adash-danger: #b91c1c;
    --adash-blue:   #2563eb;
    color: var(--adash-ink-2);
}
.adash .adash-bignum,
.adash .adash-stat-num,
.adash .adash-orderid,
.adash .adash-time,
.adash .adash-tablefoot b,
.adash .adash-table td.adash-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.adash .adash-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.adash .adash-panel {
    background: #fff;
    border: 1px solid var(--adash-edge);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    margin-bottom: 16px;
    overflow: hidden;
}
.adash .adash-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 2px 2px 16px;
}
.adash .adash-pagetitle {
    margin: 0;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--adash-ink);
}
.adash .adash-pagesub {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--adash-muted);
}
.adash .adash-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--adash-muted);
}
.adash .adash-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--adash-muted);
}
.adash .adash-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--adash-blue);
    text-decoration: none;
}
.adash .adash-link:hover,
.adash .adash-link:focus { color: #1d4ed8; text-decoration: underline; }
.adash .adash-link:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 3px; border-radius: 4px; }
.adash .adash-link i { font-size: 12px; }
.adash .adash-link-bottom { margin-top: auto; align-self: flex-start; }
.adash .adash-hero {
    display: grid;
    grid-template-columns: minmax(260px, 330px) 1fr;
}
.adash .adash-hero-figure {
    display: flex;
    flex-direction: column;
    padding: 24px 26px 18px;
    border-right: 1px solid var(--adash-hair);
}
.adash .adash-bignum {
    margin: 10px 0 0;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(36px, 3.4vw, 52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--adash-ink);
}
.adash .adash-cur {
    margin-right: 4px;
    font-size: .48em;
    font-weight: 700;
    vertical-align: .3em;
    color: var(--adash-muted);
}
.adash .adash-hint {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--adash-muted);
}
.adash .adash-hint strong { color: var(--adash-ink-2); font-weight: 700; }
.adash .adash-hint-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}
.adash .adash-hint-note i { margin-top: 3px; color: var(--adash-faint); }
.adash .adash-code {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 5px;
    background: var(--adash-hair);
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}
.adash .adash-hero-chart {
    padding: 24px 24px 18px;
    min-width: 0;
}
.adash .adash-chart { position: relative; height: 228px; margin-top: 14px; }
.adash .adash-chart > canvas { display: block; }
.adash .adash-chart-empty {
    position: absolute;
    inset: 0 0 22px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    text-align: center;
    pointer-events: none;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--adash-muted);
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.92) 60%);
}
.adash .adash-chart-empty i { font-size: 24px; color: var(--adash-faint); }
.adash .adash-chart-empty-sub { font-size: 13px; font-weight: 400; }
.adash .adash-chart-empty[hidden] { display: none; }
.adash .adash-stats {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0 -1px -1px 0;
}
.adash .adash-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 118px;
    padding: 18px 20px;
    border-right: 1px solid var(--adash-hair);
    border-bottom: 1px solid var(--adash-hair);
    color: var(--adash-ink-2);
    text-decoration: none;
    transition: background .15s ease;
}
.adash .adash-stat:last-child { border-right: 0; }

.adash a.adash-stat:hover { background: #f7f9fc; text-decoration: none; color: var(--adash-ink-2); }
.adash a.adash-stat:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: -2px; }
.adash .adash-stat-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--adash-muted);
}
.adash .adash-stat-num {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--adash-ink);
}
.adash .adash-stat-foot {
    margin-top: auto;
    font-size: 13px;
    line-height: 1.45;
    color: var(--adash-muted);
}
.adash .adash-stat.is-zero .adash-stat-num { color: var(--adash-muted); font-weight: 600; }
.adash .adash-stat.is-warn::before,
.adash .adash-stat.is-danger::before {
    content: '';
    position: absolute;
    left: 0; top: 16px; bottom: 16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
}
.adash .adash-stat.is-warn::before   { background: var(--adash-warn); }
.adash .adash-stat.is-danger::before { background: var(--adash-danger); }
.adash .adash-stat.is-warn   .adash-stat-num  { color: var(--adash-warn); }
.adash .adash-stat.is-danger .adash-stat-num  { color: var(--adash-danger); }
.adash .adash-stat.is-warn   .adash-stat-foot { color: var(--adash-warn);   font-weight: 600; }
.adash .adash-stat.is-danger .adash-stat-foot { color: var(--adash-danger); font-weight: 600; }
.adash .adash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--adash-hair);
}
.adash .adash-panel-title {
    margin: 0;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--adash-ink);
}
.adash .adash-panel-sub {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--adash-muted);
}
.adash .adash-panel-sub-flag { color: var(--adash-warn); font-weight: 600; }
.adash .adash-tablewrap { width: 100%; overflow-x: auto; }
.adash .adash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.adash .adash-table thead th {
    padding: 10px 11px;
    text-align: left;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--adash-muted);
    background: #f6f8fb;
    border-bottom: 1px solid var(--adash-line);
}
.adash .adash-table tbody td {
    padding: 11px 11px;
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 1px solid var(--adash-hair);
    color: var(--adash-ink-2);
}
.adash .adash-table tbody tr:last-child td { border-bottom: none; }
.adash .adash-table tbody tr:hover td { background: #f7f9fc; }
.adash .adash-table th.adash-num,
.adash .adash-table td.adash-num { text-align: right; }
.adash .adash-table td.adash-svc {
    min-width: 200px;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adash .adash-orderid {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -11px 0;
    padding-right: 4px;
    font-weight: 600;
    color: var(--adash-ink);
    text-decoration: none;
}
.adash .adash-orderid:hover { color: var(--adash-blue); text-decoration: underline; }
.adash .adash-orderid:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 2px; border-radius: 4px; }

.adash .adash-null { color: var(--adash-muted); font-style: italic; }
.adash .adash-time { font-size: 13.5px; color: var(--adash-muted); }
.adash .adash-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--adash-ink-2);
}
.adash .adash-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.adash .adash-dot-cho      { background: #94a3b8; }
.adash .adash-dot-gui      { background: #60a5fa; }
.adash .adash-dot-chay     { background: #2563eb; }
.adash .adash-dot-xong     { background: #29bd73; }
.adash .adash-dot-mot-phan { background: #d17905; }
.adash .adash-dot-lich     { background: #0ea5e9; }
.adash .adash-dot-huy      { background: #64748b; }
.adash .adash-dot-loi      { background: #dc2626; }
.adash .adash-dot-hoan     { background: #7c3aed; }
.adash .adash-dot-khac     { background: #cbd5e1; }
.adash .adash-tablefoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 22px;
    padding: 14px 22px;
    border-top: 1px solid var(--adash-hair);
    background: #f6f8fb;
    font-size: 13.5px;
    color: var(--adash-muted);
}
.adash .adash-tablefoot b { color: var(--adash-ink); font-weight: 700; }
.adash .adash-tablefoot-scope { font-weight: 600; color: var(--adash-ink-2); }
.adash .adash-tablefoot-sum { margin-left: auto; }
.adash .adash-empty-cell { padding: 0; background: #fff; }
.adash .adash-empty { padding: 52px 22px; text-align: center; white-space: normal; }
.adash .adash-empty-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    margin: 0 auto 16px;
    border-radius: 17px;
    background: var(--adash-hair);
    color: #7e8ca3;
    font-size: 23px;
}
.adash .adash-empty-title {
    margin: 0;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--adash-ink);
}
.adash .adash-empty-text {
    max-width: 480px;
    margin: 9px auto 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--adash-muted);
}
.adash .adash-empty-text strong { color: var(--adash-ink-2); font-weight: 700; }
.adash .adash-empty-acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.adash .adash-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 20px;
    border: 1.5px solid var(--adash-line);
    border-radius: 9px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--adash-ink);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.adash .adash-btn-ghost:hover { border-color: #b9c6da; background: #f7f9fc; color: var(--adash-ink); }
.adash .adash-btn-ghost:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 2px; }
@media (max-width: 1599.98px) {
    .adash .adash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1499.98px) {
    .adash .adash-table thead th,
    .adash .adash-table tbody td { padding-left: 13px; padding-right: 13px; }
    .adash .adash-table tbody td.adash-cust,
    .adash .adash-table tbody td.adash-svc {
        white-space: normal;
        line-height: 1.4;
        overflow: visible;
        text-overflow: clip;
    }
    .adash .adash-table td.adash-cust { max-width: 150px; }
    .adash .adash-table td.adash-svc  { max-width: 230px; }
}
@media (max-width: 1199.98px) {
    .adash .adash-hero { grid-template-columns: 1fr; }
    .adash .adash-hero-figure {
        border-right: none;
        border-bottom: 1px solid var(--adash-hair);
        padding-bottom: 20px;
    }
    .adash .adash-link-bottom { margin-top: 16px; }
}

@media (max-width: 991.98px) {
    .adash .adash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .adash .adash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adash .adash-stat  { min-height: 104px; padding: 16px 18px; }
    .adash .adash-stat-num { font-size: 27px; }
    .adash .adash-chart { height: 196px; }
    .adash .adash-hero-figure,
    .adash .adash-hero-chart { padding-left: 20px; padding-right: 20px; }

    .adash .adash-tablewrap { overflow-x: visible; }

    .adash .adash-table thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .adash .adash-table,
    .adash .adash-table tbody,
    .adash .adash-table tr,
    .adash .adash-table td { display: block; width: auto; }

    .adash .adash-table tbody tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--adash-hair);
    }
    .adash .adash-table tbody tr:last-child { border-bottom: none; }
    .adash .adash-table tbody tr:hover td { background: transparent; }

    .adash .adash-table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 18px;
        min-height: 34px;
        padding: 7px 18px;
        border-bottom: none;
        white-space: normal;
        text-align: right;
    }
    .adash .adash-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: var(--adash-muted);
    }
    .adash .adash-table tbody td:first-child { min-height: 44px; align-items: center; }
    .adash .adash-orderid { margin: 0; }
    .adash .adash-table td.adash-svc { max-width: none; overflow: visible; text-overflow: clip; }
    .adash .adash-table td.adash-num { text-align: right; }
    .adash .adash-table .adash-empty-cell { display: block; }
    .adash .adash-table .adash-empty-cell::before { content: none; }
    .adash .adash-tablefoot-sum { margin-left: 0; }
}
@media (max-width: 479.98px) {
    .adash .adash-pagetitle { font-size: 21px; }
    .adash .adash-bignum { font-size: 36px; }
    .adash .adash-stat { min-height: 98px; padding: 14px 15px; }
    .adash .adash-stat-num { font-size: 25px; }
    .adash .adash-stat-label { font-size: 13.5px; }
    .adash .adash-table tbody td { font-size: 14px; }
    .adash .adash-empty { padding: 40px 18px; }
    .adash .adash-empty-acts { flex-direction: column; }
    .adash .adash-btn-ghost { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .adash *,
    .adash *::before,
    .adash *::after {
        transition: none !important;
        animation: none !important;
    }
}

.adash {
    --adash-ok: #15803d;
}
.adash .adash-money,
.adash .adash-idnum,
.adash .adash-dl-v .adash-money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.adash .adash-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 0 2px 12px;
    font-size: 13.5px; color: var(--adash-muted);
}
.adash .adash-crumbs a { color: var(--adash-muted); text-decoration: none; }
.adash .adash-crumbs a:hover { color: var(--adash-blue); text-decoration: underline; }
.adash .adash-crumbs a:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 2px; border-radius: 4px; }
.adash .adash-crumbs-sep { color: var(--adash-muted); font-size: 12px; }
.adash .adash-crumbs-now { color: var(--adash-ink-2); font-weight: 600; }
.adash .adash-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 44px; padding: 0 20px;
    border: 1.5px solid transparent; border-radius: 9px;
    font-size: 14px; font-weight: 600; line-height: 1;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.adash .adash-btn:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 2px; }
.adash .adash-btn[disabled], .adash .adash-btn:disabled { opacity: .5; cursor: not-allowed; }
.adash .adash-btn-primary { background: var(--adash-ink); border-color: var(--adash-ink); color: #fff; }
.adash .adash-btn-primary:hover:not(:disabled) { background: #16304f; border-color: #16304f; color: #fff; }
.adash .adash-btn-danger { background: #fff; border-color: #e6b4b4; color: var(--adash-danger); }
.adash .adash-btn-danger:hover:not(:disabled) { background: #fdf2f2; border-color: var(--adash-danger); color: var(--adash-danger); }
.adash .adash-btn-sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 8px; }
.adash .adash-btn-ico { width: 44px; padding: 0; }
.adash .adash-btn-sm.adash-btn-ico { width: 38px; }
.adash .adash-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 20px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--adash-hair);
}
.adash .adash-search { position: relative; flex: 1 1 340px; max-width: 480px; }
.adash .adash-search-ic {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--adash-faint); font-size: 14px; pointer-events: none;
}
.adash .adash-search-input {
    width: 100%; min-height: 44px;
    padding: 0 96px 0 40px;
    border: 1.5px solid var(--adash-line); border-radius: 9px;
    background: #fff;
    font-size: 14.5px; color: var(--adash-ink-2);
}
.adash .adash-search-input::placeholder { color: #647084; }
.adash .adash-search-input:focus {
    outline: none; border-color: var(--adash-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.adash .adash-search-acts {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: 4px;
}
.adash .adash-search-hint {
    display: flex; align-items: center; gap: 7px;
    margin-top: 8px; font-size: 13px; color: var(--adash-muted);
}
.adash .adash-search-hint i { color: var(--adash-faint); }

.adash .adash-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px; color: var(--adash-muted); }
.adash .adash-counts b { color: var(--adash-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.adash .adash-count-q {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 8px;
    background: #fdf6e9; border: 1px solid #f0dcb8;
    color: var(--adash-warn); font-weight: 600;
}
.adash .adash-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adash .adash-who-name {
    font-size: 14px; font-weight: 700; color: var(--adash-ink); text-decoration: none;
    display: inline-flex; align-items: center; min-height: 26px;
}
.adash .adash-who-name:hover { color: var(--adash-blue); text-decoration: underline; }
.adash .adash-who-name:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 2px; border-radius: 4px; }
.adash .adash-who-meta {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    color: var(--adash-muted);
}
@media (max-width: 767.98px) {
    .adash .adash-who-meta { white-space: normal; overflow: visible; text-overflow: clip; }
}
.adash .adash-idnum {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; color: var(--adash-muted);
}
.adash .adash-money { font-size: 14px; font-weight: 700; color: var(--adash-ink); white-space: nowrap; }
.adash .adash-money.is-in  { color: var(--adash-ok); }
.adash .adash-money.is-out { color: var(--adash-danger); }
.adash .adash-sub { display: block; margin-top: 3px; font-size: 13px; color: var(--adash-muted); white-space: nowrap; }
.adash .adash-when { line-height: 1.45; white-space: nowrap; }
.adash .adash-when-d { display: block; font-size: 14px; color: var(--adash-ink-2); font-variant-numeric: tabular-nums; }
.adash .adash-when-t { display: block; font-size: 13px; color: var(--adash-muted); font-variant-numeric: tabular-nums; }
.adash .adash-dot-bat  { background: #29bd73; }
.adash .adash-dot-tat  { background: #94a3b8; }
.adash .adash-dot-cong { background: #29bd73; }
.adash .adash-dot-tru  { background: #dc2626; }
.adash .adash-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.adash .adash-chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 34px; padding: 0 12px;
    border: 1.5px dashed var(--adash-edge); border-radius: 8px;
    background: #fff; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--adash-muted);
    white-space: nowrap; transition: border-color .15s ease, background .15s ease;
}
.adash .adash-chip:hover { border-color: #b9c6da; background: #f7f9fc; color: var(--adash-ink-2); }
.adash .adash-chip:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 2px; }
.adash .adash-chip.is-set { border-style: solid; border-color: var(--adash-edge); color: var(--adash-ink); }
.adash .adash-chip-val {
    padding: 1px 7px; border-radius: 6px;
    background: var(--adash-hair); color: var(--adash-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; font-weight: 700;
}
.adash .adash-dl { margin: 0; }
.adash .adash-dl-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px;
    padding: 13px 0; border-bottom: 1px solid var(--adash-hair);
}
.adash .adash-dl-row:last-child { border-bottom: none; }
.adash .adash-dl-k { flex: 0 0 190px; font-size: 14px; font-weight: 600; color: var(--adash-muted); }
.adash .adash-dl-v { flex: 1 1 220px; min-width: 0; font-size: 14.5px; color: var(--adash-ink-2); word-break: break-word; }
.adash .adash-form { padding: 20px 22px; }
.adash .adash-grid { display: grid; gap: 18px 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.adash .adash-field { display: block; }
.adash .adash-flabel {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 7px;
    font-size: 14px; font-weight: 600; color: var(--adash-ink-2);
}
.adash .adash-req { color: var(--adash-danger); font-weight: 700; }
.adash .adash-input, .adash select.adash-input, .adash textarea.adash-input {
    width: 100%; min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--adash-line); border-radius: 9px;
    background: #fff;
    font-size: 14.5px; line-height: 1.5; color: var(--adash-ink-2);
}
.adash .adash-input:focus {
    outline: none; border-color: var(--adash-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.adash .adash-input[readonly], .adash .adash-input:disabled { background: #f6f8fb; color: var(--adash-muted); }
.adash .adash-input.is-bad { border-color: var(--adash-danger); }
.adash .adash-input.is-bad:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .16); }
.adash .adash-help { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--adash-muted); }
.adash .adash-help i { margin-top: 2px; color: var(--adash-faint); }
.adash .adash-err {
    display: flex; align-items: flex-start; gap: 7px;
    margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--adash-danger);
}
.adash .adash-inputwrap { display: flex; align-items: stretch; }
.adash .adash-inputwrap .adash-input { border-radius: 0; }
.adash .adash-inputwrap > :first-child { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.adash .adash-inputwrap > :last-child { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.adash .adash-affix {
    display: inline-flex; align-items: center; padding: 0 14px;
    border: 1.5px solid var(--adash-line); background: #f6f8fb;
    font-size: 14px; font-weight: 600; color: var(--adash-muted); white-space: nowrap;
}
.adash .adash-inputwrap .adash-affix:first-child { border-right: 0; }
.adash .adash-inputwrap .adash-affix:last-child { border-left: 0; }
.adash .adash-formacts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--adash-hair); background: #f6f8fb;
}
.adash .adash-note {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 16px; border-radius: 10px;
    border: 1px solid var(--adash-line); background: #f6f8fb;
    font-size: 14px; line-height: 1.6; color: var(--adash-ink-2);
}
.adash .adash-note i { margin-top: 3px; flex: none; color: var(--adash-faint); }
.adash .adash-note strong { color: var(--adash-ink); font-weight: 700; }
.adash .adash-note-warn { border-color: #f0dcb8; background: #fdf6e9; }
.adash .adash-note-warn i { color: var(--adash-warn); }
.adash .adash-note-danger { border-color: #e6b4b4; background: #fdf2f2; }
.adash .adash-note-danger i { color: var(--adash-danger); }
.adash .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--adash-edge); border-radius: 11px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .13);
    min-width: 224px; font-size: 14px;
}
.adash .dropdown-item {
    display: flex; align-items: center; gap: 11px;
    min-height: 42px; padding: 0 12px;
    border-radius: 7px; color: var(--adash-ink-2);
}
.adash .dropdown-item i { width: 17px; text-align: center; color: var(--adash-faint); }
.adash .dropdown-item:hover, .adash .dropdown-item:focus { background: #f7f9fc; color: var(--adash-ink); }
.adash .dropdown-item.adash-item-danger { color: var(--adash-danger); }
.adash .dropdown-item.adash-item-danger i { color: var(--adash-danger); }
.adash .dropdown-item.adash-item-danger:hover { background: #fdf2f2; color: var(--adash-danger); }
.adash .dropdown-divider { margin: 6px 4px; border-color: var(--adash-hair); }
.adash-modal .modal-content {
    border: 1px solid var(--adash-edge); border-radius: 15px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .17);
    overflow: hidden;
}
.adash-modal .modal-header {
    align-items: center; gap: 14px; padding: 17px 22px;
    background: #fff; border-bottom: 1px solid var(--adash-hair);
}
.adash-modal .modal-title {
    margin: 0; font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 17px; font-weight: 700; color: #0b1c30;
}
.adash-modal .modal-title .adash-who-name { font-size: 17px; }
.adash-modal .modal-body { padding: 20px 22px; background: #fff; font-size: 14.5px; color: #1e293b; }
.adash-modal .modal-footer {
    gap: 10px; padding: 15px 22px;
    background: #f6f8fb; border-top: 1px solid #eaeef4;
}
.adash-modal .btn-close {
    width: 40px; height: 40px; padding: 0; margin: 0; opacity: 1;
    border: 1.5px solid #dfe5ee; border-radius: 9px; background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230b1c30'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: center; background-size: 13px auto;
    text-indent: -9999px; overflow: hidden;
}
.adash-modal .btn-close:hover { background-color: #f7f9fc; border-color: #ccd6e4; }
.adash-modal .btn-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.adash-modal .adash-picker { position: relative; }
.adash-modal .adash-picker-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px);
    display: none; z-index: 1056; max-height: 320px; overflow-y: auto;
    background: #fff; border: 1px solid #ccd6e4; border-radius: 11px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .13);
}
.adash-modal .service-item {
    padding: 12px 15px; border-bottom: 1px solid #eaeef4;
    cursor: pointer; font-size: 14px;
}
.adash-modal .service-item:last-child { border-bottom: none; }
.adash-modal .service-item:hover { background: #f7f9fc; }
.adash-modal .adash-list { max-height: 320px; overflow-y: auto; }
.adash .adash-pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 22px; padding: 14px 22px;
    border-top: 1px solid var(--adash-hair); background: #f6f8fb;
    font-size: 13.5px; color: var(--adash-muted);
}
.adash .adash-pager b { color: var(--adash-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.adash .adash-pager .pagination { margin: 0; gap: 5px; flex-wrap: wrap; }
.adash .adash-pager .page-link {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--adash-line); border-radius: 8px;
    background: #fff; color: var(--adash-ink-2); font-size: 14px;
}
.adash .adash-pager .page-link:hover { background: #f0f4fa; border-color: var(--adash-edge); color: var(--adash-ink); }
.adash .adash-pager .page-item.active .page-link { background: var(--adash-ink); border-color: var(--adash-ink); color: #fff; }
.adash .adash-pager .page-item.disabled .page-link { color: var(--adash-faint); background: #fff; }
@media (max-width: 991.98px) {
    .adash .adash-dl-k { flex: 0 0 150px; }
}

@media (max-width: 767.98px) {
    .adash .adash-toolbar, .adash .adash-pager, .adash .adash-formacts { padding: 13px 16px; }
    .adash .adash-form { padding: 16px; }
    .adash .adash-search { max-width: none; flex-basis: 100%; }
    .adash .adash-table tbody td .adash-who,
    .adash .adash-table tbody td .adash-chips { align-items: flex-end; }
    .adash .adash-table tbody td .adash-when { text-align: right; }
    .adash .adash-dl-row { flex-direction: column; gap: 3px; }
    .adash .adash-dl-k { flex: none; }
    .adash .adash-formacts .adash-btn { flex: 1 1 auto; }
}

@media (max-width: 479.98px) {
    .adash .adash-who-name { font-size: 14.5px; }
    .adash .adash-money { font-size: 14.5px; }
    .adash .adash-formacts { flex-direction: column; align-items: stretch; }
}
.adash .adash-pageacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.adash .adash-btn.adash-btn-ghost {
    border-color: var(--adash-line);
    background: #fff;
    color: var(--adash-ink);
}
.adash .adash-btn.adash-btn-ghost:hover:not(:disabled) {
    border-color: #b9c6da;
    background: #f7f9fc;
    color: var(--adash-ink);
}
.adash .adash-panel-body { padding: 8px 22px; }
.adash .adash-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.adash .adash-stat-num-sm { font-size: 21px; letter-spacing: -.012em; }
.adash .adash-celllink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -11px 0;
    max-width: 100%;
    color: var(--adash-blue);
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adash .adash-celllink:hover { color: #1d4ed8; text-decoration: underline; }
.adash .adash-celllink:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 1499.98px) {
    .adash .adash-stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .adash .adash-stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adash .adash-panel-body { padding: 6px 16px; }
    .adash .adash-celllink {
        margin: 0;
        word-break: break-all;
        text-align: right;
    }
}

@media (max-width: 575.98px) {
    .adash .adash-pageacts { width: 100%; }
    .adash .adash-pageacts .adash-btn { flex: 1 1 auto; }
}

@media (max-width: 479.98px) {
    .adash .adash-stat-num-sm { font-size: 17px; }
}
.adash .adash-inputwrap > .adash-btn:last-child { border-left: 0; }
.adash .adash-searchform { flex: 1 1 340px; min-width: 0; max-width: 480px; }
.adash .adash-searchform .adash-search { max-width: none; }
.adash .adash-btn-block { width: 100%; }
.adash .adash-subhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 14px;
}
.adash .adash-tablewrap-roomy { min-height: 480px; }

@media (max-width: 767.98px) {
    .adash .adash-searchform { max-width: none; flex-basis: 100%; }
    .adash .adash-tablewrap-roomy { min-height: 0; }
}
.adash .adash-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199.98px) {
    .adash .adash-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.adash .adash-link-inline { color: var(--adash-blue); font-weight: 600; text-decoration: none; }
.adash .adash-link-inline:hover { text-decoration: underline; }
.adash .adash-link-inline:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 2px; border-radius: 4px; }
.adash .adash-moneycell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.adash .adash-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 260px;
    max-width: 420px;
    white-space: normal;
    font-size: 14px;
    line-height: 1.5;
    color: var(--adash-ink-2);
}
.adash .adash-lines .adash-sub { margin-top: 0; white-space: normal; }

@media (max-width: 767.98px) {
    .adash .adash-table tbody td .adash-lines {
        align-items: flex-end;
        text-align: right;
        max-width: none;
    }
}
.adash .adash-progress {
    display: block;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--adash-hair);
}
.adash .adash-progress-bar {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: 999px;
    background: var(--adash-ink);
    transition: width .2s ease;
}
.adash .adash-progress-bar.is-done { background: #29bd73; }
.adash .adash-table .adash-progress { height: 8px; margin-top: 6px; }
.adash .adash-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 2px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--adash-ink-2);
    cursor: pointer;
}
.adash .adash-check input[type="checkbox"],
.adash .adash-check input[type="radio"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--adash-ink);
    cursor: pointer;
}
.adash .adash-check input:focus-visible {
    outline: 2px solid var(--adash-blue);
    outline-offset: 2px;
}
.adash .adash-checks { display: flex; flex-direction: column; gap: 2px; }
.adash .adash-table .adash-check { gap: 0; justify-content: flex-start; }
.adash .adash-input-auto { width: auto; min-width: 220px; max-width: 100%; }
.adash .adash-input-num {
    width: 84px;
    min-width: 84px;
    flex: 0 0 auto;
    text-align: center;
}
.adash .adash-input-mono,
.adash textarea.adash-input-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    line-height: 1.55;
}
.adash .adash-input.is-invalid { border-color: var(--adash-danger); }
.adash .adash-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .16); }
.adash .adash-input.is-valid { border-color: var(--adash-ok); }
.adash .adash-input.is-valid:focus { box-shadow: 0 0 0 3px rgba(21, 128, 61, .16); }
.adash .adash-scrollbox {
    max-height: 500px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.adash .adash-scrollbox-sm { max-height: 300px; }
.adash .adash-scrollbox::-webkit-scrollbar { width: 8px; }
.adash .adash-scrollbox::-webkit-scrollbar-track { background: var(--adash-hair); border-radius: 4px; }
.adash .adash-scrollbox::-webkit-scrollbar-thumb { background: var(--adash-edge); border-radius: 4px; }
.adash .adash-scrollbox::-webkit-scrollbar-thumb:hover { background: #b9c6da; }
.adash .adash-table td.adash-group {
    padding: 11px 18px;
    background: #f6f8fb;
    border-top: 1px solid var(--adash-edge);
    border-bottom: 1px solid var(--adash-hair);
}
.adash .adash-table tbody tr:hover td.adash-group { background: #f6f8fb; }
.adash .adash-group-in {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
}
.adash .adash-group-name { font-size: 15px; font-weight: 700; color: var(--adash-ink); }
.adash .adash-group-in > i { align-self: center; color: var(--adash-muted); }
.adash .adash-table tbody tr.adash-row-flag td { background: #fdf6e9; }
.adash .adash-table tbody tr.adash-row-flag:hover td { background: #fbf0dc; }
.adash .adash-rowacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.adash .adash-rowacts > form { display: flex; margin: 0; }
.adash .adash-rowacts .adash-btn { flex: 0 0 auto; }
.adash .adash-cellname { font-weight: 700; color: var(--adash-ink); }
.adash .adash-note-ok { border-color: #bfe3cc; background: #f1faf4; }
.adash .adash-note-ok i { color: var(--adash-ok); }
.adash .adash-dismiss {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 19px;
    line-height: 1;
    color: var(--adash-muted);
    cursor: pointer;
}
.adash .adash-dismiss:hover { background: #f7f9fc; color: var(--adash-ink); }
.adash .adash-dismiss:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: 2px; }
.adash .adash-pre {
    display: block;
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid var(--adash-hair);
    border-radius: 9px;
    background: #f6f8fb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
    white-space: pre;
    tab-size: 2;
}
.adash .adash-pre code { font: inherit; color: inherit; background: none; padding: 0; }
.adash .adash-code-block {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border-radius: 7px;
    background: var(--adash-hair);
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.adash .adash-delta {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.adash .adash-delta i { font-size: 11px; color: var(--adash-muted); }
.adash .adash-compare {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    max-width: 320px;
    white-space: normal;
    font-size: 14px;
    line-height: 1.5;
    color: var(--adash-ink-2);
}
.adash .adash-compare .adash-sub { margin-top: 0; white-space: normal; }
.adash .adash-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0 8px;
    list-style: none;
    border-bottom: 1px solid var(--adash-hair);
}
.adash .adash-tabs .adash-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--adash-muted);
    cursor: pointer;
}
.adash .adash-tabs .adash-tab:hover { color: var(--adash-ink); background: #f7f9fc; }
.adash .adash-tabs .adash-tab:focus-visible { outline: 2px solid var(--adash-blue); outline-offset: -2px; }
.adash .adash-tabs .adash-tab.active {
    color: var(--adash-ink);
    background: transparent;
    border-bottom-color: var(--adash-ink);
}
.adash .adash-tabs .adash-tab i { color: var(--adash-muted); }
.adash .adash-tabs .adash-tab.active i { color: var(--adash-ink); }
.adash .adash-panel > .adash-tabs:last-child { border-bottom: 0; }
.adash .adash-dot-chua-doc { background: #d17905; }
.adash .adash-dot-canh-bao { background: #d17905; }
.adash .adash-steps { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; }
.adash .adash-step { display: flex; align-items: flex-start; gap: 12px; }
.adash .adash-step-num {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--adash-hair);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--adash-ink);
    font-variant-numeric: tabular-nums;
}
.adash .adash-step-body { min-width: 0; flex: 1 1 auto; }
.adash .adash-step-title {
    margin: 5px 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--adash-ink);
}
.adash .adash-step-text { margin: 0; font-size: 14px; line-height: 1.65; color: var(--adash-ink-2); }
.adash .adash-box {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--adash-line);
    border-radius: 11px;
    background: #f6f8fb;
    font-size: 14px;
    line-height: 1.6;
    color: var(--adash-ink-2);
}
.adash .adash-box strong { color: var(--adash-ink); font-weight: 700; }
.adash .adash-btn-ico-static {
    width: 44px;
    padding: 0;
    text-align: center;
    line-height: 41px;
}
.adash .adash-btn-sm.adash-btn-ico-static { width: 38px; line-height: 35px; }
.adash .adash-table.table { margin-bottom: 0; }
.adash .adash-table.table td,
.adash .adash-table.table th { border-top: 0; }
.adash-modal .user-option {
    padding: 12px 15px;
    border-bottom: 1px solid #eaeef4;
    cursor: pointer;
    font-size: 14px;
}
.adash-modal .user-option:last-child { border-bottom: none; }
.adash-modal .user-option:hover { background: #f7f9fc; }

@media (max-width: 767.98px) {
    .adash .adash-table tbody td .adash-rowacts { justify-content: flex-end; }
    .adash .adash-table tbody td .adash-compare { align-items: flex-end; text-align: right; max-width: none; }
    .adash .adash-table tbody td.adash-group { text-align: left; }
    .adash .adash-table tbody td.adash-group::before { content: none; }
    .adash .adash-tabs { padding: 0 4px; }
    .adash .adash-tabs .adash-tab { padding: 0 11px; font-size: 13.5px; }
}

@media (max-width: 575.98px) {
    .adash .adash-rowacts { width: auto; }
    .adash .adash-rowacts .adash-btn { flex: 0 0 auto; }
}

@media (max-width: 479.98px) {
    .adash .adash-rowacts .adash-btn-ghost,
    .adash .adash-rowacts .adash-btn-danger { width: auto; }
    .adash .adash-rowacts .adash-btn-sm.adash-btn-ico { width: 38px; }
    .adash .adash-input-auto { width: 100%; min-width: 0; }
}
.adash .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px;
    border: 1px solid transparent; border-radius: 7px;
    font-size: 13px; font-weight: 600; line-height: 1.5;
    vertical-align: baseline; white-space: nowrap;
}
.adash .badge-success,  .adash .bg-success  { background: #eaf6ee; color: #166534; border-color: #c3e6ce; }
.adash .badge-danger,   .adash .bg-danger   { background: #fdeaea; color: #991b1b; border-color: #f3c9c9; }
.adash .badge-warning,  .adash .bg-warning  { background: #fdf3e3; color: #854d0e; border-color: #f0dcb8; }
.adash .badge-info,     .adash .bg-info     { background: #e8f6fa; color: #155e75; border-color: #b9e2ee; }
.adash .badge-secondary,.adash .bg-secondary{ background: #eef2f7; color: #334155; border-color: var(--adash-line); }
.adash .badge-primary,  .adash .bg-primary  { background: #e9f0fe; color: #1d4ed8; border-color: #c6d9fb; }
.adash .badge-light, .adash .badge-dark     { background: #eef2f7; color: #334155; border-color: var(--adash-line); }
.adash .pagination { margin: 0; gap: 5px; flex-wrap: wrap; }
.adash .page-link {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--adash-line); border-radius: 8px;
    background: #fff; color: var(--adash-ink-2); font-size: 14px;
}
.adash .page-link:hover { background: #f0f4fa; border-color: var(--adash-edge); color: var(--adash-ink); }
.adash .page-link:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.adash .page-item.active .page-link { background: var(--adash-ink); border-color: var(--adash-ink); color: #fff; }
.adash .page-item.disabled .page-link { color: var(--adash-faint); background: #fff; }
.adash .adash-pager nav .small,
.adash .adash-pager nav p,
.adash nav .pagination ~ p,
.adash .adash-pager .small { font-size: 13.5px; color: var(--adash-muted); }
.adash .adash-pager .small .small { font-size: 1em; }
.adash .adash-pager .fw-semibold,
.adash .adash-pager nav .fw-semibold { font-size: 13.5px; font-weight: 700; color: var(--adash-ink); }
.adash .adash-pager .page-item.disabled .page-link,
.adash .page-item.disabled .page-link { color: #647084; }
.adash .text-muted { color: var(--adash-muted) !important; }
.adash code,
.adash .adash-help code,
.adash .adash-note code {
    font-size: 12.5px;
    padding: 1px 6px;
    border-radius: 5px;
    background: #eaeef4;
    color: #334155;
}
.adash .adash-note a,
.adash .adash-help a,
.adash .adash-empty-text a,
.adash .adash-dl-v a,
.adash .adash-panel-sub a,
.adash .adash-pagesub a {
    color: var(--adash-blue);
    font-weight: 600;
    text-decoration: underline;
}
.adash .adash-note a:hover,
.adash .adash-help a:hover,
.adash .adash-empty-text a:hover,
.adash .adash-dl-v a:hover,
.adash .adash-panel-sub a:hover,
.adash .adash-pagesub a:hover { color: #1d4ed8; }
.adash .adash-table thead th:last-child,
.adash .adash-table tbody td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
}
.adash .adash-table thead th:last-child {
    background: #f6f8fb;
    z-index: 3;
}
.adash .adash-table thead th:last-child::before,
.adash .adash-table tbody td:last-child::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 1px;
    background: var(--adash-line);
}
.adash .adash-table tbody tr:hover td:last-child { background: #f7f9fc; }
.adash .adash-table tbody td.adash-empty-cell { position: static; }

@media (max-width: 767.98px) {
    .adash .adash-table thead th:last-child,
    .adash .adash-table tbody td:last-child { position: static; background: transparent; }
    .adash .adash-table thead th:last-child::before,
    .adash .adash-table tbody td:last-child::before { content: none; }
}
.adash .adash-table tbody td.adash-svc {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-width: 200px;
    max-width: 320px;
    line-height: 1.45;
}
.adash .adash-table tbody td.adash-svc .adash-who-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: inline;
}
.adash .adash-table tbody .adash-celllink {
    display: inline;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 0;
    min-height: 0;
}
.adash .adash-code,
.adash .adash-idnum,
.adash .adash-chip-val,
.adash .adash-table .adash-status {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}
.adash .adash-table tbody td.adash-cust {
    white-space: normal;
    max-width: 160px;
    line-height: 1.45;
}
.adash .adash-table tbody td.adash-cust .adash-who-name {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .adash .adash-table tbody td.adash-svc,
    .adash .adash-table tbody td.adash-cust { max-width: none; min-width: 0; }
}
.adash .adash-table thead th:last-child,
.adash .adash-table tbody td:last-child {
    box-shadow: -8px 0 10px -8px rgba(15, 23, 42, .22);
}
.adash .adash-table thead th:last-child::before,
.adash .adash-table tbody td:last-child::before { content: none; }

@media (max-width: 767.98px) {
    .adash .adash-table thead th:last-child,
    .adash .adash-table tbody td:last-child { box-shadow: none; }
}
.adash .adash-table tbody td { font-size: 13px; line-height: 1.5; padding: 10px 11px; }
.adash .adash-table tbody td .adash-who-name { font-size: 13px; }
.adash .adash-table tbody td .adash-who-meta { font-size: 12.5px; }
.adash .adash-table tbody td .adash-money    { font-size: 13px; }
.adash .adash-table tbody td .adash-sub      { font-size: 12px; }
.adash .adash-table tbody td .adash-status   { font-size: 12.5px; }
.adash .adash-table tbody td .adash-when-d   { font-size: 12.5px; }
.adash .adash-table tbody td .adash-when-t   { font-size: 12px; }
.adash .adash-table tbody td .adash-code,
.adash .adash-table tbody td .adash-idnum,
.adash .adash-table tbody td .adash-chip-val { font-size: 12px; padding: 1px 6px; }
.adash .adash-table tbody td .adash-chip     { font-size: 12.5px; min-height: 30px; padding: 0 10px; }
.adash .adash-table tbody td .adash-time     { font-size: 12px; }
.adash .adash-table tbody td .adash-lines    { font-size: 13px; }
.adash .adash-table tbody td .badge          { font-size: 12px; padding: 2px 8px; }
.adash .adash-table tbody td .adash-btn      { font-size: 12.5px; min-height: 32px; padding: 0 12px; }
.adash .adash-table tbody td .adash-btn-sm   { font-size: 12px;   min-height: 29px; padding: 0 10px; }
.adash .adash-table tbody td .dropdown-item  { font-size: 13px; min-height: 40px; }

@media (max-width: 767.98px) {
    .adash .adash-table tbody td { font-size: 13.5px; padding: 7px 16px; }
    .adash .adash-table tbody td .adash-who-name { font-size: 14px; }
    .adash .adash-table tbody td .adash-money    { font-size: 14px; }
}

/* ===== Admin reskin — dong bo nhan dien xanh la voi trang client ===== */
.adash {
    --adash-blue: #29bd73;
    --adash-edge: #e8e8e8;
    --adash-line: #e8e8e8;
    --adash-hair: #f0f3f1;
}
.adash .adash-btn-primary {
    background: #29bd73;
    border-color: #29bd73;
}
.adash .adash-btn-primary:hover:not(:disabled) {
    background: #1e9c5c;
    border-color: #1e9c5c;
}
.adash .adash-input:focus {
    border-color: #29bd73;
    box-shadow: 0 0 0 3px rgba(41, 189, 115, .18);
}
.adash .adash-tabs .adash-tab.active {
    color: #1e9c5c;
    border-bottom-color: #29bd73;
}
.adash .adash-tabs .adash-tab.active i,
.adash .adash-tabs .adash-tab:hover i {
    color: #29bd73;
}
.adash .adash-check input[type="checkbox"],
.adash .adash-check input[type="radio"] {
    accent-color: #29bd73;
}
.adash .adash-panel {
    border-color: #e8e8e8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.adash .adash-btn-ghost:hover {
    border-color: #29bd73;
    color: #1e9c5c;
    background: #f2fbf6;
}

/* ===== Mau sac trang + bang (payment-methods & admin tables) ===== */
.adash .adash-panel-head {
    background: #fafdfb;
    border-bottom: 1px solid #e8f3ec;
}
.adash .adash-table thead th {
    background: #f2fbf6;
    color: #14532d;
    font-weight: 700;
    border-bottom: 2px solid #d3eede;
}
.adash .adash-table tbody tr:nth-child(even) { background: #fafcfb; }
.adash .adash-table tbody tr:hover { background: #f0faf4; }
.adash .adash-code {
    background: #eef6f1;
    color: #14532d;
    border: 1px solid #d3eede;
    border-radius: 6px;
    padding: 2px 8px;
}
.adash .adash-money { color: #1e9c5c; font-weight: 600; }

/* Cham mau theo loai phuong thuc */
.adash .pm-type .adash-dot,
.adash .pm-proc-auto .adash-dot,
.adash .pm-proc-manual .adash-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.adash .pm-type-auto .adash-dot     { background: #29bd73; }
.adash .pm-type-crypto .adash-dot   { background: #f7931a; }
.adash .pm-type-manual .adash-dot   { background: #64748b; }
.adash .pm-type-qr_code .adash-dot  { background: #2563eb; }
.adash .pm-type-e_wallet .adash-dot { background: #8b5cf6; }
.adash .pm-type-auto     { color: #1e9c5c; }
.adash .pm-type-crypto   { color: #b45309; }
.adash .pm-proc-auto .adash-dot   { background: #29bd73; }
.adash .pm-proc-manual .adash-dot { background: #94a3b8; }

/* ============================================================
   OC — Orders Card components (dùng chung admin + client)
   Nguồn gốc: resources/views/orders/index.blade.php (trang orders của user)
   Đưa lên đây để admin và client cùng một ngôn ngữ thiết kế.
   ============================================================ */

/* Thuộc tính [hidden] của HTML phải thắng mọi `display` của component OC.
   Không có rule này thì `.oc-err` (block), `.oc-note` / `.oc-testbox` /
   `.oc-fieldfoot` (flex), `.oc-sync` (inline-flex) đè mất [hidden] → hộp lỗi
   rỗng hiện thường trực (users/index, providers/*, api-providers/index).
   Đã rà: không có JS nào hiện element mang [hidden] bằng style.display. */
[hidden] { display: none !important; }

/* .oc-tag dùng làm thẻ <a> (tag đơn cha link sang đơn gốc) bị reboot
   Bootstrap gạch chân khi hover. */
a.oc-tag, a.oc-tag:hover, a.oc-tag:focus { text-decoration: none; }

/* ---- Mở modal không được làm cả trang xê dịch ----
   Bootstrap khoá cuộn bằng `body { overflow: hidden }`; thanh cuộn biến mất nên
   vùng nhìn rộng thêm ~15px. Nó có bù `padding-right` cho <body> và cho các phần
   tử .fixed-top/.is-fixed/.sticky-top, NHƯNG bỏ qua phần tử hẹp hơn cả màn hình
   (điều kiện `window.innerWidth > element.clientWidth + scrollbarWidth` trong
   scrollbar.js). Navbar admin rộng calc(100% - 250px) và bulk bar nổi đều rơi vào
   diện bị bỏ qua -> navbar trượt ngang 15px, bulk bar 7px; navbar lại có
   transition .3s nên trông như cả trang đang động.
   Cách chữa: giữ chỗ thanh cuộn vĩnh viễn để nó không bao giờ biến mất, rồi bỏ
   luôn phần bù padding của Bootstrap (giờ đã thừa). Trình duyệt cũ không hiểu
   scrollbar-gutter thì chỉ đơn giản chạy y như trước, không hỏng thêm gì. */
html { scrollbar-gutter: stable; }
body.modal-open { padding-right: 0 !important; }

/* Bộ màu OC phải sống ở phạm vi tài liệu, KHÔNG chỉ trong .oc-card.
   Modal (.oc-modal), toast… render ngoài card nên trước đây mọi var(--oc-*)
   không có giá trị dự phòng đều rỗng: .oc-input thành nền trong suốt + viền
   trong suốt = ô nhập vô hình trên nền trắng của modal.
   Giá trị dưới đây trùng đúng phần dự phòng đang viết rải rác trong file. */
:root {
    --oc-ink:   #0b1c30;
    --oc-ink-2: #1e293b;
    --oc-muted: #5d6d82;
    --oc-faint: #94a3b8;
    --oc-line:  #d9dfea;
    --oc-hair:  #eef2f6;
    --oc-fill:  #f1f5f9;
}

.oc-card {
    --oc-ink:   #0b1c30;
    --oc-ink-2: #1e293b;
    --oc-muted: #5d6d82;
    --oc-faint: #94a3b8;
    --oc-line:  #d9dfea;
    --oc-hair:  #eef2f6;
    --oc-fill:  #f1f5f9;

    background: #fff;
    border: 1px solid var(--oc-line);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(30, 41, 59, .06);
    overflow: hidden;
}
.oc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--oc-hair);
}
/* Khối tiêu đề (h2 + oc-card-sub) phải CO ĐƯỢC, nếu không nó chiếm hết bề ngang
   rồi đẩy cụm nút .oc-acts xuống dòng dưới — thấy rõ ở trang có 2–3 nút như
   Nhà cung cấp API. Cho co lại và để chữ tự xuống dòng, nút vẫn nằm bên phải. */
.oc-card-head > div:first-child { flex: 1 1 260px; min-width: 0; }
.oc-card-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--oc-ink); }
.oc-card-title i { color: #29bd73; }
.oc-card-sub { margin: 3px 0 0; font-size: 13px; color: var(--oc-muted); }

/* ---- oc-hint: chấm hỏi giải thích ----------------------------------------
   Đoạn giải thích dài KHÔNG nằm chình ình trong trang nữa, mà nấp sau icon này;
   trỏ chuột (hoặc chạm trên điện thoại, hoặc Tab tới) mới hiện.
   Hộp mở XUỐNG DƯỚI là cố ý: .oc-card có overflow:hidden nên mở lên trên sẽ bị
   cắt mất. Cũng vì thế: đừng đặt oc-hint bên trong .oc-tablewrap. */
.oc-hint {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 6px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--oc-hair, #eef2f6); color: var(--oc-muted, #5d6d82);
    font-size: 11px; line-height: 1; cursor: help;
    vertical-align: middle; flex: none;
}
.oc-hint:hover, .oc-hint:focus-visible { background: #dbeafe; color: #0b7ab5; }
.oc-hint-box {
    /* Toạ độ do JS đặt (ocHintPlace ở layout). Dùng position:fixed để thoát khỏi
       overflow:hidden của .oc-card và .oc-tablewrap — nhờ vậy hint đặt được ở BẤT KỲ
       đâu, kể cả trong ô bảng hay trong card thấp tè, không lo bị xén. */
    position: fixed; top: 0; left: 0;
    z-index: 1060; width: max-content; max-width: 320px;
    padding: 9px 11px; border-radius: 10px;
    background: #0b1c30; color: #fff;
    font-size: 12.5px; font-weight: 400; line-height: 1.55; text-align: left;
    white-space: normal;
    box-shadow: 0 8px 24px rgba(11, 28, 48, .22);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease;
}
/* Mũi tên bám theo icon: JS tính --oc-hint-arrow vì hộp đã rời khỏi dòng chảy trang */
.oc-hint-box::before {
    content: ""; position: absolute; bottom: 100%; left: var(--oc-hint-arrow, 12px);
    border: 6px solid transparent; border-bottom-color: #0b1c30;
}
.oc-hint-box.is-above::before {
    bottom: auto; top: 100%;
    border-bottom-color: transparent; border-top-color: #0b1c30;
}
.oc-hint:hover .oc-hint-box,
.oc-hint:focus .oc-hint-box,
.oc-hint:focus-within .oc-hint-box { opacity: 1; visibility: visible; }

@media (max-width: 768px) {
    /* Vùng chạm 42px như nút icon, nhưng viên tròn nhìn vẫn nhỏ */
    .oc-hint { width: 26px; height: 26px; font-size: 13px; }
    .oc-hint-box { max-width: min(320px, 78vw); }
}
.oc-card-stamp {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--oc-muted); font-variant-numeric: tabular-nums;
}

/* ---- Filters ---- */
.oc-filters { padding: 16px 20px; border-bottom: 1px solid var(--oc-hair); }
.oc-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--oc-ink-2); }
/* Ô nhập phải nhìn ra được là ô nhập kể cả khi chưa bấm vào: nền trắng, viền xám
   rõ, chữ đậm hơn nền. Bản cũ dùng nền xám + viền trong suốt nên ô chìm vào card. */
.oc-input {
    width: 100%;
    height: 42px;
    padding: 10px 14px;
    background-color: #fff;
    border: 1px solid #c3cedb;
    border-radius: 8px;
    color: var(--oc-ink);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Placeholder nhạt hơn hẳn giá trị thật để không nhầm ô rỗng với ô đã điền. */
.oc-input::placeholder { color: #9aa8ba; font-weight: 400; }
.oc-input:hover:not(:disabled):not([readonly]) { border-color: #94a3b8; }
.oc-input:focus {
    outline: none;
    background-color: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
.oc-input:disabled, .oc-input[readonly] {
    background-color: var(--oc-fill);
    border-color: #dde4ec;
    color: var(--oc-muted);
    box-shadow: none;
}
select.oc-input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 38px; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2.4' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 13px;
}
.oc-search { display: flex; gap: 8px; }
.oc-search-wrap { position: relative; flex: 1; min-width: 0; }
.oc-search-ico {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--oc-faint); font-size: 13px; pointer-events: none;
}
.oc-search-wrap .oc-input { padding-left: 40px; }

.oc-btn {
    height: 42px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px; font-weight: 700; font-family: inherit;
    white-space: nowrap; cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.oc-btn:disabled { opacity: .5; cursor: not-allowed; }
.oc-btn-primary {
    background: linear-gradient(135deg, #0b7ab5, #05699e);
    border: none; color: #fff;
    box-shadow: 0 4px 14px rgba(51, 177, 249, .32);
}
.oc-btn-primary:hover:not(:disabled), .oc-btn-primary:focus-visible {
    background: linear-gradient(135deg, #0a6fa8, #045b87);
    color: #fff; box-shadow: 0 6px 18px rgba(51, 177, 249, .42);
}
.oc-btn-primary:active:not(:disabled) { transform: translateY(1px); }
.oc-btn-ghost {
    background: #fff; border: 1.5px solid #cbd5e1; color: #475569; font-weight: 600;
}
.oc-btn-ghost:hover, .oc-btn-ghost:focus-visible { border-color: var(--oc-faint); color: var(--oc-ink); background: #f8fafc; }
.oc-btn-danger { background: #fff; border: 1.5px solid #fca5a5; color: #b42318; }
.oc-btn-danger:hover:not(:disabled), .oc-btn-danger:focus-visible { background: #b42318; border-color: #b42318; color: #fff; }
.oc-btn-sm { height: 34px; padding: 6px 13px; font-size: 12.5px; }
.oc-btn-block { width: 100%; } /* nút Tìm kiếm chiếm trọn cột phải ngoài cùng của oc-filters */
.oc-btn:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 2px; }

.oc-adv { border-top: 1px solid var(--oc-hair); margin-top: 14px; padding-top: 14px; }
.oc-chev { transition: transform .18s ease; }
[aria-expanded="true"] .oc-chev { transform: rotate(180deg); }

.oc-activefilter {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px;
    background: #eef6ff; border: 1px solid #cfe3fb;
    color: #1d4ed8; font-size: 12.5px; font-weight: 600;
}

/* ---- Status chip (9 tông, cùng hình dạng st-chip của client) ---- */
.oc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    white-space: nowrap;
    background: #e2e8f0; color: #475569;
}
.oc-chip i { font-size: 10.5px; flex: 0 0 auto; }
.oc-chip-amber  { background: #fef3c7; color: #92590b; }
.oc-chip-blue   { background: #d8e5fc; color: #1d4ed8; }
.oc-chip-indigo { background: #e0e7ff; color: #4338ca; }
.oc-chip-green  { background: #e6f6ee; color: #147a48; }
.oc-chip-orange { background: #ffedd5; color: #9a4a02; } /* #b45309 chỉ đạt 4.38:1 trên nền này */
.oc-chip-sky    { background: #e0f2fe; color: #036ba1; }
.oc-chip-stone  { background: #ede9e6; color: #57534e; }
.oc-chip-red    { background: #fbe9ec; color: #b42318; }
.oc-chip-violet { background: #ede9fe; color: #6d28d9; }

/* ---- Tag nhỏ trong ô ID ---- */
.oc-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px;
    border: 1px solid #e2e8f0; border-radius: 5px;
    background: #f8fafc; color: var(--oc-muted);
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.oc-tag-loop  { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.oc-tag-child { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }
.oc-tag-api   { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.oc-tag-auto  { background: #e6f6ee; border-color: #a5e5c4; color: #147a48; }
.oc-tag-manual{ background: #f1f5f9; border-color: #cbd5e1; color: #475569; }

/* ---- Table ---- */
.oc-tablewrap { width: 100%; overflow-x: auto; }
.oc-table { width: 100%; margin: 0; border-collapse: collapse; }
.oc-table thead th {
    padding: 12px;
    background: #f8fafc;
    color: var(--oc-muted);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--oc-hair);
}
.oc-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 13.5px;
    color: var(--oc-ink-2);
}
.oc-table tbody tr { transition: background .12s ease; }
.oc-table tbody tr:hover { background: #f7faff; }
.oc-table tbody tr:last-child td { border-bottom: none; }
.oc-table th.oc-c, .oc-table td.oc-c { text-align: center; }
.oc-num { font-variant-numeric: tabular-nums; font-weight: 600; color: #334155; }

.oc-orderid {
    font-weight: 800; color: var(--oc-ink);
    background: none; border: 0; padding: 0;
    font-size: 13.5px; font-family: inherit;
    cursor: pointer; transition: color .12s ease;
}
.oc-orderid:hover { color: #147a48; }
.oc-orderid:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 2px; border-radius: 4px; }
.oc-idmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.oc-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--oc-muted); }
.oc-sub-id { color: #475569; font-weight: 700; }
.oc-date {
    display: inline-flex; flex-direction: column; gap: 1px;
    color: var(--oc-muted); font-size: 12.5px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.oc-date-d { color: var(--oc-ink-2); font-weight: 600; }
.oc-date-t { color: #64748b; font-size: 12px; } /* faint #94a3b8 = 2.56:1, không đủ cho chữ 12px */
.oc-link { color: #2563eb; font-weight: 600; text-decoration: none; font-size: 13px; }
.oc-link:hover { text-decoration: underline; }
.oc-user { color: #2563eb; font-weight: 700; text-decoration: none; font-size: 13px; }
.oc-user:hover { text-decoration: underline; }
.oc-null { color: var(--oc-faint); font-style: italic; }
.oc-linkcell { --cell-max: 260px; max-width: 260px; }

.oc-money { color: #1d4ed8; font-weight: 800; font-variant-numeric: tabular-nums; }
.oc-money-hold { color: #b42318; }
.oc-money-ref  { color: #6d28d9; }
/* Tiền vào/ra trong sổ giao dịch. Màu chỉ là phụ hoạ — số LUÔN kèm dấu +/−
   để người mù màu vẫn phân biệt được (quy chuẩn OC mục 7). */
.oc-money-in  { color: #147a48; }
.oc-money-out { color: #b42318; }
.oc-money-void { color: var(--oc-faint); text-decoration: line-through; text-decoration-thickness: 1px; }

.oc-table tbody tr.oc-row-warn td:first-child { box-shadow: inset 3px 0 0 #ea8c00; }
.oc-table tbody tr.oc-row-bad  td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.oc-table tbody tr.oc-row-ref  td:first-child { box-shadow: inset 3px 0 0 #7c3aed; }
.oc-table tbody tr.is-picked td { background: #eff6ff; }

.oc-check { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; cursor: pointer; }
.oc-check input { width: 16px; height: 16px; accent-color: #0b7ab5; cursor: pointer; }

.oc-optbtn {
    background: #fff; border: 1.5px solid #2563eb; color: #2563eb;
    border-radius: 8px; font-size: 13px; font-weight: 600; padding: 5px 14px;
    transition: background .15s ease, color .15s ease;
}
.oc-optbtn:hover, .oc-optbtn:focus, .oc-optbtn.show { background: #2563eb !important; color: #fff !important; }
/* Layout nạp Bootstrap 4 CSS nhưng Bootstrap 5 JS, hai bên đá nhau ở dropdown căn phải:
   - BS4 có .dropdown-menu-right{right:0;left:auto}. Popper đặt sẵn left:0 lên menu TRƯỚC khi
     đo kích thước, gặp right:0 còn nguyên => menu bị kéo rộng bằng cả viewport (đo ra 1920px)
     => Popper tính toạ độ sai, menu văng sang trái đè lên sidebar.
   - BS5 JS nhận biết căn phải bằng biến CSS --bs-position:end (bootstrap.js:3737), biến này chỉ
     có trong BS5 CSS nên ở đây không có => luôn ra placement bottom-start.
   File này nạp sau bootstrap.min.css nên đè được, không cần !important. */
.dropdown-menu-right, .dropdown-menu-end {
    --bs-position: end;
    right: auto;
}

.oc-menu {
    border: 1px solid #e3e8f0; border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14); padding: 6px;
}
.oc-menu .dropdown-item {
    border-radius: 8px; padding: 9px 12px;
    font-size: 13.5px; font-weight: 500; color: var(--oc-ink-2);
    display: flex; align-items: center; gap: 9px;
}
.oc-menu .dropdown-item:hover, .oc-menu .dropdown-item:focus { background: #2563eb; color: #fff; }
.oc-menu .dropdown-item.oc-item-danger:hover, .oc-menu .dropdown-item.oc-item-danger:focus { background: #dc2626; color: #fff; }

/* ---- Bulk bar nổi (không bị card overflow cắt) ---- */
.oc-bulk {
    position: fixed; z-index: 1045;
    left: 50%; bottom: 22px; transform: translate(-50%, 12px);
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    max-width: min(940px, calc(100vw - 32px));
    padding: 12px 16px;
    background: #fff; border: 1px solid var(--oc-line, #d9dfea); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
    opacity: 0; visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.oc-bulk.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.oc-bulk-count {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px;
    background: #eff6ff; color: #1d4ed8; font-size: 12.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.oc-bulk .oc-input { height: 38px; min-width: 210px; width: auto; }

/* ---- Pagination ---- */
.oc-pager {
    padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 18px; flex-wrap: wrap;
    color: var(--oc-muted); font-size: 13px;
}
.oc-pager b { color: var(--oc-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.oc-pager .pagination { margin: 0; gap: 4px; display: flex; flex-wrap: wrap; }
.oc-pager .page-link {
    border: 1px solid var(--oc-line); border-radius: 8px;
    color: #334155; font-weight: 600; font-size: 13px;
    padding: 8px 13px; background: #fff;
    min-width: 40px; display: inline-flex; align-items: center; justify-content: center;
}
.oc-pager .page-link:hover { border-color: #0b7ab5; color: #0b7ab5; background: #fff; }
.oc-pager .page-item.active .page-link {
    background: #0b7ab5; border-color: #0b7ab5; color: #fff;
    box-shadow: 0 3px 8px rgba(51, 177, 249, .28);
}
.oc-pager .page-item.disabled .page-link { background: #fff; border-color: var(--oc-hair); color: #cbd5e1; }

/* ---- Empty state ---- */
.oc-empty { padding: 56px 20px; text-align: center; }
.oc-empty-ic i { font-size: 48px; color: #cbd5e1; }
.oc-empty-title { margin-top: 14px; color: var(--oc-ink); font-weight: 700; }
.oc-empty-text { color: var(--oc-muted); font-size: 13.5px; }
/* Nhiều hơn 1 nút trong ô rỗng thì bọc lại cho căn giữa */
.oc-empty-acts { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.oc-empty-btn {
    display: inline-block; margin-top: 8px; border: 0; /* dùng được cho cả <button> */
    background: #188049; color: #fff; font-weight: 700; font-size: 13.5px;
    padding: 10px 20px; border-radius: 8px; text-decoration: none;
    font-family: inherit; cursor: pointer; /* <button> không tự thừa kế font */
    box-shadow: 0 4px 12px rgba(41, 189, 115, .25);
    transition: background .15s ease;
}
.oc-empty-btn:hover { background: #147a48; color: #fff; }

/* ---- Modal chi tiết (key/value) ---- */
.oc-modal .oc-modal-content { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.oc-modal .oc-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #eef2f6;
    font-weight: 700; color: #0b1c30; font-size: 15px;
}
.oc-modal .oc-modal-head i { color: #29bd73; }
.oc-modal .oc-modal-x {
    border: 0; background: none; color: #64748b; font-size: 16px;
    width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.oc-modal .oc-modal-x:hover { background: #f1f5f9; color: #0f172a; }
.oc-modal .oc-modal-body { padding: 6px 20px; }
.oc-modal .oc-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #eef2f6; }
.oc-modal .oc-row:last-child { border-bottom: 0; }
.oc-modal .oc-k { flex: 0 0 130px; color: #5d6d82; font-size: 12.5px; font-weight: 600; }
.oc-modal .oc-v { flex: 1; min-width: 0; color: #1e293b; font-size: 13.5px; font-weight: 500; word-break: break-all; }
.oc-modal .oc-v-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.oc-modal .oc-v-price { color: #2563eb; font-weight: 800; }
.oc-modal .oc-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid #eef2f6; background: #fbfcfe;
}
.oc-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; margin: 0 0 14px;
    border: 1px solid #cfe3fb; border-radius: 10px;
    background: #eff6ff; color: #1e3a5f; font-size: 13px;
}
.oc-note-warn { border-color: #fcd9a4; background: #fff7ed; color: #7c4a03; }
/* Hai tông còn thiếu — cần cho flash message dùng chung ở layout, vốn nằm
   NGOÀI .adash nên không dùng được .adash .adash-note. */
.oc-note-ok     { border-color: #a5e5c4; background: #f2fbf6; color: #14532d; }
.oc-note-danger { border-color: #fca5a5; background: #fff5f5; color: #7f1d1d; }
.oc-note-ok > i     { color: #147a48; }
.oc-note-danger > i { color: #b42318; }
.oc-note ul { margin: 6px 0 0; padding-left: 18px; }
.oc-note li { margin-top: 2px; }
/* Nút đóng của flash */
.oc-note-x {
    margin-left: auto; align-self: flex-start;
    border: 0; background: none; cursor: pointer; line-height: 1;
    padding: 0 2px; font-size: 18px; color: currentColor; opacity: .55;
}
.oc-note-x:hover { opacity: 1; }
.oc-note-x:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 2px; border-radius: 4px; }
.oc-note i { margin-top: 2px; }

/* ---- Flatpickr khớp tông ---- */
.oc-filters input.flatpickr-input {
    background-color: var(--oc-fill) !important;
    border: 1px solid transparent; border-radius: 8px;
    color: var(--oc-ink); padding: 10px 14px; height: 42px;
    font-size: 13.5px; font-weight: 500; width: 100%; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.oc-filters input.flatpickr-input:focus, .oc-filters input.flatpickr-input.active {
    background-color: #fff !important; border-color: #a5b4fc;
    box-shadow: 0 0 0 2px rgba(165, 180, 252, .35); outline: none;
}
.flatpickr-calendar { border-radius: 12px !important; box-shadow: 0 12px 28px rgba(15, 23, 42, .14) !important; border: 1px solid #e3e8f0 !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange { background: #188049 !important; border-color: #188049 !important; box-shadow: none !important; }
.flatpickr-day:hover { background: #e6f6ee !important; border-color: #e6f6ee !important; }
.flatpickr-day.today { border-color: #188049 !important; }

/* ---- Responsive: <768px chuyển thẻ, KHÔNG dùng scroll dọc ---- */
@media (max-width: 991.98px) {
    .oc-linkcell { --cell-max: 240px; max-width: 240px; }
}
@media (max-width: 767.98px) {
    .oc-card { border-radius: 16px; }
    .oc-card-head, .oc-filters, .oc-pager { padding-left: 16px; padding-right: 16px; }
    .oc-tablewrap { overflow-x: visible; }
    .oc-table thead {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .oc-table, .oc-table tbody, .oc-table tr, .oc-table td { display: block; width: auto; }
    .oc-table tbody tr { padding: 8px 0; border-bottom: 1px solid var(--oc-hair); }
    .oc-table tbody tr:last-child { border-bottom: none; }
    .oc-table tbody tr:hover { background: transparent; }
    .oc-table tbody td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
        min-height: 34px; padding: 7px 16px; border-bottom: none;
        white-space: normal; text-align: right;
    }
    .oc-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto; text-align: left;
        font-size: 12.5px; font-weight: 700; color: var(--oc-muted);
        text-transform: uppercase; letter-spacing: .04em;
    }
    .oc-table td.oc-c { text-align: right; }
    .oc-table tbody td:first-child { justify-content: flex-start; min-height: 44px; align-items: center; }
    .oc-table tbody td:first-child::before { content: none; }
    .oc-table tbody tr.oc-row-warn td:first-child,
    .oc-table tbody tr.oc-row-bad td:first-child,
    .oc-table tbody tr.oc-row-ref td:first-child { box-shadow: none; }
    .oc-table tbody tr.oc-row-warn { border-left: 3px solid #ea8c00; }
    .oc-table tbody tr.oc-row-bad  { border-left: 3px solid #dc2626; }
    .oc-table tbody tr.oc-row-ref  { border-left: 3px solid #7c3aed; }
    .oc-linkcell { --cell-max: none; max-width: none; }
    .oc-bulk { left: 16px; right: 16px; bottom: 16px; transform: translateY(12px); max-width: none; }
    .oc-bulk.is-on { transform: translateY(0); }
    .oc-bulk .oc-input { min-width: 0; flex: 1; }
    .oc-modal .oc-k { flex-basis: 104px; }
}
@media (prefers-reduced-motion: reduce) {
    .oc-bulk, .oc-chev, .oc-table tbody tr { transition: none !important; }
}

/* ---- OC: tự chủ, không phụ thuộc utility Bootstrap 5 ----
   Lưu ý: vendor CSS của project là Bootstrap 4.4.1, nên các class utility
   của Bootstrap 5 (me-, ms-, gap-, g-, visually-hidden, dropdown-menu-end)
   đều KHÔNG tồn tại. Đừng dùng chúng trong markup. */
.oc-sr {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important;
}
.oc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.oc-c2 { grid-column: span 2; }
.oc-c3 { grid-column: span 3; }
.oc-c4 { grid-column: span 4; }
.oc-c5 { grid-column: span 5; }
.oc-c6 { grid-column: span 6; }
.oc-c7 { grid-column: span 7; }
.oc-c8 { grid-column: span 8; }
.oc-c9 { grid-column: span 9; }
/* c10/c11 để toolbar nào cũng cộng đủ 12 cột, không chừa khoảng trống bên phải
   khi một ô trong hàng bị ẩn theo điều kiện (VD nút "Xoá bộ lọc"). */
.oc-c10 { grid-column: span 10; }
.oc-c11 { grid-column: span 11; }
.oc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oc-card-title { display: inline-flex; align-items: center; gap: 8px; }
.oc-fieldfoot { margin-top: 14px; }

.oc-table th:first-child,
.oc-table td:first-child { width: 1%; white-space: nowrap; padding-right: 0; }
.oc-table .oc-idmeta:empty { display: none; }

@media (max-width: 1399.98px) {
    .oc-linkcell { --cell-max: 170px; max-width: 170px; }
    .oc-table thead th, .oc-table tbody td { padding: 12px 9px; }
}
@media (max-width: 991.98px) {
    .oc-grid { gap: 12px; }
    .oc-c2, .oc-c3, .oc-c4 { grid-column: span 6; }
    .oc-c5, .oc-c6, .oc-c7, .oc-c8, .oc-c9, .oc-c10, .oc-c11 { grid-column: span 12; }
}
@media (max-width: 767.98px) {
    .oc-grid > * { grid-column: 1 / -1; }
    .oc-table th:first-child,
    .oc-table td:first-child { width: auto; padding-right: 16px; }
    .oc-table td.oc-linkcell {
        display: block;
        text-align: left;
    }
    .oc-table td.oc-linkcell::before { display: block; margin-bottom: 4px; }
    .oc-table td.oc-linkcell .oc-link { display: inline-block; max-width: 100%; }
}

/* ---- OC: ẩn hiện cột ---- */
.oc-colmenu { padding: 8px; min-width: 232px; }
.oc-colmenu-title {
    padding: 4px 8px 8px; margin: 0;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #5d6d82; border-bottom: 1px solid #eef2f6;
}
.oc-colopt {
    display: flex; align-items: center; gap: 9px;
    padding: 8px; margin-top: 2px; border-radius: 8px;
    font-size: 13.5px; color: #1e293b; cursor: pointer;
}
.oc-colopt:hover { background: #f1f5f9; }
.oc-colopt input { width: 15px; height: 15px; accent-color: #0b7ab5; cursor: pointer; }

@media (max-width: 767.98px) {
}

/* Tên trang trên thanh nav admin */
.navbar .navbar-left { display: flex; align-items: center; min-width: 0; }
.navbar .nav-pagetitle {
    margin: 0 0 0 6px;
    font-size: 16px; font-weight: 650; line-height: 1.2;
    color: #0b1c30; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
    .navbar .nav-pagetitle { font-size: 14px; max-width: 44vw; }
}
@media (max-width: 479.98px) {
    .navbar .nav-pagetitle { display: none; }
}

/* Nguồn API trong ô Link: tên provider + mã service bên nhà cung cấp */
.oc-src { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oc-src[data-sep]::before { content: attr(data-sep); color: #cbd5e1; }
.oc-src > i { color: #98a2b3; font-size: 10.5px; }
.oc-src-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
    padding: 0 6px; border-radius: 4px;
    background: #eef4fb; color: #0b6ba1; border: 1px solid #cfe3f5;
}

/* Thanh chân bảng gộp: mỗi trang + vị trí + số trang trên cùng một hàng */
.oc-pager {
    padding: 12px 12px;
    display: flex; align-items: center; justify-content: flex-start;
    gap: 10px 20px; flex-wrap: wrap;
    background: #fbfcfd; border-top: 1px solid var(--oc-hair, #eef2f6);
    color: #5d6d82; font-size: 13px;
}
.oc-perpage { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.oc-perpage .oc-label { margin: 0; font-size: 12.5px; white-space: nowrap; color: #5d6d82; font-weight: 600; }
.oc-perpage .oc-input {
    width: auto; min-width: 0; height: 34px;
    padding: 4px 30px 4px 10px; font-size: 13px;
    background-color: #fff; border-color: #e2e8f0;
}
.oc-pager-info { color: #5d6d82; font-variant-numeric: tabular-nums; }
.oc-pager-nav { margin-left: auto; }
@media (max-width: 767.98px) {
    .oc-pager { padding-left: 16px; padding-right: 16px; }
    .oc-pager-nav { margin-left: 0; width: 100%; }
}

/* Chip cảnh báo khi bỏ giới hạn thời gian */
.oc-activefilter-warn {
    background: #fff7ed; border-color: #fcd9a4; color: #9a4a02;
}

/* ==========================================================================
   ADASH -> OC : đồng bộ mọi trang admin về cùng ngôn ngữ thiết kế với trang
   orders và trang orders của client.

   Cố ý KHÔNG sửa markup: 8 trang admin có tổng ~5.475 dòng blade với JS, modal
   và form bám vào class/id sẵn có. Viết lại markup là rủi ro lớn mà không thêm
   giá trị. Khối này chỉ đổi giá trị CSS nên áp dụng cho mọi trang cùng lúc và
   gỡ ra được bằng cách xoá đúng khối này.

   Đặt ở cuối file để thắng các rule cùng độ đặc hiệu phía trên.
   ========================================================================== */

/* ---- Khung panel ---- */
.adash .adash-panel {
    border: 1px solid #d9dfea;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(30, 41, 59, .06);
    margin-bottom: 18px;
}
.adash .adash-panel-head { padding: 16px 20px; border-bottom: 1px solid #eef2f6; }
.adash .adash-panel-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: #0b1c30; letter-spacing: -.01em;
}
.adash .adash-panel-title i { color: #29bd73; }
.adash .adash-panel-sub { font-size: 13px; color: #5d6d82; }
.adash .adash-pagetitle { font-size: 19px; font-weight: 700; color: #0b1c30; letter-spacing: -.01em; }
.adash .adash-pagesub { font-size: 13px; color: #5d6d82; }

/* ---- Bảng ---- */
.adash .adash-table thead th {
    padding: 12px 10px;
    background: #f8fafc;
    color: #5d6d82;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid #eef2f6;
}
.adash .adash-table tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px; color: #1e293b;
}
.adash .adash-table tbody tr { transition: background .12s ease; }
.adash .adash-table tbody tr:hover td { background: #f7faff; }
.adash .adash-table td.adash-num,
.adash .adash-num { font-variant-numeric: tabular-nums; }
.adash .adash-money { color: #1d4ed8; font-weight: 800; font-variant-numeric: tabular-nums; }
.adash .adash-null { color: #94a3b8; font-style: italic; }
.adash .adash-who-name { font-weight: 650; color: #0b1c30; }
.adash .adash-who-meta { color: #5d6d82; font-size: 12.5px; }
.adash .adash-time { color: #94a3b8; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.adash .adash-code, .adash .adash-idnum {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; font-weight: 700;
    padding: 1px 6px; border-radius: 4px;
    background: #eef4fb; color: #0b6ba1; border: 1px solid #cfe3f5;
}

/* ---- Ô nhập ---- */
.adash .adash-input {
    min-height: 42px; height: auto;
    padding: 10px 14px;
    background-color: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #0b1c30;
    font-size: 13.5px; font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.adash .adash-input::placeholder { color: #5d6d82; }
.adash .adash-input:focus {
    background-color: #fff;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 2px rgba(165, 180, 252, .35);
    outline: none;
}
.adash select.adash-input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 38px; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2.4' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 13px;
}
.adash .adash-flabel { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 6px; }

/* ---- Nút ---- */
.adash .adash-btn {
    min-height: 42px; padding: 0 18px; gap: 7px;
    border: 1.5px solid transparent; border-radius: 8px;
    font-size: 13px; font-weight: 700;
}
.adash .adash-btn-primary {
    background: linear-gradient(135deg, #0b7ab5, #05699e);
    border-color: transparent; color: #fff;
    box-shadow: 0 4px 14px rgba(51, 177, 249, .32);
}
.adash .adash-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0a6fa8, #045b87);
    border-color: transparent; color: #fff;
    box-shadow: 0 6px 18px rgba(51, 177, 249, .42);
}
.adash .adash-btn-ghost {
    background: #fff; border-color: #cbd5e1; color: #475569; font-weight: 600;
}
.adash .adash-btn-ghost:hover:not(:disabled) { border-color: #94a3b8; color: #0b1c30; background: #f8fafc; }
.adash .adash-btn-danger { background: #fff; border-color: #fda29b; color: #b42318; }
.adash .adash-btn-danger:hover:not(:disabled) { background: #b42318; border-color: #b42318; color: #fff; }
.adash .adash-btn-sm { min-height: 34px; padding: 0 13px; font-size: 12.5px; }
.adash .adash-btn-ico { width: 42px; padding: 0; }
.adash .adash-btn-sm.adash-btn-ico { width: 34px; }

/* ---- Trạng thái: biến chấm thành viên chip, không cần sửa markup ----
   Dùng :has() để lấy màu từ class của chấm bên trong (dự án đã dùng :has()
   sẵn ở .st-chip bên trang client). */
.adash .adash-status {
    padding: 4px 11px;
    border-radius: 999px;
    background: #e2e8f0; color: #475569;
    font-size: 12px; font-weight: 700;
    gap: 6px;
}
.adash .adash-status:has(.adash-dot-cho)      { background: #fef3c7; color: #92590b; }
.adash .adash-status:has(.adash-dot-gui)      { background: #d8e5fc; color: #1d4ed8; }
.adash .adash-status:has(.adash-dot-chay)     { background: #e0e7ff; color: #4338ca; }
.adash .adash-status:has(.adash-dot-xong)     { background: #e6f6ee; color: #147a48; }
.adash .adash-status:has(.adash-dot-mot-phan) { background: #ffedd5; color: #9a4a02; }
.adash .adash-status:has(.adash-dot-lich)     { background: #e0f2fe; color: #036ba1; }
.adash .adash-status:has(.adash-dot-huy)      { background: #ede9e6; color: #57534e; }
.adash .adash-status:has(.adash-dot-loi)      { background: #fbe9ec; color: #b42318; }
.adash .adash-status:has(.adash-dot-hoan)     { background: #ede9fe; color: #6d28d9; }
.adash .adash-status:has(.adash-dot-bat)      { background: #e6f6ee; color: #147a48; }
.adash .adash-status:has(.adash-dot-tat)      { background: #f1f5f9; color: #475569; }
.adash .adash-status:has(.adash-dot-cong)     { background: #e6f6ee; color: #147a48; }
.adash .adash-status:has(.adash-dot-tru)      { background: #fbe9ec; color: #b42318; }
.adash .adash-status:has(.adash-dot-chua-doc),
.adash .adash-status:has(.adash-dot-canh-bao) { background: #fef3c7; color: #92590b; }
.adash .adash-status .adash-dot { background: currentColor; flex-basis: 6px; width: 6px; height: 6px; }

/* ---- Thẻ số liệu ---- */
.adash .adash-stat-num { font-weight: 750; letter-spacing: -.02em; color: #0b1c30; font-variant-numeric: tabular-nums; }
.adash .adash-stat-label { color: #5d6d82; font-weight: 600; }

/* ---- Trạng thái rỗng ---- */
.adash .adash-empty { padding: 56px 20px; }
.adash .adash-empty-ic i { font-size: 48px; color: #cbd5e1; }
.adash .adash-empty-title { color: #0b1c30; font-weight: 700; }
.adash .adash-empty-text { color: #5d6d82; font-size: 13.5px; }

/* ---- Phân trang ---- */
.adash .adash-pager { background: #fbfcfd; border-top: 1px solid #eef2f6; color: #5d6d82; }
.adash .adash-pager .page-link {
    min-width: 36px; min-height: 36px;
    border: 1px solid #d9dfea; border-radius: 8px;
    color: #334155; font-weight: 600; font-size: 13px;
}
.adash .adash-pager .page-link:hover { border-color: #0b7ab5; color: #0b7ab5; background: #fff; }
.adash .adash-pager .page-item.active .page-link {
    background: #0b7ab5; border-color: #0b7ab5; color: #fff;
    box-shadow: 0 3px 8px rgba(51, 177, 249, .28);
}

/* ---- Modal ---- */
.adash-modal .modal-content { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.adash-modal .modal-header { padding: 16px 20px; border-bottom: 1px solid #eef2f6; }
.adash-modal .modal-title { font-size: 15px; font-weight: 700; color: #0b1c30; }
.adash-modal .modal-footer { padding: 14px 20px; border-top: 1px solid #eef2f6; background: #fbfcfe; }

@media (max-width: 767.98px) {
    .adash .adash-panel { border-radius: 16px; }
    .adash .adash-panel-head { padding-left: 16px; padding-right: 16px; }
}

/* Bảng nhiều cột trên màn hẹp: thu padding thay vì đẩy sang cuộn ngang */
@media (max-width: 1599.98px) {
    .adash .adash-table thead th,
    .adash .adash-table tbody td { padding-left: 8px; padding-right: 8px; }
}

/* ============================================================
   OC — Bổ sung sau đợt chuyển 6 nhóm trang admin (12/08/2026)
   Chỉ nhận những thứ CÓ TỪ 2 TRANG TRỞ LÊN cần tới, hoặc bịt đúng
   một lỗ hổng khiến agent phải viết style inline.
   ============================================================ */

/* Khoảng cách giữa 2 khối đứng nối tiếp. Trước đây mọi trang phải viết
   style="margin-top:16px" bằng tay. Hai rule cùng đặt MỘT giá trị nên
   dù trúng cả hai cũng không cộng dồn. */
.oc-gap { margin-top: 16px; }
.oc-card + .oc-card { margin-top: 16px; }

/* Tên bản ghi trong ô bảng khi KHÔNG phải link (nền tảng, danh mục, tiêu đề
   ticket…). Trước đây chỉ có oc-user/oc-link/oc-orderid — đều màu xanh kiểu
   link — nên tên không bấm được bị nhạt hơn hàng bên cạnh. */
.oc-cellname {
    display: block;
    font-size: 13.5px; font-weight: 650; line-height: 1.4;
    color: var(--oc-ink, #0b1c30);
}

/* Ô nhập số: căn phải + số thẳng cột (nguyên tắc 5) */
.oc-input-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Đơn vị dính cạnh ô nhập trong .oc-inputwrap ($ , % , VNĐ…) */
.oc-affix {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    height: 42px; padding: 0 13px;
    border-radius: 8px;
    background: var(--oc-fill, #f1f5f9);
    color: var(--oc-muted, #5d6d82);
    font-size: 13px; font-weight: 600;
    white-space: nowrap;
}

/* Bảng tổng kết lỗi ở đầu form (khi @error nhiều ô cùng lúc).
   Trước đây phải mượn .oc-testbox is-bad vốn dành cho kết quả test kết nối. */
.oc-errsum {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 16px; padding: 12px 14px;
    border: 1px solid #fca5a5; border-radius: 10px;
    background: #fff5f5; color: #7f1d1d;
    font-size: 13px; line-height: 1.55;
}
.oc-errsum > i { margin-top: 2px; color: #b42318; }
.oc-errsum b { display: block; margin-bottom: 4px; color: #b42318; }
.oc-errsum ul { margin: 4px 0 0; padding-left: 18px; }
.oc-errsum li { margin-top: 2px; }

/* Ghi chú / hộp kết quả đứng ĐẦU thân form thì không cần đệm trên nữa */
.oc-form > .oc-note:first-child,
.oc-form > .oc-errsum:first-child { margin-top: 0; }
.oc-form > .oc-testbox:first-child { margin-top: 0; }

/* ============================================================
   OC — Bổ sung đợt 2 (sau khi chuyển 15 nhóm trang admin)
   Vẫn theo luật: chỉ nhận thứ có TỪ 2 TRANG TRỞ LÊN cần, hoặc bịt
   đúng một lỗ hổng khiến agent phải viết style inline.
   ============================================================ */

/* Khối mã / JSON nhiều dòng — 3 trang cùng xin (cryptomus, cron-jobs,
   payment-methods). Trước đó chỉ có oc-key (inline 1 dòng) nên phải lách
   bằng textarea readonly, sai ngữ nghĩa. */
.oc-pre {
    display: block; margin: 0; padding: 12px 14px;
    max-height: 320px; overflow: auto;
    background: var(--oc-fill, #f1f5f9);
    border: 1px solid #e2e8f0; border-radius: 10px;
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; line-height: 1.6;
    white-space: pre; tab-size: 2;
}

/* Tiêu đề cột sắp xếp được. Quy chuẩn vốn hẹn "khi trang nào cần thì định
   nghĩa một lần" — trang Dịch vụ là trang đầu tiên cần thật. */
.oc-sort {
    display: inline-flex; align-items: center; gap: 6px;
    color: inherit; text-decoration: none;
}
.oc-sort:hover { color: var(--oc-ink, #0b1c30); text-decoration: none; }
.oc-sort:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 2px; border-radius: 4px; }
.oc-sort i { font-size: 10px; color: #cbd5e1; }
th[aria-sort] .oc-sort { color: var(--oc-ink, #0b1c30); }
th[aria-sort] .oc-sort i { color: #0b7ab5; }

/* Nhóm bật/tắt bản gọn để nhét vừa một ô bảng (oc-opts gap 15px quá thưa) */
.oc-opts-tight { gap: 7px; }

/* Trạng thái "đang chọn" cho danh sách trong modal — trước chỉ tr.is-picked mới có */
.oc-listrow.is-picked,
.oc-picker-item.is-picked { background: #eff6ff; border-color: #bfdbfe; }

/* Tag mang nghĩa cảnh báo (VD "tự tắt đang tắt" = rủi ro) */
.oc-tag-warn { background: #fff7ed; border-color: #fcd9a4; color: #9a4a02; }

/* Hai dải số liệu trong cùng một card thì phải có kẻ ngăn giữa,
   nếu không hai hàng dính vào nhau. */
.oc-statscard > .oc-stats + .oc-stats { border-top: 1px solid var(--oc-hair, #eef2f6); }

/* Toast tông thông tin — trước chỉ có ok/bad nên "đã sao chép" phải mượn màu xanh lá */
.oc-toast-info { border-color: #cfe3fb; }
.oc-toast-info > i { color: #1d4ed8; }

/* oc-subhead đặt thẳng trong .oc-card (không qua oc-form/oc-cardbody) thì
   thiếu đệm ngang — trước phải viết padding inline khi dựng bằng JS. */
.oc-card > .oc-subhead { padding-left: 20px; padding-right: 20px; }
@media (max-width: 767.98px) { .oc-card > .oc-subhead { padding-left: 16px; padding-right: 16px; } }

/* ---- OC: dải thẻ số liệu ---- */
.oc-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border-bottom: 1px solid var(--oc-hair, #eef2f6);
}
/* Dải số liệu đứng riêng thành một card của chính nó (không dính vào card bảng):
   bỏ kẻ dưới vì lúc này nó là toàn bộ nội dung card. */
.oc-statscard { margin-bottom: 16px; }
.oc-statscard > .oc-stats { border-bottom: 0; }
.oc-stat {
    display: flex; flex-direction: column; gap: 5px;
    padding: 15px 20px; border-right: 1px solid var(--oc-hair, #eef2f6);
}
.oc-stat:last-child { border-right: 0; }
/* Ô số liệu bấm được (dashboard trỏ sang trang đã lọc sẵn): hệ adash cũ có
   hover + focus ring, hệ OC quên vì luôn coi oc-stat là div. */
a.oc-stat { cursor: pointer; text-decoration: none; transition: background .12s ease; }
a.oc-stat:hover { background: #f7faff; text-decoration: none; }
a.oc-stat:focus-visible { outline: 2px solid #0b7ab5; outline-offset: -2px; }

/* Khung biểu đồ: Chart.js với maintainAspectRatio:false BẮT BUỘC container
   có chiều cao, nếu không canvas cao 0. Trước đây phải viết style inline. */
.oc-chart { position: relative; height: 228px; }
.oc-chart > canvas { display: block; }
@media (max-width: 767.98px) { .oc-chart { height: 196px; } }
.oc-stat-k { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5d6d82; } /* #98a2b3 = 2.58:1, nhãn nhỏ nhất hệ mà mờ nhất */
/* Dòng chú thích dưới con số: ghi phạm vi ("trên trang này", "toàn thời gian").
   KHÔNG viết hoa — khác oc-stat-k — để không bị đọc nhầm thành nhãn thứ hai. */
.oc-stat-foot { font-size: 12px; line-height: 1.45; color: var(--oc-muted, #5d6d82); }
/* Giá trị bằng 0: làm nhạt cả cụm để mắt lướt qua, nhưng vẫn đủ tương phản đọc được */
.oc-stat.is-zero .oc-stat-v { color: #667085; font-weight: 700; }
.oc-stat.is-zero .oc-stat-foot { color: #7c8798; }
.oc-stat-v { font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: #0b1c30; font-variant-numeric: tabular-nums; }
.oc-stat-ok { color: #147a48; }
.oc-stat-off { color: #667085; }
.oc-stat-money { color: #1d4ed8; }

/* Tag bấm được (Special / Bulk) */
.oc-tag-btn { cursor: pointer; font-family: inherit; transition: filter .12s ease, border-color .12s ease; }
.oc-tag-btn:hover { filter: brightness(.96); border-color: #94a3b8; }
.oc-tag-btn:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 2px; }

.oc-menu .dropdown-item.oc-item-danger { color: #b42318; }
.oc-menu .dropdown-item.oc-item-danger:hover { background: #dc2626; color: #fff; }

@media (max-width: 767.98px) {
    .oc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oc-stat { border-bottom: 1px solid var(--oc-hair, #eef2f6); }
    .oc-stat:nth-child(2n) { border-right: 0; }
}

/* ---- OC: dropdown chọn service trong modal special price ---- */
.adash .adash-picker-menu, .oc-picker-menu {
    max-height: 320px; overflow-y: auto;
    border: 1px solid #e3e8f0; border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14); background: #fff;
}
.oc-picker-head, .adash-picker-menu .oc-picker-head {
    padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #eef2f6;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5d6d82;
    position: sticky; top: 0;
}
.oc-picker-item {
    display: flex; flex-direction: column; gap: 4px; width: 100%;
    padding: 10px 12px; border: 0; border-bottom: 1px solid #f1f5f9;
    background: #fff; text-align: left; cursor: pointer; font: inherit;
}
.oc-picker-item:last-child { border-bottom: 0; }
.oc-picker-item:hover, .oc-picker-item:focus-visible { background: #eff6ff; outline: none; }
.oc-picker-top { display: flex; align-items: center; gap: 8px; }
.oc-picker-name { font-size: 13.5px; font-weight: 600; color: #1e293b; }
.oc-picker-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #5d6d82; }
.oc-picker-msg {
    display: flex; align-items: center; gap: 8px;
    padding: 14px; color: #5d6d82; font-size: 13px;
}

/* ============================================================
   SVP — Dịch vụ theo nguồn (admin/services/by-provider)
   Dùng chung token oc-* ; chỉ thêm phần riêng của trang.
   ============================================================ */
.svp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.svp-head h1 { margin: 0; font-family: 'Poppins', 'Inter', sans-serif; font-size: 19px; font-weight: 700; color: #0b1c30; }
.svp-head .svp-cnt { color: #5d6d82; font-size: 13px; font-variant-numeric: tabular-nums; }
.svp-head .svp-spacer { flex: 1; }
.svp-head .svp-lost { color: #b42318; font-size: 13px; font-weight: 700; }

.svp-filterbar { display: flex; gap: 10px; padding: 14px 20px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }

.svp-prov { margin-bottom: 16px; }
.svp-prov.svp-warned { border-color: #fca5a5; }
.svp-ph { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; flex-wrap: wrap; }
.svp-ph:hover { background: #fbfcfe; }
.svp-car { color: #94a3b8; font-size: 11px; transition: transform .16s; width: 12px; flex: 0 0 auto; }
.svp-prov[data-open="true"] .svp-car { transform: rotate(90deg); color: #0b7ab5; }
.svp-pname { font-size: 15px; font-weight: 700; color: #0b1c30; display: inline-flex; align-items: center; gap: 8px; }
.svp-pname i { color: #29bd73; font-size: 13px; }
.svp-pname.svp-manual { color: #5d6d82; }
.svp-pname.svp-manual i { color: #94a3b8; }
.svp-stat { color: #5d6d82; font-size: 12.5px; white-space: nowrap; }
.svp-stat b { color: #0b1c30; font-weight: 700; font-variant-numeric: tabular-nums; }
.svp-sep { width: 1px; height: 16px; background: #d9dfea; }
.svp-spacer { flex: 1; }
.svp-bal { font-variant-numeric: tabular-nums; font-weight: 700; color: #1d4ed8; }
.svp-bal.low { color: #b42318; }

.svp-scan { font-size: 12.5px; color: #5d6d82; padding: 0 20px 12px 44px; display: flex; gap: 8px 20px; flex-wrap: wrap; }
.svp-scan .ok { color: #147a48; font-weight: 600; }
.svp-scan .bad { color: #b42318; font-weight: 700; }
.svp-scan .warn { color: #b45309; font-weight: 700; }

.svp-svc { font-weight: 600; color: #0b1c30; }
.svp-clip { display: block; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.svp-swpair { display: flex; gap: 14px; align-items: center; }
.svp-swgrp { display: inline-flex; align-items: center; gap: 6px; }
.svp-swgrp .lb { font-size: 11px; font-weight: 700; color: #5d6d82; letter-spacing: .02em; }
.svp-swgrp.risk { background: #fbe9ec; border-radius: 999px; padding: 3px 9px 3px 10px; }
.svp-swgrp.risk .lb { color: #b42318; }
.svp-sw { position: relative; width: 34px; height: 19px; border-radius: 99px;
          background: #cbd5e1; border: 0; cursor: pointer; transition: background .15s; flex: 0 0 auto; padding: 0; }
.svp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
                 border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(16,24,40,.25); }
.svp-sw[aria-checked="true"] { background: #29bd73; }
.svp-sw[aria-checked="true"]::after { left: 17px; }
.svp-sw:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 2px; }
.svp-sw.busy { opacity: .45; pointer-events: none; }

.svp-acts { display: flex; gap: 5px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
tr:hover .svp-acts { opacity: 1; }
.svp-icb { width: 30px; height: 30px; display: inline-grid; place-items: center;
           border: 1.5px solid #cbd5e1; border-radius: 8px; background: #fff;
           cursor: pointer; color: #475569; font-size: 12px; text-decoration: none; }
.svp-icb:hover { border-color: #0b7ab5; color: #0b7ab5; }
.svp-icb.danger:hover { border-color: #b42318; color: #b42318; }

.svp-foot { display: flex; gap: 10px; padding: 12px 20px; background: #f8fafc;
            border-top: 1px solid #eef2f6; font-size: 13px; color: #5d6d82;
            align-items: center; flex-wrap: wrap; }
.svp-foot a { color: #2563eb; font-weight: 700; text-decoration: none; }
.svp-foot a:hover { text-decoration: underline; }
.svp-foot .svp-spacer { flex: 1; }
.svp-foot form { display: inline; }

/* --- SVP: dải provider trên đầu trang by-category --- */
.svp-pstrip { margin-bottom: 16px; }
.svp-pstrip-head { display: flex; align-items: center; gap: 10px; padding: 12px 20px 10px; }
.svp-pstrip-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5d6d82; }
.svp-prow { display: flex; align-items: center; gap: 12px; padding: 9px 20px; border-top: 1px solid #eef2f6; flex-wrap: wrap; }
.svp-prow .svp-pname { font-size: 13.5px; }
.svp-prow .svp-scaninfo { color: #5d6d82; font-size: 12px; }
.svp-prow .svp-scaninfo .ok { color: #147a48; font-weight: 600; }
.svp-prow .svp-scaninfo .warn { color: #b45309; font-weight: 700; }

/* --- SVP: cụm công tắc xếp dọc kèm giải thích --- */
.svp-swcol { display: flex; flex-direction: column; gap: 4px; }
.svp-switem { display: inline-flex; align-items: center; gap: 7px; }
.svp-switem .lb2 { font-size: 11px; font-weight: 600; color: #5d6d82; white-space: nowrap; }
.svp-switem.risk .lb2 { color: #b42318; font-weight: 700; }

/* --- SVP: checklist tự động (thay switch to bằng ô tick gọn) --- */
.svp-ck { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
          border: 0; background: none; padding: 1px 0; font-family: inherit;
          font-size: 12px; font-weight: 500; color: #94a3b8; white-space: nowrap; }
.svp-ck .bx { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #cbd5e1;
              display: inline-grid; place-items: center; background: #fff;
              transition: background .12s, border-color .12s; flex: 0 0 auto; }
.svp-ck[aria-checked="true"] .bx { background: #29bd73; border-color: #29bd73; }
.svp-ck[aria-checked="true"] .bx::after { content: "✓"; color: #fff; font-size: 10px;
                                          font-weight: 800; line-height: 1; }
.svp-ck[aria-checked="true"] { color: #334155; }
.svp-ck:hover .bx { border-color: #29bd73; }
.svp-ck.risk { color: #b42318; font-weight: 700; }
.svp-ck.risk .bx { border-color: #fca5a5; }
.svp-ck.busy { opacity: .45; pointer-events: none; }
.svp-ck:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   ASV — Trang Dịch vụ kiểu Ant Design ProTable, skin sặc sỡ
   Control 32px, lưới 8px, radius 6/8px.
   ============================================================ */
.asv { font-size: 14px; color: rgba(15,26,42,.88); }
.asv .asv-sp { flex: 1; }
.asv .asv-subtle { color: rgba(15,26,42,.45); font-size: 14px; }
.asv .asv-strong { color: rgba(15,26,42,.88); }

.asv .asv-pagehead { display: flex; align-items: center; gap: 12px; padding: 4px 0 16px; flex-wrap: wrap; }
.asv .asv-pagehead h1 { margin: 0; font-family: 'Poppins','Inter',sans-serif; font-size: 20px; font-weight: 700; color: #0b1c30; }

.asv .asv-btn { height: 32px; padding: 4px 15px; display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer;
    border: 1px solid #d9dfe6; background: #fff; color: rgba(15,26,42,.88);
    transition: all .2s; white-space: nowrap; text-decoration: none; }
.asv .asv-btn:hover { color: #0b7ab5; border-color: #0b7ab5; }
.asv .asv-btn-p { background: linear-gradient(135deg, #0b7ab5, #05699e); border: none; color: #fff;
    box-shadow: 0 4px 14px rgba(51,177,249,.32); }
.asv .asv-btn-p:hover { background: linear-gradient(135deg, #0a6fa8, #045b87); color: #fff; }
.asv .asv-btn-ic { width: 32px; padding: 0; justify-content: center; color: rgba(15,26,42,.65); }

/* Card: viền gradient sặc sỡ trên đỉnh */
.asv .asv-card { background: #fff; border-radius: 8px; border: 1px solid #f0f2f5; margin-bottom: 16px;
    border-top: 3px solid transparent; overflow: hidden;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #0b7ab5, #29bd73, #f59e0b);
    background-origin: border-box; background-clip: padding-box, border-box; }

/* Query filter */
.asv .asv-query { padding: 24px 24px 0; }
.asv .asv-qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
@media (max-width: 1100px) { .asv .asv-qgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .asv .asv-qgrid { grid-template-columns: 1fr; } }
.asv .asv-f { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.asv .asv-f label { min-width: 72px; text-align: right; font-size: 14px; color: rgba(15,26,42,.88); flex: 0 0 auto; }
.asv .asv-inp { flex: 1; height: 32px; padding: 4px 11px; font-family: inherit; font-size: 14px;
    border: 1px solid #d9dfe6; border-radius: 6px; background: #fff; color: rgba(15,26,42,.88);
    outline: none; transition: border-color .2s, box-shadow .2s; min-width: 0; }
.asv .asv-inp::placeholder { color: rgba(15,26,42,.35); }
.asv .asv-inp:hover { border-color: #0b7ab5; }
.asv .asv-inp:focus { border-color: #0b7ab5; box-shadow: 0 0 0 2px rgba(11,122,181,.12); }
.asv select.asv-inp { cursor: pointer; }
.asv .asv-facts { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 24px; }

/* Toolbar bảng */
.asv .asv-toolbar { display: flex; align-items: center; gap: 8px; padding: 16px 24px; }
.asv .asv-tt { font-size: 16px; font-weight: 700; color: #0b1c30; }

/* Thanh chọn hàng loạt */
.asv .asv-selbar { display: none; align-items: center; gap: 10px; margin: 0 24px 12px; padding: 8px 16px;
    background: #e8f4fb; border: 1px solid #b8dff2; border-radius: 6px; font-size: 14px; flex-wrap: wrap; }
.asv .asv-selbar.on { display: flex; }
.asv .asv-selbar b { color: #0b7ab5; }

/* Bảng */
.asv .asv-tw { overflow-x: auto; }
.asv .asv-tbl { width: 100%; border-collapse: collapse; }
.asv .asv-tbl th { background: #fafbfc; font-weight: 700; font-size: 13.5px; color: rgba(15,26,42,.88);
    text-align: left; padding: 12px 16px; border-bottom: 1px solid #f0f2f5; white-space: nowrap; }
.asv .asv-tbl th.asv-num, .asv .asv-tbl td.asv-num { text-align: right; font-variant-numeric: tabular-nums; }
.asv .asv-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.asv .asv-sort:hover { color: #0b7ab5; }
.asv .asv-sorter { display: inline-flex; flex-direction: column; margin-left: 6px; line-height: 0; }
.asv .asv-sorter i { font-style: normal; font-size: 9px; color: #c3ccd6; line-height: .85; }
.asv .asv-sorter i.on { color: #0b7ab5; }
.asv .asv-tbl td { padding: 12px 16px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; font-size: 14px; }
.asv .asv-tbl tbody tr { transition: background .15s; }
.asv .asv-tbl tbody tr:hover td { background: #fafbfc; }

.asv .asv-ck { width: 16px; height: 16px; accent-color: #0b7ab5; cursor: pointer; }
.asv .asv-id { font-weight: 800; color: #0b1c30; font-variant-numeric: tabular-nums; }
.asv .asv-name { font-weight: 600; color: #0b1c30; }
.asv .asv-name.off { color: rgba(15,26,42,.45); }
.asv .asv-sub { display: block; font-size: 12px; color: rgba(15,26,42,.45); margin-top: 2px; }
.asv .asv-sub.violet { color: #6d28d9; font-weight: 600; }
.asv .asv-money { font-weight: 800; color: #1d4ed8; font-variant-numeric: tabular-nums; }
.asv .asv-profit { color: #047857; }
.asv .asv-loss { color: #b91c1c; }
.asv .asv-mono { font-variant-numeric: tabular-nums; }

/* Tag màu: nền đậm pastel theo nền tảng */
.asv .asv-tag { display: inline-block; padding: 1px 8px; font-size: 12px; font-weight: 700;
    line-height: 20px; border-radius: 4px; white-space: nowrap; max-width: 150px;
    overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.asv .asv-pf-yt    { background: #fee2e2; color: #b91c1c; }
.asv .asv-pf-ig    { background: #fce7f3; color: #be185d; }
.asv .asv-pf-tt    { background: #e2e8f0; color: #0f172a; }
.asv .asv-pf-fb    { background: #dbeafe; color: #1d4ed8; }
.asv .asv-pf-tg    { background: #e0f2fe; color: #0369a1; }
.asv .asv-pf-x     { background: #f1f5f9; color: #334155; }
.asv .asv-pf-other { background: #ccfbf1; color: #0f766e; }
.asv .asv-prov  { background: #cffafe; color: #0e7490; }
.asv .asv-apiid { background: #fef3c7; color: #92590b; font-family: ui-monospace, Menlo, monospace; font-weight: 700; }

/* Pill trạng thái: nền đầy màu */
.asv .asv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
    border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.asv .asv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.asv .asv-pill.green  { background: #d1fae5; color: #047857; }
.asv .asv-pill.gray   { background: #f1f5f9; color: #64748b; }
.asv .asv-pill.violet { background: #ede9fe; color: #6d28d9; }
.asv .asv-pill.red    { background: #fee2e2; color: #b91c1c; }

/* Switch Ant small 28×16, ON = xanh lá site */
.asv .asv-sw { position: relative; width: 28px; height: 16px; border-radius: 100px; border: 0; cursor: pointer;
    background: rgba(15,26,42,.25); transition: background .2s; flex: 0 0 auto; padding: 0; }
.asv .asv-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
    border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 2px 4px rgba(0,35,11,.2); }
.asv .asv-sw[aria-checked="true"] { background: #29bd73; }
.asv .asv-sw[aria-checked="true"]::after { left: 14px; }
.asv .asv-sw.busy { opacity: .45; pointer-events: none; }
.asv .asv-autocol { display: flex; flex-direction: column; gap: 5px; }
.asv .asv-autorow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
    color: rgba(15,26,42,.65); white-space: nowrap; }
.asv .asv-autorow.risk { color: #b91c1c; font-weight: 700; }

/* Link thao tác */
.asv .asv-link { color: #0b7ab5; background: none; border: 0; padding: 0; font-family: inherit;
    font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.asv .asv-link:hover { color: #0a6fa8; text-decoration: underline; }
.asv .asv-link.danger { color: #dc2626; }
.asv .asv-dv { display: inline-block; width: 1px; height: 13px; background: #f0f2f5; margin: 0 8px; vertical-align: middle; }
.asv .asv-acts { white-space: nowrap; }

/* Empty */
.asv .asv-empty { text-align: center; padding: 48px 16px; }
.asv .asv-empty-ic { font-size: 34px; color: #c3ccd6; margin-bottom: 8px; }
.asv .asv-empty p { margin: 2px 0; }

/* Pagination */
.asv .asv-pager { display: flex; align-items: center; gap: 8px; padding: 16px 24px; flex-wrap: wrap; }
.asv .asv-pg { min-width: 32px; height: 32px; padding: 0 6px; display: inline-flex; align-items: center;
    justify-content: center; border: 1px solid #d9dfe6; border-radius: 6px; background: #fff;
    color: rgba(15,26,42,.88); font-size: 14px; text-decoration: none; transition: all .2s; }
.asv .asv-pg:hover { color: #0b7ab5; border-color: #0b7ab5; }
.asv .asv-pg[aria-current] { border-color: #0b7ab5; color: #0b7ab5; font-weight: 700; }
.asv .asv-pg.dis { pointer-events: none; opacity: .4; }

/* --- ASV mở rộng cho trang DV theo danh mục --- */
.asv .asv-card.warned { background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #dc2626, #f59e0b); }
.asv .asv-ph { display: flex; align-items: center; gap: 10px; padding: 14px 24px; cursor: pointer; flex-wrap: wrap; }
.asv .asv-ph:hover { background: #fafbfc; }
.asv .asv-car { color: #c3ccd6; font-size: 10px; transition: transform .16s; width: 12px; flex: 0 0 auto; }
.asv [data-open="true"] .asv-car { transform: rotate(90deg); color: #0b7ab5; }
.asv .asv-gname { font-size: 15px; font-weight: 700; color: #0b1c30; display: inline-flex; align-items: center; gap: 8px; }
.asv .asv-stat { color: rgba(15,26,42,.65); font-size: 12.5px; white-space: nowrap; }
.asv .asv-stat b { color: #0b1c30; font-weight: 700; font-variant-numeric: tabular-nums; }
.asv .asv-vsep { width: 1px; height: 16px; background: #f0f2f5; }

.asv .asv-prow { display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-top: 1px solid #f0f2f5; flex-wrap: wrap; }
.asv .asv-prow:first-of-type { border-top: 0; }
.asv .asv-pstrip-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: rgba(15,26,42,.45); padding: 14px 24px 4px; display: block; }
.asv .asv-scaninfo { color: rgba(15,26,42,.55); font-size: 12.5px; }
.asv .asv-scaninfo .ok { color: #047857; font-weight: 700; }
.asv .asv-scaninfo .warn { color: #b45309; font-weight: 700; }
.asv .asv-bal { font-variant-numeric: tabular-nums; font-weight: 800; color: #1d4ed8; }
.asv .asv-bal.low { color: #b91c1c; }

.asv .asv-gfoot { display: flex; gap: 10px; padding: 12px 24px; background: #fafbfc;
    border-top: 1px solid #f0f2f5; font-size: 13.5px; color: rgba(15,26,42,.65);
    align-items: center; flex-wrap: wrap; }
.asv .asv-gfoot a { color: #0b7ab5; font-weight: 700; text-decoration: none; }
.asv .asv-gfoot a:hover { text-decoration: underline; }
.asv .asv-gfoot form { display: inline; }
.asv .asv-btn-sm { height: 28px; padding: 2px 11px; font-size: 12.5px; }

/* ==========================================================================
   OC — Trang nhà cung cấp API (resources/views/admin/providers/*.blade.php)
   Bổ sung cho hệ OC: nút biểu tượng trong bảng, form, hộp kết quả test, toast.
   Các class ở đây đặt tên chung nên trang admin khác dùng lại được.
   ========================================================================== */

.oc-c12 { grid-column: span 12; }

/* ---- Cột hành động: nút chỉ có biểu tượng ---- */
.oc-rowacts { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.oc-rowacts form { display: inline; margin: 0; }
.oc-btn-ico { width: 34px; min-width: 34px; padding: 0; gap: 0; }
.oc-btn-ico i { font-size: 13px; }

/* ---- Ô API URL + khoá đã che ---- */
.oc-url { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.oc-url > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; color: #475569;
}
.oc-copy {
    flex: 0 0 auto; border: 0; background: none; cursor: pointer;
    color: #94a3b8; padding: 2px 5px; border-radius: 6px; line-height: 1;
}
.oc-copy:hover { color: #0b7ab5; background: #eef4fb; }
.oc-copy:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 1px; }
.oc-key {
    display: inline-block; max-width: 100%;
    padding: 2px 8px; border-radius: 6px;
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: middle;
}

/* ---- Chỉ báo đang đồng bộ trên đầu thẻ ---- */
.oc-sync { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #5d6d82; font-weight: 600; }
.oc-sync i { color: #0b7ab5; }

/* ---- Ô số liệu: hai tông cảnh báo ---- */
.oc-stat-warn { color: #b45309; }
.oc-stat-bad  { color: #b42318; }

/* ---- Form ---- */
.oc-form { padding: 18px 20px; }
.oc-req { color: #dc2626; }
/* display:block chứ không flex — chữ gợi ý có thể chứa <b>/<a>, để flex thì mỗi thẻ
   con thành một flex item và cả dòng vỡ thành cột hẹp. */
.oc-help { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: #5d6d82; }
.oc-err  { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: #b42318; }
.oc-help > i:first-child, .oc-err > i:first-child { margin-right: 6px; }
.oc-input.is-bad { border-color: #fca5a5; background-color: #fff5f5; }
.oc-input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: .01em; }
textarea.oc-input { height: auto; min-height: 92px; resize: vertical; line-height: 1.55; }
.oc-inputwrap { display: flex; gap: 8px; }
.oc-inputwrap .oc-input { flex: 1; min-width: 0; }
.oc-inputwrap .oc-btn-ico { height: 42px; }
.oc-formacts {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--oc-hair, #eef2f6);
    background: #fbfcfe;
}
.oc-fieldfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- Hộp kết quả kiểm tra kết nối ---- */
.oc-testbox {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 14px; padding: 11px 14px;
    border: 1px solid #d9dfea; border-radius: 10px;
    background: #f8fafc; color: #1e293b; font-size: 13px; line-height: 1.5;
}
.oc-testbox i { margin-top: 2px; }
.oc-testbox.is-ok  { border-color: #a5e5c4; background: #f2fbf6; color: #14532d; }
.oc-testbox.is-ok i { color: #147a48; }
.oc-testbox.is-bad { border-color: #fca5a5; background: #fff5f5; color: #7f1d1d; }
.oc-testbox.is-bad i { color: #b42318; }

/* ---- Toast góc phải ---- */
.oc-toasts {
    position: fixed; z-index: 1080; right: 18px; bottom: 18px;
    display: flex; flex-direction: column; gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
}
.oc-toast {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 12px;
    background: #fff; border: 1px solid #d9dfea;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
    color: #475569; font-size: 12.5px; line-height: 1.45;
    opacity: 0; transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
}
.oc-toast.is-on { opacity: 1; transform: translateY(0); }
.oc-toast i { margin-top: 1px; }
.oc-toast b { display: block; margin-bottom: 2px; color: #0b1c30; font-size: 13px; font-weight: 700; }
.oc-toast-ok { border-color: #a5e5c4; }
.oc-toast-ok > i { color: #147a48; }
.oc-toast-bad { border-color: #fca5a5; }
.oc-toast-bad > i { color: #b42318; }
.oc-toast-x {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    color: #94a3b8; padding: 0 2px; line-height: 1; align-self: flex-start;
}
.oc-toast-x:hover { color: #0f172a; }

@media (max-width: 767.98px) {
    .oc-form, .oc-formacts { padding-left: 16px; padding-right: 16px; }
    .oc-rowacts { justify-content: flex-end; }
    .oc-toasts { right: 12px; left: 12px; bottom: 12px; max-width: none; }
    .oc-formacts .oc-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .oc-toast { transition: none; }
}

/* ============================================================
   OC — Danh sách bật/tắt (Settings > Tab phía khách)
   Một dòng = 1 checkbox + nhãn + câu giải thích thụt vào dưới.
   Biến màu --oc-* khai báo ở .oc-card nên các class này chỉ dùng
   được BÊN TRONG .oc-card; fallback để ngoài card cũng không vỡ.
   ============================================================ */
.oc-sect {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 13px;
    font-size: 14px; font-weight: 700; color: var(--oc-ink, #0b1c30);
}
.oc-sect i { color: #29bd73; font-size: 13px; }
.oc-sect-hr {
    margin-top: 22px; padding-top: 19px;
    border-top: 1px solid var(--oc-hair, #eef2f6);
}
.oc-opts { display: flex; flex-direction: column; gap: 15px; }
.oc-opt-lab {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0;
    font-size: 13.5px; font-weight: 600; color: var(--oc-ink-2, #1e293b);
    cursor: pointer;
}
.oc-opt-lab input[type="checkbox"] {
    flex: 0 0 auto; width: 17px; height: 17px;
    accent-color: #188049; cursor: pointer;
}
.oc-opt-lab input[type="checkbox"]:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 2px; }
.oc-opt-lab input[type="checkbox"]:disabled { accent-color: #94a3b8; cursor: not-allowed; }
.oc-opt.is-locked .oc-opt-lab { cursor: not-allowed; color: var(--oc-muted, #5d6d82); }
.oc-opt .oc-help { margin-left: 27px; }
.oc-opt .oc-input { margin-top: 2px; }
.oc-help code, .oc-note code {
    padding: 1px 6px; border-radius: 5px;
    background: var(--oc-fill, #f1f5f9); border: 1px solid #e2e8f0; color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
}
.oc-lock {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--oc-fill, #f1f5f9); border: 1px solid #e2e8f0;
    color: var(--oc-muted, #5d6d82);
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .oc-opt .oc-help { margin-left: 0; }
}

/* Cờ báo đồng bộ số dư hỏng: số trên bảng là số cũ, phải nói ra.
   max-width để dòng chữ dài không kéo giãn cột, đẩy cột Hành động xuống 2 hàng. */
.oc-syncfail {
    display: block; margin-top: 4px; max-width: 230px;
    font-size: 11.5px; font-weight: 600; line-height: 1.4;
    color: #b42318;
}
.oc-syncfail i { margin-right: 5px; }
.oc-rowacts { flex-wrap: nowrap; }
@media (max-width: 767.98px) {
    .oc-syncfail { max-width: none; }
}

/* Card nội dung admin kéo dài hết chiều cao màn hình, không hụt giữa trang khi ít dữ liệu.
   .oc-stretch chỉ gắn ở layouts/admin.blade.php — client cũng có #main-content nên không
   được selector theo #main-content trần. 56px/84px = margin-top thật của #main-content
   do .theme-green đặt ở đầu file này (84px từ 1201px trở lên), không phải 65px của main.css. */
#main-content > .container-fluid.oc-stretch {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    padding-bottom: 20px;
}
@media (min-width: 1201px) {
    #main-content > .container-fluid.oc-stretch {
        min-height: calc(100vh - 84px);
    }
}
.oc-stretch > .adash {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
/* Giãn card cuối cùng; sau card còn các modal nên :last-child thường trượt —
   giữ làm fallback cho trình duyệt cũ, còn :nth-last-child(1 of ...) mới là selector chính.
   3 kiểu cấu trúc trang: .adash > .oc-card (users, providers...), .oc-card đặt trực tiếp
   trong container (orders), và .adash > .asv > .asv-card (services kiểu ANT). */
.oc-stretch > .adash > .oc-card:last-child { flex: 1 0 auto; }
.oc-stretch > .adash > .oc-card:nth-last-child(1 of .oc-card) { flex: 1 0 auto; }
.oc-stretch > .oc-card:last-child { flex: 1 0 auto; }
.oc-stretch > .oc-card:nth-last-child(1 of .oc-card) { flex: 1 0 auto; }
.oc-stretch > .adash > .asv {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.oc-stretch .asv > .asv-card:last-child { flex: 1 0 auto; }
.oc-stretch .asv > .asv-card:nth-last-child(1 of .asv-card) { flex: 1 0 auto; }

/* ---- Màn chạm: chống iOS phóng trang + nới vùng bấm ----
   Phải nằm CUỐI file: .oc-btn-ico { width:34px } và .oc-btn-sm { height:34px }
   khai báo phía trên cùng độ đặc hiệu, rule sau mới đè được. */
@media (max-width: 767.98px) {
    /* Safari iOS tự zoom cả trang khi focus vào input có font < 16px */
    .oc-input { font-size: 16px; }
    /* Nút thao tác trong bảng ở chế độ thẻ là mục tiêu chạm chính: 34px quá nhỏ */
    .oc-btn-sm { height: 42px; }
    .oc-btn-ico, .oc-btn-sm.oc-btn-ico { width: 42px; min-width: 42px; }
}

/* ---- Bảng danh sách: cột checkbox + ô rỗng + label giữ chỗ ---- */
/* Label vô hình đặt trên nút Tìm kiếm để nút thẳng hàng với các ô nhập cùng hàng */
.oc-label-ghost { visibility: hidden; }
/* Ô "không có kết quả" chiếm cả bảng: gỡ width:1%/nowrap của td:first-child */
.oc-table td.oc-empty-cell { width: auto; white-space: normal; padding: 0; }
@media (max-width: 767.98px) {
    .oc-label-ghost { display: none; }
    /* Chế độ thẻ: checkbox không chiếm nguyên một dòng nữa mà neo góc phải trên,
       ô kế tiếp (ID) đứng làm tiêu đề thẻ — chừa 64px phải để không đè lên nhau */
    .oc-table tbody tr { position: relative; }
    .oc-table tbody td.oc-rowcheck { position: absolute; top: 9px; right: 16px; min-height: 0; padding: 0; }
    .oc-table tbody td.oc-rowcheck::before { content: none; }
    .oc-table tbody td.oc-rowcheck + td { justify-content: flex-start; align-items: center; min-height: 44px; padding-right: 64px; }
    .oc-table tbody td.oc-rowcheck + td::before { content: none; }
    .oc-table tbody td.oc-empty-cell { display: block; text-align: center; }
    .oc-table tbody td.oc-empty-cell::before { content: none; }
}

/* ============================================================
   OC — Skeleton đang tải (học Spike). Giữ ĐÚNG kích thước nội dung
   thật để hết tải trang không nhảy layout. Vùng chờ bọc:
     <div role="status"><span class="oc-sr">Đang tải…</span> …skeleton aria-hidden…</div>
   Xong thì thay nguyên khối bằng nội dung thật.
   ============================================================ */
.oc-skeleton {
    display: inline-block; position: relative; overflow: hidden;
    background: #e6ecf3; border-radius: 6px;
    color: transparent !important;
    pointer-events: none; user-select: none;
}
.oc-skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: translateX(-100%);
    animation: oc-shimmer 1.3s ease-in-out infinite;
}
@keyframes oc-shimmer { to { transform: translateX(100%); } }
.oc-skeleton-line  { display: block; height: 13px; }
.oc-skeleton-line + .oc-skeleton-line { margin-top: 9px; }
.oc-skeleton-title { display: block; height: 17px; max-width: 45%; }
.oc-skeleton-stat  { display: block; height: 24px; width: 90px; border-radius: 7px; }
.oc-skeleton-chip  { display: inline-block; height: 26px; width: 96px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .oc-skeleton::after { animation: none; } }

/* ============================================================
   OC FRESH — độ tươi theo Spike, bật bằng class `oc-fresh` trên <body>.
   Chỉ đổi FONT + HÌNH KHỐI (pill, phẳng, bóng mềm). Bảng màu GIỮ NGUYÊN
   vì đã đạt WCAG AA — pastel của Spike đo được 1.5–3.9:1, không bê về.
   Admin bật sẵn (layouts/admin.blade.php); client muốn theo chỉ cần thêm class.
   ============================================================ */
.oc-fresh { font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif; }
.oc-fresh .svp-head h1 { font-family: inherit; } /* gỡ Poppins lẻ loi cho đồng bộ */

/* Nút: phẳng (bỏ gradient), bo 10px — user chê pill 999px tròn quá */
.oc-fresh .oc-btn, .oc-fresh .adash-btn, .oc-fresh .oc-empty-btn { border-radius: 10px; }
.oc-fresh .oc-btn-primary, .oc-fresh .adash .adash-btn-primary {
    background: #0b7ab5;
    box-shadow: 0 1px 2px rgba(11, 122, 181, .35);
}
.oc-fresh .oc-btn-primary:hover:not(:disabled), .oc-fresh .oc-btn-primary:focus-visible,
.oc-fresh .adash .adash-btn-primary:hover:not(:disabled) {
    background: #0a6fa8;
    box-shadow: 0 4px 10px rgba(11, 122, 181, .3);
}

/* Card: viền nhạt hơn + bóng mềm kiểu Spike */
.oc-fresh .oc-card, .oc-fresh .adash .adash-panel {
    border-color: #e5eaef;
    box-shadow: 0 9px 17.5px rgba(0, 0, 0, .05);
}

/* ============================================================
   OC — Dòng danh sách gọn (list row)
   Cho danh sách item bên trong modal/panel: một dòng đầu (mã + nhãn +
   nút xoá đẩy sang phải), một dòng tên, một dòng chân (giá / ghi chú).
   Khác .oc-picker-item ở chỗ KHÔNG bấm được cả dòng.
   Khai báo biến kèm fallback vì thường nằm trong .oc-modal (không phải .oc-card).
   ============================================================ */
.oc-listrow {
    display: flex; flex-direction: column; gap: 7px;
    padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--oc-line, #d9dfea); border-radius: 10px;
    background: #fff;
}
.oc-listrow:last-child { margin-bottom: 0; }
.oc-listrow-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-listrow-x { margin-left: auto; }
.oc-listrow-name {
    font-size: 13.5px; font-weight: 600; line-height: 1.45;
    color: var(--oc-ink-2, #1e293b);
}
.oc-listrow-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px 14px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--oc-muted, #5d6d82);
}
.oc-listrow-price { display: inline-flex; align-items: center; gap: 7px; }
.oc-listrow-was { color: var(--oc-faint, #94a3b8); text-decoration: line-through; text-decoration-thickness: 1px; }
.oc-listrow-arrow { color: var(--oc-faint, #94a3b8); font-size: 11px; }

/* Modal chứa FORM: nới đệm so với modal key–value (vốn cố tình chật) */
.oc-modal .oc-modal-body.oc-modal-form { padding: 18px 20px; }

/* Ô nhập kèm menu gợi ý thả xuống (VD chọn service trong modal giá riêng).
   Phần nền/viền/bóng/cuộn đã có ở .oc-picker-menu phía trên; ở đây chỉ định vị.
   JS bật/tắt bằng style.display nên mặc định phải là none. */
.oc-picker { position: relative; }
.oc-picker > .oc-picker-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px);
    display: none; z-index: 1056;
}
/* Danh sách dài trong modal: cuộn trong khung thay vì kéo dài cả modal */
.oc-list { max-height: 320px; overflow-y: auto; }

/* Dòng tiêu đề phụ trong modal: tên nhóm bên trái, số đếm bên phải */
.oc-subhead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px 14px; flex-wrap: wrap;
    margin: 18px 0 10px; padding-top: 16px;
    border-top: 1px solid var(--oc-hair, #eef2f6);
}
.oc-subhead-title {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: 14px; font-weight: 700; color: var(--oc-ink, #0b1c30);
}
.oc-subhead-title i { color: #29bd73; font-size: 13px; }
.oc-subhead-count { font-size: 12.5px; color: var(--oc-muted, #5d6d82); font-variant-numeric: tabular-nums; }

/* ============================================================
   OC — Bộ phận cho TRANG CHI TIẾT (users/show, orders/show...)
   Trước đây chỉ hệ adash có, nên trang chi tiết không viết được bằng OC.
   ============================================================ */

/* Đường dẫn phân cấp, đặt trên card đầu tiên */
.oc-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    margin: 0 2px 14px;
    font-size: 13px; color: #5d6d82;
}
.oc-crumbs a { color: #5d6d82; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.oc-crumbs a:hover { color: #2563eb; text-decoration: underline; }
.oc-crumbs a:focus-visible { outline: 2px solid #0b7ab5; outline-offset: 2px; border-radius: 4px; }
.oc-crumbs-sep { color: #cbd5e1; font-size: 10px; }
.oc-crumbs-now { color: #1e293b; font-weight: 600; }

/* Vùng nội dung thường trong card (không phải bảng/form) */
.oc-cardbody { padding: 6px 20px 14px; }

/* Danh sách khoá – giá trị. Bản trong .oc-modal đã có riêng (chật hơn);
   bản này dùng cho trang chi tiết bên trong .oc-card. */
.oc-dl { margin: 0; }
.oc-dl-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
    padding: 12px 0; border-bottom: 1px solid var(--oc-hair, #eef2f6);
}
.oc-dl-row:last-child { border-bottom: none; }
.oc-dl-k { flex: 0 0 190px; font-size: 13px; font-weight: 600; color: var(--oc-muted, #5d6d82); }
.oc-dl-v { flex: 1 1 220px; min-width: 0; font-size: 13.5px; color: var(--oc-ink-2, #1e293b); word-break: break-word; }

/* Chân card: nút "xem tất cả", ghi chú cuối bảng */
.oc-cardfoot {
    display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
    padding: 14px 20px;
    border-top: 1px solid var(--oc-hair, #eef2f6);
    background: #fbfcfe;
    font-size: 13px; color: var(--oc-muted, #5d6d82);
}

@media (max-width: 767.98px) {
    .oc-dl-k { flex-basis: 100%; }
    .oc-cardbody { padding-left: 16px; padding-right: 16px; }
    .oc-cardfoot { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   OC — Thanh tiến độ
   Hệ OC trước đây không có, nên trang nào cần đo tiến độ (loop-orders:
   số vòng đã chạy / tổng số vòng) đều phải mượn .adash-progress.
   Đặt trong .oc-card để thừa hưởng biến màu; có sẵn giá trị dự phòng
   nếu dùng ngoài card.
   ============================================================ */

.oc-progress {
    display: block;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--oc-hair, #eef2f6);
}
.oc-progress-bar {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: 999px;
    background: #0b7ab5;
    transition: width .2s ease;
}
/* Đã chạy đủ số vòng — cùng tông với .oc-chip-green / .oc-stat-ok */
.oc-progress-bar.is-done { background: #147a48; }

/* Trong bảng danh sách: mảnh hơn, cách dòng chữ phía trên 6px */
.oc-table .oc-progress { height: 8px; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
    .oc-progress-bar { transition: none; }
}

/* ==========================================================================
   OC — Form đặt trong modal (.oc-modal-body.oc-modal-form)
   Kiểu ô nhập (nền trắng, viền #c3cedb) đã dùng chung ở .oc-input phía trên,
   ở đây chỉ lo phần riêng của modal: gộp viên đơn vị ($, USD, %) dính liền ô
   nhập thành MỘT khối, thay vì 3 viên xám rời nhau trôi trên nền trắng —
   trước đây ô "Số tiền" nhìn như hai cái nhãn với một khoảng trống ở giữa.
   ========================================================================== */

/* Đơn vị dính liền ô nhập: bỏ khe hở, bo góc chỉ ở hai đầu ngoài cùng */
.oc-modal-form .oc-inputwrap { gap: 0; }
.oc-modal-form .oc-inputwrap > .oc-affix {
    border: 1px solid #c3cedb;
    background: var(--oc-fill);
    color: var(--oc-ink-2);
}
.oc-modal-form .oc-inputwrap > .oc-affix:first-child {
    border-right: 0;
    border-radius: 8px 0 0 8px;
}
.oc-modal-form .oc-inputwrap > .oc-affix:last-child {
    border-left: 0;
    border-radius: 0 8px 8px 0;
}
.oc-modal-form .oc-inputwrap > .oc-input:not(:first-child) {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.oc-modal-form .oc-inputwrap > .oc-input:not(:last-child) {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}
/* Ô nhập đang focus phải nằm trên hai viên đơn vị, nếu không vòng sáng bị cắt */
.oc-modal-form .oc-inputwrap > .oc-input:focus { position: relative; z-index: 1; }

/* ============================================================
   Ghi chú oc-note đứng sau một khối khác trong card / modal
   ------------------------------------------------------------
   .oc-note chỉ có margin-bottom, nên khi nó nằm NGAY SAU một khối
   (danh sách khoá–giá trị, lưới form, dòng key–value trong modal) thì
   dính sát vào khối trên. Trước đây mỗi trang tự vá bằng
   style="margin:16px 0 0" — quy chuẩn đã cấm margin inline, nên đưa
   thành rule chung ở đây.
   ============================================================ */
.oc-dl + .oc-note,
.oc-grid + .oc-note,
.oc-row + .oc-note { margin-top: 16px; }