/* ==========================================================================
   BrickCo - product.css (chỉ nạp ở trang chi tiết sản phẩm)
   ========================================================================== */

:root {
	--red-50:#fef2f2; --red-100:#fee2e2; --red-600:#dc2626;
	--teal-50:#f0fdfa; --teal-600:#0d9488;
}

body.layout-detail { background:var(--gray-100); padding-bottom:0; }

/* ===== Bố cục ===== */
.detail-main { max-width:var(--max-w); margin:0 auto; padding:0.5rem 0.5rem 7rem; display:flex; flex-direction:column; gap:0.5rem; }
.detail-card { background:var(--white); border-radius:var(--radius-lg); padding:0.625rem; box-shadow:var(--shadow-sm); }
/* minmax(0,1fr) + min-width:0: không cho nội dung cuộn ngang (dãy ảnh nhỏ, mã biến thể) kéo rộng cột ra ngoài khung */
.detail-top { display:grid; grid-template-columns:minmax(0,1fr); gap:0.75rem; }
.detail-gallery,
.detail-summary { min-width:0; }
.detail-section-title { font-size:1rem; font-weight:600; color:var(--gray-900); }
.detail-section-title.has-line { padding-bottom:0.5rem; border-bottom:1px solid var(--gray-100); }

/* ===== Gallery ===== */
.detail-gallery-main { position:relative; aspect-ratio:1; overflow:hidden; border-radius:0.5rem; background:var(--gray-50); }
.detail-gallery-main img { width:100%; height:100%; object-fit:cover; }
.detail-discount { position:absolute; top:0; right:0; padding:0.25rem 0.75rem; border-radius:0 0 0 0.5rem; background:var(--red-500); color:var(--white); font-size:0.75rem; font-weight:700; }
.detail-gallery-main { touch-action:pan-y; user-select:none; }
.gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:9999px; background:rgba(255,255,255,.85); color:var(--gray-700); box-shadow:var(--shadow-md); transition:opacity .2s, background .15s; }
.gallery-arrow:hover { background:var(--white); color:var(--orange-600); }
.gallery-arrow.is-prev { left:0.5rem; }
.gallery-arrow.is-next { right:0.5rem; }
.gallery-counter { position:absolute; left:0.5rem; bottom:0.5rem; z-index:2; padding:0.125rem 0.5rem; border-radius:9999px; background:rgba(17,24,39,.6); color:var(--white); font-size:0.6875rem; font-weight:600; font-variant-numeric:tabular-nums; }
/* Máy tính có chuột: chỉ hiện mũi tên khi rê vào ảnh */
@media (hover:hover) {
	.gallery-arrow { opacity:0; }
	.detail-gallery-main:hover .gallery-arrow,
	.gallery-arrow:focus-visible { opacity:1; }
}

.detail-thumbs-slider { position:relative; margin-top:0.75rem; }
.detail-thumbs { display:flex; gap:0.5rem; padding-bottom:0.25rem; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:none; }
.detail-thumbs::-webkit-scrollbar { display:none; }
.thumbs-nav { position:absolute; top:calc(50% - 0.125rem); transform:translateY(-50%); z-index:2; display:flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; border-radius:9999px; border:1px solid var(--gray-200); background:var(--white); color:var(--gray-700); box-shadow:var(--shadow-md); transition:color .15s, border-color .15s; }
.thumbs-nav[hidden] { display:none; }
.thumbs-nav:hover { color:var(--orange-600); border-color:var(--orange-300); }
.thumbs-nav.is-prev { left:-0.375rem; }
.thumbs-nav.is-next { right:-0.375rem; }
.detail-thumb { flex-shrink:0; width:4rem; height:4rem; overflow:hidden; border-radius:0.375rem; border:2px solid transparent; background:var(--gray-50); padding:0; scroll-snap-align:start; transition:border-color .15s; }
.detail-thumb:hover { border-color:var(--orange-300); }
.detail-thumb.is-active { border-color:var(--orange-500); }
.detail-thumb img { width:100%; height:100%; object-fit:cover; }

