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

/* ==========================================================================
   Hero — Figma node 7:4532 (1440 × 680)
   Xếp lớp: ảnh nền → glow trắng (blur 100px) → glow cam → nội dung
   ========================================================================== */

.tbtc-page .hero {
  position: relative;
  height: 680px;
  overflow: hidden;
  background: #eee;
  isolation: isolate;
}

/* ---- Lớp 1: ảnh nền (Figma 369:1724 — 1440 × 768, tràn xuống dưới) ---- */

.tbtc-page .hero__banner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: var(--page-w);
  height: 768px;
  z-index: -3;
}

/* <picture> mặc định là inline — ép về block để không sinh khoảng trắng dưới
   ảnh và để thẻ img kế thừa đúng chiều cao khung. */
.tbtc-page .hero__banner picture {
  display: block;
  width: 100%;
  height: 100%;
}

.tbtc-page .hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---- Lớp 2 + 3: các mảng sáng (Figma 218:3687 "lớp fill") ------------- */

.tbtc-page .hero__glow {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.tbtc-page .hero__glow--white {
  top: -152px;
  left: calc(50% - 86px);
  transform: translateX(-50%);
  width: 1710px;
  height: 984px;
  filter: blur(100px);
  background-image: url("../../images/hero-glow-white.svg");
  z-index: -2;
}

.tbtc-page .hero__glow--orange {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--page-w);
  height: 680px;
  background-image: url("../../images/hero-glow-orange.svg");
  z-index: -1;
}

/* ---- Lớp 4: nội dung (Figma 12:650) ----------------------------------- */

.tbtc-page .hero__inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--page-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tbtc-page .hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-10);
  width: 644px;
  max-width: 100%;
}

.tbtc-page .hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
}

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

.tbtc-page .hero__title .is-blue {
  color: var(--c-blue);
}

.tbtc-page .hero__title .is-orange {
  color: var(--c-orange);
}

.tbtc-page .hero__desc {
  width: 533px;
  max-width: 100%;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--c-desc);
}

.tbtc-page .hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

/* Link "XEM VIDEO" — Figma 12:644 */
.tbtc-page .hero__video {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
  color: var(--c-orange);
  transition: opacity var(--dur) var(--ease);
}

.tbtc-page .hero__video img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.tbtc-page .hero__video:hover img {
  transform: scale(1.08);
}

/* ==========================================================================
   Responsive
   Dải 768–1279px là fallback do lập trình viên thêm, không có trong thiết kế.
   ========================================================================== */

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

@media (max-width: 991px) {
  .tbtc-page .hero {
    height: auto;
    min-height: 560px;
    padding-block: var(--sp-16);
  }

  .tbtc-page .hero__banner {
    height: 100%;
  }

  .tbtc-page .hero__title {
    font-size: var(--fs-display-3);
  }

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

/* ==========================================================================
   Mobile — Figma 369:4385 "Hero Banner" (393 × 700)
   Ảnh máy nằm dưới đáy, chữ ở nửa trên. Xếp lớp từ dưới lên:
   ảnh (-4) → mảng trắng đầu trang (-3) → mảng cam (-2) → mảng xanh mờ (-1)
   ========================================================================== */

@media (max-width: 767px) {
  .tbtc-page .hero {
    height: 700px;
    padding-block: 0;
    background: var(--c-white);
  }

  /* Ảnh dọc riêng của bản mobile — Figma 371:2177 (432 × 562, cắt còn 393) */
  .tbtc-page .hero__banner {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    min-width: 0;
    height: 562px;
    z-index: -4;
  }

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

  /* Figma 371:2179 "image 39" — nền trắng phủ 420px đầu rồi tan dần */
  .tbtc-page .hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 420px;
    z-index: -3;
    pointer-events: none;
    background-image: linear-gradient(
      180deg,
      var(--c-white) 56.759%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  /* Figma 369:6175 "image 38" — vệt cam chéo ở nửa dưới */
  .tbtc-page .hero__glow--orange {
    top: 420px;
    left: 0;
    transform: none;
    width: 100%;
    height: 280px;
    z-index: -2;
    background-image: linear-gradient(
      -19.424deg,
      rgba(255, 107, 0, 0.3) 0%,
      rgba(255, 255, 255, 0) 31.401%
    );
  }

  /* Figma 369:6174 "image 37" — mảng xanh nhạt làm mềm toàn khối */
  .tbtc-page .hero__glow--white {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 700px;
    z-index: -1;
    filter: blur(100px);
    background-image: linear-gradient(
      -23.788deg,
      rgba(255, 255, 255, 0) 48.366%,
      rgb(255, 255, 255) 59.95%,
      rgb(233, 242, 255) 100%
    );
  }

  /* Nội dung — Figma 369:6153, mép trái 20px, đỉnh cách trên 91px */
  .tbtc-page .hero__inner {
    align-items: flex-start;
    padding-top: 91px;
    padding-inline: var(--gutter);
  }

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

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

  .tbtc-page .hero__title {
    font-size: var(--fs-display-3); /* 32px */
    line-height: 1.3;
  }

  /* Ép đúng chỗ ngắt dòng của thiết kế thay vì để chữ tự xuống dòng */
  .tbtc-page .hero__title-line {
    display: block;
  }

  .tbtc-page .hero__desc {
    width: 100%;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .tbtc-page .hero__actions {
    gap: var(--sp-6);
  }

  /* Nút mobile nhỏ lại đúng cỡ .btn gốc (Figma 369:6158) */
  .tbtc-page .hero__actions .btn--lg {
    padding: 10px var(--sp-4);
  }

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