/* mod-virtuemart-manufaturer */
.brands div{
    box-sizing: border-box;
    padding: 10px;
}
.brands a{
    position: relative;
    display: block;
    text-align: center;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(76,76,76,0.15);
    border-radius: 7px;
    color: #288ad6;
    transition: all 0.35s ease;
} 
.brands a:hover, .brands a:focus{color: #288ad6;}
.brands a:hover{box-shadow: 0 3px 1px #f53d2d;/* -webkit-transform:perspective(201px) rotateX(41deg); */}
.brands a span{line-height: 40px;}
.brands a span::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 5px solid #288ad6;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
.brands .show span::after {
    border-top: 0px solid transparent;
    border-bottom: 5px solid #288ad6;
}
.brands .hidden{display: none;}
.brands .show{display: block;}
.brands img{height: 40px;display: block;margin: 0 auto;}
/* end mod-virtuemart-manufaturer */

/* brand details */
.brand-details .brand-name{
    margin: 20px 0;
}
.brand-details .brand-desc p{
    margin-bottom: 18px;
    text-align: justify;
}

/* home-product */
.h1-homepage{display: none;}
.home-product{
    border-radius: 16px;
}
.home-product__header a{
    margin: 16px 0 0 0;
    color:var(--color-primary);
}
.home-product__header a:after{
    content: '';
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    width: 6px;
    height: 6px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 1px 2px 5px;
    transform: rotate(45deg);
}
.home-product__header .name-box{
    margin: 16px 0 0 0;
    font-size: clamp(20px, 2.5vw + 0.5rem, 3rem);
    color: var(--color-primary);
    font-family: 'SFU Eurostile Extended';
    text-align: center;
    text-transform: uppercase;
}
.home-product__header img{
    width: 100%; 
    height: auto;
    pointer-events: none;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
}
.category-tab{margin:0 1rem;overflow-x: auto;}
@media (max-width: 767px){
    .category-tab{margin:0;}
    /* .category-tab::-webkit-scrollbar{height: 0;} */

}
/* .category-tab::-webkit-scrollbar {background: none;height: 8px;border-radius: 8px;}
.category-tab::-webkit-scrollbar-button {width: 0;}
.category-tab::-webkit-scrollbar-thumb {background-color: rgba(28,28,30,.32);border-radius: 8px;}
.category-tab::-webkit-scrollbar-thumb:hover {background: rgba(28,28,30,.5); width: 8px;} */

.category-tab li{ 
    padding: 0px 16px;
    height: 32px;
    -webkit-box-align: center;
    border-radius: 16px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: var(--bg-block);
    flex-shrink: 0;
    margin-bottom: 8px;
}
.category-tab li.active{
    color: var(--white);
    background-color: var(--color-link);
    font-weight: 600;
    pointer-events: none;
}


/* mod-virtuemart-product */
.product-box{
    --gap: 0px;
    --gap_sum: var(--gap);
    --column_width: calc(100% / var(--cols)); 
    --number_of_repeat: auto-fit;
    
    /* display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(var(--number_of_repeat), minmax(calc(var(--column_width) - var(--gap_sum)), 1fr));
    padding: 1rem 0;
    margin: 0 .5rem;
    grid-template-rows: auto;
    grid-auto-rows: minmax(min-content, max-content);
    grid-auto-flow: column;
    
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; */ 
    display: flex;
    padding: 1rem 0 5rem 0 !important;
    overflow-x: auto;
}
.product-box.is-mobile{
    overflow-x: auto;
    overflow-y: hidden;
}
/* .product-box li{
    flex:0 0 max(calc(100% / var(--cols)), 150px);
} */

/* @media (max-width: 991.98px){
    .product-box{
        overflow-x: scroll;
        overflow-y: hidden;
    }
} */
@media (min-width: 576px) {
    .product-box{--cols: 3;}
}
@media (min-width: 992px){
    .product-box{--cols:4;}
}
@media (min-width: 1200px){
    .product-box{--cols:5}
}
@media (max-width: 575.98px){
    .product-box{--cols: 2;}
}

/* .product-box{
    --gap: 0;
    --number_of_repeat: 2;
    --gap_sum:  calc(var(--gap) * var(--cols));
    padding: 0;
    grid-template-columns: unset;
} */

/* .product-box li{
    padding: 1rem 0;
    margin: 1rem .5rem;
} */
#products-related .product-box li{
    flex: 0 0 max(calc(100% / var(--cols) - 16px), 250px);
}
.product-box li a{
	position: relative;
    display: block;
    color: var(--color-primary);
    background: var(--white);
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
    /* min-height: 320px; */
    box-shadow: 0 2px 8px rgba(76,76,76,0.15);
    transition: all 0.35s ease;
    padding: 0;
    margin: 0 .5rem;
    text-align: center;
}
.product-box li > a:hover {box-shadow: 0 4px 12px rgba(76,76,76,0.2);}
.product-box li h3{
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0;
    max-height: 40px; 
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    font-stretch: normal;
    overflow: hidden;
    /*font-family: SFU Eurostile Extended;*/
}
.product-box .product-discount{
    background: url('../images/bg-product-discount.svg') no-repeat 0 0 / 100%;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: auto;
    color: #fff;
    font-size: 11px;
    text-align: center;
    font-weight: 600;
}
.product-box .product-price{
    color: #e10531;
    font-size: 14px;
    font-weight: 500;
    text-wrap: nowrap;
}
.product-box .product-price span {
    color: rgb(155, 155, 155);
    font-size: 12px;
    text-decoration: line-through;
    margin-left: 10px;
}


@media (min-width: 768px){
    /* .product-box li{width: 33vw;} */
    /* .product-box .product-image{height: 150px; line-height: 150px;} */
    .product-box li h3{font-size: 1rem;height: 35px;}
    .product-box .product-price{text-wrap: unset;}
    .product-box .product-price span{display: block;margin: 0;}
}

/* .product-box .product-image {
    height: 0;
    position: relative;
    padding-bottom: 66.67%;
} */
.product-box .product-image > img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
}
.product-box .product-image-list{display: none;}
@media (min-width: 1024px){
    .product-box .product-image-list{
        position: absolute;
        bottom: 0;
        left: 50%;
        max-width: calc(100% - 3rem);
        padding: .75rem .7rem;
        display: inline-flex;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        visibility: visible;
        transform: translate3d(-50%,20px,0);
        transition: all .3s;
        z-index: 2;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        background: linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1)),hsla(0,0%,100%,.4);
        border-radius: 8px;
    }
    .product-box .product-image:hover .product-image-list{
        opacity: 1;
        pointer-events: visible;
        visibility: visible;
        transform: translate3d(-50%,0,0);
    }
    .product-box .product-image-list div{ 
        border: 1px solid var(--light-gray);
        width: 50px;
        display: inline-flex;
        box-sizing: border-box;
        margin-right: 6px;
        border-radius: 6px;
        padding: 3px;
        background: var(--white);
        overflow: hidden;
    }
    .product-box .product-image-list .active{
        border: 1px solid var(--gray);
    }
}
/* loading box product */
.product-image .animated-background {height: 180px;}
h3 .animated-background{height: 20px;margin-bottom: 10px;}
.product-price .animated-background{height: 20px;width: 90%;margin: auto;}
.product-brand .animated-background{height: 20px; width: 30%;margin: 10px auto;}