/* ===== Thông tin ===== */
.detail-summary { display:flex; flex-direction:column; min-width:0; }
.detail-title { font-size:1rem; font-weight:600; line-height:1.375; color:var(--gray-900); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.detail-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.5rem; margin-top:0.5rem; font-size:0.75rem; }
.detail-meta-rating,
.detail-meta-item { display:flex; align-items:center; gap:0.25rem; padding-right:0.5rem; border-right:1px solid var(--gray-200); }
.detail-meta-rating { color:var(--orange-500); text-decoration:underline; }
.detail-meta-rating svg { fill:var(--orange-500); }
.detail-meta-item { color:var(--gray-600); }
.detail-meta-stock { color:var(--gray-500); }

.detail-price-box { margin-top:0.75rem; padding:0.625rem 0.75rem; border-radius:0.5rem; background:var(--orange-50); }
.detail-price-old { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; font-size:0.6875rem; color:var(--gray-500); }
.detail-price-old del { font-size:0.75rem; color:var(--gray-400); }
.detail-price-now { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.5rem; margin-top:0.25rem; }
.detail-price { font-size:1.125rem; font-weight:700; color:var(--red-600); }
.detail-price-label { font-size:0.75rem; font-weight:500; color:var(--red-600); }
.detail-price-badge { padding:0.125rem 0.375rem; border-radius:0.25rem; background:var(--red-100); color:var(--red-600); font-size:0.6875rem; font-weight:700; }

.detail-perks { display:flex; flex-wrap:wrap; gap:0.375rem 0.75rem; margin-top:0.75rem; font-size:0.6875rem; color:var(--gray-600); }
.detail-perk { display:flex; align-items:center; gap:0.375rem; }
.detail-perk .is-teal { display:flex; color:var(--teal-600); }
.detail-perk .is-orange { display:flex; color:var(--orange-500); }

/* ===== Voucher ===== */
.detail-vouchers-mobile { margin-top:0.75rem; padding:0.75rem 0; border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); }
.detail-vouchers-desktop { display:none; }
.vouchers-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; }
.vouchers-title { font-size:0.875rem; font-weight:600; color:var(--gray-800); }
.vouchers-note { font-size:0.6875rem; color:var(--orange-600); font-weight:500; }
.vouchers-note:hover { text-decoration:underline; }
.vouchers-desc { margin-bottom:0.5rem; font-size:0.6875rem; color:var(--gray-500); }
.vouchers-list { display:flex; gap:0.5rem; padding-bottom:0.25rem; overflow-x:auto; scrollbar-width:none; }
.vouchers-list::-webkit-scrollbar { display:none; }
.voucher { position:relative; display:flex; align-items:center; gap:0.375rem; flex-shrink:0; width:44%; overflow:hidden; padding:0.5rem 0.5rem 0.5rem 0.75rem; border:1px solid var(--orange-200); border-radius:0.5rem; background:linear-gradient(to right,var(--orange-50),var(--white)); box-shadow:var(--shadow-sm); transition:transform .15s, border-color .15s, box-shadow .15s; }
.voucher::before { content:''; position:absolute; top:0; bottom:0; left:0; width:0.25rem; background:var(--orange-500); }
.voucher:hover { transform:translateY(-2px); border-color:var(--orange-400); box-shadow:var(--shadow-md); }
.voucher-icon { display:flex; flex-shrink:0; padding:0.25rem; border-radius:0.375rem; }
.voucher-icon.is-teal { color:var(--teal-600); background:var(--teal-50); }
.voucher-icon.is-orange { color:var(--orange-600); background:var(--orange-50); }
.voucher-icon.is-red { color:var(--red-600); background:var(--red-50); }
.voucher-text { flex:1; min-width:0; }
.voucher-title,
.voucher-desc { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.voucher-title { font-size:0.6875rem; font-weight:700; color:var(--gray-800); }
.voucher-desc { font-size:0.625rem; color:var(--orange-600); }

/* ===== Mã biến thể ===== */
.variants-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; }
.variants-title { font-size:0.875rem; font-weight:600; color:var(--gray-800); }
.variants-count { font-size:0.75rem; color:var(--gray-500); }
/* Tồn kho Sapo của mã đang chọn (inc/sapo/stock.php, assets/js/product.js) */
.detail-meta-stock.is-in { font-weight:600; color:#059669; }
.detail-meta-stock.is-out { font-weight:600; color:#dc2626; }
.variants-box { max-height:172px; overflow-y:auto; padding:0.375rem; border-radius:0.5rem; background:var(--gray-50); scrollbar-color:var(--orange-400) var(--gray-100); }
.variants-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.375rem; }
.variant { display:flex; align-items:center; gap:0.375rem; min-width:0; padding:0.375rem; border:1px solid var(--gray-200); border-radius:0.375rem; background:var(--white); color:var(--gray-700); text-align:left; transition:border-color .15s, background .15s; }
.variant:hover { border-color:var(--orange-300); }
.variant.is-active { border-color:var(--orange-500); background:var(--orange-50); color:var(--orange-700); box-shadow:var(--shadow-sm); }
.variant.is-out { opacity:.45; cursor:not-allowed; }
.variant.is-out:hover { border-color:var(--gray-200); }
.variant.is-out .variant-code { text-decoration:line-through; }
.variant-img { flex-shrink:0; width:1.75rem; height:1.75rem; border:1px solid var(--gray-100); border-radius:0.25rem; object-fit:cover; }
.variant-code { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:0.625rem; font-weight:600; }

/* ===== Mua hàng ===== */
.detail-buy { display:none; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--gray-100); }
.detail-buy-row { display:flex; align-items:center; gap:0.75rem; margin-top:0.75rem; }
.detail-buy-label { flex-shrink:0; font-size:0.875rem; font-weight:600; color:var(--gray-800); }
.detail-buy-wc { margin-top:1rem; }
.qty { display:flex; align-items:center; overflow:hidden; border:1px solid var(--gray-200); border-radius:0.5rem; background:var(--white); }
.qty-btn { display:flex; padding:0.5rem; color:var(--gray-600); transition:background .15s; }
.qty-btn:hover { background:var(--gray-50); }
.qty-value { min-width:2.5rem; text-align:center; font-size:0.875rem; font-weight:500; }
.btn-add-cart { flex:1; display:flex; align-items:center; justify-content:center; gap:0.375rem; padding:0.625rem 0.75rem; border-radius:0.5rem; background:var(--orange-500); color:var(--white); font-size:0.875rem; font-weight:700; box-shadow:var(--shadow-sm); transition:background .15s; }
.btn-add-cart:hover { background:var(--orange-600); }
.btn-add-cart:disabled,
.buy-bar button:disabled { background:var(--gray-300); border-color:var(--gray-300); color:var(--white); cursor:not-allowed; }

