/*
 * Bố cục trang sản phẩm theo mẫu LamKa — bản cho phuongvyicenter.vn (Flatsome, nền sáng), plugin PhuongVy PDP.
 * Màu: các biến --pvpdp-* bên dưới (màu chính lấy từ Flatsome: --primary-color #dd3333 của site).
 */
.pvpdp-page {
	--pvpdp-primary: var(--primary-color, #446084); /* nút Mua ngay, viền ảnh nhỏ đang xem */
	--pvpdp-primary-text: #fff;
	--pvpdp-accent: #E2231A;                         /* % giảm, nhấn */
	--pvpdp-text: #111827;
	--pvpdp-muted: #5B6472;
	--pvpdp-bg: #fff;
	--pvpdp-surface: #F6F7F9;
	--pvpdp-border: #E3E6EA;
	--pvpdp-radius: 14px;
	--pvpdp-radius-lg: 18px;
	--pvpdp-header: 110px;                           /* header dính của Flatsome (máy tính 110px) — pv-pdp.js đo lại theo thực tế */
	--pvpdp-ratio: 4 / 3;                            /* ô ảnh lớn: 4/3 cho ảnh 800×600; ảnh vuông 1000×1000 thì đổi 1 / 1 */
	color: var(--pvpdp-text);
}
.pvpdp-wrap { max-width: 1530px; margin: 0 auto; padding: 16px 15px 40px; box-sizing: border-box; } /* = khung .container của Flatsome trên site */
.pvpdp-wrap .woocommerce-breadcrumb { margin: 0 0 16px; font-size: 13px; color: var(--pvpdp-muted); }
.pvpdp-page *, .pvpdp-page *::before, .pvpdp-page *::after { box-sizing: border-box; }
/* Bảo vệ: không tràn ngang trên điện thoại (ảnh của mục liên quan, chữ ẩn cho trình đọc màn hình). */
.pvpdp-wrap { overflow-x: clip; }
.pvpdp-wrap img { max-width: 100%; height: auto; }
.pvpdp-page .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Lưới khung trên ----------
 * Điện thoại / máy tính bảng: 1 cột — ảnh → thông tin + nút mua → ô bảo hành & tình trạng → ô chính sách, địa chỉ.
 * Máy tính (≥1024px): lưới 3 hàng dùng chung 2 cột để các phần THẲNG HÀNG:
 *   hàng 1: ảnh lớn            | thông tin + Số lượng/Thêm vào giỏ (đáy ngang chân ảnh)
 *   hàng 2: hàng ảnh nhỏ        | Mua ngay · Shopee · Tư vấn Zalo (cùng cao 52px)
 *   hàng 3: ô chính sách/địa chỉ | ô Bảo hành & tình trạng (đỉnh ngang nhau, cao bằng nhau)
 */
.pvpdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 8px; }
.pvpdp-media { display: contents; }
.pvpdp-gallery { order: 1; }
.pvpdp-buy { order: 2; }
.pvpdp-trust { order: 3; }

/* ---------- Ô ảnh ---------- */
.pvpdp-gallery__main { position: relative; border-radius: var(--pvpdp-radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--pvpdp-border); aspect-ratio: var(--pvpdp-ratio); }
.pvpdp-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .28s ease; margin: 0; } /* hiện trọn ảnh (ảnh vuông hay 4:3 đều không bị cắt) */
.pvpdp-gallery__main img.is-fading { opacity: .12; }
.pvpdp-gallery__open { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--pvpdp-text); cursor: zoom-in; min-height: 0; box-shadow: none; }
.pvpdp-gallery__open .pvpdp-icon { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; padding: 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); border: 1px solid var(--pvpdp-border); }
.pvpdp-gallery__open:hover .pvpdp-icon { border-color: var(--pvpdp-primary); color: var(--pvpdp-primary); }
.pvpdp-gallery__open:focus-visible { outline: 2px solid var(--pvpdp-primary); outline-offset: -3px; }
.pvpdp-gallery__count { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); border: 1px solid var(--pvpdp-border); font-size: 13px; font-weight: 600; line-height: 1.2; pointer-events: none; font-variant-numeric: tabular-nums; }
.pvpdp-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.pvpdp-thumbs::-webkit-scrollbar { display: none; }
.pvpdp-thumbs button { flex: 0 0 70px; height: 52px; margin: 0; padding: 0; min-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--pvpdp-border); background: var(--pvpdp-surface); cursor: pointer; }
.pvpdp-thumbs button[aria-pressed="true"] { border-color: var(--pvpdp-primary); box-shadow: 0 0 0 1px var(--pvpdp-primary); }
.pvpdp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }

