: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: 13, 110, 253;
    --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;
    --mauvang: #E47F35;
}

/*--------------font-family and font siza ------------------*/
    /*----400,500,600,700----*/
    @font-face {
        font-family:NotoSans-Regular;
        src: url(../font/NotoSans-Regular.ttf);
    }
    @font-face {
        font-family:so;
        src: url(../font/NotoSans-Regular.ttf);
    }
    *{
        font-family: NotoSans-Regular;
    }

    .fs-27{
        font-family: so;
        font-size: 36px;
    }
    .tieude{
        font-family: Prata-Regular;
        src: url(../font/Prata-Regular.ttf);
    }
    .price-line{
        text-decoration: line-through;
    }
    .fs-12{
        font-size: 12px;
    }
    .fs-10{
        font-size: 10px;
    }
    .fs-14{
        font-size: 14px;
    }

/*--------------padding anh margin ------------------*/
    .p-6{
        padding-left: 2vw !important;
        padding-right: 2vw !important;
    }
    .p-7{
        padding-left: 3vw !important;
        padding-right: 3vw !important;
    }
    .rainbow-text {
        background-image: linear-gradient(122deg,#f17b85,#f79393 15%,#fee4a5 45%,#9ae8b0 65%,#5ba5d0 90%,#9078d0);
        -webkit-mask-image: linear-gradient(122deg,#f17b85,#f79393 15%,#fee4a5 45%,#9ae8b0 65%,#5ba5d0 90%,#9078d0);
        -webkit-box-decoration-break: clone;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .bg-vang{
        background-color: var(--mauvang);
    }
    .chu-vang{
        color: var(--mauvang);
    }
    
    .gh{
        height: 20px;
        width: 20px;
        background-color: orange;
        border-radius: 50%;
        padding: 8px;
        color: white;
    }
    .nut:hover{
        border-radius: 1vw;
        border: 1px solid #FF835B;
    }
/*-------------- thẻ menu ----------------------------*/
    .cursor{
        cursor: pointer;
    }
    .body{
        font-family: SVN-Gilroy,Verdana,Roboto,Tahoma,sans-serif;
        color: white;
    }

@media(min-width: 768px){
    .p-6{
        padding-left: 2vw !important;
        padding-right: 2vw !important;
    }
    .p-7{
        padding-left: 2vw !important;
        padding-right: 2vw !important;
    }
    .fs-27{
        
        font-size: 48px;
    }
}

@media (min-width: 1400px){
    .p-6{
        padding-left: 12vw !important;
        padding-right: 12vw !important;
    }
    .p-7{
        padding-left: 12vw !important;
        padding-right: 12vw !important;
    }
    .fs-27{
        
        font-size: 60px;
    }

}

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