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

/* ==========================================================================
   Video Showcase — Figma node 28:1065 (1440 × 902)
   ========================================================================== */

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

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

/* Tiêu đề section ở đây rộng hơn mặc định (Figma: 922px) */
.tbtc-page .section-head--wide {
  max-width: 922px;
}

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

.tbtc-page .video-showcase__body {
  display: grid;
  /* Hai cột cứng 755 + 501 + khe 56 = 1312, vừa khít khổ 1440 và tràn ở mọi khổ
     hẹp hơn. Dùng fr theo đúng tỉ lệ đó: ở 1440 vẫn ra 755 và 501, khổ hẹp hơn
     thì hai cột co lại cùng nhịp. */
  grid-template-columns: minmax(0, 755fr) minmax(0, 501fr);
  gap: 56px;
  margin-top: var(--sp-16);
}

/* ---- Khung video (Figma 28:1172) -------------------------------------- */

/* Lấp trọn cột và giữ tỉ lệ thay vì đóng cứng 755×504 — ở khổ 1440 cột rộng
   đúng 755 nên vẫn ra 755×504 y như thiết kế. */
.tbtc-page .video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 755 / 504;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #eaeaea;
  cursor: pointer;
}

/* Ảnh gốc 1310×699 được đặt lệch để lộ đúng vùng thiết kế (Figma 28:1173).
   Phải nhắm đúng class poster — dùng `.video-player img` sẽ trúng cả nút play.

   Toạ độ ghi theo phần trăm khung 755×504 của thiết kế desktop, nhờ vậy khổ
   nào cũng giữ đúng vùng cắt — bản mobile 353×236 (Figma 376:2960) quy ra
   cùng bộ số này. Nếu để object-fit: cover thì ảnh bị canh giữa và máy nhìn
   nhỏ hơn hẳn so với thiết kế. */
.tbtc-page .video-player__poster {
  position: absolute;
  left: -73.51%; /* -555 / 755 */
  top: -8.93%; /* -45 / 504 */
  width: 173.51%; /* 1310 / 755 */
  height: 138.69%; /* 699 / 504 */
  max-width: none;
  object-fit: cover;
}

.tbtc-page .video-player::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: background-color var(--dur) var(--ease);
}

.tbtc-page .video-player:hover::after {
  background: rgba(0, 0, 0, 0.18);
}

.tbtc-page .video-player__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  z-index: 1;
  transition: transform var(--dur) var(--ease);
}

.tbtc-page .video-player:hover .video-player__play {
  transform: translate(-50%, -50%) scale(1.08);
}

/* ---- Cột phải --------------------------------------------------------- */

.tbtc-page .video-showcase__aside {
  display: flex;
  flex-direction: column;
}

.tbtc-page .video-showcase__script {
  font-family: var(--font-script);
  font-size: var(--fs-h1);
  line-height: 28px;
  color: var(--c-orange);
}

.tbtc-page .video-showcase__title {
  margin-top: var(--sp-3);
  font-size: var(--fs-display-4);
  line-height: var(--lh-display-4);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
}

.tbtc-page .video-showcase__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-desc);
}

/* ---- Danh sách tính năng (Figma 28:1224) ------------------------------ */

.tbtc-page .feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.tbtc-page .feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.tbtc-page .feature-list__item img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.tbtc-page .feature-list__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tbtc-page .feature-list__title {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
}

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

/* ---- Nhóm nút --------------------------------------------------------- */

.tbtc-page .video-showcase__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* .btn--soft nay nằm trong components.css vì trang chi tiết sản phẩm cũng
   dùng, mà trang đó không nạp file này. */

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

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

  .tbtc-page .video-showcase__body {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .tbtc-page .video-player {
    width: 100%;
    height: auto;
    aspect-ratio: 755 / 504;
  }

  .tbtc-page .video-showcase__aside {
    max-width: 640px;
  }
}

/* ==========================================================================
   Mobile — Figma 376:2941 (393 × 1180)
   Một cột: tiêu đề → khung video 353×236 → chữ ký + tiêu đề máy →
   4 mục tính năng → hai nút xếp dọc.
   ========================================================================== */

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

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

  .tbtc-page .video-showcase__body {
    gap: var(--sp-8);
    margin-top: var(--sp-8);
  }

  /* Figma 376:2959 — 353 × 236 */
  .tbtc-page .video-player {
    aspect-ratio: 353 / 236;
    border-radius: var(--r-lg);
  }

  .tbtc-page .video-player__play {
    width: 48px;
    height: 48px;
  }

  .tbtc-page .video-showcase__aside {
    max-width: none;
  }

  .tbtc-page .video-showcase__title {
    margin-top: var(--sp-3);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }

  .tbtc-page .video-showcase__desc {
    margin-top: var(--sp-2);
  }

  /* ---- Danh sách tính năng — Figma 376:2966 --------------------------- */

  .tbtc-page .feature-list {
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }

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

  /* Icon ở bản mobile to hơn desktop: 64px thay vì 48px */
  .tbtc-page .feature-list__item img {
    width: 64px;
    height: 64px;
  }

  /* ---- Hai nút xếp dọc — Figma 397:2364 ------------------------------ */

  .tbtc-page .video-showcase__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
  }
}