/* ============================================================
   Moban 8-10-49 — responsive.css
   ============================================================ */

/* ---------- Máy tính bảng & nhỏ hơn ---------- */

@media (max-width: 1024px) {

    .game-cell.game-h { display: none; }

}

/* ---------- Điện thoại lớn / chuyển thanh dọc thành drawer ---------- */

@media (max-width: 768px) {

    .site-canvas { margin-left: 0; }

    .side-rail {
        transform: translateX(-105%);
        transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1);
        width: 260px;
        box-shadow: none;
    }
    body.rail-open .side-rail {
        transform: translateX(0);
        box-shadow: 14px 0 44px rgba(0, 0, 0, 0.6);
    }

    .rail-toggle { display: block; }

    .hero { min-height: 78vh; }
    .hero-body { padding: 110px 6% 60px; }
    .hero-strip { display: none; }

    .section { padding: 64px 6%; }

    .section-head {
        grid-template-columns: auto 1fr;
        column-gap: 16px;
    }
    .section-index { font-size: 40px; }

    .poster-stack {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 30px 6%;
        scroll-snap-type: x mandatory;
    }
    .poster-card {
        width: 190px;
        margin-left: -54px;
        scroll-snap-align: center;
    }
    .poster-card:first-child { margin-left: 0; }

    .game-cell.game-g,
    .game-cell.game-h { display: none; }

    .news-grid,
    .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

    .post-row {
        gap: 18px;
        padding: 26px 0;
    }

    .post-nav-next { text-align: left; }

    .single-download { flex-direction: column; text-align: center; }

    .cta-band { padding: 80px 6%; }

}

/* ---------- Điện thoại nhỏ ---------- */

@media (max-width: 480px) {

    body { font-size: 15px; }

    .hero { min-height: 70vh; }
    .hero-title { font-size: 38px; }
    .hero-sub { font-size: 15px; }
    .hero-cta .btn { width: 100%; justify-content: center; }

    .section { padding: 52px 5%; }
    .section-index { font-size: 32px; }
    .section-title { font-size: 24px; }

    .poster-card { width: 168px; margin-left: -48px; }

    .game-cell.game-e,
    .game-cell.game-f,
    .game-cell.game-g,
    .game-cell.game-h { display: none; }

    .news-grid,
    .archive-grid { grid-template-columns: 1fr; }

    .single-article,
    .page-article { padding-top: 84px; }
    .page-header-block { padding-top: 84px; }

    .btn { padding: 12px 22px; font-size: 13.5px; }
    .btn-lg { padding: 14px 26px; font-size: 15px; }

    .footer-bottom { justify-content: center; text-align: center; }

}