/* Khu D: trang sản phẩm /p/<mã> (.pd-*) và trình xem ảnh toàn màn hình (.viewer*).
   Chỉ dùng token và primitive của shop.css (màu, chữ, khoảng cách, .btn, .szchip, .rail, .accordion, .crumbs). */

/* ---------- Khung trang ---------- */
.pd { padding-top: var(--sp-8); padding-bottom: var(--sp-56); }
.pd-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 44px; }
.pd-crumbs { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.pd-crumbs ol { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.pd-crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-share {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px;
  font-size: var(--t-small); font-weight: 500; color: var(--ink); background: none; border: 0; cursor: pointer;
}

.pd-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
@media (min-width: 768px) {
  .pd { padding-top: var(--sp-12); }
  .pd-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-32); align-items: start; }
}
@media (min-width: 1024px) {
  /* Cột ảnh = ảnh lớn vừa trọn màn đầu (trừ dải ưu đãi, đầu trang, hàng đường dẫn) + cột ảnh nhỏ (64 + 12), tối đa 58% bề rộng.
     Cột thông tin tối đa 520px (nút, khối tin cậy không bị kéo dài). Cụm ảnh + thông tin canh giữa khung, hàng đường dẫn
     canh theo mép trái của ảnh: bề rộng thừa chia đều hai bên thay vì thành một khe lớn giữa ảnh và thông tin. */
  .pd {
    --pd-fit: calc((100svh - var(--hdr-h, 68px) - var(--usp-h, 36px) - 56px - 24px) * 0.8);
    --pd-gap: clamp(40px, 5vw, 80px);
    --pd-thumbs: 0px;
  }
  .pd:has(.pd-thumbs:not([hidden])) { --pd-thumbs: 76px; }
  .pd-main {
    grid-template-columns: minmax(0, calc(min(58%, var(--pd-fit)) + var(--pd-thumbs))) minmax(0, 520px);
    justify-content: center;
    gap: var(--pd-gap);
  }
  .pd-top { max-width: calc(min(58%, var(--pd-fit)) + var(--pd-thumbs) + var(--pd-gap) + 520px); margin-inline: auto; }
}
@media (min-width: 1280px) {
  .pd { --pd-gap: clamp(56px, 5vw, 80px); }
}

/* ---------- Ảnh ---------- */
.pd-gallery { position: relative; min-width: 0; display: flex; flex-direction: column; }
.pd-gallery__main { min-width: 0; }
@media (max-width: 767px) {
  /* Điện thoại: ảnh tràn hai mép màn hình. */
  .pd-gallery { margin-inline: calc(var(--gutter) * -1); }
}
.pd-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lining); }
@media (min-width: 768px) {
  .pd-stage { border-radius: var(--r-sm); }
}
.pd-strip {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.pd-strip::-webkit-scrollbar { display: none; }
.pd-slide {
  position: relative; flex: 0 0 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in; display: block;
}
.pd-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pd-slide .pd-img { opacity: 0; transition: opacity 200ms var(--ease); }
.pd-slide .pd-img.is-loaded, .pd-slide .pd-img--now { opacity: 1; }
.pd-slide.is-empty { cursor: default; }
.pd-slide.is-empty::after {
  content: 'Chưa có ảnh'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--t-small); color: var(--muted);
}
.pd-slide:focus-visible { outline-offset: -4px; }
.pd-count {
  position: absolute; right: var(--sp-12); bottom: var(--sp-12); z-index: 1; padding: 4px 10px;
  border-radius: var(--r-round); background: color-mix(in srgb, var(--paper) 90%, transparent); color: var(--ink);
  font-size: var(--t-micro); line-height: 1.35; pointer-events: none;
}
.pd-count[hidden] { display: none; }
.pd-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pd-arrow {
    position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: var(--r-round); background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink);
    box-shadow: var(--sh-2); transform: translateY(-50%); opacity: 0; cursor: pointer;
    transition: opacity var(--d-fast) var(--ease);
  }
  .pd-arrow--prev { left: var(--sp-12); }
  .pd-arrow--next { right: var(--sp-12); }
  .pd-stage:hover .pd-arrow, .pd-arrow:focus-visible { opacity: 1; }
  .pd-arrow:disabled { opacity: 0 !important; pointer-events: none; }
  .pd-arrow[hidden] { display: none; }
}
.pd-dots { display: flex; justify-content: center; align-items: center; gap: 6px; height: 20px; margin-top: var(--sp-8); }
.pd-dots[hidden] { display: none; }
.pd-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--stone); transition: width var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease); }
.pd-dot.is-on { width: 18px; background: var(--ink); }

