/* ============================================
   responsive.css — Responsive Breakpoints
   ============================================ */

/* ── Tablet (max-width: 900px) ── */
@media (max-width: 900px) {
    body {
        padding-top: 70px;
    }

    .header-container {
        padding: 10px 16px;
        gap: 12px;
    }

    .logo img {
        height: 42px;
    }

    .nav-main {
        gap: 4px;
    }    .nav-main a {
        font-size: 0.88rem;
        padding: 7px 12px;
    }

    .btn-nav-auth {
        font-size: 0.85rem;
        padding: 7px 14px;
    }

    .banner-slider {
        height: 500px;
        margin-top: -70px;
    }    .banner {
        height: 280px;
        padding-top: 70px;
        margin-top: -70px;
    }

    .banner-overlay h1 {
        font-size: 1.8rem;
    }    .feature-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .about-info {
        order: -1;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .about-header h2 {
        font-size: 1.8rem;
    }

    .sidebar {
        position: static;
    }

    .play-icon {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;    }    .login-container,
    .settings-container,
    .cash-charge-container {
        margin: 0 auto;        padding: 28px 24px;    }    .settings-tabs,
    .settings-message {
        width: 100%;
    }

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-tab-header {
        padding: 16px 20px;
    }

    .settings-tab-body {
        padding: 20px 20px 20px;
    }
}

/* ── Mobile (max-width: 600px) ── */
@media (max-width: 600px) {
    body {
        padding-top: 60px;
    }

    .header-container {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 8px;
    }

    .logo img {
        height: 36px;
    }

    .nav-main {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        gap: 2px;
        flex-wrap: wrap;
    }    .nav-main a {
        font-size: 0.82rem;
        padding: 6px 10px;
    }

    .nav-auth {
        gap: 6px;
    }

    .nav-divider {
        height: 16px;
    }

    .btn-nav-auth {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .user-dropdown button {
        font-size: 0.82rem;
        padding: 6px 12px;
    }

    .lang-selector button {
        font-size: 0.78rem;
        padding: 5px 10px;
    }    .banner-slider {
        height: 360px;
        margin-top: -60px;
    }    .banner {
        height: 240px;
        padding-top: 60px;
        margin-top: -60px;
    }

    .banner-overlay h1 {
        font-size: 1.4rem;
    }

    .banner-overlay p {
        font-size: 0.9rem;
    }    .feature-content {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-header h2 {
        font-size: 1.5rem;
    }    .about-section {
        margin-bottom: 40px;
    }

    .play-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .video-modal-content {
        width: 95%;
    }

    .video-modal-close {
        top: -38px;
        font-size: 1.6rem;
    }

    .main-content {
        padding: 20px 12px;
    }    .login-container,
    .settings-container,
    .cash-charge-container {
        padding: 24px 18px;    }    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-panel-header {
        padding: 14px 16px;
    }

    .settings-panel-body {
        padding: 16px;
    }

    .logs-table th,
    .logs-table td {
        padding: 5px 6px;
        font-size: 0.72rem;
    }

    .settings-tab-header {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .settings-tab-body {
        padding: 16px 16px 16px;
    }

    .login-container h2,
    .settings-container h2,
    .cash-charge-container h2 {
        font-size: 1.25rem;
    }

    .download-section h2 {
        font-size: 1.4rem;
    }

    .download-faq-container {
        padding: 20px 12px;
    }

    .amount-buttons {
        gap: 6px;
    }

    .btn-amount {
        padding: 6px 12px;
        font-size: 0.82rem;
    }

    .btn-download {
        padding: 12px 28px;
        font-size: 0.95rem;
    }
}