/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.product-quick-view-container .flickity-page-dots{
	display:none
}
.single-product .col-sppp .price{
	display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    gap: 5px;
	align-items:end
}
.single-product .col-sppp ins span.amount {
	font-size:23px
}
.section_info_detail .section-title-project {
    text-align: center;
    display: block;
    margin-bottom: 25px;
}
.section_info_detail {
    position: relative;
    margin: 60px 0px;
    padding: 60px 0px 0px !important;
}
.section_info_detail .section-title-project h2 {
    color: var(--fs-color-secondary);
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    z-index: 2;
    position: relative;
}
.section-title-project .sub_title {
    font-size: 14px;
    color: var(--textColor);
    position: relative;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    padding: 6px 15px 3px;
    gap: 15px;
    align-items: center;
    text-transform: uppercase;
    background-color: #fff;
    border-radius: 40px;
    margin-bottom: 5px;
}
.text-dv{

    padding: 15px;
    margin-bottom: 20px;
    border: 3px solid #fff;
    transition: 0.3s all;
}
.text-dv h3{
	font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
    color: #fff;
    display: block;
}
.cart .single_add_to_cart_button, .cart .ux-buy-now-button{
	font-size:16px;
	text-transform:capitalize
}
.text-dv p{
	    margin-top: 6px;
    line-height: 1.4;
    font-weight: 500;
    color: #fff;
	font-size:14px;
	margin-bottom:0
}
.section_about_2 {
	    position: relative;
    margin-bottom: 60px;
    background-color: #fff;
}
.padding0 .col{
	padding-bottom:0
}
.section_about_2 .box_row_1 .box_about_2{
	    left: -70px;
    z-index: 5;
    background-color: #fff;
    color: #000;
    position: relative;
    padding: 20px 30px;
    margin: 40px 0;
}
.section_about_2 .content_about{
	    font-size: 14px;
    font-weight: 400;
}
.section_about_2 .title_about{
	font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    z-index: 2;
    position: relative;
}
.section_about_2 .box_row_2{
	margin-bottom: 60px;
}
.section_about_2 .box_row_2 .box_about_2{
	    right: -70px;
    z-index: 5;
    background-color: var(--primary-color);
    color: #fff;
    text-align: right;
    position: relative;
    padding: 20px 30px;
    margin: 40px 0;
}
.section_about_2 .box_row_2 .title_about{
	color:white
}
.section_about_2 .box_row_1{
	margin-bottom:60px;
}
.section_about_2 .content_about p {
    margin-bottom: 5px;
}
@media (max-width: 1025px) {
    .section_info_detail {
        margin: 40px 0px !important;
        padding: 40px 0px 0px !important;
    }
	.section-title-project h2 {
        font-size: 30px;
        line-height: 48px;
    }

}
@media(min-width:767px){
	.section_about_2 .box_row_2 .title_about{
		
	align-items: center;
	}
	.section_about_2 .row {
        align-items: center;
    }
	
}
@media(max-width:767px){
	.section-title-project h2 {
        font-size: 20px;
        line-height: 36px;
    }
	.wrap-choise .col-left .col-inner{
		        margin: 0 -7px;
        padding: 0 7px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        display: flex;
        -ms-overflow-style: none;
        scrollbar-width: none;
	}
	.wrap-choise .col-left .col-inner .text-dv{
		flex: 0 0 75%;
        max-width: 75%;
        min-width: 75%;
        padding: 7px;
        margin-bottom: 12px;
        display: block;
        margin-right: 14px;
	}
}
@media (max-width: 992px) {
	.text-dv h3{
		font-size:16px;
		        margin-bottom: 0px;
	}
   .section_about_2 .box_row_1 .box_about_2 {
        left: 0;
        margin: 0;
        padding: 20px 15px;
    }
	   .section_about_2 .box_row_2,.section_about_2 .box_row_1 {
        margin-bottom: 40px;
    }
	  .section_about_2 .box_row_2 .box_about_2 {
        right: 0;
        margin: 0;
        text-align: left;
        padding: 20px 15px;
    }
}
.chungtoi{
	position: relative;
    margin-bottom: 80px;
    display: block;
}

.col-baner-vechungtoi .col-inner{
	    position: relative;
    margin-left: 50px !important;
    margin-right: 20px !important;
    z-index: 2;
	width:unset;
	min-height:unset
}
.col-baner-vechungtoi .flickity-viewport{
	max-height:580px !important;
	
}
.col-baner-vechungtoi .col-inner::before{
	content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 10px solid var(--primary-color);
    left: -50px;
    bottom: -50px;
    z-index: -1;
}
.panel.entry-content > div{
	overflow:hidden
}
.section7 .button100{
	font-size:14px
}
body {
    font-family: 'Bitter', serif;
}
*{
    box-sizing: border-box;
    
}
    body {
        font-size: 100% !important;
    }
.live-search-results{
	background:white !important
}
.live-search-results .search-name{
	font-size:16px;
	color:black;
	 display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}
.search-price ins span.amount{
	color:red
}
.search-price del span.amount,.autocomplete-suggestion .search-price{
	color:gray;
	font-size:14px !important;
}
.woof_products_top_panel{
	display:none !important
}
.header:not(.transparent) .header-nav-main.nav > li > a{
    font-size: 16px !important;
}
.img-border .banner-bg,.img-border img{
    border-radius: 30px;
}
.img-border .section-bg{
      border-radius: 30px;

}
.col-datlichngay{
  padding-bottom: 0;
}
.title-banner h2{
    margin-bottom: 5px;
    opacity: 0;
    transition: all 0.8s ease;
    transform: translateY(-30px);
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    line-height: 18px;
    margin-bottom: 20px;
    border-radius: 40px;
    display: inline-block;
    border: 1px solid #fff;
    padding: 10px;
    width: fit-content;
}
.title-banner div{
    font-size: 52px;
  font-weight: 700;
    position: relative;
    line-height: 70px;
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.3s ease;
    transition-delay: 1s;
    margin-bottom: 20px;
    width: fit-content;
}
.is-selected .title-banner div{
    transform: translateX(0px);
    opacity: 1;
}
.is-selected .title-banner h2{
    transform: translateY(0);
    opacity: 1;
}
.button-banner{
        position: relative;
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-align: center;
    padding: 10px 25px;
    border-radius: 50px;
    display: inline-block;
    color: #fff;
    background-color: var(--primary-color);
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
    transition-delay: 1.5s;
}
.is-selected .button-banner{
    transform: translateY(0);
    opacity: 1;
}
#content{
    padding-top: 0;
}
.section{
        padding-left: 0px !important;
    padding-right: 0px !important;

}
.dot{
   box-shadow: none;
    outline: 0;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.8);
    padding: 0;
    font-size: 0;
    opacity: 1;
    margin: 0 3px; 
}
.dot.is-selected{
        width: 25px;
    transition: all .2s;
    background-color: var(--fs-color-secondary) !important;
    border: none;
    border-radius: 10px !important;
}

       
.icon-box-section1 .icon-box-img{
      min-width: 136px;
    height: 117px;
    background: #f5f2ec;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32% 68% 46% 54% / 55% 45% 55% 45%;
    line-height: 1;
}
.icon-box-section1 .icon-box-img:hover{
  background-color: var(--fs-color-secondary);
}
.icon-box-section1 .icon-box-img img{
  transition: transform 0.6s ease;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    width: 56px;
    height: 56px;
}

