/* ============================================================
   RESPONSIVE — Moban 8-10-36
   ============================================================ */

/* ---------- Tablet & nhỏ hơn: ≤1024px ---------- */
@media (max-width: 1024px) {
    .section-dots { left: 14px; }
    .hero-inner { gap: 30px; }
    .game-grid { grid-template-columns: repeat(3, 1fr); }
    .single-layout, .archive-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* ---------- Mobile dọc / tablet nhỏ: ≤768px ---------- */
@media (max-width: 768px) {
    /* Thanh chấm chuyển thành thanh ngang dưới đáy màn hình */
    .section-dots {
        left: 50%;
        top: auto;
        bottom: 14px;
        transform: translateX(-50%);
        flex-direction: row;
        gap: 16px;
        width: auto;
        background: rgba(16, 48, 31, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 10px 16px;
        border-radius: 999px;
    }
    .dot-label { display: none; }

    .header-inner { flex-wrap: wrap; gap: 12px; }
    .nav-toggle { display: block; order: 3; }
    .main-nav {
        order: 4;
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }
    .main-nav.nav-open { max-height: 420px; }
    .nav-menu { flex-direction: column; gap: 2px; }
    .header-actions { margin-left: auto; order: 2; }

    .story-section { padding: 120px 0 90px; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-copy, .download-copy { grid-area: auto; }
    .hero-posters { display: none; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-grid > *, .stats-grid > * { grid-area: auto; }
    .game-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .download-wrap { grid-template-columns: 1fr; gap: 40px; }
    .download-visual { display: none; }
    .footer-widgets { grid-template-columns: 1fr; gap: 26px; }

    .page-main { padding: 110px 0 70px; }
    .post-grid { grid-template-columns: repeat(2, 1fr); }
    .single-layout, .archive-layout { grid-template-columns: 1fr; }
    .archive-posts, .archive-sidebar, .single-article, .single-sidebar { grid-area: auto; }
    .single-sidebar, .archive-sidebar { position: static; }
    .single-article { padding: 28px 22px; }
    .post-row-link { grid-template-columns: 150px 1fr; }
}

/* ---------- Điện thoại nhỏ: ≤480px ---------- */
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .header-actions .btn-login { display: none; }
    .hero-title { font-size: 1.9rem; }
    .hero-actions .btn-lg { width: 100%; }
    .chapter-title { font-size: 1.65rem; }
    .game-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stats-grid { grid-template-columns: 1fr; }
    .post-grid { grid-template-columns: 1fr; }
    .post-row-link { grid-template-columns: 1fr; }
    .post-row-thumb, .post-row-body { grid-area: auto; }
    .post-row-thumb { aspect-ratio: 16 / 9; }
    .single-nav { flex-direction: column; }
    .single-nav-item { max-width: 100%; }
}