@charset "UTF-8";
/* ==========================================================================
   TMT product detail (Task 09). Chỉ nạp ở template product*. Phụ thuộc tmt-design-system.css.
   Mobile-first. Chỉ class .tmt-*; không selector toàn cục.
   Tương tác (chọn biến thể, trạng thái, nút, thanh mua dính) do assets/tmt-product.js điều khiển.
   ========================================================================== */

.tmt-product { background: var(--color-bg-page); padding-bottom: var(--space-8); --tmt-sticky-h: 68px; }
.tmt-product [hidden] { display: none !important; }
.tmt-product .tmt-breadcrumb { padding-top: var(--space-2); }

/* ---------- Bố cục: 1 cột mobile; desktop: ảnh trái (dính) + thông tin phải ---------- */
.tmt-pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 992px) {
  .tmt-pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; margin-bottom: var(--space-8); }
  .tmt-gallery { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

/* ---------- 1. Thư viện ảnh ---------- */
.tmt-gallery { min-width: 0; }
.tmt-gallery__stage { position: relative; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.tmt-gallery__stage--empty { padding: var(--space-8); text-align: center; }
.tmt-gallery__stage--empty img { max-width: 240px; height: auto; margin-inline: auto; }
.tmt-gallery__track { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tmt-gallery__track::-webkit-scrollbar { display: none; }
.tmt-gallery__track:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.tmt-gallery__slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-bg-surface); }
.tmt-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform var(--duration-base) var(--ease); }
.tmt-gallery__count { position: absolute; right: var(--space-3); bottom: var(--space-3); margin: 0; padding: 2px var(--space-3); font: 600 var(--text-caption)/1.6 var(--font-sans); color: var(--color-text-inverse); background: rgba(31, 27, 22, 0.72); border-radius: var(--radius-pill); pointer-events: none; }
/* Nút trước/sau: chỉ từ tablet trở lên (mobile vuốt tay) */
.tmt-gallery__nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: var(--tap-min); height: var(--tap-min); padding: 0 0 4px; font: 400 28px/1 var(--font-sans); color: var(--color-text-strong); background: rgba(255, 255, 255, 0.92); border: 1.5px solid var(--color-border-control); border-radius: 50%; cursor: pointer; z-index: 2; }
.tmt-gallery__nav:hover { background: var(--color-bg-surface); border-color: var(--color-text-strong); }
.tmt-gallery__nav:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tmt-gallery__nav[disabled] { opacity: 0.35; cursor: default; }
.tmt-gallery__nav--prev { left: var(--space-3); }
.tmt-gallery__nav--next { right: var(--space-3); }
@media (min-width: 768px) { .tmt-gallery__nav { display: block; } }

