/*
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.   ***************/
/* Montserrat Variable (normal) */
@font-face{
  font-family: 'Montserrat';
  src: url('/wp-content/fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Montserrat Variable (italic) */
@font-face{
  font-family: 'Montserrat';
  src: url('/wp-content/fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ===== Force toàn site dùng Montserrat thay vì Lato ===== */
body, html, button, input, select, textarea,
.entry-content, .ux-text, .nav, .tab,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
	color: black;
}

p, a, span, strong, em {
  font-family: 'Montserrat', sans-serif !important;}

/* Nếu theme có class riêng gọi Lato */
.ux-font-lato,
body.ux-font-lato * {
  font-family: 'Montserrat', sans-serif !important;
}

/* Đảm bảo font áp dụng luôn cho các component đặc biệt */
.header, .footer, .ux-header, .ux-footer,
.woocommerce, .woocommerce-page, .ux-products,
#content, #main, .tabbed-content, .nav-uppercase {
  font-family: 'Montserrat', sans-serif !important;
}



/* =========================
   MENU CHÍNH (giữ nguyên)
   ========================= */
#wide-nav .nav > li > a,
#wide-nav a.nav-top-link {
  position: relative;
  color: #0a0a0a !important;
  text-decoration: none;
  padding-bottom: 3px !important;  /* gạch sát hơn */
}
#wide-nav .nav > li > a::after,
#wide-nav a.nav-top-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #000;
  transition: width .3s ease;
}
#wide-nav .nav > li > a:hover::after,
#wide-nav a.nav-top-link:hover::after {
  width: 100%;
}

/* Ẩn divider trên menu như cũ */
.top-divider.full-width { display: none !important; }

/* =========================
   LINK CHỮ (không áp dụng cho: button & social)
   ========================= */
:root{
  --link-underline-color:#000;
  --link-underline-height:1px;
  --link-underline-offset:0; /* 0 = sát chữ */
}

/* Base: chỉ link chữ ở các vùng nội dung – loại trừ button & social */
.entry-content a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a),
.page-content  a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a),
.footer-wrapper a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a),
.widget        a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a),
.col-inner     a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a),
a.link-anim {
  position: relative;
  display: inline-block;     /* để ::after căn theo text */
  color: #0a0a0a;
  text-decoration: none;
}

/* Gạch ẩn ban đầu */
.entry-content a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a)::after,
.page-content  a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a)::after,
.footer-wrapper a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a)::after,
.widget        a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a)::after,
.col-inner     a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a)::after,
a.link-anim::after{
  content:"";
  position:absolute;
  left:0;
  bottom:var(--link-underline-offset);
  width:0;
  height:var(--link-underline-height);
  background:var(--link-underline-color);
  transition:width .3s ease;
}

/* Hover: chạy trái → phải */
.entry-content a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a):hover::after,
.page-content  a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a):hover::after,
.footer-wrapper a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a):hover::after,
.widget        a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a):hover::after,
.col-inner     a:not(.button):not(.ux-btn):not(.wpcf7-submit):not(.nav-top-link):not(.ux-menu-link__link):not(.footer-social a):hover::after,
a.link-anim:hover::after{
  width:100%;
}

/* =========================
   Bảo hiểm: tắt underline cho button & social nếu theme có rule khác
   ========================= */
a.button::before, a.button::after,
.button::before, .button::after,
.ux-btn::before, .ux-btn::after,
.wpcf7-submit::before, .wpcf7-submit::after,
.footer-social a::before, .footer-social a::after {
  content: none !important;
  display: none !important;
}


/* ===== Tăng khoảng cách giữa các tab ===== */
.tabbed-content .nav > li {
  margin: 0 30px; /* chỉnh khoảng cách giữa các tab */
}

/* ===== BUTTON TOÀN TRANG (KHÔNG ÁP DỤNG TRONG FOOTER) ===== */
/* Header + nội dung + WooCommerce */
.site-header button,
.site-header input[type="submit"],
.site-header input[type="button"],
.site-header a.button,
#content input[type="submit"],
#content input[type="button"],
#content a.button,
.wpcf7 form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid #0a0a0a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}


/* ========== Footer Social Icons ========== */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.footer-social a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  font-size: 40px;
  color: #ffffff;              /* icon màu trắng mặc định */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

