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

/* ---- Tablet & nhỏ hơn ---- */
@media (max-width: 1024px) {
    .dash-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        grid-template-areas:
            "hero  hero"
            "stats stats"
            "main  main"
            "rank  flash";
    }
    .mega-panel { width: 620px; }
}

/* ---- Mobile ngang / tablet dọc ---- */
@media (max-width: 768px) {
    .nav-toggle { display: block; margin-left: auto; }
    .main-nav {
        position: fixed;
        top: 0;
        right: -300px;
        width: 280px;
        height: 100vh;
        background: var(--c-primary-dark);
        padding: 70px 18px 24px;
        overflow-y: auto;
        transition: right .3s ease;
        z-index: 998;
    }
    body.nav-open .main-nav { right: 0; }
    .nav-menu { flex-direction: column; gap: 2px; }
    .nav-menu > li > a { white-space: normal; }

    /* Mega panel chuyển thành khối tĩnh trong menu trượt */
    .mega-panel {
        position: static;
        transform: none;
        width: auto;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        display: none;
        padding: 10px;
        margin-top: 6px;
        background: rgba(255,255,255,.08);
    }
    .has-mega.mega-open .mega-panel { display: block; transform: none; }
    .mega-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .mega-cat { color: #fff; border-color: rgba(255,255,255,.2); }
    .mega-game { background: rgba(255,255,255,.95); }

    .header-actions .btn-login { display: none; }
    .header-inner { flex-wrap: wrap; }

    .dash-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hero"
            "stats"
            "main"
            "rank"
            "flash";
    }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .page-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "pmain"
            "pside";
    }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .archive-grid { grid-template-columns: 1fr; }
    .footer-widgets { grid-template-columns: 1fr; gap: 20px; }
    .hero-overlay { padding: 40px 26px; }
    .hero-title { font-size: 26px; }
}

/* ---- Mobile nhỏ ---- */
@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .dash-stats { grid-template-columns: 1fr; }
    .card-grid { grid-template-columns: 1fr; }
    .hero-overlay { padding: 32px 18px; }
    .hero-title { font-size: 22px; }
    .hero-actions .btn { width: 100%; text-align: center; }
    .stat-card { padding: 16px; }
    .stat-number { font-size: 22px; }
    .article-list-thumb { width: 88px; }
    .single-title { font-size: 22px; }
    .single-nav { grid-template-columns: 1fr; }
    .mega-grid { grid-template-columns: 1fr; }
    .panel { padding: 16px; }
    .archive-hero { padding: 22px 18px; }
    .archive-title { font-size: 22px; }
}