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

/* ==========================================================================
   Vì sao chọn chúng tôi — Figma node 28:678 (1440 × 1082)
   ========================================================================== */

.tbtc-page .why {
  background: var(--c-white);
  padding-block: var(--sp-20);
}

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

/* ---- Hàng trên: cột trái (text + số liệu) | cột phải (lưới card) ------ */

.tbtc-page .why__top {
  display: grid;
  /* minmax(0, 1fr) chứ không phải 1fr: 1fr có mức tối thiểu là max-content nên
     lưới card bên trong (757px) ép cột phình ra, đẩy trang tràn ngang ở dải
     1280–1439px. Cho phép co về 0 thì cột theo đúng chỗ còn lại. */
  grid-template-columns: 421px minmax(0, 1fr);
  column-gap: 135px; /* Figma: cột phải bắt đầu tại x=620, cột trái rộng 421 tại x=64 */
  align-items: start;
}

/* ---- Cột trái --------------------------------------------------------- */

.tbtc-page .why__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 421px;
  max-width: 100%;
}

/* Cụm eyebrow ở đây căn trái, khác .section-head căn giữa */
.tbtc-page .why__intro .eyebrow {
  justify-content: flex-start;
}

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

/* Chỗ ngắt dòng của khổ desktop (Figma 28:699).
   Phải ngắt bằng ký tự xuống dòng ở ::before chứ không dùng display:block —
   block ngắt cả hai đầu nên đoạn liền sau không nối tiếp cùng dòng được. */
.tbtc-page .why__title-d::before {
  content: "\A";
  white-space: pre;
}

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

.tbtc-page .why__desc strong {
  font-weight: var(--fw-semibold);
  color: var(--c-blue);
}

/* Gạch cam ngăn cách — Figma 28:887 (87×2 @64,448) */
/* margin-inline: 0 là bắt buộc — <hr> mặc định có margin auto nên vạch bị
   đẩy vào giữa, trong khi thiết kế đặt nó sát lề trái (Figma 28:887 @x=64). */
.tbtc-page .why__rule {
  width: 87px;
  height: 2px;
  margin: 46px 0 0;
  background: var(--c-orange);
  border: 0;
}

/* ---- Số liệu cột trái (Figma 28:884) ---------------------------------- */

.tbtc-page .why__stats {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-12);
  max-width: 533px;
}

.tbtc-page .why__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 0;
  min-width: 0;
  padding-right: var(--sp-6);
  border-right: 1px dashed #e7e7e7;
}

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

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

.tbtc-page .why__stat-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

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

.tbtc-page .why__stat-label {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

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

/* ---- Lưới 6 card (Figma 28:998) --------------------------------------- */

/* Cột cứng 239px chỉ vừa đúng khổ 1440 ((756 − 2×20) / 3 ≈ 239) và tràn ra
   ngoài ở mọi khổ hẹp hơn, nên để lưới tự chia — ở 1440 vẫn ra 239. */
.tbtc-page .why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

/* Card — Figma component 28:949 (239 × 287; bề ngang do lưới chia) */
.tbtc-page .card-why {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 287px;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  /* Nền trắng phủ gradient xanh rất nhạt (Figma: #0056D6 ở 5%) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 86, 214, 0.05) 100%),
    var(--c-white);
  /* Viền gradient: dùng 2 lớp background để mô phỏng border-image */
  border: 1px solid transparent;
  background-clip: padding-box, padding-box;
  position: relative;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* Viền gradient xanh → trắng (Figma: stroke linear #0056D6 → #FFFFFF 0%) */
.tbtc-page .card-why::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(0, 86, 214, 0.4) 0%, rgba(255, 255, 255, 0) 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 .card-why:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card);
}

.tbtc-page .card-why__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

/* Gạch cam nhỏ dưới icon — Figma 28:945 (64×2) */
.tbtc-page .card-why__rule {
  width: 64px;
  height: 2px;
  background: var(--c-orange);
  border: 0;
  margin: 0;
  flex-shrink: 0;
}

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

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

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

/* ==========================================================================
   Dải CTA cuối section — Figma 28:1014 (1312 × 280)
   ========================================================================== */

.tbtc-page .cta-band {
  position: relative;
  display: flex;
  align-items: center;
  height: 280px;
  margin-top: 66px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #002793;
  /* chặn mix-blend-mode của logo chìm lan ra ngoài dải */
  isolation: isolate;
}

/* Nửa trái: gradient xanh — Figma 28:1040.
   Trục gradient đi từ giữa-phải lên góc trên-trái => 284deg trong CSS. */
.tbtc-page .cta-band__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 557px;
  height: 100%;
  background: linear-gradient(284deg, var(--c-blue) 0%, #002793 100%);
  z-index: 0;
}

/* Nửa phải: ảnh — Figma 28:1037 */
.tbtc-page .cta-band__media {
  position: absolute;
  right: 0;
  top: 0;
  width: 755px;
  height: 100%;
  z-index: 0;
}

/* <picture> mặc định là inline — ép về block để ảnh lấp đúng khung */
.tbtc-page .cta-band__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* Phủ xanh mờ dần và tắt hẳn ở mốc 70% — Figma 28:1041.
   Nhờ vậy 30% bên phải ảnh giữ nguyên màu thật. */
.tbtc-page .cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--c-blue) 0%, rgba(0, 86, 214, 0) 70%);
}

