/* Chăm Film — phần tách từ style.css.
   THỨ TỰ NẠP RẤT QUAN TRỌNG: các quy tắc ở file sau cố ý đè file trước.
   Xem thứ tự trong inc/enqueue.php — đừng đổi. */

/* ═══════════════════════════════════════════
   v4.0 — TRỤ CỘT KIỂU DẢI ẢNH MỞ RỘNG
   Dùng lại bộ class cf-showcase-* nên thừa hưởng
   nguyên hiệu ứng; ở đây chỉ thêm chỗ cho đoạn
   văn dài, vì trụ cột có nội dung nhiều hơn
   một dòng phụ như dải "Từ Thực Địa".
   ═══════════════════════════════════════════ */
.cf-pillars.layout-panels .container { max-width: var(--cf-container, 1400px); }
.cf-pillars.layout-panels .cf-pillars-head { margin-bottom: 3rem; max-width: 62ch; }

/* Ô đóng chỉ 5rem — ba ô nên ô mở được rất rộng, đủ chỗ đọc */
.cf-pillar-panels { margin-top: 2.5rem; }
.cf-pillar-panels .cf-panel { flex: 1 1 0; }
.cf-pillar-panels .cf-panel.is-open { flex-grow: 7; }
@media (hover: hover) and (pointer: fine) {
  .cf-pillar-panels:hover .cf-panel.is-open:not(:hover) { flex-grow: 1; }
  .cf-pillar-panels .cf-panel:hover { flex-grow: 8; }
}

/* Đoạn văn trong ô đang mở */
.cf-panel-body {
  display: block;
  margin-top: 0.9rem;
  max-width: 58ch;
}
.cf-panel-para {
  display: block;
  font-size: 0.94rem;
  line-height: 1.72;
  color: rgba(250, 250, 250, 0.86);
}
.cf-panel-para + .cf-panel-para { margin-top: 0.7rem; }

/* Chữ dài nên lớp phủ phải đậm hơn dải ảnh thường mới đọc được */
.cf-pillar-panels .cf-panel-scrim {
  background:
    linear-gradient(to top, rgba(6, 8, 7, 0.94) 0%, rgba(6, 8, 7, 0.78) 34%, rgba(6, 8, 7, 0.34) 68%, rgba(6, 8, 7, 0.15) 100%);
}
.cf-pillar-panels .cf-panel-title { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }

/* Ô đóng: chữ dọc là tiêu đề nên có thể dài — cho phép cắt bớt gọn gàng */
.cf-pillar-panels .cf-panel-vlabel {
  max-height: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Điện thoại: xếp dọc, mở sẵn hết, không cần rê chuột */
@media (max-width: 720px) {
  .cf-pillar-panels .cf-panel,
  .cf-pillar-panels .cf-panel.is-open { flex: none; aspect-ratio: 4 / 5; }
  .cf-pillar-panels .cf-panel-caption { opacity: 1; transform: none; }
  .cf-pillar-panels .cf-panel-vlabel { display: none; }
  .cf-pillar-panels .cf-panel-para { font-size: 0.88rem; }
}


/* ═══════════════════════════════════════════
   v4.0 — ĐẦU TRANG DÙNG CHUNG
   Mọi trang nội dung mở đầu giống nhau: nền ảnh
   tối, nhãn vàng, tiêu đề lớn. Nội dung lấy từ
   Tiêu đề / Tóm tắt / Ảnh đại diện của trang.
   ═══════════════════════════════════════════ */
.cf-page-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(52svh, 460px);
  padding: 9rem 0 3.5rem;
  background: var(--footer-bg);
  overflow: hidden;
  isolation: isolate;
}
.cf-ph-media { position: absolute; inset: 0; z-index: 0; }
.cf-ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Phủ tối để chữ trắng luôn đọc được dù ảnh sáng hay tối */
.cf-ph-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 8, 7, 0.92) 0%, rgba(6, 8, 7, 0.68) 40%, rgba(6, 8, 7, 0.4) 100%),
    linear-gradient(to right, rgba(6, 8, 7, 0.6) 0%, transparent 70%);
}
/* Chưa chọn ảnh: dùng lại nền rừng + hạt phim của Hero rỗng */
.cf-page-header:not(.has-image)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%, rgba(45, 74, 62, 0.9) 0%, transparent 70%),
    linear-gradient(160deg, #1C3A2E 0%, #16302A 40%, #0A0A0A 100%);
}

.cf-ph-inner { position: relative; z-index: 2; }
.cf-ph-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.cf-ph-title {
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  color: #fff;
  max-width: 20ch;
}
.cf-ph-rule {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: 1.6rem 0 1.3rem;
  background: var(--gold);
}
.cf-ph-desc {
  max-width: 58ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 720px) {
  .cf-page-header { padding: 7rem 0 2.5rem; min-height: 38svh; }
  .cf-ph-title { max-width: none; }
}

/* ═══════════════════════════════════════════
   DÒNG THỜI GIAN — SỐ THỨ TỰ & KIỂU THẺ

   Dùng cho "Nghề của chúng tôi" và "Quy trình
   làm việc". Hai kiểu chung một khối nội dung:

   · lay-line  — mốc nối nhau theo đường dọc,
                 chịu được mô tả dài ngắn khác nhau.
   · lay-cards — lưới thẻ đánh số, hợp khi các
                 bước ngắn và cân nhau.
═══════════════════════════════════════════ */

/* ─── Số thứ tự lớn ─── */
.cf-timeline.has-numbers .cf-tl-num {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--gold-ink);
  opacity: 0.55;
  transition: opacity 0.35s ease, color 0.35s ease;
}
.cf-timeline.tone-dark.has-numbers .cf-tl-num,
.dark .cf-timeline.has-numbers .cf-tl-num { color: var(--gold); opacity: 0.6; }

