/* ==========================================================================
   Trang chi tiết sản phẩm
   TỰ SINH — không sửa tay. Nguồn: figma mcp/css/sections/details.css
   Sinh lại bằng scratchpad/prefix_css.py (xem CLAUDE.md muc 8).
   Mọi selector đã được bọc trong `.tbtc-page` để không đụng CSS của
   Flatsome/WooCommerce, nhờ đó markup giữ nguyên tên class của prototype.
   ========================================================================== */

/* ==========================================================================
   Trang chi tiết sản phẩm — Figma node 218:4240 (1440 × 3740)
   ========================================================================== */

/* ==========================================================================
   Khối đầu trang — Figma 235:2183 (1440 × 715)
   ========================================================================== */

.tbtc-page .pdp-hero {
  background: linear-gradient(180deg, #f4f9ff 0%, var(--c-white) 100%);
}

.tbtc-page .pdp-hero__inner {
  max-width: var(--page-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tbtc-page .pdp-hero__grid {
  display: grid;
  /* Hai cột cứng 533 + 643 + khe 136 = 1312, vừa khít khổ 1440 và tràn ở mọi
     khổ hẹp hơn. Dùng fr theo đúng tỉ lệ đó: ở 1440 vẫn ra 533 và 643, khổ hẹp
     hơn thì hai cột co cùng nhịp. */
  grid-template-columns: minmax(0, 533fr) minmax(0, 643fr);
  gap: 136px;
  padding-block: var(--sp-12);
  align-items: center;
}

/* ---- Cột trái — Figma 218:8185 --------------------------------------- */

.tbtc-page .pdp-hero__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.tbtc-page .pdp-hero__eyebrow {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-orange);
}

.tbtc-page .pdp-hero__title {
  margin-top: var(--sp-6);
  font-size: var(--fs-display-2);
  line-height: var(--lh-display-2);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.tbtc-page .pdp-hero__rule {
  width: 87px;
  height: 2px;
  margin: 0;
  border: 0;
  background: var(--c-orange);
}

.tbtc-page .pdp-hero__desc {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--c-text);
}

.tbtc-page .pdp-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}

/* ==========================================================================
   Gallery ảnh — Figma 218:8167 (643 × 585)
   ========================================================================== */

.tbtc-page .pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Giữ tỉ lệ thay vì đóng cứng 481px — ở khổ 1440 cột rộng đúng 643 nên vẫn ra
   643×481 y như thiết kế, khổ hẹp hơn thì ảnh co theo cột. */
.tbtc-page .pdp-gallery__main {
  aspect-ratio: 643 / 481;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.tbtc-page .pdp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hàng ảnh nhỏ, hai nút điều hướng đè lên hai mép — Figma 218:8174 */
.tbtc-page .pdp-gallery__thumbs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 80px;
}

.tbtc-page .pdp-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: 1px solid var(--c-border-2);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

/* Chỉ nhắm đúng ảnh sản phẩm — `.pdp-thumb img` sẽ trúng cả nút play. */
.tbtc-page .pdp-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ảnh nhỏ dạng video có thêm nút play 32×32 — Figma 241:2286 */
.tbtc-page .pdp-thumb__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  z-index: 1;
}

/* Lớp phủ trắng 60% cho ảnh chưa chọn. Trong Figma lớp này nằm TRÊN cả nút
   play (thứ tự: ảnh → play → phủ), nên nút play cũng bị mờ theo. */
.tbtc-page .pdp-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  transition: opacity var(--dur) var(--ease);
}

.tbtc-page .pdp-thumb:hover::after {
  opacity: 0.4;
}

.tbtc-page .pdp-thumb[aria-current="true"] {
  border: 1.5px solid var(--c-orange);
}

.tbtc-page .pdp-thumb[aria-current="true"]::after {
  opacity: 0;
}

.tbtc-page .pdp-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: var(--r-pill);
  background: var(--c-blue);
  z-index: 2;
  transition: filter var(--dur) var(--ease);
}

.tbtc-page .pdp-gallery__nav img {
  width: 20px;
  height: 20px;
}

.tbtc-page .pdp-gallery__nav:hover {
  filter: brightness(1.1);
}

.tbtc-page .pdp-gallery__nav--prev {
  left: 16px;
}