/* Hiệu ứng hover chung */
.footer-social a:hover {
  background: #ffffff;         /* nền trắng khi hover */
  border-color: #ffffff;       /* viền trắng */
  transform: scale(1.1);
}

/* Màu thương hiệu cho từng social */
.footer-social a.facebook:hover {
  color: #1877f2;              /* Facebook xanh dương */
}
.footer-social a.instagram:hover {
  color: #e4405f;              /* Instagram hồng đỏ */
}
.footer-social a.threads:hover {
  color: #000000;              /* Threads đen */
}

/* ===== Header Search Form - Clean Luxury Style ===== */
.header-search-form-wrapper input[type="search"] {
  width: 220px;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  border: 1px solid #000;            /* viền xám nhạt tinh tế */
  background-color: #fff;
  color: #000;
  outline: none;
  box-shadow: none;
}

/* Khi hover vào - hơi sáng viền nhẹ */
.header-search-form-wrapper input[type="search"]:hover {
  border-color: #000;
}

/* Khi focus - xuất hiện shadow đen nhẹ */
.header-search-form-wrapper input[type="search"]:focus {
  border-color: #000;
  box-shadow: 0 0 6px rgba(0,0,0,0.25); /* bóng đen nhẹ, sang trọng */
}

/* Icon kính lúp tinh chỉnh màu và khoảng cách */
.header-search-form-wrapper .ux-search-submit i {
  color: #000;
  font-size: 15px;
}

.header-search-form-wrapper .ux-search-submit:hover i {
  color: #555;
}

/* Xóa override mặc định của theme Flatsome */
.form-flat input[type="search"],
.header-search-form-wrapper input[type="search"] {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  color: #000 !important;
}

/* ===== Icon User (header account icon) ===== */
.header .icon-user,
.header .icon-user:before,
.header .icon-user i {
  color: #000 !important;          /* màu đen chuẩn */
  fill: #000 !important;           /* nếu là SVG */
}

/* Hover - xám nhẹ */
.header .icon-user:hover,
.header .icon-user:hover:before {
  color: #555 !important;
  fill: #555 !important;
}

/* ===== Dropdown menu trong icon User ===== */
.account-item .nav-dropdown a {
  color: #000 !important;            /* chữ đen */
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Hover - chuyển đen đậm hơn */
.account-item .nav-dropdown a:hover {
  color: #111 !important;            /* đen đậm khi hover */
}

/* Tùy chọn: làm nền dropdown sáng hơn */
.account-item .nav-dropdown.nav-dropdown-default  {
  background: #fff !important;        /* nền trắng tinh tế */
  border:1px solid #000000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* bóng nhẹ */
}
.nav-dropdown-has-border .nav-dropdown {border:1px solid #000000;}

.logo-marquee-strip {
  overflow: hidden;
  position: relative;
  width: 100%;
  background: transparent;}

.marquee-container {
  display: flex;
  align-items: center;
  animation: scroll-logos 25s linear infinite;
  width: max-content;
}

.logo-item {
  flex: 0 0 auto;
}

.logo-item img {
  max-height: 60px; /* chỉnh kích thước logo */
  width: auto;
  display: block;
  margin: 0;
  padding: 0;
}

/* Hiệu ứng chạy ngang */
@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Nếu muốn dừng khi hover */
.logo-marquee-strip:hover .marquee-container {
  animation-play-state: paused;
}
/* Showing the single result */
.woocommerce-result-count,
.woocommerce-ordering {
  display: none !important;
}

/* Ẩn bảng chọn biến thể + nút Clear trên trang chi tiết */
.single-product .variations_form .variations,
.single-product .variations_form .reset_variations {
  display: none !important;
}

/* Ẩn thông báo “Please choose…” nếu có */
.single-product .woocommerce-variation.single_variation .woocommerce-variation-description,
.single-product .woocommerce-variation.single_variation .woocommerce-variation-price {
  /* tuỳ ý: giữ/ẩn giá biến thể. Nếu muốn hiện giá thì xoá dòng dưới */
  /* display: none !important; */
}

/* === PRODUCT PAGE BUTTONS === */
form.cart {
  display: flex;
  gap: 15px;
}

/* ADD TO BAG (trắng nền, đen chữ) */
form.cart .single_add_to_cart_button {
  flex: 1;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 0;
  transition: all 0.25s ease;
  border-radius: 0;
}
form.cart .single_add_to_cart_button:hover {
  background: #000 !important;
  color: #fff !important;
}

/* BUY NOW (đen nền, trắng chữ) */
form.cart .ux-buy-now-button {
  flex: 1;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 0;
  transition: all 0.25s ease;
  border-radius: 0;
}
form.cart .ux-buy-now-button:hover {
  background: #fff !important;
  color: #000 !important;
}

/* Căn đều 2 nút, bỏ khoảng trắng dư */
form.cart .button {
  margin: 0 !important;
}

/* === ACCORDION SECTION (DESCRIPTION, SHIPPING, POLICY...) === */

/* Tổng thể khối accordion */
details.mplx-item {
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 0;
  margin: 0;
}

/* Tiêu đề giống H3 */
summary.mplx-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #000;
  cursor: pointer;
  list-style: none; /* bỏ mũi tên mặc định */
  padding: 4px 0;
  transition: color 0.25s ease;
}

/* Biểu tượng + / - (mũi tên bên phải) */
summary.mplx-summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #000;
  transition: transform 0.3s ease, color 0.25s ease;
}