.cf-timeline.lay-line .cf-tl-item:hover .cf-tl-num { opacity: 1; }

/* ─── Kiểu THẺ ───
   Bỏ hẳn đường dọc và chấm tròn của kiểu line, nếu không hai hệ thống
   chỉ dẫn cùng chạy một lúc và trông rối. */
.cf-timeline.lay-cards .cf-timeline-list {
  display: grid;
  /* Số cột do render.php tính theo số bước để hàng cuối đỡ hụt */
  grid-template-columns: repeat(var(--cf-tl-cols, 3), minmax(0, 1fr));
  gap: 1.15rem;
  list-style: none;
}
@media (max-width: 1100px) {
  .cf-timeline.lay-cards .cf-timeline-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cf-timeline.lay-cards .cf-tl-item {
  display: block;
  grid-template-columns: none;
  padding: 1.75rem 1.5rem 1.6rem;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--canvas);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease, box-shadow 0.45s ease;
}
.cf-timeline.lay-cards .cf-tl-item::before { display: none; }
.cf-timeline.lay-cards .cf-tl-dot { display: none; }

.cf-timeline.lay-cards.tone-surface .cf-tl-item { background: var(--canvas); }
.cf-timeline.lay-cards.tone-dark .cf-tl-item {
  background: rgba(250, 250, 250, 0.04);
  border-color: rgba(250, 250, 250, 0.14);
}

.cf-timeline.lay-cards .cf-tl-marker {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--divider);
}
.cf-timeline.lay-cards.tone-dark .cf-tl-marker {
  border-bottom-color: rgba(250, 250, 250, 0.14);
}
.cf-timeline.lay-cards .cf-tl-body { padding: 0; }

@media (hover: hover) and (pointer: fine) {
  .cf-timeline.lay-cards .cf-tl-item:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 16px 40px rgba(6, 8, 7, 0.14);
  }
  .cf-timeline.lay-cards .cf-tl-item:hover .cf-tl-num { opacity: 1; }
}

/* Vào trang: thẻ nổi lên so le theo --i do render.php gán */
.cf-fx.fx-ready .cf-timeline.lay-cards .cf-tl-item {
  opacity: 0;
  transform: translateY(24px);
}
.cf-fx .cf-timeline.lay-cards.is-visible .cf-tl-item,
.cf-fx .cf-timeline.lay-cards.fx-in .cf-tl-item {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease calc(var(--i, 0) * 0.07s),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.07s);
}

@media (max-width: 560px) {
  .cf-timeline.lay-cards .cf-timeline-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-timeline.lay-cards .cf-tl-item { transition: none; }
}

/* ═══════════════════════════════════════════
   CHỪA CHỖ CHO HEADER KHI NHẢY TỚI SECTION

   Header là position:fixed cao 64px. Không chừa
   chỗ thì mỗi lần nhảy tới một section — bằng
   cuộn theo phần, bằng liên kết neo, hay bằng
   phím Tab — đầu section chui xuống dưới header
   và tiêu đề bị che mất.

   scroll-margin-top là thuộc tính dành riêng cho
   việc này: chỉ ảnh hưởng lúc cuộn tới, không
   thêm khoảng trắng nào vào bố cục.
═══════════════════════════════════════════ */
#main > section,
#main > .wp-block-group > section,
#main [id] {
  scroll-margin-top: 4.75rem;
}
/* Hero luôn ở đỉnh trang nên không cần chừa, chừa lại thành hụt một khoảng */
#main > section.hero-section { scroll-margin-top: 0; }

/* ═══════════════════════════════════════════
   HERO — LOGO GIẢI THƯỞNG

   Bằng chứng uy tín, đặt sau nút kêu gọi. Logo
   để trắng mờ cho đồng bộ (mỗi liên hoan phim
   một màu khác nhau, để nguyên thì hero loang
   lổ); rê chuột thì sáng rõ.
═══════════════════════════════════════════ */
.hero-awards {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.hero-awards-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.55);
}
.hero-awards-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  list-style: none;
}
.hero-award-img {
  display: block;
  width: auto;
  height: clamp(38px, 5vh, 62px);
  object-fit: contain;
  /* Đưa mọi logo về cùng một sắc độ trắng, giữ nét trong suốt của PNG */
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero-award:hover .hero-award-img { opacity: 1; }
}
@media (max-width: 680px) {
  .hero-awards { margin-top: 1.75rem; gap: 0.6rem; }
  .hero-awards-list { gap: 1rem; }
  .hero-award-img { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-award-img { transition: none; }
}

/* ═══════════════════════════════════════════
   TRỤ CỘT — SHOWREEL

   Màn lớn ở trên, dải chọn bên dưới. Bấm mục nào
   thì màn lớn đổi sang mục đó.

   Chỉ có MỘT thẻ video trong DOM, JS đổi nguồn —
   xem ghi chú trong render.php và main.js.
═══════════════════════════════════════════ */
/* Dải TOÀN MÀN HÌNH như hero: video phủ kín, bảng nội dung nổi đè lên bên
   trái. Khung video nhỏ trong một cột thì xem không đã — phim cần chỗ.

   Phá khung container để tràn hết bề ngang. Section cũng bỏ luôn padding
   vì mép trên/dưới do chính chiều cao dải quyết định. */
.cf-pillars.layout-showreel { padding: 0; }
.cf-pillars.layout-showreel > .container {
  max-width: none;
  padding-inline: 0;
}

.cf-reel {
  position: relative;
  height: clamp(560px, 88svh, 960px);
  overflow: hidden;
  background: var(--obsidian);
}

/* Video phủ kín cả dải */
.cf-reel-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--obsidian);
}

