/* =========================================================
   WOOCOMMERCE — SINGLE PRODUCT PAGE
   Re-skin khối mặc định (gallery, giá, nút mua, tabs, đánh giá,
   sản phẩm liên quan) theo phong cách đen — vàng gold, không đụng
   vào template PHP nên giữ nguyên AJAX add-to-cart, zoom, biến thể.

   QUY ƯỚC FONT TRANG NÀY
     - Tiêu đề, nhãn, tab, tiêu đề panel : --dx-font-body (Jost)
     - Giá, nút, số lượng                : --dx-font-mono
     - Breadcrumb                        : --dx-font-body (nhỏ, nhạt)

   QUY ƯỚC CỠ CHỮ
     Cỡ chữ nhãn / mô tả / tab / chữ phụ (kể cả plugin upload file)
     lấy từ 4 biến --dx-fs-* ngay dưới. Muốn to/nhỏ hơn thì sửa 4 số này.
     Ô nhập (select, qty, input, textarea) luôn >= 16px để iOS Safari
     không tự zoom khi focus.

   QUY ƯỚC KHOẢNG CÁCH
     Cột phải (giá -> biến thể -> upload -> notes -> nút mua) cách
     đều nhau bằng --dx-gap. Muốn thoáng/chặt hơn thì sửa 1 số này.

   ĐỔI KIỂU KHU VỰC TIÊU ĐỀ
     Cuối file có mục "CHỌN KIỂU KHU VỰC TIÊU ĐỀ" với 3 kiểu A/B/C.
     Đang bật A. Xem hướng dẫn bật B hoặc C ngay tại mục đó.
   ========================================================= */

:root{
  --dx-cart-h:   46px;  /* chiều cao chung của cụm số lượng + nút mua */
  --dx-gap:      24px;  /* khoảng cách đều giữa các khối cột phải */

  --dx-fs-text:  16px;  /* nhãn, mô tả, tab, nội dung panel, ô nhập */
  --dx-fs-small: 15px;  /* chữ phụ: dropzone, meta */
  --dx-fs-xs:    13px;  /* tên file, breadcrumb, link đánh giá */
  --dx-fs-badge: 11px;  /* badge trạng thái upload */
  --dx-main-pad: 14px;  /* padding trên của .product-main trên PC; mobile tự lấy 1/2 */
}

.dx-scope.single-product #main,
.dx-scope.single-product .content-area{
  background: var(--dx-black);
}

/* =========================================================
   CĂN HÀNG 2 CỘT
   Cột phải bắt đầu NGANG mép trên của ảnh (Flatsome cộng thêm
   padding/margin phía trên .product-info nên bị lệch xuống).
   ========================================================= */

.dx-scope.single-product .product-main .content-row{
  align-items: flex-start !important;
}
.dx-scope.single-product .product-info{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* 2 cột được phép co, nội dung dài (tên file upload) không đẩy cột phải xuống dưới ảnh */
.dx-scope.single-product .product-main .content-row > .col{
  min-width: 0;
}

.dx-scope.single-product .product-main{
  padding-top: var(--dx-main-pad) !important;
}
/* =========================================================
   TYPOGRAPHY DÙNG CHUNG — tiêu đề, nhãn, tab, tiêu đề panel
   ========================================================= */

/* Tiêu đề: sản phẩm, panel trong tab, "Related products" */
.dx-scope div.product .product_title,
.dx-scope .summary .product_title,
.dx-scope .woocommerce-tabs .panel h2,
.dx-scope.single-product .product-section-title,
.dx-scope.single-product .related .product-section-title-related{
  font-family: var(--dx-font-body);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
  color: var(--dx-ivory);
}

/* Nhãn: Surface Finish, nhãn form đánh giá, nhãn plugin upload
   (Upload your design file..., Notes for this order). */
.dx-scope div.product .summary table.variations th.label,
.dx-scope div.product .summary table.variations label,
.dx-scope #reviews label,
.dxl-cf-upload-wrap .dxl-cf-upload-label,
.dxl-cf-upload-wrap .dxl-cf-notes-label{
  font-family: var(--dx-font-body) !important;
  font-size: var(--dx-fs-text) !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--dx-muted) !important;
}

/* =========================================================
   BREADCRUMB + GALLERY
   ========================================================= */

/* Breadcrumb: chữ thường, nhỏ, nhạt. Chỉ là điều hướng phụ,
   không được tranh nổi bật với tiêu đề. Bỏ hẳn padding trên. */
