/* ==========================================================================
   Moban 8-10-17 · responsive.css
   ========================================================================== */

/* ---------------- Tablet & mobile ≤ 992px ---------------- */
@media (max-width: 992px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .game-grid { grid-template-columns: repeat(3, 1fr); }
    .about-panel { grid-template-columns: 1fr; padding: 30px; }
    .about-imgs { min-height: 300px; }
    .download-panel { grid-template-columns: 1fr; padding: 32px; }
}

/* ---------------- Mobile ≤ 768px ---------------- */
@media (max-width: 768px) {
    /* Cột chấm tròn cố định chuyển thành thanh ngang dán dưới header */
    .dot-rail {
        position: fixed; left: 0; right: 0; top: auto; bottom: 0;
        transform: none; flex-direction: row; justify-content: center;
        gap: 22px; width: auto; padding: 10px 12px;
        background: rgba(253, 252, 250, 0.95); backdrop-filter: blur(8px);
        border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(28, 51, 34, 0.08);
    }
    .dot-rail-line { display: none; }
    .dot-link { width: auto; height: auto; }
    .dot-label { display: none; }
    body.home { padding-bottom: 58px; }

    .header-inner { flex-wrap: wrap; gap: 12px; }
    .nav-toggle { display: block; margin-left: auto; order: 2; }
    .header-actions { order: 3; }
    .main-nav { order: 4; width: 100%; margin-left: 0; display: none; }
    .main-nav.is-open { display: block; }
    .nav-menu { flex-direction: column; gap: 4px; padding-bottom: 10px; }

    .timeline { padding-left: 46px; }
    .timeline-line, .timeline-fill { left: 15px; }
    .timeline-node { left: 17px; }

    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .game-grid { grid-template-columns: repeat(2, 1fr); }
    .dl-steps { grid-template-columns: 1fr; }
    .footer-widgets { grid-template-columns: 1fr; gap: 26px; }
    .article-row-link { flex-direction: column; }
    .article-row-thumb { flex: none; width: 100%; aspect-ratio: 16 / 9; }
    .single-panel { padding: 28px 22px; }
    .hero-section { padding: 56px 0 64px; }
    .hero-mini-cards { justify-content: flex-start; }
}

/* ---------------- Mobile nhỏ ≤ 480px ---------------- */
@media (max-width: 480px) {
    .news-grid, .game-grid { grid-template-columns: 1fr; }
    .hero-stats { gap: 20px; flex-wrap: wrap; }
    .hero-actions .btn { width: 100%; }
    .header-actions { width: 100%; }
    .header-actions .btn { flex: 1; padding: 9px 10px; }
    .archive-cta, .single-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .about-imgs { min-height: 240px; }
    .ticker-item { font-size: 11.5px; }
    .tl-title { font-size: 24px; }
    .download-panel { padding: 24px 18px; }
}