/* ─── Bảng nội dung nổi bên trái ─── */
.cf-reel-side {
  position: absolute;
  z-index: 3;
  left: clamp(1.25rem, 5vw, 5rem);
  top: 50%;
  translate: 0 -50%;
  width: clamp(320px, 34vw, 540px);
  max-height: 84%;
  overflow-y: auto;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: 14px;
  /* Nền mờ có làm nhoè: chữ đọc rõ mà vẫn thấy video chạy phía sau */
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(250, 250, 250, 0.12);
  transition: opacity 0.45s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cf-reel-head { margin-bottom: 1.5rem; max-width: none; }
.cf-reel-head .cf-pillars-title { font-size: clamp(1.5rem, 2.6vw, 2.3rem); color: var(--snow); }
.cf-reel-head .cf-pillars-lead p { font-size: 0.94rem; color: rgba(250, 250, 250, 0.78); }
.cf-reel-head .cf-section-eyebrow { color: var(--gold); }
.cf-reel-head .cf-accent { color: var(--gold); }

/* ─── Thu gọn để xem video trọn vẹn ─── */
.cf-reel.is-collapsed .cf-reel-side {
  opacity: 0;
  translate: -120% -50%;
  pointer-events: none;
}
.cf-reel-toggle {
  position: absolute;
  z-index: 4;
  right: clamp(1rem, 3vw, 2.25rem);
  top: clamp(1rem, 3vw, 2.25rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(250, 250, 250, 0.28);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(10px);
  color: var(--snow);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.cf-reel-toggle:hover { background: rgba(10, 10, 10, 0.8); border-color: var(--gold); }
.cf-reel-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cf-reel-toggle-ico {
  width: 12px; height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transition: transform 0.35s ease;
}
.cf-reel.is-collapsed .cf-reel-toggle-ico { transform: rotate(45deg) scale(0.8); }
.cf-reel-video,
.cf-reel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Chữ nằm góc dưới trái nên chỉ cần tối phần đáy, giữ ảnh sáng ở trên */
.cf-reel-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.45) 26%,
    rgba(10, 10, 10, 0) 55%
  );
}
/* Tên chủ đề đang xem — nằm góc dưới PHẢI để không đè lên bảng nội dung
   bên trái. Bảng ẩn đi thì nó vẫn ở nguyên đó, không nhảy chỗ. */
.cf-reel-caption {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.75rem);
  bottom: clamp(1.1rem, 2.5vw, 2.25rem);
  z-index: 2;
  max-width: 46ch;
  text-align: right;
}
.cf-reel-title {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--snow);
}
/* Dòng này là MÔ TẢ VIDEO — một câu hoàn chỉnh, không phải nhãn.
   Trước đây nó mang style nhãn: viết hoa hết, giãn chữ 0.2em, cỡ 0.72rem,
   font condensed. Kiểu đó chỉ hợp với 2–3 từ; đặt lên câu tiếng Việt có
   dấu thì dấu chồng lên nhau và mắt phải dò từng chữ. Trả nó về chữ thường,
   cỡ đọc được, giãn dòng thoáng — thừa hưởng font chữ thân bài. */
.cf-reel-meta {
  margin-top: 0.5rem;
  margin-left: auto; /* giữ mép phải khi max-width hẹp hơn khối chú thích */
  max-width: 38ch;
  font-size: clamp(0.88rem, 1.05vw, 1rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: rgba(250, 250, 250, 0.86);
  text-wrap: pretty; /* tránh dòng cuối trơ trọi một chữ */
}

/* ─── Danh sách chủ đề bấm được (cột trái) ───
   Ngăn cách với phần dẫn ở trên bằng một vạch mảnh. */
.cf-reel-list {
  list-style: none;
  border-top: 1px solid var(--divider-mid);
}
.cf-pillars.tone-dark .cf-reel-list,
.cf-pillars.has-cinema .cf-reel-list { border-top-color: rgba(250, 250, 250, 0.22); }

.cf-reel-thumb {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  width: 100%;
  padding: 1.15rem 1rem 1.15rem 0;
  border: 0;
  border-bottom: 1px solid var(--divider);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cf-pillars.tone-dark .cf-reel-thumb,
.cf-pillars.has-cinema .cf-reel-thumb { border-bottom-color: rgba(250, 250, 250, 0.14); }

/* Vạch vàng dựng đứng ở mép trái, chỉ mục đang xem mới có */
.cf-reel-thumb::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}
.cf-reel-thumb.is-active::before { transform: scaleY(1); }
.cf-reel-thumb.is-active { padding-left: 1.1rem; }

.cf-reel-item-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 2;
  color: var(--stone);
  transition: color 0.3s ease;
}
.cf-reel-thumb.is-active .cf-reel-item-num { color: var(--gold); }

.cf-reel-item-body { display: block; min-width: 0; }
.cf-reel-item-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  transition: color 0.3s ease;
}
/* Mục CHƯA chọn thì cắt còn 2 dòng — danh sách phải quét được bằng mắt.
   Mục ĐANG chọn thì mở hết ra (xem .is-active bên dưới): trước đây dấu "…"
   trông như bấm được mà bấm chẳng ra gì, vì phần chữ bị cắt không hiện ở
   đâu cả — khung video góc dưới in dòng chú thích riêng chứ không in nó. */
