/* ==========================================================================
   Moban 8-10-37 — responsive.css
   Hai điểm ngắt: 768px và 480px
   ========================================================================== */

/* ---------- Tablet & nhỏ hơn (≤1024px) ---------- */
@media (max-width: 1024px) {
    .games-grid { grid-template-columns: repeat(4, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .dot-nav { right: 12px; }
    .dot-nav a .dot-label { display: none; }
}

/* ---------- Điểm ngắt 768px ---------- */
@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .site-nav {
        position: absolute; top: 100%; inset-inline: 0;
        background: var(--c-white);
        box-shadow: 0 18px 30px rgba(41, 50, 65, 0.18);
        max-height: 0; overflow: hidden;
        transition: max-height .35s ease;
    }
    .site-nav.is-open { max-height: 420px; }
    .site-nav ul { flex-direction: column; gap: 0; padding: 10px 0; }
    .site-nav li { border-bottom: 1px solid rgba(61, 90, 128, 0.1); }
    .site-nav a { display: block; padding: 13px 22px; }
    .header-cta { display: none; }

    .section-pad { padding: 58px 0; }
    .games-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .promo-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .promo-card { grid-area: auto; }
    .news-grid { grid-template-columns: 1fr; }
    .steps-list { grid-template-columns: 1fr; gap: 34px; }
    .post-loop { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .hero { min-height: 88vh; }
    .dot-nav { gap: 13px; }
    .dot-nav a { width: 11px; height: 11px; }
}

/* ---------- Điểm ngắt 480px ---------- */
@media (max-width: 480px) {
    body { font-size: 15px; }
    .container { width: 90%; }
    .games-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .game-card .game-name { font-size: 12.5px; padding: 20px 6px 8px; }
    .promo-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; }
    .marquee-track .m-item { font-size: 14px; padding: 0 16px; }
    .dot-nav { right: 8px; gap: 11px; }
    .dot-nav a { width: 10px; height: 10px; }
    .page-hero { padding: 120px 0 44px; }
    .single-article { padding: 22px 18px; }
    .section-head { margin-bottom: 32px; }
}