/* ============================================================
   MOBAN 8-10-48 — responsive.css
   ============================================================ */

@media (max-width: 1100px) {
    .game-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Điểm gãy 768px ---------- */
@media (max-width: 768px) {
    :root { --header-h: 60px; }

    .header-inner { gap: 14px; padding: 0 16px; }
    .brand-name { font-size: 16px; }

    .nav-toggle { display: flex; }
    .site-nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: rgba(15, 15, 35, 0.97);
        border-bottom: 1px solid var(--c-line);
        padding: 14px 16px 22px;
        transform: translateY(-130%);
        transition: transform 0.35s ease;
    }
    .site-nav.is-open { transform: translateY(0); }
    .nav-menu { flex-direction: column; gap: 4px; }
    .nav-menu a { padding: 12px 16px; }

    .dot-nav { display: none; }

    .panel { padding: 80px 0; }

    /* Collage thu gọn về hai cột, giảm độ xoay */
    .collage {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 26px;
    }
    .poster-card { width: calc(50% - 13px); }
    .poster-a, .poster-b, .poster-c,
    .poster-d, .poster-e, .poster-f { transform: rotate(-1.5deg); }
    .poster-b, .poster-d, .poster-f { transform: rotate(1.5deg) translateY(14px); }

    .game-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .news-grid { grid-template-columns: 1fr; }
    .footer-widgets { grid-template-columns: 1fr; gap: 32px; }
    .article-neon { padding: 28px 22px; }
}

/* ---------- Điểm gãy 480px ---------- */
@media (max-width: 480px) {
    body { font-size: 15px; }

    .header-actions .btn-small { display: none; }

    .hero-cta { flex-direction: column; align-items: stretch; padding: 0 10px; }
    .btn-neon, .btn-ghost { text-align: center; }

    /* Collage thu gọn về một cột duy nhất */
    .poster-card { width: 100%; }
    .poster-a, .poster-b, .poster-c,
    .poster-d, .poster-e, .poster-f { transform: none; }

    .game-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .panel-head { margin-bottom: 40px; }
    .article-nav { flex-direction: column; }
}