/* ============================================================
   GDP PDP v2 — Trang sản phẩm TMALL-style 2-CỘT (canary W7, R3)
   Khung .gdp-pdp = 1532px KHỚP homepage .tm-wrap.
   LEFT 871fr [gallery+review+specs+desc] / RIGHT 612fr [buy panel STICKY].
   Palette "Pha Lê Đỏ" (đồng bộ homepage) scope trong .gdp-pdp.
   ============================================================ */

.gdp-pdp{
  --gv-brand: var(--brand, #db0d29);
  --gv-brand-deep: #b20a20;
  --gv-brand-ink: #8c0619;
  --gv-tint: #fdecef;
  --gv-cream: #faf6f0;
  --gv-cream-2: #f1e8db;
  --gv-ivory: #fffdf8;
  --gv-paper: #ffffff;
  --gv-bg2: #f4f0e9;
  --gv-ink: #221c18;
  --gv-ink-2: #6f645b;
  --gv-ink-3: #9a8f86;
  --gv-line: #ece4d8;
  --gv-line-2: #dacfbe;
  --gv-gold: #b07d3f;
  --gv-green: #1f9d55;
  --gv-amber: #d9942b;
  --gv-on-brand: #ffffff;

  --gv-font-sans: var(--font-sans, 'Inter','Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif);
  --gv-font-display: var(--font-display, 'UTM Avo','Inter',system-ui,sans-serif);

  --gv-r-sm: 8px; --gv-r: 12px; --gv-r-lg: 16px; --gv-pill: 999px;
  --gv-sh-card: 0 1px 2px rgba(31,27,24,.05), 0 8px 24px -14px rgba(31,27,24,.18);
  --gv-sh-raise: 0 18px 40px -18px rgba(31,27,24,.28);
  --gv-sh-pop: 0 24px 54px -20px rgba(31,27,24,.34);
  --gv-sh-price: 0 20px 46px -22px rgba(219,13,41,.5);
  --gv-sh-lift: 0 12px 24px -12px rgba(31,27,24,.3);
  --gv-ease: cubic-bezier(.4,0,.2,1);
  --gv-spring: cubic-bezier(.34,1.3,.64,1);
  --gv-header-off: 76px; /* header site + đệm để cột phải sticky không chui dưới header */

  /* KHUNG = KHỚP HOMEPAGE .tm-wrap (Sếp: "cùng kích cỡ", không hẹp) */
  --gv-wrap: 1532px;

  font-family: var(--gv-font-sans);
  color: var(--gv-ink);
  background: var(--gv-paper);
  width: var(--gv-wrap);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 96px;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 1559px){ .gdp-pdp{ --gv-wrap: 1387px; } }
@media (max-width: 1419px){ .gdp-pdp{ --gv-wrap: 1257px; } }
@media (max-width: 1289px){ .gdp-pdp{ width: auto; margin: 0 12px; } }

.gdp-pdp *, .gdp-pdp *::before, .gdp-pdp *::after{ box-sizing: border-box; }
.gdp-pdp img{ max-width: 100%; display: block; }
.gdp-pdp svg{ fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gdp-pdp a{ color: inherit; text-decoration: none; }
.gdp-pdp button{ font-family: inherit; }
.gdp-pdp :focus-visible{ outline: 2px solid var(--gv-brand); outline-offset: 2px; border-radius: 6px; }
.gdp-pdp [hidden]{ display: none !important; }

/* demo placeholder marker — FIX-6: gv-demo-badge (đổi từ gdp-demo-placeholder để hết đụng
   tên với snippet W6 snippets/gdp-demo-placeholder.bwt, hiệu ứng ::after "demo" giữ nguyên) */
.gdp-pdp .gv-demo-badge{ position: relative; }
.gdp-pdp .gv-demo-badge::after{ content:"demo"; position:absolute; top:6px; right:6px; font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color: var(--gv-ink-3); background: var(--gv-bg2);
  border:1px solid var(--gv-line); padding:1px 6px; border-radius: var(--gv-pill); pointer-events:none; }

.gv-btn-ghost{ display:inline-flex; align-items:center; gap:6px; background: var(--gv-paper); border:1.5px solid var(--gv-line-2);
  border-radius: var(--gv-pill); padding: 10px 20px; font-size: 13.5px; font-weight: 700; color: var(--gv-ink); cursor:pointer;
  transition: border-color .2s var(--gv-ease), color .2s var(--gv-ease), transform .16s var(--gv-spring); }
.gv-btn-ghost svg{ width:16px; height:16px; }
.gv-btn-ghost:hover{ border-color: var(--gv-brand); color: var(--gv-brand); transform: translateY(-1px); }

/* ---------- Breadcrumb ---------- */
.gv-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding: 16px 4px 14px; font-size: 12.5px; color: var(--gv-ink-2); }
.gv-crumb a{ transition: color .15s var(--gv-ease); }
.gv-crumb a:hover{ color: var(--gv-brand); }
.gv-crumb span[aria-hidden]{ color: var(--gv-ink-3); }
.gv-crumb-cur{ color: var(--gv-ink); font-weight: 600; }

/* ============================================================
   GRID 2 CỘT — LEFT 871fr / RIGHT 612fr (tỉ lệ TMALL ≈ 1.42)
   ============================================================ */
.gv-grid{ display:grid; grid-template-columns: minmax(0, 871fr) minmax(0, 612fr); gap: 48px; align-items:start; }
.gv-left{ min-width:0; }
.gv-right{ min-width:0; position: sticky; top: var(--gv-header-off); align-self: start;
  max-height: calc(100vh - var(--gv-header-off) - 16px); display:flex; flex-direction:column; }

/* ---------- GALLERY ---------- */
.gv-gallery{ display:grid; grid-template-columns: 76px 1fr; gap: 16px; margin-bottom: 40px; }
.gv-thumbs{ display:flex; flex-direction:column; gap: 10px; max-height: 560px; overflow-y:auto; scrollbar-width: thin; outline: none; padding: 2px; }
.gv-thumb{ flex:none; width:66px; height:66px; padding:0; border:2px solid var(--gv-line); border-radius: 11px;
  overflow:hidden; background: var(--gv-paper); cursor:pointer; box-shadow: var(--gv-sh-card);
  transition: border-color .2s var(--gv-ease), transform .2s var(--gv-ease), box-shadow .2s var(--gv-ease); }
.gv-thumb img{ width:100%; height:100%; object-fit:cover; }
.gv-thumb:hover{ border-color: var(--gv-brand-deep); transform: translateY(-1px); box-shadow: var(--gv-sh-lift); }
.gv-thumb.is-active{ border-color: var(--gv-brand); box-shadow: 0 0 0 3px var(--gv-tint); }
.gv-stage{ min-width:0; display:flex; flex-direction:column; align-items:center; }
/* CAP ảnh chính max 600×600 — ảnh dọc 3:4 không kéo cao quá màn (bug A). */
.gv-stage-frame{ position:relative; border:1px solid var(--gv-line); border-radius: var(--gv-r-lg); overflow:hidden;
  background: var(--gv-ivory); aspect-ratio: 1 / 1; width:100%; max-width: 600px; max-height: 600px;
  cursor: zoom-in; box-shadow: var(--gv-sh-raise); margin: 0 auto; }
.gv-stage-img{ width:100%; height:100%; object-fit:contain; transition: transform .3s var(--gv-ease); transform-origin: center center; }
.gv-stage-frame.is-zoom{ cursor: zoom-out; }
.gv-stage-frame.is-zoom .gv-stage-img{ transform: scale(2); }
/* nút gợi ý xem lớn nổi góc phải-dưới ảnh */
.gv-stage-expand{ position:absolute; right:12px; bottom:12px; z-index:2; width:38px; height:38px; display:grid; place-items:center;
  background: rgba(255,255,255,.9); border:1px solid var(--gv-line); border-radius: 50%; color: var(--gv-ink-2); cursor: zoom-in;
  box-shadow: var(--gv-sh-card); backdrop-filter: blur(4px); transition: color .2s var(--gv-ease), transform .16s var(--gv-spring); }
.gv-stage-expand svg{ width:19px; height:19px; }
.gv-stage-expand:hover{ color: var(--gv-brand); transform: translateY(-1px); }
.gv-stage-badge{ position:absolute; top:14px; left:14px; z-index:2; background: linear-gradient(135deg, var(--gv-brand), var(--gv-brand-deep));
  color: var(--gv-on-brand); font-family: var(--gv-font-display); font-weight: 800; font-size: 15px; padding: 5px 13px;
  border-radius: var(--gv-pill); box-shadow: 0 8px 18px -8px rgba(219,13,41,.7); letter-spacing:-.01em; }
.gv-stage-hint{ text-align:center; font-size: 11.5px; color: var(--gv-ink-3); margin: 12px 0 0; }

/* ============================================================
   CỘT PHẢI — buy panel
   ============================================================ */
.gv-buy{ min-width:0; }

/* SHOP STRIP nhỏ (dải gọn) */
.gv-shopbar{ display:flex; align-items:center; gap: 11px; padding: 10px 12px; margin-bottom: 16px;
  background: var(--gv-ivory); border:1px solid var(--gv-line); border-radius: var(--gv-r); box-shadow: var(--gv-sh-card); }
.gv-shop-logo{ flex:none; width:40px; height:40px; border-radius: 11px; display:grid; place-items:center;
  font-family: var(--gv-font-display); font-weight: 800; font-size: 12px; letter-spacing:-.02em;
  color: var(--gv-on-brand); background: linear-gradient(140deg, var(--gv-brand), var(--gv-brand-ink)); box-shadow: 0 6px 14px -6px rgba(219,13,41,.6); }
.gv-shop-meta{ min-width:0; flex:1; }
.gv-shop-name{ display:inline-flex; align-items:center; gap:4px; font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--gv-ink); }
.gv-shop-check{ width:15px; height:15px; color: var(--gv-brand); flex:none; }
.gv-shop-check path{ stroke-width: 2.2; }
.gv-shop-sub{ display:block; font-size: 11.5px; color: var(--gv-ink-2); margin-top:2px; font-weight: 500; }
.gv-shop-rate{ color: var(--gv-amber); font-weight: 800; }
.gv-src{ font-style: normal; color: var(--gv-ink-3); font-weight: 700; background: var(--gv-bg2); padding:1px 5px; border-radius: 5px; font-size: 10.5px; }
.gv-shopbar-actions{ display:flex; gap: 7px; flex:none; }
.gv-chatbtn{ width:36px; height:36px; display:grid; place-items:center; border-radius: 50%; border:1.5px solid var(--gv-line-2); background: var(--gv-paper);
  transition: border-color .2s var(--gv-ease), color .2s var(--gv-ease), transform .16s var(--gv-spring); }
.gv-chatbtn svg{ width:17px; height:17px; }
.gv-chatbtn:hover{ transform: translateY(-1px); }
.gv-chatbtn--zalo{ color: #0068ff; border-color: rgba(0,104,255,.28); }
.gv-chatbtn--zalo:hover{ border-color: #0068ff; }
.gv-chatbtn--call{ color: var(--gv-brand); border-color: rgba(219,13,41,.28); }
.gv-chatbtn--call:hover{ border-color: var(--gv-brand); }

.gv-title{ font-family: var(--gv-font-display); font-size: 19px; line-height: 1.32; font-weight: 800; margin:0 0 10px; letter-spacing:-.01em; color: var(--gv-ink); }

.gv-signals{ display:flex; flex-wrap:wrap; align-items:center; gap: 11px; font-size: 13px; color: var(--gv-ink-2); margin-bottom: 16px; font-weight: 600; }
.gv-sig{ display:inline-flex; align-items:center; gap:5px; }
.gv-sig b{ color: var(--gv-ink); font-weight: 800; }
.gv-sig--rate svg{ width:16px; height:16px; fill: var(--gv-amber); stroke:none; }
.gv-sig--rate b{ color: var(--gv-amber); }
.gv-sig-div{ width:1px; height:13px; background: var(--gv-line-2); }
.gv-sig-shopee{ font-size: 11px; color: var(--gv-ink-3); background: var(--gv-bg2); padding:3px 9px; border-radius: var(--gv-pill); font-weight: 700; }

/* Khối giá đỏ */
.gv-pricebox{ background: linear-gradient(125deg, var(--gv-tint) 0%, #fff5f2 60%, var(--gv-ivory) 100%);
  border:1px solid rgba(219,13,41,.16); border-radius: var(--gv-r-lg); padding: 18px 20px; margin-bottom: 16px;
  box-shadow: var(--gv-sh-price); position: relative; overflow: hidden; }
.gv-pricebox::after{ content:""; position:absolute; top:-40%; right:-10%; width:170px; height:170px; border-radius:50%;
  background: radial-gradient(circle, rgba(219,13,41,.09), transparent 70%); pointer-events:none; }
.gv-price-after{ display:flex; align-items:baseline; gap: 12px; margin-bottom: 8px; position: relative; }
.gv-price-after-lbl{ font-size: 11px; font-weight: 800; color: var(--gv-on-brand); background: linear-gradient(135deg, var(--gv-brand), var(--gv-brand-deep));
  padding:4px 10px; border-radius: var(--gv-pill); letter-spacing:.05em; text-transform: uppercase; box-shadow: 0 4px 10px -4px rgba(219,13,41,.6); }
.gv-price-after-val{ font-family: var(--gv-font-display); font-size: 38px; line-height:1; color: var(--gv-brand); font-weight: 800; letter-spacing:-.02em; }
.gv-price-main{ display:flex; align-items:baseline; flex-wrap:wrap; gap: 11px; position: relative; }
.gv-price-now{ font-family: var(--gv-font-display); font-size: 32px; line-height:1; color: var(--gv-brand); font-weight: 800; letter-spacing:-.02em; }
.gv-pricebox:has(.gv-price-after:not([hidden])) .gv-price-now{ font-size: 18px; color: var(--gv-ink-2); font-weight: 700; }
.gv-price-compare{ color: var(--gv-ink-3); font-size: 15px; }
.gv-price-off{ background: rgba(219,13,41,.12); color: var(--gv-brand); font-size: 13px; font-weight: 800; padding:3px 9px; border-radius: 7px; }
.gv-price-vat{ margin: 11px 0 0; font-size: 12px; color: var(--gv-ink-2); position: relative; font-weight: 500; }

/* Coupon chips (1 hàng gọn) */
.gv-coupons{ margin-bottom: 16px; }
.gv-coupons-lbl{ display:block; font-size: 12px; font-weight: 800; color: var(--gv-ink); margin-bottom: 9px; text-transform: uppercase; letter-spacing:.04em; }
.gv-coupons-row{ display:flex; flex-wrap:wrap; gap: 9px; }
.gv-chip{ display:inline-flex; align-items:center; gap:9px; padding: 7px 11px 7px 15px; cursor:pointer;
  background: linear-gradient(120deg, var(--gv-tint), #fff); border:1.5px dashed var(--gv-brand); border-radius: 10px;
  font-size: 12px; color: var(--gv-brand-ink); position:relative;
  transition: transform .16s var(--gv-spring), box-shadow .2s var(--gv-ease); }
.gv-chip::before{ content:""; position:absolute; left:-1px; top:50%; width:9px; height:9px; background: var(--gv-paper);
  border:1.5px dashed var(--gv-brand); border-left:none; border-radius: 0 var(--gv-pill) var(--gv-pill) 0; transform: translate(-50%,-50%); }
.gv-chip b{ font-weight: 800; }
.gv-chip small{ color: var(--gv-ink-3); font-size: 10.5px; font-weight: 600; display:block; }
.gv-chip:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(219,13,41,.4); }
.gv-chip.is-saved{ border-style: solid; background: linear-gradient(135deg, var(--gv-brand), var(--gv-brand-deep)); color: #fff; }
.gv-chip.is-saved small{ color: rgba(255,255,255,.72); }
.gv-chip-save{ font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing:.03em; }

/* Ship */
.gv-ship{ display:flex; align-items:center; gap: 11px; padding: 11px 14px; border:1px solid var(--gv-line); border-radius: var(--gv-r); margin-bottom: 16px; background: var(--gv-ivory); }
.gv-ship svg{ width:22px; height:22px; color: var(--gv-brand); flex:none; }
.gv-ship b{ display:block; font-size: 12.5px; }
.gv-ship small{ font-size: 11px; color: var(--gv-ink-2); }

/* Variant grid ảnh */
.gv-variants{ margin-bottom: 18px; }
.gv-variants-head{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; margin-bottom: 9px; }
.gv-variants-head span{ font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing:.05em; color: var(--gv-ink); }
.gv-variants-head small{ font-size: 12px; color: var(--gv-ink-2); }
.gv-variants-head b{ color: var(--gv-brand); font-weight: 800; }
.gv-variant-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px; }
.gv-vtile{ position:relative; display:flex; align-items:center; gap: 9px; text-align:left; cursor:pointer;
  padding: 6px 8px; background: var(--gv-paper); border:1.5px solid var(--gv-line); border-radius: var(--gv-r);
  box-shadow: var(--gv-sh-card);
  transition: border-color .2s var(--gv-ease), transform .18s var(--gv-spring), box-shadow .2s var(--gv-ease), background .2s var(--gv-ease); }
.gv-vtile-img{ flex:none; width:42px; height:42px; border-radius: 9px; overflow:hidden; background: var(--gv-bg2); border:1px solid var(--gv-line); }
.gv-vtile-img img{ width:100%; height:100%; object-fit:cover; }
.gv-vtile-body{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.gv-vtile-name{ font-size: 12px; font-weight: 700; line-height: 1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 88px; color: var(--gv-ink); }
.gv-vtile-price{ font-size: 11.5px; color: var(--gv-brand); font-weight: 800; font-family: var(--gv-font-display); }
.gv-vtile:hover{ border-color: var(--gv-brand-deep); transform: translateY(-2px); box-shadow: var(--gv-sh-pop); }
.gv-vtile.is-active{ border-color: var(--gv-brand); background: linear-gradient(120deg, var(--gv-tint), #fff); box-shadow: 0 0 0 3px var(--gv-tint), var(--gv-sh-lift); }
.gv-vtile-check{ position:absolute; right:-1px; bottom:-1px; width:20px; height:20px; background: var(--gv-brand); color: #fff; border-radius: 9px 3px 9px 3px; display:none; place-items:center; box-shadow: -2px -2px 6px -2px rgba(219,13,41,.5); }
.gv-vtile-check svg{ width:12px; height:12px; stroke-width:2.8; }
.gv-vtile.is-active .gv-vtile-check{ display:grid; }
.gv-vtile.is-oos{ opacity:.55; cursor:not-allowed; }
.gv-vtile.is-oos:hover{ transform:none; box-shadow: var(--gv-sh-card); border-color: var(--gv-line); }
.gv-vtile-oos{ position:absolute; inset:0; display:grid; place-items:center; background: rgba(255,255,255,.62);
  font-size: 11px; font-weight: 800; color: var(--gv-ink-2); border-radius: inherit; text-transform: uppercase; letter-spacing:.04em; }

/* Số lượng */
.gv-qtyrow{ display:flex; align-items:center; gap: 14px; margin-bottom: 16px; }
.gv-qtyrow-lbl{ font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing:.04em; color: var(--gv-ink); }
.gv-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--gv-line-2); border-radius: 10px; overflow:hidden; background: var(--gv-paper); box-shadow: var(--gv-sh-card); }
.gv-stepper button{ width:38px; height:40px; background: transparent; border:none; cursor:pointer; font-size: 18px; color: var(--gv-ink-2); user-select:none; transition: background .12s var(--gv-ease), color .12s var(--gv-ease); }
.gv-stepper button:hover{ background: var(--gv-tint); color: var(--gv-brand); }
.gv-step-input{ width:52px; height:40px; text-align:center; border:none; border-left:1px solid var(--gv-line); border-right:1px solid var(--gv-line); font-size: 14px; font-weight: 800; color: var(--gv-ink); background: transparent; -moz-appearance:textfield; font-family: var(--gv-font-display); }
.gv-step-input::-webkit-outer-spin-button, .gv-step-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.gv-stock{ display:inline-flex; align-items:center; gap:6px; font-size: 12.5px; color: var(--gv-green); font-weight: 700; }
.gv-stock-dot{ width:8px; height:8px; border-radius: 50%; background: var(--gv-green); box-shadow: 0 0 0 3px rgba(31,157,85,.15); }
.gv-stock-dot.is-out{ background: var(--gv-ink-3); box-shadow: 0 0 0 3px rgba(154,143,134,.15); }
.gv-stock:has(.is-out){ color: var(--gv-ink-3); }

/* CTA */
.gv-cta{ display:grid; grid-template-columns: 1fr 1.5fr; gap: 11px; margin-bottom: 16px; }
.gv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  height:52px; padding: 0 18px; border-radius: 13px; border:1.5px solid transparent;
  font-family: var(--gv-font-sans); font-size: 14px; font-weight: 800; line-height:1;
  transition: transform .16s var(--gv-spring), box-shadow .2s var(--gv-ease), background .2s var(--gv-ease), opacity .2s var(--gv-ease); }
.gv-btn svg{ width:19px; height:19px; }
.gv-btn:active{ transform: translateY(1px) scale(.99); }
.gv-btn--add{ color: var(--gv-brand); background: var(--gv-paper); border-color: rgba(219,13,41,.4); box-shadow: var(--gv-sh-card); }
.gv-btn--add:hover{ background: var(--gv-tint); transform: translateY(-1px); box-shadow: var(--gv-sh-lift); }
.gv-btn--buy{ color: var(--gv-on-brand); background: linear-gradient(120deg, var(--gv-brand), var(--gv-brand-deep));
  box-shadow: 0 12px 26px -10px rgba(219,13,41,.6), inset 0 1px 0 rgba(255,255,255,.2); }
.gv-btn--buy:hover{ box-shadow: 0 18px 34px -10px rgba(219,13,41,.65); transform: translateY(-2px); }
.gv-btn[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }

/* Cam kết */
.gv-perks{ list-style:none; margin:0 0 16px; padding: 14px 16px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
  border:1px solid var(--gv-line); border-radius: var(--gv-r); background: var(--gv-ivory); box-shadow: var(--gv-sh-card); }
.gv-perks li{ display:flex; align-items:center; gap: 10px; }
.gv-perks svg{ width:21px; height:21px; color: var(--gv-brand); flex:none; }
.gv-perks b{ display:block; font-size: 12px; color: var(--gv-ink); }
.gv-perks small{ font-size: 10.5px; color: var(--gv-ink-2); }

/* Shopee bridge */
.gv-shopee-bridge{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 12px 15px;
  border:1px dashed var(--gv-line-2); border-radius: var(--gv-r); background: var(--gv-cream-2); }
.gv-shopee-bridge-txt b{ display:block; font-size: 12.5px; color: var(--gv-ink); }
.gv-shopee-bridge-txt small{ font-size: 11px; color: var(--gv-ink-2); }
.gv-btn--shopee{ height:42px; flex:none; color: var(--gv-brand); background: var(--gv-paper); border:1.5px solid var(--gv-brand); font-size: 12.5px; box-shadow: var(--gv-sh-card); }
.gv-btn--shopee:hover{ background: var(--gv-tint); transform: translateY(-1px); box-shadow: var(--gv-sh-lift); }
.gv-btn--shopee svg{ width:16px; height:16px; }

/* ============================================================
   SECTIONS trong cột TRÁI (review / specs / desc)
   ============================================================ */
.gv-sec{ margin-bottom: 40px; }
.gv-sec-title{ font-family: var(--gv-font-display); font-size: 20px; font-weight: 800; margin:0 0 16px; color: var(--gv-ink);
  display:inline-flex; align-items:center; gap:10px; letter-spacing:-.01em; }
.gv-sec-title::before{ content:""; width:5px; height:21px; border-radius: var(--gv-pill); background: linear-gradient(180deg, var(--gv-brand), var(--gv-brand-deep)); }
.gv-empty{ color: var(--gv-ink-3); font-size: 14px; padding: 32px 0; text-align: center; }

/* Review summary */
.gv-rev-summary{ display:grid; grid-template-columns: minmax(160px,220px) 1fr; gap: 28px; align-items:center; padding: 20px;
  background: linear-gradient(125deg, var(--gv-ivory), var(--gv-cream)); border:1px solid var(--gv-line); border-radius: var(--gv-r-lg); margin-bottom: 18px; box-shadow: var(--gv-sh-card); }
.gv-rev-score{ text-align:center; }
.gv-rev-score b{ font-family: var(--gv-font-display); font-size: 44px; color: var(--gv-brand); font-weight: 800; letter-spacing:-.02em; }
.gv-rev-score b small{ font-size: 18px; color: var(--gv-ink-3); font-weight: 500; }
.gv-rev-stars{ display:block; margin: 8px 0; }
.gv-rev-stars svg{ width:17px; height:17px; fill: var(--gv-amber); stroke:none; display:inline-block; }
.gv-rev-score p{ font-size: 11.5px; color: var(--gv-ink-2); margin:0; font-weight: 600; }
.gv-rev-bars{ display:flex; flex-direction:column; gap:7px; }
.gv-rev-bars > div{ display:grid; grid-template-columns: 30px 1fr 42px; align-items:center; gap: 10px; font-size: 12px; color: var(--gv-ink-2); font-weight: 700; }
.gv-rev-bars i{ display:block; height:9px; background: var(--gv-bg2); border-radius: var(--gv-pill); overflow:hidden; }
.gv-rev-bars em{ display:block; height:100%; background: linear-gradient(90deg, var(--gv-amber), #e6a94a); border-radius: var(--gv-pill); }
.gv-rev-bars b{ text-align:right; color: var(--gv-ink); }

/* Toolbar review: toggle phản hồi shop */
.gv-rev-tools{ display:flex; justify-content:flex-end; margin-bottom: 12px; }
.gv-rev-reply-toggle{ display:inline-flex; align-items:center; gap: 7px; background: var(--gv-paper); border:1.5px solid var(--gv-line-2);
  border-radius: var(--gv-pill); padding: 7px 15px; font-size: 12.5px; font-weight: 700; color: var(--gv-ink-2); cursor:pointer;
  transition: border-color .2s var(--gv-ease), color .2s var(--gv-ease), background .2s var(--gv-ease); }
.gv-rev-reply-toggle svg{ width:15px; height:15px; }
.gv-rev-reply-toggle:hover{ border-color: var(--gv-brand); color: var(--gv-brand); }
.gv-rev-reply-toggle[aria-pressed="true"]{ background: var(--gv-tint); border-color: var(--gv-brand); color: var(--gv-brand-ink); }

/* Review body: collapse mặc định (2-3 review) → giãn INLINE cột trái (KHÔNG drawer). */
.gv-rev-body{ position: relative; }
.gv-rev-body.is-collapsed{ max-height: 560px; overflow: hidden; }
.gv-rev-fade{ position: relative; height: 0; }
.gv-rev-fade::before{ content:""; display:block; height: 96px; margin-top: -96px; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--gv-paper)); pointer-events:none; }
.gv-rev-fade[hidden]{ display:none; }
.gv-rev-more{ display:flex; justify-content:center; margin-top: 12px; }
.gv-rev-more-btn[aria-expanded="true"] [data-gv-reviews-chevron]{ transform: rotate(180deg); }
.gv-rev-more-btn svg{ transition: transform .2s var(--gv-ease); }

/* Review Shopee HTML restyle (dùng chung preview + drawer) */
.gv-rev-shopee{ font-size: 13.5px; line-height: 1.6; color: var(--gv-ink); display:grid; gap: 14px; }
.gv-rev-shopee .v-p1, .gv-rev-shopee .v-p2{ display:block; }
.gv-rev-shopee .v-p3{ display:flex; gap: 12px; padding: 16px; background: var(--gv-paper); border:1px solid var(--gv-line); border-radius: var(--gv-r); box-shadow: var(--gv-sh-card); }
.gv-rev-shopee .v-p5{ flex:none; }
.gv-rev-shopee .v-p5 .vd5{ display:none; }
.gv-rev-shopee .v-p5__img{ width:42px; height:42px; border-radius: 50%; object-fit:cover; border:1px solid var(--gv-line); }
.gv-rev-shopee .vg3{ display:block; }
.gv-rev-shopee .va3{ min-width:0; flex:1; }
.gv-rev-shopee .vj3{ font-weight: 800; font-size: 13px; color: var(--gv-ink); pointer-events:none; }
.gv-rev-shopee .rp2{ display:none; }
.gv-rev-shopee .vk3{ font-size: 11.5px; color: var(--gv-ink-3); margin: 2px 0 8px; font-weight: 600; }
.gv-rev-shopee ._280jKz{ font-size: 13.5px; line-height: 1.6; color: var(--gv-ink); margin-bottom: 10px; }
.gv-rev-shopee .vo3, .gv-rev-shopee .v-p6{ display:block; }
.gv-rev-shopee .vs6{ display:flex; flex-wrap:wrap; gap: 8px; }
.gv-rev-shopee .vy6{ flex:none; }
.gv-rev-shopee .vi4{ position:relative; }
.gv-rev-shopee .vt2{ display:none; }
.gv-rev-shopee .vr2{ width:78px; height:78px; border-radius: 9px; overflow:hidden; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border:1px solid var(--gv-line); box-shadow: var(--gv-sh-card); }
.gv-rev-shopee .vr2--blur{ display:none; }
.gv-rev-shopee .vu7{ position:absolute; left:4px; bottom:4px; z-index:2; background: rgba(34,28,24,.72); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius: var(--gv-pill); }
/* Phản hồi Người Bán (._3lF5CE) — ẨN mặc định, ưu tiên review khách; toggle 'show-reply' mới bung. */
.gv-rev-shopee ._3lF5CE{ display:none; margin-top: 10px; padding: 10px 12px; background: var(--gv-cream-2); border-radius: 9px; font-size: 12.5px; color: var(--gv-ink-2); line-height: 1.55; }
.gv-rev-shopee.show-reply ._3lF5CE{ display:block; }
.gv-rev-shopee ._2w33Zs, .gv-rev-shopee .v3to{ font-size: 12.5px; color: var(--gv-ink-2); line-height: 1.55; }
.gv-rev-shopee ._1rc11Y{ font-weight: 800; color: var(--gv-brand); }
.gv-rev-shopee .vw1, .gv-rev-shopee .vq1, .gv-rev-shopee .ve1{ font-size: 11.5px; color: var(--gv-ink-3); }
.gv-rev-shopee a{ pointer-events:none; }
.gv-rev-shopee img.lazyload{ max-width:78px; border-radius:9px; }

/* Specs 2 CỘT */
.gv-specs table, .gv-spectable{ width:100%; border-collapse:collapse; font-size: 13.5px; border:1px solid var(--gv-line); border-radius: var(--gv-r); overflow:hidden; }
.gv-specs table td, .gv-specs table th, .gv-spectable td, .gv-spectable th{ padding: 12px 16px; border-bottom:1px solid var(--gv-line); text-align:left; vertical-align:top; }
.gv-specs table tr:last-child td, .gv-specs table tr:last-child th, .gv-spectable tr:last-child td, .gv-spectable tr:last-child th{ border-bottom:none; }
.gv-specs table tr:nth-child(odd), .gv-spectable tr:nth-child(odd){ background: var(--gv-ivory); }
.gv-specs table th, .gv-spectable th{ width:34%; font-weight: 700; color: var(--gv-ink-2); background: var(--gv-cream-2); }
/* Shopee .parameter__list -> grid 2 CỘT ngang */
.gv-specs .parameter{ border:1px solid var(--gv-line); border-radius: var(--gv-r); overflow:hidden; }
.gv-specs .parameter__title{ font-family: var(--gv-font-display); font-size: 15px; font-weight: 800; color: var(--gv-ink); padding: 14px 16px; background: var(--gv-cream-2); border-bottom:1px solid var(--gv-line); margin:0; }
.gv-specs--2col .parameter__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; }
.gv-specs--2col .parameter__list li{ display:grid; grid-template-columns: 130px 1fr; align-items:start; gap: 10px; padding: 11px 16px; border-bottom:1px solid var(--gv-line); font-size: 13px; }
.gv-specs--2col .parameter__list li:nth-child(2n){ border-left:1px solid var(--gv-line); }
.gv-specs .lileft{ color: var(--gv-ink-2); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing:.02em; }
.gv-specs .liright{ color: var(--gv-ink); }

/* Benefits icon row */
.gv-benefits{ list-style:none; margin: 0 0 28px; padding: 0; display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.gv-benefits li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: 8px; padding: 22px 16px; background: var(--gv-ivory); border:1px solid var(--gv-line); border-radius: var(--gv-r-lg); }
.gv-benefit-ic{ width:52px; height:52px; display:grid; place-items:center; border-radius: 50%; background: var(--gv-tint); color: var(--gv-brand); }
.gv-benefit-ic svg{ width:26px; height:26px; }
.gv-benefits b{ font-size: 14px; font-weight: 800; color: var(--gv-ink); }
.gv-benefits small{ font-size: 11.5px; color: var(--gv-ink-2); line-height: 1.45; }

/* Description — thêm padding + clamp text ~3 dòng (bug C, khách lười đọc).
   Chỉ áp text: JS gắn .is-textonly khi khối KHÔNG có ảnh dài; khối ảnh giữ nguyên (bỏ clamp). */
.gv-desc-wrap{ position: relative; padding: 20px; background: var(--gv-ivory); border:1px solid var(--gv-line); border-radius: var(--gv-r-lg); box-shadow: var(--gv-sh-card); }
.gv-desc{ font-size: 14px; line-height: 1.7; color: var(--gv-ink); }
.gv-desc img{ margin: 0 auto; border-radius: 10px; height:auto; }
.gv-desc p{ margin: 0 0 14px; }
.gv-desc p:last-child{ margin-bottom: 0; }
/* clamp ~3 dòng CHỈ phần text (JS gom run text-only vào .gv-desc-text; khối ảnh dài KHÔNG đụng) */
.gv-desc-text{ margin-top: 4px; }
.gv-desc-text.is-clamped{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gv-desc-text p{ margin: 0 0 10px; }
.gv-desc-text p:last-child{ margin-bottom: 0; }
.gv-desc-fade{ position: relative; height: 0; }
.gv-desc-fade::before{ content:""; display:block; height: 64px; margin-top: -64px; position: relative;
  background: linear-gradient(180deg, rgba(255,253,248,0), var(--gv-ivory)); pointer-events:none; }
.gv-desc-fade[hidden]{ display:none; }
.gv-desc-more{ display:flex; justify-content:center; margin-top: 14px; }
.gv-desc-more[hidden]{ display:none; }
.gv-desc-more-btn[aria-expanded="true"] [data-gv-desc-chevron]{ transform: rotate(180deg); }
.gv-desc-more-btn svg{ transition: transform .2s var(--gv-ease); }

/* ============================================================
   LIGHTBOX — click ảnh chính → xem cỡ lớn (bug A)
   ============================================================ */
.gv-lightbox{ position: fixed; inset: 0; z-index: 260; display:grid; place-items:center; }
.gv-lightbox-overlay{ position:absolute; inset:0; background: rgba(20,16,13,.86); opacity:0; transition: opacity .2s var(--gv-ease); }
.gv-lightbox.is-open .gv-lightbox-overlay{ opacity:1; }
.gv-lightbox-stage{ position: relative; z-index:1; max-width: 92vw; max-height: 92vh; transform: scale(.96); opacity:0;
  transition: transform .24s var(--gv-spring), opacity .2s var(--gv-ease); }
.gv-lightbox.is-open .gv-lightbox-stage{ transform: scale(1); opacity:1; }
.gv-lightbox-img{ max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: var(--gv-r-lg); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.gv-lightbox-close{ position:absolute; top:-14px; right:-14px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background: var(--gv-paper); border:none; color: var(--gv-ink); cursor:pointer; box-shadow: var(--gv-sh-pop); transition: transform .16s var(--gv-spring), color .2s var(--gv-ease); }
.gv-lightbox-close svg{ width:20px; height:20px; }
.gv-lightbox-close:hover{ color: var(--gv-brand); transform: rotate(90deg); }
body.gv-lightbox-open{ overflow: hidden; }

/* ============================================================
   PANEL PHẢI = CARD sticky tự-scroll + CTA footer pinned (R4b)
   - .gv-right: sticky, cao cố định theo viewport.
   - .gv-buy: flex column.
   - .gv-buy-scroll: body cuộn được (scrollbar mảnh) khi nội dung dài.
   - .gv-buy-foot: CTA "Thêm giỏ + Nhận mã & Mua ngay" pinned đáy, LUÔN HIỆN.
   (compact dock gv-dock ĐÃ GỠ — không còn float góc dưới-phải.)
   ============================================================ */
.gv-buy{ min-width:0; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; max-height:100%; }
.gv-buy-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:8px;
  scrollbar-width: thin; scrollbar-color: rgba(31,27,24,.22) transparent; }
.gv-buy-scroll::-webkit-scrollbar{ width:6px; }
.gv-buy-scroll::-webkit-scrollbar-track{ background:transparent; }
.gv-buy-scroll::-webkit-scrollbar-thumb{ background: rgba(31,27,24,.18); border-radius:99px; }
.gv-buy-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(31,27,24,.32); }
/* Footer CTA pinned — ngoài vùng scroll, luôn hiển thị. */
.gv-buy-foot{ flex:0 0 auto; padding-top: 14px; margin-top: 4px; border-top:1px solid var(--gv-line);
  background: linear-gradient(180deg, rgba(255,253,248,0), var(--gv-paper) 40%); }
.gv-buy-foot .gv-form{ margin:0; }

/* ============================================================
   STICKY BOTTOM BAR (mobile) + FLOAT
   ============================================================ */
.gv-stickybar{ position: fixed; left:0; right:0; bottom:0; z-index:120;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-top:1px solid var(--gv-line); box-shadow: 0 -12px 34px -18px rgba(31,27,24,.4);
  transform: translateY(110%); transition: transform .3s var(--gv-ease); }
.gv-stickybar.is-visible{ transform: translateY(0); }
.gv-stickybar-inner{ max-width: 900px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 10px 16px; }
.gv-stickybar-info{ display:flex; align-items:center; gap: 12px; min-width:0; }
.gv-stickybar-thumb{ width:44px; height:44px; border-radius: 10px; object-fit:cover; flex:none; border:1px solid var(--gv-line); }
.gv-stickybar-price b{ display:block; font-size: 18px; color: var(--gv-brand); font-family: var(--gv-font-display); font-weight: 800; }
.gv-stickybar-price small{ display:block; font-size: 11px; color: var(--gv-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 120px; }
.gv-stickybar-cta{ display:flex; gap: 10px; flex:none; }
.gv-btn--sm{ height:46px; font-size: 13px; padding: 0 16px; }
/* Desktop KHÔNG dùng sticky-bottom (cột phải đã sticky) */
@media (min-width: 1025px){ .gv-stickybar{ display:none; } }

.gv-float{ position: fixed; right: 18px; bottom: 24px; z-index:110; display:flex; flex-direction:column; align-items:center; gap:10px; }
.gv-float-top{ width:44px; height:44px; display:grid; place-items:center; background: var(--gv-paper); border:1px solid var(--gv-line); border-radius: 50%;
  box-shadow: var(--gv-sh-raise); cursor:pointer; color: var(--gv-ink-2); opacity:0; pointer-events:none;
  transition: color .2s var(--gv-ease), transform .18s var(--gv-spring), opacity .2s var(--gv-ease); }
.gv-float-top svg{ width:20px; height:20px; }
.gv-float-top.is-visible{ opacity:1; pointer-events:auto; }
.gv-float-top:hover{ color: var(--gv-brand); transform: translateY(-2px); }

/* ============================================================
   DỌN GÓC DƯỚI-PHẢI trên PDP gdpv2 (R4b) — TẠM ẨN theo yêu cầu Sếp.
   JS gắn body.gdp-pdp-active khi .gdp-pdp có mặt (mọi template route vào gdpv2).
   Ẩn: dock vàng "100% ĐƠN MUA NGAY" của theme (gdp-footer-v2) + FB customerchat.
   CHỈ desktop — mobile (<1024) KHÔNG đụng (giữ nguyên float theme). Dễ khôi phục: xoá block này. */
@media (min-width: 1025px){
  body.gdp-pdp-active .gdp-home-float-dock{ display:none !important; }
  body.gdp-pdp-active .fb-customerchat{ display:none !important; }
}

/* Toast */
.gv-toast{ position: fixed; left:50%; bottom: 96px; z-index:220; transform: translate(-50%, 20px);
  background: var(--gv-ink); color: var(--gv-ivory); font-size: 13px; font-weight: 600; padding: 11px 20px;
  border-radius: var(--gv-pill); box-shadow: var(--gv-sh-pop); opacity:0; transition: opacity .2s var(--gv-ease), transform .2s var(--gv-spring); }
.gv-toast.is-visible{ opacity:1; transform: translate(-50%, 0); }


/* ============================================================
   TABLET / MOBILE — <1024px xuống 1 CỘT
   Thứ tự: gallery → buy panel → review → specs → desc.
   ============================================================ */
@media (max-width: 1024px){
  .gv-grid{ display:flex; flex-direction: column; gap: 8px; }
  .gv-left{ display: contents; }
  /* Mobile: panel KHÔNG sticky/không bounded — nội dung chảy tự nhiên, không scroll trong. */
  .gv-right{ position: static; order: 2; max-height:none; display:block; }
  .gv-buy{ display:block; max-height:none; }
  .gv-buy-scroll{ overflow: visible; padding-right:0; flex:none; }
  /* Foot CTA vẫn hiện trong luồng (nút Thêm giỏ/Mua ngay) cho tablet; mobile <640 dùng sticky-bottom. */
  .gv-buy-foot{ background:none; border-top:none; padding-top:0; margin-top: 8px; }
  .gv-gallery{ order: 1; margin-bottom: 20px; }
  #gv-sec-reviews{ order: 3; }
  #gv-sec-specs{ order: 4; }
  #gv-sec-desc{ order: 5; }
  .gv-rev-summary{ grid-template-columns: 1fr; gap: 20px; text-align:center; }
  .gv-specs--2col .parameter__list{ grid-template-columns: 1fr; }
  .gv-specs--2col .parameter__list li:nth-child(2n){ border-left:none; }
}

@media (max-width: 640px){
  .gdp-pdp{ padding: 0 0 100px; }
  .gv-crumb{ padding: 12px 14px; font-size: 11.5px; }
  .gv-gallery{ display:flex; flex-direction: column-reverse; gap: 12px; grid-template-columns: none; }
  .gv-thumbs{ flex-direction: row; max-height:none; overflow-x:auto; scroll-snap-type: x mandatory; padding: 2px 14px; gap: 9px; }
  .gv-thumb{ scroll-snap-align: start; }
  .gv-stage-frame{ border-radius:0; border-left:none; border-right:none; cursor:auto; box-shadow: none; }
  .gv-stage-hint{ display:none; }
  .gv-right, #gv-sec-reviews, #gv-sec-specs, #gv-sec-desc{ padding: 0 14px; }
  .gv-title{ font-size: 20px; }
  .gv-price-after-val{ font-size: 32px; }
  .gv-price-now{ font-size: 26px; }
  .gv-variant-grid{ grid-template-columns: 1fr 1fr; }
  .gv-perks{ grid-template-columns: 1fr; }
  .gv-benefits{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .gv-benefits li{ padding: 16px 10px; }
  .gv-buy-foot{ display:none; } /* mua qua sticky bottom bar full-width */
  .gv-shopee-bridge{ flex-direction:column; align-items:stretch; text-align:center; }
  .gv-shopee-bridge .gv-btn--shopee{ width:100%; }
  .gv-float{ right: 12px; bottom: 76px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .gdp-pdp *, .gv-stickybar, .gv-toast, .gv-stage-img, .gv-lightbox-stage, .gv-lightbox-overlay{ transition: none !important; animation: none !important; }
  .gv-stage-frame{ cursor: default; }
  .gv-stage-frame.is-zoom .gv-stage-img{ transform:none; }
}