.tbtc-page .pdp-gallery__nav--next {
  right: 16px;
}

/* ==========================================================================
   Thân trang: mục lục + nội dung — Figma 249:3687
   ========================================================================== */

.tbtc-page .pdp-body {
  border-top: 1px solid var(--c-border-2);
  margin-top: var(--sp-8);
  padding-top: 49px;
}

.tbtc-page .pdp-body__inner {
  max-width: var(--page-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tbtc-page .pdp-body__grid {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: var(--sp-6);
  align-items: start;
}

/* ---- Mục lục — Figma 241:2449 ---------------------------------------- */

.tbtc-page .pdp-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-right: var(--sp-6);
}

.tbtc-page .pdp-toc a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  height: 48px;
  border-bottom: 1px solid var(--c-border-2);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-desc);
  transition: color var(--dur) var(--ease);
}

/* Vạch cam chạy hết chiều rộng khi mục đang được xem */
.tbtc-page .pdp-toc a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--c-orange);
  transition: width var(--dur) var(--ease);
}

.tbtc-page .pdp-toc a:hover, .tbtc-page .pdp-toc a[aria-current="true"] {
  color: var(--c-text);
}

.tbtc-page .pdp-toc a[aria-current="true"]::after {
  width: 100%;
}

.tbtc-page .pdp-toc img {
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.tbtc-page .pdp-toc a:hover img, .tbtc-page .pdp-toc a[aria-current="true"] img {
  opacity: 1;
}

/* ---- Cột nội dung — Figma 241:2239 ----------------------------------- */

.tbtc-page .pdp-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  min-width: 0;
  padding-left: var(--sp-12);
  border-left: 1px solid var(--c-border-2);
}

.tbtc-page .pdp-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

.tbtc-page .pdp-section__title {
  font-size: var(--fs-display-2);
  line-height: var(--lh-display-2);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.tbtc-page .pdp-section__rule {
  width: 87px;
  height: 2px;
  margin: 0;
  border: 0;
  background: var(--c-orange);
}

.tbtc-page .pdp-section p, .tbtc-page .pdp-section li {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--c-text);
}

.tbtc-page .pdp-section ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-6);
  list-style: disc;
}

.tbtc-page .pdp-section ul li {
  list-style: inherit;
}

.tbtc-page .pdp-prose {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ---- Bảng thông số — Figma 241:2471 ---------------------------------- */

/* margin: 0 vì <dl> mặc định có margin 1em, làm khoảng cách với vạch cam
   phía trên rộng hơn thiết kế. */
.tbtc-page .spec-table {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
}

.tbtc-page .spec-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
}

.tbtc-page .spec-table__row dt, .tbtc-page .spec-table__row dd {
  margin: 0;
  padding: 12px var(--sp-4);
  background: #f7f7f7;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--c-text);
}

.tbtc-page .spec-table__row dt {
  font-weight: var(--fw-semibold);
}

.tbtc-page .spec-table__row dd {
  text-align: right;
}

/* ==========================================================================
   Sản phẩm tương tự — Figma 249:3423
   ========================================================================== */

.tbtc-page .pdp-similar {
  border-top: 1px solid var(--c-border-2);
  margin-top: var(--sp-20);
  padding-top: 81px;
  padding-bottom: var(--sp-20);
}

.tbtc-page .pdp-similar__inner {
  max-width: var(--page-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tbtc-page .pdp-similar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.tbtc-page .pdp-similar__title {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display-1);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}

.tbtc-page .pdp-similar__carousel {
  position: relative;
  margin-top: var(--sp-12);
}

.tbtc-page .pdp-similar .carousel-nav {
  top: 264px; /* nửa chiều cao card 528 */
}

.tbtc-page .pdp-similar__track {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-1);
}

.tbtc-page .pdp-similar__track::-webkit-scrollbar {
  display: none;
}

.tbtc-page .pdp-similar__track > * {
  scroll-snap-align: start;
}

/* ---- Responsive fallback --------------------------------------------- */

@media (max-width: 1439px) {
  .tbtc-page .pdp-similar .carousel-nav--prev {
    left: var(--sp-2);
  }

  .tbtc-page .pdp-similar .carousel-nav--next {
    right: var(--sp-2);
  }
}

