/* ============================================================
   Moban 8-10-50 — responsive.css
   Breakpoints: 768px (tablet/mobile) · 480px (small phones)
   ============================================================ */

/* ---------- ≤ 768px: chuyển sang dock điều hướng dưới ---------- */
@media (max-width: 768px) {
    body {
        padding-bottom: 92px; /* chừa chỗ cho dock 64px + safe-area */
    }

    /* Ẩn viên nang điều hướng trên desktop, dùng dock dưới màn hình */
    .nav-capsule {
        display: none;
    }

    .dock-nav {
        display: grid;
    }

    .site-header__bar {
        justify-content: center;
        padding: 8px 16px;
    }

    .hero {
        min-height: 74vh;
    }

    .hero__content {
        padding: 44px 18px 52px;
    }

    .highlight-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .news-strip__grid,
    .news-strip__grid--tri,
    .feed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .poster-wall {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }

    .download-band__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px;
        padding: 40px 18px 28px;
    }

    .footer-col {
        grid-area: auto;
    }

    .article-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .wall-filter {
        margin-left: 16px;
        margin-right: 16px;
    }

    .wall-filter__count {
        display: none;
    }

    .article-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- ≤ 480px: màn hình điện thoại nhỏ ---------- */
@media (max-width: 480px) {
    .highlight-band {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .news-strip__grid,
    .news-strip__grid--tri,
    .feed-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .poster-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero__title {
        font-size: 32px;
    }

    .poster-card__overlay {
        padding: 12px;
        gap: 5px;
    }

    .poster-card__info {
        -webkit-line-clamp: 2;
        font-size: 12px;
    }

    .page-hero {
        padding: 44px 0 30px;
    }

    .dock-nav__label {
        font-size: 9.5px;
    }
}