/* 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. */

/* ═══════════════════════════════════════════
   BỐ CỤC — TOÀN MÀN HÌNH
   Ảnh tràn hết chiều ngang, chữ đè lên. Đây là
   cách tạo điểm nhấn mạnh nhất khi trong tay
   chỉ có vài tấm ảnh thật sự đẹp.
═══════════════════════════════════════════ */
.cf-feature.lay-fullbleed {
  position: relative;
  padding: 0;
  /* min-height là mức TỐI THIỂU — chữ dài thì section tự cao thêm,
     không bao giờ bị cắt mất. */
  min-height: min(78svh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.cf-feature.lay-fullbleed .cf-feature-inner {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--cf-container, 1400px);
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem) clamp(2.5rem, 6vh, 4.5rem);
  gap: 0;
}
.cf-feature.lay-fullbleed .cf-feature-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
.cf-feature.lay-fullbleed .cf-feature-img {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
/* Lớp tối để chữ đọc được trên bất kỳ ảnh nào */
/* Lớp phủ nằm TRONG khối ảnh (z-index 1 của riêng nó), còn khối chữ
   đứng ở tầng 2 bên ngoài — nên phủ tối ảnh mà không đè lên chữ. */
.cf-feature.lay-fullbleed .cf-feature-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(6, 8, 7, 0.94) 0%, rgba(6, 8, 7, 0.72) 28%, rgba(6, 8, 7, 0.3) 58%, rgba(6, 8, 7, 0.12) 100%),
    linear-gradient(to right, rgba(6, 8, 7, 0.62) 0%, transparent 62%);
}
.cf-feature.lay-fullbleed .cf-feature-body { max-width: 62ch; }
.cf-feature.lay-fullbleed .cf-section-eyebrow { color: var(--gold); }
.cf-feature.lay-fullbleed .cf-feature-title {
  color: #fff;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
}
.cf-feature.lay-fullbleed .cf-feature-text p { color: rgba(255, 255, 255, 0.86); }
.cf-feature.lay-fullbleed .cf-feature-list li { color: rgba(255, 255, 255, 0.8); }
.cf-feature.lay-fullbleed .cf-feature-caption {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 3;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
}
.cf-feature.lay-fullbleed .btn-outline {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
}
.cf-feature.lay-fullbleed .btn-outline:hover {
  color: var(--obsidian); background: #fff; border-color: #fff;
}

@media (max-width: 900px) {
  .cf-feature.lay-fullbleed { min-height: 62svh; }
  .cf-feature.lay-fullbleed .cf-feature-inner { padding-bottom: 3rem; }
  .cf-feature.lay-fullbleed .cf-feature-caption { display: none; }
}

