/* Trang sản phẩm 2026 (inc/product.php). Dùng chung biến màu, kiểu chữ, hộp tư vấn, mục lục của khung đọc (article.css)
   và thẻ sản phẩm, khối báo giá của trang chủ (home.css). Phẳng, xanh thương hiệu là màu chính, cam cho hover và điểm nhấn, bo 6px. */

/* ---------- Breadcrumb ---------- */
.xp-crumbbar{background:var(--xa-bg);border-bottom:1px solid var(--xa-line)}
.xp-crumbbar .xa-wrap{padding-top:14px;padding-bottom:14px}

/* ---------- Ảnh + thông tin ---------- */
.xp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding-top:36px;padding-bottom:48px}
.xp-gallery{position:sticky;top:var(--xa-sticky,96px);min-width:0}
.admin-bar .xp-gallery{top:calc(var(--xa-sticky,96px) + 32px)}
.xp .xp-gallery .product-images{margin:0;border:1px solid var(--xa-line);border-radius:6px;overflow:hidden;background:#FFFFFF}
.xp .xp-gallery .woocommerce-product-gallery__wrapper{margin:0}
.xp .xp-gallery .woocommerce-product-gallery__image a,
.xp .xp-gallery .woocommerce-product-gallery__image--placeholder{display:block}
.xp .xp-gallery .woocommerce-product-gallery__image img,
.xp .xp-gallery .woocommerce-product-gallery__image--placeholder img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.xp .xp-gallery .product-thumbnails{margin-top:10px}
.xp .xp-gallery .product-thumbnails .col{padding-bottom:0}
.xp .xp-gallery .product-thumbnails a{display:block;overflow:hidden;border:1px solid var(--xa-line);border-radius:6px;background:#FFFFFF;transform:none;transition:border-color .15s}
.xp .xp-gallery .product-thumbnails a:hover{border-color:var(--xa-accent)}
.xp .xp-gallery .product-thumbnails .is-nav-selected a{border:2px solid var(--xa-brand)}
.xp .xp-gallery .product-thumbnails img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;opacity:1;transform:none;margin:0}
.xp .xp-gallery .flickity-button{border-radius:6px;background:var(--xa-brand);color:#FFFFFF;opacity:1}
.xp .xp-gallery .flickity-button:hover{background:var(--xa-accent)}

.xp-summary{min-width:0}
.xp .xp-eyebrow{margin:0 0 12px}
.xp .xp-title{margin:0;font:700 clamp(25px,3.4vw,36px)/1.2 var(--xa-display);letter-spacing:.01em;text-transform:none;text-wrap:pretty;color:var(--xa-brand)}
.xp .xp-badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.xp .xp-badges li{margin:0;padding:3px 10px;border:1px solid var(--xa-line);border-radius:6px;font:500 12px/1.5 var(--xa-data);letter-spacing:.06em;text-transform:uppercase;color:var(--xa-muted)}
.xp .xp-badges li.is-ok{border-color:var(--xa-leaf);color:#2B8527}

.xp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:20px;padding:16px 0;border-top:1px solid var(--xa-line);border-bottom:1px solid var(--xa-line)}
.xp-price small{font:500 11px/1 var(--xa-data);letter-spacing:.1em;text-transform:uppercase;color:var(--xa-muted)}
.xp .xp-price strong,.xp .xp-price strong .amount,.xp .xp-price strong .lien-he-price{font:700 33px/1.2 var(--xa-display);font-variant-numeric:tabular-nums;color:var(--xa-accent-text)}
.xp .xp-price strong del{font-size:.6em;opacity:.6}
.xp .xp-price strong ins{text-decoration:none}
.xp .xp-price__note{flex-basis:100%;margin:0;font-size:14px;line-height:1.5;color:var(--xa-muted)}

.xp .xp-short{margin-top:18px;font-size:16px}
.xp .xp-short>*:last-child{margin-bottom:0}

/* Thông số nổi bật: 2 cột, ô cao bằng nhau */
.xp .xp-keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 0;padding:0}
.xp .xp-keys>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;border:1px solid var(--xa-line);border-radius:6px;background:var(--xa-surface)}
.xp .xp-keys dt{margin:0;font:500 11px/1.4 var(--xa-data);letter-spacing:.08em;text-transform:uppercase;color:var(--xa-muted)}
.xp .xp-keys dd{margin:0;text-transform:none;letter-spacing:0;font-weight:600;font-size:15px;line-height:1.4;color:var(--xa-ink);overflow-wrap:anywhere}
.xp .xp-more{display:inline-flex;margin-top:12px;text-decoration:none}
.xp .xp-more .xh-more,.xp .xp-more{font:500 12px/1.4 var(--xa-data);letter-spacing:.08em;text-transform:uppercase;color:var(--xa-accent-text)}
.xp .xp-more .xh-more{display:inline-flex;align-items:center;gap:6px}
.xp .xp-more svg{transition:transform .15s}
.xp .xp-more:hover svg{transform:translateX(3px)}

