/*
 * bien-mau.css - Toàn bộ biến của giao diện.
 *
 * ĐÂY LÀ TỆP QUAN TRỌNG NHẤT khi đổi bộ nhận diện cho một dự án mới.
 * Mọi giá trị dưới đây đều bị ghi đè bởi cấu hình trong Giao diện > Tuỳ biến,
 * nên các con số ở đây chỉ là điểm xuất phát khi site chưa cấu hình gì.
 *
 * Quy ước đặt tên: tiếng Việt không dấu, phân cách bằng gạch ngang.
 */

:root {
	/* ---------- Tám biến màu cốt lõi ---------- */
	--mau-chinh: #c62828;
	--mau-chinh-dam: #8e1c1c;
	--mau-phu: #f0a020;
	--mau-chu: #1f2933;
	--mau-chu-nhat: #6b7280;
	--mau-nen: #ffffff;
	--mau-nen-phu: #f4f6f8;
	--mau-vien: #e5e7eb;

	/* Bản rgb của các màu trên, dùng cho nền mờ và bóng đổ. */
	--mau-chinh-rgb: 198, 40, 40;
	--mau-chu-rgb: 31, 41, 51;

	/* ---------- Màu theo khu vực ---------- */
	--mau-header-nen: #ffffff;
	--mau-header-chu: #1f2933;
	--mau-topbar-nen: #1f2933;
	--mau-topbar-chu: #e5e7eb;
	--mau-footer-nen: #1f2933;
	--mau-footer-chu: #cbd2d9;

	/* ---------- Màu trạng thái ---------- */
	--mau-thanh-cong: #0f8a5f;
	--mau-canh-bao: #d97706;
	--mau-loi: #d63638;
	--mau-thong-tin: #2563eb;

	/* ---------- Chữ ---------- */
	--phong-chinh: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--phong-ma: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--co-chu-goc: 16px;

	/* Thang cỡ chữ. Mọi cỡ tính theo --co-chu-goc nên đổi một chỗ là đổi cả site. */
	--co-chu-nho: 0.8125rem;
	--co-chu-vua: 0.9375rem;
	--co-chu-lon: 1.125rem;
	--co-h1: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	--co-h2: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem);
	--co-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
	--co-h4: 1.15rem;

	--cao-dong: 1.65;
	--cao-dong-tieu-de: 1.3;
	--dam-tieu-de: 700;

	/* ---------- Khoảng cách ---------- */
	--kc-1: 4px;
	--kc-2: 8px;
	--kc-3: 12px;
	--kc-4: 16px;
	--kc-5: 24px;
	--kc-6: 32px;
	--kc-7: 48px;
	--kc-8: 64px;

	/* ---------- Hình khối ---------- */
	--bo-goc: 10px;
	--bo-goc-nho: 5px;
	--bo-goc-tron: 999px;

	--bong-1: 0 1px 2px rgba(var(--mau-chu-rgb), 0.06), 0 1px 3px rgba(var(--mau-chu-rgb), 0.08);
	--bong-2: 0 4px 12px rgba(var(--mau-chu-rgb), 0.08);
	--bong-3: 0 12px 32px rgba(var(--mau-chu-rgb), 0.14);

	/* ---------- Kích thước khung ---------- */
	--rong-khung: 1200px;
	--rong-cot-ben: 320px;
	--kc-hai-cot: 40px;
	--cao-logo: 48px;

	/* ---------- Chuyển động ---------- */
	--nhanh: 0.15s ease;
	--vua: 0.25s ease;

	/* ---------- Thứ tự lớp chồng ---------- */
	--lop-header: 100;
	--lop-lop-phu: 200;
	--lop-ngan-keo: 300;
	--lop-nut-noi: 90;
}

/*
 * Người dùng bật chế độ giảm chuyển động trong hệ điều hành thì tắt hiệu ứng,
 * tránh gây chóng mặt cho người nhạy cảm với chuyển động.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--nhanh: 0s;
		--vua: 0s;
	}
}