/* ==========================================================================
   Trang danh mục sản phẩm
   TỰ SINH — không sửa tay. Nguồn: figma mcp/css/sections/catalog.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 danh mục sản phẩm — Figma node 249:3945 (1440 × 2119)
   ========================================================================== */

.tbtc-page .catalog {
  position: relative;
  background: var(--c-white);
}

/* ---- Nền trang trí — Figma 292:2199 ----------------------------------- */

.tbtc-page .catalog__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 810px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.tbtc-page .catalog__bg::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 862px;
  background: linear-gradient(180deg, var(--c-white) 0%, #f4f9ff 100%);
}

/* Cụm 4 khối elip nhoè — Figma 292:2201 (group blur 283.6, opacity 80%) */
.tbtc-page .catalog__blobs {
  position: absolute;
  left: -186px;
  top: 58px;
  width: 1804px;
  height: 920px;
  opacity: 0.8;
  filter: blur(283.6px);
}

.tbtc-page .catalog__blobs span {
  position: absolute;
  border-radius: 50%;
}

.tbtc-page .catalog__blobs span:nth-child(1) {
  left: 315px;
  top: 28px;
  width: 813px;
  height: 623px;
  background: var(--c-white);
}

.tbtc-page .catalog__blobs span:nth-child(2) {
  left: 0;
  top: 352px;
  width: 741px;
  height: 568px;
  background: var(--c-white);
}

.tbtc-page .catalog__blobs span:nth-child(3) {
  left: 305px;
  top: 226px;
  width: 741px;
  height: 510px;
  background: rgba(255, 107, 0, 0.1);
}

.tbtc-page .catalog__blobs span:nth-child(4) {
  left: 760px;
  top: 0;
  width: 1044px;
  height: 856px;
  background: rgba(0, 86, 214, 0.06);
}

/* Logo chìm — Figma 292:2206 */
.tbtc-page .catalog__watermark {
  position: absolute;
  left: -237px;
  top: 291px;
  width: 595px;
  height: 582px;
  opacity: 0.03;
  filter: blur(12px);
  object-fit: contain;
}

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

/* ---- Tiêu đề trang — Figma 278:2948 ----------------------------------- */

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

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

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

/* ---- Bố cục 2 cột ----------------------------------------------------- */

.tbtc-page .catalog__body {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 49px;
  margin-top: 58px;
  padding-bottom: var(--sp-20);
  align-items: start;
}

/* ==========================================================================
   Sidebar lọc — Figma 292:2196
   ========================================================================== */

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

.tbtc-page .filter-box {
  padding: var(--sp-6);
  background: var(--c-white);
  border-radius: var(--r-lg);
}

.tbtc-page .filter-box__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.tbtc-page .filter-box__rule {
  width: 48px;
  height: 2px;
  margin: var(--sp-4) 0 0;
  border: 0;
  background: var(--c-orange);
}

.tbtc-page .filter-box__list {
  margin-top: 18px;
}

.tbtc-page .filter-box__list li + li {
  border-top: 1px solid var(--c-border);
}

.tbtc-page .filter-box__list a {
  display: block;
  padding-block: var(--sp-3);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-medium);
  color: var(--c-desc);
  transition: color var(--dur) var(--ease);
}

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

/* ==========================================================================
   Cột nội dung
   ========================================================================== */

.tbtc-page .catalog__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  min-width: 0;
}

/* ---- Banner đầu cột — Figma 274:1997 ---------------------------------- */

