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

/* ==========================================================================
   Giải pháp theo ngành — Figma node 46:103 (1440 × 1104)
   ========================================================================== */

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

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

.tbtc-page .section-head--xl {
  max-width: 880px;
}

.tbtc-page .section-head--xl .section-desc {
  max-width: 644px;
}

/* ---- Băng chuyền card (Figma 46:161) ---------------------------------- */

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

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

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

/* .carousel-nav và .carousel-dots nay nằm trong components.css vì được
   dùng chung ở nhiều trang. Ở đây chỉ đặt lại vị trí cho riêng section này. */
.tbtc-page .solutions .carousel-nav {
  top: 244px; /* nửa chiều cao card 488 */
}

/* ---- Card giải pháp 310×488 — Figma component 218:3284 ---------------- */

.tbtc-page .card-solution {
  position: relative;
  display: block;
  width: 310px;
  height: 488px;
  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);
}

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

/* Card thứ 5 chỉ có ở khổ mobile — xem chú thích trong index.html */
.tbtc-page .card-solution--m {
  display: none;
}

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

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

.tbtc-page .card-solution__badge {
  position: absolute;
  left: 24px;
  top: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--c-white);
  border-radius: var(--r-md);
  box-shadow: 0 2px 16px 0 rgba(20, 130, 252, 0.08);
}

.tbtc-page .card-solution__badge img {
  width: 32px;
  height: 32px;
}

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

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

.tbtc-page .card-solution__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.tbtc-page .card-solution__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-desc);
}

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

.tbtc-page .card-solution__link {
  position: absolute;
  left: 24px;
  bottom: 24px;
}

/* ==========================================================================
   Dải tư vấn cuối section — Figma 28:654 (1312 × 146)
   ========================================================================== */

.tbtc-page .consult-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: 56px;
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 107, 0, 0.1) 100%),
    var(--c-white);
  border: 1px solid rgba(255, 107, 0, 0.35);
  box-shadow: 0 8px 24px 0 rgba(20, 130, 252, 0.08);
}

.tbtc-page .consult-band__left {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-width: 0;
}

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

.tbtc-page .consult-band__icon img {
  width: 56px;
  height: 56px;
}

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

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

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

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

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

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

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

/* ==========================================================================
   Mobile — Figma 397:2626 "Giải pháp theo ngành" (393 × 1101)
   Chiều dọc: lề 48 → cụm tiêu đề 192 → 32 → băng chuyền 5 card 415 → 24 →
   chấm chỉ trang 8 → 32 → dải tư vấn 302 → lề 48. Điều hướng chỉ còn chấm
   tròn, dải tư vấn xếp dọc.

   Toạ độ con của card lấy theo padding box (trong đường viền 1px) đúng như
   Figma xuất: left 19 ở đây = x=20 tính từ mép ngoài card.
   ========================================================================== */

