/* ============================================================
   Moban 8-10-47 — responsive.css
   ============================================================ */

/* ===== Màn hình vừa & nhỏ ===== */

@media (max-width: 992px) {

    .poster-scatter { gap: 34px 28px; }

    .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

}

/* ===== Máy tính bảng & điện thoại ngang ===== */

@media (max-width: 768px) {

    .hero { min-height: 520px; }

    .hero-content { padding: 0 7vw; }

    /* Poster rơi chéo trở về một cột thẳng hàng */
    .poster-scatter {
        display: block;
        max-width: 520px;
    }

    .poster-card { margin-bottom: 40px; }

    .poster-card:nth-child(n) img { transform: none; }

    .poster-card:hover img { transform: scale(1.02); }

    .poster-stage { padding: 72px 7vw 84px; }

    .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

    .news-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }

    .stage-head { margin-bottom: 40px; }

    .article-nav { grid-template-columns: minmax(0, 1fr); }

    .article-nav-item-next { text-align: left; }

    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }

    .cta-band { padding: 72px 7vw; }

    .hero-dots { right: 7vw; bottom: 26px; }

}

/* ===== Điện thoại nhỏ ===== */

@media (max-width: 480px) {

    .brand-logo { max-height: 36px; }

    .hero-title { font-size: 2.1rem; }

    .hero-actions .btn-lg { width: 100%; text-align: center; }

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

    .marquee-item { font-size: 0.82rem; padding: 10px 10px; }

    .news-paper,
    .game-shelf,
    .article-paper { padding: 64px 6vw; }

    .page-banner { padding: 130px 6vw 48px; }

    .footer-warning p { font-size: 0.8rem; }

}