/* ============================================================
   KHI — LỚP AWARD-LEVEL (8 block, Dang duyệt qua demo 01/08
   view.dang.pm/khi-award-demo). Nạp SAU motion-v1.css, TRƯỚC responsive.css.
   Nguyên tắc an toàn (như motion-v1):
     · hiệu ứng cần JS nằm dưới class do award-v1.js gắn — JS chết = trang tĩnh đọc bình thường
     · máy cảm ứng: tắt ghim / cursor / lenis (CSS + JS cùng gác)
     · prefers-reduced-motion: tắt toàn bộ ở cuối file
   ============================================================ */

/* ---------- hero cao 75% màn hình (Dang chốt 01/08) — căn giữa dọc ---------- */
.hero.hx { min-height: 75vh; min-height: 75svh; display: flex; align-items: center; justify-content: center; }

/* ---------- vòng 2 · ảnh Body Check trước/sau (ảnh ghép sẵn 2 nửa, đường chuẩn đỏ) ---------- */
.ba-card { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid transparent; transition: border-color var(--t); }
.ba-card:hover { border-color: var(--sage); }
.ba-card img { width: 100%; display: block; }
.ba-card figcaption span { position: absolute; top: 14px; font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  padding: 5px 13px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--ink-soft); }
.ba-card figcaption span:first-child { left: 14px; }
.ba-card figcaption span:last-child { right: 14px; background: var(--sage-deep); color: var(--on-dark); }

/* ---------- tagline thương hiệu dưới logo footer (Dang chốt 02/08) ----------
   Trước đây câu này nằm khuất ở dòng bản quyền cuối trang. Đưa lên ngay dưới
   logo — chỗ mắt dừng lại — và bỏ bản trùng ở dưới để không nói hai lần. */
.ft-tag { margin: 14px 0 6px; font-size: .95rem; letter-spacing: .01em;
  color: rgba(241,239,230,.92); font-style: italic; }