/* ---------- Khung mua ---------- */
.pvpdp-buy__top > * { margin: 0; }
.pvpdp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pvpdp-primary); text-decoration: none; }
.pvpdp-title { font-size: clamp(22px, 2.4vw, 28px) !important; line-height: 1.22 !important; margin: 8px 0 0 !important; letter-spacing: -.01em; }
.pvpdp-price { margin-top: 16px !important; padding: 14px 16px; border-radius: var(--pvpdp-radius); background: var(--pvpdp-surface); border: 1px solid var(--pvpdp-border); }
.pvpdp-price small { display: block; color: var(--pvpdp-muted); font-size: 12.5px; }
.pvpdp-price__big { font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--pvpdp-text); }
.pvpdp-price__big del { font-size: 16px; font-weight: 500; color: var(--pvpdp-muted); margin-right: 8px; }
.pvpdp-price__big ins { text-decoration: none; color: var(--pvpdp-accent); }
.pvpdp-short { margin-top: 14px !important; color: var(--pvpdp-muted); font-size: 15px; line-height: 1.6; }
.pvpdp-short > :first-child { margin-top: 0; }
.pvpdp-short > :last-child { margin-bottom: 0; }
.pvpdp-short ul { margin: 10px 0 0 18px; }
.pvpdp-cart { margin-top: 18px !important; }
.pvpdp-cart form.cart { margin: 0 !important; }
/* Số lượng + Thêm vào giỏ cùng hàng, cao 52px. (Flatsome có nút +/- quanh ô số lượng: giữ nguyên, chỉ chỉnh chiều cao.) */
.pvpdp-cart form.cart:not(.variations_form), .pvpdp-cart .woocommerce-variation-add-to-cart { display: grid !important; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.pvpdp-cart .quantity { margin: 0 !important; height: 52px; display: flex; }
.pvpdp-cart .quantity input.qty { height: 52px !important; flex: 1; text-align: center; }
.pvpdp-cart .single_add_to_cart_button { height: 52px; min-height: 52px; margin: 0 !important; border-radius: 999px; width: 100%; }
.pvpdp-cart .variations { margin-bottom: 10px; }

/* Hàng nút: Mua ngay · Shopee · Tư vấn Zalo chung 1 hàng; hẹp quá thì tự xuống dòng (nút cuối giãn hết hàng). */
.pvpdp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pvpdp-buy > .pvpdp-actions { margin-top: 10px; }
.pvpdp-btn { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 52px; margin: 0; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; text-transform: none; cursor: pointer; transition: filter .2s, box-shadow .2s; }
.pvpdp-btn:hover { filter: brightness(.95); text-decoration: none; }
.pvpdp-btn--buy { background: var(--pvpdp-primary); color: var(--pvpdp-primary-text); }
.pvpdp-btn--shopee { background: #EE4D2D; color: #fff; }
.pvpdp-btn--shopee:hover { color: #fff; }
.pvpdp-btn--zalo { background: #0068FF; color: #fff; }
.pvpdp-btn--zalo:hover { color: #fff; }

/* Ô bảo hành & tình trạng (hàng 3 cột phải) và ô chính sách, địa chỉ (hàng 3 cột trái): cao bằng nhau trên máy tính. */
.pvpdp-infobox { margin-top: 14px !important; padding: 12px 14px; border-radius: var(--pvpdp-radius); background: var(--pvpdp-surface); border: 1px solid var(--pvpdp-border); }
.pvpdp-infobox__title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px !important; font-weight: 700; font-size: 14px; }
.pvpdp-infobox .pvpdp-table-scroll { background: var(--pvpdp-bg); }
.pvpdp-infobox .pvpdp-spec { font-size: 14px; }
.pvpdp-infobox .pvpdp-spec :is(th, td) { padding: 7px 10px; }
.pvpdp-trust { list-style: none; margin: 0 !important; padding: 14px 16px !important; display: grid; gap: 8px; border-radius: var(--pvpdp-radius); background: var(--pvpdp-surface); border: 1px solid var(--pvpdp-border); }
.pvpdp-trust li, .pvpdp-notes li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--pvpdp-muted); }
.pvpdp-trust b { color: var(--pvpdp-text); }
.pvpdp-trust .pvpdp-icon, .pvpdp-notes .pvpdp-icon { color: var(--pvpdp-primary); margin-top: 1px; }
.pvpdp-muted { color: var(--pvpdp-muted); }

/* ---------- Bảng ---------- */
.pvpdp-table-scroll { overflow-x: auto; border: 1px solid var(--pvpdp-border); border-radius: 12px; }
.pvpdp-spec { width: 100%; border-collapse: collapse; margin: 0 !important; font-size: 15px; }
.pvpdp-spec :is(th, td) { text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--pvpdp-border); vertical-align: top; }
.pvpdp-spec tr:last-child :is(th, td) { border-bottom: 0; }
.pvpdp-spec th { color: var(--pvpdp-muted); font-weight: 500; width: 40%; }
.pvpdp-spec-prose .pvpdp-table-scroll { margin: 0 0 16px; }

/* ---------- Các tab nội dung ---------- */
.pvpdp-details { margin-top: 32px; }
.pvpdp-tabs { position: sticky; top: var(--pvpdp-header); z-index: 30; background: var(--pvpdp-bg); border-bottom: 1px solid var(--pvpdp-border); }
.pvpdp-tabs__row { display: flex; overflow-x: auto; scrollbar-width: none; }
.pvpdp-tabs__row::-webkit-scrollbar { display: none; }
.pvpdp-tabs a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; color: var(--pvpdp-muted); font-weight: 600; font-size: 14.5px; border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.pvpdp-tabs a.is-active { color: var(--pvpdp-text); border-bottom-color: var(--pvpdp-primary); }
.pvpdp-section { padding-top: 28px; scroll-margin-top: calc(var(--pvpdp-header) + 60px); }
.pvpdp-section > h2 { font-size: clamp(20px, 2.2vw, 24px); margin: 0 0 14px; }
.pvpdp-prose { font-size: 16px; line-height: 1.7; }
.pvpdp-prose img { max-width: 100%; height: auto; }
.pvpdp-notes { list-style: none; margin: 16px 0 0 !important; padding: 0; display: grid; gap: 10px; }

/* ---------- Khung phóng to (16:9, tối đa 1600×900, giữa màn hình) ---------- */
html.pvpdp-lock { overflow: hidden; }
.pvpdp-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; }
.pvpdp-lightbox[hidden] { display: none; }
.pvpdp-lightbox__backdrop { position: absolute; inset: 0; background: rgba(10, 12, 16, .92); opacity: 0; transition: opacity .28s ease; }
.pvpdp-lightbox.is-open .pvpdp-lightbox__backdrop { opacity: 1; }
.pvpdp-lightbox__frame { position: relative; margin: 0; width: min(1600px, 92vw, calc((100vh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 90px rgba(0, 0, 0, .5); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.pvpdp-lightbox__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pvpdp-lightbox__btn { position: absolute; z-index: 2; width: 48px; height: 48px; min-height: 0; margin: 0; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(20, 24, 32, .85); color: #fff; cursor: pointer; }
.pvpdp-lightbox__btn:hover { background: var(--pvpdp-primary); }
.pvpdp-lightbox__close { top: 16px; right: 16px; }
.pvpdp-lightbox__prev, .pvpdp-lightbox__next { top: 50%; transform: translateY(-50%); }
.pvpdp-lightbox__prev { left: 16px; }
.pvpdp-lightbox__next { right: 16px; }
.pvpdp-lightbox__count { position: absolute; z-index: 2; bottom: 18px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(20, 24, 32, .85); color: #fff; font-size: 14px; font-weight: 600; }
@media (max-width: 700px) {
	.pvpdp-lightbox__frame { width: 100vw; border-radius: 0; }
	.pvpdp-lightbox__prev, .pvpdp-lightbox__next { top: auto; bottom: 14px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pvpdp-page *, .pvpdp-lightbox * { transition: none !important; }
}

/* ---------- Flatsome (phuongvyicenter.vn) ---------- */
/* Nút "Mua ngay" sẵn có của Flatsome + nút Shopee cũ (plugin PhuongVy Storefront) nằm trong form mua → đã có ở hàng nút mới. */
.pvpdp-cart .ux-buy-now-button, .pvpdp-cart .pv-shopee-wrap { display: none !important; }
/* Ô số lượng − 1 + của Flatsome: 1 khung bo tròn, rộng 120px, cao 52px. */
.pvpdp-cart .ux-quantity { width: 120px; border: 1px solid var(--pvpdp-border); border-radius: 999px; overflow: hidden; background: var(--pvpdp-bg); white-space: nowrap; opacity: 1; }
.pvpdp-cart .ux-quantity .ux-quantity__button { flex: 0 0 34px; width: 34px; height: 100% !important; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--pvpdp-text); font-size: 18px; font-weight: 400; line-height: 1; box-shadow: none !important; cursor: pointer; }
.pvpdp-cart .ux-quantity .ux-quantity__button:hover { background: var(--pvpdp-surface) !important; }
.pvpdp-cart .ux-quantity input.qty { flex: 1 1 auto; width: auto !important; max-width: none !important; min-width: 0; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent; color: var(--pvpdp-text); font-size: 16px; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.pvpdp-cart .ux-quantity input.qty::-webkit-outer-spin-button, .pvpdp-cart .ux-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Thêm vào giỏ = nút viền (phụ); Mua ngay = nút đặc màu chính (chính) — cùng kiểu chữ với hàng nút bên dưới. */
.pvpdp-cart .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px !important; border: 1.5px solid var(--pvpdp-primary) !important; background: var(--pvpdp-bg) !important; color: var(--pvpdp-primary) !important; font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1; text-transform: none; box-shadow: none !important; }
.pvpdp-cart .single_add_to_cart_button:hover { background: var(--pvpdp-surface) !important; }
.pvpdp-cart .single_add_to_cart_button.disabled { opacity: .55; }
.pvpdp-btn, .pvpdp-btn:hover { letter-spacing: 0; text-transform: none; }
.pvpdp-spec th { text-transform: none; letter-spacing: 0; }   /* Flatsome in hoa tiêu đề bảng */
.pvpdp-spec :is(th, td) { font-size: inherit; line-height: 1.5; }
.pvpdp-notices:empty { display: none; }
/* Nội dung plugin/theme gắn SAU form mua (vd. khối "Cam kết…" của Flatsome) sẽ đẩy lệch hàng Thêm vào giỏ ↔ chân ảnh
   → ẩn trong khung mua; dòng Cam kết đã có ở ô chính sách bên trái (cấu hình 'promises'). */
.pvpdp-cart > form.cart ~ * { display: none !important; }
.pvpdp-cart .stock { margin: 0 0 10px !important; font-size: 15px; font-weight: 700; }
.pvpdp-cart .stock.out-of-stock { color: var(--pvpdp-accent); }
.pvpdp-off { display: inline-block; margin-left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--pvpdp-accent); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; vertical-align: 6px; }

/* ---------- Máy tính (≥1024px): lưới 3 hàng — đặt CUỐI tệp để thắng các quy tắc chung ở trên ---------- */
@media (min-width: 1024px) {
	.pvpdp { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "img buy" "thumbs actions" "trust info"; column-gap: 44px; row-gap: 12px; align-items: start; }
	.pvpdp-media, .pvpdp-gallery, .pvpdp-buy { display: contents; }
	.pvpdp-gallery__main { grid-area: img; align-self: stretch; } /* thông tin bên phải dài hơn ảnh → ô ảnh giãn theo, chân ảnh vẫn ngang đáy Thêm vào giỏ */
	.pvpdp-thumbs { grid-area: thumbs; margin-top: 0 !important; align-self: start; }
	.pvpdp-trust { grid-area: trust; margin-top: 6px !important; align-self: stretch; align-content: center; }
	.pvpdp-buy__top { grid-area: buy; align-self: stretch; display: flex; flex-direction: column; }
	.pvpdp-buy__top > .pvpdp-cart { margin-top: auto !important; padding-top: 18px; } /* đẩy hàng Thêm vào giỏ xuống sát chân ảnh */
	.pvpdp-buy > .pvpdp-actions { grid-area: actions; align-self: start; margin-top: 0; }
	.pvpdp-buy > .pvpdp-infobox { grid-area: info; margin-top: 6px !important; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
}