.dx-scope .woocommerce-breadcrumb{
  font-family: var(--dx-font-body) !important;
  font-size: var(--dx-fs-xs) !important;
  letter-spacing: .02em !important;
  text-transform: none !important;   /* bỏ class uppercase của Flatsome */
  line-height: 1.3;
  color: var(--dx-muted-2) !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
.dx-scope .woocommerce-breadcrumb a{
  color: var(--dx-muted) !important;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.dx-scope .woocommerce-breadcrumb a:hover{
  color: var(--dx-gold) !important;
  border-bottom-color: var(--dx-gold);
}
.dx-scope .woocommerce-breadcrumb .divider{
  margin: 0 8px;
  opacity: .4;
}

.dx-scope div.product div.images,
.dx-scope .woocommerce-product-gallery{
  background: var(--dx-charcoal);
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-md);
  overflow: hidden;
  padding: 0;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
}
.dx-scope .woocommerce-product-gallery__image{
  background: var(--dx-charcoal-2);
}
.dx-scope .flex-control-thumbs li img,
.dx-scope .woocommerce-product-gallery__image--placeholder img{
  border-radius: var(--dx-radius-sm);
}
.dx-scope .flex-control-thumbs li{
  border: 1px solid transparent;
}
.dx-scope .flex-control-thumbs li img.flex-active,
.dx-scope .flex-control-thumbs li:hover img{
  opacity: 1;
  outline: 2px solid var(--dx-gold);
  outline-offset: -2px;
}

/* =========================================================
   SUMMARY: tiêu đề, giá, đánh giá, mô tả ngắn
   ========================================================= */

.dx-scope div.product .summary,
.dx-scope .product .summary{
  color: var(--dx-ivory);
  padding-left: clamp(0px, 3vw, 32px);
}

/* Font/màu tiêu đề nằm ở khối "Typography dùng chung".
   PC 22px; mobile/tablet (<=849px) 24px cho dễ đọc. */
.dx-scope div.product .product_title,
.dx-scope .summary .product_title{
  position: relative;
  padding-top: 0;
  margin: 0 0 var(--dx-gap);
  font-size: 22px;
  line-height: 1.3;
}
@media (max-width: 849px){
  .dx-scope div.product .product_title,
  .dx-scope .summary .product_title{
    font-size: 20px;
    line-height: 1.25;
  }
}
/* Vạch vàng của tiêu đề: mặc định TẮT. Kiểu B và C ở cuối file bật lại. */
.dx-scope div.product .product_title::before{
  content: '';
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--dx-gold);
}

/* Giá chính (chỉ khối summary, không đụng giá trong card liên quan) */
.dx-scope div.product .summary p.price,
.dx-scope div.product .summary span.price,
.dx-scope div.product .summary .price{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 16px !important;
  margin: 0 0 var(--dx-gap) !important;
  font-family: var(--dx-font-mono) !important;
  font-size: 18px !important;
  color: var(--dx-gold) !important;
  background: rgba(201,162,74,.08) !important;
  border: 1px solid var(--dx-gold-dim) !important;
  border-radius: var(--dx-radius-sm) !important;
  opacity: 1 !important;
}
/* Mọi phần tử con (bdi, span, ins...) đều theo màu vàng */
.dx-scope div.product .summary .price *{
  color: var(--dx-gold) !important;
  opacity: 1 !important;
}
.dx-scope div.product .summary .price del,
.dx-scope div.product .summary .price del *{
  color: var(--dx-muted-2) !important;
  font-size: 14px !important;
  text-decoration: line-through !important;
}
.dx-scope div.product .summary .price ins{
  text-decoration: none !important;
}

/* Sao trên trang sản phẩm: sát tiêu đề, chừa khoảng thở trước khung giá.
   margin âm kéo sao lên (tiêu đề đang có margin-bottom var(--dx-gap), hai margin
   gộp lại nên khoảng cách thật tiêu đề -> sao = gap - 12px). */
.dx-scope div.product .summary .woocommerce-product-rating{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -12px 0 16px !important;
}
.dx-scope div.product .summary .woocommerce-product-rating .star-rating{
  margin: 0 !important;
}

/* Đánh giá sao */
.dx-scope .star-rating span::before{ color: var(--dx-gold); }
.dx-scope .star-rating::before{ color: var(--dx-ink); }
.dx-scope .woocommerce-review-link{
  color: var(--dx-muted);
  font-size: var(--dx-fs-xs);
}

