: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: 22, 22, 22;
    --bs-secondary-rgb: 230, 241, 25;
    --bs-success-rgb: 0, 146, 50;
    --bs-info-rgb: 255, 206, 0;
    --bs-warning-rgb: 242, 248, 254;
    --bs-danger-rgb: 255, 71, 19;
    --bs-light-rgb: 239, 239, 239;
    --bs-dark-rgb: 0, 112, 244;
    --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;
    --bs-body-bg: #fff;
}

/*--------------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-nho{
        font-size: 12px !important;
    }
    .chu-to{
        font-size: 48px !important;
    }
    .fs-22{
        font-size: 22px !important;
    }
     .chu-day{
        font-family:NunitoSans-Black !important;
    }

    .border_bottom{
        
        border-bottom: 1px solid black !important;
    }
    

/*------------hieu ung----------------*/
    .cursor{
        cursor: pointer;
    }

    .hu_line_height{
        position: relative;
    }
    .hu_line_height div:last-of-type{
        position: absolute;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 0px;
        background-color: rgb(var(--bs-danger-rgb));
        transition-duration: 0.4s;
    }
    .hu_line_height:hover div:last-of-type{
        height: 4px;
        background-color: rgb(var(--bs-danger-rgb));
        transition-duration: 0.4s;
    }

/*--------------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;
    }

    .border-primary{
        border-color: rgb(var(--bs-primary-rgb)) !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;
    }

    .rounded-4{
        border-radius: 4vw;
    }

    .anhdat{
        color: red !important;
    }

    .p-6{
        padding-left: 1vw;
        padding-right: 1vw;
    }
    .sanpham_image{
        height: 100vw;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

@media(min-width: 768px){
    .sanpham_image{
        height: 24vw;
    }
    .p-6{
        padding-left: 2vw !important;
        padding-right: 2vw !important;
    }
    .p-7{
        padding-left: 3vw !important;
        padding-right: 3vw !important;
    }

    .border_bottom{
        
        border-bottom: 1px solid black !important;
    }
    
}

@media (min-width: 1400px){
    .sanpham_image{
        height: 17vw;
    }
    .p-6{
        padding-left: 4vw !important;
        padding-right: 4vw !important;
    }
   
}

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