/**
 * Biến CSS - Hệ thống bán hàng
 * Màu sắc, font, khoảng cách, bóng đổ dùng chung toàn hệ thống
 * Giao diện sáng, nhẹ nhàng, tinh tế
 */

:root {
    /* === Màu sắc chính === */
    --mau-chinh: #4361ee;
    --mau-chinh-dam: #3730a3;
    --mau-chinh-nhat: #e0e7ff;
    --mau-thanh-cong: #2ec4b6;
    --mau-canh-bao: #ff9f1c;
    --mau-nguy-hiem: #e63946;
    --mau-nen: #f8f9fa;
    --mau-nen-trang: #ffffff;
    --mau-chu: #333333;
    --mau-chu-nhat: #6b7280;
    --mau-vien: #e5e7eb;
    --mau-sidebar: #1e293b;
    --mau-sidebar-chu: #cbd5e1;
    --mau-sidebar-hover: #334155;

    /* === Font chữ === */
    --font-chinh: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-nho: 0.8125rem;
    --font-size-thuong: 0.875rem;
    --font-size-lon: 1rem;
    --font-size-tieu-de: 1.25rem;

    /* === Khoảng cách === */
    --khoang-cach-nho: 0.5rem;
    --khoang-cach-thuong: 1rem;
    --khoang-cach-lon: 1.5rem;
    --khoang-cach-rat-lon: 2rem;

    /* === Bo góc và bóng đổ === */
    --bo-tron: 0.5rem;
    --bo-tron-lon: 0.75rem;
    --bong: 0 1px 3px rgba(0, 0, 0, 0.08);
    --bong-lon: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* === Kích thước layout === */
    --sidebar-rong: 260px;
    --header-cao: 60px;
}