@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root{
--fs-title: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
--ff-awesome: "Font Awesome 6 Pro";
}
body{
font-family: "Montserrat", sans-serif;
line-height: normal;
}
p:last-of-type{
margin-bottom: 0;
}
.row-inner-full > .col > .col-inner{
height: 100%;
}
.row-slider .flickity-slider > .col{
padding-bottom: 0 !important;
}
.button.is-large{
font-size: 1.125rem;
}
.button.is-outline{
border-width: 1px;
line-height: 2.5em;
}
.button.primary.is-outline{
border-color: var(--fs-color-primary);
}
.button.primary.is-outline:hover{
color: #fff;
}
.button.red{
background-color: #EB0800;
}
.button.blue{
background-color: #007FC6;
}
.button.green{
background-color: #499521;
}
.button span{
line-height: normal;
}
.button .icon-angle-right:before{
content: "\f178";
font-family: var(--ff-awesome);
} .svg-clip-path {
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
}
.wpcf7-form{
margin-bottom: 0;
}
.wpcf7 form .wpcf7-response-output{
margin:  1rem 0 0;
border-width: 1px;
border-radius: 0;
}
.wpcf7 .wpcf7-not-valid-tip{
position: absolute;
margin-top: -1rem;
font-size: 0.75rem;
z-index: 1;
}
.wpcf7-spinner{
display: none;
} .social-icons a{
width: 2rem;
height: 2rem;
min-width: unset !important;
min-height: unset;
display: inline-flex !important;
justify-content: center;
align-items: center;
margin: 0;
padding: 0 !important;
background-color: #000 !important;
border: 0;
line-height: normal;
font-size: 14px;
}
.social-icons a i{
top: unset;
}
.social-icons a.is-outline{
color: #fff;
} .uxb-wrapper--flatsome_swiper .swiper-wrapper,
.uxb-wrapper--category_slider .swiper-wrapper{
flex-wrap: wrap;
gap: 1rem;
}
.uxb-wrapper--flatsome_swiper_slide,
.uxb-wrapper--category_slider .swiper-slide{
width: calc(100% / 3 - 2rem);
}
.header-nav.header-nav-main .menu-item a{
font-size: 1rem;
font-weight: 500;
}
.header-search-lightbox a{
width: 1.25rem;
height: 1.25rem;
background-image: url(//noithatnhatvinh.com/wp-content/themes/flatsome-child/images/wpf_search.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.header-search-lightbox a i{
display: none;
}
.html-language-dropdown {
list-style: none;
}
.language-dropdown {
position: relative;
}
.language-dropdown__toggle {
display: flex;
align-items: center;
gap: 8px;
border: 0;
margin: 0 !important;
background: transparent;
padding: 0;
cursor: pointer;
white-space: nowrap;
}
.language-dropdown__current {
font-size: 1rem;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
}
.language-dropdown__icon {
width: 18px;
height: 18px;
transition: transform .3s ease;
}
.language-dropdown__menu {
position: absolute;
top: calc(100% + 12px);
left: 0;
min-width: 120px;
margin: 0;
padding: 12px 0;
list-style: none;
background: #fff;
box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .3s ease;
z-index: 999;
}
.language-dropdown:hover .language-dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-dropdown:hover .language-dropdown__icon {
transform: rotate(180deg);
}
.language-dropdown__item{
margin-bottom: 0;
}
.language-dropdown__item a {
display: block;
padding: 0.5rem 1rem;
font-size: 16px;
text-transform: uppercase;
white-space: nowrap;
color: #000;
}
.language-dropdown__item.active a {
color: var(--fs-color-primary);
}
.language-dropdown__item a:hover {
opacity: .7;
} .swiper-button-next.square,
.swiper-button-prev.square{
width: 30px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background: #f7f7f7;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
color: #707070;
top: 50%;
transform: translateY(-50%);
margin: 0;
border-radius: 5px;
transition: 0.3s;
outline: none;
}
.swiper-button-next.square:after,
.swiper-button-prev.square:after{
font-size: 20px;
color: #333;
} .banner-page{
height: clamp(15rem, 13rem + 10vw, 25rem);
background-color: transparent;
}
.banner-page .bg-fill{
background-position: center bottom;
}
.banner-page .text-box{
padding-left: 15px;
padding-right: 15px;
}
.banner-page .title-banner-page{
margin: 0;
font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
font-weight: 700;
line-height: normal;
text-transform: uppercase;
text-align: center;
}
.rank-math-breadcrumb p{
margin-top: 0.25rem;
text-align: center;
}
.box .box-text{
padding: 0.75rem 0 0;
font-size: 1rem;
}
.box .box-text h3{
margin: 0 0 0.5rem;
font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
font-weight: 400;
} .main-title h2{
margin-bottom: 1.5rem;
font-size: var(--fs-title);
}
.text-title h3{
margin-bottom: 0.25rem;
}
.text-title h2{
position: relative;
margin-bottom: 0;
font-size: var(--fs-title);
}
.text-title h2 + *{
margin-top: 0.5rem;
}
.swiper .swiper-slide{
height: auto;
}
.main-slide-next,
.main-slide-prev{
--swiper-navigation-color: #fff;
} .banner-category .text-box-content h3{
margin: 0;
font-size: 1.25rem;
}
.banner-category .banner-layers.container{
max-width: unset !important;
}
.banner-category .text-box{
padding: 1rem;
} .box-category-post .box-image{
display: block;
border-radius: 1rem 1rem 0 1rem;
overflow: hidden;
}
.box-category-post .image-cover{
padding-top: 75%;
}
.box-category-post .view-more{
width: 55px;
height: 55px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
position: absolute;
z-index: 2;
right: -1px;
bottom: -1px;
border-top-left-radius: 20px;
} .box-category-post .view-more:before{
content: "";
position: absolute;
width: 40px;
height: 30px;
left: -40px;
bottom: 0;
z-index: -1;
border-radius: 0 0 20px 0;
box-shadow: 20px 0 0 0 #fff;
pointer-events: none;
} .box-category-post .view-more:after{
content: "";
position: absolute;
width: 30px;
height: 40px;
top: -40px;
right: 0;
z-index: -1;
border-radius: 0 0 20px 0;
box-shadow: 0 20px 0 0 #fff;
pointer-events: none;
}
.box-category-post .view-more .icon{
width: 2.5rem;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--fs-color-primary);
border-radius: 50%;
color: #fff;
}
.box-category-post .box-content{
position: absolute;
left: 0;
bottom: 0;
right: 0;
padding: 1rem;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
border-radius: 0 0 1rem 1rem;
}
.box-category-post .box-content .title,
.box-category-post .box-content .title a{
margin-bottom: 0;
color: #fff;
font-size: 1rem;
}
.wrapper-btn-category{
.swiper-pagination{
position: unset;
margin: unset;
width: auto;
}
.swiper-button-prev,
.swiper-button-next{
position: unset;
margin: unset;
width: 3rem;
height: 2rem;
border: 1px solid #000;
border-radius: 50rem;
transition: all .3s ease;
}
.swiper-button-prev:after,
.swiper-button-next:after{
font-family: var(--ff-awesome);
font-size: 1rem;
color: #000;
transition: all .3s ease;
}
.swiper-button-prev:after{
content: "\f060";
}
.swiper-button-next:after{
content: "\f061";
}
}
.box-video{
width: 100%;
border-radius: 1rem;
}
.h-100{
height: 100%;
}
.wrapper-achievement > .col-inner{
display: flex;
align-items: center;
padding: 2rem;
background: linear-gradient(120deg, #fff6f0, #c0783d);
border-radius: 1rem;
} .box-blog-post .box-image{
border-radius: 0.75rem;
}
.box-blog-post .post-title{
font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
font-weight: 500;
}
.box-blog-post .is-divider{
display: none;
}
.box-blog-post .from_the_blog_excerpt{
font-size: 0.875rem;
}
.box-blog-post.box-vertical .box-image{
border-radius: 0.5rem 0 0 0.5rem;
}
.box-blog-post.box-vertical .box-text{
border-radius: 0 0.5rem 0.5rem 0;
background-color: #4C7952;
color: #fff;
}
.box-blog-post.box-vertical .box-text .post-title{
color: inherit;
}
.row-home-project > .col.post-item:nth-child(2),
.row-home-project > .col.post-item:nth-child(3){
flex-basis: calc(100% / 3 * 2) !important;
max-width: calc(100% / 3 * 2) !important;
}
.row-home-project .box-blog-post{
height: 100%;
padding: 1rem;
border-radius: 1rem;
background-color: #f5f5f5;
}
.row-home-project .box-blog-post .box-image .image-cover{
padding-top: 300px !important;
} .tab-home-product .nav{
width: auto;
border: 1px solid #ccc;
padding: 0.25rem;
border-radius: 50rem;
}
.tab-home-product .nav li a{
font-size: 1rem;
}
.tab-home-product .tab-panels{
padding-top: 30px;
} .box-video .box-image{
border-radius: 1rem;
}
.box-video .box-text{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.partner-slide{
--f-carousel-gap: 0px;
--f-carousel-slide-width: 20%;
--f-carousel-slide-padding
}
.partner-slide img{
object-fit: contain;
} .box-blog .box-thumbnail{
position: relative;
border-radius: 0.75rem;
overflow: hidden;
}
.box-blog .box-thumbnail .inner-thumbnail{
padding-top: 56.5%;
}
.box-blog .box-date{
position: absolute;
left: 0;
bottom: 0;
background-color: var(--fs-color-primary);
padding: 0.25rem 0.5rem;
border-radius: 0 0.75rem;
font-size: 0.875rem;
color: #fff;
}
.box-blog .box-content{
margin-top: 0.75rem;
font-size: 0.875rem;
}
.box-blog .box-content .title,
.box-blog .box-content .title a{
font-size: 1rem;
font-weight: 500;
} #footer > .section .section-content{
position: unset !important;
}
.box-map-footer{
border-radius: 0.75rem;
overflow: hidden;
height: 250px;
}
.box-map-footer iframe{
width: 100%;
height: 100%;
}
.row-footer:after{
content: none;
}
.col-footer h3{
margin-bottom: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
font-size: 1.125rem;
}
.col-footer p{
margin-bottom: 0.75rem;
}
.list-label-user ul li{
display: inline-block;
padding: 0.25rem 1rem;
background-color: var(--primary-color);
border-radius: 50rem;
}
.list-infor-footer ul{
margin-bottom: 0;
}
.list-infor-footer ul li{
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-left: 0;
}
.col-footer .ux-menu .ux-menu-link + .ux-menu-link{
margin-top: 0.5rem !important;
}
.col-footer .ux-menu .ux-menu-link__link{
flex: unset;
min-height: unset;
padding: 0;
transition: all .3s ease-in-out;
color: #fff;
}
.col-footer .ux-menu .ux-menu-link__link:hover{
transform: translateX(0.5rem);
color: var(--cl-y) !important;
}
.follow-icons-footer{
display: flex;
gap: 0.5rem;
}
.follow-icons-footer a{
margin: 0 !important;
padding: 0.25rem;
width: 2.25rem;
height: 2.25rem;
min-width: unset;
min-height: unset;
display: flex;
justify-content: center;
align-items: center;
border: 0 !important;
background: linear-gradient(90deg, #1e1e1e 0%, #000000 100%);
color: #fff !important;
font-size: 1rem;
}
.follow-icons-footer a i{
top: 0;
line-height: normal;
font-size: 1rem;
}
.icon-envelop:before{
content: "\f0e0";
font-family: var(--ff-awesome);
} .form-footer input{
height: unset;
padding: 0.75rem 1rem;
border: 0;
border-radius: 0.5rem;
box-shadow: none !important;
font-size: 0.875rem;
}
.form-footer input::placeholder{
color: #909090;
}
.form-footer input[type=submit]{
margin: 0;
padding: 0 1rem;
}
.required-note{
margin-bottom: 0.5rem;
font-size: 0.75rem;
}
.absolute-footer{
display: none;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: #000;
}
.back-to-top{
width: 2.75rem;
height: 2.75rem;
display: flex !important;
justify-content: center;
align-items: center;
font-size: 1.25rem;
font-weight: 700;
} .box-map{
height: 100%;
}
.box-map iframe{
width: 100%;
height: 100%;
}
.form-contact .form-control{
height: unset;
padding: 0.75rem 1rem;
background-color: rgba(255, 255, 255, 0.4);
border: 1px solid #D9D9D9;
border-radius: 0.5rem;
box-shadow: none !important;
color: #000;
}
.form-contact .form-control::placeholder{
color: rgba(0, 0, 0, 0.5);
}
.form-contact textarea.form-control{
height: 6rem;
}
.form-contact input[type=submit]{
border-radius: 0.375rem;
} .review-slide .swiper-slide{
width: 40%;
filter: contrast(0.5);
transition: all .3s ease;
}
.review-slide .swiper-slide-active{
filter: contrast(1);
}
.video-button-wrapper a{
width: clamp(2.5rem, 2.3rem + 1vw, 3.5rem);
height: clamp(2.5rem, 2.3rem + 1vw, 3.5rem);
min-width: unset !important;
min-height: unset;
display: inline-flex !important;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
background-color: rgba(255, 255, 255, 0.4) !important;
border: 0 !important;
line-height: normal;
}
.video-button-wrapper a:hover{
background-color: var(--fs-color-primary) !important;
}
.video-button-wrapper a i{
top: unset !important;
font-size: 1.25rem !important;
line-height: normal;
} .button-contact-fixed{
position: fixed;
bottom: 8%;
left: 0.25rem;
z-index: 30;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.box-ring {
width: clamp(4rem, 3.8rem + 1vw, 5rem);
height: clamp(4rem, 3.8rem + 1vw, 5rem);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: visibility .5s;
position: relative;
}
.box-ring-outline {
position: absolute;
width: clamp(4rem, 3.8rem + 1vw, 5rem);
height: clamp(4rem, 3.8rem + 1vw, 5rem);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 0 0;
border: 2px solid rgba(30, 30, 30, 0.5);
background-color: transparent;
border-radius: 50%;
opacity: .5;
transition: all .5s;
animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
}
.box-ring-inline {
position: absolute;
left: 50%;
top: 50%;
width: clamp(3rem, 2.8rem + 1vw, 4rem);
height: clamp(3rem, 2.8rem + 1vw, 4rem);
transform: translate(-50%, -50%);
transform-origin: 0 0;
border: 2px solid transparent;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
transition: all .5s;
animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
}
.box-ring-image{
width: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);
height: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);
padding: 6px;
border: 2px solid transparent;
border-radius: 50%;
background-color: #000;
opacity: 1;
animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
}
.box-ring-image img{
width: 100%;
height: 100%;
object-fit: contain;
}
.box-ring-label{
position: absolute;
right: 2rem;
height: 2.25rem;
z-index: -1;
padding: 0.25rem 3rem 0.25rem 1rem;
border-radius: 50rem;
white-space: nowrap;
color: #fff;
display: flex;
align-items: center;
}
@keyframes coccoc-alo-circle-anim {
0%{transform:rotate(0) scale(.5) skew(1deg) translate(-50%,-50%);opacity:.1}
30%{transform:rotate(0) scale(.7) skew(1deg) translate(-50%,-50%);opacity:.5}
100%{transform:rotate(0) scale(1) skew(1deg) translate(-50%,-50%);opacity:.1}
}
@keyframes coccoc-alo-circle-fill-anim {
0%{transform:rotate(0) scale(.7) skew(1deg) translate(-50%,-50%)}
50%{transform:rotate(0) scale(1) skew(1deg) translate(-50%,-50%)}
100%{transform:rotate(0) scale(.7) skew(1deg) translate(-50%,-50%)}
}
@keyframes coccoc-alo-circle-img-anim {
0%{transform:rotate(0) scale(1) skew(1deg)}
10%{transform:rotate(-25deg) scale(1) skew(1deg)}
20%{transform:rotate(25deg) scale(1) skew(1deg)}
30%{transform:rotate(-25deg) scale(1) skew(1deg)}
40%{transform:rotate(25deg) scale(1) skew(1deg)}
50%{transform:rotate(0) scale(1) skew(1deg)}
100%{transform:rotate(0) scale(1) skew(1deg)}
} .blog-wrapper{
padding-top: 50px;
}
.post-interior .box-thumbnail{
overflow: hidden;
border-radius: 0.75rem;
}
.post-interior .inner-thumbnail{
padding-top: 56.5%;
}
.post-interior .box-content{
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.75rem;
}
.post-interior .box-content-left{
flex: 1;
}
.post-interior .box-content-right{
width: 32%;
border-left: 1px solid #BCBCBC;
padding-left: 1rem;
color: #9B9B9B;
}
.post-interior .box-content-right strong{
color: #535353;
}
.post-interior .box-content .title{
margin-bottom: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--fs-color-primary);
transition: all .3s ease;
} .gallery-main{
height: 500px;
margin-bottom: 10px;
border-radius: 0.5rem;
}
.gallery-main img{
width:100%;
height: 100%;
object-fit: cover;
}
.gallery-thumb{
height: 90px;
}
.gallery-thumb img{
width: 100%;
height: 100%;
object-fit: cover;
cursor:pointer;
}
.gallery-thumb .swiper-slide{
opacity: .8;
transition: all .3s ease;
border-radius: 0.5rem;
overflow: hidden;
}
.gallery-thumb .swiper-slide-thumb-active{
opacity:1;
}
.project-share{
margin-bottom: 1rem;
}
.project-share .social-icons{
margin-left: 0.5rem;
}
.project-content{
position: relative;
max-height: 400px;
overflow: hidden;
transition: all .3s ease;
}
.project-content:not(.is-open):after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3rem;
background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.project-content.is-open{
max-height:none;
}
.project-sidebar{
position:sticky;
top: 100px;
padding: 20px;
border-radius: 0.5rem;
background-color: #f2f4f7;
}
.project-sidebar .form-group input,
.project-sidebar .form-group select,
.project-sidebar .form-group textarea{
border-radius: 0.5rem;
box-shadow: none !important;
transition: all .3s ease;
}
.project-sidebar input[type=submit]{
width: 100%;
margin: 0;
border-radius: 0.5rem;
}
.project-sidebar .form-note{
margin-bottom: 0.5rem;
font-size: 0.75rem;
} .project-related{
margin-top:50px;
}
.project-card img{
width:100%;
}
.project-card h3{
margin-top:10px;
font-size:16px;
} .contact-simple{
}
.contact-simple input
.contact-simple select
.contact-simple textarea{
} .nav-child-category{
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-bottom: 1.5rem;
list-style: none;
}
.nav-child-category li{
margin-bottom: 0;
}
.nav-child-category li a{
display: inline-block;
padding: 0.5rem 1rem;
border: 1px solid #ccc;
border-radius: 0.375rem;
transition: all .3s ease;
}
.nav-child-category li.active a,
.nav-child-category li:hover a{
border-color: var(--fs-color-primary);
color: var(--fs-color-primary);
} .woocommerce-ordering,
.woocommerce-ordering select{
margin: 0;
} .wrapper-dropdown-filter{
position: relative;
display: inline-block;
}
.dropdown-filter-button{
display: flex;
align-items: center;
gap: 8px;
}
.dropdown-filter-content{
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 1100px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,.1);
padding: 2rem;
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .3s ease;
}
.wrapper-dropdown-filter.active .dropdown-filter-content{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.yith-wcan-filters{
margin-bottom: 0;
}
.yith-wcan-filters .filters-container form{
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 0;
}
.yith-wcan-filters .filters-container form .yith-wcan-filter{
width: calc(100% / 3);
margin-bottom: 0;
}
.yith-wcan-filters .filters-container form .yith-wcan-filter[data-taxonomy="product_brand"]{
width: 100%;
}
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item{
line-height: 1.5;
font-size: 0.875rem;
}
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item label{
font-size: 0.875rem;
} .category-page-row > .col{
padding-bottom: 0;
}
.products.row{
}
.product-small.box{
padding: 0.5rem;
background-color: #f8f9fa;
border-radius: 0.75rem;
}
.product-small .badge-container{
margin-top: 0;
left: 0.5rem;
top: 0.5rem;
}
.product-small .badge-container .badge{
width: unset;
height: unset;
}
.product-small .badge-container .badge .badge-inner{
padding: 0.25rem 0.5rem;
line-height: normal;
font-size: 0.75rem;
border-radius: 0.5rem 0;
}
.product-small.box .box-image{
border-radius: 0.5rem;
}
.product-small.box .box-text{
padding: 0.5rem 0.5rem 0;
}
.product-small.box .box-text .product-title{
font-weight: 600;
margin-bottom: 0.5rem;
}
.product-small.box .price-wrapper .price{
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 0.5rem;
}
.product-small.box .price-wrapper .price .contact-price{
font-weight: 700;
color: #F20000;
}
.product-small.box .image-tools .cart-icon{
left: unset;
right: 0.5rem;
bottom: 0.5rem;
min-width: 2.25rem;
height: 2.25rem;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: var(--fs-color-primary);
background-image: url(//noithatnhatvinh.com/wp-content/themes/flatsome-child/images/cart.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 80%;
border: 2px solid #fff;
border-radius: 0.5rem;
font-size: 8px;
transform: translateX(calc(100% + 1rem));
transition: 0.3s all ease;
}
.product-small.box .image-tools .cart-icon strong{
display: none; } .product-small:hover .image-tools .cart-icon{
transform: translateX(0);
}
.custom-wishlist-icon {
position: absolute;
top: -2.5rem;
left: 0.5rem;
z-index: 9;
}
.wishlist-btn{
display: inline-flex !important;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
background-color: #fff;
border-radius: 50%;
border: 2px solid var(--fs-color-primary);
}
.wishlist-btn i{
font-size: 1rem;
color: var(--fs-color-primary);
transition: all 0.3s ease;
}
.wishlist-btn.active{
background-color: var(--fs-color-primary);
}
.wishlist-btn.active i {
color: #fff;
} .banner-product .img-inner{
border-radius: 0.5rem;
}
.recently-viewed-wrapper {
position: relative;
}
.recentViewedSwiper .swiper-slide {
height: auto; 
}
.recent-view-card {
display: flex;
align-items: center;
background-color: #f7f7f7; 
border-radius: 8px; 
padding: 8px;
text-decoration: none;
transition: all 0.3s ease;
height: 100%;
box-sizing: border-box;
}
.recent-view-card:hover {
background-color: #ededed;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.recent-view-img {
width: 80px;
min-width: 80px;
border-radius: 6px;
overflow: hidden;
margin-right: 12px;
}
.recent-view-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
aspect-ratio: 1/1;
} .recent-view-info {
flex-grow: 1;
}
.recent-product-title {
font-size: 0.9em;
font-weight: 600;
color: #333;
margin-bottom: 5px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical;
overflow: hidden;
}
.recent-product-price {
font-size: 0.9em;
font-weight: bold;
color: #b0573e; 
}
.recent-product-price del {
font-size: 0.8em;
color: #999;
font-weight: normal;
margin-left: 5px;
} .product-main{
padding-bottom: 0;
}
.custom-product-meta-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 0.75rem;
color: #777; 
font-size: 0.875rem;
}
.custom-product-meta-row .meta-item {
display: inline-block;
}
.custom-product-meta-row .meta-value {
color: var(--fs-color-primary);
font-weight: 500;
}
.product-info .price{
font-weight: 700;
font-size: 1.5rem;
color: var(--fs-color-primary);
}
.product-info .product-short-description{
margin-bottom: 1rem;
}
.product-info form.cart{
margin-top: 1.5rem;
margin-bottom: 0;
gap: 0.5rem;
}
.product-info form.cart button{
flex: 1;
height: 60px;
}
.custom-wrapper-quantity{
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem !important;
}
.custom-wrapper-quantity .custom-quantity-label{
color: #333333;
}
.custom-wrapper-quantity .ux-quantity.quantity{
gap: 0.5rem;
}
.custom-wrapper-quantity .ux-quantity.quantity .ux-quantity__button{
width: 38px;
height: 38px;
border: 1px solid #dee2e6 !important;
border-radius: 0.5rem !important;
transition: all 0.3s ease;
color: var(--fs-color-primary);
}
.custom-wrapper-quantity .ux-quantity.quantity input[type=number]{
order: 1;
max-width: unset;
width: 60px;
height: 38px;
border-radius: 0.5rem !important;
border: 1px solid #dee2e6 !important;
box-shadow: none;
}
form.cart {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.custom-call-btn-wrapper {
width: 100%;
margin-top: 12px;
margin-bottom: 20px;
}
.custom-call-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
background-color: #007bff !important;
padding: 0.5rem 1rem !important;
border-radius: 8px !important;
color: #ffffff !important;
}
.call-btn-title {
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
display: block;
}
.call-btn-sub {
font-size: 13px;
font-weight: normal;
opacity: 0.9;
display: block;
text-transform: none;
} .custom-coupon-section {
position: relative;
margin: 1rem 0;
padding: 1rem 0;
border-top: 1px solid #ddd;
} .coupon-header {
display: flex;
align-items: center;
gap: 1rem;
cursor: pointer;
}
.coupon-title {
color: #333;
font-weight: 600;
font-size: 0.875rem;
}
.coupon-tags {
display: flex;
gap: 5px;
} .c-tag {
background-color: #553319;
color: #fff;
padding: 6px 12px;
font-size: 14px;
border-radius: 3px;
position: relative;
box-shadow: 0 0 0 1px #553319;
}
.c-tag:before{
content: "";
width: 6px;
height: calc(100% - 5px);
position: absolute;
top: 3px;
left: -4px;
background-image: radial-gradient(#f8f9fa 2px, transparent 0);
background-size: 6px 6px;
background-position-x: -6px;
}
.c-tag:after{
content: "";
width: 6px;
height: calc(100% - 5px);
position: absolute;
top: 3px;
right: -4px;
background-image: radial-gradient(#f8f9fa 2px, transparent 0);
background-size: 6px 6px;
background-position-x: -6px;
} .coupon-details-box {
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
border: 1px solid var(--fs-color-primary);
border-radius: 8px;
padding: 15px;
z-index: 999;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
margin-top: 10px;
} .coupon-details-box::before {
content: "";
position: absolute;
top: -6px;
left: 20px;
width: 10px;
height: 10px;
background: #fffcf8;
border-left: 1px solid  var(--fs-color-primary);
border-top: 1px solid var(--fs-color-primary);
transform: rotate(45deg);
} .custom-coupon-section:hover .coupon-details-box {
opacity: 1;
visibility: visible;
} .freeship-text {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
font-size: 0.875rem;
color: var(--fs-color-primary);
}
.coupon-list {
list-style: none;
padding: 0;
margin: 0;
}
.coupon-list li {
display: flex;
align-items: center;
margin-left: 0 !important;
margin-bottom: 10px;
font-size: 0.875rem;
}
.c-icon {
border: 1px solid var(--fs-color-primary);
color: var(--fs-color-primary);
padding: 1px 5px;
border-radius: 4px;
font-size: 12px;
margin-right: 8px;
}
.c-text {
flex: 1;
}
.c-text strong {
color: var(--fs-color-primary);
}
.c-copy {
background: var(--fs-color-primary);
color: #fff;
padding: 3px 6px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.c-copy:hover {
background: #6d452d;
}
.coupon-note {
margin-top: 10px;
margin-bottom: 0;
font-size: 0.875rem;
} .custom-gift-box {
padding: 1rem 1.25rem;
background: linear-gradient(90deg, #faf3ec 0%, #f1eae4 105.65%);
border: 1px solid #8c5b3e;
border-radius: 0.5rem;
}
.gift-title {
margin: 0 0 5px 0;
color: #b35900;
font-size: 18px;
font-weight: bold;
}
.gift-desc {
margin-bottom: 36px !important;
font-size: 0.875rem;
color: #444;
} .gift-progress-container {
position: relative;
height: 8px;
background: #fcdfb8;
border-radius: 4px;
margin: 0 10px 32px 0;
}
.gift-progress-bar{
height: 100%
}
.gift-progress-fill {
height: 100%;
background: linear-gradient(90deg, #f8cb81 0%, #ff7808 105.65%);
border-radius: 4px;
transition: width 0.5s ease-in-out;
}
.gift-node { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.node-label { position: absolute; top: -20px; font-size: 12px; font-weight: bold; color: #b35900; white-space: nowrap; }
.node-icon { width: 24px; height: 24px; background: #fff; border: 2px solid #b35900; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.checked-icon { color: #15803d; }
.gift-icon { font-size: 14px; color: #8c5b3e; }
.gift-btn {
display: inline-block;
padding: 8px 20px;
border: 2px solid #8c5b3e;
border-radius: 6px;
color: #8c5b3e;
font-weight: bold;
font-size: 14px;
text-decoration: none;
transition: 0.3s;
}
.gift-btn:hover { background: #8c5b3e; color: #fff; } #modal-chon-qua { max-width: 500px; margin: 0 auto; background: #fff; padding: 25px; border-radius: 8px; }
.modal-gift-title { font-size: 16px; font-weight: bold; color: #333; margin-top: 0; margin-bottom: 10px; }
.tier-group-title { background: #f0f0f0; padding: 5px 10px; font-size: 12px; font-weight: bold; border-radius: 4px; margin: 15px 0 10px 0; color: #555; }
.gift-option-item { display: flex; align-items: center; padding: 10px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 10px; transition: 0.2s; }
.gift-img img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; margin-right: 15px; border: 1px solid #eee; }
.gift-name { flex: 1; font-size: 13px; font-weight: bold; color: #8c5b3e; }
.gift-check-circle { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #ccc; margin-left: 10px; position: relative; } .gift-option-item.unlocked { cursor: pointer; }
.gift-option-item.unlocked:hover { border-color: #8c5b3e; }
.gift-option-item.selected { border: 1px solid #8c5b3e; background: #fdfaf7; }
.gift-option-item.selected .gift-check-circle { background: #22c55e; border-color: #22c55e; }
.gift-option-item.selected .gift-check-circle::after { content: "✔"; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; }
.gift-option-item.locked { opacity: 0.5; cursor: not-allowed; background: #f9f9f9; }
.locked-text { display: block; font-size: 11px; color: #999; font-weight: normal; margin-top: 3px; }
.product-tabs li a{
font-size: 1.125rem;
} .product-news__item{
display:flex;
gap:15px;
text-decoration:none;
}
.product-news__thumb{
width:120px;
flex:0 0 120px;
}
.product-news__thumb img{
width:100%;
height:80px;
object-fit:cover;
border-radius:8px;
}
.product-news__content{
flex:1;
}
.product-news__name{
margin:0 0 8px;
font-size: 16px;
}
.product-news__date{
font-size: 14px;
opacity:.7;
}
.term-description {
max-height: 150px;
overflow: hidden;
transition: max-height .3s ease;
position: relative;
}
.term-description.is-expanded {
max-height: 2000px;
}
.term-description:not(.is-expanded):after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3rem;
background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.term-readmore-wrap {
text-align: center;
margin-top: 15px;
}