/* =========================================================
   Client Responsive Stage 4
   Hoàn thiện trải nghiệm tablet/mobile: chống tràn, safe-area,
   bảng dài, modal/dropdown, bottom-nav và trạng thái chạm.
   Chỉ CSS, không đụng logic đặt hàng/database.
   ========================================================= */

:root {
    --client-stage4-bg: #f4f7fb;
    --client-stage4-card: #ffffff;
    --client-stage4-border: #e6edf6;
    --client-stage4-text: #111827;
    --client-stage4-muted: #667085;
    --client-stage4-primary: #187de4;
    --client-stage4-radius: 16px;
    --client-stage4-shadow: 0 12px 30px rgba(15, 23, 42, .07);
    --client-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --client-mobile-header-height: 56px;
    --client-mobile-bottom-nav-height: 76px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
#kt_body,
#kt_wrapper,
.page,
.main,
.content {
    min-width: 0;
}

a,
button,
.btn,
.form-control,
.select2-selection,
.client-bottom-nav-item,
.client-mobile-more-item {
    -webkit-tap-highlight-color: rgba(24, 125, 228, .12);
}

button,
.btn,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

.text-break-mobile,
pre,
code,
.api-code,
.wallet-info-row strong,
.order-link,
.service-name,
.service-mobile-title {
    overflow-wrap: anywhere;
    word-break: break-word;
}

pre,
code,
.api-code {
    max-width: 100%;
}

.client-scroll-x,
.table-responsive,
.dataTables_wrapper,
.api-code,
pre {
    scrollbar-width: thin;
    scrollbar-color: rgba(24, 125, 228, .42) rgba(226, 232, 240, .72);
}

.client-scroll-x::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar,
.api-code::-webkit-scrollbar,
pre::-webkit-scrollbar {
    height: 7px;
    width: 7px;
}

.client-scroll-x::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.dataTables_wrapper::-webkit-scrollbar-thumb,
.api-code::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
    background: rgba(24, 125, 228, .42);
    border-radius: 999px;
}

.client-scroll-x::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.dataTables_wrapper::-webkit-scrollbar-track,
.api-code::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, .72);
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    body.client-has-bottom-nav #kt_content,
    body.client-has-bottom-nav .content {
        padding-bottom: calc(var(--client-mobile-bottom-nav-height) + var(--client-mobile-safe-bottom) + 22px) !important;
    }

    body.client-has-bottom-nav .footer {
        padding-bottom: calc(var(--client-mobile-bottom-nav-height) + var(--client-mobile-safe-bottom) + 12px) !important;
    }

    .wrapper,
    .container,
    .container-fluid,
    .row,
    [class*="col-"] {
        min-width: 0;
    }

    .row {
        margin-left: -7px;
        margin-right: -7px;
    }

    .row > [class*="col-"] {
        padding-left: 7px;
        padding-right: 7px;
    }

    .card,
    .card.card-custom,
    .wallet-card,
    .order-card,
    .service-catalog,
    .order-history-wrap,
    .support-wrap,
    .api-doc-card,
    .account-card {
        border-radius: var(--client-stage4-radius) !important;
        box-shadow: var(--client-stage4-shadow) !important;
    }

    .card-header,
    .card-body,
    .card-footer {
        min-width: 0;
    }

    .btn:not(.btn-icon),
    .form-control,
    .input-group-text,
    .select2-container--default .select2-selection--single {
        min-height: 44px;
    }

    .btn-sm:not(.btn-icon) {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .input-group {
        min-width: 0;
    }

    .input-group > .form-control {
        min-width: 0;
    }

    .dropdown-menu {
        border-radius: 14px;
        border: 1px solid var(--client-stage4-border);
        box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
    }

    .dropdown-item {
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: normal;
    }

    .modal-dialog {
        margin: 10px auto;
        max-width: calc(100% - 20px);
    }

    .modal-content {
        border: 0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 26px 70px rgba(15, 23, 42, .28);
    }

    .modal-header,
    .modal-footer {
        padding: 14px 16px;
    }

    .modal-body {
        padding: 16px;
        max-height: calc(100vh - 182px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        gap: 8px;
        flex-wrap: wrap;
    }

    .modal-footer .btn {
        flex: 1 1 140px;
    }

    .swal2-container,
    .sweet-alert {
        z-index: 100050 !important;
    }

    .swal2-popup {
        width: calc(100vw - 24px) !important;
        max-width: 420px !important;
        border-radius: 18px !important;
    }

    /* DataTables: phần điều khiển gọn hơn trên tablet/mobile */
    .dataTables_wrapper .row,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        min-width: 0;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none !important;
        text-align: left !important;
        width: 100%;
        margin: 0 0 10px;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        width: 100%;
        display: block;
        margin: 0;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100% !important;
        margin: 6px 0 0 !important;
        min-height: 42px;
        border-radius: 10px !important;
    }

    .dataTables_wrapper .dataTables_info {
        padding-top: 10px !important;
        text-align: center;
        white-space: normal;
    }

    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    .pagination,
    .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    .page-link {
        border-radius: 9px !important;
        min-width: 36px;
        text-align: center;
    }

    .table-responsive.client-scroll-ready::after,
    .dataTables_wrapper.client-scroll-ready::after {
        content: "Kéo ngang để xem thêm";
        display: block;
        padding: 8px 10px 2px;
        color: var(--client-stage4-muted);
        font-size: 12px;
        text-align: center;
    }

    /* Select2 global trên mobile: dropdown chắc nền, không tràn viewport */
    body > .select2-container,
    body > .select2-container--open {
        max-width: calc(100vw - 20px) !important;
    }

    .select2-dropdown {
        max-width: calc(100vw - 20px) !important;
    }

    .select2-results__options {
        max-height: min(340px, 56vh) !important;
        overscroll-behavior: contain;
    }

    .select2-search--dropdown .select2-search__field {
        font-size: 16px !important;
    }

    /* Bottom nav: nội dung không bị che ở thiết bị có safe area */
    .client-bottom-nav {
        padding-bottom: calc(6px + var(--client-mobile-safe-bottom)) !important;
    }

    .client-mobile-more-sheet {
        padding-bottom: calc(var(--client-mobile-bottom-nav-height) + var(--client-mobile-safe-bottom) + 18px) !important;
    }

    body.client-mobile-more-open .client-mobile-more-sheet {
        overscroll-behavior: contain;
    }
}

