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

/* ===== Laptop / tablet ngang ===== */
@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .section-title { font-size: 26px; }
    .section-dots { right: 8px; }
}

/* ===== Tablet dọc / mobile lớn ===== */
@media (max-width: 768px) {
    .site-content { padding-top: 76px; }
    .header-inner { flex-wrap: wrap; padding: 10px 0; min-height: 0; }
    .nav-toggle { display: inline-flex; }
    .main-nav {
        flex-basis: 100%;
        order: 3;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .main-nav.open { max-height: 420px; }
    .nav-menu { flex-direction: column; gap: 2px; overflow: visible; }
    .nav-menu a { padding: 12px 14px; }
    .header-actions { margin-left: auto; }
    .btn { padding: 8px 14px; font-size: 13px; }

    .gallery-slide img { height: 340px; }
    .slide-title { font-size: 21px; }
    .slide-veil {
        /* Trên cảm ứng: luôn hiện lớp phủ để dễ thao tác */
        opacity: 1;
        transform: translateY(0);
        padding: 22px;
    }

    .news-grid { grid-template-columns: 1fr; gap: 18px; }
    .list-main .news-grid { grid-template-columns: 1fr; }
    .list-layout { grid-template-columns: 1fr; }
    .sidebar-col { order: 2; }
    .section-dots { display: none; }
    .footer-widgets { grid-template-columns: 1fr; gap: 18px; }
    .single-card { padding: 22px; }
    .single-title { font-size: 24px; }
    .single-nav { grid-template-columns: 1fr; }
}

/* ===== Mobile nhỏ ===== */
@media (max-width: 480px) {
    .section-title { font-size: 22px; }
    .hp-section { padding: 40px 0 26px; }
    .gallery-track { gap: 14px; scroll-padding-left: 4vw; padding-left: 4vw; padding-right: 4vw; }
    .gallery-slide { flex-basis: 88vw; }
    .gallery-slide img { height: 250px; }
    .slide-desc { font-size: 13px; }
    .games-rail { gap: 12px; padding-left: 4vw; padding-right: 4vw; }
    .game-card { flex-basis: 140px; }
    .game-card img { height: 140px; }
    .header-actions .btn-login { display: none; }
    .single-cta { justify-content: center; text-align: center; }
    .page-shell { padding: 30px 0 40px; }
}