/* Logo chìm — Figma 46:1055. Ảnh đã bao gồm sẵn opacity 44% khi xuất,
   chỉ cần thêm blend SCREEN như thiết kế. */
.tbtc-page .cta-band__watermark {
  position: absolute;
  left: 641px;
  top: 58px;
  width: 309px;
  height: 303px;
  object-fit: fill;
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
}

/* Quầng sáng xanh mờ — Figma 28:1054 (ellipse blur 150) */
.tbtc-page .cta-band__glow {
  position: absolute;
  left: 362px;
  top: -8px;
  width: 497px;
  height: 307px;
  border-radius: 50%;
  background: var(--c-blue);
  filter: blur(150px);
  z-index: 2;
  pointer-events: none;
}

/* Dấu ngoặc kép — Figma 46:1070.
   File SVG đã chứa gradient trắng 50% → 0%, không đặt thêm opacity. */
.tbtc-page .cta-band__quote {
  position: absolute;
  left: 88px;
  top: 170px;
  width: 148px;
  height: 110px;
  z-index: 4;
  pointer-events: none;
}

.tbtc-page .cta-band__content {
  position: relative;
  z-index: 3;
  padding-left: 87px;
  max-width: 640px;
}

.tbtc-page .cta-band__text {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-medium);
  color: var(--c-white);
  max-width: 552px;
}

/* Nút cam — Figma component 210:1282 */
.tbtc-page .btn--accent {
  background-image: linear-gradient(90deg, #ff9141 0%, var(--c-orange) 100%);
  color: var(--c-white);
  box-shadow: var(--sh-button);
  padding: 14px var(--sp-5);
}

.tbtc-page .btn--accent:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 20px 0 rgba(255, 107, 0, 0.24);
}

.tbtc-page .cta-band__btn {
  margin-top: var(--sp-10); /* Figma: chữ kết thúc ở y=128, nút bắt đầu ở y=168 */
}

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

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

  .tbtc-page .why__top {
    grid-template-columns: 1fr;
    row-gap: var(--sp-12);
  }

  .tbtc-page .why__grid {
    grid-template-columns: repeat(auto-fit, minmax(239px, 1fr));
    justify-content: center;
  }

  .tbtc-page .card-why {
    width: 100%;
  }
}

@media (max-width: 991px) {
  .tbtc-page .cta-band {
    height: auto;
    padding-block: var(--sp-10);
  }

  .tbtc-page .cta-band__media {
    width: 100%;
    opacity: 0.25;
  }

  .tbtc-page .cta-band__content {
    padding-inline: var(--sp-6);
  }
}

/* ==========================================================================
   Mobile — Figma 371:2684 (393 × 1914)
   Một cột: giới thiệu → gạch cam → 3 ô số liệu → lưới 6 card 2 cột →
   dải CTA xếp dọc (khối xanh trên, ảnh dưới).
   ========================================================================== */