.cf-reel-item-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.3rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
.cf-reel-thumb.is-active .cf-reel-item-text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.cf-pillars.tone-dark .cf-reel-item-title,
.cf-pillars.has-cinema .cf-reel-item-title { color: var(--snow); }
.cf-pillars.tone-dark .cf-reel-item-text,
.cf-pillars.has-cinema .cf-reel-item-text { color: rgba(250, 250, 250, 0.7); }

.cf-reel-thumb.is-active .cf-reel-item-title { color: var(--gold-ink); }
.cf-pillars.tone-dark .cf-reel-thumb.is-active .cf-reel-item-title,
.cf-pillars.has-cinema .cf-reel-thumb.is-active .cf-reel-item-title { color: var(--gold); }

@media (hover: hover) and (pointer: fine) {
  .cf-reel-thumb:hover { padding-left: 0.7rem; }
  .cf-reel-thumb:hover .cf-reel-item-title { color: var(--gold-ink); }
  .cf-pillars.tone-dark .cf-reel-thumb:hover .cf-reel-item-title,
  .cf-pillars.has-cinema .cf-reel-thumb:hover .cf-reel-item-title { color: var(--gold); }
}
.cf-reel-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

@media (max-width: 900px) {
  /* Màn hẹp: bảng nội dung không nổi đè nữa mà nằm dưới video — đè lên
     thì chỉ còn vài chục pixel cho video, xem không ra gì. */
  .cf-reel { height: auto; }
  .cf-reel-stage { position: relative; aspect-ratio: 16 / 9; }
  .cf-reel-side {
    position: static;
    translate: none;
    width: auto;
    max-height: none;
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(250, 250, 250, 0.14);
    background: var(--charcoal);
    backdrop-filter: none;
  }
  .cf-reel.is-collapsed .cf-reel-side {
    /* Thu gọn trên điện thoại: cụp lại hẳn thay vì trượt ngang ra ngoài */
    display: none;
    opacity: 1;
    translate: none;
  }
  .cf-reel-caption { position: static; text-align: left; padding: 1rem 1.25rem 0; }
  /* Canh trái rồi thì bỏ lề tự động, không thì mô tả bị đẩy sang phải */
  .cf-reel-meta { margin-left: 0; margin-right: auto; max-width: none; }
  .cf-reel-scrim { display: none; }
  .cf-reel-thumb { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-reel-thumb img, .cf-reel-thumb::after { transition: none; }
}

/* ═══════════════════════════════════════════
   TRỤ CỘT — NỀN VIDEO 21:9, CHỮ ĐÈ LÊN

   Section trở thành một khung hình điện ảnh:
   video chạy nền, toàn bộ nội dung nằm đè lên.

   Chiều cao lấy theo tỉ lệ 21:9 của bề rộng màn
   hình, nhưng CHẶN TRẦN ở một màn hình — màn siêu
   rộng 3440px mà tính đúng 21:9 sẽ ra 1474px,
   cao hơn cả màn hình, khách phải cuộn mới đọc hết
   một section đáng lẽ liếc là thấy.
═══════════════════════════════════════════ */
.cf-pillars.has-cinema {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(calc(100vw * 9 / 21), 100svh);
  color: var(--snow);
}
/* Nội dung phải VỪA trong khung 21:9, không thì section tự giãn cao và tỉ lệ
   điện ảnh mất hẳn.

   Đã thử xếp tiêu đề trái / danh sách phải: HỎNG. Ba ô bị ép vào cột rộng
   213px, chữ xuống dòng liên tục, mỗi ô cao 944px — tệ hơn cả lúc đầu.
   Lưới ngang cần trọn bề ngang mới ngắn được.

   Nay: xếp dọc như cũ, chỉ nén khoảng đệm và cỡ chữ. Section được canh
   giữa theo chiều dọc nên phần đệm do min-height lo, không cần padding to. */
.cf-pillars.has-cinema > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.cf-pillars.has-cinema { padding-block: clamp(2.5rem, 5vh, 3.5rem); }
.cf-pillars.has-cinema .cf-pillars-head {
  margin-bottom: 2rem;
  max-width: 68ch;
}
.cf-pillars.has-cinema .cf-pillars-title { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
.cf-pillars.has-cinema .cf-pillars-lead p { font-size: 0.96rem; line-height: 1.7; }

/* Video nền của section + ẢNH TĨNH riêng từng ô = hai lớp hình chồng nhau,
   vừa loãng vừa đội chiều cao (đo được: ô cao 798px thì ảnh chiếm 512px,
   chính nó phá tỉ lệ 21:9). Nên khi có video nền thì ẩn ảnh tĩnh của ô.

   NHƯNG ô nào có VIDEO RIÊNG thì vẫn giữ — đó là nội dung người dùng cố ý
   đặt cho từng mạch, không phải ảnh minh hoạ thừa. */
.cf-pillars.has-cinema .cf-pillar:not(.has-video) .cf-pillar-media { display: none; }
.cf-pillars.has-cinema .cf-pillar.has-video .cf-pillar-media { margin-bottom: 0.9rem; }

/* ─── Video riêng của từng ý ─── */
.cf-pillar-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf-pillar.has-video .cf-pillar-media {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  background: var(--charcoal);
}
/* Giảm chuyển động: dừng video, để lại khung chờ (poster) */
@media (prefers-reduced-motion: reduce) {
  .cf-pillar-video { display: none; }
  .cf-pillar.has-video .cf-pillar-media {
    background-size: cover;
    background-position: center;
  }
}

.cf-pillars.has-cinema .cf-pillars-grid { gap: 1.5rem 2.25rem; }
.cf-pillars.has-cinema .cf-pillar { padding-top: 1.1rem; }
.cf-pillars.has-cinema .cf-pillar-title { font-size: 1.05rem; }
.cf-pillars.has-cinema .cf-pillar-text { font-size: 0.88rem; line-height: 1.62; }

/* Cảnh báo định dạng video — chỉ người sửa trang thấy */
.cf-cine-warn {
  position: relative;
  z-index: 3;
  max-width: 46rem;
  margin: 0 auto 1.5rem;
}

.cf-pillars-cine {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Ảnh chờ đặt làm nền để khi ẩn video (giảm chuyển động) vẫn còn hình */
  background-size: cover;
  background-position: center;
  background-color: var(--obsidian);
}
.cf-pillars-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Một núm duy nhất chỉnh độ tối, do người sửa trang kéo trong bảng cài đặt */
.cf-pillars-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    #0A0A0A 0%,
    rgba(10, 10, 10, 0.58) 58%,
    rgba(10, 10, 10, 0.22) 100%
  );
  opacity: var(--cf-cine-overlay, 0.62);
}

