/* ============================================================
   Moban 8-10-21 · responsive.css
   768px: dashboard → một cột, sidebar → ngăn kéo trên
   480px: tinh chỉnh điện thoại nhỏ
   ============================================================ */

@media (max-width: 768px) {
    /* Shell: sidebar rời khỏi lưới, thành ngăn kéo trượt từ trên xuống */
    .dash-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "main";
    }
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        background: linear-gradient(90deg, var(--primary-deep), #012B4E);
        position: sticky;
        top: 0;
        z-index: 260;
    }
    .mobile-topbar-logo { display: flex; align-items: center; }
    .mobile-topbar-logo img { max-height: 34px; width: auto; }
    .btn-topbar { margin-left: auto; padding: 7px 14px; font-size: .75rem; }
    .drawer-toggle {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 42px; height: 38px; padding: 8px 9px;
        background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 8px; cursor: pointer;
    }
    .drawer-bar { display: block; height: 2px; width: 100%; background: #E3F2FD; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
    body.drawer-open .drawer-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    body.drawer-open .drawer-bar:nth-child(2) { opacity: 0; }
    body.drawer-open .drawer-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* Sidebar trở thành ngăn kéo trượt từ trên xuống */
    .dash-sidebar {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: auto; max-height: 82vh;
        border-radius: 0 0 12px 12px;
        transform: translateY(-102%);
        transition: transform .3s ease;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    }
    body.drawer-open .dash-sidebar { transform: translateY(0); }
    body.sidebar-collapsed .sidebar-actions { display: flex; }
    body.sidebar-collapsed .sidebar-nav .nav-menu li a { font-size: .95rem; justify-content: flex-start; padding: 11px 12px; }
    body.sidebar-collapsed .collapse-label { display: inline; }
    .sidebar-collapse-btn { display: none; }
    .sidebar-actions { flex-direction: row; }
    .sidebar-actions .btn { flex: 1; }

    /* Tất cả lưới bảng điều khiển sụp về một cột */
    .dash-board,
    .dash-board--list,
    .dash-board--single,
    .dash-board--page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "kpi"
            "table"
            "top"
            "feed";
    }
    .dash-board--list { grid-template-areas: "list" "feed"; }
    .dash-board--single,
    .dash-board--page { grid-template-areas: "article" "feed"; }
    .dash-board > * { grid-column: 1 / -1; }

    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .top-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .poster-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post-grid { grid-template-columns: minmax(0, 1fr); }
    .footer-widgets { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .dash-topbar { flex-direction: column; align-items: flex-start; }
    .dash-main { padding: 18px 14px 32px; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    .kpi-grid { grid-template-columns: minmax(0, 1fr); }
    .kpi-card { padding: 13px; }
    .top-cards { grid-template-columns: minmax(0, 1fr); }
    .poster-strip { grid-template-columns: minmax(0, 1fr); }
    .dash-title { font-size: 1.25rem; }
    .btn-lg { width: 100%; }
    .data-table { font-size: .8rem; min-width: 520px; }
    .sidebar-actions { flex-direction: column; }
    .article-actions .btn { width: 100%; }
    .theme-toggle { bottom: 14px; right: 14px; width: 42px; height: 42px; }
}