/* Khung bộ công tác */
.xp-acc{margin-top:20px;border:1px solid var(--xa-line);border-top:4px solid var(--xa-brand);border-radius:6px;background:#EAF1FA}
.xp .xp-acc__trigger{display:flex;align-items:center;gap:14px;width:100%;min-height:0;margin:0;padding:14px 16px;border:0;background:transparent;color:var(--xa-ink);font:inherit;text-align:left;text-transform:none;letter-spacing:0;cursor:pointer}
.xp-acc__ic{display:grid;flex:none;place-items:center;width:44px;height:44px;border-radius:6px;background:var(--xa-brand);color:#FFFFFF;transition:background-color .15s}
.xp-acc__ic svg{width:24px;height:24px}
.xp .xp-acc__trigger:hover .xp-acc__ic{background:var(--xa-accent)}
.xp-acc__txt{flex:1;min-width:0}
.xp-acc__txt strong{display:block;font:700 18px/1.2 var(--xa-display);text-transform:uppercase;color:var(--xa-brand)}
.xp-acc__txt>span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--xa-muted)}
.xp-acc__badge{display:inline-block;margin-left:6px;padding:3px 8px;border-radius:6px;background:var(--xa-accent);color:#FFFFFF;font:500 13px/1 var(--xa-data);vertical-align:3px}
.xp-acc__badge[hidden]{display:none}
.xp-acc__chev{display:grid;flex:none;place-items:center;width:34px;height:34px;border:2px solid var(--xa-brand);border-radius:6px;color:var(--xa-brand)}
.xp-acc__chev svg{width:16px;height:16px;transition:transform .2s}
.xp-acc.is-open .xp-acc__chev svg{transform:rotate(180deg)}
.xp-acc__panel{padding:0 16px 16px}
.xp .xp-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.xp .xp-opt{display:flex;align-items:stretch;min-width:0;margin:0;border:1px solid var(--xa-line);border-radius:6px;background:var(--xa-surface);transition:border-color .15s}
.xp .xp-opt:hover{border-color:var(--xa-brand)}
.xp .xp-opt:has(input:checked){border-color:var(--xa-brand);background:#F5F9FE}
.xp .xp-opt label{display:flex;flex:1;align-items:flex-start;gap:10px;min-width:0;margin:0;padding:10px 6px 10px 12px;font-weight:600;font-size:14px;line-height:1.35;color:var(--xa-ink);cursor:pointer}
.xp .xp-opt input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--xa-brand);cursor:pointer}
.xp .xp-opt a{align-self:center;flex:none;margin-right:10px;font:500 11px/1 var(--xa-data);letter-spacing:.06em;text-transform:uppercase;color:var(--xa-accent-text);text-decoration:none}
.xp .xp-opt a:hover{text-decoration:underline}
.xp-acc__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--xa-line)}
.xp .xp-acc__sum{flex:1 1 220px;min-width:0;margin:0;font-size:14px;line-height:1.5;color:var(--xa-muted)}

