/* ==========================================================================
   Moban 8-10-31 — Responsive (breakpoints 768px & 480px)
   ========================================================================== */

/* ------------------------------ Desktop >= 768px ------------------------- */
@media (min-width: 768px) {
    .app-shell { padding: 22px 24px 10px; }

    .hero-title { font-size: 40px; }
    .hero-card { padding: 36px 32px; }

    .rail-card { flex-basis: 184px; }

    /* feed chuyển lưới 2 cột trên desktop */
    .news-feed {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .feed-card-link { flex-direction: column; gap: 0; padding: 0; }
    .feed-thumb { flex: none; }
    .feed-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
    .feed-body { padding: 16px 18px 20px; }

    .archive-grid { grid-template-columns: repeat(3, 1fr); }

    .article-card { padding: 36px 34px; }
    .article-title { font-size: 32px; }

    /* tabbar desktop: viên nang nổi giữa màn hình */
    .tabbar-inner { max-width: 560px; padding: 8px; }
    .tab-item { padding: 10px 18px; font-size: 12px; }
    .tab-icon { font-size: 20px; }
}

/* ------------------------------ Mobile <= 768px -------------------------- */
@media (max-width: 768px) {
    .download-grid { grid-template-columns: 1fr; }
    .footer-widgets { grid-template-columns: 1fr; gap: 14px; }
    .hero-title { font-size: 27px; }
    .topbar-cta { display: none; }
    body { padding-bottom: 92px; }
}

/* ------------------------------ Small <= 480px --------------------------- */
@media (max-width: 480px) {
    .app-shell { padding: 12px 12px 6px; }

    /* hero xếp dọc */
    .hero-card { grid-template-columns: 1fr; padding: 22px 18px; }
    .hero-card-body, .hero-card-media { grid-area: auto; }
    .hero-card-media { margin-top: 16px; }

    .rail-card { flex-basis: 142px; }
    .feed-thumb { flex-basis: 88px; }
    .feed-thumb img { width: 88px; height: 88px; }

    .tab-label { font-size: 10px; }
    .tab-item { padding: 7px 6px; }
    .tabbar-inner { max-width: calc(100% - 24px); }

    .menu-panel-auth { flex-direction: column; }
    .section-title { font-size: 18px; }
}