:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 33, 69, 157;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
}

/*--------------font-family and font siza ------------------*/
   /*--------------font-family and font siza ------------------*/
    /*----400,500,600,700----*/
    @font-face {
        font-family:NunitoSans;
        src: url(../font/NunitoSans_7pt_Condensed-Regular.ttf);
    }
    @font-face {
        font-family:NunitoSans-Light;
        src: url(../font/NunitoSans_7pt_Condensed-Light.ttf);
    }
    @font-face {
       font-family:NunitoSans-Bold;
        src: url(../font/NunitoSans_7pt_Condensed-Bold.ttf);
    }
     @font-face {
       font-family:NunitoSans-Black;
        src: url(../font/NunitoSans_7pt-Black.ttf);
    }

    *{
        font-family:NunitoSans;
    }
    .baiviet span,p{
        font-family:NunitoSans !important;
        font-size: 16px !important;
    }
    .chu-mong{
        font-family:NunitoSans-Light !important;
    }
    .chu-dam{
        font-family:NunitoSans-Bold !important;
    }
    .chu-black{
        font-family:NunitoSans-Black !important;
    }
    .chu-nho{
        font-size: 12px !important;
    }
    .chu-to{
        font-size: 48px !important;
    }
    .fs-22{
        font-size: 22px !important;
    }
     .chu-day{
        font-family:NunitoSans-Black !important;
    }

/*--------------btn ------------------*/
    .btn-outline-primary{
        color: rgb(var(--bs-primary-rgb)) !important;
        border-color:  rgb(var(--bs-primary-rgb)) !important;
    }
    .btn-outline-primary:hover{
        background-color: rgb(var(--bs-primary-rgb)) !important;
        color: white !important;
        border-color:  rgb(var(--bs-primary-rgb)) !important;
    }
    .btn-primary{
        background-color: rgb(var(--bs-primary-rgb)) !important;
        color: white !important;
        border-color:  rgb(var(--bs-primary-rgb)) !important;
    }
    .btn-primary:hover{
        background-color: rgb(216, 92, 67) !important;
        color: white !important;
        border-color:  rgb(216, 92, 67) !important;
    }
    .btn-van{
        background-color: rgb(110, 197, 221)  !important;
        color: white !important;
        border-color: rgb(110, 197, 221)  !important;
    }
    .btn-van:hover{
        background-color: rgb(87, 166, 186) !important;
        color: white !important;
        border-color: rgb(87, 166, 186) !important;
    }



/*--------------padding anh margin ------------------*/
    .p-6{
        padding-left: 2vw !important;
        padding-right: 2vw !important;
    }
    .p-7{
        padding-left: 2vw !important;
        padding-right: 2vw !important;
    }
/*-------------- hieu ung va border khac ----------------------------*/
    .cursor{
        cursor: pointer;
    }
    .rounded_top{
        border-top-left-radius: 1vw;
        border-top-right-radius: 1vw;
    }
    .overflow_ex{
        overflow: hidden;
    }
    .width_ex{
        width: 300%;
    }
    .icon_zalo{
        height: 20px;
    }
    .baner_nen{
        background-color: rgba(var(--bs-primary-rgb), 0.8);
    }
    .noidung img{
        max-width: 100% !important;
    }
    .hu_sp{
        position: relative;
        border-left: 5px solid rgb(var(--bs-primary-rgb));
        transition-duration: 0.3s;
        &:after{
            content: '';
            position: absolute;
            left: 0px;
            bottom: 0px;
            background-color: rgb(var(--bs-danger-rgb));
            width: 100%;
            height: 0px;
            transition-duration: 0.3s;

        }
    }
    
    .hu_sp:hover{
        color: rgb(var(--bs-danger-rgb));
        background-color:rgb(var(--bs-light-rgb)) ;
        cursor: pointer;
        &:after{
            content: '';
            position: absolute;
            left: 0px;
            bottom: 0px;
            background-color: rgb(var(--bs-danger-rgb));
            width: 100%;
            height: 6px;
            transition-duration: 0.3s;

        }
    }

    .noidung img{
        max-width: 100% !important;
            height: auto !important;
    }

@media(min-width: 768px){
    .noidung img{
        max-width: 100% !important;
            height: auto !important;
    }
   
    .p-6{
        padding-left: 4vw !important;
        padding-right: 4vw !important;
    }
    .p-7{
        padding-left: 8vw !important;
        padding-right: 8vw !important;
    }

    .overflow_ex{
        overflow: visible;
    }
     .width_ex{
        width: 110%;
    }
}

@media (min-width: 1400px){
    .p-6{
        padding-left: 7vw !important;
        padding-right: 7vw !important;
    }
    .width_ex{
        width: 100%;
    }
    
   
}
@media (min-width: 2000px){
    .p-6{
        padding-left: 20vw !important;
        padding-right: 20vw !important;
    }
    
    .rounded_top{
        border-top-left-radius: 0.5vw;
        border-top-right-radius: 0.5vw;
    }
   
}
@media (min-width: 3000px){
    .p-6{
        padding-left: 30vw !important;
        padding-right: 30vw !important;
    }
    .rounded_top{
        border-top-left-radius: 0.3vw;
        border-top-right-radius: 0.3vw;
    }
    
    
   
}

/*---------------------------------------------------*/
input,select,button, textarea, ul, li, a:focus{
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    outline: 0;
}