.icon-box-section1 .icon-box-img:hover img{
  transform: rotateY(360deg);
  filter: brightness(0) invert(1);

}
.section1::before{
  background-image: url(/wp-content/uploads/2026/05/bg_chinh_sach-1.webp);
    content: "";
    position: absolute;
    top: 20px;
    left: 0px;
    background-position: center left;
    background-repeat: no-repeat;
    width: 183px;
    height: 236px;
}
.row-section2 > .col > .col-inner{
      background-color:#f6f3ed;
    background-image: url(/wp-content/uploads/2026/05/bg_about_index.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px;
    padding: 60px 25px;
}
.image-section2 img{
  -webkit-mask-image: url(/wp-content/uploads/2026/05/about-masking.webp);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center left;
}
.row-0-padding-bottom{
  padding-bottom: 0;
}
.row-0-padding-bottom .col{
  padding-bottom: 10px;
}
 .text-section2 p{
  margin-bottom: 0;
 }
.text-section2 span{
  font-size: 14px;
    color: black;
    position: relative;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    padding: 6px 15px 3px;
    gap: 15px;
    align-items: center;
    text-transform: uppercase;
    background-color: #fff;
    border-radius: 40px;
    margin-bottom: 5px;
   
}
.text-section2  h2{
  font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    z-index: 2;
    position: relative;
    color: black;
    
}
.text-section2  h2 b{
  color: var(--fs-color-secondary);
    font-weight: 700;
    font-size: 52px;
}
.text-section2{
  padding-left: 40px;
}
.text-section2 div{

    font-size: 16px;
    display: block;
    margin-bottom: 30px;
}
.icon-box-section1 h3{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.icon-box-section1 .icon-box-text{
  padding-left: 0 !important;
}
.icon-box-section1{
  gap: 25px;
  align-items: center;
}
.row3-section2{
  padding: 0px;
    padding-left: 40px !important;
    margin-bottom: 30px;
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    overflow: auto;
    justify-content: start;
}
.row3-section2 .col{
  padding-bottom: 0;
  min-width: 100%;
}
.icon-box-section2{
   gap: 20px;
  align-items: center;
}
.icon-box-section2 .icon-inner{
      min-width: 55px;
    height: 55px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32% 68% 46% 54% / 55% 45% 55% 45%;
    line-height: 1;
}
.icon-box-section2 .icon-inner img{
  transition: transform 0.6s ease;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    width: 32px;
    height: 32px;
}
.icon-box-section2 .icon-inner:hover{
  background: var(--fs-color-secondary);
}
.icon-box-section2 .icon-inner:hover img{
   transform: rotateY(360deg);
  filter: brightness(0) invert(1);
}
.icon-box-section2 h3{
      font-size: 14px;
    font-weight: 600;
}
.icon-box-section2 .icon-box-text{
  padding-left: 0 !important;
}
.btn_contact-phone {
    background: #f6f3ed;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 14px 14px 0 0;
    border-radius: 0 25px 0 0;

}
.btn_contact-phone .phone_about {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    align-items: center;
    background-color: var(--fs-color-secondary);
    border-radius: 20px;
    padding: 15px 25px 15px 10px;}

    .btn_contact-phone .pbmit-sticky-corner {
    transform: rotate(90deg);
}
.btn_contact-phone .pbmit-bottom-left-corner {
    top: -30px;
    left: 0;
}
.btn_contact-phone .pbmit-top-right-corner {
    top: auto;
    right: -30px;
    bottom: 0;
}
 .btn_contact-phone .pbmit-sticky-corner {
    width: 30px;
    height: 30px;
    position: absolute;
    transform: rotate(90deg);
}
.mycol-section2 .col-inner{
    display: block;
    border-radius: 25px;
    overflow: hidden;
    aspect-ratio: 780 / 636;
    position: relative;
}
.btn_contact-phone .pbmit-sticky-corner svg path {
    fill: #f6f3ed;
}
 .btn_contact-phone .icon_phone {
    width: 66px;
    height: 66px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
}
.btn_contact-phone .icon_phone svg {
    max-height: 45px;
    animation: iconSkew 1s infinite ease-out;
    min-height: -webkit-fill-available;
}
@keyframes iconSkew{
  0% {
    transform: rotate(0deg) 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(0deg) scale(1) skew(1deg);
}
100% {
    transform: rotate(0deg) scale(1) skew(1deg);
}
}
 .btn_contact-phone .box-contact-phone-info span {
    display: block;
    line-height: 1;
    font-size: 18px;
    color: #fff;
}
.btn_contact-phone .box-contact-phone-info a {
    font-weight: bold;
    font-size: 24px;
    color: #fff;
}
.btn_contact-phone .box-contact-phone-info a:hover{
  color: var(--primary-color);
}
.section2 .box-contact {
    padding: 0px;
    padding-left: 40px;
    display: flex;
    align-items: center;
}
.section2 .box-contact .btn-cts {
    margin-right: 45px;
    align-items: center;
}
.btn-style-three {
    position: relative;
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-align: center;
    padding: 10px 25px;
    border-radius: 50px;
    display: inline-block;
    color: #fff;
    background-color: var(--primary-color);
    transition-delay: 1.5s;
}
.btn-style-three:before {
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    position: absolute;
    width: 200%;
    height: 200%;
    content: "";
    top: -200%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
    background-color: var(--fs-color-secondary);
}
.btn-style-three .btn-wrap {
    position: relative;
    z-index: 1;
    float: left;
    overflow: hidden;
    display: inline-block;
}
.btn-style-three .btn-wrap .text-one {
    position: relative;
    display: block;
    color: #fff;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.btn-style-three .btn-wrap .text-two {
    position: absolute;
    top: 100%;
    display: block;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.btn-style-three svg {
    width: 10px;
    height: 10px;
    margin-top: -2px;
    margin-left: 8px;
}
.btn-style-three svg {
    width: 10px;
    height: 10px;
    margin-top: -2px;
    margin-left: 8px;
}
.btn-style-three svg line {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
}
.btn-style-three svg line {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
}
.btn-style-three:hover:before {
    top: -40%;
}
.btn-style-three:hover .btn-wrap .text-one:first-child {
    -webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%);
}
.btn-style-three:hover .btn-wrap .text-two {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-style-three:hover .btn-wrap .text-two {
    color: #fff;
}

.product .badge{
	height:fit-content;
}
.product .badge .badge-inner{
	background-color:white !important
		
}
.product .badge-container {
	margin: 0 !important
}
.accordion .icon-angle-down:before{
	content:"+";
}
.accordion .active .icon-angle-down:before{
	content:"";
	width:12px;
	height:1px;
	background:var(--fs-color-secondary);
	display:block
}

.onsale{
	background: linear-gradient(93.01deg, #d31100 15.48%, #ff2310 92.66%);
    border-radius: 5px 5px 5px 0px;
    padding: 0px 10px;
    color: #fff;
    position: absolute;
    left: 5px;
    top: 5px;
    height: 24px;
    line-height: 24px;
    text-align: center;
	font-size:14px
}
.wishlist-popup{
	width:80px;
	background:white !important;
	color:black !important;
	border:1px solid black;

}
.wishlist-popup a:hover{
	color:black !important;
}
.onsale:before{
	content: "";
    position: absolute;
    left: 0;
    top: 22px;
    border-right: 10px solid transparent;
    border-bottom: 0px solid transparent;
    border-top: 10px solid #d31100;
}
.content .num {
    display: block;
    font-size: 36px;
    font-weight: bold;
    color: var(--primary-color); 
	line-height:normal
	
}

.content .title {
    display: block;
    font-size: 14px;
    color: black;
    text-transform: uppercase;
}

/* Hiệu ứng zoom nhẹ khi hover cho giống style các site hiện đại */
.item:hover .icon_tk img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}
.khuyen-mai {
    margin-bottom: 15px;
    overflow: hidden;
    border: 2px dashed var(--primary-color);
    padding: 15px;
    border-radius: 10px;
}
.khuyen-mai .title {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
    display: block;
}
.khuyen-mai .content ul li {
    display: block;
    margin-bottom: 10px;
    align-items: center;
    position: relative;
    padding-left: 18px;
    margin-left: 0 !important;
}
.khuyen-mai .content ul li:before {
    content: "";
    position: absolute;
    background-image: url(/wp-content/uploads/2026/05/checkernew.webp);
    display: inline-block;
    min-width: 12px;
    min-height: 12px;
    top: 5px;
    left: 0px;
}

span.amount{
 
    color: red;
}

.custom-counter-item{
  display: flex;
  flex-direction: row;
  justify-content: center;

}
.custom-counter-item .content{
  margin-left:20px ;
}
.icon_tk {
    max-height: 64px;
    max-width: 64px;
    height: 64px;
    width: 64px;
    background-color: var(--fs-color-secondary);
    border-radius: 32% 68% 46% 54% / 55% 45% 55% 45%;
    padding: 15px;
}


.home .header-image{
  display: none !important;
}
.header-image{
      background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: center;
    padding: 174px 0;
    position: relative;
    z-index: 1;
    margin: 0 35px;
    max-width: 100%;
    border-radius: 25px;
    overflow: hidden;
    margin-bottom: 40px;
    max-width: 1790px;
}
.header-image .section-bg{
  border-radius: 25px;
}
.header-image::before{
  position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
    background: -webkit-gradient(linear, right top, left top, color-stop(24.56%, rgba(12, 10, 10, 0.5)), color-stop(71.75%, rgba(12, 10, 10, 0.74)), color-stop(81.83%, rgba(12, 10, 10, 0.82)), to(rgba(12, 10, 10, 0.9)));
    background: linear-gradient(-90deg, rgba(12, 10, 10, 0.5) 24.56%, rgba(12, 10, 10, 0.74) 71.75%, rgba(12, 10, 10, 0.82) 81.83%, rgba(12, 10, 10, 0.9) 100%);

}
.rank-math-breadcrumb p,.rank-math-breadcrumb p a{
  color: white;
}
.rank-math-breadcrumb p .last{
  color: var(--fs-color-secondary);
}
.rank-math-breadcrumb p a:hover{
  color: var(--fs-color-secondary);

}
.header-image h1{
      color: #fff;
    font-weight: 600;
    font-size: 40px;
	margin-bottom:5px;
}
.product-quick-view-container .single_add_to_cart_button{
	width:unset !important
}
.product-quick-view-container .ux-quantity{
	width:unset !important
}
.shop-page-title{
  display: none;
}
.banner{
  background-color: white !important;
}
.home .header-image-header{
  display: none;
}
.header-image-header{
	margin-bottom:40px;
}
.from_the_blog_excerpt {
      color: black;
    line-height: 20px;
    margin-bottom: 10px !important;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 40px;
}
.product-title a{
   display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
	font-weight: 400 !important;
	font-size:16px
}
.section5 h2{
color: black;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    z-index: 2;
    position: relative;
    display: inline-block;
    width: fit-content;
}
.price{
	font-size:16px
}
.section5 h2::before{
  content: "";
    position: absolute;
    left: -35px;
    top: 14px;
    width: 25px;
    height: 26px;
    -webkit-mask-image: url(/wp-content/uploads/2026/05/icon_sub_tab.png);
    background-color: var(--fs-color-secondary);
}
.section5 h2::after{
  content: "";
    position: absolute;
    right: -35px;
    top: 14px;
    width: 25px;
    height: 26px;
    -webkit-mask-image: url(/wp-content/uploads/2026/05/icon_sub_tab.png);
    background-color: var(--fs-color-secondary);
}

.tab-sp-trangchu li{
  padding: 0px;
    position: relative;
    width: auto;
    line-height: 1;
    height: auto;
    font-weight: 500;
    color: #FFF;
    transition: background-color 0.3s ease;
    margin-right: 45px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fs-color-secondary);
    padding: 5px 15px 5px 5px;
    border-radius: 40px;
}
.tab-sp-trangchu li span{
  font-size: 18px;
    font-weight: 500;
    display: block;
    color: white;
}
.tab-sp-trangchu ul li::before{
   content: '';
    display: inline-block;

    width: 45px;
    aspect-ratio: 1/1; /* tự bằng nhau */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    margin-right: 10px;
    border-radius: 50%;

    flex-shrink: 0;
}
.tab-sp-trangchu ul li.active{
  background-color: var(--primary-color);
}
.tab-sp-trangchu ul li:nth-child(1)::before{
 background-image: url('/wp-content/uploads/2026/05/section_pro_1_icon_1.webp');
}
.tab-sp-trangchu ul li:nth-child(2)::before{
   background-image: url('/wp-content/uploads/2026/05/section_pro_1_icon_2.webp');
}
.tab-sp-trangchu ul li:nth-child(3)::before{
   background-image: url('/wp-content/uploads/2026/05/section_pro_1_icon_3.webp');
}
.tab-sp-trangchu li:hover{
  background-color: var(--primary-color);
}
.product-small >.col-inner{
 
    border-radius: 10px;
    height: 100%;
    border: 1px solid #ddd;
    margin-bottom: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
	overflow:hidden;
     

    border-radius: 10px;
}

.product-small >.col-inner:hover{
  border: 1px solid var(--primary-color);
}




/* Ẩn các thành phần mặc định */
.product-small .yith-compare, 
.product-small .quick-view {
    display: none !important;
}

/* Đảm bảo box chứa text có nền trắng và chuyển động mượt */
.product-small .box-text {
    background-color: #fff;
    transition: transform 0.3s ease, padding 0.3s ease;
    z-index: 10;
    position: relative;
}

/* Ẩn phần các nút chức năng khi chưa hover */
.custom-hover-buttons {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

/* Hiệu ứng dịch chuyển box text khi hover */
.product-small:hover .box-text {
    transform: translateY(-40px); /* Dịch lên trên, điều chỉnh số này tùy độ cao của nút */
}

.product-small:hover .custom-hover-buttons {
    opacity: 1;
    visibility: visible;
}
/* Định dạng nhóm nút khi hiện ra */
.custom-hover-buttons .add-to-cart-button {
    flex: 1;
}

.custom-hover-buttons .add-to-cart-button a {
    padding: 5px 10px;
    font-size: 0.8em;
    text-transform: none;
    margin: 0;
}

/* Biến nút so sánh và xem nhanh thành icon tròn cạnh nhau */
.custom-hover-buttons .yith-wcwl-add-to-wishlist, 
.custom-hover-buttons .yith-compare,
.custom-hover-buttons .quick-view {
    display: inline-block !important;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: #f1f1f1;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

.custom-hover-buttons .quick-view i {
    margin: 0;
}
.product-small > .col-inner > .compare.button{
  display: none;
}  
.product-small > .col-inner .price-wrapper{
  max-height: 25px;
}
.custom-compare-icon{
  display: flex !important;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    position: relative;
    z-index: 1;
    font-size: 0px;
    background-color: transparent !important;
    color: black;
    border: none;
    
}
.custom-compare-icon:hover{
  color: #0056b3 !important;
  box-shadow: none;
}
.custom-hover-buttons .quick-view-added{
 background: none !important;
 display: flex !important;
 justify-content: center;
 align-items: center;

}
.quick-view-added svg{
  width: 24px;
  height: 24px;
 
  
}
.quick-view-added:hover svg{
  fill: var(--primary-color);
}
.custom-hover-buttons .add_to_cart_button{
  width: 100%;
  border-radius: 10px;
  margin: 0;
  text-transform: capitalize;
}
.custom-hover-buttons .add_to_cart_button:hover{
  background: var(--fs-color-secondary);
  box-shadow: none;
}
.box-text-products{
      background: #fff;
          padding: 10px;
}
.col2-section7{
  display: flex;
  align-items: center;

}
.col2-section7  .col-inner{
      height: 100%;
    background-color: var(--fs-color-secondary);
    padding: 40px 30px 30px 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.col2-section7 > .col-inner .icon-box-text{
  position: relative;
}
.col2-section7 > .col-inner .icon-box-text span{
      color: #fff;
  
    position: absolute;
    top: -190px;
    right: 20px;
    font-size: 92px;
    line-height: 1;
}
.button100{
  text-align: start;
  width: fit-content;
}
.button100:hover span,.button100:hover i,.button100:hover::before{
  color: var(--primary-color);
}
.col2-section7 > .col-inner .icon-box-text h3{
  font-size: 17.5px;
}
.col2-section7 > .col-inner .icon-box-text p{
  font-size: 14px;
}
.section7 .section-content{
    position: relative;
}

.row-lieutrinh-1,
.row-lieutrinh-2,
.row-lieutrinh-3{
    position: sticky;
    top: 100px;
    transition:
        opacity .4s ease,
        transform .4s ease,
        filter .4s ease;
}

/* layer */
.row-lieutrinh-1{ z-index:1; }
.row-lieutrinh-2{ z-index:2; }
.row-lieutrinh-3{ z-index:3; }

/* khi bị card sau đè */
.row-lieutrinh-1.is-covered,
.row-lieutrinh-2.is-covered{
    opacity: .7;
    transform: scale(.96);
    filter: brightness(.7);
}
.section_choose .box_img_choose .box-text{
    display: block;
    position: relative;
}
.section_choose .box_img_choose .box-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 10px;
    width: fit-content;
    height: fit-content;
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px 15px 40px 15px;
}
.section_choose .box_img_choose .box-text .exp-content {
    color: #fff;
    border: 1px solid #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 15px 15px 36px 15px;
}
.section_choose .box_img_choose .box-text .exp-content .exp-tt {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0px;
}
.title-section-choose{
  font-size: 14px;
    color: black;
    position: relative;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    padding: 6px 15px 3px;
    gap: 15px;
    align-items: center;
    text-transform: uppercase;
    background-color: #f6f3ed;
    border-radius: 40px;
    margin-bottom: 10px;
}
.text-section-choose h2{
   
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    z-index: 2;
    position: relative;
}
.text-section-choose h2 b{
  color: var(--fs-color-secondary);
    font-weight: 700;
    font-size: 52px;
}
.text-section-choose .text-0{
      color: black;
    font-size: 16px;
    display: block;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 30px;
    padding-bottom: 30px;
}
.icon-box-choose .icon-inner{
  background-color: var(--primary-color);
  border-radius: 50%;
}
.icon-box-choose .icon-box-text{
 
      padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;

}
.icon-box-choose .icon-box-text{
  max-width: 80%;
  padding-left:5px !important ;
}
.icon-box-choose h3{
      font-size: 16px;
    font-weight: 600;
    position: relative;
  
    color: var(--primary-color);
    border-right: 1px solid #f6f3ed;
    margin-bottom: 0;
	padding-right:10px
}
.icon-box-choose p{
  margin-bottom: 0;
  font-size: 14px;
}
.col-8-section-choose .text-section-choose, .icon-box-choose{
  max-width: 75% !important;
}
.icon-box-choose .icon-box-img{
  display: flex;
  justify-content: center;
  align-items: center;
}
.col-icon-box-choose .col-inner{
padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}
.text-chay-tong {
  position: relative;
    --tm-marquee-animation-duration: 100s;
    --gap: 0px;
    display: flex;
    user-select: none;
   
}
.text-chay-tong .text-chay{
      flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
   
    min-width: 100%;
    animation: scroll 100s linear infinite;
}
.text-chay-tong .text-chay p{
  font-size: 110px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--primary-color);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(49, 49, 49, 0.38);
    margin-top: 0;
    font-family: auto;
}
.text-chay-tong .text-chay p:nth-of-type(even) {
    color: rgba(30, 27, 27, 0);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(0, 0, 0, 0.62);
}

.text-chay{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
}

.text-chay p{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0;
}

.text-chay p:before{
	content:"";
	width:80px;
	height:80px;
	margin:0 30px;
	display:block;
	flex-shrink:0;

	background-color:var(--fs-color-secondary);

	-webkit-mask:url('/wp-content/uploads/2026/05/icon-hoa.svg') no-repeat center;
	-webkit-mask-size:contain;

	mask:url('/wp-content/uploads/2026/05/icon-hoa.svg') no-repeat center;
	mask-size:contain;
}
.col-phanhoi> .col-inner{
      background-color: #214442;
    overflow: hidden;
    border-radius: 25px;
    padding: 60px 40px;
}
.row-phanhoi{
    display: grid;
    grid-template-columns: 1fr 250px 250px;
    grid-template-areas: "info_1 info_2 info_3";
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;

}
.row-phanhoi .info_1{
  grid-area: info_1;
}
.row-phanhoi .info_2{
  grid-area: info_2;
}
.row-phanhoi .info_3{
  grid-area: info_3;
}
.col-phanhoi .sub_title{
  font-size: 14px;
    color: black;
    position: relative;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    padding: 6px 15px 3px;
    gap: 15px;
    align-items: center;
    text-transform: uppercase;
    background-color: #f6f3ed;
    border-radius: 40px;
    margin-bottom: 10px;
}
.col-phanhoi h2{
  color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    z-index: 2;
    position: relative;
    margin-bottom: 0;
}
.col-phanhoi .decs{
  color: #fff;
    font-size: 16px;
    display: block;
    margin-bottom: 30px;
    max-width: 70%;
}
.text-image-box-phan-hoi p{
margin-bottom: 0px;
    display: flex;
    align-items: center;
}
.text-image-box-phan-hoi i{
 
    color: #f9920f;
   
}
.text-image-box-phan-hoi{
  font-size: 16px;
  color: white;
}
.text-image-box-phan-hoi h4{
  color: white;
  font-size: 17px;
  text-align: start;
}
.image-box-phanhoi .box-text{
  padding: 0;
  padding-left: 5px;
}
.info_3 .img{
      width: 54px !important;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: -15px;
    margin-bottom: 0 !important;
}
.info_3 .col-inner{
      display: flex;
    align-items: center;
}
.info_3 .text{
      color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    font-size: 16px;
        width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: -15px;
    margin-bottom: 0;
    z-index: 1;
}
.info_3 .text p{
  margin-bottom: 0;
}
.slide-phanhoi .flickity-slider > .row{
  max-width: 510px;
}
.col-danhgia .col-inner{
padding: 20px;
    background-color: #f6f3ed;
    height: 100%;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}
.text-danh-gia .content-danhgia{
        min-height: 50px;
    margin-top: 8px;
}
.text-danh-gia .star{
  margin-bottom: 10px;
}
.text-danh-gia .star i{
  color: #f9920f;
}
.text-danh-gia .content{
  margin-bottom: 25px;
}
.text-danh-gia b{
  color:var(--primary-color);
  font-size: 18px;
}
.maker-quote {
    min-width: 40px;
    min-height: 35px;
    -webkit-mask-image: url(/wp-content/uploads/2026/05/quotation.webp);
    background-color: var(--fs-color-secondary);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    position: absolute;
    right: 0px;
    bottom: 0px;
    transform: rotate(180deg);
}
.col-slide-phanhoi .flickity-slider>.row:not(.is-selected) {
    opacity: 1; 
}
.col-slide-phanhoi .flickity-page-dots{
  bottom:-30px
}
.col-slide-phanhoi .flickity-slider > .row{
  margin-right: 20px;
}
.text-giai-dap .sub_title{
  font-size: 14px;
    color: #000000;
    position: relative;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    padding: 6px 15px 3px;
    gap: 15px;
    align-items: center;
    text-transform: uppercase;
    background-color: #f6f3ed;
    border-radius: 40px;
    margin-bottom: 10px;
}
.text-giai-dap h2{
  color: black;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    z-index: 2;
    position: relative;
}
.text-giai-dap h2 b{
      color: var(--fs-color-secondary);
    font-weight: 700;
    font-size: 52px;
}
.text-giai-dap .desc{
  color: black;
    font-size: 16px;
    display: block;
    margin-bottom: 30px;
}
.content-faq p{
  font-size:14px
}
.Giai-dap-trang-chu .accordion-item{
  margin-bottom:20px;
}
.Giai-dap-trang-chu .accordion-title{
  border:none !important;
    position: relative;



    background-color: #f6f3ed;
    padding: 5px;
	padding-left:20px;
    border-radius: 40px;
       
        font-size: 16px;
	display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
	align-items:center;

}
del span.amount{
	color: gray !important
}
.Giai-dap-trang-chu .accordion-title.active,.Giai-dap-trang-chu .accordion-title:hover{
  background: var(--fs-color-secondary);
	color:white
}
.col-inner{
  min-height: 100%;
}
.Giai-dap-trang-chu  .toggle{
   position:static;
   width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    opacity: 1 !important;
		transform-origin:unset;
	margin:0
}
.Giai-dap-trang-chu  .toggle i{
  color: var(--fs-color-secondary);
}
.Giai-dap-trang-chu .accordion-item:hover .accordion-title{
     background: var(--fs-color-secondary);
}
.section-nhan-vien .sub_title{
      font-size: 14px;
    color: black;
    position: relative;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    padding: 6px 15px 3px;
    gap: 15px;
    align-items: center;
    text-transform: uppercase;
    background-color: #fff;
    border-radius: 40px;
    margin-bottom: 5px;
}
.section-nhan-vien h2{
  color: black;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    z-index: 2;
    position: relative;
}
.slide-doi-ngu .flickity-slider > .row{
  max-width: 385px;
}
.col1-nhanvien .col-inner{
  background:var(--primary-color);
  padding: 30px;
  border-radius: 20px;
  
  
} 
.thumbnail-nhanvien{
  background: #f6f3ed;
  margin-bottom: 20px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
}
.header-image{
  margin: 0 !important;
}
.header-image .section-content{
  padding: 0 92px;
}
.mang-xa-hoi a{
  display: flex;
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-color: transparent;
    font-size: 14px;
    justify-content: center;
    border-radius: 5px;
    margin-top: 10px;
    background-color: #fff;
    align-items: center;
    flex-direction: row;
}
.mang-xa-hoi .social-links{
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.mang-xa-hoi a svg{
  width: 16px;
    height: 16px;
}
.mang-xa-hoi{
  position: absolute;
  bottom: 15px;
}
.mang-xa-hoi a:hover{
  background-color:var(--primary-color);
}
.mang-xa-hoi a:hover svg{
  fill: white;
}

/* Xóa dấu chấm mặc định và reset khoảng cách */
ul.cac-thong-tin-co-ban {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

/* Cấu trúc từng dòng thông tin */
ul.cac-thong-tin-co-ban li {
    position: relative;
    padding-left: 50px; /* Tạo khoảng trống phía trước để chứa icon */
    margin-bottom: 12px; /* Khoảng cách giữa các dòng */
    line-height: 1.5;
    display: flex;
    justify-content: center; /* Căn giữa icon theo chiều dọc với văn bản */
    flex-wrap: wrap;
    margin-left: 0;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    color: white;
}
ul.cac-thong-tin-co-ban li *{
  color: white !important;
}
ul.cac-thong-tin-co-ban li a:hover{
  color: var(--fs-color-secondary) !important;
}
/* Thêm icon check.svg vào trước mỗi dòng */
ul.cac-thong-tin-co-ban li::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 20px;
        transform: translate(-50%, -50%); /* Căn giữa chuẩn xác theo chiều dọc */
    width: 20px;  /* Chiều rộng của icon */
    height: 20px; /* Chiều cao của icon */
    -webkit-mask-image: url('/wp-content/uploads/2026/05/check.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: var(--primary-color);
    z-index: 2;
        line-height: 22px;
            -webkit-mask-size: contain;
                margin-right: 10px;
}
ul.cac-thong-tin-co-ban li::after{
  content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    z-index: 1;
}
/* Định dạng một chút cho phần chữ tiêu đề và link */
ul.cac-thong-tin-co-ban li strong {
    margin-right: 6px;
    color: #333; /* Màu chữ tiêu đề (SĐT, Email...) */
}

ul.cac-thong-tin-co-ban li a {
    color: #0073aa; /* Màu link mặc định */
    transition: color 0.2s ease;
}

ul.cac-thong-tin-co-ban li a:hover {
    color: #111; /* Màu link khi rê chuột vào */
}
.chi-tiet-gioi-thieu .ten-nhan-vien {
    font-size: 32px;
    margin-bottom: 10px;
    color: #333;
}

.chi-tiet-gioi-thieu .profile-nghe-nghiep {
    font-size: 14px;
    margin-bottom: 15px;
}



.chi-tiet-gioi-thieu .profile-title {
    font-size: 20px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #111;
}

.chi-tiet-gioi-thieu .profile-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 15px; /* Khoảng cách giữa các đoạn văn nhỏ */
}
/* Khối bọc bên ngoài cùng giống màu nền ảnh mẫu */
.khoi-kinh-nghiem-ky-nang {
    background-color: #f4f1ea; /* Màu nền be nhạt như hình */
    padding: 35px;
    border-radius: 16px;
    margin-bottom: 30px;
}

.khoi-kinh-nghiem-ky-nang .tieu-de-khoi {
    font-size: 28px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
}

.khoi-kinh-nghiem-ky-nang .mo-ta-kinh-nghiem {
    font-size: 15px;
    line-height: 1.6;
    color: #222;
    margin-bottom: 25px;
}

/* Định dạng cấu trúc từng thanh skill */
.danh-sach-ky-nang .item-ky-nang {
    margin-bottom: 18px;
}

.danh-sach-ky-nang .item-ky-nang:last-child {
    margin-bottom: 0;
}

/* Phần chữ tên skill và phần trăm nằm trên cùng một hàng */
.item-ky-nang .thông-tin-skill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.item-ky-nang .ten-skill {
    font-weight: bold;
    font-size: 15px;
    color: #000;
}

.item-ky-nang .phan-tram-skill {
    font-weight: bold;
    font-size: 14px;
    color: #000;
}

/* Thanh chạy bên dưới */
.item-ky-nang .thanh-background-bar {
    background-color: #e0dbd1; /* Màu nền xám nhạt của thanh bar */
    height: 12px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.item-ky-nang .thanh-chay-bar {
    background-color: var(--primary-color); /* Sử dụng biến màu chủ đạo của bạn */
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-in-out; /* Tạo hiệu ứng chạy mượt nếu cần */
}
/*=========================
FORM
=========================*/

.bean-form{
    position:relative;
    background:var(--fs-color-secondary);
    border-radius:30px;
    padding:30px;
    overflow:hidden;
    color:#fff;
}

/* background hoa */

.bean-form::before{
    content:'';
    position:absolute;
    right:-80px;
    top:50%;
    transform:translateY(-50%);
    width:500px;
    height:500px;
    background:url('/wp-content/uploads/2026/05/flower-.png') center/contain no-repeat;
    opacity:.08;
    pointer-events:none;
}

.bean-form>*{
    position:relative;
    z-index:2;
}


/*=========================
TITLE
=========================*/

.bean-badge{
    display:inline-block;
    padding:10px 18px;
    background:#fff;
    color:#000;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    margin-bottom:25px;
}

.bean-form h2{
    color:#fff;
    font-size:52px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:20px;
}

.bean-desc{
    line-height:1.8;
    opacity:.9;
    margin-bottom:40px !important;
}


/*=========================
GRID
=========================*/

.bean-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px 20px;
}


/*=========================
INPUT
=========================*/

.bean-form input,
.bean-form textarea,
.bean-form select{
    width:100%;
    background:transparent!important;
    border:none!important;
    border-bottom:1px solid rgba(255,255,255,.4)!important;
    color:#fff!important;

    border-radius:0!important;
    outline:none!important;
    box-shadow:none!important;
    font-size:15px;
}

.bean-form input:focus,
.bean-form textarea:focus,
.bean-form select:focus{
    border-color:#fff!important;
}

.bean-form input::placeholder,
.bean-form textarea::placeholder{
    color:rgba(255,255,255,.8);
}

.bean-form select{
    appearance:none;
}

.bean-form textarea{
    height:120px;
    resize:none;
}

.bean-message{
    margin-top:25px;
}


/*=========================
BUTTON
=========================*/


.col-0paddingbottom{
  padding-bottom: 0 !important;
}

.bean-btn{
  position: relative;
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-align: center;
    padding: 7px 20px;
    border-radius: 50px;
    display: inline-block;
    color: #fff;
    background-color: var(--primary-color);
    transition-delay: 1.5s;
    margin-top: 20px;
    outline: none;
    border: none;
    line-height: 25.5px;
}
.bean-btn::before{
      -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    position: absolute;
    width: 200%;
    height: 200%;
    content: "";
    top: -200%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
    background-color: var(--fs-color-secondary);
}
.bean-btn:hover::before{
  top: -40%;
}
.bean-btn .btn-wrap{
  position: relative;
    z-index: 1;
    float: left;
    overflow: hidden;
    display: inline-block;
    line-height: 22px;
}
.bean-btn .btn-wrap .text-one{
      position: relative;
    display: block;
    color: #fff;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.bean-btn .btn-wrap .text-two{
  position: absolute;
    top: 100%;
    display: block;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.bean-btn:hover .btn-wrap .text-one{
      transform: translateY(-150%);
}
.bean-btn:hover .btn-wrap .text-two{
  color: white;
  top: 50%;
  transform: translateY(-50%);
}
.bean-btn svg{
      width: 10px;
    height: 10px;
    margin-top: -2px;
    margin-left: 8px;
}
.bean-btn svg line{
      fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
}
/*=========================
CF7
=========================*/

.wpcf7-spinner{
    position:absolute;
}

.wpcf7 form .wpcf7-response-output{
    border:none;
    margin-top:20px;
    color:#fff;
}

/* Custom kích thước cột hiển thị trên Slider (Mặc định hiển thị 4 cột trên PC) */
.slider-nhan-vien-wrapper .slide-nhan-vien-item {
    width: 25%;
    padding: 0 10px;
}
@media (max-width: 991px) {
    .slider-nhan-vien-wrapper .slide-nhan-vien-item { width: 50%; } /* 2 Cột trên Tablet */
}
@media (max-width: 549px) {
    .slider-nhan-vien-wrapper .slide-nhan-vien-item { width: 100%; } /* 1 Cột trên Mobile */
}

/* Khung hiển thị ảnh nhân viên */
.nhan-vien-inner {
    position: relative;
    height: 520px;
    background-size: cover !important;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    background: white;
}
.col-nhanviennnn .nhan-vien-inner{
  background:#f6f3ed ;
}
/* Hiệu ứng lớp phủ Overlay khi hover */
.nhan-vien-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
    z-index: 2;
}
.nhan-vien-inner:hover .nhan-vien-overlay {
    opacity: 1;
}

/* Cột danh sách icon MXH xếp dọc */
.social-hover-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.social-hover-list a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
}
.social-hover-list a:hover {
    background: var(--primary-color);
    color: white;
}

/* Box thông tin phía dưới */
.nhan-vien-info-box {
    position: relative;
    background-color: #fffdec; /* Màu nền kem nhạt mặc định */
    padding: 15px 65px 15px 20px;
    border-radius: 12px;
    z-index: 3;
    transition: all 0.3s ease;
}
.nhan-vien-info-box .info-text-link {
    display: block;
    box-shadow: none;
}

.nhan-vien-info-box .nv-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 3px;
    color: #333;
    transition: color 0.3s ease;
}.nhan-vien-info-box .nv-title:hover{
  color: var(--primary-color) !important;
}
.nhan-vien-info-box .nv-job {
    font-size: 13px;
    color: black;
    display: block;
    transition: color 0.3s ease;
}

/* Đổi nền sang màu HỒNG khi hover vào thẻ inner */
.nhan-vien-inner:hover .nhan-vien-info-box {
    background-color: var(--fs-color-secondary);
}
.nhan-vien-inner:hover .nhan-vien-info-box .nv-title,
.nhan-vien-inner:hover .nhan-vien-info-box .nv-job {
    color: #fff;
}

/* Nút gọi điện màu XANH */
.nhan-vien-info-box .nv-call-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.nhan-vien-info-box .nv-call-btn:hover {
    transform: translateY(-50%) scale(1.1);
    color: #fff;
}

/* Tùy chỉnh nút mũi tên điều hướng của Flatsome Slider */
.slider-nhan-vien-wrapper .flickity-prev-next-button {
    background-color: var(--primary-color);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.slider-nhan-vien-wrapper .flickity-prev-next-button:hover {
    background-color: var(--fs-color-secondary);
}
/* Đảm bảo khung chứa hiển thị block hoàn chỉnh */
.slider-nhan-vien-wrapper {
    width: 100% !important;
    display: block !important;
    clear: both;
}

/* Ép mỗi slide con chiếm chính xác 25% trên màn hình lớn */
.slider-nhan-vien .slide-nhan-vien-item {
    width: 25% !important; 
    padding: 0 10px !important;
    float: left !important;
    box-sizing: border-box !important;
}

/* Đảm bảo hình ảnh / khối bên trong không bị méo */
.slider-nhan-vien .nhan-vien-inner {
    width: 100% !important;
    box-sizing: border-box !important;
    background: white;
}
.flickity-prev-next-button.previous,.flickity-prev-next-button.next{
  opacity: 1;
}
.row-trainghiem .title_choose_2{
  font-size: 26px;
    color: #222;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 15px;
}
.row-trainghiem .content_choose{
  color: #565656;
    font-size: 14px;
    font-weight: 400;
}
.row-trainghiem .faq{
      list-style: none;
    padding-left: 0px;
}
.row-trainghiem .faq li{
  border-radius: 3px;
    margin-bottom: 10px;
    position: relative;
}
.row-trainghiem .faq li h3{
  font-size: 14px;
    position: relative;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0;
}
.row-trainghiem .faq li .icon_mask{
  display: inline-block;
    position: relative;
    font-size: 16px;
    line-height: 22px;
    min-width: 16px;
    min-height: 16px;
    bottom: -2px;
    margin-right: 4px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(/wp-content/uploads/2026/05/checked.webp);
    background-color: var(--fs-color-secondary);
}
.play-btn{
  display: inline-block;
    position: relative;
    z-index: 1;
}
.play-btn:before,.play-btn:after{
      background: transparent;
    border: 1px solid #fff;
}
.play-btn>span svg{
      width: 32px;
    height: 32px;
}
.play-btn:after,.play-btn:before{
  content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: ripple;
    animation-name: ripple;
    z-index: -1;
    border-radius: 50%;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s;
}
.play-btn>span{
      background: var(--fs-color-secondary);
    color: #fff;
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 58px;
    text-align: center;
   
    color: var(--fs-color-secondary);
    border-radius: 50%;
    z-index: 1;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-datlichngay{
      position: relative;
}
.box-title{
  font-weight: 600;
    font-size: 26px;
    letter-spacing: 0.2px;
    color: #fff;
    margin-bottom: 0px;
    padding-top: 20px;
}
.item_contact_dvu svg{
      width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: -5px;
    fill: white;
}
.item_contact_dvu.hotline svg{
  fill: var(--fs-color-secondary);
}
.info_fat{
  display: inline-block;
    color: #fff;
    margin-bottom: 0px;
    font-size: 16px;
}
.item_contact_dvu{
  display: block;
    margin-top: 15px;
}
.item_contact_dvu.hotline{
      margin-top: 5px;
    margin-bottom: 15px;
}
.featured-services{
    background:#f4f1eb;
    padding:25px;
    border-radius:25px;
    margin-bottom: 25px;
}

.featured-services h2{
    margin-bottom:20px;
    font-size:20px;
    font-weight:700;
    color: black;
}

.service-item{
    display:flex;
    align-items:center;
    gap:15px;
    background:#fff;
    padding:10px;
    border-radius:14px;
    margin-bottom:15px;
    text-decoration:none;
    color:#000;
    transition:.3s;
}

.service-item.active{
    background:var(--primary-color);
    color:#fff;
}


.service-item:hover{
    transform:translateX(8px);
}

.service-thumb{
    width:40px;
    height:27px;
    border-radius:10px;
    overflow:hidden;
    flex-shrink:0;
}

.service-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.service-title{
    font-size:14px;
    font-weight:600;
}
.banner-dichvu{
  margin-bottom: 15px;
}
.banner-dichvu img{
  border-radius: 30px;
}
.service-title1,.title-lieutrinh1 h2{
font-size: 20px;
color: black;font-weight: bold;
}
.lieutrinh1{
  margin-bottom: 15px;
}
.service-content p{
margin-bottom: 15px;
}
.service-lieu-trinh{
            display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
}

.lieu-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width: calc(50% - 10px);
}

.lieu-icon{
    width:20px;
    height:20px;
    min-width:20px;

    background:url('/wp-content/uploads/2026/05/check.svg') no-repeat center;
    background-size:contain;

    margin-top:2px;
    color: var(--primary-color);
}

.lieu-text{
    font-size:14px;
    line-height:1.5;
}
.row-dichvu-ctsp .col1 > .col-inner{
  padding: 15px;
  border-radius: 20px;
  background: #f6f3ed;

}
.row-dichvu-ctsp h3{
  font-size: 16px;
  margin-bottom: 3px;
  color: var(--primary-color);
  font-weight: bold;
}
.row-dichvu-ctsp p{
  font-size: 14px;
  margin-bottom: 0;
}
.col2 .title{
  width: 100%;
    text-align: center;
    font-size: 14px;
    margin: 0;
    font-weight: 700;
}
.col2 .title2{
  width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 23px;
    margin: 0;
    font-weight: normal;
}
.col2 .phone{
      width: 100%;
    margin-top: 5px;
    display: block;
    text-align: center;
    line-height: 1.1;
}
.col2 .phone a{
      font-size: 29px;
    font-weight: 800;
    color: var(--primary-color);
    text-decoration: none;
}
.col2 .or{
  width: 100%;
    margin: 0px 0 10px;
    color: #7a7d8d;
    text-align: center;
    line-height: 1.1;
}
.col2 .or span{
      display: inline-block;
    background: #fbfbfb;
    padding: 0 10px;
    transform: translateY(50%);
    font-size: 13px;
}
.col2 .or::after{
  display: block;
    content: "";
    width: 100%;
    height: 1px;
    background: #ededed;
}
.col2 > .col-inner{
  padding: 15px;
  border-radius: 20px;
  background: #f8f8f8;
}
.col2 .title3{
      width: 100%;
    text-align: center;
    font-size: 14px;
    margin: 0;
    font-weight: 700;
}
.col2 .chat{
      text-align: center;
    margin-top: 10px;
    font-size: 16px;
    position: relative;
    font-weight: 600;
    padding: 5px 20px;
    border-radius: 30px;
    display: inline-block;
    width: 100%;
    background: #0d6efd;
    color: #fff;
}
.custom-product-info div{
  font-size: 14px;
  color: var(--primary-color);
}
.custom-product-info .thuonghieu{
  font-weight: 600;
}
.custom-product-info div strong{
  color: black;
}
.custom-product-page .product-title{
  font-weight: bold;
}

.coupon-item-action{
  display: flex;
  justify-content: space-between;
}
.coupon-expiry{
  font-size: 10px;
  color:black;
}
.coupon-copy-btn.coupon-btn{
  padding: 2px 4px;
  font-size: 11px;
  margin-left: 4px;
  color: white;
  background-color: var(--primary-color);
}
.coupon-copy-btn{
  font-size: 11px;
  background-color: var(--primary-color);
  padding: 2px 3px;
  color: white;
  border-radius: 5px;
}
.item-coupon .col-inner{
  display: flex;
  align-items: center;
  background-color: white;
  position: relative;
  border-radius: 15px;
  aspect-ratio: 216 / 60;
}
#coupon-popup #popup-title{
  background-color: var(--primary-color);
  color: white;
  border-radius: 15px 15px 0 0 ;
}
.col-mauudai > .col-inner{
  border-radius: 20px;
  background-color: var(--primary-color);
  padding: 20px;
}
.stuck .header-main .nav > li > a{
  line-height: unset !important;
}
.img-coupon{
      width: 70px;
    height: 85px;
    display: flex;
    position: relative;
    flex: none;
    flex-grow: 0;
    padding: 7px;
    justify-content: center;
    align-items: center;
}
.item-coupon{
    padding-bottom: 0 !important;
    width: 25%;
}
.coupon-item{
  width: 100%;
  padding: 7px;
}
#popup-copy-btn,#popup-close-btn:hover{
  background-color: var(--primary-color);
  color: white;
  border-radius: 15px;
}
#popup-copy-btn:hover{
  border:1px solid var(--primary-color);
  color: var(--primary-color) ;
  background-color: white !important;
}
#popup-close-btn{
  border:1px solid var(--primary-color);
  color: var(--primary-color);
    border-radius: 15px;

}