/* ---------- hàng icon mạng xã hội dưới logo footer (Dang cấp link 02/08) ---------- */
.ft-social { display: flex; gap: 10px; margin: 16px 0 4px; }
.ft-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(241,239,230,.24); color: rgba(241,239,230,.82);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t); }
.ft-social a:hover { background: rgba(241,239,230,.1); border-color: rgba(241,239,230,.5);
  color: #fff; transform: translateY(-2px); }
.ft-social .ico { width: 17px; height: 17px; }

/* ---------- ô chat nổi: gom mọi kênh nhắn tin vào một chỗ ----------
   Mặc định ĐÓNG (chỉ 1 nút) để không che nội dung. Chạy bằng :checked của
   input ẩn nên KHÔNG cần JS — JS hỏng thì khách vẫn bấm gọi/nhắn được. */
.chatdock { position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.chatdock-list { display: flex; flex-direction: column; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.94);
  transform-origin: bottom right; transition: opacity var(--t), transform var(--t), visibility var(--t); }
.chatdock-tgl:checked ~ .chatdock-list { opacity: 1; visibility: visible; transform: none; }
.cd-item { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: #fff; box-shadow: 0 6px 18px rgba(30,34,26,.22); transition: transform var(--t); }
.cd-item:hover { transform: scale(1.07); }
.cd-item .ico { width: 21px; height: 21px; }
.cd-zalo { background: #0068FF; } .cd-msg { background: #0084FF; }
.cd-tel  { background: #4C6B44; } .cd-ig   { background: #C1358B; }
.chatdock-btn { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--clay); color: #fff; cursor: pointer;
  box-shadow: 0 8px 22px rgba(30,34,26,.28); transition: background var(--t), transform var(--t); }
.chatdock-btn:hover { background: var(--clay-press); transform: scale(1.05); }
.chatdock-btn .ico { width: 24px; height: 24px; }
.chatdock-btn .cd-off { display: none; }
.chatdock-tgl:checked ~ .chatdock-btn .cd-on { display: none; }
.chatdock-tgl:checked ~ .chatdock-btn .cd-off { display: grid; place-items: center; }
.chatdock-btn:focus-visible { outline: 2px solid var(--clay-text); outline-offset: 3px; }
/* nhường chỗ cho thanh CTA dán đáy ở màn hình nhỏ */
@media (max-width: 720px) { .chatdock { right: 12px; bottom: 84px; } }

/* ---------- vòng 2 · footer chương cuối: wordmark lớn mở màn ---------- */
/* footer nền sage tối → wordmark là watermark sáng mờ (chữ sage-deep trên nền sage-deep = tàng hình, dính 01/08) */
.ft-word { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 26px; border-bottom: 1px solid rgba(241,239,230,.14); margin-bottom: 40px;
  font-weight: 500; font-size: clamp(4rem, 10vw, 8.5rem); letter-spacing: -.04em; line-height: .9;
  color: rgba(241,239,230,.16); user-select: none; }
.ft-word span { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(241,239,230,.45); font-weight: 500; }

/* ---------- special-deals v2 · CAMPAIGN LP sinh nhật (rebuild 02/08 sau challenger-ui) ----------
   Cream chủ đạo. GOLD đúng 1 lần (khối rút vàng). Số dùng chung bậc display .num-d. */
/* mở màn = KV chính thức full-bleed (Dang gửi 02/08); sub + fork nằm dưới KV */
.b2-kv img { width: 100%; display: block; }
.b2-kv-under { text-align: center; padding: 30px 32px 8px; }
.b2-sub { margin: 0 auto; max-width: 52ch; color: var(--ink-soft); }
.b2-fork { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.b2-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.b2-ghost2 { border: 1px solid var(--line-2); }
/* lịch 31 ô tháng 8 — khan hiếm bằng LỊCH (studio bán buổi theo lịch), không phải đồng hồ */
.b2-calwrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0 20px; }
.b2-calhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px;
  font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.b2-calhead b { color: var(--sage-deep); font-weight: 600; }
.b2-cal { display: grid; grid-template-columns: repeat(31, 1fr); gap: 5px; }
.b2-cal span { aspect-ratio: 1; display: grid; place-items: center; font-size: .72rem; color: var(--ink-soft);
  background: var(--surface); border-radius: 6px; font-variant-numeric: tabular-nums; }
.b2-cal span.gone { color: var(--line-2); background: transparent; text-decoration: line-through; }
.b2-cal span.today { background: var(--sage-deep); color: var(--on-dark); font-weight: 600; }
@media (max-width: 900px) { .b2-cal { grid-template-columns: repeat(16, 1fr); } }
/* nhánh */
.b2-branch { border-top: 1px solid var(--line); }
.b2-k { display: inline-block; font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--clay-text); }
.num-d { font-size: clamp(2.3rem, 4.4vw, 3.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.b2-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.b2-duo > div:last-child { border-left: 1px solid var(--line); padding-left: 48px; }
.b2-duo .offer-li li b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .b2-duo { grid-template-columns: 1fr; gap: 32px; } .b2-duo > div:last-child { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; } }
/* GOLD — điểm vàng DUY NHẤT của trang: hairline + con số, không nền khối */
:root { --gold: #C9A76A; --gold-text: #8A6D26; }
.b2-gold { margin-top: 56px; padding: 30px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.gold-k { color: var(--gold-text); }
.b2-gold-num { color: var(--gold-text); display: flex; align-items: baseline; gap: 12px; }
.b2-gold-num span { font-size: 1rem; font-weight: 500; letter-spacing: .04em; }
@media (max-width: 900px) { .b2-gold { grid-template-columns: 1fr; gap: 16px; } }
/* nhánh học viên cũ */
.b2-renew { display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center;
  background: var(--surface); border-radius: var(--r-lg); padding: 30px 34px; }
@media (max-width: 900px) { .b2-renew { grid-template-columns: 1fr; gap: 16px; } }
.b2-gifts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; }
.b2-gifts > div { border-top: 1px solid var(--line); padding-top: 16px; }
.b2-gifts b { font-weight: 500; }
.b2-gifts p { margin-top: 8px; font-size: .93rem; color: var(--ink-soft); }
@media (max-width: 900px) { .b2-gifts { grid-template-columns: 1fr; gap: 22px; } }
/* bằng chứng năm đầu */
.b2-proof { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.b2-proof .ph { aspect-ratio: 4/3; }
.b2-small { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }
.b2-quote { margin: 22px 0 0; font-size: 1.25rem; line-height: 1.55; font-weight: 300; color: var(--ink); border: 0; padding: 0; }
.b2-quote-src { margin-top: 10px; font-size: .9rem; color: var(--ink-faint); }
@media (max-width: 900px) { .b2-proof { grid-template-columns: 1fr; gap: 28px; } }
/* 2 câu hỏi */
.b2-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.b2-faq > div { border-top: 1px solid var(--line); padding-top: 16px; }
.b2-faq b { font-weight: 500; }
.b2-faq p { margin-top: 8px; font-size: .95rem; color: var(--ink-soft); }
@media (max-width: 900px) { .b2-faq { grid-template-columns: 1fr; gap: 22px; } }
/* danh sách ưu đãi trong nhánh trial */
.offer-li { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.offer-li li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--ink-soft); }
.offer-li li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 10px; height: 5px;
  border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(-45deg); }

/* ---------- trang đặt lịch · persona chọn hướng (customer-centric, Dang 01/08) ---------- */
.persona { cursor: pointer; display: flex; flex-direction: column; }
.persona b { font-size: 1.08rem; font-weight: 500; line-height: 1.4; }
.persona p { margin-top: 10px; font-size: .93rem; color: var(--ink-soft); }
.persona .p-cta { margin-top: auto; padding-top: 16px; font-size: .9rem; font-weight: 500; color: var(--clay-text); display: inline-flex; align-items: center; gap: 6px; }
.persona .p-cta::after { content: '→'; transition: translate var(--t); }
.persona:hover .p-cta::after { translate: 4px 0; }
.f-trust { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.f-trust li { font-size: .88rem; color: var(--ink-faint); padding-left: 22px; position: relative; }
.f-trust li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 10px; height: 5px;
  border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(-45deg); }

/* ---------- section Instagram (IgSection — phương án A, Dang duyệt 02/08) ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ig-item { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid transparent; transition: border-color var(--t); }
.ig-item:hover { border-color: var(--sage); }
.ig-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.ig-item:hover img { transform: scale(1.05); }
.ig-item .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(33,36,29,.72));
  opacity: 0; transition: opacity var(--t); }
.ig-item:hover .veil { opacity: 1; }
.ig-item figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; color: var(--on-dark);
  font-size: .85rem; line-height: 1.5; opacity: 0; translate: 0 8px;
  transition: opacity var(--t), translate var(--t);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-item:hover figcaption { opacity: 1; translate: 0 0; }
.ig-item .badge { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.88); display: grid; place-items: center; color: var(--sage-deep); }
.ig-item .badge .ico { width: 15px; height: 15px; }
.ig-follow { margin-top: 26px; display: flex; justify-content: center; }
.ig-btn { border: 1px solid var(--line); }
.ig-btn:hover { border-color: var(--sage); }
@media (max-width: 760px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ---------- vòng 2 · micro-detail: màu bôi đen theo brand ---------- */
::selection { background: var(--sage-deep); color: var(--on-dark); }

/* ---------- B2 · chữ "thở" nhịp 4s (hero) ---------- */
/* KHI nghĩa là khí — hơi thở. Biên độ 1.4%: đủ cảm nhận, không gây chú ý. */
.anim .hero-d .big { animation: khiBreathe 4s var(--ease) infinite; transform-origin: 50% 60%; will-change: transform; }
@keyframes khiBreathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.014) } }