@media (max-width: 767px) {
  .tbtc-page .why {
    padding-block: var(--sp-12); /* 48px — Figma content y=48 */
  }

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

  .tbtc-page .why__top {
    row-gap: var(--sp-8);
  }

  .tbtc-page .why__intro {
    width: 100%;
    gap: var(--sp-3);
  }

  /* Giống .section-head: 16px dưới eyebrow, 12px giữa tiêu đề và mô tả */
  .tbtc-page .why__intro .eyebrow {
    margin-bottom: var(--sp-1);
    gap: var(--sp-2);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

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

  /* Đổi chỗ ngắt dòng sang đúng bản mobile (Figma 371:2695) */
  .tbtc-page .why__title-d::before {
    content: none;
  }

  .tbtc-page .why__title-m::before {
    content: "\A";
    white-space: pre;
  }

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

  /* Figma 371:2724 — 76×2 tại y=322 */
  .tbtc-page .why__rule {
    width: 76px;
    margin-top: var(--sp-5);
  }

  /* ---- Ba ô số liệu — Figma 430:2915 (3 cột 112.33, cách 8) ----------- */

  .tbtc-page .why__stats {
    flex-wrap: nowrap;
    gap: var(--sp-2);
    margin-top: var(--sp-8);
    max-width: none;
  }

  .tbtc-page .why__stat, .tbtc-page .why__stat:last-child {
    flex: 1 1 0;
    gap: var(--sp-3);
    padding-right: 0;
    border-right: 0;
  }

  .tbtc-page .why__stat-body {
    gap: var(--sp-2);
  }

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

  /* ---- Lưới 6 card, 2 cột — Figma 371:2697 --------------------------- */

  .tbtc-page .why__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-8);
  }

  .tbtc-page .card-why {
    width: 100%;
    height: auto;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-3);
  }

  .tbtc-page .card-why__icon {
    width: 48px;
    height: 48px;
  }

  .tbtc-page .card-why__rule {
    height: 1.5px;
  }

  .tbtc-page .card-why__body {
    gap: var(--sp-1);
  }

  .tbtc-page .card-why__title {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
  }

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

  /* ---- Dải CTA xếp dọc — Figma 371:2725 (353 × 554) ------------------ */

  .tbtc-page .cta-band {
    display: block;
    height: 554px;
    margin-top: var(--sp-8);
    padding-block: 0;
    border-radius: var(--r-lg);
  }

  /* Khối xanh chiếm 220px trên cùng thay vì nửa trái — Figma 371:2727 */
  .tbtc-page .cta-band__bg {
    width: 100%;
    height: 220px;
    background: linear-gradient(
      -7.739deg,
      rgb(0, 86, 214) 8.929%,
      rgb(0, 39, 147) 91.026%
    );
  }

  /* Ảnh chiếm 334px dưới cùng — Figma 371:2726 */
  .tbtc-page .cta-band__media {
    top: 220px;
    width: 100%;
    height: 334px;
    opacity: 1;
  }

  .tbtc-page .cta-band__media img {
    object-position: center bottom;
  }

  /* Phủ xanh tan dần ở mốc 40% — Figma 371:2728 */
  .tbtc-page .cta-band__media::after {
    background: linear-gradient(
      180.136deg,
      rgb(0, 86, 214) 0.125%,
      rgba(0, 86, 214, 0) 40.273%
    );
  }

  /* Thiết kế mobile bỏ logo chìm */
  .tbtc-page .cta-band__watermark {
    display: none;
  }

  .tbtc-page .cta-band__glow {
    left: -109px;
    top: 170px;
    width: 551px;
    height: 99px;
    filter: blur(80px);
  }

  .tbtc-page .cta-band__quote {
    left: 265px;
    top: 113px;
    width: 118px;
    height: 88px;
  }

  .tbtc-page .cta-band__content {
    padding: var(--sp-8) var(--gutter) 0;
    max-width: none;
  }

  .tbtc-page .cta-band__text {
    max-width: 261px;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  /* Nút mobile chỉ có chữ, không có mũi tên — Figma 371:2732 */
  .tbtc-page .cta-band__btn {
    margin-top: var(--sp-6);
    padding: 12px var(--sp-5);
  }

  .tbtc-page .cta-band__btn .btn__icon {
    display: none;
  }
}