:root {
    --color-blue: #5271FF;
    /* --color-green: #44b678; */
    --color-red: #f44336;
    --color-orange: #FF884C;
    --color-green-subtle: #E0F4E6;

    --color-green-50: #f4fbe7;
    --color-green-100: #e6f6c7;
    --color-green-150: #d4f0a2;
    --color-green-200: #c2e97e;
    --color-green-250: #afe15a;
    --color-green-300: #9dd839;
    --color-green-350: #8ccf1f;
    --color-green-400: #7fcf11;
    --color-green-450: #75b90f;
    --color-green-500: #7FBB11;
    --color-green-550: #70a40f;
    --color-green-600: #628e0e;
    --color-green-650: #54780c;
    --color-green-700: #46620b;
    --color-green-750: #394c09;
    --color-green-800: #2b3707;
    --color-green-850: #1d2205;
    --color-green-900: #101c03;

    --color-coral-50: #fff4f1;
    --color-coral-100: #ffe6e0;
    --color-coral-150: #ffd3c9;
    --color-coral-200: #ffbfae;
    --color-coral-250: #ffab92;
    --color-coral-300: #ff9676;
    --color-coral-350: #ff815d;
    --color-coral-400: #ff6c47;
    --color-coral-450: #f85c3a;
    --color-coral-500: #f0512f;
    --color-coral-550: #d9492a;
    --color-coral-600: #c24125;
    --color-coral-650: #a93a20;
    --color-coral-700: #8f321b;
    --color-coral-750: #752a15;
    --color-coral-800: #5b220f;
    --color-coral-850: #41190a;
    --color-coral-900: #281105;

    --color-gray-50: #fafafa;
    --color-gray-60: #f8f8f8;
    --color-gray-70: #f5f5f5;
    --color-gray-100: #f2f2f2;
    --color-gray-150: #ebebeb;
    --color-gray-200: #e4e4e4;
    --color-gray-250: #dddddd;
    --color-gray-300: #d6d6d6;
    --color-gray-350: #cfcfcf;
    --color-gray-400: #c8c8c8;
    --color-gray-450: #bfbfbf;
    --color-gray-500: #a8a8a8;
    --color-gray-550: #949494;
    --color-gray-600: #808080;
    --color-gray-650: #6b6b6b;
    --color-gray-700: #565656;
    --color-gray-750: #434343;
    --color-gray-800: #2f2f2f;
    --color-gray-850: #1c1c1c;
    --color-gray-900: #0a0a0a;
}
html {
    font-size: 15px;
}
body {
    background-color: var(--color-green-50);
}
a {
    color: var(--color-green-500);
    text-decoration: none;
    text-underline-position: under;
}
img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}
.bg-green {
    background-color: var(--color-green-500);
}
.bg-green-50 {
    background-color: var(--color-green-50);
}
.bg-orange {
    background-color: var(--color-orange);
}
.bg-blue {
    background-color: var(--color-blue);
}
.fs-5-5 {
    font-size: 1.1rem !important;
}
.fs-7 {
    font-size: 0.95rem !important;
}
.fs-8 {
    font-size: 0.9rem !important;
}
.fs-9 {
    font-size: 0.85rem !important;
}
.fs-10 {
    font-size: 0.8rem !important;
}
.fs-11 {
    font-size: 0.75rem !important;
}
.fs-12 {
    font-size: 0.7rem !important;
}
.p-25 {
    padding: 0.75rem !important;
}
.pt-25 {
    padding-top: 0.75rem !important;
}
.pb-25 {
    padding-bottom: 0.75rem !important;
}
.me-15 {
    margin-right: .35rem !important;
}
.me-25 {
    margin-right: .7rem !important;
}
.mt-15 {
    margin-top: .35rem !important;
}
.mt-25 {
    margin-top: .7rem !important;
}
.mb-n4 {
    margin-bottom: -4px;
}
.h-40px {
    height: 40px !important;
}
.h-45px {
    height: 45px !important;
}
.h-50px {
    height: 50px !important;
}
.size-40 {
    width: 40px !important;
    height: 40px !important;
}
.text-red {
    color: var(--color-red) !important;
}
.text-green {
    color: var(--color-green-500) !important;
}
.text-green-100 {
    color: var(--color-green-100) !important;
}
.text-orange {
    color: var(--color-orange) !important;
}
.text-link {
    color: var(--color-green-500) !important;
}
.text-link:hover {
    color: var(--color-orange) !important;
}
.border-green {
    border-color: var(--color-green-500) !important;
}
.border-gray {
    border-color: var(--color-gray-500) !important;
}
.border-gray-100 {
    border-color: var(--color-gray-100) !important;
}
.btn:hover {
    text-decoration: none;
}
.btn-white {
    --bs-btn-color: #000;
    --bs-btn-bg: white;
    --bs-btn-border-color: #white;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f1f1f1;
    --bs-btn-hover-border-color: #f1f1f1;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f1f1f1;
    --bs-btn-active-border-color: #f1f1f1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ddd;
    --bs-btn-disabled-border-color: #ddd;
}
.btn-green {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-green-500);
    --bs-btn-border-color: var(--color-green-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-green-600);
    --bs-btn-hover-border-color: var(--color-green-600);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-green-600);
    --bs-btn-active-border-color: var(--color-green-600);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-green-600);
    --bs-btn-disabled-border-color: var(--color-green-600);
}
.btn-gray {
    --bs-btn-color: #000;
    --bs-btn-bg: #f2f2f2;
    --bs-btn-border-color: #f2f2f2;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #dedede;
    --bs-btn-hover-border-color: #dedede;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #dedede;
    --bs-btn-active-border-color: #dedede;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f4f4f4;
    --bs-btn-disabled-border-color: #f4f4f4;
}
.btn-gray-100 {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--color-gray-100);
    --bs-btn-border-color: var(--color-gray-100);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--color-gray-200);
    --bs-btn-hover-border-color: var(--color-gray-200);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--color-gray-200);
    --bs-btn-active-border-color: var(--color-gray-200);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--color-gray-300);
    --bs-btn-disabled-border-color: var(--color-gray-300);
}
.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-orange);
    --bs-btn-border-color: var(--color-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ef7e45;
    --bs-btn-hover-border-color: #ef7e45;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ef7e45;
    --bs-btn-active-border-color: #ef7e45;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ef7e45;
    --bs-btn-disabled-border-color: #ef7e45;
}
.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-blue);
    --bs-btn-border-color: var(--color-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #405ee6;
    --bs-btn-hover-border-color: #405ee6;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #405ee6;
    --bs-btn-active-border-color: #405ee6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #405ee6;
    --bs-btn-disabled-border-color: #405ee6;
}
.line-row-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: normal;
}
.line-row-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}
.line-row-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: normal;
}
.container {
    max-width: 1100px;
}
.wheel__tabs .nav-link {
    border-width: 4px;
}
.wheel__tabs .nav-link:hover,
.wheel__tabs .nav-link:focus {
    border-color: transparent;
}
.wheel__tabs .nav-link.active {
    border-width: 4px;
    border-color: var(--color-green-500) !important;
}
.the__article {
    font-size: 1.2rem;
    line-height: 1.7777778;
}
.the__article h2 {
    font-size: 1.6666667em;
    line-height: 1.3333333;
    margin-bottom: .666667em;
    margin-top: 1.8666667em;
}
.cursor-pointer {
    cursor: pointer;
}
.spin-animation {
    animation: spin_animation 70s linear infinite; 
}
.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}
.icon.color-wheel {
    background: url(../images/color-wheel.svg) center no-repeat;
    background-size: contain;
}
.icon.flag-vi,
.icon.flag-vn {
    background: url(../images/flag-vietnam.svg) center no-repeat;
    background-size: contain;
}
.icon.flag-en,
.icon.flag-us {
    background: url(../images/flag-usa.svg) center no-repeat;
    background-size: contain;
}
.icon.flag-fr {
    background: url(../images/flag-fr.svg) center no-repeat;
    background-size: contain;
}
.modal-backdrop {
    --bs-backdrop-opacity: 0.7;
}
.hidden {
    display: none !important;
}
@keyframes spin_animation {
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(360deg);
} }

@media (min-width: 992px) {
    a:hover {
        color: var(--color-coral-400);
        text-decoration: underline;
    }
}