/* ═══════════════════════════════════════════
   BỐ CỤC — CHỮ ĐÈ MÉP ẢNH (kiểu tạp chí)
═══════════════════════════════════════════ */
.cf-feature.lay-overlap .cf-feature-inner {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0;
  align-items: center;
}
.cf-feature.lay-overlap .cf-feature-body {
  position: relative;
  z-index: 2;
  margin-left: -7rem;
  padding: 3rem;
  background: var(--canvas);
  box-shadow: 0 24px 60px rgba(6, 8, 7, 0.18);
}
.cf-feature.lay-overlap.media-right .cf-feature-body {
  margin-left: 0;
  margin-right: -7rem;
}
.cf-feature.lay-overlap.tone-dark .cf-feature-body {
  background: var(--charcoal);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
/* Tỉ lệ ảnh do người sửa trang chọn (.ratio-*) và các luật đó nằm ở phần
   "Ảnh" bên dưới file. Đừng đặt aspect-ratio cho .cf-feature-img ở đây:
   cùng độ ưu tiên mà đứng trước thì luôn thua, luật viết ra không chạy.
   Chỗ ghi đè đúng nằm ngay sau khối .ratio-*. */

@media (max-width: 900px) {
  .cf-feature.lay-overlap .cf-feature-inner { grid-template-columns: 1fr; }
  .cf-feature.lay-overlap .cf-feature-body,
  .cf-feature.lay-overlap.media-right .cf-feature-body {
    margin: -3rem 1rem 0;
    padding: 2rem;
  }
}

/* ═══════════════════════════════════════════
   LƯỚI TÁC PHẨM — tương phản mạnh hơn khi rê
═══════════════════════════════════════════ */
.film-card img { filter: saturate(0.85) brightness(0.82) contrast(1.05); }
.film-card:hover img { filter: saturate(1.05) brightness(1) contrast(1.02); }
.film-card-play {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.3s, background 0.3s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.film-card:hover .film-card-play { transform: translate(-50%, -50%) scale(1.12); }

/* Ảnh trong trụ cột theo cùng tông cho đồng bộ */
.cf-pillar-row-img, .cf-pillar-img {
  filter: saturate(0.92) contrast(1.03);
  transition: filter 0.6s ease;
}
.cf-pillar-row:hover .cf-pillar-row-img,
.cf-pillar:hover .cf-pillar-img { filter: saturate(1.05) contrast(1); }

@media (prefers-reduced-motion: reduce) {
  .cf-feature.has-drift .cf-feature-img { animation: none; }
}

/* ═══════════════════════════════════════════
   v3.1 — HOẠ TIẾT NỀN CHO SECTION KHÔNG CÓ ẢNH

   Các mảng nền một màu trơn nhìn trống và rẻ.
   Thay vì bắt buộc phải có ảnh, mỗi section
   được phủ một lớp hoạ tiết đường đồng mức
   (giống bản đồ địa hình) rất mờ, cộng một
   vệt sáng toả — đủ để có chiều sâu mà không
   tốn thêm một byte ảnh nào.
═══════════════════════════════════════════ */
/* Bản thân section phải tự tạo một tầng xếp lớp riêng.
   Thiếu isolation, lớp hoạ tiết z-index:-1 bên dưới không
   dừng lại sau nội dung của section mà tụt hẳn ra sau nền
   trang — section biến mất khỏi tầm với của chuột. */
.cf-pillars.tone-dark,
.cf-services.tone-dark,
.cf-timeline.tone-dark,
.cf-faq.tone-dark,
.cf-feature.tone-dark,
.cf-showcase.tone-dark,
.cf-caps.tone-dark { position: relative; isolation: isolate; }

/* Đường đồng mức + vệt sáng gộp trong MỘT lớp ::after.
   Cố ý không đụng tới ::before — hiệu ứng "vạch sáng chạy"
   trong effects.css đang dùng chỗ đó. Tách ra hai file mà
   giành nhau cùng một pseudo-element là lỗi rất khó tìm.

   LƯU Ý: mọi dòng ở đây BẮT BUỘC có ::after. Sót một dòng là
   cả khối khai báo này (inset:0, z-index:-1, pointer-events:none)
   đổ thẳng lên thẻ section, khiến nó chìm sau nền trang và
   không còn nhận được chuột — nhìn vẫn bình thường nên rất khó
   lần ra. Đã từng xảy ra đúng như vậy với .cf-showcase.tone-dark. */
.cf-pillars.tone-dark::after,
.cf-services.tone-dark::after,
.cf-timeline.tone-dark::after,
.cf-faq.tone-dark::after,
.cf-feature.tone-dark::after,
.cf-showcase.tone-dark::after,
.cf-caps.tone-dark::after,
.cf-team-section.tone-dark::after,
.quote-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 118%, rgba(28, 58, 46, 0.55) 0%, transparent 68%),
    radial-gradient(ellipse 60% 45% at 88% -12%, rgba(139, 158, 149, 0.10) 0%, transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%238B9E95' stroke-width='1' opacity='0.16'%3E%3Cpath d='M-40 300c80-70 150-40 220 10s150 60 240-20 180-40 220 10'/%3E%3Cpath d='M-40 340c80-70 150-40 220 10s150 60 240-20 180-40 220 10'/%3E%3Cpath d='M-40 384c86-74 158-42 232 12s154 62 244-22 176-38 216 8'/%3E%3Cpath d='M-40 432c92-78 166-44 244 14s158 64 248-24 172-36 212 6'/%3E%3Cpath d='M-40 486c98-82 174-46 256 16s162 66 252-26 168-34 208 4'/%3E%3Cpath d='M-40 180c70-58 132-32 192 8s130 50 208-16 156-32 190 8'/%3E%3Cpath d='M-40 132c64-52 120-28 174 6s118 44 188-14 142-28 172 6'/%3E%3Cpath d='M-40 88c56-46 106-24 154 4s104 38 166-12 126-24 152 4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 560px 560px;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* Section nền nhạt — hoạ tiết mảnh hơn nhiều, chỉ để bớt phẳng */
.cf-pillars.tone-surface::after,
.cf-services.tone-surface::after,
.cf-timeline.tone-surface::after,
.cf-faq.tone-surface::after,
.cf-feature.tone-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%235A6B60' stroke-width='1' opacity='0.13'%3E%3Cpath d='M-40 300c80-70 150-40 220 10s150 60 240-20 180-40 220 10'/%3E%3Cpath d='M-40 384c86-74 158-42 232 12s154 62 244-22 176-38 216 8'/%3E%3Cpath d='M-40 486c98-82 174-46 256 16s162 66 252-26 168-34 208 4'/%3E%3Cpath d='M-40 180c70-58 132-32 192 8s130 50 208-16 156-32 190 8'/%3E%3Cpath d='M-40 88c56-46 106-24 154 4s104 38 166-12 126-24 152 4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 560px;
}
.cf-pillars.tone-surface,
.cf-services.tone-surface,
.cf-timeline.tone-surface,
.cf-faq.tone-surface { position: relative; isolation: isolate; }

/* Trích dẫn — nền đã khai báo cùng chỗ với bố cục ở trên */
.quote-section::after { opacity: 0.6; }

/* Dải đối tác — vệt sáng mảnh chạy ngang trên dưới */
.partners-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(139, 158, 149, 0.16) 50%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(139, 158, 149, 0.16) 50%, transparent) bottom / 100% 1px no-repeat,
    radial-gradient(ellipse 70% 100% at 50% 50%, rgba(28, 58, 46, 0.45) 0%, transparent 70%);
}

/* Hero chưa chọn ảnh — hoạ tiết đường đồng mức chồng lên nền chuyển sắc */
.hero-bg--empty::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%238B9E95' stroke-width='1' opacity='0.2'%3E%3Cpath d='M-40 384c86-74 158-42 232 12s154 62 244-22 176-38 216 8'/%3E%3Cpath d='M-40 432c92-78 166-44 244 14s158 64 248-24 172-36 212 6'/%3E%3Cpath d='M-40 486c98-82 174-46 256 16s162 66 252-26 168-34 208 4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 560px;
}

/* Ô ảnh trống trong dải mở rộng — dùng lại hoạ tiết cho đồng bộ */
.cf-panel-empty::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='560' viewBox='0 0 400 560'%3E%3Cg fill='none' stroke='%238B9E95' stroke-width='1' opacity='0.22'%3E%3Cpath d='M-40 300c60-52 112-30 164 8s110 46 176-16'/%3E%3Cpath d='M-40 356c64-56 118-32 172 10s114 48 182-18'/%3E%3Cpath d='M-40 418c68-58 124-34 180 12s118 50 188-20'/%3E%3Cpath d='M-40 200c54-46 100-26 148 6s98 40 158-14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}

/* Máy in: bỏ hoạ tiết cho đỡ tốn mực */
@media print {
  .tone-dark::after, .tone-dark::before,
  .tone-surface::after, .quote-section::after,
  .partners-section::after { display: none !important; }
}

/* ═══════════════════════════════════════════
   v3.0 — DẢI CHỮ CHẠY
   Đường phân đoạn giữa hai section, chiếm ít
   chỗ mà tạo nhịp rất mạnh.
═══════════════════════════════════════════ */
.cf-marquee {
  overflow: hidden;
  padding: 1.5rem 0;
  -webkit-user-select: none;
  user-select: none;
}
.cf-marquee.tone-dark    { background: var(--obsidian); }
.cf-marquee.tone-surface { background: var(--surface); border-block: 1px solid var(--divider); }
.cf-marquee.tone-light   { background: var(--canvas); }