.tmt-gallery__thumbs { display: flex; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0 0 var(--space-1); list-style: none; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tmt-gallery__thumbs li { flex: 0 0 auto; margin: 0; }
.tmt-gallery__thumb { display: block; width: 64px; height: 64px; padding: 2px; background: var(--color-bg-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; overflow: hidden; }
.tmt-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tmt-gallery__thumb:hover { border-color: var(--color-border-strong); }
.tmt-gallery__thumb[aria-current="true"] { border-color: var(--color-brand-700); }
.tmt-gallery__thumb:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (min-width: 992px) { .tmt-gallery__thumb { width: 72px; height: 72px; } }

/* Phóng to bằng click: chỉ khi có chuột (không ảnh hưởng vuốt/zoom 2 ngón trên cảm ứng) */
@media (hover: hover) and (pointer: fine) {
  .tmt-gallery__slide { cursor: zoom-in; }
  .tmt-gallery__slide.is-zoomed { cursor: zoom-out; }
  .tmt-gallery__slide.is-zoomed img { transform: scale(2); }
}

/* ---------- 2. Khối mua hàng ---------- */
.tmt-buy { min-width: 0; }
.tmt-buy__flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
.tmt-buy__flags:empty { display: none; }
.tmt-pdp__title { margin: 0 0 var(--space-2); font: 700 var(--text-h1)/var(--lh-h1) var(--font-display); color: var(--color-text-strong); overflow-wrap: break-word; }
.tmt-pdp__sku { margin: 0 0 var(--space-4); font-size: var(--text-small); color: var(--color-text); }
.tmt-pdp__sku .variant-sku { font-weight: 600; color: var(--color-text-strong); }

.tmt-pricebox { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.tmt-pdp__price, .tmt-price--contact { font-size: calc(var(--text-price) * 1.35); line-height: 1.15; }
.tmt-price--contact { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-brand-700); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.tmt-pricebox .tmt-price__old { margin-left: 0; font-size: var(--text-body); }
.tmt-stock { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); font-size: var(--text-small); font-weight: 600; }
.tmt-stock__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.tmt-stock--in { color: var(--color-success); }
.tmt-stock--out { color: var(--color-text-muted); }
.tmt-pdp__summary { margin: 0 0 var(--space-4); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text); }
.tmt-pdp__summary p { margin: 0 0 var(--space-2); }

/* Biến thể */
.tmt-variants { margin: 0 0 var(--space-4); }
.tmt-variants__native { margin: 0; padding: 0; border: 0; min-width: 0; }
.tmt-variants.is-enhanced .tmt-variants__native { display: none; }
.tmt-variants .selector-wrapper { display: none !important; }       /* select do Bizweb.OptionSelectors tạo ra: vẫn hoạt động nhưng ẩn, giao diện do chip/select bên dưới */
.tmt-variants__groups { display: grid; gap: var(--space-4); }
.tmt-variants__groups:empty { display: none; }
.tmt-opt { margin: 0; padding: 0; border: 0; min-width: 0; }
.tmt-opt__legend { display: block; margin: 0 0 var(--space-2); padding: 0; font-size: var(--text-small); font-weight: 600; color: var(--color-text-strong); }
.tmt-opt__legend b { font-weight: 400; color: var(--color-text-muted); }
.tmt-opt__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tmt-opt__item { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; }
.tmt-opt__item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tmt-opt__chip { display: flex; flex-direction: column; justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); padding: var(--space-2) var(--space-4); font: 600 var(--text-small)/1.25 var(--font-sans); color: var(--color-text-strong); text-align: center; background: var(--color-bg-surface); border: 1.5px solid var(--color-border-control); border-radius: var(--radius-md); cursor: pointer; }
.tmt-opt__chip small { font: 400 var(--text-caption)/1.3 var(--font-sans); color: var(--color-text-muted); }
.tmt-opt__item:hover .tmt-opt__chip { background: var(--color-bg-subtle); }
.tmt-opt__item input:checked + .tmt-opt__chip { background: var(--color-brand-700); border-color: var(--color-brand-700); color: var(--color-text-inverse); }
.tmt-opt__item input:checked + .tmt-opt__chip small { color: var(--color-brand-100); }
.tmt-opt__item input:focus-visible + .tmt-opt__chip { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tmt-opt__item.is-soldout input:not(:checked) + .tmt-opt__chip { color: var(--color-text-muted); border-style: dashed; text-decoration: line-through; }
.tmt-opt__item.is-soldout input:not(:checked) + .tmt-opt__chip small { text-decoration: none; }
.tmt-opt__item.is-unavailable input { cursor: not-allowed; }
.tmt-opt__item.is-unavailable .tmt-opt__chip { color: var(--color-text-disabled); background: var(--color-bg-subtle); border-color: var(--color-border); border-style: dashed; text-decoration: line-through; }
.tmt-opt__select { width: 100%; }
.tmt-variants__msg { margin: var(--space-2) 0 0; }

/* Số lượng + nút
   CSS cũ của theme chạm vào input/button/#qtym (padding 110px, border, display:block...) nên khai báo lại đầy đủ với độ ưu tiên cao hơn. */
.tmt-product .tmt-qty { display: inline-flex; align-self: flex-start; width: auto; max-width: 100%; height: auto; margin: 0; }
.tmt-product .tmt-qty .tmt-qty__btn { display: block; flex: 0 0 var(--tap-min); width: var(--tap-min); min-width: var(--tap-min); height: var(--control-h); min-height: var(--control-h); margin: 0; padding: 0; font: 600 20px/1 var(--font-sans); color: var(--color-text-strong); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.tmt-product .tmt-qty .tmt-qty__btn[disabled] { color: var(--color-text-disabled); }
.tmt-product .tmt-qty #qtym.tmt-qty__input { display: block; flex: 0 0 56px; width: 56px; height: var(--control-h); min-height: var(--control-h); margin: 0; padding: 0; font: 600 16px/1 var(--font-sans); text-align: center; color: var(--color-text-strong); background: transparent; border: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); border-radius: 0; box-shadow: none; }
.tmt-product .tmt-qty #qtym.tmt-qty__input:focus { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.tmt-product .tmt-purchase__actions .tmt-btn { height: auto; margin: 0; }
.tmt-product .tmt-trust__list { list-style: disc; }
.tmt-product .tmt-purchase__actions .tmt-btn > span { display: inline; }
.tmt-purchase { display: grid; gap: var(--space-4); margin: 0 0 var(--space-4); }
.tmt-purchase__qty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.tmt-purchase__actions { display: grid; gap: var(--space-3); }
.tmt-purchase__actions .tmt-btn { width: 100%; }
.tmt-purchase__actions .tmt-btn[disabled] { opacity: 1; }
@media (min-width: 430px) { .tmt-purchase__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tmt-purchase__actions > :only-child, .tmt-purchase__actions > [data-tmt-contact]:not([hidden]) { grid-column: 1 / -1; } }
.tmt-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Cam kết / dịch vụ (lấy từ cài đặt theme như cũ) */
.tmt-trust { margin: var(--space-4) 0 0; padding: var(--space-4); background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.tmt-trust__title { margin: 0 0 var(--space-2); font-size: var(--text-small); font-weight: 700; color: var(--color-text-strong); }
.tmt-trust__list { margin: 0; padding-left: var(--space-4); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text); }
.tmt-trust__list li { margin: 0 0 var(--space-1); }

/* ---------- 3. Accordion mô tả / thông tin / chính sách ---------- */
.tmt-pdp__info { margin-bottom: var(--space-8); }
.tmt-pdp__info details > summary { font-size: var(--text-h3); font-family: var(--font-display); }
.tmt-pdp__info .tmt-accordion__panel { overflow-wrap: anywhere; }

/* Nội dung soạn tay (editor Sapo): không cho tràn ngang trên mobile */
.tmt-rte { max-width: 100%; overflow-wrap: anywhere; font-size: var(--text-body); line-height: var(--lh-body); }
.tmt-rte img { max-width: 100%; height: auto; }
.tmt-rte table { display: block; max-width: 100%; overflow-x: auto; }
.tmt-rte iframe, .tmt-rte video { max-width: 100%; }
.tmt-rte p { margin: 0 0 var(--space-3); }
.tmt-rte ul, .tmt-rte ol { padding-left: var(--space-6); }

.tmt-specs { margin: 0; display: grid; gap: var(--space-3); }
.tmt-specs > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.tmt-specs dt { font-size: var(--text-small); font-weight: 600; color: var(--color-text-muted); }
.tmt-specs dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-weight: 600; color: var(--color-text-strong); }
.tmt-specs dd .tmt-chip { text-decoration: none; font-weight: 500; }
@media (min-width: 768px) { .tmt-specs > div { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-4); align-items: start; } }

