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

/*************** ADD CUSTOM CSS HERE.   ***************/
h1, h2, h3, h4, h5, h6, .heading-font, .banner h1, .banner h2{
	letter-spacing: 0.095rem;
}
h2, .h2{
	font-size: 48px;
}
.h4, h4 {
    font-size: 20px;
}
.counters h4{
	font-size: 48px;
	font-family: "Hanken Grotesk", sans-serif;
}
.carousel-wrapper .flickity-page-dots {
	bottom: 0!important;
}
.box-image img {
    border-radius: 12px !important;
}
.tab-panels .entry-content {
    padding: 0;
    width: 100%;
}
.nav-dropdown {
    color: #000000;
}
.box.product-small .product-title a {
    display: inline-block;
    line-height: 1.6 !important;
}
.carousel-wrapper, .slider:not(.flickity-enabled) {
    width: 100%;
}
.ux-carousel-force-layout {
    position: absolute !important;
    visibility: hidden !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.nav a{
	--reversed-link-gap: min(100%, 1.35em);
	background: linear-gradient(to right, currentColor, currentColor) 0
    var(--reversed-link-gap) / 0 1px no-repeat;
  background-position-x: right;
	background-position-y: bottom;
  transition: background-size 0.5s cubic-bezier(0.3, 1, 0.3, 1)!important;
}
.nav a:not(role=tab):hover{
    background-position-x: left;
    background-size: 100% 1px;
}

.button{
	font-weight: 600;
	font-size: 1rem;
	border-color: transparent;
	border: none;
}

body .white{
	color: #000000 !important;
}

.bg-gradient-gold, .nav-pills .tab.active a, .woocommerce-tabs .nav-pills>li.active>a {
    background: linear-gradient(45deg, #fcc82f 0%, #9e6f01 100%)!important;
	border-radius: 0.5rem !important;
    padding: 0 20px;
}

.button.primary span{
	line-height: 1!important;
}
.button.primary{
	font-size: 12px;
    text-transform: uppercase !important;
    padding: 1rem 2rem;
    line-height: 12px;
    letter-spacing: 0.1em;
	border: none!important;
}


/* Header Text Slide */
.header-text-slide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 30px;
  gap: 15px;
  color: inherit;
  min-width: 400px;
}

.text-slide-slider-wrapper {
  position: relative;
  height: 30px;
  width: 400px;
  overflow: hidden;
}

.text-slide-slider {
  width: 100%;
  height: 100%;
}

.text-slide-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.header-text-slide button {
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: opacity 0.3s;
}

.header-text-slide button:hover {
  opacity: 0.6;
}

.header-text-slide .icon {
  width: 14px;
  height: 14px;
}

/* Vertical Slide Logic */
.header-text-slide.direction-btu .text-slide-slider-wrapper,
.header-text-slide.direction-utb .text-slide-slider-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-text-slide.direction-btu .text-slide-slider {
  transform: rotate(90deg);
  width: 30px;
  height: 400px;
}

.header-text-slide.direction-btu .text-slide-item {
  transform: rotate(-90deg);
  width: 400px;
  height: 30px;
}

.header-text-slide.direction-utb .text-slide-slider {
  transform: rotate(-90deg);
  width: 30px;
  height: 400px;
}

.header-text-slide.direction-utb .text-slide-item {
  transform: rotate(90deg);
  width: 400px;
  height: 30px;
}

/* LTR (Horizontal) - Reset if needed */
.header-text-slide.direction-ltr .text-slide-slider-wrapper {
  display: block;
}
.header-text-slide.direction-ltr .text-slide-slider {
  transform: none;
  width: 100%;
  height: 100%;
}
.header-text-slide.direction-ltr .text-slide-item {
  transform: none;
  width: 100%;
  height: 30px;
}

@media (max-width: 550px) {
  .text-slide-slider-wrapper {
    width: 80%;
  }
  .header-text-slide.direction-btu .text-slide-slider,
  .header-text-slide.direction-utb .text-slide-slider {
    height: 250px;
  }
  .header-text-slide.direction-btu .text-slide-item,
  .header-text-slide.direction-utb .text-slide-item {
    width: 80%;
  }
}


/* Marquee Text Element */
.marquee-text-wrapper {
  overflow: hidden;
  width: 100%;
  display: flex;
  white-space: nowrap;
  padding: 1rem 0;
  background: transparent;
  user-select: none;
}

.marquee-text-content {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 20s) linear infinite;
  animation-direction: var(--marquee-direction, normal);
  will-change: transform;
}
.marquee-text-content:hover {
    animation-play-state: paused;
}
.marquee-text-item {
  flex-shrink: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
	white-space: nowrap;
}
.marquee-text-item ul{
	margin-bottom: 0!important;
}
.marquee-text-item li{
	display: inline-block;
	white-space: nowrap;
	margin-bottom: 0!important;
	margin-right: 20px;
}
.marquee-text-item li::before {
  content: "•";             /* Inserts a bullet character */
  color: #333;              /* Customizes dot color */
  font-weight: bold;        /* Increases dot visibility */
  display: inline-block;    
  width: 1em;               /* Controls width of the bullet box */
  margin-right: 5px;        /* Sets spacing between dot and text */
}
.marquee-product-page .marquee-text-item {
  background-image: url("data:image/svg+xml,%3Csvg class='icon icon-sketch-underline' viewBox='-158.17 -22.0172 289.2 53.8' stroke='%23ffddbf' fill='none' role='presentation' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-width='8' pathLength='1' d='M -153.17 20.736 C -153.17 20.736 -135 -1 -118 -1 C -99 -1 -136.093 33.632 -117 26 C -105 18 -80 5 -74 1 C -51 -10 -63 9 -58.375 20.387 C -54.89 29.449 -26 3 -9 -1 C 14 -8 -17.599 24.918 1.917 22.827 C 21.434 20.735 37 3 49 0 C 62 -3 55.24 32.585 75 23 C 95 12 95 -1 114 -2'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: 0 30px;
  background-size: contain;
  padding-bottom: 40px;
  background-origin: content-box;
}

.marquee-text-wrapper.is-uppercase {
  text-transform: uppercase;
}

@keyframes marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.box-badge .box-text {
    transition: all .3s!important;
}


.tabbed-content .nav-pills{
	background: #f6f3f2;
    padding: 5px;
    border-radius: 8px;
    width: auto!important;
    margin: 0 auto;
}
.nav-pills>li>a {
    border-radius: 0.75rem;
	color: #000;
	padding: 0 20px;
    letter-spacing: 0.075rem;
}
.tab-panels .panel:not(.active) {
    width: 100%;
}
/* ==========================================================================
   Unistore Custom Carousel (ux_carousel)
   ========================================================================== */
.unistore-carousel {
  position: relative;
}

.unistore-carousel.has-stage-padding,
.unistore-carousel.slider-nav-outside {
  overflow: visible !important;
}

.unistore-carousel.has-stage-padding > .flickity-viewport,
.unistore-carousel.slider-nav-outside > .flickity-viewport {
  overflow: visible !important;
  /* Allow shadow and nav to bleed out to the sides */
  clip-path: inset(-50px -100vw -50px -100vw);
}

body .unistore-carousel .flickity-slider > * , body .unistore-carousel > .box{
  width: calc(100% / var(--col-lg)) !important;
  padding: 0 calc(var(--gap) / 2);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  backface-visibility: hidden;
}
ul.social-profile{
	margin-top: 10px;
}
ul.social-profile, .social-profile li {
    list-style: none;
    display: inline-block;
}

.social-profile img {
    width: 30px;
}

.footer-socials img{
	width: 50px;
}
.absolute-footer{
	display: none!important;
}
.ux-menu-link__link {
    line-height: 1.65rem;
    min-height: auto;
}
.addresses .ux-menu-link__icon {
    align-self: flex-start;
    margin-top: 6px;
}

.addresses .ux-menu-link {
	line-height: 1.35rem;
    margin-bottom: 10px !important;
}

.banner.rounded .banner-bg img, .img.rounded img{
	border-radius: 12px;
}

.product-images img {
    border-radius: 12px;
    border: none;
    opacity: 1;
}
.product-thumbnails a{
	border-radius: 12px;

}
.product-thumbnails img {
	opacity: 1;
}
.price-wrapper .price {
    display: block;
    margin-bottom: 15px;
}
.product-short-description {
    color: rgba(74, 74, 74, .85);
}
.panel.entry-content h2, .panel.entry-content .h2, .term-description h2, .term-description .h2 {
    font-size: 28px;
}
.wc-tabs.product-tabs a{
	font-size: 1rem;
}
.slider:not(.flickity-enabled) {
    width: 100% !important;
}
body .dots-bottom .carousel-wrapper .flickity-page-dots{
	bottom: -30px!important
}
/* Khung giới hạn chiều cao cho mô tả danh mục */
.term-description {
    position: relative;
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

/* Khi đã được click mở rộng ra */
.term-description.is-expanded {
    max-height: none !important; /* Bỏ giới hạn chiều cao */
}

/* Lớp phủ mờ dần (fade out) ở đáy khi chưa mở rộng */
.term-description::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Ẩn lớp phủ mờ khi nội dung đã được mở rộng */
.term-description.is-expanded::after {
    opacity: 0;
}

/* Nút Xem thêm / Thu gọn */
.term-description-toggle {
    display: inline-block;
    margin: 15px auto!important;
    padding: 6px 30px;
    background-color: #f1f1f1;
    color: #333;
    border-radius: 30px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #ddd;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.term-description-toggle:hover {
    background-color: #d2322d; /* Màu đỏ nổi bật giống nút Whatsapp của bạn */
    color: #fff;
    border-color: #d2322d;
}
.woocommerce-variation-add-to-cart, .single_add_to_cart_button, .cart .ux-quantity{
	display: none!important;
}
.gtranslate_wrapper{
    max-width: 160px;
    display: inline-block;
	font-size: 12px;
}
/* Style cho các ô input và textarea */
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"],
.custom-contact-form select,
.custom-contact-form textarea {
    background-color: #ffffff;
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Tạo hiệu ứng nổi nhẹ */
    color: #333;
}

/* Style riêng cho nút Submit */
.custom-contact-form .submit-custom {
    background-color: #0f0f0f !important; /* Màu đen như ảnh */
    color: #ffffff !important;
    border-radius: 6px;
    padding: 15px 50px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.wpcf7-spinner{
	display: grid;
}
.custom-contact-form .submit-custom:hover {
    background-color: #333333 !important; /* Đổi màu xám đậm khi hover */
}

/* Loại bỏ padding thừa của cột cuối cùng */
.custom-contact-form .pb-0 {
    padding-bottom: 0 !important;
}
.gt_switcher .gt_option {
    position: absolute !important;
}
.gt_switcher {
    padding-top: 3px;
}
.protect-lang .col-inner {
    align-items: center;
    display: flex;
}

.woocommerce-variation-price {
    font-size: 1.5em;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

	.carousel-wrapper .flickity-page-dots {
		display: none!important;
	}

	h2, .h2 {
		font-size: 36px;
	}
	.header-text-slide {
		min-width: 320px;
	}
}