@media (max-width: 767.98px) {
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .subheader h1,
    .subheader h2,
    .subheader h3,
    .subheader h4,
    .subheader h5,
    .card-title,
    .wallet-title,
    .service-catalog h3,
    .order-history-head h3,
    .support-header h4,
    .api-doc-card h3,
    .account-head h3 {
        font-size: 18px !important;
        line-height: 1.28 !important;
    }

    .text-muted,
    .card-subtitle,
    .client-mobile-sheet-subtitle {
        line-height: 1.45;
    }

    .card-body {
        padding: 14px !important;
    }

    .card-header,
    .card-footer {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .btn-block-mobile,
    .order-card .btn-primary,
    .wallet-page .btn-primary.btn-lg,
    .support-actions .btn,
    .account-actions .btn {
        width: 100%;
    }

    .wallet-info-row {
        gap: 8px;
    }

    .wallet-info-row .btn,
    .api-doc-card .input-group-append .btn,
    .api-doc-card .input-group-prepend .btn {
        width: 100%;
        margin-top: 6px;
    }

    .api-doc-card .input-group,
    .wallet-info-row {
        flex-wrap: wrap;
    }

    .api-doc-card .input-group > .form-control,
    .api-doc-card .input-group > .input-group-append,
    .api-doc-card .input-group > .input-group-prepend {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .api-doc-card .input-group .btn {
        border-radius: 10px !important;
    }

    .client-mobile-more-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .client-mobile-more-item {
        min-height: 76px;
        border-radius: 16px;
    }
}

@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .row > [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }

    .card,
    .card.card-custom,
    .wallet-card,
    .order-card,
    .service-catalog,
    .order-history-wrap,
    .support-wrap,
    .api-doc-card,
    .account-card {
        border-radius: 14px !important;
    }

    .modal-dialog {
        margin: 8px auto;
        max-width: calc(100% - 16px);
    }

    .modal-body {
        max-height: calc(100vh - 164px);
    }

    .client-mobile-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-bottom-nav-label {
        font-size: 10px !important;
    }

    .client-bottom-nav-icon {
        font-size: 17px !important;
    }
}

/* Màn hình thấp hoặc xoay ngang: rút gọn sheet/nav để không che form */
@media (max-width: 991.98px) and (max-height: 560px) {
    :root {
        --client-mobile-bottom-nav-height: 64px;
    }

    .client-bottom-nav {
        min-height: 60px !important;
        padding-top: 6px !important;
    }

    .client-bottom-nav-icon {
        font-size: 16px !important;
        margin-bottom: 1px !important;
    }

    .client-bottom-nav-label {
        font-size: 10px !important;
    }

    .client-mobile-more-sheet {
        max-height: 86vh !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .client-mobile-more-item {
        min-height: 64px !important;
    }
}

/* Tablet ngang: không làm card quá lớn, giữ nhịp đọc gọn */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .card-body {
        padding: 18px !important;
    }

    .service-mobile-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Dark mode bổ sung */
body.theme-dark .modal-content,
body.theme-dark .dropdown-menu,
body.theme-dark .client-mobile-more-sheet,
body.theme-dark .service-mobile-card,
body.theme-dark .client-mobile-empty {
    background: #18212b !important;
    color: #e5edf8 !important;
    border-color: #2b3746 !important;
}

body.theme-dark .modal-header,
body.theme-dark .modal-footer,
body.theme-dark .client-mobile-sheet-header {
    border-color: #2b3746 !important;
}

body.theme-dark .dropdown-item,
body.theme-dark .client-mobile-more-text,
body.theme-dark .client-mobile-sheet-title {
    color: #e5edf8 !important;
}

body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
    background: rgba(24, 125, 228, .18) !important;
}

/* =========================================================
   Stage 4.1 - Fix mobile burger overlay + menu stacking
   ========================================================= */
@media (max-width: 991.98px) {
    #kt_header_mobile {
        position: sticky;
        top: 0;
        z-index: 10070 !important;
        background: #ffffff;
    }

    #kt_header_mobile_toggle {
        position: relative;
        z-index: 10080 !important;
        pointer-events: auto !important;
    }

    .header-menu-wrapper {
        z-index: 10060 !important;
        background: #ffffff !important;
        pointer-events: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 18px 0 45px rgba(15, 23, 42, .22) !important;
    }

    .header-menu-wrapper.header-menu-wrapper-on {
        z-index: 10060 !important;
        pointer-events: auto !important;
    }

    .header-menu-wrapper-overlay {
        z-index: 10050 !important;
        background: rgba(15, 23, 42, .42) !important;
        pointer-events: auto !important;
    }

    .header-menu-wrapper .container-fluid,
    .header-menu-wrapper .header-menu,
    .header-menu-wrapper .menu-nav,
    .header-menu-wrapper .menu-link {
        position: relative;
        z-index: 1;
        pointer-events: auto !important;
    }

    .header-menu-mobile .menu-nav {
        padding-bottom: calc(var(--client-mobile-bottom-nav-height, 76px) + var(--client-mobile-safe-bottom, 0px) + 16px) !important;
    }

    [data-offcanvas-header-menu-wrapper=on] .client-bottom-nav {
        z-index: 9990 !important;
    }

    body.client-mobile-more-open .header-menu-wrapper-overlay {
        display: none !important;
    }
}