.cf-marquee-track {
  display: flex;
  width: max-content;
  animation: cfMarquee var(--cf-marquee-speed, 34s) linear infinite;
}
.cf-marquee.is-reverse .cf-marquee-track { animation-direction: reverse; }
.cf-marquee:hover .cf-marquee-track { animation-play-state: paused; }
.cf-marquee-group { display: flex; align-items: center; }

.cf-marquee-word {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 2rem;
}
.cf-marquee.size-medium .cf-marquee-word { font-size: clamp(2rem, 4vw, 3.25rem); }
.cf-marquee.size-large  .cf-marquee-word { font-size: clamp(3rem, 7vw, 6rem); }
.cf-marquee.size-huge   .cf-marquee-word { font-size: clamp(4rem, 11vw, 9.5rem); }

.cf-marquee.tone-dark .cf-marquee-word    { color: var(--snow); }
.cf-marquee.tone-surface .cf-marquee-word,
.cf-marquee.tone-light .cf-marquee-word   { color: var(--ink); }

/* Chữ viền rỗng — nhẹ mắt hơn khi để cỡ rất lớn */
.cf-marquee.style-outline .cf-marquee-word {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
}
.cf-marquee.tone-dark.style-outline .cf-marquee-word {
  -webkit-text-stroke-color: rgba(250, 250, 250, 0.55);
}
.cf-marquee.tone-surface.style-outline .cf-marquee-word,
.cf-marquee.tone-light.style-outline .cf-marquee-word {
  -webkit-text-stroke-color: rgba(20, 20, 20, 0.35);
}

.cf-marquee-sep {
  font-size: 1.1rem;
  color: var(--mist);
  opacity: 0.7;
  flex: 0 0 auto;
}
.cf-marquee.size-huge .cf-marquee-sep { font-size: 1.6rem; }

@keyframes cfMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-marquee-track { animation: none; }
}

/* ═══════════════════════════════════════════
   v2.8 — DẢI ẢNH MỞ RỘNG
   Chữ bên trái, dải ảnh dọc bên phải. Rê chuột
   (hoặc bấm trên điện thoại) để ô mở rộng ra.
═══════════════════════════════════════════ */
.cf-showcase { padding: 6.5rem 0; overflow: hidden; }
.cf-showcase.tone-surface {
  background: var(--surface);
  border-block: 1px solid var(--divider);
}
.cf-showcase.tone-dark { background: var(--obsidian); color: var(--snow); }
.cf-showcase.tone-dark .cf-showcase-title { color: var(--snow); }
.cf-showcase.tone-dark .cf-showcase-desc { color: rgba(250, 250, 250, 0.75); }
.cf-showcase.tone-dark .cf-section-eyebrow { color: var(--gold); }
.cf-showcase.tone-dark .btn-outline {
  color: rgba(250, 250, 250, 0.88);
  border-color: rgba(250, 250, 250, 0.38);
}
.cf-showcase.tone-dark .btn-outline:hover {
  color: var(--obsidian); background: var(--snow); border-color: var(--snow);
}

.cf-showcase-inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr);
  gap: 4rem;
  align-items: center;
  max-width: 1600px;
  margin-inline: auto;
  padding-left: 1.5rem;
}

/* ── Cột chữ ── */
.cf-showcase-title {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 0.5rem;
}
.cf-showcase-title strong,
.cf-showcase-title b { font-weight: 700; }
.cf-showcase-rule {
  display: block;
  width: 3.5rem; height: 3px;
  background: var(--gold);
  margin: 1.75rem 0;
}
.cf-showcase.tone-dark .cf-showcase-rule { background: var(--gold); }
.cf-showcase-desc {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-dim);
  max-width: 40ch;
}
.cf-showcase-cta { margin-top: 2.25rem; }

/* ── Dải ảnh ── */
.cf-showcase-panels {
  display: flex;
  gap: 3px;
  height: var(--cf-showcase-h, 520px);
  list-style: none;
  min-width: 0;
}

/* Vào trang: từng ô trượt lên so le như một dải phim mở ra */
.cf-fx.fx-ready .cf-showcase-panels .cf-panel {
  opacity: 0;
  transform: translateY(38px);
}
.cf-fx .cf-showcase-panels.fx-in .cf-panel {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease calc(var(--i, 0) * 0.07s),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.07s),
    flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Vạch sáng chạy dọc mép ô đang mở */
.cf-panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--mist), transparent);
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 3;
  pointer-events: none;
}
.cf-panel.is-open::after,
.cf-panel:hover::after { opacity: 0.75; }
.cf-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: var(--charcoal);
  transition: flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Ô đang mở rộng */
.cf-panel.is-open { flex-grow: 5; }

/* Trên máy tính, rê chuột lên ô nào thì ô đó thắng */
@media (hover: hover) and (pointer: fine) {
  /* :not(:hover) — nếu không có, rê vào chính ô đang mở sẽ làm nó CO LẠI
     vì luật này có độ ưu tiên cao hơn luật .cf-panel:hover bên dưới. */
  .cf-showcase-panels:hover .cf-panel.is-open:not(:hover) { flex-grow: 1; }
  .cf-showcase-panels .cf-panel:hover { flex-grow: 6; }
}
/* Dùng bàn phím tab tới cũng mở ra */
.cf-panel:focus-within { flex-grow: 5; }

.cf-panel-trigger {
  display: block;
  position: relative;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.cf-panel-trigger:focus-visible { outline: 2px solid var(--snow); outline-offset: -4px; }

.cf-panel-media { position: absolute; inset: 0; display: block; }
.cf-panel-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.9);
  transition: filter 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-panel.is-open .cf-panel-img,
.cf-panel:hover .cf-panel-img {
  filter: saturate(1) brightness(1);
  transform: scale(1.04);
}

