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

/* ==========================================================================
   Danh mục sản phẩm — Figma node 19:1206 (1440 × 862)
   ========================================================================== */

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

/* ---- Lớp nền trang trí (Figma 19:1207) -------------------------------- */

.tbtc-page .categories__gradient {
  position: absolute;
  left: -186px;
  top: 58px;
  width: 1804px;
  height: 920px;
  background: url("../../images/gradient-soft.svg") no-repeat center /
    100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* Logo mờ làm hoạ tiết chìm — Figma 19:2341, opacity 3%, blur 6px */
.tbtc-page .categories__watermark {
  position: absolute;
  left: -237px;
  top: calc(50% + 221px);
  transform: translateY(-50%);
  width: 595px;
  height: 582px;
  opacity: 0.03;
  filter: blur(6px);
  mix-blend-mode: multiply;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}

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

/* ---- Tab lọc (Figma 152:919) ----------------------------------------- */

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

/* ---- Lưới card (Figma 19:2361) --------------------------------------- */

.tbtc-page .categories__grid {
  display: flex;
  gap: var(--sp-6);
  margin-top: 30px;
}

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

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

  .tbtc-page .categories__grid {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ==========================================================================
   Mobile — Figma 371:2299 (393 × 673)
   Tab lọc và lưới card đều thành dải ngang cuộn được, tràn qua mép phải
   đúng như thiết kế.
   ========================================================================== */

@media (max-width: 767px) {
  .tbtc-page .categories {
    padding-block: var(--sp-12); /* 48px trên và dưới — Figma top 48 */
  }

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

  /* Cụm tiêu đề vẫn trong lề 20px, còn dải cuộn thì tràn ra sát mép */
  .tbtc-page .categories__inner > .section-head {
    padding-inline: var(--gutter);
  }

  .tbtc-page .categories__tabs {
    margin-top: var(--sp-6);
    padding-inline: var(--gutter);
  }

  /* 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 .categories__grid {
    margin-top: var(--sp-4);
    gap: var(--sp-4);
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

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

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

  /* Hoạ tiết nền thu nhỏ theo khổ máy, không để sinh cuộn ngang cả trang */
  .tbtc-page .categories__gradient {
    left: -50%;
    top: 6px;
    width: 200%;
    height: 636px;
  }

  .tbtc-page .categories__watermark {
    left: -160px;
    top: calc(50% + 191px);
    width: 397px;
    height: 389px;
  }
}