/* Khi mở (hiển thị dấu -) */
details[open] > summary.mplx-summary::after {
  content: "–";
}

/* Khi hover */
summary.mplx-summary:hover {
  color: #333;
}

/* Nội dung bên trong (đoạn text mô tả) */
details.mplx-item > div,
details.mplx-item > p {
  margin-top: 18px; /* tạo khoảng cách xa hơn giữa gạch và nội dung */
  color: #000;
  font-size: 15px;
  line-height: 1.6;
}

/* Giảm margin của đoạn cuối để khối không dính sát nhau */
details.mplx-item:last-child {
  margin-bottom: 10px;
}

/* ===== HERMÈS PRODUCT FIELDS (ACF) ===== */
/* Mỗi dòng: 2 cột (label | value) để nội dung dài tự wrap nhưng vẫn thẳng hàng */
.hermes-specs p{
  display: grid;
  grid-template-columns: 180px 1fr; /* nhãn cố định | nội dung chiếm phần còn lại */
  column-gap: 12px;
  align-items: start;
  margin: 0 20px;            /* giữ đúng khoảng cách ngang như bạn dùng */
  padding: 10px 0;
  border-bottom: 1px solid #f4f4f4;
  line-height: 1.6;
  font-size: 15px;
  color: #222;
  overflow-wrap: anywhere;   /* cho phép bẻ dòng nếu có chuỗi quá dài */
}

/* Nhãn bên trái luôn trên một dòng, không bị bẻ */
.hermes-specs p strong{
  width: auto;               /* không cần width nữa vì đã dùng grid */
  white-space: nowrap;
  font-weight: 600;
  color: #000;
  letter-spacing: .02em;
}

.hermes-specs p:last-child {
  border-bottom: none;
}

/* Mobile: thu nhỏ cột nhãn để dành chỗ cho nội dung */
@media (max-width: 575.98px){
  .hermes-specs{ padding:14px 16px; }
  .hermes-specs p{
    grid-template-columns: 140px 1fr;  /* bạn có thể giảm còn 120px nếu muốn */
    margin: 0 12px;
  }
}


div.box-image {width: 300px}

/* ==== 1. Cố định danh mục khi cuộn (sidebar menu) ==== */
.woocommerce-product-categories {
  position: sticky;        /* cố định khi cuộn */
  top: 100px;              /* cách đỉnh 1 khoảng để không đè header */
  z-index: 10;
}

/* Nếu wrapper ngoài có overflow hoặc padding, thêm điều chỉnh: */
.shop-sidebar {
  overflow: visible !important;
}

/* ==== 2. Viết hoa toàn bộ danh mục cha ==== */
.woocommerce-product-categories > li.cat-parent > a {
  text-transform: uppercase;
  font-weight: 600;        /* đậm hơn cho nổi bật */
  letter-spacing: 0.5px;   /* giãn nhẹ chữ cho sang hơn */
}