/* Ô chưa có ảnh: nền xanh rừng có chiều sâu, vẫn ra dáng thiết kế */
.cf-panel-empty {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(139,158,149,0.25) 0%, transparent 60%),
    linear-gradient(170deg, #1C3A2E 0%, #0F241C 55%, #0A0A0A 100%);
}
.cf-panel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(6,8,7,0.86) 0%, rgba(6,8,7,0.42) 30%, rgba(6,8,7,0.10) 60%, transparent 85%);
}

.cf-panel-num {
  position: absolute;
  top: 1.1rem; left: 1.1rem;
  z-index: 2;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.9);
}

/* Chữ dọc — chỉ hiện khi ô đang thu nhỏ */
.cf-panel-vlabel {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 2;
  writing-mode: vertical-rl;
  rotate: 180deg;
  max-height: calc(100% - 5rem);
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 0.35s ease;
}

/* Tiêu đề ngang — chỉ hiện khi ô mở rộng */
.cf-panel-caption {
  position: absolute;
  left: 1.6rem; right: 1.6rem; bottom: 1.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.15s, transform 0.5s ease 0.15s;
  pointer-events: none;
}
.cf-panel-caption::before {
  content: '';
  width: 2.25rem; height: 3px;
  background: var(--mist);
  margin-bottom: 0.55rem;
}
.cf-panel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.12;
  color: #fff;
}
.cf-panel-sub {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* Đổi trạng thái: ô mở thì ẩn chữ dọc, hiện tiêu đề ngang */
.cf-panel.is-open .cf-panel-vlabel { opacity: 0; }
.cf-panel.is-open .cf-panel-caption { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .cf-showcase-panels:hover .cf-panel.is-open:not(:hover) .cf-panel-vlabel { opacity: 0.92; }
  .cf-showcase-panels:hover .cf-panel.is-open:not(:hover) .cf-panel-caption { opacity: 0; transform: translateY(10px); }
  .cf-panel:hover .cf-panel-vlabel { opacity: 0 !important; }
  .cf-panel:hover .cf-panel-caption { opacity: 1 !important; transform: none !important; }
}
.cf-panel:focus-within .cf-panel-vlabel { opacity: 0; }
.cf-panel:focus-within .cf-panel-caption { opacity: 1; transform: none; }

/* ── Máy tính bảng: cột chữ lên trên ── */
@media (max-width: 1100px) {
  .cf-showcase-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-inline: 1.5rem;
  }
  .cf-showcase-desc { max-width: none; }
}

/* ── Điện thoại: bỏ đàn xếp, xếp thành lưới thẻ bình thường ──
   Dải ngang 5 ô trên màn hình 375px thì mỗi ô chỉ còn 70px — không dùng được. */
@media (max-width: 720px) {
  .cf-showcase { padding: 3.5rem 0; }
  .cf-showcase-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    height: auto;
  }
  .cf-panel, .cf-panel.is-open { flex: none; aspect-ratio: 3 / 4; }
  .cf-panel-vlabel { display: none; }
  .cf-panel-caption {
    opacity: 1; transform: none;
    left: 0.9rem; right: 0.9rem; bottom: 1rem;
  }
  .cf-panel-caption::before { width: 1.75rem; margin-bottom: 0.4rem; }
  .cf-panel-title { font-size: 1.05rem; }
  .cf-panel-sub { font-size: 0.6rem; }
}
@media (max-width: 400px) {
  .cf-showcase-panels { grid-template-columns: 1fr; }
}

/* Người bật giảm chuyển động: đổi ngay, không trượt */
@media (prefers-reduced-motion: reduce) {
  .cf-panel, .cf-panel-caption, .cf-panel-vlabel, .cf-panel-img { transition: none; }
}

/* ═══════════════════════════════════════════
   v2.7 — SỬA LỖI HIỂN THỊ TRÊN ĐIỆN THOẠI
   Gom về một chỗ để dễ tìm và dễ sửa.
═══════════════════════════════════════════ */

/* Chặn tràn ngang toàn trang — nguyên nhân số 1 gây "kéo ngang được"
   trên điện thoại. Chữ dài không dấu cách (email, URL) cũng tự xuống dòng. */
html, body { max-width: 100%; overflow-x: hidden; }
.cf-feature-text p,
.cf-pillar-row-text p,
.cf-service-text,
.cf-tl-text,
.cf-faq-a p,
.hc-value,
.member-card-role,
.cf-service-deliverables li { overflow-wrap: anywhere; }

/* Bảng và khối code trong bài viết phải cuộn riêng, không đẩy trang */
.entry-content table,
.entry-content pre { display: block; max-width: 100%; overflow-x: auto; }

/* Ảnh trong mọi ngữ cảnh không bao giờ vượt khung */
img, video, iframe, svg { max-width: 100%; }
.hero-media, .site-logo-img, .footer-logo-img { max-width: none; }

