/* ==========================================================================
 *  PHUTUNGCAR · DESIGN SYSTEM  (font + màu đồng bộ toàn site)
 *  Palette: Auto-Tech  ·  Primary #0A57C2  ·  Secondary/CTA #FF7A1A
 *  Font:    Be Vietnam Pro (self-host)  ·  font-display: swap (tốt cho LCP)
 *  Lưu ý:   KHÔNG đổi layout/màu Header & Footer — chỉ đồng bộ FONT toàn cục,
 *           còn màu nhấn chỉ áp cho vùng nội dung (.ds-section, woocommerce).
 * ========================================================================== */

/* ---------- 1. FONT BE VIETNAM PRO (self-host, vi + latin) --------------- */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/be-vietnam-pro/bvp-400-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/be-vietnam-pro/bvp-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/be-vietnam-pro/bvp-600-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/be-vietnam-pro/bvp-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/be-vietnam-pro/bvp-700-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/be-vietnam-pro/bvp-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- 2. BIẾN HỆ THỐNG (đổi 1 chỗ -> đổi toàn site) ---------------- */
:root{
  --ds-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --ds-primary:        #0A57C2;   /* Xanh dương chủ đạo  */
  --ds-primary-dark:   #073B82;
  --ds-primary-soft:   #E8F0FB;
  --ds-secondary:      #FF7A1A;   /* Cam – nút CTA       */
  --ds-secondary-dark: #E96400;

  --ds-text:    #11202E;          /* Chữ chính           */
  --ds-muted:   #5B6470;          /* Chữ phụ             */
  --ds-bg:      #FFFFFF;
  --ds-bg-soft: #F4F6F9;          /* Nền section xen kẽ  */
  --ds-border:  #E6EAF0;

  --ds-radius:  10px;
  --ds-shadow:  0 6px 20px rgba(11,32,46,.08);
  --ds-container: 1400px;
}

