/* ==========================================================================
   Moban 8-10-32 — Responsive
   ========================================================================== */

/* ---------- Tablet & Desktop (>=768px): thanh notch chuyển lên trên, ẩn notch, giữ hàng ngang ---------- */
@media (min-width: 768px) {
    body { padding-bottom: 24px; }

    .site-content { padding-top: calc(var(--tabbar-h) + 20px); }

    .app-tabbar {
        top: var(--header-h);
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(680px, 94%);
        height: 60px;
        border-radius: 0 0 20px 20px;
        padding: 0 10px;
    }
    /* Ẩn notch, giữ hàng ngang */
    .tabbar-left::after, .tabbar-right::before { display: none; }
    .tabbar-left { padding-right: 8px; }
    .tabbar-right { padding-left: 8px; }

    .tab-center {
        position: static;
        transform: none;
        width: auto;
        flex-direction: row;
        gap: 8px;
        margin: 0 10px;
    }
    .tab-center-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
        border-width: 3px;
        border-color: var(--navy-deep);
    }
    .tab-center-label { font-size: 11px; }

    .home-grid { padding: 22px 20px 34px; gap: 24px; }
    .hero-media { aspect-ratio: 16 / 5.4; }
    .hero-info { padding: 24px 28px 40px; }

    .cat-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; }
    .game-card { flex-basis: 168px; }
    .news-thumb { flex-basis: 132px; }
    .page-wrap { padding: 24px 20px 40px; }
    .single-card { padding: 30px 32px 36px; }
    .site-footer { padding-bottom: 34px; }
    .footer-widgets { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Mobile nhỏ (<=480px) ---------- */
@media (max-width: 480px) {
    .header-inner { padding: 0 12px; }
    .btn-login, .btn-register { padding: 6px 12px; font-size: 12px; }
    .logo-img { height: 30px; }

    .home-grid { padding: 12px 10px 22px; gap: 16px; }
    .hero-media { aspect-ratio: 16 / 10; }
    .hero-info { padding: 14px 14px 30px; }
    .hero-desc { font-size: 12.5px; }
    .btn-download { padding: 9px 18px; font-size: 13px; }

    .section-title { font-size: 16.5px; }
    .cat-tile { padding: 12px 6px 10px; }
    .cat-emoji { font-size: 24px; }
    .cat-name { font-size: 12.5px; }

    .game-card { flex-basis: 118px; }
    .news-thumb { flex-basis: 84px; }
    .news-title { font-size: 13.5px; }

    .cta-card { padding: 18px 16px; }
    .cta-title { font-size: 17px; }
    .single-cta { flex-direction: column; align-items: stretch; text-align: center; }

    .tab-label { font-size: 9.5px; }
    .tab-icon { font-size: 17px; }
    .tab-center-icon { width: 54px; height: 54px; font-size: 23px; }
}