/* Chữ luôn là chữ sáng, bất kể "Nền section" đang đặt là gì —
   nền lúc này là video chứ không còn là màu nền của section nữa. */
.cf-pillars.has-cinema .cf-pillars-title,
.cf-pillars.has-cinema .cf-pillar-title,
.cf-pillars.has-cinema .cf-pillar-row-title { color: var(--snow); }
.cf-pillars.has-cinema .cf-pillars-lead p,
.cf-pillars.has-cinema .cf-pillar-text,
.cf-pillars.has-cinema .cf-pillar-row-text p { color: rgba(250, 250, 250, 0.82); }
.cf-pillars.has-cinema .cf-section-eyebrow { color: var(--gold); }
.cf-pillars.has-cinema .cf-accent { color: var(--gold); }
.cf-pillars.has-cinema .cf-pillar { border-top-color: rgba(250, 250, 250, 0.26); }
.cf-pillars.has-cinema .cf-pillar-num { color: rgba(250, 250, 250, 0.42); }

/* Điện thoại: 21:9 trên màn 390px chỉ ra 167px — không đủ chỗ cho chữ.
   Bỏ tỉ lệ cố định, để nội dung quyết định chiều cao, video phủ nền. */
@media (max-width: 1100px) {
  .cf-pillars.has-cinema { min-height: auto; padding-block: 4rem; }
}
@media (max-width: 900px) {
  .cf-pillars.has-cinema {
    min-height: auto;
    padding-block: 4.5rem;
  }
  .cf-pillars-scrim { opacity: calc(var(--cf-cine-overlay, 0.62) + 0.18); }
}

/* Giảm chuyển động: ẩn video, giữ lại ảnh chờ làm nền tĩnh */
@media (prefers-reduced-motion: reduce) {
  .cf-pillars-video { display: none; }
}

/* ═══════════════════════════════════════════
   ẢNH + CHỮ — BỐ CỤC "CHỮ · ẢNH · CHỮ"

   Ảnh đứng giữa hai cột chữ. Dùng để gộp hai
   section liền nhau cùng nói về một chuyện —
   ví dụ câu chuyện thành lập và người sáng lập —
   thành một mạch đọc, thay vì hai khối rời cùng
   dùng chung một tấm ảnh chủ đề.

   Ảnh ở giữa nên phải cao hơn ảnh bố cục hai cột,
   không thì hai cột chữ đổ dài xuống mà ảnh lửng
   lơ ở giữa.
═══════════════════════════════════════════ */
.cf-feature.lay-duo .cf-feature-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 3.25rem);
  align-items: center;
}
.cf-feature.lay-duo .cf-feature-media { order: 2; }
.cf-feature.lay-duo .cf-feature-body { order: 1; }
.cf-feature.lay-duo .cf-feature-body--two { order: 3; }
.cf-feature.lay-duo .cf-feature-img { aspect-ratio: 3 / 4; }

/* Tiêu đề của cột chữ bên phải — nhỏ hơn tiêu đề chính một bậc để
   thấy rõ đây là phần phụ chứ không phải một section mới. */
