/* ============================================================
   MOBAN 8-10-39 — responsive.css
   Hai điểm ngắt chính: 768px (máy tính bảng) và 480px (điện thoại).
   ============================================================ */

/* ---------- Điểm ngắt 768px ---------- */
@media (max-width: 768px) {
    :root { --wrap: 92vw; }

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

    .statsbar__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }

    .intro { grid-template-columns: 1fr; }

    .games-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .slides-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: 1fr; }

    .post-row { grid-template-columns: 1fr; }
    .post-row__body { padding: 4px 22px 24px; }
    .post-row__thumb img { min-height: 0; aspect-ratio: 16 / 9; }

    .article-nav { grid-template-columns: 1fr; }
    .article-nav .next { text-align: left; }

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

    .hero__scroll { display: none; }
}

/* ---------- Điểm ngắt 480px ---------- */
@media (max-width: 480px) {
    body { font-size: 15px; }

    .site-header { padding: 12px 14px; }
    .brand img { max-height: 36px; }
    .hamburger { width: 46px; height: 46px; border-radius: 13px; }

    .overlay-nav { padding: 84px 22px 32px; }
    .overlay-nav__foot .btn { width: 100%; justify-content: center; }

    .hero { padding-top: 100px; }
    .hero__cta .btn { width: 100%; justify-content: center; }
    .hero__dots { flex-wrap: wrap; }

    .statsbar__grid { grid-template-columns: 1fr 1fr; }
    .statsbar__num { font-size: 24px; }

    .games-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .slides-grid { grid-template-columns: 1fr; }

    .intro__badge { left: 10px; bottom: -14px; padding: 10px 14px; font-size: 12.5px; }

    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-legal__warn { font-size: 12.5px; padding: 14px 16px; }

    .cta-panel { border-radius: 20px; }
}