.product-section{
  border-top: none;
}
.col-ctbt > .col-inner{
      position: relative;
    background: #f6f3ed;
    padding: 15px;
    border-radius: 20px;
}
.is-divider{
  display: none;
}
.ctbt .product-title{
  font-size: 14px;
}
.ctbt .widget-title{
  text-transform: capitalize;
}
.ctbt li{
  background: white;
  border-radius: 15px;
  margin-top: 10px !important;
}
.ctbt .widget{
  margin-bottom: 0 !important;
}
#coupon-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    
}
#coupon-popup {
    background: #fff;
    width: 90%;
    max-width: 420px;
    border-radius: 15px;
   
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: fadeInCoupon 0.3s ease;
}
.coupon-item-code span{
      font-size: 16px;
    font-weight: 700;
    color: black;
}
.coupon-value{
  font-size: 12px;
    font-weight: 700;
    color: black;
    
}

#coupon-popup > p{
  margin-bottom: 0;
  padding: 10px;
  color: black;
  font-size: 12px;
}
#coupon-popup > p >span{

  padding: 10px;
  color:#ff0000;

}
.coupon-table tbody:nth-child(2n+1) {
    background-color: #f9f9f9;
}
.coupon-table td{
  padding:10px;
  font-size: 14px;
}
.title-spdx{
  position: relative;
    margin-bottom: 15px;
}
.title-spdx::before{
 
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    top: 50%;
    left: 50%;
    z-index: 0;
    transition: all 0.3s ease-in-out;
    transform: translate(-50%, -50%)
}
.title-spdx h2{
  display: inline-block;
    font-size: 30px;
    margin-bottom: 0px;
    color: var(--primary-color);
    line-height: 1;
    position: relative;
    background-color: #fff;
    z-index: 1;
    padding-right: 10px;
    font-weight: 700;
    width: fit-content;
}
.category-page-row #shop-sidebar{
  padding: 10px;
  border-radius: 25px;
  background: #f6f3ed;
}
.woof_authors  li{
  margin: 0;
  margin-left: 0 !important;
}
.woof_authors span.amount{
  color: black;
  font-weight: 400;
}
#shop-sidebar h4{
  font-size: 16px;
  font-weight: bold;
}
#shop-sidebar label{
  font-weight: 400;
}
.galary-sp img{
  border-radius: 20px;
}
.galary-sp .box-image{
  position: relative;
}
.galary-sp .box-image::before{
       position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.galary-sp .box-image::after{
position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.galary-sp .box-image:hover::after{
 right: 50%;
    left: 50%;
    width: 0;
    background: rgba(255, 255, 255, 0.3);
}
.galary-sp .box-image:hover::before{
  height: 0;
    top: 50%;
    bottom: 50%;
    background: rgba(255, 255, 255, 0.3);
}
.col-galery{
  padding-bottom: 0;
}

/* 3. Tùy chỉnh thêm: Bo góc toàn bộ khung bài viết giống ảnh mẫu của bạn */
.post-item .box {
    background-color: #f7f5f0 !important; /* Màu nền kem nhạt */
    border-radius: 20px !important;       /* Bo góc khung */
    overflow: hidden !important;
}
.post-item .box-text {
    padding: 20px !important; /* Tạo khoảng cách chữ cho đẹp */
}
.view-more-meta  svg line{
  stroke: black;
      stroke-width: 2;
    stroke-miterlimit: 10;
}
.view-more-meta  svg {
      width: 10px;
    height: 10px;
    margin-top: 2px;
    margin-left: 4px;
}
.view-more-meta{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;




    padding-bottom: 4px;

    text-decoration: none;
    overflow: hidden;
    font-size: 14px; font-weight: bold; color: #111; padding-bottom: 2px; transition: all 0.3s;order: 4;width:fit-content;
}

/* Border mặc định */
.view-more-meta:hover{
  color: var(--fs-color-secondary) !important;
}
.view-more-meta::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--fs-color-secondary);
    transform: scaleX(0);
    transform-origin: left;

    transition: transform .35s ease;
}

