/* =========================================================
   Responsive nền cho khu user
   Giai đoạn 1: làm sạch layout tablet/mobile, không đụng logic.
   File này được load sau style.css và trước CSS riêng từng trang.
   ========================================================= */

:root {
    --client-mobile-bg: #f3f6fb;
    --client-card-bg: #ffffff;
    --client-border: #e5eaf3;
    --client-text: #172033;
    --client-muted: #667085;
    --client-primary: #187de4;
    --client-radius: 14px;
    --client-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

body {
    background-size: cover !important;
    background-position: center top !important;
}

/* Không để nội dung dài làm vỡ màn hình nhỏ */
#kt_wrapper,
#kt_content,
.main,
.content,
.card,
.card-body,
.table-responsive,
.dataTables_wrapper {
    max-width: 100%;
}

/* Bảng dài ưu tiên cuộn ngang thay vì ép vỡ layout */
.table-responsive,
.dataTables_wrapper,
.table-scroll,
.client-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table,
.dataTables_wrapper table {
    min-width: 760px;
}

/* Form/select ổn định trên mobile, tránh iOS tự zoom khi focus */
.form-control,
.form-control-solid,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-search__field {
    font-size: 16px;
}

.select2-container {
    max-width: 100% !important;
}

.select2-dropdown {
    z-index: 99999 !important;
}

.select2-results__options {
    -webkit-overflow-scrolling: touch;
}

/* Header/menu nền tảng */
/* .header-mobile,
.header,
.header-menu-wrapper {
    border-bottom: 1px solid rgba(229, 234, 243, .85);
} */

.header-mobile {
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.header-mobile img,
.header .logo-default {
    object-fit: contain;
}

.header-menu-wrapper .container-fluid,
.header .container-fluid,
.subheader .container-fluid,
.footer .container-fluid,
.container-fluid {
    max-width: 100%;
}

/* Popup quảng cáo/giới thiệu không tràn màn hình nhỏ */
.ps-popup__content {
    max-height: calc(100vh - 24px);
}

.ps-popup__content .box-img img {
    max-height: calc(100vh - 90px);
    object-fit: contain;
}

/* Dark mode tương thích responsive */
body.theme-dark {
    background: #101418 !important;
}

body.theme-dark .header-mobile,
body.theme-dark .header,
body.theme-dark .header-menu-wrapper {
    border-color: #2b3642 !important;
}

body.theme-dark .table-responsive,
body.theme-dark .dataTables_wrapper {
    background: #1b232d;
}

@media (max-width: 1199.98px) {
    .content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .card.card-custom,
    .card {
        border-radius: var(--client-radius);
    }
}

@media (max-width: 991.98px) {
    body {
        background-image: none !important;
        background-color: var(--client-mobile-bg) !important;
    }

    .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #kt_content.content {
        padding: 14px 0 24px !important;
    }

    .subheader {
        padding: 12px 0 4px !important;
        background: transparent !important;
    }

    .subheader h5,
    .subheader .text-dark {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .header-mobile {
        min-height: 56px;
        padding: 0 14px;
        z-index: 1001;
    }

    .header-mobile .max-h-30px {
        max-height: 36px !important;
    }

    .header-menu-wrapper {
        z-index: 1000;
        background: #ffffff;
    }

    .header-menu-mobile {
        max-height: calc(100vh - 58px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header-menu-mobile .menu-nav {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .header-menu-mobile .menu-nav > .menu-item > .menu-link {
        min-height: 44px;
        border-radius: 10px;
        margin: 2px 8px;
    }

    .topbar {
        gap: 4px;
    }

    .topbar .btn-icon {
        width: 38px;
        height: 38px;
    }

    .card.card-custom,
    .card {
        margin-bottom: 14px;
        border: 1px solid var(--client-border);
        box-shadow: var(--client-shadow);
        overflow: hidden;
    }

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

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

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

    .form-group {
        margin-bottom: 14px;
    }

    label {
        margin-bottom: 6px;
    }

    .form-control,
    .form-control-solid,
    .input-group-text {
        min-height: 44px;
        border-radius: 10px !important;
    }

    .btn:not(.btn-icon) {
        min-height: 42px;
        border-radius: 10px;
    }

    .select2-container--default .select2-selection--single {
        min-height: 44px !important;
        border-radius: 10px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        min-height: 42px !important;
    }

    .select2-results__options {
        max-height: 58vh !important;
    }

    .modal-dialog {
        margin: 12px;
    }

    .modal-content {
        border-radius: 16px;
    }

    .footer {
        padding: 14px 0 !important;
        text-align: center;
    }

    .footer .container-fluid {
        justify-content: center !important;
    }
}

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

    #kt_content.content {
        padding-top: 10px !important;
    }

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

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

    .card-header .card-title,
    .card-title,
    .card-label {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    .card-toolbar {
        margin-top: 8px;
        width: 100%;
        justify-content: flex-start !important;
        gap: 8px;
        flex-wrap: wrap;
    }

    .card-header {
        flex-wrap: wrap;
        align-items: flex-start !important;
    }

    .btn-group,
    .btn-group-vertical {
        flex-wrap: wrap;
    }

    .nav.nav-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

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

    .alert {
        border-radius: 12px;
        padding: 12px 14px;
    }

    .input-group {
        flex-wrap: nowrap;
    }

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

    .table-responsive {
        border-radius: 12px;
    }

    .table td,
    .table th {
        white-space: nowrap;
    }

    .dataTables_filter,
    .dataTables_length,
    .dt-buttons {
        width: 100%;
        text-align: left !important;
        margin-bottom: 8px;
    }

    .dataTables_filter label,
    .dataTables_length label {
        width: 100%;
    }

    .dataTables_filter input,
    .dataTables_length select {
        max-width: 100%;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }
}

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

    .header-mobile {
        min-height: 54px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .header-mobile .max-h-30px {
        max-width: 170px;
        max-height: 32px !important;
    }

    .burger-icon {
        width: 30px;
        height: 30px;
    }

    .card.card-custom,
    .card {
        border-radius: 12px;
        margin-bottom: 12px;
    }

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

    .form-control,
    .form-control-solid,
    .input-group-text,
    .select2-container--default .select2-selection--single {
        min-height: 43px !important;
    }

    .btn:not(.btn-icon) {
        min-height: 42px;
        padding-left: 14px;
        padding-right: 14px;
    }

    h1, .h1 { font-size: 24px !important; }
    h2, .h2 { font-size: 21px !important; }
    h3, .h3 { font-size: 19px !important; }
    h4, .h4 { font-size: 17px !important; }

    .ps-popup {
        padding: 8px;
    }

    .ps-popup__content {
        width: 100%;
        max-width: 100%;
        min-height: auto;
    }

    .ps-popup__close {
        top: 10px;
        right: 10px;
    }

    .ps-popup .link {
        top: 0;
    }
}