/* Mô tả ngắn */
.dx-scope div.product .woocommerce-product-details__short-description{
  color: var(--dx-muted);
  font-size: var(--dx-fs-text);
  line-height: 1.7;
  margin-bottom: var(--dx-gap);
}
.dx-scope div.product .woocommerce-product-details__short-description:empty{
  display: none;
}

/* =========================================================
   BIẾN THỂ (variations)

   DOM WooCommerce:
     form.variations_form.cart
      ├─ table.variations
      └─ .single_variation_wrap
           ├─ .woocommerce-variation
           └─ .woocommerce-variation-add-to-cart  (hàng nút thật)

   form.variations_form KHÔNG được flex, nếu không bảng biến thể
   và khối giá/nút bị chia 2 cột.
   ========================================================= */

.dx-scope div.product form.variations_form.cart{
  display: block !important;
}

/* Bảng: xếp dọc, nhãn trên — select dưới */
.dx-scope table.variations,
.dx-scope table.variations tbody,
.dx-scope table.variations tr,
.dx-scope table.variations th,
.dx-scope table.variations td{
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  text-align: left;
}
.dx-scope table.variations{ margin: 0; }
.dx-scope table.variations tr{ margin: 0 0 var(--dx-gap); }
.dx-scope table.variations tr:last-child{ margin-bottom: 0; }
.dx-scope table.variations th.label{ margin-bottom: 8px; }

.dx-scope table.variations select{
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  height: auto !important;        /* bỏ chiều cao cố định của Flatsome */
  margin: 0;
  padding: 10px 40px 10px 14px;   /* chừa chỗ cho mũi tên dropdown */
  font-size: var(--dx-fs-text);   /* >=16px: chặn iOS tự zoom */
  box-sizing: border-box;
  line-height: 1.4 !important;
  overflow: visible;
  background-color: var(--dx-charcoal);
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-sm);
  color: var(--dx-muted) !important;
}
.dx-scope table.variations select option{
  background: var(--dx-charcoal) !important;
  color: var(--dx-muted) !important;
}

/* Link Clear: đặt tuyệt đối ở góc phải dòng nhãn, KHÔNG chiếm chỗ.
   Trước đây nó nằm dưới select và WooCommerce chỉ ẩn bằng visibility,
   nên luôn để lại một khoảng trống ~25px dưới ô chọn.
   Nếu thấy chữ Clear lệch dòng với nhãn, chỉnh số top. */
.dx-scope table.variations td.value{ position: relative; }
.dx-scope table.variations a.reset_variations{
  position: absolute;
  top: -30px;
  right: 0;
  float: none;
  margin: 0;
  font-family: var(--dx-font-mono);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: .06em;
  text-transform: capitalize;
  color: var(--dx-muted-2);
}
.dx-scope table.variations a.reset_variations:hover{ color: var(--dx-gold); }

/* Khối giá biến thể + nút mua: full chiều ngang, nằm dưới bảng */
.dx-scope div.product .single_variation_wrap,
.dx-scope .woocommerce-variation{
  display: block;
  width: 100%;
  float: none;
  margin: 0;
}
.dx-scope div.product .single_variation_wrap{ clear: both; }

/* Giá biến thể: ẩn, giá được main.js đổ thẳng lên giá chính */
.dx-scope .woocommerce-variation-price{ display: none !important; }
.dx-scope .woocommerce-variation-availability .stock{ color: var(--dx-muted); }

/* =========================================================
   FORM MUA HÀNG: số lượng + Add to Cart + Buy Now
   Cả 3 xếp CHUNG 1 hàng, CÙNG chiều cao (--dx-cart-h).
   Hàng nút là form.cart (sản phẩm đơn) hoặc
   .woocommerce-variation-add-to-cart (sản phẩm biến thể).
   ========================================================= */

.dx-scope div.product form.cart:not(.variations_form),
.dx-scope div.product .woocommerce-variation-add-to-cart{
  display: flex !important;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
  margin-top: 0;
}