/* ---------- 3. TYPOGRAPHY ĐỒNG BỘ (áp toàn site, gồm header/footer) ------ */
body,
body,
button, input, select, optgroup, textarea,
.button, h1, h2, h3, h4, h5, h6,
.heading-font, .nav, .menu, .widget, .product-title{
  font-family: var(--ds-font) !important;   /* ép Be Vietnam Pro TOÀN SITE (đè Lato mặc định Flatsome) */
}
body{ color: var(--ds-text); font-weight: 400; }
h1,h2,h3,h4,h5,h6{ color: var(--ds-text); font-weight: 700; line-height: 1.25; }
h1{ font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h2{ font-size: clamp(1.3rem, 1.0rem + 1.2vw, 1.8rem); }

/* ---------- 4. MÀU NHẤN — CHỈ trong vùng nội dung (không đụng header/footer) */
.ds-section a{ color: var(--ds-primary); }
.ds-section a:hover{ color: var(--ds-primary-dark); }

/* Tiêu đề section: thanh nhấn bên trái + gạch dưới */
.ds-title{ margin: 0 0 14px; }
.ds-title h2{
  position: relative; display: inline-block; margin: 0;
  padding: 0 0 8px 14px; text-transform: uppercase; letter-spacing: .3px;
}
.ds-title h2::before{
  content:""; position:absolute; left:0; top:2px; bottom:10px; width:5px;
  border-radius:4px; background: linear-gradient(180deg,var(--ds-primary),var(--ds-secondary));
}
.ds-title h2::after{
  content:""; position:absolute; left:14px; right:0; bottom:0; height:2px;
  background: var(--ds-border);
}
.ds-title h2 a{ color: var(--ds-text) !important; }
.ds-title-light h2,
.ds-title-light h2 a{ color:#fff !important; }
.ds-title-light h2::after{ background: rgba(255,255,255,.25); }

/* ---------- 5. NÚT CTA (cam) -------------------------------------------- */
.ds-cta-wrap{ text-align:center; }
.ds-cta-wrap a,
.ds-section .ds-hero-btn.button{
  display:inline-block; background: var(--ds-secondary); color:#fff !important;
  font-weight:600; padding:10px 26px; border-radius:30px; text-transform:uppercase;
  letter-spacing:.4px; box-shadow: var(--ds-shadow); transition: transform .15s, background .2s;
}
.ds-cta-wrap a:hover,
.ds-section .ds-hero-btn.button:hover{
  background: var(--ds-secondary-dark); color:#fff !important; transform: translateY(-2px);
}

/* ---------- 6. HERO ----------------------------------------------------- */
/* Trang dùng template "Page - Full Width" (page-blank.php) nên section tự tràn
   hết chiều ngang. Nội dung sản phẩm/blog được bọc trong [row] để giữ khung. */
.ds-hero .banner-bg,
.ds-hero .ux-banner{ background-size: cover !important; }
/* Override Flatsome .banner h1{font-size:3.5em} (gây chữ khổng lồ) bằng cỡ responsive.
   (Heading banner giờ là H2; vẫn nhắm cả h1 để an toàn.) */
.ds-hero .ds-hero-text h1,
.ds-hero .ds-hero-text h2{
  color:#fff; font-size: clamp(1.5rem, 4.6vw, 2.6rem) !important; line-height:1.12;
  margin:0 0 8px; text-shadow:0 2px 12px rgba(0,0,0,.35); font-weight:700;
}
.ds-hero .ds-hero-text p{
  color:#eef3f9; font-size: clamp(.85rem, 2.4vw, 1.05rem); margin:0;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
/* Mobile: chữ vừa khít, text box rộng hơn, banner cao hơn chút cho thoáng. */
@media (max-width:549px){
  .ds-hero .ds-hero-text h1,
  .ds-hero .ds-hero-text h2{ font-size:1.55rem !important; line-height:1.18; }
  .ds-hero .ds-hero-text p{ font-size:.86rem; }
  .ds-hero .text-box{ width:90% !important; }
  .ds-hero .banner,
  .ds-hero .banner .banner-inner{ min-height:330px; }
  .ds-hero .ds-hero-btn.button{ padding:9px 22px; font-size:.85rem; }
}

/* ---------- 7. USP / CAM KẾT (Flatsome Icon Box [featured_box]) -------- */
.ds-usp-sec .icon-box.ds-usp-box{ align-items:center; margin:0; padding:6px 4px; }
.ds-usp-sec .ds-usp-box .icon-box-img{
  width:54px !important; height:54px; flex:0 0 54px; margin:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background: var(--ds-primary-soft);
}
.ds-usp-sec .ds-usp-box .icon-box-img .icon,
.ds-usp-sec .ds-usp-box .icon-box-img .icon-inner{ width:30px; height:30px; }
.ds-usp-sec .ds-usp-box .icon-box-img img{ width:30px; height:30px; display:block; }
.ds-usp-sec .ds-usp-box .icon-box-text{ padding-left:12px; }
.ds-usp-sec .ds-usp-box .icon-box-text h5{
  margin:0; font-size:.95rem; font-weight:700; text-transform:none; letter-spacing:0; color:var(--ds-text);
}
.ds-usp-sec .ds-usp-box .icon-box-text p{ margin:2px 0 0; font-size:.82rem; color: var(--ds-muted); }
@media (max-width:549px){
  .ds-usp-sec .icon-box.ds-usp-box{ flex-direction:column; text-align:center; }
  .ds-usp-sec .ds-usp-box .icon-box-text{ padding-left:0; padding-top:6px; }
  .ds-usp-sec .ds-usp-box .icon-box-text p{ display:none; }
}

/* ---------- 8. TABS sản phẩm tiêu biểu --------------------------------- */
.ds-tabs.tabbed-content > .nav-tabs{ justify-content:center; border:0; gap:6px; flex-wrap:wrap; }
.ds-tabs.tabbed-content > .nav-tabs > li > a{
  border:1px solid var(--ds-border); border-radius:30px; padding:6px 18px;
  color: var(--ds-text); font-weight:600; text-transform:uppercase; font-size:.82rem;
}
.ds-tabs.tabbed-content > .nav-tabs > li.active > a{
  background: var(--ds-primary); border-color: var(--ds-primary); color:#fff;
}

/* ---------- 9. THẺ SẢN PHẨM (nhẹ nhàng, không phá woo) ----------------- */
.ds-section .product-small.box{
  border:1px solid var(--ds-border); border-radius: var(--ds-radius);
  background:#fff; padding:6px; transition: box-shadow .2s, transform .2s;
}
.ds-section .product-small.box:hover{ box-shadow: var(--ds-shadow); transform: translateY(-3px); }
.ds-section .price ins,
.ds-section .price .amount{ color: var(--ds-secondary-dark); font-weight:700; }
/* Nút "THÊM VÀO GIỎ" (.button.primary) GIỮ NGUYÊN kiểu viền của theme (đọc được).
   KHÔNG ép màu chữ ở đây để tránh chữ trắng trên nền trắng. */
/* Nút "Liên hệ" (.button.alt): nền cam + CHỮ TRẮNG cho đủ tương phản (hết chìm) */
.ds-section .product-small .button.alt,
.ds-section .product-small a.button.alt{
  background: var(--ds-secondary) !important;
  border-color: var(--ds-secondary) !important;
  color:#fff !important;
}
.ds-section .product-small .button.alt:hover{
  background: var(--ds-secondary-dark) !important;
  border-color: var(--ds-secondary-dark) !important;
  color:#fff !important;
}

/* ---------- 10. BRAND strip -------------------------------------------- */
.ds-brand-sec .swiper-home-brand .item-title h3{ font-size:.78rem; font-weight:600; }

/* ---------- 11. KHỐI LIÊN HỆ ------------------------------------------- */
.ds-contact-sec{ background: linear-gradient(120deg,var(--ds-primary),var(--ds-primary-dark)); }
.ds-contact-row{ display:flex; flex-wrap:wrap; gap:16px; }
.ds-contact-item{ display:flex; align-items:center; gap:12px; color:#fff !important; }
.ds-contact-item img,
.ds-contact-ico{
  width:46px; height:46px; border-radius:50%; background:#fff; color: var(--ds-primary);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto;
}
.ds-contact-item span{ display:flex; flex-direction:column; line-height:1.3; }
.ds-contact-item strong{ font-size:.78rem; opacity:.85; font-weight:600; }

/* ---------- 11b. BLOG ARCHIVE — lưới flex, không phụ thuộc masonry JS ---
   Flatsome blog archive dùng .row-masonry{display:block; >.col{float:left}} cần
   JS để xếp; nếu JS chưa chạy/bị delay thì card xuống hàng 1 cột. Ép lưới flex:
   2 cột desktop, 1 cột mobile. */
.blog-archive .row-masonry,
.blog-archive .row.large-columns-2{ display:flex !important; flex-wrap:wrap; }
.blog-archive .row-masonry > .col,
.blog-archive .row.large-columns-2 > .col{ float:none !important; }
@media (min-width:850px){
  .blog-archive .row-masonry > .col{ flex-basis:50%; max-width:50%; }
}
@media (max-width:849px){
  .blog-archive .row-masonry > .col{ flex-basis:100%; max-width:100%; }
}

/* ---------- 11bis. DÒNG NHẮC LIÊN HỆ TRƯỚC NÚT THÊM VÀO GIỎ ----------- */
.ds-product-note{
  display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:11px 16px;
  background: var(--ds-primary-soft); border-left:4px solid var(--ds-primary);
  border-radius:8px; color: var(--ds-primary-dark); font-weight:600; font-size:.95rem; line-height:1.4;
}
.ds-product-note i{ color: var(--ds-secondary); font-size:1.1rem; flex:0 0 auto; }

/* ---------- 11c. NÚT LIÊN HỆ TRANG SẢN PHẨM --------------------------- */
.ds-product-contact{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.ds-pc-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:30px;
  font-weight:600; color:#fff !important; transition:transform .15s, filter .2s;
}
.ds-pc-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); color:#fff !important; }
.ds-pc-call{ background: var(--ds-secondary); }
.ds-pc-zalo{ background: var(--ds-primary); }

/* ---------- 11d. FORM LIÊN HỆ CUỐI BÀI VIẾT (Contact Form 7) ---------- */
.ds-post-contact{
  margin:32px 0 10px; padding:24px; border-radius: var(--ds-radius);
  background: var(--ds-bg-soft); border:1px solid var(--ds-border);
}
.ds-post-contact-title{ margin:0 0 4px; color: var(--ds-primary-dark); font-size:1.15rem; font-weight:700; }
.ds-post-contact-sub{ margin:0 0 16px; color: var(--ds-muted); font-size:.9rem; }
.ds-post-contact input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.ds-post-contact textarea,
.ds-post-contact select{
  width:100%; border:1px solid var(--ds-border); border-radius:8px; padding:10px 12px;
  margin-bottom:12px; background:#fff; font-family:var(--ds-font);
}
.ds-post-contact input:focus, .ds-post-contact textarea:focus{
  border-color: var(--ds-primary); outline:none; box-shadow:0 0 0 3px var(--ds-primary-soft);
}
.ds-post-contact .wpcf7-submit{
  background: var(--ds-secondary); color:#fff; border:0; border-radius:30px;
  padding:11px 32px; font-weight:600; text-transform:uppercase; cursor:pointer;
  transition:background .2s, transform .15s; width:auto;
}
.ds-post-contact .wpcf7-submit:hover{ background: var(--ds-secondary-dark); transform:translateY(-2px); }

/* ---------- 11e. Ẩn ô reCAPTCHA rỗng của PayPal trên trang sản phẩm ----
   PayPal Payments echo <div id="ppcp-recaptcha-v2-container"> ở hook
   woocommerce_single_product_summary, nhưng reCAPTCHA CHƯA cấu hình key ->
   container rỗng vô dụng. Ẩn đi (an toàn, bền qua update plugin). */
.single-product #ppcp-recaptcha-v2-container{ display:none !important; }

/* ---------- 11f. H1 ẩn cho SEO (sr-only) ------------------------------
   Ẩn về mặt thị giác nhưng VẪN nằm trong DOM để Google/đọc màn hình thấy.
   Dùng cho thẻ H1 duy nhất đặt trên banner trang chủ. */
.ds-seo-h1{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.ds-seo-h1 h1{ margin:0; font-size:1rem; }

/* ---------- 11g. PADDING MOBILE TRANG CHI TIẾT SẢN PHẨM --------------
   style.css đặt .product-info{padding:10px 1px} ở @media 768px (dành cho thẻ
   SP/ô tìm kiếm) nhưng dính cả summary trang chi tiết -> nội dung sát mép.
   Trả lại padding ngang chuẩn cho RIÊNG summary trang chi tiết trên mobile. */
@media (max-width:768px){
  .single-product .product-main .product-info{
    padding-left:16px !important; padding-right:16px !important;
  }
  /* Mô tả + tab + sản phẩm liên quan: padding ngang đồng bộ */
  .single-product .product-footer .woocommerce-tabs,
  .single-product .product-footer .related,
  .single-product .product-footer > .row{
    padding-left:16px !important; padding-right:16px !important;
  }
}

/* ---------- 12. CONTAINER & SECTION spacing ---------------------------- */
.ds-section{ overflow:hidden; }
.ds-section + .ds-section{ }
/* FIX: Flatsome bó .row.row-small=1065px / .row-collapse=1050 / .row-large=1110,
   trong khi child theme chỉ nới .row=1400. Lưới sản phẩm có class row-small nên
   bị hẹp & lệch phải. Cho các grid trong section của ta full khung container. */
.ds-section .row.row-small,
.ds-section .row.row-collapse,
.ds-section .row.row-large{ max-width: 100%; }
@media (max-width:549px){
  .ds-title h2{ font-size:1.05rem; }
}

/* ---------- 13. CHỐNG CLS (giữ chỗ ảnh + slider) ----------------------- */
.ds-hero .ux-banner, .ds-hero .ux_banner{ min-height: 300px; }
.ds-section img{ height:auto; }                 /* tránh giật layout khi ảnh tải */
.ds-products .slider, .ds-section .row-slider{ min-height: 280px; }

/* ---------- 14. Bỏ chữ "Liên hệ" TRÙNG ở vị trí giá ------------------- */
/* SP không giá hiện "Liên hệ" ở cả chỗ giá LẪN nút -> ẩn chỗ giá, giữ nút cam. */
.price-wrapper:has(.contact-price){ display: none !important; } /* xoá cả khoảng trống */
.contact-price{ display: none !important; }                      /* fallback nếu trình duyệt cũ không hỗ trợ :has */

/* =====================================================================
 * [CẬP NHẬT 14/09/2026] BOX TÁC GIẢ (ptc_author_box) — BẮT ĐẦU
 * ===================================================================== */
.ptc-author-box .author-name a { color: var(--ds-text); }
.ptc-author-box .author-name a:hover { color: var(--ds-primary); }
.ptc-author-box .blog-author-image { display: block; }
.ptc-author-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ptc-author-bio-link { font-weight: 600; font-size: .9em; color: var(--ds-primary); margin-right: 4px; }
.ptc-author-bio-link:hover { color: var(--ds-secondary-dark); }
.ptc-author-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ptc-author-social {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px; box-sizing: border-box;
  font-size: 14px; line-height: 1; font-weight: 600;
  color: var(--ds-primary); background: var(--ds-primary-soft);
  border-radius: 999px; cursor: pointer; transition: background .15s, color .15s;
}
.ptc-author-social:hover, .ptc-author-more[open] > summary { color: #fff; background: var(--ds-primary); }
.ptc-author-social__text { font-size: 11px; letter-spacing: .2px; }
.ptc-author-more { position: relative; display: inline-flex; margin: 0; }
.ptc-author-more > summary { list-style: none; margin: 0; }
.ptc-author-more > summary::-webkit-details-marker { display: none; }
.ptc-author-more__list {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  display: flex; flex-wrap: wrap; gap: 6px; width: max-content; max-width: 236px;
  padding: 8px; background: var(--ds-bg); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
}
/* [CẬP NHẬT 14/09/2026] BOX TÁC GIẢ — KẾT THÚC ======================== */

/* =====================================================================
 * [CẬP NHẬT 03/10/2026] SẢN PHẨM CÓ BIẾN THỂ — BẮT ĐẦU
 * Chỉ áp dụng cho TRANG CHI TIẾT sản phẩm có biến thể.
 * Trang danh mục, sản phẩm đơn giản... không bị ảnh hưởng.
 * ===================================================================== */
/* Ẩn khoảng giá "650.000₫ – 850.000₫"; JS ghi giá option vào đây rồi mới hiện */
.single-product .product-type-variable .price-wrapper .product-page-price { display: none; }
.single-product .product-type-variable .price-wrapper .product-page-price.ptc-price-ready { display: block; }
/* Ẩn giá trùng nằm dưới bảng option */
.single-product .product-type-variable .woocommerce-variation-price { display: none; }
/* Ẩn mô tả ngắn khi biến thể đang chọn đã có mô tả riêng (JS gắn class này) */
.single-product .product-short-description.ptc-desc-hidden { display: none; }
/* Mô tả của biến thể: trình bày giống mô tả ngắn cho đồng nhất */
.single-product .product-type-variable .woocommerce-variation-description { margin-bottom: 1em; }
.single-product .product-type-variable .woocommerce-variation-description p:last-child { margin-bottom: 0; }
/* Nút "Bỏ chọn" (reset) của WooCommerce: nằm góc phải, ngang hàng nhãn Dòng sản phẩm */
.single-product .product-type-variable .variations td.value { position: relative; }
.single-product .product-type-variable .variations .reset_variations {
  display: inline-flex; align-items: center; gap: 5px;
  position: absolute; right: 0; bottom: calc(100% + 11px); left: auto;
  margin: 0; padding: 3px 11px;
  font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .2px; text-transform: none;
  color: var(--ds-muted); opacity: 1;
  background: var(--ds-bg-soft); border: 1px solid var(--ds-border); border-radius: 999px;
  transition: color .18s, background .18s, border-color .18s;
}
.single-product .product-type-variable .variations .reset_variations::before {
  content: "\f00d"; font: 900 9px/1 "Font Awesome 7 Free";
}
.single-product .product-type-variable .variations .reset_variations:hover {
  color: var(--ds-primary); background: var(--ds-primary-soft); border-color: var(--ds-primary);
}

/* ---- Thẻ chọn option: ảnh + tên + giá ---- */
/* Bảng option -> xếp dọc: nhãn ở trên, các thẻ ở dưới */
.single-product .product-type-variable table.variations,
.single-product .product-type-variable table.variations tbody,
.single-product .product-type-variable table.variations tr,
.single-product .product-type-variable table.variations th,
.single-product .product-type-variable table.variations td { display: block; width: 100%; border: 0; }
.single-product .product-type-variable table.variations { margin: 0 0 16px; }
.single-product .product-type-variable .variations th.label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 0 9px;
}
.single-product .product-type-variable .variations th.label label {
  margin: 0; font-weight: 700; font-size: 12px; line-height: 1.4;
  letter-spacing: .8px; text-transform: uppercase; color: var(--ds-muted);
}
.single-product .product-type-variable .variations td.value { padding: 0; }

.single-product .product-type-variable .ux-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.single-product .ux-swatch.ptc-sw {
  position: relative; display: grid; align-items: center;
  grid-template-columns: auto 1fr; grid-template-areas: "img name" "img price";
  column-gap: 12px; row-gap: 2px;
  flex: 1 1 calc(50% - 5px); min-width: 178px; max-width: 100%;
  width: auto; height: auto; margin: 0; padding: 10px 34px 10px 10px;
  background: var(--ds-bg); border: 1.5px solid var(--ds-border); border-radius: 12px; box-shadow: none;
  cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.single-product .ux-swatch.ptc-sw .ptc-sw-img {
  grid-area: img; width: 52px; height: 52px; object-fit: cover;
  border-radius: 8px; background: var(--ds-bg-soft);
}
.single-product .ux-swatch.ptc-sw .ux-swatch__text {
  grid-area: name; font-weight: 600; font-size: 14px; line-height: 1.3;
  color: var(--ds-text); text-align: left;
}
.single-product .ux-swatch.ptc-sw .ptc-sw-price {
  grid-area: price; font-weight: 600; font-size: 13px; color: var(--color-main-red);
}
.single-product .ux-swatch.ptc-sw .ptc-sw-price .price,
.single-product .ux-swatch.ptc-sw .ptc-sw-price bdi { color: inherit; font-size: inherit; font-weight: inherit; }
.single-product .ux-swatch.ptc-sw:not(.has-img) {
  grid-template-columns: 1fr; grid-template-areas: "name" "price"; padding-left: 16px;
}
.single-product .ux-swatch.ptc-sw:hover {
  border-color: var(--ds-primary); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(10, 87, 194, .13);
}
.single-product .ux-swatch.ptc-sw.selected {
  border-color: var(--ds-primary); background: var(--ds-primary-soft);
  box-shadow: inset 0 0 0 1px var(--ds-primary);
}
.single-product .ux-swatch.ptc-sw.selected::after {
  content: "\f00c"; font: 900 10px/18px "Font Awesome 7 Free";
  position: absolute; top: 8px; right: 8px; width: 18px; height: 18px;
  text-align: center; color: #fff; background: var(--ds-primary); border-radius: 50%;
}
.single-product .ux-swatch.ptc-sw.disabled,
.single-product .ux-swatch.ptc-sw.ux-swatch--disabled { opacity: .45; }
/* ---- [CẬP NHẬT 06/10/2026] Hàng chip chọn "Model xe" (inc/model-xe.php) ---- */
.single-product .ptc-model { flex: 0 0 100%; width: 100%; margin: 0 0 16px; }
.single-product .ptc-model[hidden],
.single-product .ptc-model__error[hidden] { display: none; }
.single-product .ptc-model__label {
  padding: 0 0 3px; font-weight: 700; font-size: 12px; line-height: 1.4;
  letter-spacing: .8px; text-transform: uppercase; color: var(--ds-muted);
}
.single-product .ptc-model__chosen { letter-spacing: 0; text-transform: none; color: var(--ds-text); }
/* padding trên/phải: chừa chỗ cho dấu tích nằm đè góc chip, không bị cắt khi thu gọn */
.single-product .ptc-model__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 6px 0 0; }
.single-product .ptc-model__chip { position: relative; margin: 0; cursor: pointer; }
.single-product .ptc-model__chip input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.single-product .ptc-model__chip span {
  display: block; padding: 9px 14px; font-size: 14px; font-weight: 500; line-height: 1.3;
  color: var(--ds-text); background: var(--ds-bg);
  border: 1.5px solid var(--ds-border); border-radius: 8px;
  transition: border-color .18s, background .18s, color .18s;
}
.single-product .ptc-model__chip:hover span { border-color: var(--ds-primary); }
.single-product .ptc-model__chip input:checked + span {
  color: var(--ds-primary); font-weight: 600; background: var(--ds-primary-soft);
  border-color: var(--ds-primary); box-shadow: inset 0 0 0 1px var(--ds-primary);
}
/* Dấu tích ở góc chip đang chọn, giống thẻ "Dòng sản phẩm" */
.single-product .ptc-model__chip input:checked + span::after {
  content: "\f00c"; font: 900 9px/16px "Font Awesome 7 Free";
  position: absolute; top: -6px; right: -6px; width: 16px; height: 16px;
  text-align: center; color: #fff; background: var(--ds-primary); border-radius: 50%;
}
.single-product .ptc-model__chip input:focus-visible + span { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
/* Danh sách dài: chỉ hiện khoảng 3 hàng, bấm "Xem tất cả" để mở hết */
.single-product .ptc-model.is-collapsible:not(.is-open) .ptc-model__list { max-height: 140px; overflow: hidden; }
.single-product .ptc-model__more {
  display: none; margin: 8px 0 0; padding: 0; min-height: 0; line-height: 1.6;
  font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--ds-primary); background: none; border: 0; box-shadow: none;
}
.single-product .ptc-model.is-collapsible:not(.is-open) .ptc-model__more { display: inline-block; }
.single-product .ptc-model__error { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--color-main-red, #d0021b); }
.single-product .ptc-model.has-error .ptc-model__chip span { border-color: var(--color-main-red, #d0021b); }
@media (max-width: 849px) {
  /* Mobile: mỗi hàng đúng 2 chip, bề ngang bằng nhau */
  .single-product .ptc-model__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-product .ptc-model__chip span {
    height: 100%; display: flex; align-items: center; justify-content: center;
    padding: 8px 8px; font-size: 13px; text-align: center; word-break: break-word;
  }
  /* Thu gọn trên mobile: hiện trọn 3 hàng đầu (6 chip), ẩn hẳn phần còn lại.
   * Không cắt theo chiều cao vì chip tên dài xuống 2 dòng sẽ bị cắt ngang chữ. */
  .single-product .ptc-model.is-collapsible:not(.is-open) .ptc-model__list { max-height: none; overflow: visible; }
  .single-product .ptc-model.is-collapsible:not(.is-open) .ptc-model__chip:nth-child(n+7) { display: none; }
}
/* ---- Ô số lượng + nút Thêm vào giỏ: to, dễ bấm, nổi bật (mọi thiết bị) ---- */
.single-product .product-info form.cart .woocommerce-variation-add-to-cart,
.single-product .product-info form.cart.variations_button,
.single-product .product-info form.cart:not(.variations_form):not(.grouped_form) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.single-product .product-info .ux-quantity {
  flex: 0 0 auto; width: 128px; height: 52px; margin: 0;
  border: 1.5px solid var(--ds-border); border-radius: 10px; overflow: hidden; background: var(--ds-bg);
}
.single-product .product-info .ux-quantity input.qty {
  height: 100%; margin: 0; border: 0; background: transparent;
  font-size: 16px; font-weight: 600; color: var(--ds-text); box-shadow: none;
}
.single-product .product-info .ux-quantity .ux-quantity__button {
  height: 100%; width: 40px; margin: 0; border: 0; background: transparent;
  font-size: 18px; line-height: 1; color: var(--ds-muted); box-shadow: none; transition: .15s;
}
.single-product .product-info .ux-quantity .ux-quantity__button:hover {
  color: var(--ds-primary); background: var(--ds-primary-soft);
}
.single-product .product-info .single_add_to_cart_button {
  flex: 1 1 220px; min-width: 200px; max-width: 420px; min-height: 52px; margin: 0; padding: 0 26px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 700; letter-spacing: .6px; line-height: 1;
  border: 0; border-radius: 10px; color: #fff;
  background: var(--ds-secondary); box-shadow: 0 6px 16px rgba(255, 122, 26, .32);
  transition: background .18s, box-shadow .18s, transform .18s;
}
.single-product .product-info .single_add_to_cart_button::before {
  content: "\f07a"; font: 900 15px/1 "Font Awesome 7 Free";
}
.single-product .product-info .single_add_to_cart_button:hover {
  background: var(--ds-secondary-dark); box-shadow: 0 10px 22px rgba(255, 122, 26, .4);
  transform: translateY(-1px);
}
.single-product .product-info .single_add_to_cart_button.disabled,
.single-product .product-info .single_add_to_cart_button:disabled {
  background: var(--ds-border); color: var(--ds-muted); box-shadow: none; transform: none;
}

/* ---- Mobile: thẻ dọc (ảnh trên, tên + giá dưới), tối đa 3 ô mỗi hàng ----
 * 1 option  -> rộng 100%
 * 2 option  -> mỗi ô ~50%
 * 3 option  -> mỗi ô ~33%
 * 4 trở lên -> 3 ô mỗi hàng, ô lẻ xuống hàng dưới vẫn giữ bề ngang 1/3
 */
@media (max-width: 849px) {
  .single-product .product-type-variable .ux-swatches { gap: 8px; }
  .single-product .ux-swatch.ptc-sw {
    flex: 1 1 calc(33.333% - 6px); min-width: 0; width: auto;
    grid-template-columns: 1fr; grid-template-areas: "img" "name" "price";
    justify-items: center; align-content: start; text-align: center;
    row-gap: 5px; column-gap: 0; padding: 9px 8px 11px;
  }
  /* Từ 4 option trở lên: chặn mỗi hàng đúng 3 ô */
  .single-product .product-type-variable .ux-swatches:has(.ptc-sw:nth-child(4)) .ux-swatch.ptc-sw {
    max-width: calc(33.333% - 6px);
  }
  .single-product .ux-swatch.ptc-sw .ptc-sw-img {
    width: 100%; height: auto; max-width: 140px; aspect-ratio: 1 / 1;
    object-fit: contain; background: #fff; border-radius: 6px;
  }
  .single-product .ux-swatch.ptc-sw .ux-swatch__text {
    text-align: center; font-size: 11px; font-weight: 600; line-height: 1.3;
    letter-spacing: 0; word-break: break-word;
  }
  /* Mobile: ẩn giá trong thẻ cho gọn, giá đã hiện sẵn phía trên */
  .single-product .ux-swatch.ptc-sw .ptc-sw-price { display: none; }
  .single-product .ux-swatch.ptc-sw.selected .ux-swatch__text { color: var(--ds-primary); }
  /* Dấu tích nhỏ lại cho vừa thẻ hẹp */
  .single-product .ux-swatch.ptc-sw.selected::after {
    top: 5px; right: 5px; width: 16px; height: 16px; font-size: 9px; line-height: 16px;
  }
  /* Thẻ không có ảnh: canh giữa cho đồng bộ */
  .single-product .ux-swatch.ptc-sw:not(.has-img) {
    grid-template-areas: "name" "price"; padding-left: 8px; padding-right: 8px;
  }
}

/* ---- Mobile: gọn phần đầu trang sản phẩm (tên, đường kẻ, giá) ---- */
@media (max-width: 549px) {
  .single-product .product-info h1.product-title {
    font-size: 20px; line-height: 1.3; margin-bottom: 8px;
  }
  .single-product .product-info .woocommerce-breadcrumb { margin-bottom: 4px; font-size: 11px; }
  .single-product .product-info .is-divider { margin-top: 8px; margin-bottom: 10px; }
  /* Danh sách ảnh trước/sau rỗng nhưng vẫn chiếm chỗ -> ẩn trên mobile */
  .single-product .product-info ul.next-prev-thumbs { display: none; }
  /* span.price bên trong là block và có margin 0.75em trên/dưới, margin này
   * tràn ra ngoài tạo ~32px khoảng trống quanh giá -> bỏ đi. */
  .single-product .product-info .price-wrapper .product-page-price > .price { margin: 0; }
  .single-product .product-info .price-wrapper .product-page-price {
    margin: 0 0 10px; font-size: 21px; line-height: 1.2;
  }
  .single-product .product-info .price-wrapper .product-page-price .woocommerce-Price-amount,
  .single-product .product-info .price-wrapper .product-page-price .woocommerce-Price-amount bdi {
    font-size: 21px; line-height: 1.2;
  }
    /* Ô số lượng rộng hơn cho dễ bấm, nút Thêm vào giỏ chiếm phần còn lại */
  .single-product .product-info .ux-quantity { flex: 0 0 auto; width: 136px; height: 50px; }
  .single-product .product-info .ux-quantity .ux-quantity__button { width: 44px; font-size: 20px; }
  .single-product .product-info .ux-quantity input.qty { font-size: 16px; }
  .single-product .product-info .single_add_to_cart_button {
    flex: 1 1 150px; min-width: 0; min-height: 50px; padding: 0 12px; font-size: 14px; letter-spacing: .3px;
  }
}
/* [CẬP NHẬT 03/10/2026] SẢN PHẨM CÓ BIẾN THỂ — KẾT THÚC ================ */