/* ==========================================================================
   Section featured — element trang chủ
   TỰ SINH — không sửa tay. Nguồn: figma mcp/css/sections/featured.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.
   ========================================================================== */

/* ==========================================================================
   Sản phẩm nổi bật — Figma node 46:1380 (1440 × 1078)
   ========================================================================== */

.tbtc-page .featured {
  position: relative;
  padding-block: var(--sp-20);
  overflow: hidden;
  background: linear-gradient(180deg, var(--c-white) 0%, #f4f9ff 100%);
}

/* Vệt sáng mờ phía sau — Figma 46:1383 (blur 283) */
.tbtc-page .featured__glow {
  position: absolute;
  left: -186px;
  top: 58px;
  width: 1804px;
  height: 920px;
  background: url("../../images/gradient-soft.svg") no-repeat center /
    100% 100%;
  filter: blur(120px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.tbtc-page .featured__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tbtc-page .featured__tabs {
  margin-top: var(--sp-12);
}

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

.tbtc-page .featured__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 .featured__track::-webkit-scrollbar {
  display: none;
}

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

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

.tbtc-page .featured__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-10);
}

/* .btn--outline, .card-featured và .spec-list nay nằm trong components.css
   vì trang chi tiết sản phẩm cũng dùng. */

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

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

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

@media (max-width: 1279px) {
  .tbtc-page .featured__inner {
    padding-inline: var(--sp-6);
  }
}

/* ==========================================================================
   Mobile — Figma 397:3652 (393 × 805)
   Card thu còn 277×391 — phần đó nằm trong components.css cùng chỗ với bản
   desktop, vì trang chi tiết sản phẩm cũng dùng. Ở đây chỉ còn bố cục
   section: điều hướng băng chuyền rút lại chỉ còn chấm tròn.
   ========================================================================== */

@media (max-width: 767px) {
  .tbtc-page .featured {
    padding-block: var(--sp-12);
  }

  .tbtc-page .featured__inner {
    padding-inline: 0;
  }

  .tbtc-page .featured__inner > .section-head, .tbtc-page .featured__tabs, .tbtc-page .featured__footer {
    padding-inline: var(--gutter);
  }

  .tbtc-page .featured__tabs {
    margin-top: var(--sp-6);
  }

  .tbtc-page .featured__carousel {
    margin-top: var(--sp-5);
  }

  /* 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 .featured__track {
    gap: var(--sp-4);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

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

  .tbtc-page .featured .carousel-dots {
    margin-top: var(--sp-6);
  }

  .tbtc-page .featured__footer {
    margin-top: var(--sp-8);
  }
}