/* ==== 3. (Tùy chọn) Căn chỉnh khoảng cách và màu ==== */
.woocommerce-product-categories li {
  margin-bottom: 6px;
}

.woocommerce-product-categories li a {
  color: #222;
  text-decoration: none;
}

.woocommerce-product-categories li a:hover {
  color: #000; /* đổi màu khi hover */
}

@media (min-width: 1024px){
  .col.large-3.hide-for-medium{
    position: relative;
    overflow: visible !important;
  }
  /* Tạo wrapper ảo bằng CSS (không cần sửa HTML) */
  #shop-sidebar.sidebar-inner.col-inner{
    display: block;
  }
  #shop-sidebar.sidebar-inner.col-inner > * {
    width: 100%;
  }
  /* Sticky trực tiếp vẫn vậy */
  #shop-sidebar.sidebar-inner.col-inner{
    position: sticky;
    top: 100px;
    z-index: 5;
  }
}
.product-section {border-top: 1px solid #000000}

/* Ẩn gạch cuối trong khối mô tả sản phẩm (details.mplx-item cuối cùng) */
details.mplx-item:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.accordion-title.plain {background:none}

/* XÓA thanh gạch trên và dưới brand trong mobile menu */
.off-canvas .header-block-block-1,
.off-canvas .header-block-block-1 .section,
.off-canvas .header-block-block-1 .section-content,
.off-canvas .header-block-block-1 .section-bg,
.off-canvas .header-block-block-1 .section-content::before,
.off-canvas .header-block-block-1 .section-content::after {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Loại bỏ đường gạch Flatsome tự thêm bằng pseudo */
.off-canvas .header-block-block-1::before,
.off-canvas .header-block-block-1::after,
.off-canvas .section.has-block::before,
.off-canvas .section.has-block::after {
  display: none !important;
  border: none !important;
  background: none !important;
  content: none !important;
}

/* Đảm bảo phần brand không còn padding dư */
.off-canvas .header-block-block-1 .section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);}



li.woocommerce-widget-layered-nav-list__item.wc-layered-nav-term {padding: 6px 28px;}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
div.box-image {width: 100%}
.category-filtering.category-filter-row.show-for-medium {
    display: none !important;}
	
/* ===== CF7 VIP form - MOBILE (<=768px) ===== */
@media (max-width: 768px){
  /* Toàn form xếp dọc: label trên, field + button 1 hàng */
  .vip-form{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  /* Label: full width, canh trái */
  .vip-label,
  .vip-form > p:first-child{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: left;
    margin: 0;
  }

  /* Hàng chứa input + nút */
  .vip-field{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
  }

  /* Ô nhập email chiếm hết chiều rộng còn lại */
  .vip-field input[type="email"]{
    flex: 1;
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
    color: #111;
    background: #fff;
    border: none;
    outline: none;
    box-sizing: border-box;
  }

  /* Nút submit nằm cùng hàng với input, cao bằng input */
  .vip-submit .wpcf7-submit{
    height: 44px !important;
    padding: 0 20px !important;
    font-size: 14px;
    white-space: nowrap;
    background: #2f2f2f !important;
    color: #fff !important;
    border: 2px solid #2f2f2f !important;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease;
  }

  .vip-submit .wpcf7-submit:hover{
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
  }

  /* Tip lỗi hiển thị dưới form */
  .wpcf7-not-valid-tip{
    position: static;
    margin-top: 6px;
    font-size: 13px;
    color: #fff;
  }
}

	 .hermes-specs {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    margin-top: 10px;
    overflow: hidden;
  }

  .hermes-specs p {
    display: block;
    padding: 10px 14px;
    margin: 0;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    line-height: 1.5;
  }

  .hermes-specs p:last-child {
    border-bottom: none;
  }

  .hermes-specs p strong {
    display: block;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px; /* tạo khoảng giữa label và giá trị */
    font-size: 14px;
  }

  .hermes-specs p span,
  .hermes-specs p em,
  .hermes-specs p i {
    display: block;
    font-size: 14.5px;
    color: #333;
  }
}

span.amount{color: red;}


  .mpl-bar{
    position: sticky;
    top: env(safe-area-inset-top, 0); /* = 0 trên đa số máy, có tai thỏ thì chừa đúng phần an toàn */
    z-index: 1002;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
  }