.cf-feature-subtitle {
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.cf-feature.tone-dark .cf-feature-subtitle { color: var(--snow); }
.cf-feature.lay-duo .cf-feature-body--two .cf-feature-text p {
  font-size: 0.98rem;
}

@media (max-width: 1100px) {
  .cf-feature.lay-duo .cf-feature-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* Ảnh trải hết bề ngang phía dưới hai cột chữ, không bị bóp thành cột hẹp */
  .cf-feature.lay-duo .cf-feature-media { order: 3; grid-column: 1 / -1; }
  .cf-feature.lay-duo .cf-feature-img { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .cf-feature.lay-duo .cf-feature-inner { grid-template-columns: 1fr; }
  .cf-feature.lay-duo .cf-feature-media { order: 2; }
  .cf-feature.lay-duo .cf-feature-body--two { order: 3; }
}

/* ═══════════════════════════════════════════
   DÒNG THỜI GIAN — KIỂU DẢI ẢNH MỞ RỘNG

   Dùng lại nguyên bộ .cf-showcase-* nên thừa
   hưởng cả CSS lẫn JS sẵn có. Ở đây chỉ chỉnh
   những chỗ khác biệt: bước quy trình có thêm
   dòng thời lượng (cf-panel-sub) mà dải ảnh gốc
   không có.
═══════════════════════════════════════════ */
.cf-tl-panels { height: clamp(420px, 58vh, 560px); }

/* Ô đóng hẹp nên số thứ tự phải nhỏ lại, không thì đè lên chữ dọc */
.cf-tl-panels .cf-panel-num {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  opacity: 0.75;
}
.cf-tl-panels .cf-panel-sub {
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.66rem;
  margin-top: 0.35rem;
}
.cf-tl-panels .cf-panel-title { font-size: clamp(1.15rem, 1.9vw, 1.6rem); }
.cf-tl-panels .cf-panel-para {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(250, 250, 250, 0.82);
}
/* Ô đang mở cần rộng hơn dải ảnh gốc vì có cả đoạn mô tả */
@media (hover: hover) and (pointer: fine) {
  .cf-tl-panels .cf-panel.is-open { flex-grow: 6; }
  .cf-tl-panels:hover .cf-panel.is-open:not(:hover) { flex-grow: 1; }
  .cf-tl-panels .cf-panel:hover { flex-grow: 7; }
}
@media (max-width: 900px) {
  .cf-tl-panels { height: auto; }
}

/* ═══════════════════════════════════════════
   DẢI ẢNH MỞ RỘNG — LẤP KHOẢNG TRỐNG DƯỚI

   Dải ảnh cao cố định, còn cột chữ bên trái thì
   ngắn, nên phần dưới section hụt ra một mảng
   trống. Cho section cao đúng một màn hình và
   canh giữa theo chiều dọc: mảng trống chia đều
   trên dưới thành khoảng thở, thay vì dồn hết
   xuống đáy trông như thiếu nội dung.
═══════════════════════════════════════════ */
@media (min-width: 901px) {
  .cf-showcase {
    display: flex;
    align-items: center;
    min-height: 100svh;
  }
  .cf-showcase > .cf-showcase-inner { width: 100%; }
}

/* ═══════════════════════════════════════════
   ẢNH TRONG TỪNG BƯỚC & HIỆU ỨNG CUỘN

   Timeline và Danh sách dịch vụ đều là "một
   chuỗi bước". Chữ không thôi thì đọc như bản
   kê khai; có ảnh mới ra chất phim.

   Ảnh là TUỲ CHỌN: bước nào chưa có ảnh vẫn
   hiện bình thường, chỉ mất cột ảnh.
═══════════════════════════════════════════ */

/* ─── Ảnh trong dòng thời gian ─── */
.cf-tl-media {
  margin: 0 0 1.1rem;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.cf-tl-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kiểu dòng dọc: ảnh nằm bên phải phần chữ, thành hai cột */
.cf-timeline.lay-line .cf-tl-item.has-media .cf-tl-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: 1.6rem;
  align-items: start;
}
.cf-timeline.lay-line .cf-tl-item.has-media .cf-tl-media {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
}
.cf-timeline.lay-line .cf-tl-item.has-media .cf-tl-img { aspect-ratio: 4 / 3; }

@media (max-width: 760px) {
  .cf-timeline.lay-line .cf-tl-item.has-media .cf-tl-body {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .cf-timeline.lay-line .cf-tl-item.has-media .cf-tl-media {
    grid-column: 1;
    grid-row: auto;
    order: -1;
  }
}

/* Kiểu thẻ: ảnh nằm trên cùng, tràn hết bề ngang thẻ */
.cf-timeline.lay-cards .cf-tl-item.has-media { padding-top: 0; overflow: hidden; }
.cf-timeline.lay-cards .cf-tl-media {
  margin: 0 -1.5rem 1.3rem;
  border-radius: 0;
}
.cf-timeline.lay-cards .cf-tl-item.has-media .cf-tl-marker { margin-top: 0; }

/* ─── Ảnh trong danh sách dịch vụ ─── */
.cf-service.has-media { align-items: start; }
.cf-service-media {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  grid-column: 3;
  grid-row: 1 / span 2;
}
.cf-service-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Có ảnh thì "Bạn nhận được" tụt xuống dưới phần chữ, nhường cột 3 cho ảnh */
.cf-service.has-media .cf-service-deliverables {
  grid-column: 2;
  grid-row: 2;
}
@media (max-width: 900px) {
  .cf-service-media { grid-column: 2; grid-row: auto; }
  .cf-service.has-media .cf-service-deliverables { grid-column: 2; grid-row: auto; }
}

@media (hover: hover) and (pointer: fine) {
  .cf-tl-item:hover .cf-tl-img,
  .cf-service:hover .cf-service-img { transform: scale(1.05); }
}

/* ─── Hiện dần theo thứ tự khi cuộn tới ───
   Section mang [data-reveal] được main.js gắn .is-visible khi lọt tầm nhìn.
   Từng bước lệch nhịp theo --i do render.php gán, nên mắt đi theo đúng
   thứ tự quy trình thay vì thấy cả khối bật lên một lượt. */
.cf-fx.fx-ready .cf-timeline .cf-tl-item,
.cf-fx.fx-ready .cf-services-list .cf-service {
  opacity: 0;
  transform: translateY(22px);
}
.cf-fx .cf-timeline.is-visible .cf-tl-item,
.cf-fx .cf-services.is-visible .cf-service {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s ease calc(var(--i, 0) * 0.08s),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.08s);
}

/* Lưới an toàn: JavaScript hỏng thì sau cùng vẫn phải đọc được nội dung */
.no-js .cf-timeline .cf-tl-item,
.no-js .cf-services-list .cf-service { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cf-fx.fx-ready .cf-timeline .cf-tl-item,
  .cf-fx.fx-ready .cf-services-list .cf-service {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cf-tl-img, .cf-service-img { transition: none; }
}

/* ═══════════════════════════════════════════
   CHỮ NHẤN TRONG TIÊU ĐỀ

   Gõ **cụm chữ** trong ô Tiêu đề là cụm đó thành
   nghiêng, vàng đồng — tương phản với phần chữ
   đậm còn lại.

   EB Garamond: chữ có chân cổ điển, tỉ lệ hẹp
   nên đứng cạnh Barlow Condensed thì hoà, không
   đá nhau như các kiểu didone bề ngang rộng
   (đã thử Playfair Display — quá rộng và tương
   phản nét quá mạnh, nhìn lạc khỏi phần còn lại).

   Nét đủ dày để dấu tiếng Việt còn rõ ở cỡ nhỏ —
   đây là lý do loại Cormorant Garamond, đẹp nhưng
   dấu mảnh tới mức gãy.

   Chỉ nạp đúng một kiểu nghiêng 500, xem
   chamfilm_fonts_url.
═══════════════════════════════════════════ */
.cf-accent {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  /* Garamond có x-height thấp nên phải phóng lên mới cân
     với Barlow Condensed ở cùng dòng */
  font-size: 1.04em;
  color: var(--gold-ink);
  /* Chữ nghiêng đứng cạnh chữ đậm dễ bị dính, nới nhẹ ra */
  padding-inline: 0.08em;
}
.dark .cf-accent,
.tone-dark .cf-accent,
.cf-page-header .cf-accent { color: var(--gold); }

/* ═══════════════════════════════════════════
   KHUNG GÓC VÀNG — DẤU NHẬN DIỆN TRÊN MỌI ẢNH

   Bốn nét vàng ở góc, gợi khung ngắm máy quay.
   Trước đây chỉ bật được cho từng khối Ảnh+Chữ;
   nay là mặc định của cả site để mọi tấm ảnh
   mang cùng một dấu hiệu thương hiệu.

   Vẽ bằng ::after nên không cần thêm thẻ HTML
   nào — đã kiểm tra ::after còn trống ở tất cả
   các khung ảnh này (chỉ ::before của bố cục
   tràn màn hình là đang dùng).

   Cố ý BỎ QUA dải ảnh mở rộng (.cf-panel-media):
   ô đóng chỉ rộng 90px, kẻ khung vào đó thành
   một mớ vạch chồng chéo.
═══════════════════════════════════════════ */
/* CHỈ đặt position cho khung nào đang là static.
   ::after chỉ cần cha đã được định vị — absolute hay relative đều xong việc.
   Ghi đè bừa lên khung đã có sẵn position là hỏng bố cục:
     .film-card-link  vốn absolute+inset:0 để phủ kín thẻ → đổi sang relative
                      là thẻ co về cao 0px, ảnh bên trong biến mất (thẻ phim
                      trắng trơn).
     .cf-cap-media    và .cf-feature-media của bố cục tràn màn hình cũng vậy.
   Những khung dưới đây đã tự có position rồi nên KHÔNG liệt kê ở đây:
   .film-card-link · .cf-cap-media · .member-card-media · .cf-pillar-row-media
   · .cf-feature.lay-fullbleed .cf-feature-media */
.story-card-thumb,
.cf-feature:not(.has-frame):not(.lay-fullbleed) .cf-feature-media {
  position: relative;
}

.film-card-link::after,
.story-card-thumb::after,
.member-card-media::after,
.cf-cap-media::after,
.cf-pillar-row-media::after,
.cf-feature:not(.has-frame) .cf-feature-media::after {
  content: '';
  position: absolute;
  inset: 0.7rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0.72;
  transition: opacity 0.4s ease, inset 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  background:
    linear-gradient(var(--gold), var(--gold)) top    left  / 1.5px 1.55rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) top    left  / 1.55rem 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top    right / 1.5px 1.55rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) top    right / 1.55rem 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left  / 1.5px 1.55rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left  / 1.55rem 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 1.5px 1.55rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 1.55rem 1.5px no-repeat;
}

/* Rê chuột: khung nở nhẹ ra mép và sáng lên — giống lúc lấy nét ống kính */
@media (hover: hover) and (pointer: fine) {
  .film-card:hover .film-card-link::after,
  .story-card:hover .story-card-thumb::after,
  .member-card:hover .member-card-media::after,
  .cf-cap.is-link .cf-cap-inner:hover .cf-cap-media::after {
    opacity: 1;
    inset: 0.45rem;
  }
}

/* Bố cục tràn màn hình: ảnh phủ kín section nên khung phải lùi vào sâu hơn,
   không thì bốn nét dính sát mép màn hình trông như lỗi hiển thị.
   Nằm dưới lớp chữ (z-index 1) để không cắt ngang tiêu đề. */
.cf-feature.lay-fullbleed .cf-feature-media::after {
  inset: clamp(1rem, 2.5vw, 2.25rem);
  z-index: 1;
}

/* Khung của tuỳ chọn "Khung góc vàng quanh ảnh" trước đây vẽ ở inset:-0.75rem,
   tức NGOÀI mép ảnh. Section lại có overflow:hidden, nên với bố cục ảnh chạm
   mép màn hình thì hai góc bên ngoài bị cắt mất — người dùng bật tuỳ chọn mà
   không thấy khung đâu. Kéo vào trong, đồng thời khớp luôn với khung nhận
   diện chung ở trên. */
.cf-feature-frame {
  inset: 0.7rem;
  opacity: 0.85;
}

/* Ô ảnh trong lưới năng lực nhỏ hơn → khung thu lại cho cân */
.cf-cap-media::after { inset: 0.6rem; }

@media (max-width: 680px) {
  .film-card-link::after,
  .story-card-thumb::after,
  .member-card-media::after,
  .cf-cap-media::after,
  .cf-pillar-row-media::after,
  .cf-feature:not(.has-frame):not(.lay-fullbleed) .cf-feature-media::after {
    inset: 0.5rem;
    background-size:
      1.5px 1.1rem, 1.1rem 1.5px, 1.5px 1.1rem, 1.1rem 1.5px,
      1.5px 1.1rem, 1.1rem 1.5px, 1.5px 1.1rem, 1.1rem 1.5px;
  }
}

/* Ai bật "giảm chuyển động" thì khung đứng yên */
@media (prefers-reduced-motion: reduce) {
  .film-card-link::after,
  .story-card-thumb::after,
  .member-card-media::after,
  .cf-cap-media::after,
  .cf-pillar-row-media::after { transition: none; }
}

/* ═══════════════════════════════════════════
   LƯỚI NĂNG LỰC (chamfilm/capabilities)

   Ô kêu gọi nằm chung lưới với các ô ảnh, nên
   nó phải cao đúng bằng chúng — dùng grid với
   các ô tự kéo bằng nhau thay vì đặt chiều cao
   cứng, để dòng chữ dài ngắn thế nào cũng khớp.
═══════════════════════════════════════════ */
.cf-caps { padding: 6.5rem 0; }
.cf-caps.tone-surface {
  background: var(--surface);
  border-block: 1px solid var(--divider);
}
.cf-caps.tone-dark { background: var(--footer-bg); color: var(--snow); }
.cf-caps.tone-dark .cf-caps-title { color: var(--snow); }
.cf-caps.tone-dark .cf-caps-lead p { color: rgba(250, 250, 250, 0.78); }
.cf-caps.tone-dark .cf-section-eyebrow { color: var(--gold); }

/* ─── Mở đầu: tiêu đề trái, dẫn nhập phải ─── */
.cf-caps-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: start;
  margin-bottom: 3.25rem;
}
.cf-caps-title {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.04;
  color: var(--ink);
  /* Đủ rộng cho tiêu đề ngắn nằm gọn một dòng, vẫn ngắt sớm
     với tiêu đề dài để không kéo thành một vệt chữ mỏng. */
  max-width: 24ch;
}
.cf-caps-lead {
  display: grid;
  gap: 0.85rem;
  padding-top: 0.6rem;
  max-width: 52ch;
}
.cf-caps-lead p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-dim);
}