body.theme-dark #kt_header_mobile,
body.theme-dark .header-menu-wrapper {
    background: #151c26 !important;
}


/* =========================================================
   Client notification offcanvas stacking fix
   - Header mobile đang có z-index cao để tránh lỗi menu.
   - Offcanvas thông báo cần cao hơn header để nút đóng không bị che.
   ========================================================= */
#kt_demo_panel.client-notification-offcanvas {
    z-index: 10150 !important;
    pointer-events: auto !important;
}

#kt_demo_panel.client-notification-offcanvas.offcanvas-on {
    z-index: 10150 !important;
}

#kt_demo_panel.client-notification-offcanvas .offcanvas-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #ffffff;
    padding-top: 2px;
}

#kt_demo_panel.client-notification-offcanvas #kt_demo_panel_close {
    position: relative;
    z-index: 4;
    pointer-events: auto !important;
}

#kt_demo_panel.client-notification-offcanvas .offcanvas-content {
    position: relative;
    z-index: 2;
}

@media (max-width: 991.98px) {
    #kt_demo_panel.client-notification-offcanvas {
        top: 0 !important;
        bottom: 0 !important;
        width: min(92vw, 375px) !important;
        max-width: 92vw !important;
    }
}

body.theme-dark #kt_demo_panel.client-notification-offcanvas,
body.theme-dark #kt_demo_panel.client-notification-offcanvas .offcanvas-header {
    background: #18212b !important;
    color: #e5edf8 !important;
}