@media (max-width: 1279px) {
  .tbtc-page .pdp-hero__inner, .tbtc-page .pdp-body__inner, .tbtc-page .pdp-similar__inner {
    padding-inline: var(--sp-6);
  }

  .tbtc-page .pdp-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .tbtc-page .pdp-hero__info, .tbtc-page .pdp-gallery {
    max-width: 643px;
  }

  .tbtc-page .pdp-gallery__main {
    height: auto;
    aspect-ratio: 643 / 481;
  }
}

@media (max-width: 991px) {
  .tbtc-page .pdp-body__grid {
    grid-template-columns: 1fr;
  }

  .tbtc-page .pdp-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    padding-right: 0;
  }

  .tbtc-page .pdp-toc a {
    flex: 1 1 200px;
  }

  .tbtc-page .pdp-content {
    padding-left: 0;
    border-left: 0;
  }

  /* Dải ảnh nhỏ rộng hơn cột chứa nó; không đặt min-width: 0 thì cột (ô
     grid) tự nới ra bằng min-content của dải ảnh và kéo cả trang tràn ngang. */
  .tbtc-page .pdp-gallery {
    min-width: 0;
  }

  .tbtc-page .pdp-gallery__thumbs {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .tbtc-page .pdp-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  .tbtc-page .pdp-gallery__nav {
    display: none;
  }
}

/* ==========================================================================
   Mobile — Figma "Details - Mobile" 414:2552 (393 × 4709)
   Dùng chung một bộ HTML với khổ desktop, chỉ khác CSS.
   Ảnh thiết kế có 56px thanh trạng thái iOS ở trên cùng; mọi toạ độ ghi
   trong comment dưới đây đã trừ phần đó ra.
   ========================================================================== */

