/***********FONT CHỮ************/
@font-face {
    font-family: 'Playfair Display';
    src: url(../fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-weight: 400;
    src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Regular.ttf);
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-weight: 500;
    src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Medium.ttf);
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-weight: 600;
    src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-SemiBold.ttf);
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-weight: 700;
    src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Bold.ttf);
}

@font-face {
    font-family: 'Be Vietnam Pro';
    font-weight: 900;
    src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Black.ttf);
}

body {
    font-family: 'Be Vietnam Pro';
    font-weight: 400;
    font-style: normal;
    color: var(--text);
}

:root {
    --title: #1E2939;
    --text: #1E2939;
    --second-text: #364153;
    --blur-text: #5E718F;
    --sub-text: #EDEDED;
    --main-yellow: #FFCC00;
    --background-green: #24A148;
    --background-blue: #0043CE;
    --white: #FFFFFF;
    --border-gray: #E3E6EB;
    --border-background: #F4F4FC;
    --main-purple: #009B7C;
}

p {
    font-family: 'Be Vietnam Pro';
    color: var(--text);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Be Vietnam Pro';
}

.form-control:focus {
    box-shadow: 0 0 5px 0.2rem rgba(30, 45, 190, 0.15);
}

strong {
    font-family: 'Be Vietnam Pro';
    font-weight: 700;
}

body section {
    margin-bottom: 60px;
}