/* ─── Lưới ─── */
.cf-caps-grid {
  display: grid;
  grid-template-columns: repeat(var(--cf-caps-cols, 3), minmax(0, 1fr));
  gap: 1.15rem;
  list-style: none;
}
.cf-cap {
  position: relative;
  min-height: clamp(232px, 21vw, 268px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--forest);
}
.cf-cap-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: 100%;
  padding: 1.5rem 1.5rem 1.4rem;
  text-decoration: none;
  color: inherit;
}

/* ─── Ảnh nền ─── */
.cf-cap-media { position: absolute; inset: 0; display: block; }
.cf-cap-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.cf-cap-empty {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 30% 0%, rgba(45, 74, 62, 0.9) 0%, transparent 70%),
    var(--forest);
}
/* Lớp tối chân ô — chữ trắng phải đọc được trên mọi tấm ảnh, kể cả ảnh sáng */
.cf-cap-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.72) 32%,
    rgba(10, 10, 10, 0.18) 62%,
    rgba(10, 10, 10, 0.05) 100%
  );
  transition: opacity 0.45s ease;
}

/* ─── Chữ trong ô ─── */
.cf-cap-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cf-cap-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(250, 250, 250, 0.14);
  border: 1px solid rgba(250, 250, 250, 0.2);
  backdrop-filter: blur(6px);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--snow);
}
.cf-cap-badge-dot {
  width: 6px; height: 6px;
  flex: 0 0 auto;
  rotate: 45deg;
  background: var(--gold);
}
.cf-cap-title {
  display: block;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--snow);
}
.cf-cap-text {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(250, 250, 250, 0.76);
}

