/* ThisDecal — CSS trang chi tiết sản phẩm /san-pham/{slug} */

/* Breadcrumb bar (giống products.css — trang này không nạp products.css nên khai báo lại) */
.td-breadcrumb-bar {
  background: var(--td-bg-alt);
  border-bottom: 1px solid var(--td-border);
}
.td-breadcrumb-bar .td-container { padding-block: 13px; }
.td-breadcrumb__sep { color: var(--td-dim); margin-inline: 6px; }
.td-breadcrumb__current { color: var(--td-text); }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.td-detail { padding-top: 32px; }

.td-gallery { position: sticky; top: 150px; }
@media (max-width: 991.98px) {
  .td-gallery { position: static; }
}

.td-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  border: 1px solid var(--td-border);
  border-radius: 14px;
  overflow: hidden;
}
.td-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.td-gallery__off {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--td-price);
  color: #fff;
  font-family: var(--td-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 7px 22px 7px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.td-gallery__sku {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--td-accent);
  color: var(--td-ink);
  font-family: var(--td-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 7px 16px 7px 26px;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}

.td-gallery__thumb {
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  border: 2px solid var(--td-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s ease;
}
.td-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-gallery__thumb:hover,
.td-gallery__thumb.is-active { border-color: var(--td-accent-text); }

/* --------------------------------------------------------------------------
   Thông tin sản phẩm
   -------------------------------------------------------------------------- */
.td-detail__title { font-size: 30px; color: var(--td-text); margin-top: 4px; }
.td-detail__meta { font-size: 14px; color: var(--td-muted); }
.td-detail__meta-strong { color: var(--td-text); font-weight: 600; }
.td-detail__dot { color: var(--td-dim); }
.td-detail__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--td-success);
  font-weight: 600;
}
.td-detail__stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--td-success);
}

/* Hộp giá */
.td-price-box {
  padding: 16px 20px;
  background: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-left: 3px solid var(--td-accent);
  border-radius: 10px;
}
.td-price-box__price {
  font-family: var(--td-font-heading);
  font-size: 34px;
  font-weight: 700;
  color: var(--td-accent-text);
}
.td-price-box__compare { font-size: 16px; color: #868686; text-decoration: line-through; }
.td-price-box__off {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--td-price);
  padding: 3px 10px;
  border-radius: 20px;
}
.td-price-box__save {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--td-success);
}

/* Chuẩn form */
.td-fitment {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  background: rgba(62, 207, 142, .09);
  border: 1px solid rgba(62, 207, 142, .35);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--td-text);
}
.td-fitment svg { flex: 0 0 auto; }
.td-fitment__hl { color: #157a4b; }

/* Nhãn tuỳ chọn */
.td-opt-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 10px;
}
.td-opt-label__val { color: var(--td-accent-text); }