.pd-thumbs { display: none; }
.pd-thumb {
  flex: none; width: 64px; height: 80px; padding: 0; border: 2px solid transparent; border-radius: var(--r-xs);
  overflow: hidden; background: var(--lining); cursor: pointer; transition: border-color var(--d-fast) var(--ease);
}
.pd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pd-thumb[aria-current="true"] { border-color: var(--ink); }
@media (hover: hover) { .pd-thumb:not([aria-current="true"]):hover { border-color: var(--stone); } }

@media (min-width: 768px) {
  .pd-gallery { position: sticky; top: calc(var(--hdr-offset, 0px) + var(--sp-16)); }
  .pd-thumbs:not([hidden]) {
    display: flex; order: 2; gap: var(--sp-8); margin-top: var(--sp-12); overflow-x: auto; scrollbar-width: thin;
    padding-bottom: 2px;
  }
}
@media (min-width: 1024px) {
  /* Ảnh nhỏ dọc bên trái, ảnh lớn 4:5 vừa trọn màn hình (không bị header che). */
  .pd-gallery {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-12); align-items: start;
    top: calc(var(--hdr-offset, 0px) + var(--sp-24));
  }
  .pd-gallery:has(.pd-thumbs[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .pd-gallery__main { grid-column: -2 / -1; width: min(100%, calc((100svh - var(--hdr-h, 68px) - var(--usp-h, 36px) - 56px - 24px) * 0.8)); }
  .pd-thumbs:not([hidden]) {
    order: 0; grid-column: 1; grid-row: 1; flex-direction: column; margin: 0; overflow-x: hidden; overflow-y: auto;
    max-height: calc(100svh - var(--hdr-h, 68px) - var(--usp-h, 36px) - 56px - 24px); padding: 0;
  }
  .pd-dots { display: none; }
}

/* ---------- Cột thông tin ---------- */
.pd-info { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-20); }
@media (min-width: 1024px) { .pd-info { gap: var(--sp-24); } }
@media (min-width: 768px) {
  .pd-info { position: sticky; top: calc(var(--hdr-offset, 0px) + var(--sp-24)); }
}
.pd-head { display: flex; flex-direction: column; }
/* Mã + màu: dòng đầu của H1, chữ đậm màu mực (khách live nhận mẫu theo mã: "VIP1 · Xanh than"). */
.pd-code {
  display: block; margin: 0 0 var(--sp-4); color: var(--ink); font-size: 15px; line-height: 1.35; font-weight: 600;
  letter-spacing: .01em;
}
.pd-code__sep { color: var(--muted); font-weight: 400; }
.pd-title {
  margin: 0; font-size: var(--t-h1-product, 22px); line-height: 1.28; font-weight: 600;
  letter-spacing: -0.005em; text-wrap: balance; overflow-wrap: anywhere;
}
.pd-title__name { display: block; }
@media (min-width: 1024px) { .pd-title { line-height: 1.25; } }
.pd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: var(--sp-8); }
@media (min-width: 1024px) { .pd-price { margin-top: var(--sp-12); } }
.pd-price__now {
  font-family: "Archivo", "Be Vietnam Pro", system-ui, sans-serif; font-stretch: 100%; font-weight: 700;
  font-size: var(--t-price-lg, 24px); line-height: 1.1; color: var(--ink);
}
.pd-price__old { font-size: 15px; color: var(--muted); }
.pd-price__off { align-self: center; }
.pd-stock { margin: var(--sp-8) 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--muted); }

