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

/* --- Tablet / màn hình vừa --- */
@media (max-width: 768px) {
    .container { padding-left: 14px; padding-right: 14px; }

    .header-inner { flex-wrap: wrap; gap: 10px; min-height: 56px; padding: 8px 0; }
    .header-meta { display: none; }
    .header-actions { margin-left: auto; }
    .btn-login, .btn-register { padding: 7px 12px; font-size: 11.5px; }

    .banner-strip { grid-template-columns: minmax(0, 1fr); }
    .banner-item img { aspect-ratio: 16 / 6; }

    .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .footer-widgets { grid-template-columns: minmax(0, 1fr); gap: 18px; }

    .data-panel { box-shadow: 4px 4px 0 rgba(55, 71, 79, 0.14); }

    .post-panel { padding: 16px; }
    .page-heading { font-size: 18px; }
    .post-meta { flex-wrap: wrap; gap: 10px; }

    .ticker-flag { padding: 8px 10px; font-size: 10px; letter-spacing: 1px; }
    .ticker-track { font-size: 12px; }
}

/* --- Điện thoại nhỏ --- */
@media (max-width: 480px) {
    body { font-size: 14px; padding-bottom: calc(var(--tabbar-h) + 10px); }

    .logo-img { max-height: 36px; }
    .btn-login { display: none; }

    .game-grid { gap: 10px; }
    .game-card { padding: 8px; }
    .game-name { font-size: 12px; }
    .btn-block { padding: 8px 10px; font-size: 11.5px; }

    .article-row-link { flex-direction: column; gap: 10px; padding: 10px; }
    .article-row-thumb { flex: 0 0 auto; }
    .article-row-thumb img { width: 100%; height: 170px; }
    .article-row-title { font-size: 14px; }

    .rank-name { font-size: 11.5px; }
    .stat-num { font-size: 17px; }

    .app-tab-label { font-size: 9.5px; }
    .app-tab-icon { font-size: 17px; }

    .back-to-top { width: 38px; height: 38px; font-size: 17px; right: 12px; bottom: calc(var(--tabbar-h) + 14px); }

    .post-download { flex-direction: column; align-items: stretch; text-align: center; }
    .post-nav { flex-direction: column; }
}