@media (max-width: 900px) {
  /* Tiêu đề section cỡ lớn co lại cho vừa màn hình hẹp */
  .cf-pillars .cf-pillars-title.size-large { font-size: clamp(2rem, 8vw, 3rem); max-width: none; }

  /* Đầu section: nút xuống dòng thay vì ép tiêu đề co lại */
  .cf-section-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

@media (max-width: 640px) {
  /* Thanh điều hướng: bớt padding để logo và nút không dính mép */
  .site-header { padding: 0 1rem; }
  .nav-cluster { gap: 0.5rem; }
  .site-logo .site-logo-img { max-width: 140px; }

  /* Hero: chữ và nút vừa khung, không tràn */
  .hero-content { padding: 0 1.25rem; }
  .hero-eyebrow { letter-spacing: 0.22em; font-size: 0.6rem; }
  .hero-subtitle { letter-spacing: 0.22em; }

  /* Section co khoảng đệm dọc — trang bớt dài lê thê khi cuộn bằng ngón tay */
  .cf-feature, .cf-pillars, .cf-services, .cf-timeline, .cf-faq,
  .cf-team-section, .cf-stories-section { padding: 3.5rem 0; }
  .cf-pillars.layout-editorial { padding: 3.5rem 0; }
  .cf-pillars-rows { gap: 3rem; }
  .cf-feature-inner { gap: 1.5rem; }

  /* Footer: xếp dọc, chữ không bị cắt */
  .footer-top { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .footer-email-btn { word-break: break-all; text-align: left; }

  /* Form liên hệ: ô nhập đủ lớn để bấm bằng ngón tay */
  .cf-field input,
  .cf-field select,
  .cf-field textarea { font-size: 16px; padding: 0.85rem 0.9rem; }

  /* Nút bấm đạt vùng chạm tối thiểu 44px của Apple/Google */
  .btn-primary, .btn-outline, .btn-ghost, .cf-submit { min-height: 44px; }
  .theme-toggle, .hamburger { min-width: 44px; min-height: 44px; }
}

/* Màn hình rất hẹp: đội ngũ về 1 cột để tên không bị vỡ chữ */
@media (max-width: 380px) {
  .cf-team-section.cards-overlay .team-grid { grid-template-columns: 1fr; }
  .portfolio-grid { gap: 0.5rem; }
}

/* Người bật "giảm chuyển động" trong hệ điều hành: tắt mọi hiệu ứng nặng */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .marquee-track, .scroll-cue-line { animation: none !important; }
  .member-card.style-overlay:hover .member-card-img,
  .cf-pillar.has-image:hover .cf-pillar-img,
  .film-card:hover img { transform: none; }
}

/* In ra giấy: bỏ nền tối, bỏ phần điều hướng */
@media print {
  .site-header, .mobile-menu, .toast-container, .scroll-cue,
  .hero-actions, .cf-feature-placeholder { display: none !important; }
  body { background: #fff; color: #000; }
  .cf-feature, .cf-pillars, .cf-services { padding: 1rem 0; break-inside: avoid; }
}

/* ═══════════════════════════════════════════
   v2.1 — TRỤ CỘT / DỊCH VỤ, CTA HERO,
   TESTIMONIAL, HỒ SƠ NĂNG LỰC
═══════════════════════════════════════════ */

/* ─── Nút CTA trong Hero ─── */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2.5rem;
  opacity: 0;
  animation: fadeInUp 1s 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-cta { white-space: nowrap; }
.hero-actions .btn-primary {
  background: var(--snow);
  color: var(--obsidian);
  border: 1px solid var(--snow);
}
.hero-actions .btn-primary:hover { background: transparent; color: var(--snow); }
.btn-outline--on-dark {
  color: rgba(250, 250, 250, 0.92);
  border-color: rgba(250, 250, 250, 0.5);
}
.btn-outline--on-dark:hover {
  color: var(--obsidian);
  background: var(--snow);
  border-color: var(--snow);
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; width: 100%; max-width: 300px; margin-inline: auto; }
  .hero-cta { text-align: center; justify-content: center; }
}

/* ─── Nhóm trụ cột / dịch vụ ─── */
.cf-pillars { padding: 6rem 0; }
.cf-pillars.tone-surface {
  background: var(--surface);
  border-block: 1px solid var(--divider);
}
.cf-pillars.tone-dark {
  background: var(--footer-bg);
  color: var(--snow);
}
.cf-pillars.tone-dark .cf-pillars-title,
.cf-pillars.tone-dark .cf-pillar-title { color: var(--snow); }
.cf-pillars.tone-dark .cf-pillars-lead p,
.cf-pillars.tone-dark .cf-pillar-text { color: rgba(250, 250, 250, 0.78); }
.cf-pillars.tone-dark .cf-section-eyebrow { color: var(--gold); }
.cf-pillars.tone-dark .cf-pillar { border-top-color: rgba(250, 250, 250, 0.22); }
.cf-pillars.tone-dark .cf-pillar-num { color: rgba(250, 250, 250, 0.35); }

.cf-pillars-head { max-width: 62ch; margin-bottom: 3.5rem; }
.cf-pillars-title {
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.cf-pillars-lead p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink-dim);
}
.cf-pillars-lead p + p { margin-top: 1rem; }

.cf-pillars-grid {
  display: grid;
  grid-template-columns: repeat(var(--cf-cols, 3), minmax(0, 1fr));
  gap: 2.75rem 2.5rem;
  list-style: none;
}
@media (max-width: 980px) { .cf-pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cf-pillars-grid { grid-template-columns: 1fr; gap: 2.25rem; } }

.cf-pillar {
  border-top: 1px solid var(--divider-mid);
  padding-top: 1.5rem;
}
.cf-pillar-num {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--stone);
  margin-bottom: 1rem;
}
.cf-pillar-title {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.cf-pillar-text {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--ink-dim);
}

/* ─── Testimonial: dòng chức danh dưới tên ─── */
.quote-attribution-role {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(139, 158, 149, 0.75);
}

/* ─── Nút tải hồ sơ năng lực ─── */
.hc-profile { margin-top: 1.25rem; align-self: flex-start; }

/* ═══════════════════════════════════════════
   v2.2 — KHỐI ẢNH + CHỮ (kể chuyện)
═══════════════════════════════════════════ */
.cf-feature { padding: 7rem 0; overflow: hidden; }
.cf-feature.tone-surface {
  position: relative;
  isolation: isolate;
  background: var(--surface);
  border-block: 1px solid var(--divider);
}
.cf-feature.tone-dark { background: var(--footer-bg); color: var(--snow); }
.cf-feature.tone-dark .cf-feature-title { color: var(--snow); }
.cf-feature.tone-dark .cf-feature-text p,
.cf-feature.tone-dark .cf-feature-list li { color: rgba(250, 250, 250, 0.78); }
.cf-feature.tone-dark .cf-section-eyebrow { color: var(--gold); }
.cf-feature.tone-dark .cf-feature-list li::before { background: var(--mist); }
.cf-feature.tone-dark .cf-feature-caption { color: rgba(250, 250, 250, 0.5); }

.cf-feature-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4.5rem;
  align-items: center;
}
.cf-feature.media-right .cf-feature-media { order: 2; }
.cf-feature.no-media .cf-feature-inner { grid-template-columns: minmax(0, 760px); justify-content: center; }

@media (max-width: 900px) {
  .cf-feature { padding: 4.5rem 0; }
  .cf-feature-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .cf-feature.media-right .cf-feature-media { order: 0; }
}