@media (max-width: 767px) {
  .tbtc-page .solutions {
    padding-block: var(--sp-12);
    /* Vạch trên chỉ rộng 353px (Figma 397:2685 tại x=20) nên không dùng được
       border-top của desktop. Bỏ border để nội dung bắt đúng mốc y=48 —
       nếu giữ, border 1px sẽ đẩy mọi thứ xuống 1px. */
    border-top: 0;
  }

  .tbtc-page .solutions::before {
    content: "";
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 0;
    height: 1px;
    background: var(--c-border-2);
  }

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

  .tbtc-page .solutions__inner > .section-head, .tbtc-page .solutions__inner > .consult-band {
    margin-inline: var(--gutter);
  }

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

  /* 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 .solutions__track {
    gap: var(--sp-4);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    /* Desktop chừa 4px dưới cho thanh cuộn; ở mobile thanh cuộn đã ẩn hẳn nên
       bỏ đi, nếu không băng chuyền cao 419 thay vì 415 và đẩy lệch phần dưới. */
    padding-bottom: 0;
  }

  /* line-height 1.3 của .section-title cho ra 41.6px, Figma 397:2638 dựng theo
     42px — hai dòng lệch 1px rồi dồn xuống cả section. Chỉ đặt lại trong
     section này để không xê dịch các section mobile đã dựng xong. */
  .tbtc-page .solutions .section-title {
    line-height: var(--lh-display-3);
  }

  /* Thiết kế mobile bỏ nút mũi tên, chỉ giữ chấm chỉ trang */
  .tbtc-page .solutions .carousel-nav {
    display: none;
  }

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

  /* ---- Card 277×415 — Figma 397:3308 --------------------------------- */

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

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

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

  /* Figma 397:3330 — bóng nhoè 8px thay cho 16px của desktop */
  .tbtc-page .card-solution__badge {
    left: 19px;
    top: 166px;
    box-shadow: 0 2px 8px 0 rgba(20, 130, 252, 0.08);
  }

  .tbtc-page .card-solution__text {
    left: 19px;
    top: 238px;
    width: 237px;
    gap: var(--sp-2);
  }

  /* 13/18 thay cho 14/20 — nếu giữ cỡ desktop thì dòng thứ ba tràn xuống
     đè lên link "Xem giải pháp" đặt tuyệt đối ở đáy card.

     letter-spacing: Figma xếp gạch đầu dòng thứ nhất vừa đúng một dòng trong
     213px, nhưng Chrome đo cùng chuỗi đó ở 13px Google Sans ra 216.5px nên nó
     rớt xuống hai dòng — khối gạch đầu dòng phồng từ 84 lên 100px và chạm vào
     link ở đáy card. Thu 1% khoảng chữ (216.5 → 211.9px) là đủ khớp lại; gạch
     đầu dòng thứ ba vẫn hai dòng như thiết kế. Đây là lệch giữa engine chữ của
     Figma và của trình duyệt, không phải chỉnh cho đẹp. */
  .tbtc-page .card-solution__points li {
    gap: var(--sp-1);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body-sm);
    letter-spacing: -0.01em;
  }

  .tbtc-page .card-solution__link {
    left: 19px;
    bottom: 19px;
  }

  /* ---- Dải tư vấn — Figma 397:3425 (353 × 302) ----------------------- */

  /* Ép đúng chỗ ngắt dòng của thiết kế thay vì để chữ tự xuống dòng */
  .tbtc-page .solutions__title-m::before, .tbtc-page .consult-band__title-m::before {
    content: "\A";
    white-space: pre;
  }

  .tbtc-page .consult-band {
    position: relative; /* để ::before vẽ viền gradient bám đúng dải này */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    /* Viền là gradient nên phải vẽ bằng ::before; border chỉ còn giữ chỗ 1px
       cho khớp chiều cao 302 (20 + 260 nội dung + 20 + 2 viền). */
    border-color: transparent;
    /* Trục gradient chéo và điểm bắt đầu ở 69.6% — khác desktop (ngang, từ 0%) */
    background:
      linear-gradient(131.294deg, rgba(255, 255, 255, 0.1) 69.604%, rgba(255, 107, 0, 0.1) 100%),
      var(--c-white);
    box-shadow: 0 8px 12px 0 rgba(20, 130, 252, 0.08);
  }

  /* Viền gradient trắng → cam (Figma 397:3425). Tool đọc stroke gradient ra
     thành một màu trong suốt, nên giá trị dưới đây lấy bằng cách dò pixel trên
     ảnh Figma: mép trên trắng, giữa #ffd0ae, mép dưới đúng #ff6b00.
     Cách dựng giống .card-why::before và .step__box::before. */
  .tbtc-page .consult-band::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      180deg,
      var(--c-white) 10%,
      #ffd0ae 56%,
      var(--c-orange) 100%
    );
    -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;
  }

  .tbtc-page .consult-band__left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  /* Ô icon 64×64 với icon 48px — Figma 397:3427, desktop là 80×80 / 56px */
  .tbtc-page .consult-band__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 86, 214, 0.1) 100%);
  }

  .tbtc-page .consult-band__icon img {
    width: 48px;
    height: 48px;
    mix-blend-mode: multiply; /* Figma 397:3428 */
  }

  /* Figma 397:3429 — khe tiêu đề/mô tả 4px, không phải 12px như desktop */
  .tbtc-page .consult-band__body {
    gap: var(--sp-1);
  }

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

  .tbtc-page .consult-band__desc {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* Nút 44px cao — Figma 397:3432 (10px trên dưới, 16px hai bên) */
  .tbtc-page .consult-band .btn--lg {
    padding: 10px var(--sp-4);
  }
}