:root {
    /* Primary */
    --primary-50:  #F0F8FF;
    --primary-100: #DFF0FF;
    --primary-200: #B8E3FF;
    --primary-300: #79CDFF;
    --primary-400: #37B7FE;
    --primary-500: #079CF0;
    --primary-600: #007CCD;
    --primary-700: #0062A6;
    --primary-800: #035389;
    --primary-900: #094671;
    --primary-950: #062C4B;

    /* Second */
    --second-50:  #FFFEAA;
    --second-100: #FFFCC5;
    --second-200: #FFF986;
    --second-300: #FFEF47;
    --second-400: #FFE11D;
    --second-500: #FDC50E;
    --second-600: #E09700;
    --second-700: #BA6B03;
    --second-800: #96520A;
    --second-900: #7C440B;
    --second-950: #472301;
}

/* Class sử dụng màu */
/* ============================= */
/*   Background - Primary        */
/* ============================= */
.bg-primary-50  { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-900 { background-color: var(--primary-900); }
.bg-primary-950 { background-color: var(--primary-950); }

/* ============================= */
/*   Text color - Primary        */
/* ============================= */
.text-primary-50  { color: var(--primary-50); }
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }
.text-primary-950 { color: var(--primary-950); }

/* ============================= */
/*   Background - Second         */
/* ============================= */
.bg-second-50  { background-color: var(--second-50); }
.bg-second-100 { background-color: var(--second-100); }
.bg-second-200 { background-color: var(--second-200); }
.bg-second-300 { background-color: var(--second-300); }
.bg-second-400 { background-color: var(--second-400); }
.bg-second-500 { background-color: var(--second-500); }
.bg-second-600 { background-color: var(--second-600); }
.bg-second-700 { background-color: var(--second-700); }
.bg-second-800 { background-color: var(--second-800); }
.bg-second-900 { background-color: var(--second-900); }
.bg-second-950 { background-color: var(--second-950); }

/* ============================= */
/*   Text color - Second         */
/* ============================= */
.text-second-50  { color: var(--second-50); }
.text-second-100 { color: var(--second-100); }
.text-second-200 { color: var(--second-200); }
.text-second-300 { color: var(--second-300); }
.text-second-400 { color: var(--second-400); }
.text-second-500 { color: var(--second-500); }
.text-second-600 { color: var(--second-600); }
.text-second-700 { color: var(--second-700); }
.text-second-800 { color: var(--second-800); }
.text-second-900 { color: var(--second-900); }
.text-second-950 { color: var(--second-950); }


.bungee{
    font-family: 'Bungee', cursive;
}