/* CSS dùng chung cho toàn bộ site VPath — xem DESIGN_SYSTEM.md để biết quy tắc thiết kế. */ /* ---- Chống nháy trang lúc mới mở (v-cloak) ---- Mỗi trang là 1 file HTML tĩnh, Vue dựng lại giao diện ngay trên chính khối HTML đó. Trong khoảnh khắc HTML đã tải xong nhưng Vue chưa chạy, trình duyệt vẽ nguyên bản thô: chữ {{ ... }} hiện ra, mọi khối v-if bung hết, các modal "fixed inset-0" đè kín màn hình (trang Khóa Học bung một lúc cả giỏ hàng, hộp chi tiết khóa và hộp "Đánh Giá & Nhận Xét") — và vì Vue chưa gắn sự kiện nên bấm nút đóng không ăn, phải F5. Thuộc tính v-cloak đặt trên #app giữ trang ẩn cho tới khi Vue dựng xong; Vue tự gỡ thuộc tính này ngay lúc mount, nên trang chỉ hiện ra khi đã đúng hình. */ [v-cloak] { display: none !important; } /* Trong lúc #app còn ẩn, giữ nền giấy phủ kín màn hình để không lóe ra một mảng trắng. */ body:has(> [v-cloak]) { min-height: 100vh; } /* ---- Khối prerender (sinh bởi scripts/sinh-trang-tinh.js) ---- Đứng TRƯỚC #app trong DOM, là bản tĩnh của nội dung vốn phải chờ JS gọi API (danh mục khóa học, thống kê kho đề, FAQ) — DÀNH RIÊNG cho bot/trình duyệt không chạy JS (khi đó #app bị v-cloak ẩn vĩnh viễn, khối tĩnh là toàn bộ trang). Người dùng thật KHÔNG được thấy khối này: bản thử đầu tiên cho hiện nó rồi swap sang app sau khi API về — chủ dự án báo ngay "trang giật giật, hiện cái gì đấy trước" (21/08). Cách làm hiện tại: một dòng