/* Ô số lượng */
.dx-scope div.product .ux-quantity.quantity{
  display: inline-flex !important;
  align-items: stretch;
  flex: 0 0 auto;
  float: none;
  margin: 0 !important;
  height: var(--dx-cart-h);
  overflow: hidden;
  background: var(--dx-charcoal);
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-sm);
}
.dx-scope div.product .ux-quantity .qty{
  width: 48px;
  height: 100% !important;
  text-align: center;
  font-family: var(--dx-font-mono);
  font-size: var(--dx-fs-text);   /* >=16px: chặn iOS tự zoom */
  background: var(--dx-charcoal) !important;
  border: none !important;
  color: var(--dx-ivory) !important;
  -moz-appearance: textfield;
}
.dx-scope div.product .ux-quantity .qty::-webkit-inner-spin-button,
.dx-scope div.product .ux-quantity .qty::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.dx-scope div.product .ux-quantity .qty:focus{ outline: none; }

.dx-scope div.product .ux-quantity__button{
  width: 38px;
  height: 100% !important;
  font-family: var(--dx-font-mono);
  font-size: 15px;
  cursor: pointer;
  background: var(--dx-charcoal-2) !important;
  color: var(--dx-ivory) !important;
  border: none !important;
  box-shadow: none !important;
  transition: background .3s, color .3s;
}
.dx-scope div.product .ux-quantity__button:hover{
  background: var(--dx-gold) !important;
  color: var(--dx-black) !important;
}

/* Phần chung của 2 nút: Add to Cart + Buy Now */
.dx-scope div.product .single_add_to_cart_button,
.dx-scope div.product .ux-buy-now-button{
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: var(--dx-cart-h) !important;
  padding: 0 20px !important;
  margin: 0 !important;
  font-family: var(--dx-font-body) !important;
  font-size: 12.5px !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: nowrap;
  border-radius: var(--dx-radius-sm) !important;
}

/* Add to Cart — kiểu VIỀN (vai trò phụ) */
.dx-scope div.product .single_add_to_cart_button{
  background: transparent !important;
  color: var(--dx-ivory) !important;
  border: 1px solid var(--dx-gold-dim) !important;
  transition: background .3s, color .3s;
}
.dx-scope div.product .single_add_to_cart_button:hover{
  background: var(--dx-charcoal-2) !important;
  border-color: var(--dx-gold) !important;
}

/* Buy Now — kiểu ĐẶC vàng (vai trò chính) */
.dx-scope div.product .ux-buy-now-button{
  font-weight: 600 !important;
  background: linear-gradient(120deg, var(--dx-gold), var(--dx-gold-light)) !important;
  color: var(--dx-black) !important;
  border: none !important;
  box-shadow: none !important;
  transition: box-shadow .3s;
}
.dx-scope div.product .ux-buy-now-button:hover{
  box-shadow: 0 10px 30px -10px rgba(201,162,74,.55) !important;
}

/* Màn >= 600px còn đủ chỗ: chữ nút to lên 14px */
@media (min-width: 600px){
  .dx-scope div.product .single_add_to_cart_button,
  .dx-scope div.product .ux-buy-now-button{
    font-size: 14px !important;
  }
}

/* Màn rất hẹp: vẫn giữ 1 hàng, chỉ thu nhỏ chữ/khoảng cách */
@media (max-width: 420px){
  .dx-scope div.product form.cart:not(.variations_form),
  .dx-scope div.product .woocommerce-variation-add-to-cart{ gap: 8px; }
  .dx-scope div.product .ux-quantity .qty{ width: 38px; }
  .dx-scope div.product .ux-quantity__button{ width: 32px; }
  .dx-scope div.product .single_add_to_cart_button,
  .dx-scope div.product .ux-buy-now-button{
    font-size: 11px !important;
    padding: 0 12px !important;
  }
}

/* =========================================================
   PLUGIN UPLOAD FILE (daixlaser-customer-files)
   Nhãn Upload/Notes đã nằm trong khối "Nhãn" ở đầu file.
   Ở đây: khoảng cách đều + cỡ chữ dropzone, danh sách file, badge.
   Đặt trong file này vì nó nạp SAU CSS của plugin.
   ========================================================= */

.dxl-cf-upload-wrap{ margin: var(--dx-gap) 0 !important; }
.dxl-cf-notes-wrap{ margin-top: 20px; }
.dxl-cf-file-list:empty{ display: none; }  /* list rỗng không chiếm margin */

.dxl-cf-dropzone .dxl-cf-dropzone-text,
.dxl-cf-dropzone .dxl-cf-dropzone-text .dxl-cf-dropzone-line{
  font-size: var(--dx-fs-small) !important;
}
.dxl-cf-file-item{ font-size: var(--dx-fs-xs); }
.dxl-cf-file-status{ font-size: var(--dx-fs-badge); }