/* ---------- 4. Sản phẩm cùng loại ---------- */
.tmt-related { padding-top: 0; }
.tmt-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-4); }
.tmt-section__head .tmt-h2 { margin: 0; }
/* Mobile 2x3, tablet 3x2, desktop 4 thẻ (như homepage) */
@media (min-width: 992px) { .tmt-grid--related > *:nth-child(n + 5) { display: none; } }

/* ---------- 5. Thanh mua dính (mobile/tablet) ---------- */
.tmt-sticky-buy { position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + 1px + env(safe-area-inset-bottom)); /* +1px = viền trên của thanh dưới (Task 32) */ z-index: calc(var(--z-bottomnav) - 1); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tmt-sticky-h); padding: var(--space-2) var(--gutter); background: var(--color-bg-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 10px rgba(31, 27, 22, 0.08); }
.tmt-sticky-buy__price { display: flex; flex-direction: column; min-width: 0; }
.tmt-sticky-buy__price .tmt-price { font-size: var(--text-h3); line-height: 1.15; }
.tmt-sticky-buy .tmt-btn { flex: 0 1 auto; min-width: 140px; }
.tmt-sticky-buy .tmt-btn[disabled] { opacity: 1; }
@media (min-width: 992px) { .tmt-sticky-buy { display: none !important; } }
/* Khi thanh mua dính hiện, nâng 2 nút nổi (Zalo/điện thoại) của theme lên trên nó để không che nút bấm */
@media (max-width: 991px) {
  html body.tmt-sticky-on #_zalo { bottom: calc(76px + 68px + env(safe-area-inset-bottom)) !important; }
  html body.tmt-sticky-on #suntory-alo-phoneIcon { bottom: calc(68px + 68px + env(safe-area-inset-bottom)) !important; }
}