/* Hover chạy từ trái sang phải */
.view-more-meta:hover::after{
    transform: scaleX(1);
    color: var(--fs-color-secondary) !important;
     background: var(--fs-color-secondary);
}
.view-more-meta:hover svg line{
  stroke: var(--fs-color-secondary);
}
/* SVG */
.view-more-meta svg{

    stroke: #111;
    stroke-width: 1.5;
    fill: none;
    transition: transform .3s ease;
}



.post-title a{

    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
}



.box-text .blog-post-inner{
  display: flex;
  flex-direction: column;
}
.post-title {
  order: 1;
  line-height: 22px !important;
  margin-bottom: 7px !important;
}
.from_the_blog_excerpt {
  order: 3;
}
.custom-blog-meta{
  order: 2;
  font-size: 12px;
  color: #838383;
  margin-bottom: 7px;
}
.custom-blog-meta strong{
  color: var(--primary-color);
}
.widget ul{
  padding-left: 0 !important;
}
.col-dichvu-trang .flickity-button{
  display: none;
}
.col-dichvu-trang .flickity-page-dots{
  bottom: unset;
}
.wpcf7-form-control option{
  color: black !important;
}
.col-lienhe .icon-inner{
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f6f3ed;
  border-radius: 50%;
}
.col-lienhe .icon-inner svg{
  width: 22px;
  height: 22px;
  padding-top: 0;
}
.col-lienhe .icon-box-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-lienhe h3{
  font-weight: bold;
}
.col-lienhe .icon-box{
    
    
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #d5d5d5;
}
.col-lienhe .col-inner{
  background-color: #fff;
    padding: 30px;
    font-size: 14px;
    font-weight: 400;
    display: block;
   
    border-radius: 20px;
   
    border: 1px solid #d5d5d5;
}
.col-lienhe p{
  margin-bottom: 0;
}
.text-lien1 h2{
  font-size: 40px;
  font-weight: bold;
  color: black;
}
.bean-form-2{
    background:#e8e5de;
    padding:30px;
    border-radius:25px;
}