@media (max-width: 767px) {
  /* ---- Đầu trang — Figma 414:2624 + 414:3057 ------------------------- */

  .tbtc-page .pdp-hero__inner {
    padding-inline: var(--gutter);
  }

  /* Breadcrumb chừa 16px, khối tiêu đề cách thêm 24px nữa — Figma 414:3059 */
  .tbtc-page .pdp-hero__grid {
    padding-block: var(--sp-6) 0;
    gap: var(--sp-8);
  }

  .tbtc-page .pdp-hero__info {
    gap: var(--sp-6);
  }

  .tbtc-page .pdp-hero__title {
    margin-top: var(--sp-4);
    font-size: var(--fs-display-3);
    line-height: var(--lh-display-3);
  }

  .tbtc-page .pdp-hero__desc {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* Hai nút xếp dọc, vẫn ôm sát nội dung — Figma 414:3064 (353 × 104) */
  .tbtc-page .pdp-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }

  /* Cả hai nút cao 44px thay vì 48px của khổ desktop */
  .tbtc-page .pdp-hero__actions .btn--outline {
    padding: 9px var(--sp-4);
  }

  .tbtc-page .pdp-hero__actions .btn--soft {
    padding: 10px var(--sp-4);
  }

  /* ---- Gallery ảnh — Figma 414:3082 (353 × 336) ---------------------- */

  .tbtc-page .pdp-gallery {
    gap: var(--sp-4);
  }

  .tbtc-page .pdp-gallery__main {
    border-radius: var(--r-md);
  }

  /* Dải ảnh nhỏ tràn ra sát hai mép màn hình rồi cuộn ngang — thiết kế cắt
     ảnh thứ sáu ở mép phải. Nút điều hướng đã bị ẩn từ mốc 991px. */
  .tbtc-page .pdp-gallery__thumbs {
    height: 56px;
    gap: var(--sp-2);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }

  .tbtc-page .pdp-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
  }

  .tbtc-page .pdp-thumb__play {
    width: 24px;
    height: 24px;
  }

  /* ---- Thân trang — Figma 414:3631 + 414:4167 ------------------------ */

  .tbtc-page .pdp-body {
    border-top: 0;
    margin-top: var(--sp-12);
    padding-top: 0;
  }

  .tbtc-page .pdp-body__inner {
    padding-inline: 0;
  }

  /* Bỏ grid để thanh mục lục dính được: trong lưới một cột, mỗi ô chỉ cao
     bằng chính nó nên position:sticky sẽ không có chỗ để chạy. */
  .tbtc-page .pdp-body__grid {
    display: block;
  }

  /* Mục lục thành một thanh trắng tràn hết bề ngang, dính ngay dưới header
     và cuộn ngang được — Figma 414:3387 (393 × 48). */
  .tbtc-page .pdp-toc {
    position: sticky;
    top: var(--header-h);
    z-index: 50;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-border-2);
  }

  .tbtc-page .pdp-toc::-webkit-scrollbar {
    display: none;
  }

  /* Vạch xám chạy suốt thanh nay là border của thanh, nên mục không tự kẻ
     nữa — nếu không sẽ thành hai nét chồng lên nhau. Vạch cam của mục đang
     xem vẫn do ::after vẽ, đè đúng lên vạch xám. */
  .tbtc-page .pdp-toc a {
    flex: 0 0 auto;
    height: 47px;
    border-bottom: 0;
    white-space: nowrap;
  }

  /* Thiết kế mobile tắt mũi tên ở cuối mỗi mục */
  .tbtc-page .pdp-toc img {
    display: none;
  }

  .tbtc-page .pdp-content {
    gap: var(--sp-8);
    padding-inline: var(--gutter);
  }

  /* Chừa chỗ cho cả header lẫn thanh mục lục dính khi nhảy tới neo */
  .tbtc-page .pdp-section {
    gap: var(--sp-4);
    scroll-margin-top: calc(var(--header-h) + 48px + var(--sp-4));
  }

  .tbtc-page .pdp-section__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }

  .tbtc-page .pdp-section__rule {
    width: 48px;
  }

  .tbtc-page .pdp-section p, .tbtc-page .pdp-section li {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* ---- Bảng thông số — Figma 414:3658 -------------------------------- */
  /* Vẫn giữ hai cột như desktop, chỉ thu lề và canh giữa theo chiều dọc. */

  .tbtc-page .spec-table__row dt, .tbtc-page .spec-table__row dd {
    display: flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .tbtc-page .spec-table__row dd {
    justify-content: flex-end;
  }

  /* ---- Sản phẩm tương tự — Figma 414:4004 (393 × 669) ---------------- */
  /* Thiết kế đưa nút "xem tất cả" xuống dưới cùng thay vì đứng cạnh tiêu đề.
     Cho .pdp-similar__head thành display:contents để tiêu đề và nút trở
     thành hai phần tử con trực tiếp của __inner rồi sắp lại bằng order —
     không phải đụng vào HTML. */

  .tbtc-page .pdp-similar {
    border-top: 0;
    margin-top: var(--sp-12);
    padding-top: 0;
    padding-bottom: var(--sp-12);
  }

  /* Vạch ngăn ở mobile thụt vào 20px mỗi bên chứ không tràn hết bề ngang */
  .tbtc-page .pdp-similar__inner {
    display: flex;
    flex-direction: column;
    margin-inline: var(--gutter);
    padding-inline: 0;
    padding-top: var(--sp-12);
    border-top: 1px solid var(--c-border-2);
  }

  .tbtc-page .pdp-similar__head {
    display: contents;
  }

  .tbtc-page .pdp-similar__title {
    order: 1;
    font-size: var(--fs-display-3);
    line-height: var(--lh-display-3);
    color: var(--c-text); /* mobile dùng màu chữ thường, không phải navy */
  }

  .tbtc-page .pdp-similar__carousel {
    order: 2;
    margin-top: var(--sp-8);
  }

  .tbtc-page .pdp-similar .carousel-dots {
    order: 3;
    margin-top: var(--sp-6);
  }

  .tbtc-page .pdp-similar__head .btn {
    order: 4;
    align-self: center;
    margin-top: var(--sp-8);
    padding: 9px var(--sp-4);
  }

  .tbtc-page .pdp-similar .carousel-nav {
    display: none;
  }

  /* Băng chuyền tràn ra sát hai mép, card đầu vẫn thẳng hàng với tiêu đề.
     scroll-padding là bắt buộc: không có nó, scroll-snap kéo card đầu về
     sát mép trái và ăn mất đúng phần padding vừa thêm. */
  .tbtc-page .pdp-similar__track {
    gap: var(--sp-4);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}