:root{
    --main-overlay-col: linear-gradient(180deg, rgba(0, 0, 0, 0) 65.93%, rgba(0, 0, 0, 0.8) 100%);
    --vinno-border-radius: 16px;
    --main-color: #B11B2B;
    --main-color-hover: #8a1c27;
    --grey: #F4F4F4;
    --lightgrey: #F4F6F8;
    --lightgrey-15: #00000026;
    --lightgrey-85: #000000D9;
    --lightgrey-65: #000000A6;
    --darkgrey-15: #FFFFFF26;
    --darkgrey-45: #FFFFFF73;
    --darkgrey-85: #FFFFFFD9;
    --lighter-orange: #F7AC5D;
    --light-orange: #FFA900;
    --orange: #D0661D;
    --blue: #01417E;
    --blue-hover:rgb(9, 45, 79);
    --lightyellow: #FFFEEC;
}
/* Cấu hình chung */
a{
    transition: all 0.3s ease;
}
a:hover{
    color: var(--main-color)!important;
} 

/* Display */
@media screen and (min-width: 992px) {
    .w-lg-75{
        width: 75%;
    }
    .w-lg-50{
        width: 50%;
    }
    .w-lg-25{
        width: 25%;
    }
}
.w-img-50 img{
    width: 50%;
}
.w-img-100 img{
    width: 100%;
}
.fit-cover,
.fit-img-cover img{
    object-fit: cover;
}
.fit-contain,
.fit-img-contain img{
    object-fit: contain;
}

.h-50px{
    height: 50px;
}
.mw-16px{
    min-width: 16px;
}

/* Font size */
.fs-12px{
    font-size: 12px;
}
.fs-13px{
    font-size: 13px;
}
.fs-14px{
    font-size: 14px;
}
.fs-18px{
    font-size: 18px;
}
.fs-20px{
    font-size: 20px;
}
.fs-24px{
    font-size: 24px;
}
.fs-28px{
    font-size: 28px;
}
.fs-30px{
    font-size: 30px;
}

.fs-link-13px a{
    font-size: 13px;
}
.fs-link-14px a{
    font-size: 14px;
}
.fs-link-18px a{
    font-size: 18px;
}
.fs-link-20px a{
    font-size: 20px;
}
.fs-link-24px a{
    font-size: 24px;
}
.fs-link-28px a{
    font-size: 28px;
}
.fs-link-30px a{
    font-size: 30px;
}

@media(min-width: 992px){
    .fs-lg-13px{
        font-size: 13px;
    }
    .fs-lg-14px{
        font-size: 14px;
    }
    .fs-lg-18px{
        font-size: 18px;
    }
    .fs-lg-20px{
        font-size: 20px;
    }
    .fs-lg-24px{
        font-size: 24px;
    }
    .fs-lg-28px{
        font-size: 28px;
    }
    .fs-lg-30px{
        font-size: 30px;
    }

    .fs-link-lg-13px a{
        font-size: 13px;
    }
    .fs-link-lg-14px a{
        font-size: 14px;
    }
    .fs-link-lg-18px a{
        font-size: 18px;
    }
    .fs-link-lg-20px a{
        font-size: 20px;
    }
    .fs-link-lg-24px a{
        font-size: 24px;
    }
    .fs-link-lg-28px a{
        font-size: 28px;
    }
    .fs-link-lg-30px a{
        font-size: 30px;
    }
}

/* Font Weight */
.fw-link-bold a{
    font-weight: bold;
}
.fw-link-light a{
    font-weight: light;
}