.bean-form-2 h2{
    font-size:40px;
    margin-bottom:30px;
    font-weight:700;
    color: black;
}

.bean-form-2 .bean-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.bean-form-2 .full-width{
    grid-column:1/-1;
}

.bean-form-2 input,
.bean-form-2 textarea{
    width:100%;
    border:none !important;
    background:#fff !important;
    border-radius:999px !important;
    min-height:50px;
    padding:0 28px;
    box-shadow:none;
    margin:0;
}

.bean-form-2 textarea{
    border-radius:25px !important;
    min-height:160px;
    padding-top:20px;
}

.bean-form-2 .bean-message{
    margin-top:20px;
}

.bean-form-2 .bean-btn{
    text-align:center;
    margin-top:15px;
}

.bean-form-2 .bean-submit{
    background:var(--primary-color);
    border:none;
    border-radius:50px;
    padding:0;
    overflow:hidden;
    margin: 0;
}

/* Grid logo đối tác */
.row-doi-tac{
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 0;
    align-items: center;
}

/* reset css của Flatsome */
.row-doi-tac > .col{
    max-width: unset !important;
    flex-basis: unset !important;
    width: auto !important;
    padding: 0 !important;
}

/* box logo */
.row-doi-tac .col-inner{
    background: #fff;
    border-radius: 20px;
    min-height: 95px;
    
    display:flex;
    align-items:center;
    justify-content:center;

    padding:3px;
}
.row-doi-tac .img-inner{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* logo */
.row-doi-tac img{
    max-width: 100px;
    max-height: 100%;
    object-fit: contain;
}
.sub_title1{
      font-size: 14px;
    color: black;
    position: relative;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    padding: 6px 15px 3px;
    gap: 15px;
    align-items: center;
    text-transform: uppercase;
    background-color: #fff;
    border-radius: 40px;
    margin-bottom: 10px;
    width: fit-content;
}
.text-doitac h2{
      font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    z-index: 2;
    position: relative;
    margin-bottom: 5px;
}
/* ===== Bố cục giống ảnh ===== */

/* hàng 1 */
.row-doi-tac > .col:nth-child(1){
    grid-column: 3 / span 3;
}
.row-doi-tac > .col:nth-child(2){
    grid-column: 6 / span 3;
}
.row-doi-tac > .col:nth-child(3){
    grid-column: 9 / span 3;
}

/* hàng 2 */
.row-doi-tac > .col:nth-child(4){
    grid-column: 1 / span 3;
}
.row-doi-tac > .col:nth-child(5){
    grid-column: 4 / span 3;
}
.row-doi-tac > .col:nth-child(6){
    grid-column: 7 / span 3;
}
.row-doi-tac > .col:nth-child(7){
    grid-column: 10 / span 3;
}

/* hàng 3 */
.row-doi-tac > .col:nth-child(8){
    grid-column: 3 / span 3;
}
.row-doi-tac > .col:nth-child(9){
    grid-column: 6 / span 3;
}
.row-doi-tac > .col:nth-child(10){
    grid-column: 9 / span 3;
}



/* Font chữ và màu sắc tiêu đề */
.footer-section h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 12px !important;
    text-transform: none !important; /* Giữ chữ hoa chữ thường nguyên bản */
}