@media screen and (max-width: 1024px) {
    body section {
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 768px) {
    body section {
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 576px) {
    body section {
        margin-bottom: 20px;
    }
}

/***********SCROLL BAR************/

*::-webkit-scrollbar {
    width: 8px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 20px;
}

*::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 20px;
    border: 8px solid transparent;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #979595;
}

/***********SETUP MAIN CSS************/

ul, li {
    margin: 0; 
    padding: 0;
    list-style-type: none;
}

img {
    max-width: 100%;
    object-fit: contain;
    object-position: 50% 50%;
}

h2, h4, h6 {

}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

p {
    font-family: 'Be Vietnam Pro';
    color: var(--text);
    line-height: 1.5;
}

b, strong {
    font-family: 'Be Vietnam Pro';
    font-weight: 700;
}

/***********CONTAINER SETTING************/

/* @media screen and (min-width: 1921px) {
    html[lang="vi-VN"] .container {
        max-width: 1650px;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1730px) {
    html[lang="vi-VN"] .container {
        max-width: 1650px;
    }
}

@media screen and (max-width: 1729px) and (min-width: 1367px) {
    html[lang="vi-VN"] .container {
        max-width: calc(100% - 80px);
    }
} */

.container {
    max-width: 1350px;
}

@media screen and (max-width: 1240px) and (min-width: 1118px) {
    .container {
        max-width: 1200px;
    }
}

@media screen and (max-width: 991px) and (min-width: 871px) {
    .container {
        max-width: 900px;
    }
}

@media screen and (max-width: 870px) {
    .container{
        max-width: 850px;
    }
}

@media screen and (max-width: 800px) {
    .container{
        max-width: 740px;
    }
}

/*BACK TO TOP*/


.back-to-top a::after {
    content: '';
    color: #1F7A5A;
    font-size: 24px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400 !important;
}

.anim-scroll-to-top.active-progress {
    opacity: 1;
    visibility: visible;
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.anim-scroll-to-top {
    z-index: 2000;
    position: fixed;
    right: 30px;
    bottom: 80px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: none;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(31, 122, 90,0.2);
    opacity: 0;
    visibility: hidden;
    -moz-transform: translateY(15px);
    -o-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    -moz-transition: all 300ms ease-out 0s;
    -webkit-transition: all 300ms ease-out 0s;
    -ms-transition: all 300ms ease-out 0s;
    -o-transition: all 300ms ease-out 0s;
    transition: all 300ms ease-out 0s;
    background-color: #FFFF;
}

.anim-scroll-to-top svg.progress-circle path {
    stroke: #1f7a5a;
    stroke-width: 4;
    box-sizing: border-box;
}

.anim-scroll-to-top svg path {
    fill: none;
}

.anim-scroll-to-top::after {
    position: absolute;
    content: "";
    mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.9999 18.9993V7.41333L6.70696 11.7063C6.31643 12.0968 5.68342 12.0968 5.29289 11.7063C4.90237 11.3158 4.90237 10.6827 5.29289 10.2922L11.2929 4.29223L11.369 4.22387C11.7618 3.90354 12.3408 3.92613 12.7069 4.29223L18.7069 10.2922L18.7753 10.3684C19.0956 10.7612 19.073 11.3402 18.7069 11.7063C18.3408 12.0724 17.7618 12.095 17.369 11.7746L17.2929 11.7063L12.9999 7.41333V18.9993C12.9999 19.5515 12.5522 19.9993 11.9999 19.9993C11.4476 19.9993 10.9999 19.5515 10.9999 18.9993Z" fill="%231F7A5A"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.9999 18.9993V7.41333L6.70696 11.7063C6.31643 12.0968 5.68342 12.0968 5.29289 11.7063C4.90237 11.3158 4.90237 10.6827 5.29289 10.2922L11.2929 4.29223L11.369 4.22387C11.7618 3.90354 12.3408 3.92613 12.7069 4.29223L18.7069 10.2922L18.7753 10.3684C19.0956 10.7612 19.073 11.3402 18.7069 11.7063C18.3408 12.0724 17.7618 12.095 17.369 11.7746L17.2929 11.7063L12.9999 7.41333V18.9993C12.9999 19.5515 12.5522 19.9993 11.9999 19.9993C11.4476 19.9993 10.9999 19.5515 10.9999 18.9993Z" fill="%231F7A5A"/></svg>');
    background-color: #1F7A5A;
    background-repeat: no-repeat;
    background-position: center;
    mask-repeat: no-repeat;
    mask-position: center;
    text-align: center;
    color: #1F7A5A;
    left: 0;
    top: 0;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -moz-transition: all 300ms ease-out 0s;
    -webkit-transition: all 300ms ease-out 0s;
    -ms-transition: all 300ms ease-out 0s;
    -o-transition: all 300ms ease-out 0s;
    transition: all 300ms ease-out 0s;
}

/***********SCROLL BAR OPTION************/

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #B7C0CF;
    border-radius: 12px;
}

*::-webkit-scrollbar-thumb {
    background: #5E718F;
    border-radius: 12px;
}

html {
    scroll-behavior: smooth;
}

.list_Advertisement {
    padding: 0;
}

/****FIREFOX SCROLL BAR****/

*:-webkit-scrollbar {
    width: 8px;
}

*:-webkit-scrollbar-track {
    background: #B7C0CF;
    border-radius: 12px;
}

*:-webkit-scrollbar-thumb {
    background: #B7C0CF;
    border-radius: 12px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #5E718F transparent;
}

/****SIDEBAR CLOSE/OPEN****/

.btn-sidebar {
    position: fixed;
    right: 0;
    top: 30%;
    transform: translateY(-50%);
    z-index: 10;
    background: white;
    padding: 8px;
    border-radius: 50% 0 0 50%;
    box-shadow: -2px 0px 4px 0.1rem rgba(30, 45, 190, 0.15);
    align-items: center;
    justify-content: center;
}


.div-news > .btn-sidebar,
.div-sidebar > .btn-close {
    display: none;
}

@media screen and (max-width: 1117px) {

    .div-news > .btn-sidebar {
        display: flex;
    }
    
    .div-sidebar > .btn-close {
        display: block;
    }

    .div-news > .btn-sidebar {
        text-align: right;
        margin-bottom: 8px;
    }

    .div-sidebar > .btn-close {
        margin-bottom: 8px;
    }

    .div-sidebar {
        display: none;
        max-width: 324px;
        width: 100%;
        top: 0;
        height: 100vh;
        position: fixed;
        right: -100%;
        transition: all 0.5s;
        display: block;
        z-index: 100;
        padding-top: 30px;
        overflow: hidden auto;
    }

    .div-sidebar.show {
        display: block;
        right: 0;
        background: #fff;
        box-shadow: -4px 0px 4px rgba(30, 45, 190, 0.12);
    }

    .dim-background {
        display: none;
        transition: all 0.5s ease-in-out;
    }

    .div-news.has_sidebar .dim-background {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 100;
        display: block;
    }

    .div-news,
    .div-main {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/****BUTTON****/

.btn {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-family: inherit;
    font-style: normal;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    min-width: 120px;
    border: none !important;
    outline: none !important;
    letter-spacing: 0.1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary,
.btn-success {
    background: var(--main-purple) !important;
    margin-right: 8px !important;
}

.btn.btn-warning,
a.btn.btn-warning,
.btn.btn-danger,
a.btn.btn-danger {
    background: var(--btn-warning) !important;
    color: var(--white) !important;
    margin-right: 8px;
}

.btn-secondary {
    background: var(--btn-secondary) !important;
    border-radius: 4px;
    padding: 8px 16px !important;
    margin-right: 8px;
}

.btn-secondary:hover {
    background: var(--btn-secondary) !important;
}

.btn-outline-primary,
.btn-black {
    background: var(--white) !important;
    border: 1px solid var(--main-purple) !important;
    border-radius: 4px;
    padding: 8px 16px;
    color: var(--main-purple)  !important;
}

.btn-outline-primary:hover {
    background: var(--white) !important;
    color: #000;
}

.btn-outline-primary:focus {
    outline: none;
}

.btn-warning:hover {
    background: #E11D48 !important;
}

/****PRE-LOADER LOADING****/

@keyframes loader {
    0%, 10%, 100% {
        width: 80px;
        height: 80px;
   }
    65% {
        width: 150px;
        height: 150px;
   }
}
@keyframes loaderBlock {
    0%, 30% {
        transform: rotate(0);
   }
    55% {
        background-color: #4958e6;
   }
    100% {
        transform: rotate(90deg);
   }
}
@keyframes loaderBlockInverse {
    0%, 20% {
        transform: rotate(0);
   }
    55% {
        background-color: #4958e6;
   }
    100% {
        transform: rotate(-90deg);
   }
}

.loading {
    overflow: hidden;
    height: 100vh;
}

.pre-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: white;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
    animation: loader 1.2s infinite ease-in-out;
}
.loader span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background-color: #1E2DBE;
    animation: loaderBlock 1.2s infinite ease-in-out both;
}
.loader span:nth-child(1) {
    top: 0;
    left: 0;
}
.loader span:nth-child(2) {
    top: 0;
    right: 0;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
.loader span:nth-child(3) {
    bottom: 0;
    left: 0;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
.loader span:nth-child(4) {
    bottom: 0;
    right: 0;
}

/****************************************************************************************************************/
/***********************************************************************CMS - CHECK BOX / RADIO BOX*************************************************************************/
/****************************************************************************************************************/
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    font-family: inherit !important;
    font-style: normal;
    font-weight: 500 !important;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;   
    color: var(--text-mi, #182940);
}

[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

[type="radio"]:checked + label:before {
    border-color: #009B7C;
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #009B7C;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: transparent;
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 100%;
    height: 1.15em;
    /* border: 0.15em solid #C9D7F5; */
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    box-sizing: border-box;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: 24px;
}

[type="checkbox"]::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 6.25C3 4.45 4.46 3 6.25 3H17.75C19.55 3 21 4.46 21 6.25V17.75C21 19.55 19.54 21 17.75 21H6.25C5.38805 21 4.5614 20.6576 3.9519 20.0481C3.34241 19.4386 3 18.612 3 17.75V6.25ZM6.25 4.5C5.28 4.5 4.5 5.28 4.5 6.25V17.75C4.5 18.72 5.28 19.5 6.25 19.5H17.75C18.72 19.5 19.5 18.72 19.5 17.75V6.25C19.5 5.28 18.72 4.5 17.75 4.5H6.25Z" fill="%23E2E4E9"/></svg>');    transition: all 0.2s ease-in-out;
}

[type="checkbox"]:checked::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_28_4142" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_28_4142)"><path d="M10.6 13.4L8.45 11.25C8.26667 11.0667 8.03333 10.975 7.75 10.975C7.46667 10.975 7.23333 11.0667 7.05 11.25C6.86667 11.4333 6.775 11.6667 6.775 11.95C6.775 12.2333 6.86667 12.4667 7.05 12.65L9.9 15.5C10.1 15.7 10.3333 15.8 10.6 15.8C10.8667 15.8 11.1 15.7 11.3 15.5L16.95 9.85C17.1333 9.66667 17.225 9.43333 17.225 9.15C17.225 8.86667 17.1333 8.63333 16.95 8.45C16.7667 8.26667 16.5333 8.175 16.25 8.175C15.9667 8.175 15.7333 8.26667 15.55 8.45L10.6 13.4ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z" fill="%2335C19B"/></g></svg>');
} 

[type="checkbox"]:indeterminate::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 13H17V11H7V13ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z" fill="%235E82D1"/></svg>');
} 

[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);
    color: var(--form-control-disabled);
    cursor: not-allowed;
}