/* Border */
.border-solid{
    border: solid;
}
.borders-top{
    border-top: solid;
}
.borders-end{
    border-right: solid;
}
.borders-bottom{
    border-bottom: solid;
}
.borders-start{
    border-left: solid;
}
.border-radius-main,
.rounded-main,
.rounded-main-img img{
    --bs-border-opacity: 1;
    border-radius: var(--vinno-border-radius) !important;
}
.rounded-2-img img{
    --bs-border-opacity: 1;
    border-radius: 8px !important;
}
.rounded-12px{
    --bs-border-opacity: 1;
    border-radius: 12px !important;
}
.border-lightgrey{
    --bs-border-opacity: 1;
    border-color: var(--lightgrey-15) !important;
}
.border-grey{
    --bs-border-opacity: 1;
    border-color: var(--lightgrey-65) !important;
}
.border-darkgrey{
    --bs-border-opacity: 1;
    border-color: var(--darkgrey-45) !important;
}
.border-lighter-orange{
    --bs-border-opacity: 1;
    border-color: var(--lighter-orange) !important;
}
.border-orange{
    --bs-border-opacity: 1;
    border-color: var(--light-orange) !important;
}
.border-blue{
    --bs-border-opacity: 1;
    border-color: var(--blue) !important;
}
.border-main{
    --bs-border-opacity: 1;
    border-color: var(--main-color) !important;
}
.border-w-1{
    border-width: 1px;
}
.border-w-2{
    border-width: 2px;
}
.border-w-3{
    border-width: 3px;
}
.border-w-4{
    border-width: 4px;
}
.border-w-5{
    border-width: 5px;
}

@media(min-width: 992px){
    .border-radius-lg-main,
    .rounded-lg-main,
    .rounded-lg-main-img img{
        --bs-border-opacity: 1;
        border-radius: var(--vinno-border-radius) !important;
    }
}
/* Text */
.text-main,
.text-link-main a{
    color: var(--main-color);
}
body .text-black{
    color: var(--lightgrey-85);
}
.text-link-black a{
    color: var(--lightgrey-85);
}
.text-link-white a,
.link-white a{
    color: white;
}
.text-lightgrey-65{
    color: var(--lightgrey-65);
}
.text-darkgrey-85{
    color: var(--darkgrey-85);
}
.text-hover-white:hover,
.link-hover-white a:hover{
    color: white!important;
}
.trim-1-line{
    -webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
}
.trim-2-line{
    -webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
}
.trim-3-line{
    -webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
}
.trim-4-line{
    -webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
}
.trim-5-line{
    -webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
}