.pd-sec { min-width: 0; }
.pd-label { margin: 0 0 var(--sp-12); font-size: var(--t-ui); font-weight: 500; line-height: 1.35; color: var(--ink); }
.pd-label b { font-weight: 600; }
.pd-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); margin-bottom: var(--sp-8); }
.pd-row .pd-label { margin: 0; }
.pd-chartlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-block: -8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--t-small); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.pd-chartlink svg { flex: none; color: var(--muted); }
@media (hover: hover) { .pd-chartlink:hover { text-decoration-thickness: 2px; } }
.pd-chartlink:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.pd-note { margin: var(--sp-8) 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--muted); }
.pd-setnote { color: var(--ink); }

/* Màu */
.pd-colors .pd-label { margin-bottom: var(--sp-12); }
.pd-colors[hidden] { display: none; }
.pd-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); }
.pd-swatches[hidden] { display: none; }
.pd-sw {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; padding: 2px 0;
  border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit;
}
.pd-sw > .swatch { transition: box-shadow var(--d-fast) var(--ease); }
/* Dự phòng khi util chưa có swatch(): ô tròn tự vẽ. */
.pd-sw__chip {
  display: block; width: 56px; height: 56px; flex: none; border-radius: var(--r-round); overflow: hidden;
  background: var(--lining); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
.pd-sw__chip--img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.pd-sw[aria-pressed="true"] > .pd-sw__chip { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.pd-sw__name { max-width: 72px; font-size: var(--t-micro); line-height: 1.3; text-align: center; color: var(--muted); overflow-wrap: anywhere; }
.pd-sw[aria-pressed="true"] .pd-sw__name { color: var(--ink); font-weight: 600; }
.pd-sw:focus-visible { outline-offset: 2px; border-radius: var(--r-xs); }

/* Size: radio thật nằm trong nhãn .szchip (primitive của shop.css); chỉ thêm trạng thái "đã chọn" của radio. */
.pd-sizes { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.pd-sz { min-width: 56px; cursor: pointer; user-select: none; }
@media (min-width: 1024px) { .pd-sz { min-width: 64px; min-height: 60px; } }
.pd-sz__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pd-sz.is-checked { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.pd-sz.is-checked .szchip__num, .pd-sz.is-checked .szchip__left { color: inherit; opacity: .8; }
.pd-sz:has(.pd-sz__input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.pd-sizesec.is-bad .pd-sz:not(.is-out) { border-color: var(--alert); }
.pd-sizesec.is-shake .pd-sizes { animation: pd-shake 320ms var(--ease); }
@keyframes pd-shake { 20% { transform: translateX(-4px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
.pd-hint__text { margin: var(--sp-12) 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--muted); }
.pd-hint__text.is-alert { color: var(--alert); }
.pd-hint__link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pd-sizehint { margin-top: var(--sp-12); }
.pd-sizehint:empty, .pd-sizehint:has(> .sf-hint:empty) { display: none; }

/* Nút mua trong trang */
.pd-ctas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
@media (min-width: 1024px) { .pd-ctas { grid-template-columns: minmax(0, 1fr); } }
.pd-cta { min-height: 52px; gap: 6px; }
/* Chưa chọn size: nút chính vẫn màu mực (một hành động chính rõ ràng), chữ "Chọn size"; bấm thì đưa tới hàng size. */
.pd-cta.is-done, .pd-buybar__cta.is-done { background: var(--ok); border-color: var(--ok); color: #fff; }

/* Tin cậy 2×2 */
.pd-trust__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--stone); border: 1px solid var(--stone); border-radius: var(--r-md); overflow: hidden;
}
.pd-trust__grid > li { display: flex; background: var(--paper); }
.pd-trust__item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 64px; padding: var(--sp-12);
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left;
}
button.pd-trust__item { cursor: pointer; transition: background-color var(--d-fast) var(--ease); }
@media (hover: hover) { button.pd-trust__item:hover { background: var(--lining); } }
button.pd-trust__item:focus-visible { outline-offset: -3px; }
.pd-trust__ic { flex: none; display: grid; place-items: center; margin-top: 1px; color: var(--ink); }
.pd-trust__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-trust__txt b { font-size: var(--t-small); font-weight: 600; line-height: 1.35; }
.pd-trust__txt small { font-size: var(--t-micro); line-height: 1.35; color: var(--muted); }
.pd-trust__note { margin: var(--sp-8) 0 0; font-size: var(--t-micro); line-height: 1.4; color: var(--muted); }

/* Hỏi shop */
.pd-ask__h { margin: 0 0 var(--sp-8); font-size: var(--t-ui); font-weight: 600; line-height: 1.35; }
.pd-asksheet { padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom)); }

/* Accordion */
.pd-accs { display: flex; flex-direction: column; }
.pd-acc[hidden] { display: none; }
.pd-acc__body { padding-bottom: var(--sp-16); font-size: 15px; line-height: 1.55; }
.pd-acc__meta { font-weight: 500; color: var(--muted); }
.pd-specs { display: grid; margin: 0; }
.pd-spec { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: var(--sp-12); padding: 9px 0; border-bottom: 1px solid var(--stone); }
.pd-spec:last-child { border-bottom: 0; }
.pd-spec dt { color: var(--muted); }
.pd-spec dd { margin: 0; overflow-wrap: anywhere; }
.pd-desc { margin: var(--sp-12) 0 0; max-width: 68ch; white-space: pre-line; }
.pd-chart { padding-bottom: var(--sp-16); }
.pd-chart__scroll { overflow-x: auto; }
.pd-chart__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-chart__table th, .pd-chart__table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--stone); white-space: nowrap; }
.pd-chart__table thead th { font-size: var(--t-small); font-weight: 500; color: var(--muted); }
.pd-chart__table tbody th { font-weight: 600; }
.pd-chart__table tr.is-out { color: var(--muted); }
.pd-chart__table small { font-weight: 400; }
.pd-ship { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.pd-polinks { margin: var(--sp-16) 0 0; }
.pd-polinks__h { margin: 0 0 var(--sp-8); font-size: var(--t-small); font-weight: 600; color: var(--muted); }
.pd-polinks__list { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
.pd-polink {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--stone);
  border-radius: var(--r-round); color: var(--ink); font-size: var(--t-small); font-weight: 500; text-decoration: none;
}
@media (pointer: coarse) { .pd-polink { min-height: 44px; } }
@media (hover: hover) { .pd-polink:hover { border-color: var(--ink); } }
.pd-polink:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Chưa có đánh giá thật: một dòng mời xem phản hồi trên fanpage thay cho mục "Đánh giá" rỗng. */
.pd-fbline {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-8);
  font-size: var(--t-small); font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.pd-fbline:hover { color: var(--ink); }
.pd-rv__size { color: var(--muted); }
.pd-rv__sum { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.pd-rv__sum b { font-size: 20px; }
.pd-stars { display: inline-flex; gap: 1px; color: var(--ink); }
.pd-rv__list { display: grid; gap: var(--sp-12); margin: var(--sp-12) 0 0; padding: 0; list-style: none; }
.pd-rv__item { padding-top: var(--sp-12); border-top: 1px solid var(--stone); }
.pd-rv__item p { margin: 6px 0 0; }
.pd-rv__top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: var(--t-small); }
.pd-rv__name { font-weight: 600; }
.pd-rv__top time { color: var(--muted); }

/* ---------- Dải gợi ý ---------- */
.pd-rails { display: grid; gap: var(--sp-40); margin-top: var(--sp-56); min-width: 0; }
.pd-rails:empty { display: none; }
.pd-rail { min-width: 0; }
.pd-rail__h h2 { margin: 0 0 var(--sp-16); }
@media (min-width: 1024px) { .pd-rails { gap: var(--sp-56); margin-top: var(--sp-72); } }

/* ---------- Đã bán hết / mã không có ---------- */
.pd-gone__head { max-width: 680px; padding: var(--sp-16) 0 var(--sp-32); }
.pd-gone__title {
  margin: 0; font-family: "Archivo", "Be Vietnam Pro", system-ui, sans-serif; font-stretch: 112%; font-weight: 700;
  font-size: var(--t-h2, 26px); line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.pd-gone__lead { margin: var(--sp-8) 0 0; font-size: var(--t-body); color: var(--muted); }
.pd-gone__chat { margin-top: var(--sp-20); }
.pd-gone__head > .btn { margin-top: var(--sp-20); }
/* Máy tính bảng trở lên: các kênh nhắn shop nằm một hàng (độ rộng theo chữ), không phải ba ô dài như biểu mẫu. */
@media (min-width: 768px) {
  .pd-gone__chat .chat-list { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
  .pd-gone__chat .chat-list > li { flex: 0 0 auto; }
}
/* Mã không có trong shop: ô tìm lại theo mã + chip mã đang có. */
.pd-unknown__search { display: flex; gap: var(--sp-8); width: min(480px, 100%); margin-top: var(--sp-20); }
.pd-unknown__search .input { flex: 1 1 auto; min-width: 0; height: 48px; font-size: 16px; text-transform: uppercase; }
.pd-unknown__search .input::placeholder { text-transform: none; }
.pd-unknown__search .btn { flex: none; min-height: 48px; }
.pd-unknown__codes { margin-top: var(--sp-20); }
.pd-unknown__h { margin: 0 0 var(--sp-16); font-size: var(--t-h3, 20px); line-height: 1.3; }
.pd-gone__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-12); }
@media (min-width: 768px) { .pd-gone__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-32) var(--sp-16); } }
@media (min-width: 1180px) { .pd-gone__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-24); } }