/* Nút */
.xp .xp-btn{display:flex;align-items:center;gap:10px;min-height:56px;margin:0;padding:6px 18px 6px 6px;border:2px solid var(--xa-brand);border-radius:6px;background:var(--xa-brand);color:#FFFFFF;font:600 18px/1.15 var(--xa-body);text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.xp .xp-btn:hover{background:var(--xa-accent);border-color:var(--xa-accent);color:#FFFFFF}
.xp .xp-btn small{display:block;font:500 10px/1.3 var(--xa-data);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.xp-btn__ic{display:grid;flex:none;place-items:center;width:40px;height:40px;border-radius:6px;background:rgba(255,255,255,.14)}
.xp-btn__ic svg{width:19px;height:19px}
.xp .xp-btn--line{background:transparent;color:var(--xa-brand)}
.xp .xp-btn--line .xp-btn__ic{background:#EAF1FA}
.xp .xp-btn--line:hover .xp-btn__ic{background:rgba(255,255,255,.18)}
.xp .xp-btn--sm{justify-content:center;min-height:40px;padding:6px 14px;font-size:14px}
.xp-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.xp .xp-actions__link{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--xa-muted);text-decoration:none}
.xp .xp-actions__link svg{width:16px;height:16px;flex:none;color:var(--xa-accent)}
.xp .xp-actions__link:hover{color:var(--xa-brand)}

.xp .xp-meta{display:grid;gap:6px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--xa-line);font-size:14px}
.xp .xp-meta>div{display:flex;gap:10px}
.xp .xp-meta dt{flex:none;width:120px;margin:0;font:500 11px/1.9 var(--xa-data);letter-spacing:.08em;text-transform:uppercase;color:var(--xa-muted)}
.xp .xp-meta dd{margin:0;color:var(--xa-ink)}
.xp .xp-meta a{color:var(--xa-brand);text-decoration:none}
.xp .xp-meta a:hover{color:var(--xa-accent-text)}

/* ---------- Thanh mục ---------- */
.xp-nav{border-top:1px solid var(--xa-line);border-bottom:1px solid var(--xa-line);background:var(--xa-surface)}
.xp .xp-nav ul{display:flex;gap:4px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.xp .xp-nav ul::-webkit-scrollbar{display:none}
.xp .xp-nav li{flex:none;margin:0}
.xp .xp-nav a{display:block;padding:14px 16px;border-bottom:3px solid transparent;margin-bottom:-1px;font:600 15px/1.3 var(--xa-body);color:var(--xa-muted);text-decoration:none;white-space:nowrap;transition:color .15s,border-color .15s}
.xp .xp-nav li:first-child a{padding-left:0}
.xp .xp-nav a:hover{color:var(--xa-brand);border-bottom-color:var(--xa-accent)}

/* ---------- Thông số + mô tả ---------- */
.xp-body{padding-top:40px}
.xp-sec+.xp-sec{margin-top:56px}
.xp-sec{scroll-margin-top:110px}
.xp .xp-h{position:relative;margin:0 0 22px;padding-top:18px;font:700 clamp(23px,3vw,30px)/1.2 var(--xa-display);letter-spacing:.01em;text-transform:uppercase;color:var(--xa-brand)}
.xp .xp-h::before{content:"";position:absolute;top:0;left:0;width:40px;height:4px;border-radius:2px;background:var(--xa-accent)}
.xp-spec{overflow-x:auto;border:1px solid var(--xa-line);border-radius:6px}
.xp .xp-spec table{width:100%;margin:0;border:0;border-collapse:collapse;font-size:15px;line-height:1.5}
.xp .xp-spec th,.xp .xp-spec td{padding:11px 16px;border:0;border-bottom:1px solid var(--xa-line);text-align:left;vertical-align:top;text-transform:none;letter-spacing:0}
.xp .xp-spec tr:last-child>*{border-bottom:0}
.xp .xp-spec th{width:38%;background:var(--xa-bg);font-weight:600;color:var(--xa-muted)}
.xp .xp-spec td{font-variant-numeric:tabular-nums;color:var(--xa-ink)}
.xp .xp-spec tr:nth-child(even) td{background:#FAFCFE}
.xp #mo-ta .xa-toc--inline{margin-bottom:28px}

/* ---------- Báo giá + sản phẩm tương tự (khối của trang chủ, cùng bề rộng với trang) ---------- */
.xp .xh .xh-wrap{max-width:var(--xa-container,1112px)}
.xp-quote{scroll-margin-top:96px}
.xp .xp-rel{position:relative}
.xp .xp-rel__track{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0 6px;outline:0}
.xp .xp-rel__track::-webkit-scrollbar{display:none}
.xp .xp-rel__track>.xh-prod{flex:0 0 calc((100% - 54px) / 4);min-width:0;scroll-snap-align:start}
.xp .xp-rel__track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.xp .xp-rel__track.is-dragging>*{pointer-events:none}
.xp .xp-rel__track img{-webkit-user-drag:none;user-select:none}
.xp .xp-rel .xh-prod h3{font-size:19px}

/* ---------- Máy tính bảng / điện thoại ---------- */
@media (max-width:1100px){
	.xp .xp-rel__track>.xh-prod{flex-basis:calc((100% - 36px) / 3)}
}
@media (max-width:960px){
	.xp-top{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:20px}
	.xp-gallery{position:static}
	.xp-body{padding-top:28px}
	.xp .xp-rel__track>.xh-prod{flex-basis:calc((100% - 18px) / 2)}
}
@media (max-width:600px){
	.xp .xp-title{font-size:30px}
	.xp .xp-price strong,.xp .xp-price strong .amount,.xp .xp-price strong .lien-he-price{font-size:34px}
	.xp .xp-opts{grid-template-columns:minmax(0,1fr)}
	.xp-actions{grid-template-columns:minmax(0,1fr)}
	.xp .xp-meta dt{width:104px}
	.xp .xp-spec th{width:44%}
	.xp .xp-spec th,.xp .xp-spec td{padding:10px 12px}
	.xp .xp-rel__track{gap:14px}
	.xp .xp-rel__track>.xh-prod{flex-basis:78%}
	.xp .xp-nav a{padding:12px 12px;font-size:14px}
}

/* Thư viện ảnh của plugin Product Video Gallery (nickx): khung vuông, viền mảnh, bo 6px */
.xp .xp-gallery .nickx-slider-for{border:1px solid var(--xa-line);border-radius:6px;overflow:hidden;background:#FFFFFF}
.xp .xp-gallery .nickx-slider-for img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.xp .xp-gallery .nickx-slider-nav{margin-top:10px}
.xp .xp-gallery .nickx-slider-nav .nswiper-slide{overflow:hidden;border:1px solid var(--xa-line);border-radius:6px;background:#FFFFFF;cursor:pointer;transition:border-color .15s}
.xp .xp-gallery .nickx-slider-nav .nswiper-slide:hover{border-color:var(--xa-accent)}
.xp .xp-gallery .nickx-slider-nav .nswiper-slide-thumb-active{border:2px solid var(--xa-brand)}
.xp .xp-gallery .nickx-slider-nav img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.xp .xp-meta dd{text-transform:none;letter-spacing:0}
.xp .xp-meta dd a{text-transform:none}
.xp .xp-rel .xh-prod .xh-btn{white-space:nowrap}
.xp .xp-rel .xh-prod__price{flex-wrap:nowrap;align-items:flex-end}
.xp .xp-rel .xh-prod__price strong{white-space:nowrap}
/* Ẩn dải tiêu đề sản phẩm của Flatsome (đã có breadcrumb của theme) */
.xp-page .product-page-title,.xp-page .shop-page-title.product-page-title{display:none!important}
/* Khối báo giá: tên sản phẩm điền sẵn, ẩn ô "Loại xe cần mua" */
.xp .xp-qprod{display:grid;gap:4px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--xa-line);border-left:4px solid var(--xa-accent);border-radius:6px;background:var(--xa-bg)}
.xp .xp-qprod small{font:500 11px/1.4 var(--xa-data);letter-spacing:.1em;text-transform:uppercase;color:var(--xa-muted)}
.xp .xp-qprod b{font:600 15px/1.45 var(--xa-body);color:var(--xa-ink)}
.xp .xp-qprod span{font-size:13px;line-height:1.5;color:var(--xa-muted)}
.xp .xp-qprod span:empty{display:none}
.xp .xp-quote .xp-qhide{display:none!important}
.xp .xp-rel .xh-prod__price>div{min-width:0}
.xp .xp-rel .xh-prod__price strong{font-size:22px}
.xp .xp-rel .xh-prod .xh-btn{flex:none;min-height:38px;padding:6px 12px;font-size:14px}

/* v2.18.1: bảng thông số cùng cỡ chữ với nội dung bài (.xa-content) */
.xp .xp-spec table{font-size:17px;line-height:1.65}
@media (max-width:960px){.xp .xp-spec table{font-size:16px}}

/* v2.19.3: chữ "Giá" và số tiền căn giữa theo chiều dọc trên cùng một dòng */
.xp-price{align-items:center}
.xp-price small{font-size:13px;line-height:1.2}
.xp .xp-price strong,.xp .xp-price strong .amount,.xp .xp-price strong .lien-he-price{line-height:1.1}