/* Background */
.bg-color-main{
    background-color: var(--main-color) !important;
}
.bg-color-hover-main:hover{
    background-color: var(--main-color) !important;
    color: white!important;
}
a.bg-color-main:hover{
    background-color: var(--main-color-hover) !important;
}
.bg-color-white{
    background-color: white !important;
}
.bg-color-lightgrey{
    background-color: var(--lightgrey) !important;
}
.bg-color-orange{
    background-color: #F7AC5D !important;
}
.bg-color-grey{
    background-color: var(--grey) !important;
}
.main-overlay-col{
    background: var(--main-overlay-col) !important;
}
.bg-color-darkgrey-15{
    background: var(--darkgrey-15) !important;
}
.bg-color-lightgrey-15{
    background: var(--lightgrey-15) !important;
}
.bg-color-lightgrey-85{
    background-color: var(--lightgrey-85)!important;
}
.bg-red-linear{
    background-image: linear-gradient(196.83deg, #CC2A3B 22.17%, #871215 40.02%);
}
.bg-color-blue{
    background: var(--blue) !important;
}
a.bg-color-blue:hover{
    background: var(--blue-hover)!important;
}

.bg-color-lightyellow{
    background: var(--lightyellow);
}
/* Scroll */
.scroll-none::-webkit-scrollbar {
    display: none;            /* Ẩn scrollbar cho đẹp */
}

/* Slick */
.slick-gap-10px .slick-slide {
    padding: 0 10px; /* tạo khoảng cách trái – phải */
}
.slick-gap-10px .slick-list {
    margin: 0 -10px; 
}

/* Animation */
.transition-3{
    transition: all 0.3s ease;
}



/* Resposive max-width */

.container,.container-lg{
    padding-left: 20px!important;
    padding-right: 20px!important;
}
@media(max-width: 768px){
    .px-mobile-0{
        padding-right: 0!important;
        padding-left: 0!important;
        margin-right: 0!important;
        margin-left: 0!important;
    }
}


/* Z-index */
.zindex-1{
    z-index: 1;
}
.zindex-2{
    z-index: 2;
}
.zindex-3{
    z-index: 3;
}

/* Sizing */
body .p-12px{
    padding: 12px!important;
}
body .px-12px{
    padding-inline: 12px!important;
}
body .py-12px{
    padding-block: 12px!important;
}
body .pt-12px{
    padding-top: 12px!important;
}
body .pb-12px{
    padding-bottom: 12px!important;
}
body .ps-12px{
    padding-left: 12px!important;
}
body .pe-12px{
    padding-right: 12px!important;
}


body .m-12px{
    margin: 12px!important;
}
body .mx-12px{
    margin-inline: 12px!important;
}
body .my-12px{
    margin-block: 12px!important;
}
body .mt-12px{
    margin-top: 12px!important;
}
body .mb-12px{
    margin-bottom: 12px!important;
}
body .ms-12px{
    margin-left: 12px!important;
}
body .me-12px{
    margin-right: 12px!important;
}

body .p-20px{
    padding: 20px!important;
}
body .px-20px{
    padding-inline: 20px!important;
}
body .py-20px{
    padding-block: 20px!important;
}
body .pt-20px{
    padding-top: 20px!important;
}
body .pb-20px{
    padding-bottom: 20px!important;
}
body .ps-20px{
    padding-left: 20px!important;
}
body .pe-20px{
    padding-right: 20px!important;
}


body .m-20px{
    margin: 20px!important;
}
body .mx-20px{
    margin-inline: 20px!important;
}
body .my-20px{
    margin-block: 20px!important;
}
body .mt-20px{
    margin-top: 20px!important;
}
body .mb-20px{
    margin-bottom: 20px!important;
}
body .ms-20px{
    margin-left: 20px!important;
}
body .me-20px{
    margin-right: 20px!important;
}

body .p-32px{
    padding: 32px!important;
}
body .px-32px{
    padding-inline: 32px!important;
}
body .py-32px{
    padding-block: 32px!important;
}
body .pt-32px{
    padding-top: 32px!important;
}
body .pb-32px{
    padding-bottom: 32px!important;
}
body .ps-32px{
    padding-left: 32px!important;
}
body .pe-32px{
    padding-right: 32px!important;
}


body .m-32px{
    margin: 32px!important;
}
body .mx-32px{
    margin-inline: 32px!important;
}
body .my-32px{
    margin-block: 32px!important;
}
body .mt-32px{
    margin-top: 32px!important;
}
body .mb-32px{
    margin-bottom: 32px!important;
}
body .ms-32px{
    margin-left: 32px!important;
}
body .me-32px{
    margin-right: 32px!important;
}
@media (min-width: 576px) {
    body .p-sm-12px{
        padding: 12px!important;
    }
    body .px-sm-12px{
        padding-inline: 12px!important;
    }
    body .py-sm-12px{
        padding-block: 12px!important;
    }
    body .pt-sm-12px{
        padding-top: 12px!important;
    }
    body .pb-sm-12px{
        padding-bottom: 12px!important;
    }
    body .ps-sm-12px{
        padding-left: 12px!important;
    }
    body .pe-sm-12px{
        padding-right: 12px!important;
    }
    
    
    body .m-sm-12px{
        margin: 12px!important;
    }
    body .mx-sm-12px{
        margin-inline: 12px!important;
    }
    body .my-sm-12px{
        margin-block: 12px!important;
    }
    body .mt-sm-12px{
        margin-top: 12px!important;
    }
    body .mb-sm-12px{
        margin-bottom: 12px!important;
    }
    body .ms-sm-12px{
        margin-left: 12px!important;
    }
    body .me-sm-12px{
        margin-right: 12px!important;
    }

    body .p-sm-20px{
        padding: 20px!important;
    }
    body .px-sm-20px{
        padding-inline: 20px!important;
    }
    body .py-sm-20px{
        padding-block: 20px!important;
    }
    body .pt-sm-20px{
        padding-top: 20px!important;
    }
    body .pb-sm-20px{
        padding-bottom: 20px!important;
    }
    body .ps-sm-20px{
        padding-left: 20px!important;
    }
    body .pe-sm-20px{
        padding-right: 20px!important;
    }
    
    
    body .m-sm-20px{
        margin: 20px!important;
    }
    body .mx-sm-20px{
        margin-inline: 20px!important;
    }
    body .my-sm-20px{
        margin-block: 20px!important;
    }
    body .mt-sm-20px{
        margin-top: 20px!important;
    }
    body .mb-sm-20px{
        margin-bottom: 20px!important;
    }
    body .ms-sm-20px{
        margin-left: 20px!important;
    }
    body .me-sm-20px{
        margin-right: 20px!important;
    }

    body .p-sm-32px{
        padding: 32px!important;
    }
    body .px-sm-32px{
        padding-inline: 32px!important;
    }
    body .py-sm-32px{
        padding-block: 32px!important;
    }
    body .pt-sm-32px{
        padding-top: 32px!important;
    }
    body .pb-sm-32px{
        padding-bottom: 32px!important;
    }
    body .ps-sm-32px{
        padding-left: 32px!important;
    }
    body .pe-sm-32px{
        padding-right: 32px!important;
    }
    
    
    body .m-sm-32px{
        margin: 32px!important;
    }
    body .mx-sm-32px{
        margin-inline: 32px!important;
    }
    body .my-sm-32px{
        margin-block: 32px!important;
    }
    body .mt-sm-32px{
        margin-top: 32px!important;
    }
    body .mb-sm-32px{
        margin-bottom: 32px!important;
    }
    body .ms-sm-32px{
        margin-left: 32px!important;
    }
    body .me-sm-32px{
        margin-right: 32px!important;
    }
}
@media (min-width: 768px) {
    body .p-md-12px{
        padding: 12px!important;
    }
    body .px-md-12px{
        padding-inline: 12px!important;
    }
    body .py-md-12px{
        padding-block: 12px!important;
    }
    body .pt-md-12px{
        padding-top: 12px!important;
    }
    body .pb-md-12px{
        padding-bottom: 12px!important;
    }
    body .ps-md-12px{
        padding-left: 12px!important;
    }
    body .pe-md-12px{
        padding-right: 12px!important;
    }
    
    
    body .m-md-12px{
        margin: 12px!important;
    }
    body .mx-md-12px{
        margin-inline: 12px!important;
    }
    body .my-md-12px{
        margin-block: 12px!important;
    }
    body .mt-md-12px{
        margin-top: 12px!important;
    }
    body .mb-md-12px{
        margin-bottom: 12px!important;
    }
    body .ms-md-12px{
        margin-left: 12px!important;
    }
    body .me-md-12px{
        margin-right: 12px!important;
    }

    body .p-md-20px{
        padding: 20px!important;
    }
    body .px-md-20px{
        padding-inline: 20px!important;
    }
    body .py-md-20px{
        padding-block: 20px!important;
    }
    body .pt-md-20px{
        padding-top: 20px!important;
    }
    body .pb-md-20px{
        padding-bottom: 20px!important;
    }
    body .ps-md-20px{
        padding-left: 20px!important;
    }
    body .pe-md-20px{
        padding-right: 20px!important;
    }
    
    
    body .m-md-20px{
        margin: 20px!important;
    }
    body .mx-md-20px{
        margin-inline: 20px!important;
    }
    body .my-md-20px{
        margin-block: 20px!important;
    }
    body .mt-md-20px{
        margin-top: 20px!important;
    }
    body .mb-md-20px{
        margin-bottom: 20px!important;
    }
    body .ms-md-20px{
        margin-left: 20px!important;
    }
    body .me-md-20px{
        margin-right: 20px!important;
    }

    body .p-md-32px{
        padding: 32px!important;
    }
    body .px-md-32px{
        padding-inline: 32px!important;
    }
    body .py-md-32px{
        padding-block: 32px!important;
    }
    body .pt-md-32px{
        padding-top: 32px!important;
    }
    body .pb-md-32px{
        padding-bottom: 32px!important;
    }
    body .ps-md-32px{
        padding-left: 32px!important;
    }
    body .pe-md-32px{
        padding-right: 32px!important;
    }
    
    
    body .m-md-32px{
        margin: 32px!important;
    }
    body .mx-md-32px{
        margin-inline: 32px!important;
    }
    body .my-md-32px{
        margin-block: 32px!important;
    }
    body .mt-md-32px{
        margin-top: 32px!important;
    }
    body .mb-md-32px{
        margin-bottom: 32px!important;
    }
    body .ms-md-32px{
        margin-left: 32px!important;
    }
    body .me-md-32px{
        margin-right: 32px!important;
    }
}
@media (min-width: 992px) {
    body .p-lg-12px{
        padding: 12px!important;
    }
    body .px-lg-12px{
        padding-inline: 12px!important;
    }
    body .py-lg-12px{
        padding-block: 12px!important;
    }
    body .pt-lg-12px{
        padding-top: 12px!important;
    }
    body .pb-lg-12px{
        padding-bottom: 12px!important;
    }
    body .ps-lg-12px{
        padding-left: 12px!important;
    }
    body .pe-lg-12px{
        padding-right: 12px!important;
    }
    
    
    body .m-lg-12px{
        margin: 12px!important;
    }
    body .mx-lg-12px{
        margin-inline: 12px!important;
    }
    body .my-lg-12px{
        margin-block: 12px!important;
    }
    body .mt-lg-12px{
        margin-top: 12px!important;
    }
    body .mb-lg-12px{
        margin-bottom: 12px!important;
    }
    body .ms-lg-12px{
        margin-left: 12px!important;
    }
    body .me-lg-12px{
        margin-right: 12px!important;
    }

    body .p-lg-20px{
        padding: 20px!important;
    }
    body .px-lg-20px{
        padding-inline: 20px!important;
    }
    body .py-lg-20px{
        padding-block: 20px!important;
    }
    body .pt-lg-20px{
        padding-top: 20px!important;
    }
    body .pb-lg-20px{
        padding-bottom: 20px!important;
    }
    body .ps-lg-20px{
        padding-left: 20px!important;
    }
    body .pe-lg-20px{
        padding-right: 20px!important;
    }
    
    
    body .m-lg-20px{
        margin: 20px!important;
    }
    body .mx-lg-20px{
        margin-inline: 20px!important;
    }
    body .my-lg-20px{
        margin-block: 20px!important;
    }
    body .mt-lg-20px{
        margin-top: 20px!important;
    }
    body .mb-lg-20px{
        margin-bottom: 20px!important;
    }
    body .ms-lg-20px{
        margin-left: 20px!important;
    }
    body .me-lg-20px{
        margin-right: 20px!important;
    }

    body .p-lg-32px{
        padding: 32px!important;
    }
    body .px-lg-32px{
        padding-inline: 32px!important;
    }
    body .py-lg-32px{
        padding-block: 32px!important;
    }
    body .pt-lg-32px{
        padding-top: 32px!important;
    }
    body .pb-lg-32px{
        padding-bottom: 32px!important;
    }
    body .ps-lg-32px{
        padding-left: 32px!important;
    }
    body .pe-lg-32px{
        padding-right: 32px!important;
    }
    
    
    body .m-lg-32px{
        margin: 32px!important;
    }
    body .mx-lg-32px{
        margin-inline: 32px!important;
    }
    body .my-lg-32px{
        margin-block: 32px!important;
    }
    body .mt-lg-32px{
        margin-top: 32px!important;
    }
    body .mb-lg-32px{
        margin-bottom: 32px!important;
    }
    body .ms-lg-32px{
        margin-left: 32px!important;
    }
    body .me-lg-32px{
        margin-right: 32px!important;
    }
}

/* Cursor */
.cursor-point{
    cursor: pointer;
}
.cannot-click{
    pointer-events: none;
    opacity: 0.6;
}

/* Button */
.btn-blue-light{
    color: var(--blue);
    border-color: var(--blue);
    background-color: white;
}
.btn-blue-light:hover{
    color: white!important;
    background-color: var(--blue);
}

/* Gap */
.gap-12px{
    gap: 12px;
}

/* Heading */
@media (min-width: 1200px) {
    .field--type-text-long .h2,.field--type-text-long h2 {
        font-size: 1.5rem;
    }
    .field--type-text-long .h3,.field--type-text-long h3 {
        font-size: 1.25rem;
    }
    .field--type-text-long .h4,.field--type-text-long h4 {
        font-size: 1rem;
    }
}