/** * Bốc Số VTG — style cho dashboard frontend. * * MOBILE-FIRST: mọi style mặc định (không media query) là giao diện mobile; * @media (min-width: ...) chỉ MỞ RỘNG thêm cho tablet/desktop. * Xem chuẩn: docs/DASHBOARD_STANDARDS.md §5. * * ── Hệ mốc kích thước MÀN HÌNH (breakpoint) — CHUẨN CHUNG toàn dự án ──── * Lấy đúng số của Tailwind CSS (framework phổ biến nhất hiện dùng số này) để * không tự chế số tuỳ hứng. Dùng cho MỌI @media (min-width: ...) mới thêm * sau này — không tạo mốc lạ (VD 900px, 1440px...) trừ khi có lý do rất cụ * thể ghi rõ trong comment tại chỗ đó. * * 640px (sm) — điện thoại lớn/phablet nằm ngang, ít dùng trong dashboard. * 768px (md) — tablet dọc / cửa sổ trình duyệt chia đôi — mốc CHÍNH, mở * bố cục 2 cột (.bsv-grid--2, .bsv-grid--2-1...). * 1024px (lg) — tablet ngang / laptop nhỏ — mốc cho bố cục nhiều cột hơn * hoặc tỉ lệ cột lệch cần nhiều chỗ (.bsv-grid--reception). * 1280px (xl) — desktop thật — KHÔNG mở thêm cột, chỉ là mốc tham chiếu; * nội dung form/chi tiết dùng .bsv-content--sm/md/lg/xl * (max-width cố định, xem bên dưới) để tự dừng lại ở đây dù * màn hình FHD/2K/4K/8K rộng tới đâu — KHÔNG thêm mốc riêng * cho từng độ phân giải (không ai làm vậy, xem nghiên cứu * Tailwind/Bootstrap: cả 2 đều dừng breakpoint quanh * 1280-1536px, còn lại xử lý bằng max-width của container). * * KHÔNG khai báo font-family — kế thừa Inter Tight từ Flatsome (CLAUDE.md §1). * Mọi class có tiền tố .bsv- nên không đụng độ theme. */ /* ── Full-width: trang plugin chiếm 100% bề rộng trên desktop ───────── Router thêm class bsv-page vào ở mọi trang chứa shortcode plugin; ghi đè max-width container của Flatsome chỉ trong phạm vi các trang đó. */ body.bsv-page .container, body.bsv-page .row.row-main { max-width: 100% !important; } /* Giảm khoảng trắng đầu trang trước tabs danh mục tin tức (xem components/news-tabs.php) — Flatsome mặc định có padding-top khá lớn cho #content (canh giữa "Page Title" ẩn), áp dụng cho cả trang bài viết (đơn post, nơi JS dời tabs lên đầu .article-inner) lẫn trang shortcode plugin. */ body.single-post #content, body.bsv-page #content { padding-top: 0 !important; } /* ── Header theo vai trò thay cho header Flatsome trên TOÀN BỘ trang ────── Router::bodyClass() gắn class bsv-no-theme-header cho mọi trang front-end; header plugin được in ngay sau (wp_body_open, xem Router::renderGlobalHeader()/render()) rồi ẩn header theme ở đây. Liệt kê nhiều selector Flatsome hay dùng — nếu site vẫn còn sót 1 header theme nào đó, F12 kiểm tra ID/class thật rồi bổ sung thêm vào đây. */ body.bsv-no-theme-header #header, body.bsv-no-theme-header .header-wrapper, body.bsv-no-theme-header #wrapper-navigation, body.bsv-no-theme-header .top-bar-wrapper, body.bsv-no-theme-header .stuck-nav-helper { display: none !important; } /* Chừa khoảng cách nhỏ quanh header plugin — CHỈ ở trang header được chèn trực tiếp sau (bài viết, trang tĩnh...), không phải trang dashboard/ shortcode (đã nằm sẵn trong khung nội dung có lề đúng, thêm margin ở đây sẽ làm header bị lệch/thụt vào so với nội dung bên dưới). Chỉ set margin-top/trái/phải riêng lẻ — không dùng shorthand để không đè mất margin-bottom mặc định của .bsv-header (16px, xem trên). */ body.bsv-header-injected .bsv-header { margin-left: 10px; margin-right: 10px; margin-top: 10px; } .bsv { /* Xanh y tế (teal) — đổi thương hiệu chỉ cần sửa 2 biến này. */ --bsv-primary: #0d9488; --bsv-primary-dark: #0f766e; --bsv-bg: #f6f8fb; --bsv-surface: #fff; --bsv-border: #e2e8f0; --bsv-text: #1e293b; --bsv-muted: #64748b; --bsv-success: #16a34a; --bsv-warning: #d97706; --bsv-danger: #dc2626; --bsv-radius: 10px; color: var(--bsv-text); font-size: 15px; line-height: 1.55; } .bsv *, .bsv *::before, .bsv *::after { box-sizing: border-box; } /* ── Header chung mọi trang plugin ──────────────────────────────────── */ .bsv-header { align-items: center; background: var(--bsv-surface); border: 1px solid var(--bsv-border); border-radius: var(--bsv-radius); display: flex; justify-content: space-between; margin-bottom: 8px; padding: 6px; } @media (min-width: 768px) { .bsv-header { margin-bottom: 16px; padding: 8px 14px; } } .bsv-header__logo { color: var(--bsv-text); display: flex; align-items: center; text-decoration: none; } .bsv-header__logo img { display: block; height: 36px !important; max-width: 160px; object-fit: contain; width: auto !important; } .bsv-header__nav { display: flex; gap: 4px; } .bsv-header__link { /* appearance:none — nút "Thêm vào Màn hình chính" là