/* ── Máy tính bảng / màn hình hẹp ─────────────────────────────────── */
@media (max-width: 991px) {
    .games-grid { grid-template-columns: repeat(4, 1fr); }
    .poster-strip { gap: 14px; }
    .gallery-arrow { display: none; }
    .gallery-viewport { border-radius: 14px; }
    .news-side,
    .content-side { margin-top: 10px; }
}

/* ── Mobile dọc ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px;
        border-radius: 12px;
        border: 1.5px solid var(--line);
        background: var(--white);
        cursor: pointer;
    }
    .nav-toggle-icon,
    .nav-toggle-icon::before,
    .nav-toggle-icon::after {
        content: "";
        display: block;
        width: 20px; height: 2px;
        background: var(--petrol);
        border-radius: 2px;
        position: relative;
    }
    .nav-toggle-icon::before { position: absolute; top: -6px; }
    .nav-toggle-icon::after { position: absolute; top: 6px; }
    .header-inner { flex-wrap: wrap; padding: 12px 0; gap: 14px; }
    .main-nav {
        flex-basis: 100%;
        display: none;
        border-top: 1px solid var(--line);
        padding-top: 10px;
    }
    .main-nav.is-open { display: block; }
    .nav-menu { flex-direction: column; gap: 2px; }
    .nav-menu li a { display: block; }
    .header-actions { margin-left: auto; }
    .btn-login { display: none; }

    .games-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .poster-strip { gap: 12px; }
    .news-row { grid-template-columns: 1fr; }
    .post-card { grid-template-columns: 1fr; }
    .post-thumb img { aspect-ratio: 16 / 9; }
    .related-grid { grid-template-columns: 1fr; }
    .single-article { padding: 26px 22px 30px; }
    .gallery-track { padding-left: 20px; padding-right: 20px; gap: 16px; }
    .slide-card { width: clamp(240px, 68vw, 480px); }
    .section-head { margin: 40px 0 20px; }
}

/* ── Mobile nhỏ ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .container { padding: 0 14px; }
    .games-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .poster-strip { gap: 12px; }
    .slide-card { width: 82vw; }
    .header-actions .btn { padding: 9px 16px; font-size: 13px; }
    .section-title { font-size: 26px; }
    .gallery-track { padding-top: 30px; padding-bottom: 36px; }
    .game-name { font-size: 13px; }
    .single-article { padding: 20px 16px 24px; }
    .post-body { padding: 18px 18px; }
}