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

/* ==========================================================================
   Quy trình làm việc — Figma node 55:776 (1440 × 700)
   ========================================================================== */

.tbtc-page .process {
  padding-block: var(--sp-20);
  border-top: 1px solid #e7e7e7;
  background: linear-gradient(180deg, var(--c-white) 0%, #f4f9ff 100%);
}

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

/* ---- Hàng 6 bước ------------------------------------------------------ */

.tbtc-page .process__steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: var(--sp-12);
}

/* Đường kẻ ngang chạy qua tâm các pin — Figma 55:858 */
.tbtc-page .process__steps::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  bottom: 19px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--c-white) 0%,
    var(--c-orange) 50%,
    var(--c-white) 100%
  );
}

/* ---- Một bước --------------------------------------------------------- */

/* Chiều cao lấy đúng component Figma 197:1054 — card 250 + hở 12 + pin 56.
   Không khai báo thì .step chỉ cao bằng card và pin sẽ rơi vào trong card. */
/* Cho phép co: sáu bước × 209 = 1254px vừa đúng khổ 1440, khoá flex-shrink: 0
   thì dải 1280–1439px bị tràn ngang. Ở 1440 vẫn giữ nguyên 209px vì còn thừa
   chỗ, hẹp hơn thì cả hàng co cùng nhịp thay vì tràn ra ngoài. */
.tbtc-page .step {
  position: relative;
  width: 209px;
  min-width: 0;
  height: 318px;
}

/* Nền và viền đều là gradient 140deg (Figma 197:1004):
   nền xanh 5% ở góc trên-trái tan hết ở mốc 50%, viền cũng vậy. */
.tbtc-page .step__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* space-between thuần, KHÔNG đặt gap: Figma tự chia đều chỗ trống nên card
     mô tả 2 dòng có khe 28/28, card 3 dòng có khe 19/19. Đặt gap tối thiểu
     24px sẽ làm card 3 dòng tràn nội dung ra ngoài 10px. */
  justify-content: space-between;
  height: 250px;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background: linear-gradient(140deg, rgba(0, 86, 214, 0.05) 0%, rgba(255, 255, 255, 0) 50%),
    var(--c-white);
}

.tbtc-page .step__box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--c-blue) 0%, rgba(255, 255, 255, 0) 50%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Bước đang hoạt động đổi sang tông cam — Figma component 197:1033.
   Viền của nó chạy từ trắng đục sang cam trong suốt, tức gần như vô hình. */
.tbtc-page .step--active .step__box {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0) 0%, rgba(255, 107, 0, 0.1) 100%),
    var(--c-white);
}

.tbtc-page .step--active .step__box::before {
  background: linear-gradient(140deg, var(--c-white) 0%, rgba(255, 107, 0, 0) 100%);
}

.tbtc-page .step__icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.tbtc-page .step__rule {
  width: 64px;
  height: 2px;
  margin: 0;
  border: 0;
  background: var(--c-orange);
  flex-shrink: 0;
}

.tbtc-page .step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  text-align: center;
}

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

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

/* ---- Pin số thứ tự (Figma component 197:1024 / 197:1025) -------------- */

/* Figma 197:1040 — pin đặt tại y=262 trong khung 318, tức cách đáy card 12px */
.tbtc-page .step__pin {
  position: absolute;
  left: 50%;
  top: 262px;
  transform: translateX(-50%);
  width: 40px;
  height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Tam giác cam 21×17 (kích thước thật của hình xuất từ Figma, không phải
   khung bao 24×22). Ở biến thể thường nó nằm khuất sau vòng tròn nên
   thiết kế không thấy — chỉ hiện ở bước đang hoạt động. */
.tbtc-page .step__pin-tip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 21px;
  height: 17px;
  display: none;
}

.tbtc-page .step--active .step__pin-tip {
  display: block;
}

.tbtc-page .step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--c-blue);
  /* Viền trắng của Figma là stroke OUTSIDE — dùng box-shadow để vòng trắng
     nằm ngoài, không ăn vào 40px của vòng tròn. */
  box-shadow: 0 0 0 3px var(--c-white);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}

/* ---- Chip mũi tên nối giữa hai bước (Figma 55:832 / 55:852) ----------- */

.tbtc-page .step__chip {
  position: absolute;
  right: -21px;
  top: 109px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}

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

.tbtc-page .step__chip--active {
  background: var(--c-orange);
}

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

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

  .tbtc-page .process__steps {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-6) var(--sp-5);
  }

  /* Đường kẻ, chip nối và tam giác pin chỉ có nghĩa khi 6 bước cùng một hàng */
  .tbtc-page .process__steps::before, .tbtc-page .step__chip, .tbtc-page .step__pin-tip {
    display: none;
  }

  .tbtc-page .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .tbtc-page .step__box {
    width: 100%;
  }

  .tbtc-page .step__pin {
    position: static;
    transform: none;
    height: auto;
    margin-top: var(--sp-3);
  }
}

/* Dòng gợi ý chỉ dành cho khổ mobile — xem chú thích trong index.html */
.tbtc-page .process__hint {
  display: none;
}

/* ==========================================================================
   Mobile — Figma 397:4190 (393 × 654)
   Sáu bước trở lại thành một hàng như desktop nhưng cuộn ngang, card 253px
   được canh giữa màn hình. Cụm tiêu đề section này canh giữa, khác các
   section còn lại.
   ========================================================================== */

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

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

  /* Riêng section này thiết kế mobile vẫn canh giữa — Figma 397:4199 */
  .tbtc-page .process .section-head {
    align-items: center;
    text-align: center;
  }

  .tbtc-page .process__steps {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--sp-5);
    margin-top: var(--sp-8);
    /* 70 = (393 - 253) / 2, để card đầu nằm giữa màn hình */
    padding-inline: 70px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Đường kẻ vẽ bằng background thay vì ::before: phần tử này đã thành
       khung cuộn, mà background mặc định không trôi theo nội dung nên vạch
       đứng yên đúng như thiết kế (Figma 430:2810). */
    background-image: linear-gradient(
      90deg,
      var(--c-white) 0%,
      var(--c-orange) 50%,
      var(--c-white) 100%
    );
    background-size: 100% 2px;
    background-position: 0 calc(100% - 19px);
    background-repeat: no-repeat;
  }

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

  .tbtc-page .process__steps::before {
    display: none;
  }

  /* Trả lại cách dựng của desktop mà dải 1279px đã gỡ bỏ */
  .tbtc-page .step {
    display: block;
    width: 253px;
    height: 318px;
    /* Bắt buộc trong dải cuộn ngang: sáu bước 253px không được co để nhồi vừa
       393px màn hình (co thì mỗi bước tụt còn 19px). */
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  .tbtc-page .step__pin {
    position: absolute;
    top: 262px;
    transform: translateX(-50%);
    height: 56px;
    margin-top: 0;
  }

  .tbtc-page .step__pin-tip {
    display: none;
  }

  .tbtc-page .step--active .step__pin-tip {
    display: block;
  }

  /* Chip mũi tên nằm trong khe giữa hai card — Figma 430:2823 */
  .tbtc-page .step__chip {
    display: grid;
    right: -40px;
  }

  .tbtc-page .step__box {
    height: 250px;
    padding: var(--sp-5);
  }

  .tbtc-page .process__hint {
    display: block;
    margin-top: var(--sp-4);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-desc);
    text-align: center;
  }
}