/* ========================================================================== DESIGN TOKENS DÙNG CHUNG TOÀN SITE Mọi file CSS khác (base.css, components.css, các trang riêng) đều nên dùng các biến ở đây thay vì hard-code màu/kích thước mới, để giao diện đồng nhất và dễ bảo trì tại một chỗ duy nhất. ========================================================================== */ :root{ /* ----- Màu thương hiệu ----- */ --mau-chinh: #dc2626; --mau-chinh-dam: #b91c1c; --mau-chinh-nhat: #fef2f2; --mau-phu: #2357ff; --mau-phu-dam: #1743c9; --mau-thanh-cong: #16a34a; --mau-canh-bao: #d97706; --mau-loi: #dc2626; --mau-thong-tin: #0891b2; /* ----- Nền & bề mặt (light mode) ----- */ --nen-body: #f7f7fb; --nen-be-mat: #ffffff; --nen-be-mat-2: #f3f4f6; --nen-vien: #e5e7eb; --nen-hover: #f5f5f5; /* ----- Chữ ----- */ --chu-chinh: #1f2430; --chu-phu: #5b6270; --chu-nhat: #9aa1ad; --chu-tren-mau: #ffffff; /* ----- Bo góc & bóng đổ ----- */ --bo-goc-sm: 8px; --bo-goc: 14px; --bo-goc-lg: 22px; --bong-sm: 0 2px 8px rgba(17, 24, 39, 0.06); --bong: 0 8px 24px rgba(17, 24, 39, 0.08); --bong-lg: 0 18px 45px rgba(17, 24, 39, 0.12); /* ----- Font ----- */ --font-chinh: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-han: "Noto Sans SC", "Noto Serif SC", sans-serif; /* ----- Layout ----- */ --chieu-rong-sidebar: 250px; --chieu-cao-header: 76px; --z-header: 1000; --z-modal: 2000; color-scheme: light; } /* ----- Dark mode: kích hoạt bằng thuộc tính data-theme="dark" trên ----- */ :root[data-theme="dark"]{ --mau-chinh: #f87171; --mau-chinh-dam: #ef4444; --mau-chinh-nhat: #3f1d1d; --mau-phu: #6b8bff; --nen-body: #14161c; --nen-be-mat: #1c1f28; --nen-be-mat-2: #262a35; --nen-vien: #333846; --nen-hover: #262a35; --chu-chinh: #e9eaee; --chu-phu: #a8adb8; --chu-nhat: #767c88; --chu-tren-mau: #14161c; --bong-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --bong: 0 8px 24px rgba(0, 0, 0, 0.4); --bong-lg: 0 18px 45px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* ----- Nếu trình duyệt ưu tiên dark mode và người dùng CHƯA chọn theme thủ công ----- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ --mau-chinh: #f87171; --mau-chinh-dam: #ef4444; --mau-chinh-nhat: #3f1d1d; --mau-phu: #6b8bff; --nen-body: #14161c; --nen-be-mat: #1c1f28; --nen-be-mat-2: #262a35; --nen-vien: #333846; --nen-hover: #262a35; --chu-chinh: #e9eaee; --chu-phu: #a8adb8; --chu-nhat: #767c88; --chu-tren-mau: #14161c; color-scheme: dark; } }