/* ===== Sản phẩm liên quan ===== */
.detail-related-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; }
.detail-related-hint { display:flex; align-items:center; gap:0.25rem; font-size:0.6875rem; color:var(--gray-500); }
.detail-related-list { display:flex; gap:0.5rem; padding-bottom:0.25rem; overflow-x:auto; scrollbar-width:none; }
.detail-related-list::-webkit-scrollbar { display:none; }
.related-item { flex-shrink:0; width:30%; overflow:hidden; border:1px solid var(--gray-100); border-radius:0.5rem; background:var(--white); transition:transform .15s, border-color .15s, box-shadow .15s; }
.related-item:hover { transform:translateY(-2px); border-color:var(--orange-300); box-shadow:var(--shadow-md); }
.related-item img { width:100%; aspect-ratio:1; object-fit:cover; }
.related-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5rem; padding:0.375rem 0.375rem 0; font-size:0.6875rem; line-height:1rem; color:var(--gray-700); word-break:break-word; }
.related-price { display:block; padding:0.25rem 0.375rem 0.375rem; font-size:0.75rem; font-weight:700; color:var(--red-600); }

/* ===== Mô tả ===== */
.detail-description { padding-top:0.75rem; font-size:0.75rem; line-height:1.5rem; color:var(--gray-600); }
/* Định dạng nội dung soạn trong trình soạn thảo sản phẩm (tiêu đề, danh sách, bảng, ảnh, video...) */
.detail-description > * + * { margin-top:0.75rem; }
.detail-description h2,
.detail-description h3,
.detail-description h4 { margin-top:1.25rem; color:var(--gray-900); font-weight:700; line-height:1.4; }
.detail-description h2 { font-size:1rem; }
.detail-description h3 { font-size:0.9375rem; }
.detail-description h4 { font-size:0.875rem; }
.detail-description a { color:var(--orange-600); text-decoration:underline; }
.detail-description strong { color:var(--gray-800); }
.detail-description ul,
.detail-description ol { padding-left:1.25rem; }
.detail-description ul { list-style:disc; }
.detail-description ol { list-style:decimal; }
.detail-description li + li { margin-top:0.25rem; }
.detail-description img,
.detail-description video { max-width:100%; height:auto; border-radius:0.5rem; }
.detail-description figure { margin-left:0; margin-right:0; }
.detail-description figcaption { margin-top:0.375rem; font-size:0.75rem; color:var(--gray-500); text-align:center; }
.detail-description iframe { width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:0.5rem; }
.detail-description blockquote { padding:0.5rem 0.875rem; border-left:3px solid var(--orange-400); background:var(--orange-50); border-radius:0 0.5rem 0.5rem 0; }
.detail-description table { width:100%; border-collapse:collapse; font-size:0.8125rem; display:block; overflow-x:auto; }
.detail-description th,
.detail-description td { padding:0.5rem 0.625rem; border:1px solid var(--gray-200); text-align:left; vertical-align:top; }
.detail-description th { background:var(--gray-50); color:var(--gray-800); font-weight:600; }
.detail-description tr:nth-child(even) td { background:#fcfcfd; }

/* ===== Đánh giá ===== */
.stars { display:inline-flex; gap:0.125rem; }
.star { fill:var(--gray-300); }
.star.is-on { fill:#fb923c; }
.detail-reviews { display:flex; flex-direction:column; gap:1rem; padding-top:0.75rem; }
.reviews-summary { display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; gap:0.25rem; }
.reviews-score { font-size:1.875rem; font-weight:700; line-height:1.2; color:var(--orange-500); }
.reviews-count { font-size:0.6875rem; color:var(--gray-500); }
.reviews-list { flex:1; display:flex; flex-direction:column; gap:0.5rem; }
.review { padding:0.625rem; border-radius:0.5rem; background:var(--gray-50); }
.review-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.review-author { font-size:0.75rem; font-weight:600; color:var(--gray-800); }
.review-text { margin-top:0.375rem; font-size:0.6875rem; line-height:1.25rem; color:var(--gray-600); }
.reviews-empty { padding:0.75rem; border-radius:0.5rem; background:var(--gray-50); font-size:0.75rem; color:var(--gray-500); text-align:center; }

/* ===== Mobile: thanh mua hàng + bảng chọn ===== */
.buy-bar { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:0.5rem; padding:0.625rem; border-top:1px solid var(--gray-200); background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.buy-bar-cart,
.buy-bar-now { flex:1; display:flex; align-items:center; justify-content:center; gap:0.375rem; padding:0.625rem 0; border-radius:0.5rem; font-size:0.875rem; font-weight:700; transition:background .15s; }
.buy-bar-cart { border:1px solid var(--orange-500); background:var(--orange-50); color:var(--orange-600); }
.buy-bar-cart:hover { background:var(--orange-100); }
.buy-bar-now { background:var(--orange-500); color:var(--white); }
.buy-bar-now:hover { background:var(--orange-600); }

.sheet { position:fixed; inset:0; z-index:60; }
.sheet[hidden] { display:none; }
.sheet-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .25s; }
.sheet-panel { position:absolute; left:0; right:0; bottom:0; max-height:85vh; overflow-y:auto; padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius:1rem 1rem 0 0; background:var(--white); transform:translateY(100%); transition:transform .25s ease-out; }
.sheet.is-open .sheet-backdrop { opacity:1; }
.sheet.is-open .sheet-panel { transform:translateY(0); }
.sheet-close { position:absolute; top:0.75rem; right:0.75rem; display:flex; padding:0.25rem; color:var(--gray-500); }
.sheet-head { display:flex; gap:0.75rem; padding-bottom:0.75rem; margin-bottom:0.75rem; border-bottom:1px solid var(--gray-100); }
.sheet-img { flex-shrink:0; width:5rem; height:5rem; border:1px solid var(--gray-100); border-radius:0.5rem; object-fit:cover; }
.sheet-info { display:flex; flex-direction:column; justify-content:flex-end; gap:0.125rem; min-width:0; }
.sheet-price { font-size:1.125rem; font-weight:700; color:var(--red-600); }
.sheet-price-old { font-size:0.75rem; color:var(--gray-400); }
.sheet-code { font-size:0.75rem; color:var(--gray-600); }
.sheet .variants-box { max-height:40vh; }
.sheet .variants-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sheet-qty { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; }
.sheet-submit { width:100%; margin-top:1rem; padding:0.75rem; }
body.sheet-open { overflow:hidden; }

/* ===== Responsive: sm (640px+) ===== */
@media (min-width:640px) {
	.detail-main { padding:1.25rem 1rem; gap:0.75rem; }
	.detail-card { padding:1.25rem; }
	.detail-top { gap:1.25rem; }
	.detail-section-title { font-size:1.125rem; }
	.detail-section-title.has-line { padding-bottom:0.75rem; }
	.detail-thumb { width:5rem; height:5rem; }
	.detail-title { font-size:1.5rem; }
	.detail-meta { margin-top:0.75rem; font-size:0.875rem; }
	.detail-meta-rating,
	.detail-meta-item { padding-right:0.75rem; }
	.detail-price-box { margin-top:1.25rem; padding:0.75rem 1rem; }
	.detail-price-old { font-size:0.75rem; }
	.detail-price-old del { font-size:0.875rem; }
	.detail-price { font-size:1.875rem; }
	.detail-price-label { font-size:0.875rem; }
	.detail-price-badge { font-size:0.75rem; }
	.detail-perks { margin-top:1rem; gap:0.5rem 1rem; font-size:0.75rem; }
	.detail-vouchers-mobile { display:none; }
	.detail-vouchers-desktop { display:block; }
	.vouchers-head { margin-bottom:0.75rem; }
	.vouchers-title { font-size:1rem; }
	.vouchers-note { font-size:0.75rem; }
	.vouchers-desc { margin-bottom:0.75rem; font-size:0.75rem; }
	.voucher { width:30%; gap:0.5rem; padding:0.625rem 0.625rem 0.625rem 0.875rem; }
	.voucher-icon { padding:0.375rem; }
	.voucher-title { font-size:0.75rem; }
	.voucher-desc { font-size:0.6875rem; }
	.detail-buy { display:block; }
	.detail-related-head { margin-bottom:0.75rem; }
	.detail-related-hint { font-size:0.75rem; }
	.related-item { width:10rem; }
	.related-name { padding:0.5rem 0.5rem 0; font-size:0.75rem; }
	.related-price { padding:0.25rem 0.5rem 0.5rem; font-size:0.875rem; }
	.detail-description { padding-top:1rem; font-size:0.875rem; line-height:1.75rem; }
	.detail-reviews { flex-direction:row; gap:1.5rem; padding-top:1rem; }
	.reviews-summary { width:8rem; }
	.reviews-score { font-size:2.25rem; }
	.reviews-count { font-size:0.75rem; }
	.reviews-list { gap:0.625rem; }
	.review { padding:0.75rem; }
	.review-author { font-size:0.875rem; }
	.review-text { font-size:0.75rem; }
	.buy-bar,
	.sheet { display:none; }
}

/* ===== Responsive: lg (1024px+) ===== */
@media (min-width:1024px) {
	.detail-top { grid-template-columns:minmax(320px,.85fr) 1.15fr; gap:2rem; }
}


/* ===== Dải Flash Sale (template-parts/product/flash-sale.php) ===== */
.fs-banner { margin-top:0.75rem; padding:0.5rem 0.75rem 0.625rem; border-radius:0.5rem; background:linear-gradient(to right,var(--orange-500),#ef4444); color:#fff; }
.fs-banner-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.25rem 0.75rem; }
.fs-banner-title { display:inline-flex; align-items:center; gap:0.25rem; font-size:1rem; font-weight:800; font-style:italic; letter-spacing:.025em; }
.fs-banner-title svg { fill:#fde047; stroke:#fde047; }
.fs-banner-timer { display:inline-flex; align-items:center; gap:0.375rem; font-size:0.75rem; }
.fs-banner-timer-label { opacity:.9; }
.fs-banner .fs-bar { margin-top:0.5rem; background:rgba(255,255,255,.35); }
.fs-banner .fs-bar-fill { background:#fde047; }
.fs-banner .fs-bar-text { color:#9a3412; text-shadow:none; }
.fs-banner-note { margin-top:0.375rem; font-size:0.8125rem; }
.fs-banner-note b { font-weight:700; }
.fs-banner.is-upcoming { background:linear-gradient(to right,#fb923c,#f97316); }
.fs-banner.is-soldout { background:linear-gradient(to right,#9ca3af,#6b7280); }
.fs-banner.is-soldout .fs-bar-fill { background:#e5e7eb; }
.fs-banner.is-soldout .fs-bar-text { color:#374151; }
@media (min-width:640px) {
	.fs-banner { margin-top:1.25rem; padding:0.625rem 1rem 0.75rem; }
	.fs-banner-title { font-size:1.125rem; }
}