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

@font-face {
font-family: Jost;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("./fonts/jost_n4.d47a1b6347ce4a4c9f437608011273009d91f2b7.woff2") format("woff2"),
   url("./fonts/jost_n4.791c46290e672b3f85c3d1c651ef2efa3819eadd.woff") format("woff");
}


@font-face {
font-family: Jost;
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("./fonts/jost_n6.ec1178db7a7515114a2d84e3dd680832b7af8b99.woff2") format("woff2"),
   url("./fonts/jost_n6.b1178bb6bdd3979fef38e103a3816f6980aeaff9.woff") format("woff");
}

@font-face {
font-family: Jost;
font-weight: 400;
font-style: italic;
font-display: swap;
src: url("./fonts/jost_i4.b690098389649750ada222b9763d55796c5283a5.woff2") format("woff2"),
   url("./fonts/jost_i4.fd766415a47e50b9e391ae7ec04e2ae25e7e28b0.woff") format("woff");
}

@font-face {
font-family: Jost;
font-weight: 600;
font-style: italic;
font-display: swap;
src: url("./fonts/jost_i6.9af7e5f39e3a108c08f24047a4276332d9d7b85e.woff2") format("woff2"),
   url("./fonts/jost_i6.2bf310262638f998ed206777ce0b9a3b98b6fe92.woff") format("woff");
}

:root {
    --typeHeaderSize: 26px;
    --typeBaseSpacing: 0.025em;
    --typeBaseSize: 14px;
    --typeBaseLineHeight: 1.2;
}

.h1,h1{
  font-size:calc(var(--typeHeaderSize)*0.85);
}

.h2,h2{
  font-size:calc(var(--typeHeaderSize)*0.73);
}

.h3,h3{
  font-size:calc(var(--typeHeaderSize)*0.62);
}

@media only screen and (min-width:769px){
  .h1,h1{
    font-size:var(--typeHeaderSize);
  }

  .h2,h2{
    font-size:calc(var(--typeHeaderSize)*0.85);
  }

  .h3,h3{
    font-size:calc(var(--typeHeaderSize)*0.65);
  }
}

.h4,h4{
  text-transform:uppercase;
  letter-spacing:0.3em;
  font-size:0.8em;
}

.h5,.h6,h5,h6{
  text-transform:uppercase;
  letter-spacing:0.3em;
  font-size:0.8em;
  margin-bottom:10px
}

@media only screen and (max-width:768px){

    .h5,.h6,h5,h6{
        margin-bottom:5px
    }
}

h1, h2, h3, h4, h5, h6, .heading-font, .banner h1, .banner h2 {
    font-family: Jost, sans-serif;
    font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px;
}
body {
    font-family: Jost, sans-serif;
}
.faux-select, body, button, input, select, textarea, p {
    font-family: var(--typeBasePrimary), var(--typeBaseFallback);
    font-size: calc(var(--typeBaseSize) * 0.92);
    letter-spacing: var(--typeBaseSpacing);
    line-height: var(--typeBaseLineHeight);
}
.accordion-inner{
    font-family: var(--typeBasePrimary), var(--typeBaseFallback);
    font-size: calc(var(--typeBaseSize) * 0.92);
    letter-spacing: var(--typeBaseSpacing);
    line-height: var(--typeBaseLineHeight);
}
@media only screen and (min-width: 769px) {
    .faux-select, body, button, input, select, textarea {
        font-size: var(--typeBaseSize);
    }
}
.faux-select,body,button,input,select,textarea{
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeSpeed;
}
.button{
    letter-spacing: 0.3em;
    line-height: 1.42 !important;
    font-weight: 300;
}
.button.is-outline:not(.icon){
    border: 1px solid #e8e8e1;
}

.button.is-outline:hover{
    border: 1px solid #000;
    color: #000;
    background: transparent;
}
.button.is-small {
    padding: 8px 14px;
    font-size: 12px;
}

a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    font-size: 11px;
    text-transform: uppercase;
        display: -webkit-box;
    -webkit-line-clamp: 2; /* Số dòng muốn hiển thị */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Tùy chọn: Để các khung sản phẩm đều nhau tăm tắp */
    /* Giả sử line-height của bạn là 1.3em, thì 2 dòng là 2.6em */
    min-height: 2.6em; 
    line-height: 1.5;
}
span.amount {
    color: #1c1d1d;
    font-weight: 300;
    white-space: nowrap;
    font-size: calc(var(--typeBaseSize) * 0.85);
    letter-spacing: var(--typeBaseSpacing);
}
.price-wrapper .product-page-price span.woocommerce-Price-amount.amount {
    font-size: 16px;
    font-weight: 400;
}
ins span.woocommerce-Price-amount.amount {
    font-weight: 400;
}
.price > span.woocommerce-Price-amount.amount {
    font-weight: 400;
}
.grid-tools {
    margin-bottom: 10px;
    padding: 0 10px !important;
    font-size: calc(var(--typeBaseSize) * 0.85);
}
a.quick-view {
    text-transform: capitalize;
    font-size: calc(var(--typeBaseSize) * 0.85);
    font-weight: 400;
}
.widget .is-divider {
    display: none;
}
.nav>li>a {
    font-size: .8em;
    color: #000;
}
body span.widget-title{
    font-size: 0.8em;
    margin-bottom: 20px;
    letter-spacing: 0.3em;
    display: inline-block;
}

.widget ul.menu>li>a{
    padding: 4px 0;
    font-size: calc(var(--typeBaseSize) * 0.85);
    line-height: 1.2;
}
.widget ul.menu li {
    margin-bottom: 0.25em;
    border: none !important;
}
.widget *{
    font-size: calc(var(--typeBaseSize) * 0.85);
    line-height: 1.2;
}