/* Cấu hình text thường và danh sách menu */
.footer-section p, 
.footer-section ul li a {
    font-size: 16px !important;
    color: #333333 !important;
    transition: color 0.2s ease-in-out;
}

/* Hiệu ứng hover menu nhẹ nhàng */
.footer-section ul li a:hover {
    color: var(--primary-color) !important; /* Màu xanh đậm thương hiệu nhạt */
    text-decoration: none;
}
.footer-section{
  margin-top: 50px;
  border-top: 4px solid var(--primary-color);
}
/* Khử padding/margin mặc định của thẻ ul */
.footer-section ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.footer-section ul li {
    margin-bottom:0px !important;
    margin-left: 0 !important;
}

/* Khoảng cách của icon cột 1 */
.footer-section i {
    margin-right: 8px;
    font-size: 16px;
    display: inline-block;
    text-align: center;
}

/* --- CSS DÀNH RIÊNG CHO FORM ĐĂNG KÝ NHẬN TIN --- */
/* Style chuẩn theo ô "Nhập địa chỉ email ---------- Đăng ký" */
.footer-email-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.footer-email-form .form-group-custom {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999999; /* Đường gạch chân mảnh dưới input */
    padding-bottom: 5px;
    margin-top: 15px;
}

.footer-email-form input[type="email"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    color: black !important;
    flex: 1;
    height: auto !important;
}

.footer-email-form input[type="email"]::placeholder {
    color: #999999;
    font-style: italic;
}

.footer-email-form input[type="submit"] {
    background: transparent !important;
    color: #333333 !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: bold !important;
    padding: 5px 0 5px 15px !important;
    margin: 0 !important;
    text-transform: none !important;
    width: auto !important;
    height: auto !important;
    cursor: pointer;
    transition: color 0.2s;
}

.footer-email-form input[type="submit"]:hover {
    color: #000000 !important;
}

/* Ẩn các thông báo lỗi/thành công mặc định làm vỡ layout */
.footer-email-form .wpcf7-spinner {
    display: none !important;
}
.footer-email-form .wpcf7-response-output {
    margin: 10px 0 0 0 !important;
    padding: 5px !important;
    font-size: 13px;
}
/* Form đăng ký email footer */
.footer-email-form p{
    display:flex;
    align-items:center;
    margin:0;
    border-bottom:1px solid #cfc8c0;

    gap:15px;
}

/* bọc input */
.footer-email-form .wpcf7-form-control-wrap{
    flex:1;
}

/* input email */
.footer-email-form input[type="email"]{
    width:100%;
    border:none !important;
    background:transparent;
    box-shadow:none !important;
    padding:0;
    margin:0;
    font-size:18px;
    color:#333;
    height:40px;
}

.footer-email-form input[type="email"]::placeholder{
    color:#8b8b8b;
}

/* nút đăng ký */
.footer-email-form input[type="submit"]{
    border:none !important;
    background:none !important;
    padding:0;
    margin:0;
    min-height:auto !important;

    color:var(--primary-color) !important;
    font-size:18px;
    font-weight:500;
    cursor:pointer;
}

.footer-email-form input[type="submit"]:hover{
   color: var(--fs-color-secondary) !important;
   background: none;
   box-shadow: none !important;
}

/* bỏ outline mặc định */
.footer-email-form input:focus{
    outline:none;
    box-shadow:none !important;
}
/* Tiêu đề chính và mô tả tổng quan */
.spa-title {
   
    font-size: 26px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
    text-align: left; /* Căn trái theo ảnh */
}
.spa-desc {
   
    font-size: 15px;
    line-height: 1.6;
    color: #222222;
    text-align: left; /* Căn trái theo ảnh */
  
}

/* Định dạng các ô dịch vụ (Image Box) */
.spa-box {
    border: 1px solid #e4e4e4 !important;
    border-radius: 20px !important; /* Bo góc tròn mềm mại giống ảnh */
    box-shadow: none !important;
    padding: 25px 20px !important;
    height: 100%;
    transition: all 0.3s ease;
}

/* Hiệu ứng mờ nhẹ khi di chuột vào ô giống Flatsome */
.spa-box:hover {
    border-color: #d1d1d1 !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.04) !important;
}

/* Căn chỉnh khoảng cách hình ảnh bên trong box */
.spa-box .box-image {
    margin-bottom: 20px !important;
}

/* Tiêu đề dịch vụ bên trong box */
.spa-box-title {
   
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
    text-align: center;
}

/* Mô tả dịch vụ bên trong box */
.spa-box-desc {
    
    font-size: 16px;
    line-height: 1.5;
    color: #444444;
    text-align: center;
    margin-bottom: 0;
}
.spa-box .box-text{
  padding: 0;
}
.section-lieutrinhchung .col{
  padding-bottom:0;
}
.lienhe-header {
  color: black;
  display: flex;
  gap: 10px;

}
.lienhe-header .icon-phone-header{
  border-radius: 50%;
  height: 40px;
  width: 40px;
  display: flex;
align-items: center;
justify-content: center;
background-color: #f6f3ed;
padding: 5px;
}
.lienhe-header .icon-phone-header i{
  
  display: flex;
    justify-content: center;
    align-items: center;
}
.lienhe-header span{
  color: black;
  font-size: 14px;
}
.woof_redraw_zone > div{
	padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 15px;
}
.lienhe-header span a{
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 600;
}
.lienhe-header span a:hover{
  color: var(--fs-color-secondary);
}
.nav-left{
  justify-content: center;
}
.cart .ux-quantity{
width: 100%;
	display: flex;
   
    align-items: center;
}
.cart .ux-quantity::before{
  content:"số Lượng: ";
  margin-right: 10px;
}
.cart .single_add_to_cart_button,.cart .ux-buy-now-button{
  width: calc((100% - 16px) / 2);
  border-radius: 15px;
}


.header-button:hover a{
  background-color: var(--primary-color) !important;
  box-shadow: none;
}
.row-slider .flickity-viewport{
    min-height: unset !important;
}
.row-slider .flickity-slider{
    display:flex;
    align-items:stretch;
}
/* SỬA CSS ĐỂ FIX LỖI LEFT 100% */
.dichvu-item-wrapper {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%; /* Đảm bảo nhận đủ 100% width của col */
}

.dichvu-item {
    background: #f7f5f0;
    padding: 24px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    transition: .4s;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; /* Thay thế cho height: 100% để tránh lỗi tính toán của Flickity */
}

.dichvu-thumb {
    display: block; /* Chuyển thành khối để bọc thẻ a chuẩn */
    overflow: hidden;
    border-radius: 20px;
    line-height: 0;
}

.dichvu-thumb img {
    width: 100%;
   
    object-fit: cover;
    border-radius: 20px;
    padding: 5px;
    background: #fff;
    transition: .4s;
}

.dichvu-item:hover .dichvu-thumb img {
    background: var(--fs-color-secondary);
}

.dichvu-icon {
    width: 80px;
    height: 80px;
    margin: -40px auto 15px;
    background: var(--fs-color-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #f7f5f0;
    position: relative;
    z-index: 2;
    transition: .5s;
}

.dichvu-item:hover .dichvu-icon {
    transform: rotateY(360deg);
}

.dichvu-icon img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

.dichvu-title {
    font-size: 22px;
    font-weight: 700;
    margin: 10px 0;
}

.dichvu-title a {
    color: #000 !important;
    text-decoration: none !important;
    transition: color .3s ease;
}

.dichvu-title a:hover {
    color: var(--fs-color-primary) !important; /* Đổi màu khi hover tiêu đề */
}

.dichvu-excerpt {
  display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 15px;
    color: black;
    flex-grow: 1; /* Tự động kéo giãn để đẩy nút Xem chi tiết xuống dưới cùng */
}

.dichvu-link {
    display: inline-block;
    font-weight: 600;
    border-bottom: 1px solid;
    padding-bottom: 2px;
    color: #1c5253;
    text-decoration: none;
    align-self: center;
	font-size:14px
}
.dichvu-link svg{
  stroke:var(--primary-color);
  width: 10px;
  height: 10px;
}
.dichvu-link:hover{
  color: var(--fs-color-secondary);
}
.dichvu-link:hover svg{
  stroke: var(--fs-color-secondary);
}
.col-dichvu6 .dichvu-thumb img{
  height: unset;
}
.col-dichvu6 .dichvu-icon,.col-dichvu6 .dichvu-link, .col-dichvu6 .dichvu-excerpt{
  display: none;
}
.col-dichvu6 .dichvu-title{
  font-size: 16px;
}
.col-dichvu6 .dichvu-item {
  padding: 5px;
}
.col-dichvu6 .dichvu-item:hover .dichvu-title{
  color: var(--fs-color-secondary);
}
.text-datlich .subtitle{
      font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
    display: inline-block;
    text-transform: capitalize;
    color: var(--primary-color);
}
.text-datlich  .title {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 0;
}
.text-datlich .desc{
      font-size: 16px;
    margin-top: 15px;
}
.text-datlich .booking-hours{
  margin-top: 15px;
   list-style: none outside !important;
    margin-bottom: 0px !important;
    padding-left: 0px !important;
}
.text-datlich .booking-hours li{

  font-weight: 500;
    margin-bottom: 15px;
    padding-bottom: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid rgba(36, 36, 36, 0.15);
    margin-left: 0 !important;
}
.col-datlich2 .col-inner{
      padding: 10% 10% 10% 5% !important;
}

.col-formdatlich .col-inner{
  border-radius: 25px;
}
.col-formdatlich .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
}

/* Base style cho các ô Input, Select, Textarea */
.booking-form input[type="text"],
.booking-form input[type="tel"],
.booking-form input[type="email"],
.booking-form input[type="date"],
.booking-form select,
.booking-form textarea {
    width: 100%;

    border: 1px solid #fff;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 15px;
    background-color: #fff;
    color: #333;
    outline: none;
    
}

/* Chia cột linh hoạt */
.triple-cols .form-group { flex: 1; }
.dual-cols .form-group { flex: 1; }
.dual-cols .time-slots-container{
  height: fit-content;
  min-height: 142px;
}
.mix-layouts > div{
  max-width: calc((100% - 15px) / 2);
}
/* Tùy biến khung Chọn thời gian (Radio Buttons ẩn hình tròn gốc) */
.time-slots-container {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
}
/* Chống bôi đen chữ khi click nhanh vào ô thời gian */
.time-slots label,
.time-slots input[type="radio"] + span {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Chuẩn chung */
}
.time-slots-container .section-label {
    display: block;
    margin-bottom: 10px;
    color: #333;
    font-weight: 500;
}
.time-slots .wpcf7-list-item {
    display: inline-block;
    margin: 5px !important;
}
.time-slots .wpcf7-list-item-label::before,.time-slots .wpcf7-list-item-label::after{
  display: none;
}
.time-slots label {
    cursor: pointer;
    position: relative;
    display: block;
}
/* Ẩn dấu chấm tròn mặc định của Radio CF7 */
.time-slots input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Giả lập ô bấm giờ */
.time-slots input[type="radio"] + span {
    display: block;
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    text-align: center;
    font-size: 14px;
    transition: all 0.2s ease;
}
/* Hiệu ứng khi được chọn hoặc đưa chuột vào */
.time-slots input[type="radio"]:checked + span,
.time-slots label:hover span {
    border-color: var(--fs-color-secondary);
    background-color: #fff8f6;
    font-weight: bold;
}

/* Định dạng riêng ô Textarea (Nội dung) */
.booking-form textarea {
    height: 100%;
    height: 154px;
    resize: none;
    margin-bottom: 0;
}