/* =========================================================
   META (SKU, danh mục, thẻ) + CHIA SẺ
   ========================================================= */

.dx-scope div.product .product_meta{
  margin-top: var(--dx-gap) !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--dx-ink) !important;
  font-size: var(--dx-fs-small);
  color: var(--dx-muted-2);
}
.dx-scope div.product .product_meta > span{
  display: block;
  border: none !important;
}
.dx-scope div.product .product_meta a{ color: var(--dx-gold); }
.dx-scope div.product .product_meta a:hover{ color: var(--dx-gold-light); }

/* Icon chia sẻ — bắt theo href để không phụ thuộc class của Flatsome.
   Icon Email bị render lệch kích thước nên ẩn hẳn. */
.dx-scope div.product a[href*="cdn-cgi/l/email-protection"],
.dx-scope div.product a[href^="mailto:"]{
  display: none !important;
}

.dx-scope div.product a[href*="facebook.com/sharer"],
.dx-scope div.product a[href*="twitter.com/share"],
.dx-scope div.product a[href*="pinterest.com/pin"],
.dx-scope div.product a[href*="linkedin.com/shareArticle"],
.dx-scope div.product a[href^="whatsapp:"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  margin: 12px 8px 0 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  overflow: hidden;
  vertical-align: middle;
  color: var(--dx-ivory) !important;
  background: var(--dx-charcoal-2) !important;
  border: 1px solid var(--dx-ink) !important;
  border-radius: 50% !important;
  transition: all .3s;
}
.dx-scope div.product a[href*="facebook.com/sharer"]:hover,
.dx-scope div.product a[href*="twitter.com/share"]:hover,
.dx-scope div.product a[href*="pinterest.com/pin"]:hover,
.dx-scope div.product a[href*="linkedin.com/shareArticle"]:hover,
.dx-scope div.product a[href^="whatsapp:"]:hover{
  background: var(--dx-gold) !important;
  border-color: var(--dx-gold) !important;
  color: var(--dx-black) !important;
}
.dx-scope div.product a[href*="facebook.com/sharer"] *,
.dx-scope div.product a[href*="twitter.com/share"] *,
.dx-scope div.product a[href*="pinterest.com/pin"] *,
.dx-scope div.product a[href*="linkedin.com/shareArticle"] *,
.dx-scope div.product a[href^="whatsapp:"] *{
  width: 15px !important;
  height: 15px !important;
  max-width: 15px;
  max-height: 15px;
  object-fit: contain;
  color: currentColor !important;
  fill: currentColor !important;
}

/* =========================================================
   NHỊP KHOẢNG CÁCH GIỮA CÁC KHỐI LỚN
     Summary -> Tabs   : 48px
     Tabs    -> Related: 72px
   Triệt tiêu padding/margin Flatsome cộng thêm; chỉ chỉnh 2 số này.
   ========================================================= */