/* Ảnh */
.cf-feature-media { margin: 0; position: relative; }
/* height:100% và aspect-ratio KHÔNG được dùng chung ở đây.
   Khi cả hai cùng có, trình duyệt lấy chiều cao trước (kéo theo ô lưới,
   có thể cao hơn cả section) rồi mới nhân tỉ lệ để ra bề rộng — ảnh phình
   to hơn khung chứa cả chiều ngang lẫn chiều dọc. Đã đo được đúng như vậy:
   khung rộng 564px mà ảnh ra 620×930.
   Để height:auto thì bề rộng dẫn đường, tỉ lệ quyết định chiều cao. */
.cf-feature-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.cf-feature.ratio-landscape .cf-feature-img,
.cf-feature.ratio-landscape .cf-feature-placeholder { aspect-ratio: 4 / 3; }
.cf-feature.ratio-square    .cf-feature-img,
.cf-feature.ratio-square    .cf-feature-placeholder { aspect-ratio: 1 / 1; }
.cf-feature.ratio-portrait  .cf-feature-img,
.cf-feature.ratio-portrait  .cf-feature-placeholder { aspect-ratio: 3 / 4; }
.cf-feature.ratio-tall      .cf-feature-img,
.cf-feature.ratio-tall      .cf-feature-placeholder { aspect-ratio: 2 / 3; }

/* Trần chiều cao cho ảnh.
   Bề rộng nội dung đặt "Tràn viền" thì cột ảnh giãn theo màn hình: màn
   1918px cho cột ảnh ~760px, nhân tỉ lệ 2:3 ra ~1140px cao — cao hơn cả
   màn hình, khách phải cuộn mới xem hết một tấm ảnh. Chặn trần ở đây,
   object-fit:cover lo phần cắt nên ảnh không bị bóp méo.
   Trừ bố cục tràn màn hình vì ảnh ở đó phải phủ kín section. */
.cf-feature:not(.lay-fullbleed) .cf-feature-img,
.cf-feature:not(.lay-fullbleed) .cf-feature-placeholder {
  max-height: 78svh;
}

/* Điện thoại: ảnh dọc cao chiếm gần trọn màn hình, khách phải cuộn hết
   một màn mới thấy chữ. Ghì mọi tỉ lệ dọc về 4:3.
   Bắt buộc đặt SAU khối .ratio-* ở trên — đặt trước là luật không chạy. */
@media (max-width: 900px) {
  .cf-feature.ratio-portrait .cf-feature-img,
  .cf-feature.ratio-portrait .cf-feature-placeholder,
  .cf-feature.ratio-tall     .cf-feature-img,
  .cf-feature.ratio-tall     .cf-feature-placeholder { aspect-ratio: 4 / 3; }
}

.cf-feature-caption {
  margin-top: 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

/* Khung nhắc khi chưa có ảnh — chỉ admin nhìn thấy */
.cf-feature-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
  padding: 2rem;
  border: 2px dashed var(--divider-mid);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-dim);
}
.cf-ph-icon { font-size: 2.25rem; opacity: 0.55; }
.cf-feature-placeholder strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.cf-ph-hint { font-size: 0.95rem; max-width: 34ch; line-height: 1.5; }
.cf-ph-note { font-size: 0.78rem; max-width: 40ch; line-height: 1.5; opacity: 0.7; }

/* Chữ */
.cf-feature-title {
  font-size: clamp(1.85rem, 3.8vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 1.35rem;
}
.cf-feature-text p {
  font-size: 1.03rem;
  line-height: 1.85;
  color: var(--ink-dim);
}
.cf-feature-text p + p { margin-top: 1.1rem; }

.cf-feature-list {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.85rem;
  list-style: none;
}
.cf-feature-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-dim);
}
.cf-feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 1px;
  background: var(--stone);
}
.cf-feature-cta { margin-top: 2.25rem; }

/* ─── Ô trụ cột có ảnh ─── */
.cf-pillar.has-image { border-top: none; padding-top: 0; }
.cf-pillar-media {
  overflow: hidden;
  margin-bottom: 1.35rem;
  background: var(--surface);
}
.cf-pillar-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cf-pillar.has-image:hover .cf-pillar-img { transform: scale(1.05); }
.cf-pillar.has-image .cf-pillar-num { margin-bottom: 0.6rem; }

/* ═══════════════════════════════════════════
   v2.3 — DỊCH VỤ · DÒNG THỜI GIAN · FAQ
═══════════════════════════════════════════ */

/* Tông nền dùng chung cho 3 block mới */
.cf-services, .cf-timeline, .cf-faq { padding: 6.5rem 0; }
.cf-services.tone-surface, .cf-timeline.tone-surface, .cf-faq.tone-surface {
  background: var(--surface);
  border-block: 1px solid var(--divider);
}
.cf-services.tone-dark, .cf-timeline.tone-dark, .cf-faq.tone-dark {
  background: var(--footer-bg);
  color: var(--snow);
}
.cf-services.tone-dark .cf-section-eyebrow,
.cf-timeline.tone-dark .cf-section-eyebrow,
.cf-faq.tone-dark .cf-section-eyebrow { color: var(--gold); }

.cf-services-head, .cf-timeline-head, .cf-faq-head {
  max-width: 62ch;
  margin-bottom: 3.5rem;
}
.cf-services-title, .cf-timeline-title, .cf-faq-title {
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.cf-services.tone-dark .cf-services-title,
.cf-timeline.tone-dark .cf-timeline-title,
.cf-faq.tone-dark .cf-faq-title { color: var(--snow); }
.cf-services-lead, .cf-timeline-lead, .cf-faq-lead {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink-dim);
}
.cf-services.tone-dark .cf-services-lead,
.cf-timeline.tone-dark .cf-timeline-lead,
.cf-faq.tone-dark .cf-faq-lead { color: rgba(250, 250, 250, 0.78); }

/* ─── Danh sách dịch vụ ─── */
.cf-services-list { list-style: none; counter-reset: none; }
.cf-service {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding: 2.75rem 0;
  border-top: 1px solid var(--divider-mid);
  align-items: start;
}
.cf-service:last-child { border-bottom: 1px solid var(--divider-mid); }
.cf-services.tone-dark .cf-service { border-color: rgba(250, 250, 250, 0.18); }