.tbtc-page .catalog__banner {
  position: relative;
  height: 250px;
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* <picture> mặc định là inline — ép về block để ảnh lấp đúng khung ở những khổ
   mà ảnh trở lại position: static (từ 991px xuống). */
.tbtc-page .catalog__banner picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ảnh gốc 1440×347 đặt lệch đúng toạ độ Figma */
.tbtc-page .catalog__banner img {
  position: absolute;
  left: -255px;
  top: -49px;
  width: 1440px;
  height: 347px;
  max-width: none;
  object-fit: cover;
}

/* ---- Thanh đếm + sắp xếp — Figma 274:2028 ---------------------------- */

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

/* Hàng "số sản phẩm + nút lọc". Ở desktop hàng này chỉ chứa con số nên nó
   trong suốt về bố cục, .catalog__toolbar vẫn xếp y như trước khi có nút. */
.tbtc-page .catalog__toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-width: 0;
}

/* Nút mở panel lọc — chỉ có trong thiết kế mobile (Figma 405:4403) */
.tbtc-page .catalog__filter-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}

.tbtc-page .catalog__filter-toggle img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tbtc-page .catalog__filter-toggle:hover {
  color: var(--c-blue);
}

.tbtc-page .catalog__count {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.tbtc-page .catalog__count b {
  color: var(--c-blue);
  font-weight: inherit;
}

.tbtc-page .catalog__sort {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
}

.tbtc-page .select-field {
  position: relative;
  width: 182px;
}

.tbtc-page .select-field select {
  width: 100%;
  padding: 8px 40px 8px 12px;
  background: var(--c-white);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-desc);
  appearance: none;
  cursor: pointer;
}

.tbtc-page .select-field img {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.5;
  pointer-events: none;
}

/* ---- Lưới sản phẩm — Figma 268:2215 ---------------------------------- */

.tbtc-page .catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

/* ---- Card 305×405 — Figma 296:2599 ----------------------------------- */

.tbtc-page .card-catalog {
  position: relative;
  display: block;
  height: 405px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.tbtc-page .card-catalog:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-hover);
}

/* Hai card chỉ có ở khổ mobile — xem chú thích trong products.html */
.tbtc-page .card-catalog--m {
  display: none;
}

.tbtc-page .card-catalog__media {
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 229px;
  overflow: hidden;
}

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

/* Nhãn trạng thái thu nhỏ (Figma scale 0.72 so với bản trang chủ) */
.tbtc-page .card-catalog__status {
  position: absolute;
  left: 9px;
  top: 9px;
  z-index: 1;
  padding: 4px 7px;
  border: 1px solid var(--c-blue);
  border-radius: 4px;
  background: linear-gradient(0deg, rgba(0, 86, 214, 0.05), rgba(0, 86, 214, 0.05)), var(--c-white);
  font-size: 9px;
  line-height: 13px;
  font-weight: var(--fw-semibold);
  color: var(--c-blue);
}

.tbtc-page .card-catalog__head {
  position: absolute;
  left: 16px;
  top: 245px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tbtc-page .card-catalog__category {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-medium);
  color: var(--c-orange);
}

.tbtc-page .card-catalog__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
}

.tbtc-page .card-catalog__specs {
  position: absolute;
  left: 16px;
  top: 315px;
  right: 16px;
  display: flex;
  gap: var(--sp-2);
}

.tbtc-page .card-catalog__specs li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  padding-right: var(--sp-2);
  border-right: 1px solid var(--c-border);
}

.tbtc-page .card-catalog__specs li:last-child {
  border-right: 0;
  padding-right: 0;
}

.tbtc-page .card-catalog__spec-label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-desc);
  white-space: nowrap;
}

.tbtc-page .card-catalog__spec-value {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  white-space: nowrap;
}

.tbtc-page .card-catalog__link {
  position: absolute;
  left: 16px;
  bottom: 16px;
}

/* ---- Nút xem thêm — Figma 300:3239 ----------------------------------- */

.tbtc-page .catalog__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-inline: auto;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  transition: color var(--dur) var(--ease);
}

.tbtc-page .catalog__more img {
  width: 24px;
  height: 24px;
  transition: transform var(--dur) var(--ease);
}

.tbtc-page .catalog__more:hover {
  color: var(--c-blue);
}

.tbtc-page .catalog__more:hover img {
  transform: translateY(2px);
}