.dx-scope.single-product .product-main{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.dx-scope.single-product .product-footer{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.dx-scope.single-product .woocommerce-tabs{
  margin: 48px 0 0 !important;
}
.dx-scope.single-product .related-products-wrapper,
.dx-scope.single-product .product-section.related{
  margin: 72px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* =========================================================
   TABS: Description / Additional information / Reviews
   ========================================================= */

.dx-scope .woocommerce-tabs{
  padding: 0 !important;
  overflow: hidden;
  background: var(--dx-charcoal);
  border: 1px solid var(--dx-gold-dim);
  border-radius: var(--dx-radius-md);
}

/* Thanh tab */
.dx-scope .woocommerce-tabs ul.tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 0 36px;
  margin: 0 !important;
  padding: 0 28px !important;
  background: var(--dx-charcoal-2);
  border: 0 !important;
  border-bottom: 1px solid var(--dx-ink) !important;
}
/* Xóa pseudo-element mặc định của Flatsome */
.dx-scope .woocommerce-tabs ul.tabs::before,
.dx-scope .woocommerce-tabs ul.tabs::after,
.dx-scope .woocommerce-tabs ul.tabs li::before,
.dx-scope .woocommerce-tabs ul.tabs li::after,
.dx-scope .woocommerce-tabs ul.tabs li a::before{
  display: none !important;
  content: none !important;
}
.dx-scope .woocommerce-tabs ul.tabs li{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.dx-scope .woocommerce-tabs ul.tabs li a{
  position: relative;
  display: block;
  margin: 0 !important;
  padding: 20px 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: var(--dx-font-body);
  font-size: var(--dx-fs-text);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--dx-muted);
  transition: color .3s;
}
/* Gạch chân vàng đè lên đường phân cách, trượt ra khi hover/active */
.dx-scope .woocommerce-tabs ul.tabs li a::after{
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--dx-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
.dx-scope .woocommerce-tabs ul.tabs li a:hover{ color: var(--dx-ivory); }
.dx-scope .woocommerce-tabs ul.tabs li.active a{ color: var(--dx-gold); }
.dx-scope .woocommerce-tabs ul.tabs li.active a::after,
.dx-scope .woocommerce-tabs ul.tabs li a:hover::after{
  transform: scaleX(1);
}

/* Nội dung panel */
.dx-scope .woocommerce-tabs .tab-panels{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.dx-scope .woocommerce-tabs .tab-panels .panel:not(.active){
  display: none !important;
}
.dx-scope .woocommerce-tabs .panel{
  margin: 0 !important;
  padding: 24px 28px 28px !important;
  min-height: 0 !important;
  font-size: var(--dx-fs-text);
  line-height: 1.75;
  background: none;
  color: var(--dx-muted);
}
.dx-scope .woocommerce-tabs .panel > :first-child{ margin-top: 0; }
.dx-scope .woocommerce-tabs .panel > :last-child{ margin-bottom: 0; }
.dx-scope .woocommerce-tabs .panel h2{
  font-size: 20px;
  margin-bottom: 16px;
}

/* =========================================================
   ĐÁNH GIÁ (reviews)
   ========================================================= */

/* Khung form đánh giá: bỏ viền vàng dày của Flatsome (.has-border),
   chỉ giữ 1 đường kẻ mảnh phía trên để tách khỏi danh sách đánh giá */
.dx-scope #reviews .review-form-inner.has-border{
  border: 0 !important;
  border-top: 1px solid var(--dx-ink) !important;
  border-radius: 0 !important;
  padding: 28px 0 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.dx-scope #reviews input[type="text"],
.dx-scope #reviews input[type="email"],
.dx-scope #reviews textarea{
  box-shadow: none;
}

/* Tiêu đề trong tab đánh giá là <h3> (không phải h2): đồng bộ với tiêu đề trang */
.dx-scope #reviews .woocommerce-Reviews-title,
.dx-scope #reviews #respond .comment-reply-title{
  font-family: var(--dx-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dx-ivory);
  margin: 0 0 16px;
}
/* Bỏ nền mờ + padding riêng của Flatsome trên khung form */
.dx-scope #reviews .comment-respond{
  background: none;
  padding: 0;
  margin-top: 24px;
}

.dx-scope #reviews input[type="text"],
.dx-scope #reviews input[type="email"],
.dx-scope #reviews textarea{
  font-size: var(--dx-fs-text);   /* >=16px: chặn iOS tự zoom */
  background: var(--dx-charcoal);
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-sm);
  color: var(--dx-ivory);
}
.dx-scope #reviews #submit,
.dx-scope #reviews .form-submit input{
  padding: 12px 24px;
  font-family: var(--dx-font-mono);
  letter-spacing: .08em;
  text-transform: capitalize;
  background: var(--dx-gold);
  color: var(--dx-black);
  border: none;
  border-radius: var(--dx-radius-sm);
}
.dx-scope .commentlist .comment_container{
  background: var(--dx-charcoal);
  border: 1px solid var(--dx-ink);
  border-radius: var(--dx-radius-md);
}
.dx-scope .commentlist .comment-text{ color: var(--dx-muted); }
.dx-scope .commentlist .woocommerce-review__author{ color: var(--dx-ivory); }
.dx-scope .commentlist .woocommerce-review__dash,
.dx-scope .commentlist .woocommerce-review__published-date{ color: var(--dx-muted-2); }

/* =========================================================
   SẢN PHẨM LIÊN QUAN
   Card dùng chung CSS với category (shop.css). Ở đây chỉ lo
   tiêu đề + nút slider.
   ========================================================= */

.dx-scope.single-product .product-section-title,
.dx-scope.single-product .related .product-section-title-related{
  margin: 0 0 28px !important;
  padding: 0 !important;
  font-size: 24px;
  border: 0 !important;
}