/* ---------- Thanh mua dưới đáy (<1024) ---------- */
.pd-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: var(--sp-8);
  min-height: 64px; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--stone); box-shadow: 0 -8px 24px -16px rgba(10, 14, 26, 0.35);
}
.pd-buybar__chat { flex: none; }
.pd-buybar__chat[hidden] { display: none; }
.pd-buybar__sum { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.pd-buybar__sum > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-buybar__sum [aria-hidden="true"] { display: none; }
.pd-buybar__price {
  font-family: "Archivo", "Be Vietnam Pro", system-ui, sans-serif; font-stretch: 100%; font-weight: 700; font-size: 17px; color: var(--ink);
}
.pd-buybar__size { font-size: var(--t-small); color: var(--ink); }
.pd-buybar__size.is-muted { color: var(--muted); }
.pd-buybar__cta { flex: none; min-height: 48px; min-width: 148px; padding-inline: var(--sp-20); gap: 6px; }
@media (min-width: 1024px) { .pd-buybar { display: none; } }
@media (max-width: 1023px) {
  :root:has(.pd-buybar:not([hidden])) { --bar-h: 64px; }
}

/* ---------- Trình xem ảnh ---------- */
/* Trình xem phủ kín màn hình nên không cần chừa chỗ thanh cuộn (khoá cuộn chung để lại một dải sáng ở mép phải). */
html:has(.viewer-dlg[open]) { scrollbar-gutter: auto; }
.viewer-dlg {
  /* inset 0 + auto: phủ đúng khung nhìn (100vw tính cả thanh cuộn nên lệch mép phải trên máy tính). */
  inset: 0; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #0b0e16; color: #fff;
}
.viewer-dlg > .sheet-in { height: 100%; max-height: none; overflow: hidden; padding: 0; }
.viewer { position: relative; display: flex; flex-direction: column; height: 100%; background: #0b0e16; color: #fff; }
.viewer__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8); padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.6), rgba(5, 7, 12, 0)); pointer-events: none;
}
.viewer__bar > * { pointer-events: auto; }
.viewer__count { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.viewer__tools { display: flex; gap: var(--sp-8); margin-left: auto; }
.viewer__btn {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-round);
  background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer;
}
@media (hover: hover) { .viewer__btn:hover { background: rgba(255, 255, 255, 0.24); } }
.viewer__btn:focus-visible, .viewer__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.viewer__strip {
  flex: 1 1 auto; display: flex; min-height: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.viewer__strip::-webkit-scrollbar { display: none; }
.viewer__slide {
  flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.viewer__img {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none;
  touch-action: pan-x pan-y pinch-zoom; cursor: zoom-in;
}
.viewer__slide.is-zoomed { display: block; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; cursor: grab; }
.viewer__slide.is-zoomed::-webkit-scrollbar { display: none; }
.viewer__slide.is-zoomed .viewer__img { max-width: none; max-height: none; cursor: zoom-out; }
.viewer__slide.is-drag { cursor: grabbing; }
.viewer__arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .viewer__arrow {
    position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px;
    border: 0; border-radius: var(--r-round); background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer;
    transform: translateY(-50%);
  }
  .viewer__arrow:hover { background: rgba(255, 255, 255, 0.26); }
  .viewer__arrow--prev { left: var(--sp-16); }
  .viewer__arrow--next { right: var(--sp-16); }
  .viewer__arrow:disabled { opacity: 0.3; pointer-events: none; }
  .viewer__arrow[hidden] { display: none; }
  .viewer__tip { display: none; }
}
.viewer__tip {
  position: absolute; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom)); margin: 0; padding: 0 var(--sp-16);
  font-size: 12px; line-height: 1.35; text-align: center; color: rgba(255, 255, 255, 0.72); pointer-events: none;
}

