:root {
    /* ====== Primary Colors ====== */
    --color-primary: #00285A;
    --color-primary-hover: #003a70;
    --color-primary-dark: #001a3a;

    --color-accent: #CF2027;
    --color-accent-hover: #b01b21;

    --color-gold: #C8A951;

    /* ====== Text Colors ====== */
    --color-text-dark: #1E1E1E;
    --color-text-base: #333;
    --color-text-light: #666;
    --color-text-muted: #848383;
    --color-text-placeholder: #999;
    --color-text-placeholder-light: #aaa;

    /* ====== Background Colors ====== */
    --color-bg-white: #FFFFFF;
    --color-bg-light: #F9F9F9;
    --color-bg-gray: #F1F1F1;
    --color-bg-gray-alt: #F2F2F2;
    --color-bg-topbar: #f5f5f5;
    --color-bg-dropdown: #e8e8e8;
    --color-bg-sidebar-title: #E9E9E9;

    /* ====== Border Colors ====== */
    --color-border-light: #ddd;
    --color-border-gray: #D9D9D9;
    --color-border-medium: #ccc;
    --color-border-card: #e8e8e8;

    /* ====== Button Colors ====== */
    --color-btn-secondary: #E0E0E0;
    --color-btn-secondary-hover: #d0d0d0;

    /* ====== Link Colors ====== */
    --color-link-blue: #1773EA;
    --color-messenger: #0084FF;
    --color-zalo: #0068FF;

    /* ====== Gradient Colors ====== */
    --color-gradient-blue: #2C6AB8;

    /* ====== Nav Colors ====== */
    --color-nav-text: #FCFCFC;

    /* ====== Shadow ====== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-base: 0 4px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 0 4px 10px rgba(0, 0, 0, 0.15);
    --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.2);

    /* ====== Overlay Colors ====== */
    --overlay-blue-light: rgba(0, 40, 90, 0.6);
    --overlay-blue-dark: rgba(0, 40, 90, 0.9);
    --overlay-white-light: rgba(255, 255, 255, 0.12);
    --overlay-white-medium: rgba(255, 255, 255, 0.75);
}