/* Số sản phẩm còn lại khác nhau giữa hai khổ — xem chú thích trong products.html */
.tbtc-page .catalog__more-m {
  display: none;
}

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

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

  .tbtc-page .catalog__body {
    grid-template-columns: 280px 1fr;
    gap: var(--sp-8);
  }

  .tbtc-page .catalog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .tbtc-page .filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .tbtc-page .catalog__banner {
    height: 200px;
  }

  .tbtc-page .catalog__banner img {
    position: static;
    width: 100%;
    height: 100%;
  }
}

/* ==========================================================================
   Mobile — Figma 404:2252 "Products - Mobile" (393 × 2892)
   Một cột: breadcrumb → tiêu đề → banner 353×120 → thanh đếm + nút lọc + ô
   sắp xếp → lưới 8 card 2 cột → nút xem thêm. Sidebar lọc không còn, thu vào
   sau nút "Bộ lọc". Footer dùng lại khối mobile của trang chủ (430:3137).
   ========================================================================== */

@media (max-width: 767px) {
  /* Trả lại lề 20px mà dải fallback 1279px đã đổi thành 24px */
  .tbtc-page .catalog__inner {
    padding-inline: var(--gutter);
  }

  /* ---- Nền trang trí — Figma 404:3762 (393 × 852) ---------------------- */

  .tbtc-page .catalog__bg, .tbtc-page .catalog__bg::before {
    height: 852px;
  }

  /* Cụm elip ở mobile có bố cục riêng, không phải bản thu nhỏ của desktop.
     Độ nhoè vẫn 283.6px như desktop — suy ra từ vùng tràn của ảnh Figma xuất
     (915.91 × 30.96% = 283.6). */
  .tbtc-page .catalog__blobs {
    left: -261px;
    top: 0;
    width: 916px;
    height: 636px;
  }

  /* Figma ghi toạ độ elip theo gốc frame Background, mà khung elip đặt tại
     x=-261, nên các số dưới đây đã trừ đi -261 để về gốc khung. */
  .tbtc-page .catalog__blobs span:nth-child(1) {
    left: 97px;
    top: 39px;
    width: 513px;
    height: 394px;
  }

  .tbtc-page .catalog__blobs span:nth-child(2) {
    left: 0;
    top: 278px;
    width: 468px;
    height: 358px;
  }

  .tbtc-page .catalog__blobs span:nth-child(3) {
    left: 79px;
    top: 160px;
    width: 468px;
    height: 322px;
  }

  .tbtc-page .catalog__blobs span:nth-child(4) {
    left: 257px;
    top: 166px;
    width: 659px;
    height: 541px;
  }

  /* Figma 404:3769 — nhoè 6px và blend multiply, khác desktop (12px, không blend) */
  .tbtc-page .catalog__watermark {
    left: -160px;
    top: 500px;
    width: 397px;
    height: 389px;
    filter: blur(6px);
    mix-blend-mode: multiply;
  }

  /* ---- Tiêu đề trang — Figma 404:3747 --------------------------------- */
  /* Breadcrumb (404:3741) dùng rule chung trong components.css vì thiết kế
     mobile của trang chi tiết cũng để lề trên dưới 16px. */

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

  .tbtc-page .catalog__title {
    font-size: var(--fs-display-3);
    line-height: var(--lh-display-3);
  }

  /* ---- Thân trang: một cột ------------------------------------------- */
  /* display: contents nâng banner / toolbar / lưới / nút lên làm con trực tiếp
     của .catalog__body, nhờ vậy panel lọc — vốn là anh em của .catalog__content
     — xen được vào giữa chúng mà không phải đổi cấu trúc HTML. Thứ tự hiển thị
     do order quyết định: banner 1, toolbar 2, panel lọc 3, lưới 4, nút 5.
     Thứ tự DOM vẫn để panel lọc trước, giống thứ tự đọc ở khổ desktop. */
  .tbtc-page .catalog__body {
    display: flex;
    flex-direction: column;
    /* Bắt buộc ghi đè: khối desktop đặt align-items: start cho lưới 2 cột, để
       nguyên thì ở flex column mọi khối co lại theo nội dung thay vì trải hết
       bề ngang (lưới card tụt còn 16px). */
    align-items: stretch;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
    padding-bottom: var(--sp-12);
  }

  .tbtc-page .catalog__content {
    display: contents;
  }

  /* ---- Banner — Figma 404:4272 (353 × 120) ---------------------------- */

  .tbtc-page .catalog__banner {
    order: 1;
    height: 120px;
    border-radius: var(--r-md);
  }

  /* ---- Thanh đếm + sắp xếp — Figma 405:4400 --------------------------- */

  .tbtc-page .catalog__toolbar {
    order: 2;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
  }

  .tbtc-page .catalog__count {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  .tbtc-page .catalog__filter-toggle {
    display: inline-flex;
    height: 28px; /* Figma 405:4403 — cao bằng dòng số bên cạnh */
  }

  /* Thiết kế mobile lược bỏ nhãn "Sắp xếp:" (Figma 405:4440 visible=false) */
  .tbtc-page .catalog__sort label {
    display: none;
  }

  .tbtc-page .select-field {
    width: 100%;
  }

  /* Ô cao đúng 40px — Figma 405:4436. Thiết kế ghi padding dọc 10px nhưng chưa
     tính viền 1px, để 10px thì ô ra 42px, nên lấy 9px. */
  .tbtc-page .select-field select {
    padding: 9px 40px 9px 12px;
    color: var(--c-text);
  }

  /* ---- Panel lọc thu gọn --------------------------------------------- */
  /* Thiết kế mobile không có sidebar và cũng không vẽ trạng thái mở của nút
     "Bộ lọc", nên phần đóng/mở dưới đây được thêm vào, dùng lại đúng lối của
     menu mobile trong header.css: đổi display theo class .is-open. */

  .tbtc-page .filter-panel {
    order: 3;
    display: none;
  }

  .tbtc-page .filter-panel.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .tbtc-page .filter-box {
    padding: var(--sp-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
  }

  /* ---- Lưới 8 card, 2 cột — Figma 404:4063 (gap 12 cả hai chiều) ------ */

  .tbtc-page .catalog__grid {
    order: 4;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

  .tbtc-page .card-catalog--m {
    display: block;
  }

  /* ---- Card 170.5×262 — Figma 404:4064 ------------------------------- */
  /* Toạ độ con lấy theo padding box (trong đường viền 1px) đúng như Figma xuất:
     left 11 ở đây = x=12 tính từ mép ngoài card. */

  .tbtc-page .card-catalog {
    height: 262px;
    border-radius: var(--r-md);
  }

  .tbtc-page .card-catalog__media {
    height: 128px;
  }

  .tbtc-page .card-catalog__head {
    left: 11px;
    top: 139px;
    right: auto;
    width: 147px;
    gap: var(--sp-1);
  }

  /* Khung tiêu đề chỉ cao 48px (Figma 404:4067) mà link neo tuyệt đối ở đáy
     card — tiêu đề sang dòng thứ ba sẽ đè lên link, nên chặn ở hai dòng. */
  .tbtc-page .card-catalog__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
  }

  /* Thiết kế mobile ẩn bảng thông số (Figma 406:2559 visible=false) */
  .tbtc-page .card-catalog__specs {
    display: none;
  }

  .tbtc-page .card-catalog__link {
    left: 11px;
    bottom: 15px;
  }

  /* ---- Nút xem thêm — Figma 404:4208 --------------------------------- */

  .tbtc-page .catalog__more {
    order: 5;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

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

  .tbtc-page .catalog__more-d {
    display: none;
  }

  .tbtc-page .catalog__more-m {
    display: inline;
  }
}