@media (max-width: 900px) {
  .cf-service { grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem 1.5rem; }
  .cf-service-deliverables { grid-column: 2; }
}
@media (max-width: 560px) {
  .cf-service { grid-template-columns: 1fr; gap: 1rem; }
  .cf-service-deliverables { grid-column: 1; }
}

.cf-service-index {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--stone);
  padding-top: 0.35rem;
}
.cf-services.tone-dark .cf-service-index { color: var(--mist); }

.cf-service-title {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.cf-services.tone-dark .cf-service-title { color: var(--snow); }
.cf-service-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-dim);
}
.cf-services.tone-dark .cf-service-text { color: rgba(250, 250, 250, 0.78); }

.cf-service-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.6rem;
}
.cf-services.tone-dark .cf-service-label { color: var(--mist); }
.cf-service-audience {
  margin-top: 1.35rem;
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.cf-service-audience .cf-service-label { margin-bottom: 0.3rem; }

.cf-service-deliverables ul { list-style: none; display: grid; gap: 0.6rem; }
.cf-service-deliverables li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
.cf-service-deliverables li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border: 1px solid var(--stone);
  border-radius: 50%;
}
.cf-services.tone-dark .cf-service-deliverables li { color: rgba(250, 250, 250, 0.78); }
.cf-services.tone-dark .cf-service-deliverables li::before { border-color: var(--mist); }

/* ─── Dòng thời gian ─── */
.cf-timeline-list { list-style: none; position: relative; }
.cf-tl-item {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  position: relative;
}
.cf-tl-item:last-child { padding-bottom: 0; }

/* Đường dọc nối các mốc */
.cf-tl-item::before {
  content: '';
  position: absolute;
  left: calc(11rem + 1.25rem - 1px);
  top: 0.9rem;
  bottom: -0.9rem;
  width: 1px;
  background: var(--divider-mid);
}
.cf-tl-item:last-child::before { display: none; }
.cf-timeline.tone-dark .cf-tl-item::before { background: rgba(250, 250, 250, 0.2); }

.cf-tl-marker {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.9rem;
  position: relative;
}
.cf-tl-dot {
  position: absolute;
  right: -1.75rem;
  top: 0.55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--canvas);
}
.cf-timeline.tone-surface .cf-tl-dot { box-shadow: 0 0 0 4px var(--surface); }
.cf-timeline.tone-dark .cf-tl-dot { background: var(--gold); box-shadow: 0 0 0 4px var(--footer-bg); }
.cf-tl-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: right;
}
.cf-timeline.tone-dark .cf-tl-label { color: var(--mist); }

.cf-tl-title {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.cf-timeline.tone-dark .cf-tl-title { color: var(--snow); }
.cf-tl-meta {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}
.cf-tl-text {
  margin-top: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--ink-dim);
  max-width: 62ch;
}
.cf-timeline.tone-dark .cf-tl-text { color: rgba(250, 250, 250, 0.78); }

@media (max-width: 760px) {
  .cf-tl-item { grid-template-columns: 1fr; gap: 0.6rem; padding-left: 1.75rem; padding-bottom: 2.5rem; }
  .cf-tl-item::before { left: 3px; top: 1.6rem; bottom: -0.6rem; }
  .cf-tl-marker { justify-content: flex-start; }
  .cf-tl-dot { right: auto; left: -1.75rem; top: 0.45rem; }
  .cf-tl-label { text-align: left; }
}

/* ─── Câu hỏi thường gặp ─── */
.cf-faq-inner { max-width: 900px; }
.cf-faq-list { border-top: 1px solid var(--divider-mid); }
.cf-faq.tone-dark .cf-faq-list,
.cf-faq.tone-dark .cf-faq-item { border-color: rgba(250, 250, 250, 0.18); }
.cf-faq-item { border-bottom: 1px solid var(--divider-mid); }

.cf-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.2s;
}
.cf-faq-q::-webkit-details-marker { display: none; }
.cf-faq-q:hover { color: var(--gold-ink); }
.dark .cf-faq-q:hover { color: var(--gold); }
.cf-faq.tone-dark .cf-faq-q { color: var(--snow); }
.cf-faq.tone-dark .cf-faq-q:hover { color: var(--gold); }
.cf-faq-q:focus-visible { outline: 2px solid var(--mist); outline-offset: 3px; }

/* Dấu + xoay thành × khi mở */
.cf-faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 14px; height: 14px;
}
.cf-faq-icon::before,
.cf-faq-icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease;
}
.cf-faq-icon::after { transform: rotate(90deg); }
.cf-faq-item[open] .cf-faq-icon::after { transform: rotate(0deg); }

.cf-faq-a { padding: 0 0 1.6rem; max-width: 68ch; }
.cf-faq-a p {
  font-size: 0.99rem;
  line-height: 1.85;
  color: var(--ink-dim);
}
.cf-faq-a p + p { margin-top: 0.9rem; }
.cf-faq.tone-dark .cf-faq-a p { color: rgba(250, 250, 250, 0.78); }

@media (prefers-reduced-motion: no-preference) {
  .cf-faq-item[open] .cf-faq-a { animation: fadeIn 0.35s ease; }
}

/* ─── Ô chọn "Nhu cầu" trong form ─── */
.cf-field select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--divider-mid);
  border-radius: 2px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cf-field select:focus {
  outline: none;
  border-color: var(--stone);
  box-shadow: 0 0 0 3px rgba(90, 107, 96, 0.18);
}


/* ═══════════════════════════════════════════
   v3.6 — TIÊU ĐỀ BẮT MẮT & ĐIỀU KHIỂN VIDEO
   ═══════════════════════════════════════════ */

/* ─── Màu nhấn trong tiêu đề ───
   Người viết bọc chữ trong hai dấu sao: "Chăm **Film**" */
.hero-title-accent {
  color: var(--hero-accent, var(--gold));
  font-style: normal;
}