/* Nút Submit */
.form-submit {
    text-align: right;
    margin-top: 15px;
}
.booking-form input[type="submit"] {
    background: #333;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}
.booking-form input[type="submit"]:hover {
    background: #555;
}
/* CONTAINER CHỨA THỜI GIAN */
.time-slots {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Chia đều 6 cột cố định giống ảnh */
    gap: 10px; /* Khoảng cách giữa các ô */
    width: 100%;
}

/* Xóa bỏ định dạng thừa của thẻ p mặc định trong CF7 nếu có */
.time-slots p, 
.time-slots .wpcf7-form-control-wrap,
.time-slots .wpcf7-radio {
    display: contents; /* Giúp bỏ qua các thẻ bọc ngoài trung gian để grid nhận diện đúng item */
}

/* ĐỊNH DẠNG MỖI Ô CHỌN GIỜ */
.time-slots .wpcf7-list-item {
    position: relative;
    margin: 0 !important; /* Xóa margin mặc định của CF7 */
    display: block;
    cursor: pointer;
}

/* ẨN INPUT GỐC NHƯNG VẪN ĐỂ NÓ PHỦ ĐẦY Ô ĐỂ ĐÓN CLICK */
.time-slots input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 2; /* Nằm trên cùng để trực tiếp nhận sự kiện click chuột */
}

/* GIẢ LẬP GIAO DIỆN Ô BẤM GIỜ */
.time-slots .wpcf7-list-item-label {
    display: block;
    padding: 10px 5px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    color: #333;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1; /* Nằm dưới input để không chặn click */
    
    /* Chống bôi đen chữ khi click nhanh (lỗi trước đó) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* HIỆU ỨNG HOVER KHI ĐƯA CHUỘT VÀO */
.time-slots .wpcf7-list-item:hover .wpcf7-list-item-label {
    border-color: var(--fs-color-secondary);
    background-color: #fff8f6;
}

/* TRẠNG THÁI KHI ĐƯỢC CHỌN (CHECKED) */
.time-slots input[type="radio"]:checked + .wpcf7-list-item-label {
    border-color: var(--fs-color-secondary);
    background-color: #fff8f6;
    font-weight: bold;
    box-shadow: inset 0 0 0 1px var(--fs-color-secondary); /* Tạo viền đậm nét hơn giống ảnh */
}

.section-dat-lich form{
  margin-bottom: 0;
}
.section-dat-lich .section-bg {
  border-radius: 20px;
}
.faq-title p{
      color: black;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.4;
    z-index: 2;
    position: relative;
    margin-bottom: 15px;
}
/* Sticky cột trái FAQ */
.col1-faq {
    position: sticky;
    top: 100px; /* chỉnh khoảng cách với header */
    align-self: flex-start;
}
.row-faq {
    overflow: visible !important;
}
a.yith-woocompare-popup-close{
  top:120px
}
.woocommerce-notices-wrapper{
	margin-bottom:10px
}
span.amount{
  font-size: 16px;
}
.product-quick-view-container .price{
  font-size: 16px;
}

.single-product .price,.single-product span.amount{
  font-size: 16px;
}
.sidebar-wrapper span.amount{
  font-size: 14px;
}
.absolute-footer .clearfix{
  display: flex;
  justify-content: center;
  color:white
}
.bean-form-2 input::placeholder, 
.bean-form-2 textarea::placeholder {
  color: black !important; /* Thay màu bạn muốn vào đây */
  opacity: 1;     /* Firefox mặc định bị mờ, thêm dòng này để màu lên chuẩn nhất */
}
 @media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
	 .col-baner-vechungtoi .col-inner{
	 margin-right: 0;
        margin-left: 30px;
        margin-bottom: 50px;
}

	 
	#ext-bottom-navigation{
		display:block !important;
		min-height:65px;
	}
	#ext-bottom-navigation .bottom-navigation-item .text {
    font-size: 11px;
    line-height:unset;
    margin-top: 2px;
    text-align: center;
}
}
#ext-bottom-navigation .bottom-navigation-item .icon{
	height:unset
}
.bottom-navigation-item a{
	background:none !important;
	box-shadow:none;
	border:none !important;
	color:black !important;
}
#ext-bottom-navigation{
	background-color:unset;
	box-shadow:none !important;
	z-index:100 !important
}
#ext-bottom-navigation .bottom-navigation-item a{
	padding-bottom:2px !important
}
.bottom-navigation-items .bottom-navigation-item:nth-child(3) .text{
	padding: 0px 8px;
        background-image: linear-gradient(92.83deg, #0E68C8 0, #02A4A5 100%);
        border-radius: 30px;
        color: white;
        display: inline-block;
	   width:fit-content;
}
.bottom-navigation-items .bottom-navigation-item:nth-child(3) .icon{
	left: 50%;
        position: absolute;
        transform: translateX(-50%);
        background-image: linear-gradient(92.83deg, #f90000 0, #950099 100%);
        width: 50px !important;
        height: 50px !important;
        border-radius: 50%;
        top: -15px;
        text-align: center;
        box-shadow: rgb(0 0 0 / 15%) 0 -3px 10px 0px;
        border: 2px solid #fff;
	display:flex;
	align-items:center;
	align-items:center;
	max-height:50px !important
}
.bottom-navigation-items .bottom-navigation-item:nth-child(3) a{
	display:flex !important;
	flex-direction:column;
	justify-content:end !important;
	align-items:center;
}
.bottom-navigation-items .bottom-navigation-item:nth-child(3) .icon img{
	        max-width: 20px !important;
        height: auto !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
.bottom-navigation-items:after{
	        content: "";
        position: absolute;
        pointer-events: none;
        background-image: url(/wp-content/uploads/2026/05/icon1111.svg);
        background-color: unset;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100%;
        box-shadow: unset;
        height: 65px;
        width: 100%;
        margin-left: 0;
        margin-bottom: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
}
.bottom-navigation-item:nth-child(3) .icon{
    position:relative;
    border-radius:50%;
}

.bottom-navigation-item:nth-child(3) .icon::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    animation:pulse-call 1.8s infinite;
}

@keyframes pulse-call{
    0%{
        box-shadow:0 0 0 0 rgb(59 57 153 / 60%);
    }

    70%{
        box-shadow:0 0 0 15px transparent;
    }

    100%{
        box-shadow:0 0 0 0 transparent;
    }
}
.bean-btn1{
  border: none;
  position: relative;
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-align: center;
    padding: 10px 25px;
    border-radius: 50px;
    display: inline-block;
    color: #fff;
    background-color: var(--primary-color);
    transition-delay: 1.5s;
    margin-top: 15px;
}
.bean-btn1::before{
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    position: absolute;
    width: 200%;
    height: 200%;
    content: "";
    top: -200%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
    background-color: white;
}
.bean-btn1:hover::before{
      top: -40%;
}
.bean-btn1 .btn-wrap1{
      position: relative;
    z-index: 1;
    float: left;
    overflow: hidden;
    display: inline-block;
    text-transform: capitalize;
    line-height: 22px;
}
.btn-wrap1 .text-one1{
  position: relative;
    display: block;
    color: #fff;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.btn-wrap1 .text-two1{
  position: absolute;
    top: 100%;
    display: block;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.bean-btn1:hover .text-one1{
  -webkit-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    transform: translateY(-150%);
}
.bean-btn1:hover .text-two1{
      color: var(--primary-color);
      top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-wrap1 svg{
      width: 10px;
    height: 10px;
    margin-top: -2px;
    margin-left: 8px;
}
.bean-submit{
  margin-bottom: 0;
  margin: 0;
  padding: 0;
  min-height: unset;
}
.btn-wrap1 svg line{
      fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
}
.bean-btn1:hover svg line{
  stroke: var(--primary-color) !important;
}
/* Thêm icon FontAwesome vào sau chữ Đặt lịch */
.header-button a[href="/dat-lich"] span::after {
    content: " \f073"; /* Mã icon FontAwesome */
    font-family: "Font Awesome 7 pro"; /* Hỗ trợ mọi phiên bản */
    font-weight: 300; /* Bắt buộc phải có font-weight để hiện icon */
    margin-left: 8px; /* Khoảng cách giữa chữ và icon */
    display: inline-block;
}
.text-giai-dap .textlong{
	font-size: 14px;
    color: black;
   
    font-weight: 600;
   width:fit-content;
    justify-content: center;
    padding: 6px 15px 3px;
    gap: 15px;
    align-items: center;
    text-transform: uppercase;
    background-color: #f6f3ed;
    border-radius: 40px;
    margin-bottom: 5px;

}
.custom-counter-item .title{
	text-transform:capitalize;
	color:black
}
.sub-menu{
	border:none !important
}
#footer .wpcf7-response-output{
	color:black
}
/* Mobile bỏ sticky */
@media (max-width: 849px) {
    .col1-faq {
        position: relative;
        top: unset;
    }
	.content .num{
		font-size:24px
	}
	.row-doi-tac{
		gap:7px
	}
}
/*=========================
RESPONSIVE
=========================*/
@media(max-width:1024px){
	.col-baner-vechungtoi .flickity-viewport{
	max-height:370px !important
}
	.nhan-vien-info-box{
		 padding: 15px 50px 15px 10px;
	}
	.row3-section2 {
		padding-bottom:0 !important;
		margin-bottom:0 !important
	}
	.section2 .box-contact{padding-left:0}
	.title-banner div{
		font-size:32px
	}
	.text-section2 h2{
		font-size:30px;
		line-height:normal
			
	}
	.text-section2  h2 b{

    font-size: 42px;
}
  .text-chay-tong .text-chay p {
    font-size:90px;
}
  
  /* Định dạng riêng ô Textarea (Nội dung) */
.booking-form textarea {
   
    height: 204px;
   
}
  .time-slots {
        grid-template-columns: repeat(4, 1fr); /* Màn vừa chia 4 cột */
    }
  #logo {
    width: 150px !important;
  }
     /* Khung chứa menu */
    .header-inner .flex-col.hide-for-medium.flex-left.flex-grow{
        overflow:hidden;
        position:relative;
        max-width:100%;
    }

    /* Menu trượt ngang */
    .header-inner .flex-col.hide-for-medium.flex-left.flex-grow 
    .header-nav.header-nav-main{

        display:flex!important;
        flex-wrap:nowrap!important;

        overflow-x:auto;
        overflow-y:hidden;

        white-space:nowrap;
        scroll-behavior:smooth;
        scrollbar-width:none;
        justify-content: space-around;

        width:80%;
    }

    /* Ẩn thanh scroll */
    .header-nav.header-nav-main::-webkit-scrollbar{
        display:none;
    }

    /* Item không xuống dòng */
    .header-nav.header-nav-main > li{
        flex:0 0 auto;
    }

    /* Chữ menu */
    .header-nav.header-nav-main > li > a{
        padding:0;
        font-size:15px;
        white-space:nowrap;
    }

    /* Dropdown giữ nguyên */
    .header-nav .nav-dropdown{
        white-space:normal;
    }
.bean-prev,
.bean-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:30px;
    height:30px;
    border-radius:50%;
    border:0;
    z-index:99;
    font-size: 30px;
    padding: 0 !important;
}

.bean-prev{
    left:470px;
}

.bean-next{
    right:-20px;
}

  .nhan-vien-inner{
    height: 320px !important;
  }
  .row-dichvu{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .row-dichvu .col{
    min-width: 50%;
  }
  .col-8-section-choose .text-section-choose, .icon-box-choose,.icon-box-choose .icon-box-text{
    max-width: 100% !important;
  }
  .slide-phanhoi .flickity-slider > .row{
    max-width: 450px !important;
  }
  .Giai-dap-trang-chu .accordion-title,.col-phanhoi .decs{
    font-size: 14px;
  }
  .col1-cauhoi,.col2-cauhoi{
    max-width: 50%;
    flex-basis: 50%;
  }
  .col-phanhoi h2,.text-section-choose h2{
    font-size: 30px;
	line-height:normal
  }
  .text-section-choose h2 b{
    font-size: 40px;
  }
  .col2-section7 > .col-inner .icon-box-text span{
    top:-100px
  }
  .row-coupon{
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom: 5px;
  }
  .row-coupon .col{
    min-width: 30%;
  }
	    .text-section2,.row3-section2{
      padding-left: 0 !important;
    }
		.btn_contact-phone .icon_phone{
		width:50px;
		height:50px;
	}
		.btn_contact-phone .box-contact-phone-info span{
		font-size:16px
	}

	.btn_contact-phone .box-contact-phone-info a{
		font-size:20px
	}
	.header-inner .lienhe-header{
		display:none
	}
	.text-doitac h2,.section-nhan-vien h2,.section5 h2,.text-giai-dap h2{
      font-size: 30px
}

}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.off-canvas:not(.off-canvas-center) .nav-vertical li>a{
		color:black !important
	}
	     .col-baner-vechungtoi .flickity-viewport {
       max-height:unset !important
    }
	.row-doi-tac{
		margin-left:0 !important;
		margin-right:0 !important;
	}
	.title-banner div{
		font-size:26px;
		margin-bottom:0;
		line-height:52px
	}
	.row-section2{
		padding:15px 0px
	}
	.nav>li>a>i{
		color:black !important
	}
.header-button a[href="/dat-lich"] span {
    display: none;
}
	.header-button a[href="/dat-lich"]{
		height:40px;
		width:40px;
		padding:0;
		display:flex;
		justify-content:center;
		align-items:center;
	}
.header-button a[href="/dat-lich"]::after {
    content: " \f073"; /* Mã icon FontAwesome */
    font-family: "Font Awesome 7 pro"; /* Hỗ trợ mọi phiên bản */
    font-weight: 300; /* Bắt buộc phải có font-weight để hiện icon */
    font-size:20px;
    display: inline-block;
}
 .text-chay-tong .text-chay p {
    font-size:80px;
}
.text-giai-dap h2{
    font-size: 30px;
    line-height: unset;
  }
.faq-title p{
  font-size: 28px;
}
.text-giai-dap h2 b{
  font-size: 42px;
}
.mix-layouts > div{
  min-width: 100%;
}
 .slider-nhan-vien .slide-nhan-vien-item {
        width: 50% !important; /* 2 cột cho iPad */
    }
 .form-row {
        flex-direction: column;
        gap: 10px;
    }
.nhan-vien-inner{
  height: 420px !important;
}



    .bean-form-2 h2{
        font-size:30px;
    }

    .service-lieu-trinh{
        grid-template-columns:1fr;
        gap:15px;
    }
    .header-image .section-content{
      padding: 0 10px;
    }
    .header-image .section-content .entry-title{
      font-size: 30px;
      text-align: left;
    }
    .text-lien1 h2{
  font-size: 30px;
 
}
.content-nhan-vien > .row{
  flex-direction: column;
}
.content-nhan-vien > .row > .col{
          flex-basis: 100%;
        max-width: 100%;
}
 .row-coupon .col{
    min-width: 60%;
  }
.row-0-padding-bottom{
  padding-bottom: 15px;
  
}
.row-0-padding-bottom .col{
  padding-bottom: 15px;
}
.row-phanhoi{
    grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "info_1 info_1"
            "info_2 info_3";
  }
  .col-phanhoi .decs{
    max-width: 100%;
  }
  .bean-form{
        padding:25px;
    }

    .bean-grid{
        grid-template-columns:1fr;
    }

    .bean-form h2{
        font-size:30px;
    }

    .bean-submit{
        width:100%;
    }

    .col1-cauhoi,.col2-cauhoi{
    max-width: 100%;
    flex-basis: 100%;
  }
      .slide-phanhoi .flickity-slider > .row {
        max-width: unset !important;
    }
    .content-dich-vu > .row{
      flex-direction: column-reverse;
    }
    .content-dich-vu > .row > .col{
              flex-basis: 100%;
        max-width: 100%;
    }
	.title-banner h2{
		font-size:16px;
		margin-bottom:0
	}
	.dichvu-title{
		margin:0
	}
	.dichvu-icon{
		margin-bottom:0
	}
	.custom-counter-item{
		justify-content:center;
		align-items:center
		
	}
	.custom-counter-item .content .num{
		width:fit-content
	}
	.row-dichvu .col {
        min-width: 70%;
    }
	.row-section2 > .col > .col-inner{
		padding:15px !important
	}
	.text-section2 div{
		font-size:14px;
	}
	.spa-box-title{
		font-size:17px
	}
	.spa-box-desc{
		font-size:16px
	}
	.absolute-footer{
		margin-bottom:70px
	}
}
@media(max-width:700px){
	.box_row_2{
		display:flex;
		flex-direction:column-reverse
	}
	.add-to-cart-container .cart{
		display:flex;
		flex-direction:column;
	}
	.add-to-cart-container > .cart > *{
		width:100%
	}
	.col-danhgia .box-image{
		    max-width: 84px !important;
    height: 84px !important;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
		padding-right:10px;
	}
	.col-danhgia b{
		color:var(--primary-color)
	}
	.col-danhgia .box {
		display:flex;
		flex-direction:row;
	}
	.row-phanhoi{
		padding:0;
		margin:0 ;
	}
	.row-phanhoi > .col{
		padding-bottom:0;
	}
	.col-phanhoi> .col-inner{
		padding:15px;
	}
	.image-box-phanhoi .box-image{
		width:64px !important;
		height:64px !important;
	}
	.image-box-phanhoi{
		display:flex;
		flex-direction:row
	}
	.row-doi-tac .img-inner{
		padding:20px 15px;
	
	}
	.row-doi-tac .col-inner{
		min-height:unset;
		max-height:60px;
			border-radius:10px
		
	}
	.absolute-footer{
		margin-bottom:20px
	}
	.product-small:hover .box-text{
		transform:unset
	}
		.text-doitac h2,.section-nhan-vien h2,.section5 h2{
      font-size: 20px
}
	.product-small:hover .custom-hover-buttons{
		display:none
	}
	.section-lieutrinhchung .col{
		padding-bottom:15px
	}
	.btn_contact-phone .box-contact-phone-info span,.custom-counter-item .title{
		font-size:14px
	}
	.row-new > *:nth-child(1),
.row-new > *:nth-child(3) {
    border-right: 1px solid #dedede;
}
	.row-new .col{
		margin-bottom:15px
	}
	.custom-counter-item{
		flex-direction:column
	}
	.custom-counter-item .content{
		display:flex;
		flex-direction:column;
		align-items:center
	}
	.btn_contact-phone .icon_phone{
		width:44px;
		height:44px;
	}
	.btn_contact-phone .box-contact-phone-info a{
		font-size:16px
	}

	.bean-form{
		text-align:center
	}
	.title-banner h2,.row-dichvu p,.col-dichvu-trang p, .text-noibat p,.text-section-choose .text-0,.text-danh-gia p,.text-giai-dap .desc,.section-nhan-vien p{
		font-size:14px
	}
		.title-banner div{
		font-size:26px
	}
		.title-banner div{
		font-size:24px
	}
	.row3-section2{
		grid-template-columns: repeat(1, 1fr);
		padding-bottom:0 !important;
		margin-bottom:0 !important
	}
	.section2 .box-contact{
		padding-left:0
	}
		.text-section2 h2{
		font-size:20px;
		
	}
	.icon-box-section2 h3{
		font-size:16px;
		
	}

		.text-section2  h2 b{

    font-size: 28px;
}
  .row-phanhoi {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:         "info_1 info_1"   
                                     "info_2 info_2" 
                                     "info_3 info_3";
    
}
.title-banner h2{
  font-size: 14px;
  margin-bottom: 0;
}
.title-banner > div{
  font-size: 28px;
  line-height: unset;
  margin-bottom: 0;
}
.btn-style-three{
  padding: 5px 15px;
}
.btn-style-three .text-one{
  font-size: 14px;
}
.btn-style-three .text-two{
  font-size: 14px;
}
  .text-section-choose h2{
    font-size: 20px;
  }
  .text-section-choose h2 b{
    font-size: 28px;
  }
  .text-chay-tong .text-chay p {
    font-size:60px;
}
.tab-sp-trangchu ul{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: start;
}
.tab-sp-trangchu ul li{
  min-width: 60%;
  display: flex;
  justify-content: start;
}
  .text-giai-dap h2 b{
    font-size: 28px;
  }
  .text-giai-dap h2{
    font-size: 20px;
  }
   .spa-title { font-size: 22px; }
    .spa-desc { font-size: 14px; }
    .spa-box { margin-bottom: 20px; }
   .slider-nhan-vien .slide-nhan-vien-item {
        width: 100% !important; /* 1 cột cho điện thoại */
    }
    .text-lien1 h2{
  font-size: 20px;
  
 
}
.bean-form-2 h2{
        font-size:20px;
    }
   .time-slots {
        grid-template-columns: repeat(3, 1fr); /* Màn điện thoại chia 3 cột nhìn cho rõ */
    }
    .mix-layouts > div{
  max-width: unset;
}
  .nhan-vien-inner{
    height: 520px !important;
  }
  .text-doitac h2{
      font-size: 20px
}
  .row-coupon .col{
    min-width: 80%;
  }
  .row-dichvu .col{
    min-width: 100%;
  }
  .icon-box-choose .icon-box-text{
    grid-template-columns: 2fr;
  }
  .icon-box-choose .icon-box-img{
        align-items: start;
  }
  .header-image .section-content .entry-title{
    font-size: 26px;
  }
  
}


@keyframes scroll{
  0% {
    transform: translateX(0);
}
100% {
    transform: translateX(calc(-100% - 0px));
}
}


@keyframes ripple{
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
}
30% {
    opacity: 0.4;
}
100% {
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
    opacity: 0;
}
}
@keyframes circleanima{
  0% {
    opacity: 0.1;
}
40% {
    opacity: 0.4;
}
100% {
    width: 200%;
    height: 200%;
    opacity: 0;
}
}



