/* Tuỳ chọn loại tem */
.td-variant {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 20px;
  background: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-radius: 8px;
  color: var(--td-text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.td-variant:hover { border-color: var(--td-accent-text); }
.td-variant__label { font-weight: 700; }
.td-variant__price { font-size: 12px; color: var(--td-muted); }
.td-variant.is-active {
  background: var(--td-accent-soft);
  border-color: var(--td-accent-text);
  color: var(--td-accent-text);
}

/* Swatch màu */
.td-swatch {
  padding: 3px;
  background: transparent;
  border: 2px solid var(--td-border-light);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s ease;
}
.td-swatch:hover,
.td-swatch.is-active { border-color: var(--td-accent-text); }
.td-swatch__dot { display: block; width: 30px; height: 30px; border-radius: 50%; }
.td-swatch__dot--red-white { background: linear-gradient(135deg, #c0392b 50%, #fff 50%); }
.td-swatch__dot--black-orange { background: linear-gradient(135deg, #141414 50%, #e67e22 50%); }
.td-swatch__dot--blue-white { background: linear-gradient(135deg, #1d47b8 50%, #fff 50%); }

/* Số lượng */
.td-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--td-border);
  border-radius: 6px;
  overflow: hidden;
}
.td-qty__btn {
  width: 44px;
  background: var(--td-bg-alt);
  color: var(--td-text);
  border: 0;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.td-qty__btn:hover { color: var(--td-accent-text); }
.td-qty__val {
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--td-bg);
  font-weight: 700;
  font-size: 16px;
  border-inline: 1px solid var(--td-border);
}

.td-detail__action { min-width: 170px; flex: 1 1 0; }

/* Thông báo đã thêm giỏ */
.td-added {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(62, 207, 142, .12);
  border: 1px solid rgba(62, 207, 142, .4);
  border-radius: 6px;
  color: var(--td-success);
  font-size: 13px;
  font-weight: 600;
}
.td-added[hidden] { display: none; }
.td-added a { color: var(--td-accent-text); text-decoration: underline; }

/* Cam kết */
.td-detail__commits {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--td-border);
}
.td-commit {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--td-muted);
}
.td-commit svg { flex: 0 0 auto; }

/* Card Zalo */
.td-zalo-card {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  background: #efefef;
  border-radius: 8px;
  color: var(--td-text);
  font-size: 13.5px;
}
.td-zalo-card__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--td-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.td-zalo-card__txt { flex: 1; }

/* --------------------------------------------------------------------------
   Accordion chi tiết (tiêu đề Oswald)
   -------------------------------------------------------------------------- */
.td-detail__acc-wrap { margin-top: 44px; }
.td-detail-acc .accordion-button {
  font-family: var(--td-font-heading);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.td-detail-acc .accordion-body { max-width: 80ch; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Sản phẩm cùng loại (band tối)
   -------------------------------------------------------------------------- */
.td-related {
  margin-top: 56px;
  padding-block: 42px;
  background: var(--td-bg-alt);
  border-top: 1px solid var(--td-border);
}

/* --------------------------------------------------------------------------
   Đánh giá
   -------------------------------------------------------------------------- */
.td-rating-panel {
  padding: 22px 28px;
  background: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-radius: 14px;
}
.td-rating-panel__score { padding-right: 28px; border-right: 1px solid var(--td-border); }
.td-rating-panel__num {
  font-family: var(--td-font-heading);
  font-size: 46px;
  font-weight: 700;
  color: var(--td-accent-text);
  line-height: 1;
}
.td-rating-panel__stars { font-size: 14px; letter-spacing: 2px; margin-top: 6px; }
.td-rating-panel__count { color: var(--td-muted); font-size: 12.5px; margin-top: 5px; }
.td-rating-panel__bars {
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.td-rate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--td-muted);
}
.td-rate-row__star { width: 22px; }
.td-rate-row__pct { width: 34px; text-align: right; }
.td-rate-bar {
  flex: 1;
  height: 7px;
  background: var(--td-border);
  border-radius: 99px;
  overflow: hidden;
}
.td-rate-bar__fill {
  display: block;
  height: 100%;
  background: var(--td-accent);
  border-radius: 99px;
}
.td-rate-bar__fill--94 { width: 94%; }
.td-rate-bar__fill--5 { width: 5%; }
.td-rate-bar__fill--1 { width: 1%; }
.td-rating-panel__stat {
  font-family: var(--td-font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--td-text);
}
.td-rating-panel__label { font-size: 12px; color: var(--td-muted); }

/* Card đánh giá */
.td-review-card { padding: 20px; border-radius: 14px; }
.td-review-card__avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #efefef;
  color: var(--td-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 0 0 2px rgba(252, 185, 21, .3);
}
.td-review-card__author { font-size: 14px; font-weight: 600; }
.td-review-card__stars { font-size: 11px; letter-spacing: .5px; }
.td-review-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--td-success);
  background: rgba(62, 207, 142, .12);
  padding: 3px 9px;
  border-radius: 20px;
}
.td-review-card__content {
  margin: 0 0 12px;
  font-size: 14px;
  color: #c9c9c9;
  line-height: 1.6;
}
.td-review-card__photo {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f4f4;
  display: inline-block;
}
.td-review-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.td-review-card__meta { font-size: 12px; color: var(--td-dim); }

/* Nút viền xám */
.td-btn-ghost {
  padding: 13px 30px;
  background: transparent;
  border: 1px solid var(--td-border);
  color: var(--td-text);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.td-btn-ghost:hover { border-color: var(--td-accent-text); color: var(--td-accent-text); }


/* Form gửi đánh giá */
.td-review-form { padding: 24px; }
.td-review-form__title { font-size: 18px; margin-bottom: 16px; }
.td-review-form .td-input { background: var(--td-surface-2); border: 1px solid var(--td-border); border-radius: 8px; padding: 10px 14px; color: var(--td-text); font-family: inherit; font-size: 14px; }
.td-review-form .td-input:focus { outline: none; border-color: var(--td-accent-text); }
.td-review-form__hint { margin-left: 12px; color: var(--td-dim); font-size: 12.5px; }

/* Swatch biến thể có ảnh thật (thay dot màu) */
.td-swatch__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* Trạng thái hết hàng + chưa có đánh giá */
.td-detail__stock--out { color: var(--td-price); }
.td-detail__stock--out .td-detail__stock-dot { background: var(--td-price); }
.td-detail__no-review { color: var(--td-muted); }
.td-btn-outline:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   Hero poster — chữ display khổng lồ (Oswald) phía sau, ảnh sản phẩm nổi đè
   lên, hàng 3 thông số + 3 pill anchor. Nền tối vignette.
   ========================================================================== */
.td-poster {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px) 16px clamp(28px, 3.5vw, 48px);
  background:
    radial-gradient(120% 90% at 50% 0%, #1c1a16 0%, #0b0b0b 55%, #0a0a0a 100%);
  border-bottom: 1px solid var(--td-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Chữ khổng lồ phía sau */
.td-poster__word {
  position: absolute;
  top: clamp(8px, 1.5vw, 24px);
  left: 0;
  right: 0;
  font-family: var(--td-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(52px, 9.5vw, 150px);
  line-height: .9;
  letter-spacing: 1px;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, #FFB22C 0%, rgba(255, 178, 44, .35) 78%, rgba(255, 178, 44, .05) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}
/* Ảnh sản phẩm nổi đè lên chữ */
.td-poster__img {
  position: relative;
  z-index: 1;
  margin-top: clamp(48px, 7vw, 120px);
  width: min(560px, 86vw);
  border-radius: 14px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}
/* Hàng 3 thông số */
.td-poster__stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(28px, 6vw, 72px);
  margin-top: clamp(22px, 3vw, 36px);
  flex-wrap: wrap;
  justify-content: center;
}
.td-poster__stat { display: flex; flex-direction: column; gap: 3px; }
.td-poster__stat strong {
  font-family: var(--td-font-heading);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.td-poster__stat span { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
/* 3 pill anchor */
.td-poster__anchors {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  margin-top: clamp(20px, 2.6vw, 30px);
  flex-wrap: wrap;
  justify-content: center;
}
.td-poster__anchor {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.td-poster__anchor:hover {
  border-color: #FFB22C;
  color: #FFB22C;
  background: rgba(255, 178, 44, .12);
}
/* Mobile: chữ được phép xuống dòng, ảnh sát chữ hơn */
@media (max-width: 767.98px) {
  .td-poster__word { white-space: normal; font-size: clamp(44px, 15vw, 72px); }
  .td-poster__img { margin-top: 40px; }
}