@media (min-width: 768px) {
  .tmt-pdp__title { font-size: var(--text-h1); }
}
@media (prefers-reduced-motion: reduce) { .tmt-gallery__slide img { transition: none; } }
/* Task 30: liên kết chữ nhỏ tới trang xác thực WBN50 (chỉ hiện khi route sống), không nổi hơn nút mua */
.tmt-pdp-verify { margin: var(--space-3) 0 0; font-size: var(--text-small); }
.tmt-pdp-verify a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; }
/* Task 31: dòng giới thiệu WORLD BANKNOTES 50 dưới H1 (chỉ khi cờ display bật) + khối mô tả Signature Gift (.tmt-sg) */
.tmt-pdp__tagline { margin: var(--space-1) 0 0; font: 600 var(--text-body)/1.4 var(--font-sans); color: var(--color-text-strong); }
.tmt-pdp__bigidea { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-small); line-height: 1.4; letter-spacing: .02em; color: var(--color-brand-700); }
.tmt-pdp__bigidea strong { text-transform: uppercase; letter-spacing: .06em; }
.tmt-sg { max-width: 68ch; }
.tmt-sg__notice { margin: 0 0 var(--space-4); padding: var(--space-3); font-size: var(--text-small); line-height: 1.4; color: var(--color-text-strong); background: #fff7e0; border: 1px solid #b99646; border-radius: var(--radius-md); }
.tmt-sg .tmt-sg__h { margin: var(--space-6) 0 var(--space-2); font: 700 var(--text-h3)/1.25 var(--font-display); color: var(--color-text-strong); }
.tmt-sg .tmt-sg__h:first-of-type { margin-top: 0; }
.tmt-sg__en { display: block; margin-top: 2px; font: 600 var(--text-caption)/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.tmt-sg__quote { margin: var(--space-3) 0; padding: 0 0 0 var(--space-4); border-left: 3px solid #b99646; font-style: italic; }
.tmt-sg__quote p { margin: 0; }
.tmt-sg__list { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.tmt-sg__list li { margin: 0 0 var(--space-1); }
.tmt-sg__faq { display: grid; gap: var(--space-2); }
.tmt-sg__faq details { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.tmt-sg__faq summary { display: flex; align-items: center; min-height: 48px; padding: var(--space-2) var(--space-3); font-weight: 600; cursor: pointer; }
.tmt-sg__faq details p { margin: 0; padding: 0 var(--space-3) var(--space-3); }
.tmt-sg__faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ==========================================================================
   Task 71 — F2 (SỬA CỤC BỘ, chưa lên Sapo): trang sản phẩm — mô tả (.tmt-rte) dễ đọc, nhất quán với chữ của site.
   Mô tả do nhân viên soạn trong trình soạn thảo Sapo nên mang inline style (Arial, cỡ 22–28px, link vàng #FFD700 khó đọc trên nền kem, lề trái 40px, tiêu đề căn giữa).
   CSS dưới ghi đè các inline style đó (!important) mà KHÔNG sửa nội dung sản phẩm. Chỉ trong .tmt-rte của trang sản phẩm.
   ========================================================================== */
.tmt-rte { max-width: 820px; }
.tmt-rte span[style*="font-family"] { font-family: inherit !important; }
.tmt-rte span[style*="font-size"] { font-size: inherit !important; }
.tmt-rte [style*="margin-left"] { margin-left: 0 !important; }
.tmt-rte h2[style*="text-align"], .tmt-rte h3[style*="text-align"], .tmt-rte p[style*="text-align: center"][style*="font"] { text-align: left !important; }
.tmt-rte h2 { font-size: 26px; line-height: 1.25; }
.tmt-rte h3 { font-size: 20px; }
.tmt-rte a[style*="color"] { color: var(--color-seal-600) !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; }
.tmt-rte a[style*="color"]:hover { color: var(--color-seal-700) !important; }
.tmt-rte img { max-width: min(100%, 640px); height: auto; border-radius: 8px; }
.tmt-rte p { font-size: 16.5px; line-height: 1.7; }
.tmt-rte h2, .tmt-rte h2 *, .tmt-rte h3, .tmt-rte h3 * { text-decoration: none !important; }