/* ---------- B3 · chương ghim Move→Recharge ----------
   MẶC ĐỊNH (không JS / touch): khối cao tự nhiên, băng panel cuộn ngang tay.
   award-v1.js (chỉ pointer:fine) gắn .pin-on → mới cao 340vh + ghim + JS lái translateX. */
/* Nền: FULL-BLEED ngang màn, chiều cao ÔM SÁT nội dung (KryMark canyocg2fvchi3q) —
   .pin-sec/.pin-view trong suốt, nền sage nằm ở .pin-bg bọc đúng head + track. */
.pin-sec { position: relative; }
.pin-view { overflow: hidden; }
.pin-bg { background: var(--sage-deep); padding: 46px 0; }
.pin-head { color: var(--on-dark); max-width: 1180px; margin: 0 auto 30px; padding: 0 32px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.pin-head .eyebrow { color: #B9C6AC; }
.pin-head h2 { color: var(--on-dark); margin-top: 8px; }
.pin-head p { color: #C9CDBC; max-width: 52ch; margin-top: 10px; }
.pin-head .lnk { color: var(--on-dark); flex: none; }
.pin-track { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none;
  padding: 0 48px 0 max(32px, calc((100% - 1116px) / 2)); }   /* mép trái thẳng hàng shell */
.pin-track::-webkit-scrollbar { display: none; }
.panel { flex: 0 0 min(520px, 72vw); background: rgba(255,255,255,.05); border-radius: var(--r-lg); overflow: hidden; }
.panel .pimg { height: 280px; }
.panel .pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* phòng chưa có ảnh thật → ô chờ monoline (KHÔNG mượn ảnh phòng Pilates) */
/* xếp icon + chữ bằng grid content — KHÔNG absolute (không có mốc relative, chữ rơi lung tung — dính 01/08) */
.panel .pimg.wait { display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(255,255,255,.04); color: #9FB08F; }
.panel .pimg.wait svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.panel .pimg.wait span { font-size: .78rem; letter-spacing: .08em; color: #8A9A7B; white-space: nowrap; }
.panel .pb { padding: 20px 26px 26px; color: var(--on-dark); }
.panel .pb .pnum { font-size: .78rem; letter-spacing: .12em; color: #B9C6AC; }
.panel .pb b { display: block; font-size: 1.16rem; font-weight: 500; margin-top: 4px; }
.panel .pb p { margin-top: 8px; font-size: .93rem; color: #C9CDBC; }
/* chế độ ghim (JS bật, chỉ máy có chuột) — nền .pin-bg cao vừa nội dung, căn giữa màn */
.pin-on .pin-sec { height: 340vh; }
.pin-on .pin-view { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.pin-on .pin-track { overflow-x: visible; will-change: transform; }

/* ---------- B4 · ảnh gợn nước (canvas do JS chèn đè lên img) ---------- */
.ripple-wrap { position: relative; }
.ripple-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }

/* ---------- B5 · chuyển trang mượt (cross-document — các trang là anchor thật) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .32s; }
::view-transition-new(root) { animation-duration: .32s; }
.nav .brand { view-transition-name: khi-brand; }

/* ---------- header: PILL ĐÃ BỎ (Dang 01/08: "kỳ cục, phải full width") ----------
   Giữ nguyên header sticky full-width + trạng thái compact trắng của motion-v1. Không thêm gì. */

/* ---------- dải trust mảnh (thay 4 stat card — KryMark qgo7i1aq8y0z149: nhàm, "4 dòng máy" khó hiểu) ---------- */
.trust { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
  font-size: .95rem; color: var(--ink-soft); }
.trust b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.trust .sep { width: 1px; height: 18px; background: var(--line-2); }
.trust .star { width: 15px; height: 15px; fill: var(--clay-text); stroke: none; margin-right: 2px; vertical-align: -2px; }

/* ---------- B7 · con trỏ ngữ cảnh (chỉ pointer:fine — JS gắn body.cur-on) ---------- */
#khi-cur { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sage-deep); translate: -50% -50%; display: grid; place-items: center; font-size: 0; color: var(--on-dark);
  opacity: 0; transition: width .28s var(--ease), height .28s var(--ease), background .28s var(--ease), opacity .2s; }
body.cur-on { cursor: none; }
body.cur-on #khi-cur { opacity: 1; }
body.cur-on a, body.cur-on button, body.cur-on .btn { cursor: none; }
body.cur-on input, body.cur-on textarea, body.cur-on select { cursor: text; }
#khi-cur.big { width: 62px; height: 62px; background: rgba(62,76,56,.92); font-size: .72rem; font-weight: 500; letter-spacing: .04em; }
@media (pointer: coarse) { #khi-cur { display: none; } }

/* ---------- B8 · form tinh: label nổi + tick vẽ nét ----------
   Chỉ áp cho field đã đổi sang markup .fld (trang chủ + đặt lịch). Field .field cũ giữ nguyên. */
.fld { position: relative; }
.fld input, .fld textarea { width: 100%; padding: 22px 46px 8px 16px; font: inherit; font-size: 1rem; background: var(--cream-2);
  border: 1px solid transparent; border-radius: var(--r-md); outline: 0; transition: var(--t); }
.fld input { height: 58px; }
.fld textarea { padding-top: 26px; resize: vertical; }
.fld input:hover, .fld textarea:hover { border-color: var(--line-2); }
.fld input:focus, .fld textarea:focus { background: var(--surface); border-color: var(--sage); }
.fld label { position: absolute; left: 16px; top: 17px; color: var(--ink-faint); pointer-events: none; transition: all .22s var(--ease); font-size: 1rem; }
.fld input:focus + label, .fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label, .fld textarea:not(:placeholder-shown) + label {
  top: 7px; font-size: .72rem; letter-spacing: .04em; color: var(--sage-text); }
/* placeholder thật chỉ hiện khi đã focus (không thì đè lên label) */
.fld input:not(:focus)::placeholder, .fld textarea:not(:focus)::placeholder { color: transparent; }
.fld input:focus::placeholder, .fld textarea:focus::placeholder { color: var(--ink-faint); opacity: .6; }
.fld .ok { position: absolute; right: 14px; top: 18px; width: 22px; height: 22px; color: var(--sage);
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fld .ok path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--ease) .1s; }
.fld.valid .ok path { stroke-dashoffset: 0; }

/* ---------- giảm chuyển động: tắt hết lớp award ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim .hero-d .big { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .fld .ok path { transition: none; }
}