/* ⚠️ BẪY ĐÃ DÍNH: class `in` vừa là "khối nội dung trong hero" vừa là trạng thái
   "đã vào màn" của lớp chuyển động. Tiêu đề mang cả hai → biến thành khối
   position:absolute hẹp, chữ vỡ toác. Khối nội dung nay đổi thành `.hero-in`.
   ============================================================ */
/* ============================================================
   KHI — 5 PHƯƠNG ÁN MỞ ĐẦU TRANG CHỦ (30/07)
   Giữ nguyên luật đã chốt: không bóng · viền chỉ khi rê chuột ·
   bo nhẹ · icon Lucide · sans Be Vietnam Pro · kem/sage/cam đất.
   Khác nhau ở CẤU TRÚC và CẢM XÚC, không phải ở màu.
   ============================================================ */

/* --- khung so sánh --- */
.opt { position: relative; border-top: 1px solid var(--line); }
.opt:first-of-type { border-top: 0; }
.opt-tag {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 14px 0; background: rgba(246,242,234,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.opt-tag b { font-size: 1.05rem; font-weight: 500; }
.opt-tag .k { font-size: .84rem; color: var(--clay-text); font-weight: 500; }
.opt-tag span { font-size: .9rem; color: var(--ink-soft); }
.jump { display: flex; gap: 8px; flex-wrap: wrap; }
.jump a { font-size: .88rem; padding: 8px 14px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); }
.jump a:hover { color: var(--clay-text); }

/* dùng chung cho các phương án */
.hx { --pad: clamp(24px, 4vw, 56px); }
.hx h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; }
.hx .sub { font-size: 1.06rem; max-width: 46ch; }
.hx .acts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hx .chips { display: flex; gap: 10px; flex-wrap: wrap; }
.on-dark h1, .on-dark .sub, .on-dark .lnk { color: #fff; }
.on-dark .sub { color: #E7E5DA; }
.on-dark .chip { background: rgba(255,255,255,.12); color: #F1EFE6; }
.on-dark .lnk::before { background: rgba(255,255,255,.4); }

/* ============ A · TOÀN MÀN ĐIỆN ẢNH ============ */
.hero-a { position: relative; height: 88vh; min-height: 560px; border-radius: var(--r-xl); overflow: hidden; }
.hero-a .bg { position: absolute; inset: 0; }
.hero-a .bg img { width: 100%; height: 100%; object-fit: cover; animation: kb 24s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.04) translate3d(0,0,0) } to { transform: scale(1.14) translate3d(-1.5%,-1.5%,0) } }
.hero-a .veil { position: absolute; inset: 0;
  background: linear-gradient(75deg, rgba(20,24,17,.86) 0%, rgba(20,24,17,.55) 42%, rgba(20,24,17,.12) 72%, transparent 100%); }
.hero-a .hero-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad); max-width: 60ch; }
.hero-a .sub { margin-top: 18px; }
.hero-a .acts { margin-top: 32px; }
.hero-a .chips { margin-top: 28px; }
.hero-a .scroll { position: absolute; left: var(--pad); bottom: 26px; display: flex; align-items: center; gap: 10px;
  color: #D8DACD; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; }
.hero-a .scroll i { display: block; width: 1px; height: 34px; background: linear-gradient(#D8DACD, transparent); animation: fall 2.2s ease-in-out infinite; }
@keyframes fall { 0%,100% { transform: scaleY(.4); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }

/* ============ B · CHIA ĐÔI BIÊN TẬP ============ */
.hero-b { display: grid; grid-template-columns: 1.02fr .98fr; align-items: stretch; min-height: 82vh; }
.hero-b .txt { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 56px var(--pad) 56px 0; }
.hero-b h1 { font-size: clamp(2.8rem, 5.4vw, 5rem); }
.hero-b h1 em { font-style: normal; color: var(--clay-text); }
.hero-b .sub { margin-top: 20px; }
.hero-b .acts { margin-top: 30px; }
.hero-b .meta { display: flex; gap: 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-b .meta div b { display: block; font-size: 1.5rem; font-weight: 500; color: var(--sage-deep); letter-spacing: -.02em; }
.hero-b .meta div span { font-size: .86rem; color: var(--ink-soft); }
.hero-b .pic { position: relative; border-radius: var(--r-xl) 0 0 var(--r-xl); overflow: hidden; }
.hero-b .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-b .badge {
  position: absolute; right: -56px; bottom: 40px; z-index: 4;
  background: var(--surface); border-radius: var(--r-lg); padding: 18px 22px; max-width: 230px;
}
.hero-b .badge b { display: block; font-size: 2rem; font-weight: 500; color: var(--clay-text); line-height: 1; }
.hero-b .badge span { font-size: .88rem; color: var(--ink-soft); display: block; margin-top: 6px; }

/* ============ C · GHÉP ẢNH SO LE ============ */
.hero-c .top { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: end; padding-bottom: 32px; }
.hero-c h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
.hero-c .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 118px; gap: 16px; }
.hero-c .grid > * { border-radius: var(--r-lg); overflow: hidden; }
.hero-c .grid img { width: 100%; height: 100%; object-fit: cover; }
.hero-c .c1 { grid-column: span 5; grid-row: span 3; }
.hero-c .c2 { grid-column: span 4; grid-row: span 2; }
.hero-c .c3 { grid-column: span 3; grid-row: span 2; }
.hero-c .c4 { grid-column: span 4; grid-row: span 1; }
.hero-c .c5 { grid-column: span 3; grid-row: span 1; }
.hero-c .stat-card {
  background: var(--sage-deep); color: var(--on-dark); display: flex; flex-direction: column; justify-content: center;
  padding: 22px; grid-column: span 3; grid-row: span 1;
}
.hero-c .stat-card b { font-size: 2.4rem; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.hero-c .stat-card span { font-size: .86rem; color: #C2CAB6; margin-top: 6px; }
.hero-c .float { animation: floaty 7s ease-in-out infinite alternate; }
@keyframes floaty { from { transform: translateY(0) } to { transform: translateY(-10px) } }

/* ============ D · CHỮ KHỔNG LỒ LỒNG ẢNH ============ */
.hero-d { padding: 64px 0 40px; text-align: center; }
.hero-d .big {
  font-size: clamp(3.2rem, 11vw, 10rem); font-weight: 600; line-height: 1.06; letter-spacing: -.05em;
  margin: 0; text-transform: uppercase;
}
.hero-d .big .fill {
  background-image: linear-gradient(rgba(24,28,20,.44), rgba(24,28,20,.44)),
                    url("https://dev.khiwellness.com/khi/studio-1.jpg");   /* nhiều đường nét reformer -> nhìn ra là phòng tập */
  background-size: cover; background-position: center 42%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-d .line2 { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; }
.hero-d .word-pic { height: clamp(68px, 9.6vw, 146px); aspect-ratio: 3/2; border-radius: var(--r-md); overflow: hidden; }
.hero-d .word-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-d .sub { margin: 28px auto 0; text-align: center; }
.hero-d .acts { justify-content: center; margin-top: 26px; }
.hero-d .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.hero-d .strip .ph { aspect-ratio: 4/3; border-radius: var(--r-lg); }

/* ============ E · RÈM MỞ RA ============ */
.hero-e { position: relative; height: 88vh; min-height: 560px; border-radius: var(--r-xl); overflow: hidden; background: var(--sage-deep); }
.hero-e .bg { position: absolute; inset: 0; }
.hero-e .bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 2.4s var(--ease); }
.hero-e.open .bg img { transform: scale(1); }
.hero-e .curtain { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.hero-e .curtain i { background: var(--sage-deep); transition: transform 1.5s var(--ease); }
.hero-e.open .curtain i:first-child { transform: translateX(-101%); }
.hero-e.open .curtain i:last-child  { transform: translateX(101%); }
.hero-e .say {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center;
  color: #EDEFE4; font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: .02em;
  transition: opacity .6s var(--ease);
}
.hero-e.open .say { opacity: 0; }
.hero-e .veil { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(16,20,13,.94) 0%, rgba(16,20,13,.7) 26%, rgba(16,20,13,.22) 58%, rgba(16,20,13,.5) 100%),
              linear-gradient(100deg, rgba(16,20,13,.6) 0%, transparent 55%); }
.hero-e .hero-in { position: absolute; inset: auto 0 0 0; z-index: 5; padding: var(--pad); display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: end;
  opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease) .5s, transform .7s var(--ease) .5s; }
.hero-e.open .hero-in { opacity: 1; transform: none; }
.hero-e .hero-in .right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .hero-a .bg img, .hero-a .scroll i, .hero-c .float { animation: none; }
  .hero-e .curtain i { transform: translateX(-101%); }
  .hero-e .curtain i:last-child { transform: translateX(101%); }
  .hero-e .hero-in { opacity: 1; transform: none; }
  .hero-e .say { opacity: 0; }
}


/* ============ thanh chuyển bản (chỉ dùng khi so sánh nội bộ) ============ */
.ver-switch {
  position: relative; z-index: 5;
  width: var(--shell); max-width: calc(100% - 64px); margin: 18px auto 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .88rem; color: var(--ink-soft);
}
.ver-switch a { padding: 8px 14px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); }
.ver-switch a:hover { color: var(--clay-text); }
.ver-switch a.on { background: var(--sage-deep); color: #fff; }

/* --- A dùng làm trang thật: cao hơn, chữ thoáng hơn --- */
.hero .hero-a { height: 90vh; min-height: 600px; }
.hero .hero-a .hero-in { max-width: 62ch; }
.hero .hero-a h1 { font-size: clamp(2.8rem, 5.2vw, 4.8rem); }

/* --- D dùng làm trang thật: canh dấu tiếng Việt, ảnh trong chữ trôi rất chậm --- */
.hero .hero-d { padding: 40px 0 8px; }
.hero .hero-d .big { padding-top: .06em; }
/* Headline mới (01/08) dài 19–21 ký tự, gấp đôi bản cũ — cỡ cũ 11vw tràn khỏi shell.
   Hạ xuống 6vw (đo bằng Playwright ở 1280: vừa shell 1200, không xuống dòng). */
.hero .hero-d .big { font-size: clamp(2.4rem, 7.2vw, 6.2rem); letter-spacing: -.035em; }
.hero .hero-d .word-pic { height: clamp(46px, 6.2vw, 92px); }          /* chừa chỗ cho dấu mũ/dấu nặng */
.hero .hero-d .big .fill { animation: slowpan 26s ease-in-out infinite alternate; }
@keyframes slowpan { from { background-position: center 38% } to { background-position: center 52% } }
.hero .hero-d .sub { max-width: 54ch; }
@media (prefers-reduced-motion: reduce) { .hero .hero-d .big .fill { animation: none } }