.button.icon {
    line-height: 2.19em !important;
}

.absolute-footer{
    font-size: calc(var(--typeBaseSize) * 0.85);
    color: #000;
}
.product-thumbnails .is-nav-selected a{
    border: 2px solid #000!important;
}

h1.product-title.product_title.entry-title {
    text-transform: uppercase;
    font-size: calc(var(--typeHeaderSize) * 0.85);
}

.single_add_to_cart_button{
    line-height: 50px !important;
    padding: 0;
    background-color: #FFFFFF !important;
    color: #000;
    border: 1px solid #000;
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}
.single_add_to_cart_button:hover{
    color: #000;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .05);
}
#sg-quick-buynow{
    width: 100%;
    border-radius: 3px;
    background-color: #000!important;
    color: #fff;
    display: block;
    opacity: 1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3em;
}
.whatsapp_btn {
    transition: all .2s ease-in-out;
    display: flex;
    line-height: 1;
    align-items: center;
    text-align: center;
    box-shadow: 0 0 0 1px #0000001a;
    padding: 11px 20px;
    justify-content: center;
    background: #000000;
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.whatsapp_btn .w_icon {
    display: flex;
    align-items: center;
    width: 25px;
    margin-right: 10px;
}
.whatsapp_btn .w_icon img.lazyload {
    width: 25px;
}
.sg_wrapper_add_to_cart_quantity {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sales-points{
list-style:none;
padding:0;
margin:25px 0
}

.quick-add-modal .sales-points{
display:none
}

.sales-point{
display:block;
margin-bottom:10px;
margin-left: 0 !important;
}

.sales-point:last-child{
margin-bottom:0;
}

.sales-point .icon{
position:relative;
width:25px;
height:25px;
margin-right:10px
}

.icon-and-text{
  display:flex;
  flex-wrap:nowrap;
  align-items:center
}
.accordion .toggle{
    right: 0;
    left: auto;
}
.accordion-title{
    border: 1px solid #e8e8e1;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.8em;
    display: block;
    line-height: 1.2;
    padding: 15px;
    text-align: center;
}
.accordion-item+.accordion-item .accordion-title{
    border-top: none!important;
}
.accordion-title.active{
    border-bottom: none!important;
    border-color: #e8e8e1!important;
    background: transparent;
    font-weight: 400;
}
.accordion-inner{
    border-color: #e8e8e1!important;
    border-right: 1px solid ;
    border-left: 1px solid ;
}

.accordion .accordion-item:last-child .accordion-inner{
    border-bottom: 1px solid #e8e8e1;
}

.product-section {
    border: none;
}

/** Countdown timer with labels below numbers in the header */
.sg-countdown-timer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-family: 'Orbitron', sans-serif !important;
    gap: 14px;
    text-transform: uppercase;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.sg-countdown-text {
    font-size: 18px;
    font-weight: 600;
    
}

.sg-countdown-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.sg-countdown-label {
    font-size: 10px;
    font-weight: 400;
}


.sg-countdown-number {
    font-size: 16px;
    font-weight: 600;
}

.benefits-container{
    padding: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.benifit-item{
    display: flex; 
    align-items: center; 
    margin-bottom: 12px;
}

.benifit-item img {

    width: 20px; height: 20px; margin-right: 8px;
}

.benefits-container .benifit-item:last-child{
    margin-bottom: 0!important;
}

/* Layout Grid cho 6 ảnh */
.gemini-related-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Chia thành 6 cột đều nhau */
    gap: 10px; /* Khoảng cách giữa các ảnh */
    margin-top: 20px;
}

/* Item container */
.gemini-rel-item {
    position: relative; /* Quan trọng để định vị tooltip */
    overflow: visible;
}

.gemini-rel-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    transition: opacity 0.3s;
}

/* Hiệu ứng mờ ảnh khi hover (tùy chọn) */
.gemini-rel-item:hover img {
    opacity: 0.8;
}

/* Định dạng Tooltip */
.gemini-tooltip {
    visibility: hidden;
    background-color: #333; /* Màu nền đen */
    color: #fff; /* Chữ trắng */
    text-align: center;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    
    /* Vị trí của tooltip */
    position: absolute;
    bottom: 110%; /* Hiện phía trên ảnh */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    
    /* Hiệu ứng xuất hiện */
    opacity: 0;
    transition: opacity 0.3s;
    
    /* Đảm bảo tooltip không bị quá rộng */
    width: max-content;
    max-width: 150px; 
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    pointer-events: none; /* Chuột xuyên qua tooltip */
}

/* Mũi tên nhỏ dưới tooltip (cho đẹp) */
.gemini-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Khi hover vào item thì hiện tooltip */
.gemini-rel-item:hover .gemini-tooltip {
    visibility: visible;
    opacity: 1;
}
.payment-icons--list li {
    list-style: none;
    margin: 5px !important;
}

/* Responsive: Trên mobile chỉ hiện 3 cột */
@media (max-width: 768px) {
    .gemini-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (min-width: 850px) {

    .vertical-thumbnails .col {
        padding: 0 0 10px !important;
        width: 90% !important;
    
    }
    .vertical-thumbnails{
      overflow: auto; /* Ensures content can still scroll if it overflows */

      /* For Internet Explorer and Edge */
      -ms-overflow-style: none;

      /* For Firefox */
      scrollbar-width: none;
                padding-right: 0 !important;
    }

    /* For Chrome, Safari, and Opera */
    .vertical-thumbnails::-webkit-scrollbar {
      display: none;
    }
}