/* ============================================================
   Moban 8-10-11 — Responsive
   Thác nước: 4 cột → 3 → 2 → 1
   ============================================================ */

@media (max-width: 1024px) {
    .masonry { columns: 3; }
    .hero-inner { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; }
    .hero-stack { height: 320px; max-width: 560px; margin: 0 auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .layout-with-sidebar { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 768px) {
    .masonry { columns: 2; column-gap: 18px; }
    .masonry-related { columns: 2; }

    .topbar-text { display: none; }

    .nav-toggle { display: flex; }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(340px, 88vw);
        height: 100vh;
        background: var(--card);
        box-shadow: var(--shadow-lift);
        padding: 80px 26px 30px;
        overflow-y: auto;
        transition: right .32s ease;
        z-index: 100;
    }

    .nav-open .main-nav { right: 0; }

    .nav-menu { flex-direction: column; gap: 2px; }
    .nav-item > a { display: block; padding: 13px 12px; }

    .nav-item.has-mega { position: relative; }

    .mega-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        padding: 14px 0 6px;
        border-top: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .nav-item.has-mega.mega-open .mega-panel { display: grid; }

    .btn-login { display: none; }

    .cta-band-inner { flex-direction: column; text-align: center; }

    .layout-with-sidebar { grid-template-columns: 1fr; gap: 40px; }

    .single-article, .page-article { padding: 28px 24px; }

    .single-post-nav { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; }

    .hero-stats { gap: 22px; }
}

@media (max-width: 480px) {
    .masonry { columns: 1; }
    .masonry-related { columns: 1; }

    .hero-title { font-size: 29px; }
    .hero-stack { height: 260px; }
    .hero-actions .btn-lg { width: 100%; }

    .btn-register { padding: 9px 14px; font-size: 13px; }

    .single-download-box { flex-direction: column; text-align: center; }

    .pin-title { font-size: 16.5px; }

    .single-meta { flex-direction: column; gap: 6px; }
}