/* ─── Ô có liên kết: nhấc nhẹ khi rê chuột ─── */
@media (hover: hover) and (pointer: fine) {
  .cf-cap.is-link .cf-cap-inner:hover .cf-cap-img { transform: scale(1.06); }
  .cf-cap.is-link .cf-cap-inner:hover .cf-cap-scrim { opacity: 0.82; }
}
.cf-cap-inner:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

/* ─── Ô kêu gọi ─── */
.cf-cap--cta { background: var(--charcoal); }
.cf-cap--cta .cf-cap-inner { justify-content: center; padding: 1.9rem 1.75rem; }
.cf-cap-cta-title {
  display: block;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--snow);
}
.cf-cap-hl { color: var(--gold); font-style: normal; }
.cf-cap--cta .cf-cap-text { margin-top: 0.75rem; }
.cf-cap-btn { margin-top: 1.4rem; }

/* Nền tối: ô kêu gọi phải tách khỏi nền section, không thì chìm nghỉm */
.cf-caps.tone-dark .cf-cap--cta {
  background: var(--obsidian);
  border: 1px solid rgba(250, 250, 250, 0.12);
}

/* Vào trang: các ô nổi lên so le */
.cf-fx.fx-ready .cf-caps-grid .cf-cap {
  opacity: 0;
  transform: translateY(26px);
}
.cf-fx .cf-caps-grid.fx-in .cf-cap {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease calc(var(--i, 0) * 0.06s),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.06s);
}

@media (max-width: 1100px) {
  .cf-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cf-caps-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .cf-caps-title { max-width: none; }
  .cf-caps-lead { padding-top: 0; }
}
@media (max-width: 680px) {
  .cf-caps { padding: 3.5rem 0; }
  .cf-caps-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cf-cap { min-height: 216px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-cap-img, .cf-cap-scrim { transition: none; }
  .cf-fx .cf-caps-grid.fx-in .cf-cap { transition: none; }
}