.entry-content {
  color: #212529;
  font-size: 15px;
  font-weight: 400;
  line-height: 28px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.entry-content figure {
  background: #fff;
  border: 1px solid #f0f0f0;
  padding: 5px 3px 10px;
  text-align: center;
}

.entry-content h6 {
  font-size: 15px;
}

.entry-content h5 {
  font-size: 17px;
}

.entry-content h4 {
  font-size: 17px;
}

.entry-content h3 {
  font-size: 18px;
}

.entry-content h2 {
  font-size: 20px;
  line-height: 1.5;
}

.entry-content h1 {
  font-size: 25px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.entry-content p {
  color: #333;
  margin-bottom: 15px;
  font-size: 16.5px;
  line-height: 1.6;
}

#content ul,
.entry-content ul {
  list-style: disc;
  padding-left: 20px;
  padding-bottom: 5px;
}

.entry-content ul li {
  color: #333;
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 16.5px;
}

.entry-content ul li a {
  color: #007bff;
}

#content ol,
.entry-content ol {
  list-style: decimal;
  padding-left: 18px;
  padding-bottom: 5px;
  font-size: 16.5px;
}

.entry-content ol li {
  color: #333;
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 16.5px;
}

.entry-content ol li a {
  color: #ff5912;
}

.entry-content a {
  font-weight: 700;
}

.entry-content blockquote {
  background: #f3f3f3;
  color: #868686;
  display: block;
  font-size: 16px;
  line-height: 23px;
  margin: 0 0 20px;
  padding: 15px 20px 15px 45px;
  position: relative;
  text-align: justify;
}

.entry-content blockquote p {
  margin-bottom: 0;
}

.entry-content blockquote:before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 3px;
  background: var(--primary-color);
  content: "";
}

.entry-content code {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  font-size: 0.85rem;
  color: #e83e8c;
  font-size: 15px;
}
.entry-content > div{
  overflow: auto;
}
.entry-content table {
  width: 100%;
  height: auto;
  overflow: auto;
}

.entry-content table > tbody > tr > td,
.entry-content table > tbody > tr > th,
.entry-content table > tfoot > tr > td,
.entry-content table > tfoot > tr > th,
.entry-content table > thead > tr > td,
.entry-content table > thead > tr > th,
.term-description table > tbody > tr > td,
.term-description table > tbody > tr > th,
.term-description table > tfoot > tr > td,
.term-description table > tfoot > tr > th,
.term-description table > thead > tr > td,
.term-description table > thead > tr > th {
  border: 1px solid #ddd;
  padding: 7px 10px !important;
  font-size: 16.5px !important;
  width: auto !important;
}

.entry-content iframe {
  margin: auto;
}

.entry-content .syntaxhighlighter {
  padding: 10px 0;
}