/* Kiểu 1 — Chuyển sắc: chữ đổ từ trắng sang vàng đồng.
   Nền tô lên chữ nên phải cắt theo hình chữ. */
.hero-title.tstyle-gradient {
  background: linear-gradient(
    100deg,
    #FFFFFF 0%,
    #FFFFFF 34%,
    var(--hero-accent, var(--gold-warm)) 62%,
    var(--gold-deep) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Trong kiểu chuyển sắc, phần đánh dấu ** ** đã nằm trong dải màu rồi */
.hero-title.tstyle-gradient .hero-title-accent { color: inherit; }

/* Kiểu 2 — Chữ viền rỗng: dòng nào được đánh dấu thì đặc, còn lại rỗng ruột.
   Tạo tương phản mạnh mà không cần thêm màu. */
.hero-title.tstyle-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(250, 250, 250, 0.85);
  text-shadow: none;
}
.hero-title.tstyle-outline .hero-title-accent {
  color: var(--hero-accent, var(--gold));
  -webkit-text-stroke: 0;
}

/* Kiểu 3 — Nhấn: giữ nền trắng, chỉ phần đánh dấu đổi màu và có gạch chân mảnh */
.hero-title.tstyle-accent .hero-title-accent {
  color: var(--hero-accent, var(--gold));
  position: relative;
  white-space: nowrap;
}
.hero-title.tstyle-accent .hero-title-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.055em;
  background: var(--hero-accent, var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  animation: heroUnderline 1s 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroUnderline { to { transform: scaleX(1); } }

/* Trình duyệt cũ không cắt được nền theo chữ → chữ sẽ tàng hình.
   Câu lệnh này trả về màu trắng an toàn. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title.tstyle-gradient {
    background: none;
    color: #FAFAFA;
    -webkit-text-fill-color: #FAFAFA;
  }
}


@media (prefers-reduced-motion: reduce) {
  .hero-title.tstyle-accent .hero-title-accent::after { animation: none; transform: scaleX(1); }
}


/* ═══════════════════════════════════════════
   v3.8 — BỐ CỤC BA CỘT & KHUNG GÓC VÀNG
   Chữ một bên, ảnh có khung ở giữa, số liệu bên
   phải. Mắt đọc xong đoạn văn là gặp ngay con số,
   không phải cuộn xuống một dải thống kê rời rạc.
   ═══════════════════════════════════════════ */

/* ─── Khung góc vàng ───
   Chỉ bốn nét ở góc chứ không viền kín: ảnh vẫn thở được,
   mà vẫn ra dáng khung ngắm của máy quay. */
.cf-feature-frame {
  position: absolute;
  inset: -0.75rem;
  pointer-events: none;
  z-index: 2;
  /* Bốn góc vẽ bằng gradient, không cần thêm thẻ HTML nào */
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 2px 3.5rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) top left / 3.5rem 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 2px 3.5rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 3.5rem 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 2px 3.5rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 3.5rem 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 2px 3.5rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 3.5rem 2px no-repeat;
}
.cf-feature.has-frame .cf-feature-media { position: relative; }

/* ─── Bố cục ba cột ─── */
.cf-feature.lay-trio .cf-feature-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 0.42fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
/* Không có cột số liệu thì hai cột chia đôi cho cân */
.cf-feature.lay-trio:not(.has-stats) .cf-feature-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.cf-feature.lay-trio .cf-feature-media { order: 2; margin: 0; }
.cf-feature.lay-trio .cf-feature-body  { order: 1; }
.cf-feature.lay-trio .cf-feature-stats { order: 3; }

/* Ảnh dựng đứng như trong mẫu tham khảo */
.cf-feature.lay-trio .cf-feature-img {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto; /* cùng lý do với .cf-feature-img ở trên */
  object-fit: cover;
}

/* ─── Cột số liệu ─── */
.cf-feature-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.cf-fstat-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--gold-deep);
}
.cf-fstat-suffix { color: var(--gold-deep); }
.cf-fstat-label {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  max-width: 18ch;
}
/* Nền tối: vàng sáng mới đủ tương phản */
.dark .cf-fstat-value,
.dark .cf-fstat-suffix,
.cf-feature.tone-dark .cf-fstat-value,
.cf-feature.tone-dark .cf-fstat-suffix { color: var(--gold); }
.cf-feature.tone-dark .cf-fstat-label { color: rgba(250, 250, 250, 0.72); }

/* Vạch mảnh ngăn giữa các con số, bỏ vạch đầu tiên */
.cf-fstat + .cf-fstat {
  border-top: 1px solid var(--divider);
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
}
.cf-feature.tone-dark .cf-fstat + .cf-fstat { border-top-color: rgba(250, 250, 250, 0.14); }

/* ─── Màn hình vừa: số liệu tụt xuống thành hàng ngang ─── */
@media (max-width: 1180px) {
  .cf-feature.lay-trio .cf-feature-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .cf-feature.lay-trio .cf-feature-stats {
    order: 3;
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
  }
  .cf-feature.lay-trio .cf-fstat { flex: 1 1 9rem; }
  .cf-feature.lay-trio .cf-fstat + .cf-fstat {
    border-top: 0;
    border-left: 1px solid var(--divider);
    padding: 0 0 0 1.5rem;
  }
  .cf-feature.tone-dark.lay-trio .cf-fstat + .cf-fstat { border-left-color: rgba(250, 250, 250, 0.14); }
}

/* ─── Điện thoại: xếp dọc hết ─── */
@media (max-width: 780px) {
  .cf-feature.lay-trio .cf-feature-inner { grid-template-columns: 1fr; }
  .cf-feature.lay-trio .cf-feature-media { order: 1; }
  .cf-feature.lay-trio .cf-feature-body  { order: 2; }
  .cf-feature.lay-trio .cf-feature-img { aspect-ratio: 4 / 3; }
  .cf-feature-frame { inset: -0.5rem; background-size: 2px 2.25rem, 2.25rem 2px, 2px 2.25rem, 2.25rem 2px, 2px 2.25rem, 2.25rem 2px, 2px 2.25rem, 2.25rem 2px; }
}