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

/* ==========================================================================
   Dự án đã bàn giao — Figma node 52:2446 (1440 × 1180)
   ========================================================================== */

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

.tbtc-page .projects__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);
  pointer-events: none;
  z-index: 0;
}

/* Logo chìm góc phải — Figma 55:666 (opacity 3%, blur 12) */
.tbtc-page .projects__watermark {
  position: absolute;
  left: 1150px;
  top: 58px;
  width: 411px;
  height: 403px;
  opacity: 0.03;
  filter: blur(12px);
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}

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

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

.tbtc-page .projects__grid {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-12);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--sp-1);
}

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

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

/* ---- Card dự án 310×509 — Figma component 210:2698 -------------------- */

.tbtc-page .card-project {
  position: relative;
  display: block;
  width: 310px;
  height: 509px;
  flex-shrink: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 12px 0 rgba(0, 86, 214, 0.04);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.tbtc-page .card-project:hover {
  transform: translateY(-4px);
  border-color: var(--c-border-2);
  box-shadow: var(--sh-card-hover);
}

/* Biến thể Hover của Figma đổi màu tiêu đề sang xanh */
.tbtc-page .card-project:hover .card-project__title {
  color: var(--c-blue);
}

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

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

/* Ô logo đối tác — Figma 210:2652 */
.tbtc-page .card-project__partner {
  position: absolute;
  left: 211px;
  top: 198px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--c-white);
  border-radius: var(--r-md);
  box-shadow: 0 2px 16px 0 rgba(20, 130, 252, 0.08);
  z-index: 1;
}

.tbtc-page .card-project__partner img {
  width: 59px;
  height: 10px;
  object-fit: contain;
}

.tbtc-page .card-project__text {
  position: absolute;
  left: 24px;
  top: 256px;
  width: 262px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

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

.tbtc-page .card-project__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  transition: color var(--dur) var(--ease);
}

.tbtc-page .card-project__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-desc);
}

.tbtc-page .card-project__link {
  position: absolute;
  left: 24px;
  top: 414px;
}

/* Thanh chân card: địa điểm + ngày — Figma 210:2637 */
.tbtc-page .card-project__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid #f1f1f1;
  background: var(--c-white);
}

.tbtc-page .card-project__meta li {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  white-space: nowrap;
}

.tbtc-page .card-project__meta img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ==========================================================================
   Dải số liệu cuối section — Figma 61:2144 (1440 × 169)
   ========================================================================== */

.tbtc-page .project-stats {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--gutter);
  border-top: 1px solid var(--c-border-2);
  border-bottom: 1px solid var(--c-border-2);
  max-width: var(--page-w);
  margin-inline: auto;
}

.tbtc-page .project-stats__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  flex: 1 1 0;
  min-width: 0;
  padding-right: var(--sp-6);
  border-right: 1px dashed var(--c-border-2);
}

.tbtc-page .project-stats__item:last-child {
  border-right: 0;
  padding-right: 0;
}

.tbtc-page .project-stats__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--c-white) 0%, rgba(0, 86, 214, 0.12) 100%);
}

.tbtc-page .project-stats__icon img {
  width: 48px;
  height: 48px;
}

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

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

.tbtc-page .project-stats__label {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-medium);
  color: var(--c-desc);
}

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

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

  .tbtc-page .project-stats {
    flex-wrap: wrap;
    padding-inline: var(--sp-6);
  }

  .tbtc-page .project-stats__item {
    flex: 1 1 45%;
    padding-block: var(--sp-4);
  }

  .tbtc-page .project-stats__item:nth-child(2n) {
    border-right: 0;
  }
}

/* ==========================================================================
   Mobile — Figma 401:4830 (393 × 1264)
   Card 277×446 trong dải cuộn ngang, dải số liệu cuối section thành lưới 2×2
   không còn đường viền trên/dưới.
   ========================================================================== */

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

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

  .tbtc-page .projects__inner > .section-head, .tbtc-page .projects__tabs, .tbtc-page .projects__footer {
    padding-inline: var(--gutter);
  }

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

  /* 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 .projects__grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    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 .projects__grid::-webkit-scrollbar {
    display: none;
  }

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

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

  /* ---- Card 277×446 — Figma 401:4859 --------------------------------- */

  .tbtc-page .card-project {
    width: 277px;
    height: 446px;
    border-radius: var(--r-md);
  }

  .tbtc-page .card-project__media {
    height: 207px;
  }

  .tbtc-page .card-project__partner {
    left: 182px;
    top: 169px;
  }

  .tbtc-page .card-project__text {
    left: 20px;
    top: 227px;
    width: 237px;
    gap: var(--sp-2);
  }

  /* Khung chữ chỉ cao 82px (Figma 401:4860) trong khi link đặt tuyệt đối ở
     y=369 — không giới hạn số dòng thì chữ tràn xuống đè lên link. */
  .tbtc-page .card-project__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }

  .tbtc-page .card-project__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body-sm);
  }

  .tbtc-page .card-project__link {
    left: 20px;
    top: 369px;
  }

  .tbtc-page .card-project__meta {
    gap: var(--sp-6);
    padding: 13px var(--gutter);
  }

  .tbtc-page .card-project__meta li {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
  }

  .tbtc-page .card-project__meta img {
    width: 16px;
    height: 16px;
  }

  /* ---- Dải số liệu thành lưới 2×2 — Figma 401:5255 ------------------- */

  .tbtc-page .project-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px var(--sp-4);
    margin-top: var(--sp-8);
    padding: 0 var(--gutter);
    border: 0;
  }

  .tbtc-page .project-stats__item, .tbtc-page .project-stats__item:last-child, .tbtc-page .project-stats__item:nth-child(2n) {
    flex-direction: column;
    gap: var(--sp-6);
    padding: 0;
    border: 0;
  }

  .tbtc-page .project-stats__body {
    gap: var(--sp-1);
  }

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