@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .layout-content {
        min-height: auto;
    }

    .page-download .container,
    .page-guide .container,
    .page-news-detail .container,
    .page-changepass .container,
    .page-changepin .container,
    .page-forgotpass .container,
    .page-topup-history .container,
    .page-topup_history .container,
    .page-shop-history .container,
    .page-shop_history .container,
    .page-login-history .container,
    .page-login_history .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.page-login,
    body.page-register {
        overflow-y: auto !important;
        min-height: 100svh;
    }

    .login-page-container,
    .register-page-container {
        height: auto !important;
        min-height: calc(100svh - var(--nav-height, 64px)) !important;
        padding: 18px 12px 28px !important;
        align-items: flex-start !important;
    }

    .login-card,
    .register-card,
    .reg-card {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        border-radius: 20px !important;
    }

    .turnstile-wrap,
    .captcha-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .d6-wrapper,
    .topup-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: calc(100svh - var(--nav-height, 64px)) !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    .d6-grid,
    .topup-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        height: auto !important;
        overflow: visible !important;
    }

    .d-panel,
    .topup-panel,
    .history-panel,
    .premium-qr-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 16px !important;
    }

    .d6-topbar,
    .topup-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .topup-tabs {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .topup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hist-table,
    .th-table,
    .lh-table,
    .sh-table {
        min-width: 680px;
    }

    .table-responsive,
    .lh-table-container,
    .sh-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }

    body.page-download,
    body.page-download html {
        overflow-y: auto !important;
        height: auto !important;
    }

    .download-wrapper,
    .download-main,
    .download-content,
    .dl-stage {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: calc(100svh - var(--nav-height, 64px)) !important;
        overflow: visible !important;
    }

    .dl-stage {
        position: relative !important;
        inset: auto !important;
        padding: 18px 12px 32px !important;
        justify-content: center !important;
    }

    .dl-bg-fixed,
    .dl-fog {
        position: fixed !important;
    }

    .dl-back-title,
    .dl-char-hero,
    .dl-tech-ring {
        display: none !important;
    }

    .dl-core-wrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        z-index: 20 !important;
    }

    .dl-super-card {
        padding: 22px !important;
        border-radius: 20px !important;
    }

    .dl-mobile-warning {
        display: block !important;
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto 14px !important;
        border-radius: 18px !important;
    }

    .dl-tools-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 430px) {
    .topup-grid {
        grid-template-columns: 1fr !important;
    }

    .login-card,
    .register-card,
    .reg-card {
        border-radius: 16px !important;
    }

    .premium-qr-container img {
        width: min(240px, 78vw) !important;
        height: auto !important;
    }
}