/* Nút prev/next: tam giác vàng, không nền/viền, nằm TRONG mép slider */
.dx-scope.single-product .related .flickity-prev-next-button{
  top: 36% !important;
  bottom: auto !important;
  width: 36px !important;
  height: 56px !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.dx-scope.single-product .related .flickity-prev-next-button.previous{ left: 4px !important; }
.dx-scope.single-product .related .flickity-prev-next-button.next{ right: 4px !important; }

.dx-scope.single-product .related .flickity-prev-next-button svg{
  display: none !important;
}
.dx-scope.single-product .related .flickity-prev-next-button::before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.8));
  transition: border-color .3s, transform .3s;
}
.dx-scope.single-product .related .flickity-prev-next-button.previous::before{
  border-right: 18px solid var(--dx-gold);
}
.dx-scope.single-product .related .flickity-prev-next-button.next::before{
  border-left: 18px solid var(--dx-gold);
}
.dx-scope.single-product .related .flickity-prev-next-button.previous:hover::before{
  border-right-color: var(--dx-gold-light);
  transform: translate(-60%, -50%);
}
.dx-scope.single-product .related .flickity-prev-next-button.next:hover::before{
  border-left-color: var(--dx-gold-light);
  transform: translate(-40%, -50%);
}
.dx-scope.single-product .related .flickity-prev-next-button:disabled{
  opacity: .25 !important;
}

/* =========================================================
   PayPal Messages — ẩn khung trống trên trang sản phẩm
   ========================================================= */

body.single-product .ppcp-messages{
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   MOBILE / TABLET (<= 849px)
   Cột phải xuống dưới ảnh: bỏ thụt lề trái (nếu không chữ không
   thẳng hàng với mép ảnh) và chừa khoảng cách với ảnh.
   ========================================================= */

@media (max-width: 849px){
  .dx-scope div.product .summary,
  .dx-scope .product .summary{ padding-left: 15px; }  /* bằng lề cột ảnh */
  .dx-scope.single-product .product-info{ padding-top: var(--dx-gap) !important; }

  /* một nửa khoảng cách PC, tự co theo --dx-main-pad */
  .dx-scope.single-product .product-main{
    padding-top: calc(var(--dx-main-pad) / 2) !important;
  }
}

/* =========================================================
   CHỌN KIỂU KHU VỰC TIÊU ĐỀ (breadcrumb + tiêu đề)

   ĐANG BẬT: KIỂU A (mặc định, không cần làm gì).

   Muốn đổi sang kiểu B hoặc C: ở kiểu đó có 1 dòng mở comment
   ngay phía trên khối CSS và 1 dòng đóng comment ngay phía dưới
   khối CSS. Xóa 2 dòng đó, khối CSS sẽ có hiệu lực.
   Chỉ bật 1 kiểu tại một thời điểm.
   ========================================================= */

/* ---------------------------------------------------------
   KIỂU A — GỌN (đang bật, là phần mặc định ở trên)
   home / vehicle (nhạt) -> tiêu đề -> giá.
   Không vạch vàng, ít thành phần nhất, sạch và hiện đại.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   KIỂU B — VẠCH VÀNG GIỮA breadcrumb VÀ tiêu đề
   home / vehicle -> vạch vàng 32px -> tiêu đề. Cách đều 14px
   hai phía nên vạch không còn "lơ lửng" như bản cũ.
   --------------------------------------------------------- */
/*
.dx-scope .woocommerce-breadcrumb{ margin-bottom: 14px !important; }
.dx-scope div.product .product_title::before{ display: block; }
.dx-scope div.product .product_title,
.dx-scope .summary .product_title{ padding-top: 16px; }
*/

/* ---------------------------------------------------------
   KIỂU C — ĐƯỜNG KẺ DƯỚI TIÊU ĐỀ
   home / vehicle -> tiêu đề -> đường kẻ mảnh có đoạn vàng
   ngắn nằm đè lên, rồi mới tới giá. Tiêu đề thành một khối
   gọn có "đáy", cảm giác cao cấp, giống trang tạp chí.
   --------------------------------------------------------- */
/*
.dx-scope div.product .product_title,
.dx-scope .summary .product_title{
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dx-ink);
}
.dx-scope div.product .product_title::before{
  display: block;
  top: auto;
  bottom: -1px;
}
*/