/* tuỳ chỉnh swiper-button */
.product-swiper-container .swiper-button-next::after, 
.product-swiper-container .swiper-button-prev::after {
    content: none !important; /* Bắt buộc */
}

/* 2. Style lại nút bấm cho đẹp (Tùy chỉnh) */
.product-swiper-container .swiper-button-next, 
.product-swiper-container .swiper-button-prev {
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px;
    color: #333;
    top: calc(50% - 40px);
    transition: all 0.3s ease;

}

/* 3. Chỉnh kích thước icon SVG bên trong */
.product-swiper-container .swiper-button-next svg, 
.product-swiper-container .swiper-button-prev svg {
    width: 32px;
    height: 32px;
}

/* 4. Hiệu ứng Hover */
.product-swiper-container .swiper-button-next:hover, 
.product-swiper-container .swiper-button-prev:hover {
    transform: scale(1.1);
    background-color: var(--color-primary); 
    color: #fff; 
}
/* End Mod Vituemart Product  */

/* Category truck1 */
/*.category-product h1{
	padding: 10px 0;
	color: #333;
	text-align:center;
	position:relative;
	font:700 30px/1.6 Montserrat;
	text-transform: uppercase;
}
.category-product h1::before, 
.category-product h1::after{
	content: ".";
	color: #e10531;
}
.category-product .category-description{
	margin-left:-683px;
	padding: 0;
	font-weight:600;
	color:#fff;
	width:1366px;
	left: 50%;
	position: relative;
}
.category-product ul li{
    float: left;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
}
.category-product ul li a{
    display: block;
    overflow: hidden;
    color: #333;
}
.category-product li a > img{
    width: 320px;
    height: 240px;
    display: block;
    transform: scale(1,1);
    -webkit-transition: transform 300ms ease-out 0ms;
    -moz-transition: transform 300ms ease-out 0ms;
    -o-transition: transform 300ms ease-out 0ms;
    transition: transform 300ms ease-out 0ms;
}
.category-product li a:hover > img{
    -moz-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.1,1.2);
    transform: scale(1.2,1.2);
}
.category-product li a .img-logo-hover{
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: rgba(235,28,35,0.8);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
    filter: alpha(opacity=0);
}
.category-product li a .img-logo-hover img{
    top: 50%;
    left: 50%;
    opacity: 0;
    position: absolute;
    width: 160px;
    height: 100px;
    margin: 0 auto;
    margin-top: -50px;
    margin-left: -80px;
    display: inline-block;
   -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.category-product li a:hover .img-logo-hover{
    opacity: 1;
}
.category-product li a:hover .img-logo-hover img{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
        -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    opacity: 1;
}
.category-product li a h2{
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    position: absolute;
    content: '';
    bottom:calc(50% - 20px);
    left: 15%;
    right: 15%;
    background: rgba(235,28,35,0.8);
    padding: 5px 10px;
    border-radius: 30px;
    color: #fff;
}
.category-product li a:hover h2{
    opacity: 0;
}*/
/* end category truck1 */

/* categories */

/*.categories h1::before{
    position: absolute;
    content: "";
    background: #e32124;
    height: 1px;
    width: 50px;
    left: calc(50% - 25px);
    bottom: 0;
}
.categories h1::after{
    background: #fff;
    border: 1px solid #e32124;
    border-radius: 100%;
    content: "";
    display: block;
    height: 4px;
    width: 4px;
    left: calc(50% - 2px);
    position: absolute;
    bottom: -3px;
    z-index: 1;
}*/
/* categories end  */

/* category-search */
.category-search h1{
    font-size: 14px;
    font-weight: normal;
    margin: 1rem 0;
}
/* end category-search */

