/* ==========================================================================
   Moban 8-10-41 — Responsive (bảng Kanban → trượt ngang / xếp dọc)
   ========================================================================== */

/* ---------- Tablet & nhỏ hơn ---------- */
@media (max-width: 1024px) {
    .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .layout-grid { display: block; }
    .layout-side { position: static; margin-top: 34px; }
}

/* ---------- Điểm gãy 768px ---------- */
@media (max-width: 768px) {
    .header-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 0;
    }
    .site-nav { display: none; width: 100%; justify-content: flex-start; }
    .site-nav.is-open { display: flex; }
    .nav-menu { flex-direction: column; width: 100%; gap: 0; padding-bottom: 8px; }
    .nav-menu a { display: block; padding: 12px 6px; border-bottom: 1px dashed var(--c-line); }
    .nav-burger { display: inline-flex; }
    .header-actions .btn-ghost { display: none; }

    .deck-grid { display: block; }
    .deck-panel { margin-top: 20px; }
    .deck-carousel { aspect-ratio: 16 / 9; }

    /* Kanban: chuyển thành hàng trượt ngang với điểm bắt */
    .kanban {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
    }
    .kanban-col {
        flex: 0 0 min(84%, 340px);
        scroll-snap-align: start;
    }
    .kanban-scroll { height: 480px; }

    .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-row { grid-template-columns: minmax(0, 140px) 1fr; gap: 14px; }
    .promo-grid { grid-template-columns: minmax(0, 1fr); }

    .cta-band-inner { display: block; padding: 30px 26px; }
    .cta-band-actions { margin-top: 20px; }
    .cta-band-actions .btn { width: 100%; }

    .footer-widgets { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .archive-grid { grid-template-columns: minmax(0, 1fr); }
    .report-console { padding: 26px 22px; }
    .report-nav { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Điểm gãy 480px ---------- */
@media (max-width: 480px) {
    body { font-size: 15px; }
    .brand-tag { display: none; }
    .header-actions .btn-accent { padding: 9px 14px; font-size: 12.5px; }
    .board-head { flex-direction: column; align-items: stretch; }
    .tab-strip { overflow-x: auto; flex-wrap: nowrap; border-radius: 14px; scrollbar-width: none; }
    .tab-strip::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 13px; }

    .kanban-col { flex-basis: 88%; }
    .kanban-scroll { height: 420px; }
    .news-row { grid-template-columns: minmax(0, 1fr); }
    .news-row-media { aspect-ratio: 16 / 9; }
    .panel-metrics li { padding: 10px 4px; }
    .panel-metrics strong { font-size: 16px; }
    .panel-actions .btn { flex: 1 1 100%; }
    .ticker-item { padding: 9px 18px; font-size: 12.5px; }
    .deck-slide-caption { left: 10px; bottom: 10px; padding: 6px 12px; font-size: 11.5px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}