/* Nút "Gửi link": góc phải dòng mã của khối tên (mọi bề rộng). */
.pd-head { position: relative; }
.pd-head > .pd-share { position: absolute; top: -12px; right: 0; z-index: 1; }
.pd-head .pd-code { padding-right: 96px; }

/* Điện thoại: màn đầu phải thấy ảnh, mã, tên, giá và hàng size, trên thanh mua 64px dưới đáy (390×844: hàng size bắt đầu
   khoảng y 700). Bỏ hàng đường dẫn (đã có nút Back, menu; JSON-LD BreadcrumbList vẫn có), ảnh cao tối đa 4:5 và thấp lại
   theo chiều cao màn hình (không thấp hơn ảnh vuông), các khoảng cách gọn lại. Nhiều ảnh: chấm chỉ số nằm đè đáy ảnh. */
@media (max-width: 767.98px) {
  .pd { padding-top: 0; }
  .pd-top { display: none; }
  .pd-main { gap: var(--sp-12); }
  .pd-stage { aspect-ratio: auto; height: min(125vw, max(100vw, calc(100svh - 396px))); }
  .pd-gallery__main { position: relative; }
  .pd-dots {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; height: 18px; padding: 0 8px;
    border-radius: var(--r-round); background: color-mix(in srgb, var(--paper) 82%, transparent); z-index: 1;
  }
  .pd-count { display: none; }
  .pd-info { gap: var(--sp-16); }
  .pd-price { margin-top: var(--sp-4); }
  .pd-row { min-height: 32px; margin-bottom: var(--sp-8); }
  .pd-chartlink { margin-block: -6px; }
  .pd-sizehint { margin-top: var(--sp-8); }
}

/* Điện thoại (dưới 768px): mọi vùng bấm ≥ 44px kể cả khi trình duyệt báo có chuột (QA giao diện mục 6: ô màu, mũi tên dải hàng,
   nút chính sách, đường dẫn). Màn cảm ứng vốn đã 44px; file nạp cuối nên thắng các luật "(hover: hover) and (pointer: fine)". */
@media (max-width: 767.98px) {
  .card__sw { width: 44px; height: 44px; }
  .card__sws { height: 44px; margin: 2px 0 -6px -12px; }
  .card__more { min-height: 44px; }
  .hrail-arrow { width: 44px; height: 44px; }
  .pd-polink { min-height: 44px; }
  .chip, .tb-chip, .tb-clear { min-height: 44px; }
  .crumbs a { min-height: 44px; line-height: 44px; }
  .boot-head { grid-template-rows: 44px 42px 26px; } /* khung chờ cùng cao với hàng đường dẫn 44px */
}