/* Category default */
.category h2{text-align: center;margin-bottom: 20px;}
.category .item{
    flex: 0 0 max(calc(100% / var(--cols) - 16px), 150px);
}
.category .item a{
    display: block;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    color: var(--color-primary);
    box-shadow: 0 0 1px 0 rgb(18 32 73 / 8%), 0 8px 32px 0 rgb(55 92 192 / 8%);
    transition: all 0.35s ease;
}
.category .item a:hover{
    /* box-shadow: 0 3px 1px var(--color-link); */
    background: linear-gradient(-180deg,#f53d2d,#f63);
    transition: all 0.35s ease;
}
.category h3{font-size: 15px;font-weight: bold;}
.category a:hover h3 {
    color: #fff;
}
.category .item img{
    width: 110px;
    height: auto;
    transition: transform .5s;
    transform: scale(1);
}
.category a:hover img {
    transform: scale(0.8);
    transition: transform .35s;
    border: 8px solid var(--yellow);
    border-radius: 50%;
    padding: 8px;
    box-sizing: border-box;
    background: #fff;
    position: relative;
}
/* End Category default */

/* categogy child */
.category-child h1{
    margin: 0 auto;
    padding: 20px 0;
    color: #333;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    line-height: 1;
}
.category-child h1::before, .category-child h1::after {
    content: ".";
    color: #e10531;
}
.category-child > span{
    text-align: center;
    display: block;
}
.category-child-item > h2{
    border-bottom: 2px solid #e10531;
    margin: 10px 0;
}
.category-child-item h2 a .title{
    color: #333;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: 20px;
}
.category-child-item h2 a .xemtatca{
    position: relative;
    float: right;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    margin-top: 10px;
    padding-right: 10px;
    letter-spacing: -1px;
}
.category-child-item h2 a .xemtatca::after{
    border-color: transparent #333;
    border-style: solid;
    border-width: 4px 0 4px 5px;
    content: "";
    position: absolute;
    right: 0;
    top: 38%;
}
.category-child-item > h3 a{ color: #333;font-size: 16px;}
/* end category child */


/* use grid */
.product-content-item{position: relative;}
.listproduct{
    /* display: grid;
    grid-auto-rows: minmax(min-content, max-content);
    grid-template-columns: repeat(var(--cols),minmax(0, 1fr));
    grid-gap: 20px;
    grid-auto-flow: dense; */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
/* use flexbox */
.listproduct > li{
    position: relative;
    display: block;
    box-sizing: border-box;
    /* border: 1px solid rgba(0, 0, 0, 0.1); */
    border-radius: 1rem;
    background: #fff;
    /*text-align: center;
    max-height: 440px;
    box-shadow: 0px 3px 45px 0px rgba(43,43,43,0.12); */
    overflow: hidden;
    padding: 15px 15px;
    flex: 0 0 max(calc(100% / var(--cols) - 16px), 350px);
    transition: .2s;
}

/* .listproduct > li:hover{
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
} */
.listproduct > li a{display: block;}

/*.product-item:nth-child(even) > .flex {
     flex-direction: row-reverse;
}
.product-item:nth-child(even) > .flex .content{
    background: linear-gradient(97deg, rgba(4, 25, 84, 1) 10%, rgba(23, 137, 255, 1) 80%);
    
} */
.product-item .content{
    background: linear-gradient(97deg, rgba(23, 137, 255, 1) 10%, rgba(4, 25, 84, 1) 80%);
    padding: 5rem 2rem;
    box-sizing: border-box;
    border-radius: 1rem;
    color: #fff;
}
.product-item.foton .content{
    background: linear-gradient(358deg, rgba(23, 137, 255, 1) 10%, rgb(4 25 84 / 0%) 80%);
    color: var(--color-primary);
    padding: 1rem 1.5rem;
}
.discount-percent {
    position: absolute;
    top: 0px;
    left: 10px;
    font-size: 11px;
    line-height: 25px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    width: 40px;
    height: 36px;
    text-align: center;
    background: url(../images/icon-discount.png) 0% 0% / cover no-repeat;
    z-index: 1;
}
/*.product li:hover .btn_dutoanchiphi{
    background: #e10531;
    color: #fff;
}
.product li:hover .btn_bangtinhtragop{
    background: #0070c9;
    color: #fff;
}
.product li > div{
    position: relative;
    display: block;
    color: rgb(102, 102, 102);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 380px;
    max-height: 400px;
    background: #fff;
    box-shadow: 0px 3px 45px 0px rgba(43,43,43,0.12);
}
.product li > div:hover{box-shadow: 0 3px 8px rgba(0,0,0,.2);}
.product li a{
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    display: block;
    text-align: center;
    min-height: 380px;
    max-height: 440px;
    background: #fff;
    box-shadow: 0px 3px 45px 0px rgba(43,43,43,0.12);
    overflow: hidden;
}
.product li a:hover{box-shadow: 0 3px 8px rgba(0,0,0,.2);}
.discount-percent {
    position: absolute;
    top: 0px;
    left: 10px;
}
.discount-percent span {
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 12px;
    position: relative;
    background: #e10531;
    width: 36px;
    height: 32px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}
.discount-percent span::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 10px solid #e10531;
}*/
.listproduct li h2, .listproduct li h3{
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary)
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-stretch: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 10px 0;
}
/* .listproduct li h2 a, .listproduct li h3 a{color:#333;} */
.listproduct li .product-image{
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 10px;
}
.listproduct .product-image img{transition: .3s;vertical-align: middle;}
.listproduct li:hover .product-image img{transform: translateY(-5px);}
/*.listproduct li .product-price{
    font-weight: 600;
    position: relative;
    padding-top: 5px;
    margin: 0 -15px;
    border-top: 1px dashed #ddd;
}

.listproduct li .product-price::before,
.listproduct li .product-price::after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    top: -5px;
    left: -5px;
    background: #ddd;
    border-radius: 50%;
}
.listproduct li .product-price::before{
    left: calc(100% - 5px);
} */
.listproduct .product-price{
    font-size: 1.5rem;
    font-family: "Exo 2", sans-serif;
}
.listproduct .product-price span {
    color: rgb(155, 155, 155);
    font-size: 12px;
    text-decoration: line-through;
    margin: 0 10px;
}
@media (max-width: 767px){
    .listproduct > li{flex-grow: 1;}
    .listproduct .product-price span{
        display: block;
    }
    .product-item .content{padding: 2rem;}
}
.showproductmore{
    position: relative;
    padding: 5px 10px;
    text-align: center;
    border-radius: 25px;
    cursor: pointer;
    width: 200px;
    margin: 10px auto;
    background: linear-gradient(-243deg, #e10531 0%, #FF2E55 100%);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
    display: block;
}
.showproductmore:hover{
    background: linear-gradient(-243deg, #FF2E55 0%, #e10531 100%);
    -webkit-box-shadow: 0 6px 12px -4px #FF2E55;
    box-shadow: 0 6px 12px -4px #FF2E55;
}
.product-khuyenmai{
	text-align: initial;
}
.product-khuyenmai > p{
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0;
}
.product-khuyenmai ul{
    list-style-type: disc;
    margin-left: 1rem;
}
.product-button{
    position: relative;
    overflow: hidden;
    width: max-content;
    padding: 0.125rem;
    display: flex;
    border-radius: .5rem;
    margin: 1rem auto;
    color: #fff;
}
.product-button::before {
    content: "";
    background: conic-gradient(transparent 270deg, currentColor, transparent);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    width: 100%;
    animation: rotate 3s linear infinite;
}
.product-button::after {
    --offset: 2px;
    content: "";
    background: inherit;
    border-radius: inherit;
    position: absolute;
    inset: var(--offset);
    height: calc(100% - 2 * var(--offset));
    width: calc(100% - 2 * var(--offset));
}
.product-button a{
    /* -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    position: relative;
    z-index: 2;
    width: max-content;
    cursor: pointer;
    display: flex; */

    background: var(--color-primary);
    color: var(--white);
    padding: .5rem 2rem;
    border-radius: .5rem;
    cursor: pointer;
    width: 100%;
    position: relative;
    z-index: 10;
}
.product-button a:hover{
    background: #0f6fd6;
}
.product-button a:hover .icon svg{
    transform: rotate(45deg);
    transition: .35s all;
}
.product-button .icon{margin-left: .5rem;}
/* .product-button a::before{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    content: '';
    pointer-events: none;
    background: radial-gradient(49.07% 758.46% at 50.75% 50%,#ececec 0%,#4e4e4e 52.08%,#e0e0e0 100%);
    z-index: -1;
} */
/* .product-khuyenmai ul li{
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
} */
/* .product-khuyenmai ul li::marker{
    content: "✔️ ";
    font-size: 16px;
} */
.product_s_desc{
	text-align: initial;
	overflow-y: scroll;
	max-height: 100px;
}
.product_s_desc p{padding: 0;}
.product_s_desc td{
    border: none;
    padding: 0.25rem 0;
}
.product_s_desc td:first-child{
    color: var(--gray-dark);
}

.category-desc{
    border: 1px solid var(--light);
    background: var(--bg-block);
    margin: 10px 0;
    padding: 32px;
    border-radius: 16px;
}
.category-desc p{margin: 16px 0;line-height: 28px;}
.category-desc ul li, .category-desc ol li{line-height: 1.6;margin: 16px 0;}

.category-desc h2{margin-top: 32px;letter-spacing: -1px;}
/* scrollbar css */
 .product_s_desc::-webkit-scrollbar{
	width: 1px;
}
.product_s_desc::-webkit-scrollbar-track {
    background-color: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
} 
.product_s_desc::-webkit-scrollbar-thumb {
    background-color: #0070c9;
    border-radius: 0px;
    -webkit-border-radius: 0px; 
} 
.product_s_desc::-webkit-scrollbar-button {
	height: 10px;
} 
.product_s_desc::-webkit-scrollbar-corner {}
/*.btnbuy{
	display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.btn_dutoanchiphi,
.btn_bangtinhtragop{
	display: inline-block;
    text-align: center;
    overflow: hidden;
    padding: 5px;
    margin: 5px;
    cursor: pointer;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 3px;
    background: #fff;
    transition: all .3s ease;
    box-sizing: border-box;
}
.btn_dutoanchiphi{
	border: 1px solid #e10531;
	color:#e10531 ;
}
.btn_bangtinhtragop{
	border: 1px solid #0070c9;
	color: #0070c9;
}*/
/* Rating */
.data-rating > li{
    display: inline-block;
    padding: 0 2px;
    cursor: pointer;
    color: #ddd;
    font-size: 25px;
    vertical-align: middle;
}
.data-rating > span, .data-rating .msg{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 2px;
}
.data-rating .note-star{
    display: inline-block;
    margin-left: 10px;
    position: relative;
    background: #52b858;
    color: #fff;
    padding: 2px 8px;
    box-sizing: border-box;
    font-size: 12px;
    border-radius: 2px;
}
.data-rating .note-star::after{
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(82,184,88,0);
    border-right-color: #52b858;
    border-width: 6px;
    margin-top: -6px;
}
.product-rating li{display: inline-block;}
.product-rating span{font-size: 13px;}
.product-rating a{color: #0070c9;}
/* End Rating */



/* Product Default */
.product-name{
	border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    width: 100%;
    column-gap: 10px;
}
.product-name h1{
	font-size: 20px;
	font-weight: 800;
    line-height: 1.2;
}
.product-name > div{font-size: 14px;color: var(--gray);}
.product-name > div a{color:#333;font-weight: 500;}

.product-social .share-fb{
    background: #1877f2;
    color: #1877f2;
    font-size: 12px;
    padding: 3px 6px;
    display: inline-flex;
    align-items: center;
    column-gap: 3px;
    border-radius: 3px;
}
.product-social .share-fb span{color:#fff}
.product-social .ic-facebook{fill:var(--white)}

#product-banner {
    display: block;
    overflow: hidden;
    height: 0;
    position: relative;
    width: 100%;
    padding-bottom: 600px;
}

#product-banner :is(img,picture,video){
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle; */

    /* background-image: url(images/foton-images/Ve-Foton-VN.webp);
    background-size: cover;
    background-origin: content-box;
    background-attachment: scroll;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 1; */
}

.content-wrap{
    position: absolute;
    top: 100px;
    left: 50px;
    bottom: 50px;
    width: 300px;
    padding: 4rem;
    max-width: 100%;
    background: linear-gradient(32deg, rgba(4, 25, 84, 1) 10%, rgba(23, 137, 255, 1) 80%);
    border-radius: 1rem;
}
.content-wrap h1{
    font-family: "Exo 2", sans-serif;
    font-weight: bold;
}
.content-wrap .product-price{
    font-family: "Exo 2", sans-serif;
    font-size: clamp(22px, 4vw + 1rem, 32px);
    font-weight: bold;
    color: #fff;
}
.content-wrap .product-button,
.content-wrap .product-button a{
    border-radius: 3rem;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.product-details{margin-bottom: 2rem;}
.product-details .container{
    background: var(--white);
    padding: 1rem;
    border-radius: 1rem;
}
.product-detail-image{
	padding: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.product-fields .product-field{border-right: 1px solid #ddd;flex: 1;}
.product-fields .product-field:last-child{border: 0;}
.product-fields .product-field-display{font-weight: 600;}

.product-detail-info{
	width: 100%;
}
.product-detail-info .product-price{font-size: 20px;}
.product-detail-info .product-price .price-sales{color: var(--color-second);font-weight: 700;}
.product-detail-info .product-price p:not(.price-sales){
    color: #999;
    font-size: 14px;
    font-weight: 400;
}
.product-detail-info .price-percent{
    background: rgb(245, 245, 250);
    padding: 0 4px;
    border-radius: 8px;
} 
.product-detail-info .product-price .price-old{text-decoration: line-through;}

.product-detail-promo{
	border-radius: 1rem;
    padding: 1rem;
    position: relative;
    background: linear-gradient(220.55deg, #FFF500 0%, #FFB800 100%);
}
.product-detail-promo .corner {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 58px;
    height: 58px;
    background-color: var(--white);
}
.product-detail-promo .ic-match-corner{
    color:#ffee00;
    width: 58px;
    height: 58px;        
}
.product-detail-promo .gift{
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    top: 0;
    right: 0;
    border-radius: .75rem;
    background: linear-gradient(220.55deg, #FFF500 0%, #FFB800 100%);
}
.product-detail-promo .title{
    font-weight: 600;
}
.product-detail-promo .ic-gift{
    width: 24px;
    height: 24px;
    animation: 1s pulse infinite;
    -webkit-animation: 1s pulse infinite;
}

.product-detail-promo .field{
	padding: .5rem 0 0 1rem;
	font-size: 14px;
}
.product-detail-promo .field > p{
    padding:0 0 0 1rem;
    position: relative;
    line-height: 25px;
}
.product-detail-promo .field > p::before{
	content: "";
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #3fb846;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.product-short-desc{
	background: linear-gradient(179deg, rgb(23 137 255 / 26%) 10%, rgba(255, 255, 255, 1) 80%);
	border-radius: 16px;
	padding: 15px;
	font-size: 14px;
	position: relative;
}

.product-short-desc span{
	font-weight: 700;
	display: block;
	margin-bottom: 5px;
}
.product-short-desc p{ padding: 0 0 .5rem 1rem;position: relative;line-height: 1.3; }
.product-short-desc p::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: calc(.5rem - 2px);
    left: 0;
    width: 4px;
    height: 4px;
    background: var(--color-second);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.product-short-desc table{
    width: 100%;
}
.product-short-desc table td{
    border: none;
    border-bottom: 1px solid rgb(23 137 255 / 21%);
}
.product-short-desc table tr:last-child td{
    border-bottom: none;
}
.product-short-desc table td:last-child{
    text-align: right;
}


.product-detail-order{margin:0 -7px 15px;}
.product-detail-order li{
	width: 50%;
	float: left;
	padding: 0 7px;
	box-sizing: border-box;
}
.product-detail-order li.end{
    width: 100%;
    padding-top: 14px;
}
.product-detail-order li a{
	display: block;
    padding: 10px;
    text-align: center;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    color: #fff;
    background: #e10531;
}
.product-detail-order li a.tragop{background: #0070c9;}
.product-detail-order li a.dutoanchiphi{background: #3fb846;}

.product-detail-order li strong{text-transform: uppercase;display: block;font-size: 16px;}
.product-detail-order li span{font-size: 10px;display: block;}

/* services */
.services{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    row-gap: 10px;
    margin-bottom: 20px;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 1rem;
}
.services h3{
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding: 0 10px;
    line-height: 18px;
}
.services .item{
    display: flex;
    align-items: center;
    column-gap: 15px;
    font-size: 12px;
    width: 100%;
}
.services .item span{line-height: 1.5}

/* .show-more::before{
    position: absolute;
    width: 100%;
    height: 120px;
    content: linear-gradient(to bottom,rgba(255 255 255/0),rgba(255 255 255/62.5),rgba(255 255 255/1));
    display: block;
    bottom: 15px;
    left: 0;
} */
.hide-more{display: none;}
.show-more-tskt > span,
.show-more > span, 
.hide-more > span{
    display: block;
    overflow: hidden;
    position: relative;
    font-size: 14px;
    color:#0070c9;
    margin: 10px auto;
    cursor: pointer;
    padding: 5px 5px 5px 10px;
    border-radius: 4px;
    text-align: center;
    width: 100px;
    background-color: #ebf1fd;
}
.show-more > span:hover, .hide-more > span:hover{
    background-color: #0070c9;
    color: #fff;
}
.show-more > span::after{
	content: '';
    width: 0;
    right: 0;
    border-top: 6px solid #0070c9;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0 0 5px;
}
.show-more > span:hover::after{
    border-top: 6px solid #fff;
}
.hide-more > span::after{
	content: '';
    width: 0;
    right: 0;
    border-bottom: 6px solid #0070c9;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0 0 5px;
}
.hide-more > span:hover::after{border-bottom: 6px solid #fff;}
.show-more-tskt > span{width: 100%;}
.product-details .content p {margin: 8px 0;}

/* support hotline product default */
.support{
    border-top: 1px solid #ddd;
    padding: 1rem 0;
}

.support-items a:not(.support-hotline){
    overflow: hidden;
}
.support-items a:not(.support-hotline) svg{
    border-radius: 50%;
    color: #fff;
    fill: #fff;
    width: 32px;
    height: 32px;
    padding: 4px;
    box-sizing: border-box;
}
.support-items svg.ic-facebook{
    padding: 0 !important;
}
.support-items svg.ic-zalo{
    background: #005fff;
}
.support-items svg.ic-mail{
    background: #005fff;
}
.support-hotline{
    position: relative;
    padding: 0.5rem 1rem;
    background: var(--color-second);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 2rem;
}

.support-hotline:hover{
    color: var(--color-primary);
    box-shadow: 0 5px 10px 5px rgb(40 138 214 / 25%);
}
 /* end support */

/*
#tskt.show{
    background: #fff;
    width: 600px;
    height: calc(100vh - 4rem);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 6;
    border-radius: 1.5rem;
}
#tskt.show .tskt-content{
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 10rem);
}
#tskt.show ~ .box-overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    cursor: pointer;
    visibility: visible;
    display: block;
    background: #000;
    top: 0;
    left: 0;
    z-index: 5;
}
#tskt .closebtn.show{
    position: absolute;
    right: 1rem;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 9999;
}
#tskt .closebtn.show::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    height: 2px;
    background: #333;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#tskt .closebtn.show::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    height: 2px;
    background: #333;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#tskt.show .h2title{
    text-align: center;
    margin: .5rem 0;
}
#tskt.show .h2title::after{
    width: 100%;
    opacity: .2;
}
*/

.product-content .h2title{
    padding: 0px;
    margin: 2rem 0;
    text-transform: uppercase;
    text-align: center;
    font-family: SFU Eurostile Extended;
    font-weight: 600;
    font-size: clamp(22px, 3vw + 1rem, 32px);
    line-height: normal;
    background-image: linear-gradient(39deg, rgba(4, 25, 84, 1) 10%, rgba(23, 137, 255, 1) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.product-content h2{
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.875rem;
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
    border-left: 4px solid #0ea5e9;
    padding-left: 1rem;
}
.product-content :is(h3,h4,h5,h6){
    margin: 1rem 0;
}

.product-content p{
    margin-bottom: 1.25rem;
    line-height: 1.8;
}
.product-content ul {
    list-style-type: disc;
    margin-left: 2rem;
}
.product-content li{
    margin-bottom: 0.75rem;
    line-height: 1.6;
}
.product-content li::marker {
    color: var(--color-second);
}

/* new */
/* .tskt-content .spec-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem;
    border-bottom: 1px solid #eee;
}
.tskt-content .spec-table {
    margin-bottom: 24px;
}

.tskt-content .spec-row:nth-child(even) {
    background: #eee;
} */
.spec-content table{
    width: 100%;
    font-size: 14px;
}
.spec-content thead tr{
    background-color: #2c529e; color: #ffffff;
}
.spec-content thead th{
    padding: 10px;text-align: center;text-transform: uppercase;border: 1px solid #ddd;
}
.spec-content td[colspan="3"]{
    background-color: #e9e9e9; 
    font-weight: bold;
}
.spec-content td{
    padding: .5rem; 
    border: 1px solid #ddd;
}
.spec-content td:nth-child(2),
.spec-content td:nth-child(3){
    text-align: center;
}


table#giaxelanbanh{
    width: 100%;
}
#giaxelanbanh tr td:last-child{
    text-align: right;
}
/* tab content */
/*.tabs-content .tab-content {
    animation: fadeInUp 1.5s;
}

.tabs-title::-webkit-scrollbar{
    display: none;
}
.tabs-title{
    margin: 1rem 0 2rem 0;
    position: relative;
    overflow: auto;
     -webkit-overflow-scrolling: touch;

    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    border-radius: 3rem;
    padding: .5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 5px;
    box-sizing: border-box;
    width: calc(100% - 1rem); 
}
@media (max-width: 768px) {
    .tabs-title{
        position: sticky;
        top: 60px;
        background: var(--white);
        
    }
}
.tabs-title::before {
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
    background-image: linear-gradient(90deg, rgba(185, 190, 219, 0) 0%, #636675 49.82%, rgba(185, 190, 219, 0) 100%);
    content: '';
    height: 1px;
}
.tabs-title .tab-title{
    padding: .5rem;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.tabs-title .tab-title::before {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 0;
    position: absolute;
    content: '';
    background: var(--color-second);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.tabs-title .tab-title.active{
    color: var(--color-second);
    font-weight: 600;
}
.tabs-title .tab-title:hover::before,
.tabs-title .tab-title.active::before{
    width: 100%;
}*/

.box-content .text-block{
    padding: 0 1.5rem 1.5rem;
}
/* Kieu slide */
.box-content .slide{
    border-radius: 1rem;
    overflow: hidden;
    background: var(--light);
}
.box-content .img-slide{border-radius: 1rem;}

/* .main-swiper-slide .swiper-button-next,
.main-swiper-slide .swiper-button-prev{
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #333;
    top: calc(50% - 40px);
    transition: all 0.3s ease;
}
.main-swiper-slide .swiper-button-next svg, 
.main-swiper-slide .swiper-button-prev svg {
    width: 32px;
    height: 32px;
}
.main-swiper-slide .swiper-button-next::after, 
.main-swiper-slide .swiper-button-prev::after {
    content: none !important; 
} */

.swiper-navigation .slide-button{
    --arrow-color: var(--color-primary);
    display: flex;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: #e8eeff;
    transition: .2s;
    padding: 0;
    margin-bottom: 1rem;
}
.swiper-navigation .slide-button:hover {
    color: var(--color-second);
     --arrow-color: var(--white);
}
.swiper-navigation .slide-button:disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .5;
}

/* Kieu list */
.box-content .list-item{
    border-radius: 1rem;
    overflow: hidden;
    background: var(--light);
}
.box-content .list-item img{border-radius: 1rem;}

/* Kiểu Pagination tab hybird slide */
.main-swiper-tab .swiper-pagination{
    position: relative !important;
    display: flex;
    flex-wrap: nowrap !important; 
    gap: 0;
    /* justify-content: flex-start; */
    z-index: 10;
    /* Cho phép cuộn ngang */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Cuộn mượt trên iOS */
    scrollbar-width: none; /* Ẩn scrollbar trên Firefox */
    inset: 0 !important;
    scroll-behavior: smooth;

    margin: 1rem auto;
    padding: 0;
    border-radius: 3rem;
    border: none;
    color: rgb(51, 51, 51);
    font-weight: bold;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px;
    transition: 0.3s;
    box-sizing: border-box;
    width: calc(100% - 1rem) !important;
}
@media (min-width: 1024px){
    .main-swiper-tab .swiper-pagination{
        width: max-content !important;
    }
}
/* Ẩn thanh cuộn trên Chrome/Safari */
.swiper-pagination .swiper-pagination::-webkit-scrollbar{
    display: none;
}

/* Kiểu dáng Tab */
.main-swiper-tab .swiper-pagination .swiper-pagination-bullet {
    flex-shrink: 0;
    width: auto !important;
    height: auto !important;
    padding: .7rem 1.5rem;
    border-radius: 2rem;
    background: none;
    color: #555;
    font-size: 13px;
    white-space: nowrap;
    border: none;
    opacity: 1;
    margin: 0 !important;
}
.main-swiper-tab .swiper-pagination .swiper-pagination-bullet:hover {
    background: var(--light);
}
.main-swiper-tab .swiper-pagination .swiper-pagination-bullet-active,
.main-swiper-tab .swiper-pagination .swiper-pagination-bullet-active:hover{
    background: var(--color-second);
    color: #fff;
}

/* Mobile (dưới 768px) */
@media (max-width: 768px) {
    .swiper-hybrid-container {
        margin: 0 -1rem;
    }
    .main-swiper-tab .swiper-pagination{
        width: 100% !important;
        padding: .5rem;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--light);
    }
}

/* tab prices */
#prices blockquote {
    border-left: 3px solid var(--color-second);
    border-radius: 1rem;
}
/* End Product Default */

/* product related */
#products-related > h3,
#products-recent > h3{
    font-size: 24px;
    margin: 1rem 0;
}
#products-related li.slick-slide,
#products-recent li.slick-slide{
    margin: .5rem;
    position: relative;
    display: block;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    text-align: center;
    max-height: 440px;
    background: #fff;
    overflow: hidden;
    padding: 15px 15px;
    flex: 0 0 max(calc(100% / var(--cols) - 16px), 150px);
    transition: .2s;
}
/* VMmenu */
.VMmenu li{padding: 0 10px;}
.VMmenu li a{
	border-top: 1px dashed #ddd;
	display: block;
	padding: 5px 0;
	color: #333;
	font-weight: 600;
}
.VMmenu li:first-child a{border:none;}
.VMmenu li a:hover, .VMmenu li a:active{
	color: #ff6a00;
}
.VMmenu li ul{display: none;}
.VMmenu li.VmOpen ul{display: block;}
.VMmenu li ul li{
	background: url('../images/icon-products.png') no-repeat scroll left center;
} 
.VMmenu li ul li:hover,
.VMmenu li ul li.VmActive{
	background: url('../images/icon-products-hover.png') no-repeat scroll left center;
}
.VMmenu li ul li.VmActive a{color:#ff6a00; }
.VMmenu li ul li a{
	border: none;
	padding: 2px 10px;
	font-weight: 500;
}
/* end VMmenu*/
/* mod virtuemart cart */
.show_cartlist{
  display: block;
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  padding: 0 1rem;
}
/* .icon_shopping_cart {
  fill: #111;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: #111;
  stroke: #111;
}
.icon_shopping_cart.style1 {
  fill: #fff;
  stroke: #fff;
} */
.cartlist{
  position: fixed;
  width: 480px;
  height: 100vh;
  right: 0;
  top: 0;
  background: #fff;
  z-index: 10;
  overflow: hidden;
  -ms-transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  padding: 1rem;
  box-sizing: border-box;
}
.cartlist.active {
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.cart_page_title{text-transform: uppercase;}
.cartlist > span{font-size: 12px;}
.count_products{
  position: absolute;
  right: 8px;
  top: -10px;
  background: #fc210d;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  padding: 1px;
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
  line-height: 20px;
}
.imagecart > img{
    float: left;
    margin-right: 20px;
    border-radius: 7px;
    overflow: hidden;
}
.vm_cart_products{
  border-top: 1px dotted #ddd;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 15px;
  max-height: 50%;
  overflow-y: scroll; 
}
.vm_cart_products .container{
  float: left;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  position: relative;
  border-bottom: 1px solid #eee;
}
.vm_cart_products .container a{color: #333;}
.vm-customfield-mod > span, .vm-customfield-cart > span{
  margin-right: 10px;
  padding: 2px 5px;
  font-size: 11px;
  border-radius: 3px;
  background: #eee;
}
/* .vm-customfield-mod span.product-field-type-E, 
.vm-customfield-cart span.product-field-type-E{background: none;padding: 0;margin: 0;} */
.vm-customfield-mod span span, .vm-customfield-cart span span{
  border-radius: 3px;
  background: #eee;
  margin-right: 10px;
  padding: 2px 5px;
}

#close_cartlist{
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  float: right;
  z-index: 2;
  cursor: pointer;
}
#close_cartlist i{
  position: absolute;
  display: block;
  height: 2px;
  background: #333;
  width: 30px;
  left: 10px;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
}
#close_cartlist i:nth-child(1) {
  top: 25px;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
#close_cartlist i:nth-child(2) {
    top: 25px;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.product_thumb{position: relative;float: left;}
.empty_cart{
  display: block;
  background: url(../images/empty_cart.png) no-repeat center center / 196px 96px;
  width: 100%;
  height: 96px;
  margin: 50px auto;
}
.show_cart{
  clear: both;
}
.show_cart a{
  margin: 20px 0px;
  padding: .5rem 1rem;
  white-space: nowrap;
  color: #fff;
  text-align: center;
  background: var(--color-link);
  display: inline-block;
  border-radius: .5rem;
  flex: 1 0 min(50%, 100px);
  box-sizing: border-box;
}
.show_cart a.checkout{background: #e10531;}
.show_cart a.checkout1{width: 100%;}

/* end mod virtuemart cart */ 

/* addtoCart */
.group-button button{flex:1 0 min(50%, 100px);}
.btn-addtocart{
    position: relative;
    background: rgba(245, 61, 45,.08);
    color: var(--color-link);
    border: 1px solid var(--color-link);
}
.btn-addtocart:hover{background: rgba(245, 61, 45,.2);}
.btn-buynow{
    position: relative;
    padding: 0 3rem;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ff7022),to(#ff3838));
    background-image: linear-gradient(180deg,#ff7022,#ff3838);
}
.btn-loading {
    pointer-events: none;
    cursor: default;
}
.btn-loading .title,
.btn-loading .ic-add_shopping_cart {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")";
    filter: alpha(opacity=0);
}
.btn-buynow.btn-loading span{opacity: 0;}
.quantity_box_title{font-size: 13px;margin-right: 1rem;}

.remove-product-cart{
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    color: var(--dark);
}
/* [class^="proopc-icon-"], [ class*=" proopc-icon-"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url(../images/glyphicons-halflings.png);
    background-repeat: no-repeat;
    background-position: -456px 0;
} */
input.quantity-input{
    width: 40px;
    height: 32px;
    text-align: center;
    background: #fff;
    border-radius: 0;
    border: none !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    pointer-events: none;
    -moz-appearance: textfield;
}
input.quantity-input::-webkit-inner-spin-button,
input.quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-controls.quantity-minus{
    float: left;
    border: 1px solid #ddd;
    background: #fff;
    width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;
}
.quantity-controls.quantity-minus::before{
    content: '';
    width: 12px;
    height: 2px;
    display: block;
    margin: 15px auto;
    background-color: var(--gray);
}
.quantity-controls.quantity-plus{
    border: 1px solid #ddd;
    background-color: #fff;
    width: 30px;
    height: 30px;
    position: relative;
    cursor: pointer;
    float:left;
}
.quantity-controls.quantity-minus:hover,
.quantity-controls.quantity-plus:hover{
    background-color:rgb(236, 236, 236);
}
.quantity-controls.quantity-plus::before{
    content: '';
    width: 12px;
    height: 2px;
    background: var(--gray);
    display: block;
    margin: 15px auto;
}
.quantity-controls.quantity-plus::after{
    content: '';
    width: 2px;
    height: 12px;
    background-color: var(--gray);
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
}




/*------------------------------------------------ mobile -----------------------------------------------*/
@media screen and (max-width:767px){
}
/*--------------------------------------------------- table -------------------------------------------*/
/* @media screen and (min-width: 641px) and (max-width: 992px){ */
@media screen and (max-width: 991px){
}

/* min-width:768px */
@media (min-width: 768px) {
}
@media (min-width: 1200px) {
}