/* ============================================================
   V4 — Home dựng bám sát brief + 8 ảnh demo
   Magical nhưng gọn: hero đêm có tuyết nhẹ, phần dưới nền kem phẳng,
   motion chỉ phục vụ giải thích. Token màu/font kế thừa styles.css.
   ============================================================ */

body.v4 { background: var(--cream); }

/* Có width/height trên thẻ <img> để chặn CLS → bắt buộc trả height về auto,
   nếu không thuộc tính height sẽ đè lên aspect-ratio và làm méo ảnh.
   Đặt sớm để các rule bên dưới (hero, slideshow) vẫn ghi đè được. */
body.v4 img { height: auto; }

.sec4 { position: relative; padding: 96px 0; }
.sec4--ivory { background: #FBF4E9; }
.sec4--feature { padding: 116px 0; }     /* section điểm nhấn */
.sec4--tight { padding: 84px 0; }        /* section phụ */
.sec4 .sec-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.sec4 h2 {
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  line-height: 1.12; letter-spacing: -0.02em; color: var(--night);
}
.sec4 .sec-sub { margin-top: 14px; font-size: 1.12rem; color: var(--ink-soft); line-height: 1.6; }
.spark { color: var(--gold); font-style: normal; font-size: .62em; vertical-align: middle; }

/* section nền đêm — kéo màu xanh của hộp xuống giữa trang */
.sec4--night {
  background: linear-gradient(180deg, #101F45 0%, #1B3268 52%, #101F45 100%);
  color: var(--moon);
}
.sec4--night h2, .sec4--night .mission4-title { color: #fff; }
.sec4--night .sec-sub, .sec4--night .mission4-sub { color: rgba(253, 249, 240, .78); }

/* ---- Dải trust: 4 mục ngắn, ngăn nhau bằng dấu chấm ---- */
.trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 10px; margin: 22px 0 0; padding: 0; list-style: none;
  font-size: .84rem; font-weight: 700; letter-spacing: .04em;
}
.trust li { display: flex; align-items: center; gap: 10px; }
.trust li + li::before { content: "·"; opacity: .5; }
.trust--hero { color: rgba(253, 249, 240, .72); }
.trust--light { color: var(--ink-soft); justify-content: center; margin: 0 0 26px; }

/* logo 2 dòng như demo */
.brand--stack span { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.12; }
.brand--stack b { font-weight: 700; }
.brand--stack sup { font-size: .48em; }
.brand--light span { color: var(--moon); }

/* ============ ① HERO (demo-1) ============ */

.hero4 {
  position: relative; overflow: hidden;
  /* 42vw = đúng 1/2.38, tỉ lệ của hero-wide.webp — chiều cao bám theo chiều rộng
     để màn hình càng rộng KHÔNG càng cắt mất mặt bàn và thẻ mission. */
  min-height: clamp(600px, 42vw, 900px);
  display: flex; align-items: center;
  padding: 126px 0 78px;
  background: #0B1533;
  color: var(--moon);
}

/* ảnh scene chiếm trọn hero (<picture>: bản dọc riêng cho mobile) */
.hero4-bg { position: absolute; inset: 0; display: block; }
/* phải đủ specificity để thắng `body.v4 img { height:auto }` ở đầu file,
   nếu không ảnh chỉ cao theo tỉ lệ gốc và hở nền navy dưới đáy hero */
body.v4 .hero4-bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 40% 50%;   /* màn hẹp: ưu tiên giữ vùng tối bên trái cho chữ */
}
/* scrim: tối đặc bên trái cho chữ, tan dần để lộ cảnh bên phải */
/* scrim: CHỈ tối vùng chữ bên trái + một dải mỏng trên cùng cho nav.
   Bản cũ có thêm một lớp 180deg phủ suốt chiều ngang → sản phẩm bị một lớp
   mờ tối đè lên. Đã bỏ lớp đó; vùng sản phẩm (từ ~58% sang phải) nay sạch. */
.hero4-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9, 17, 40, .55) 0, rgba(9, 17, 40, 0) 120px),
    linear-gradient(90deg,
      rgba(9, 17, 40, .94) 0%,
      rgba(9, 17, 40, .88) 26%,
      rgba(9, 17, 40, .52) 44%,
      rgba(9, 17, 40, .10) 58%,
      rgba(9, 17, 40, 0) 68%);
}
.hero4-snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero4-inner { position: relative; z-index: 3; width: 100%; }
.hero4-copy { max-width: 30rem; }
.hero4-copy h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.04; letter-spacing: -0.028em; color: #fff;
  text-shadow: 0 2px 24px rgba(6, 12, 30, .55);
}
.hero4-sub {
  margin-top: 22px; max-width: 24ch;
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  color: rgba(253, 249, 240, .86); line-height: 1.6;
  text-shadow: 0 1px 14px rgba(6, 12, 30, .5);
}
.hero4-cta { margin-top: 32px; }
.hero4-arrow {
  display: inline-block; margin-top: 26px;
  font-size: 1.5rem; line-height: 1;
  color: rgba(253, 249, 240, .5);
}
.hero4-arrow:hover { color: var(--gold); }

/* ============ ② HOW IT WORKS (demo-2) ============ */

.how4 {
  display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr;
  gap: 0 10px; align-items: start; max-width: 1000px; margin-inline: auto;
}
.how4-step { text-align: center; min-width: 0; }
.how4-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  box-shadow: var(--elev-2);
  transition: transform .3s ease, box-shadow .3s ease;
}
.how4-step:hover .how4-frame { transform: translateY(-4px); box-shadow: var(--elev-3); }
.how4-frame img { width: 100%; aspect-ratio: 1 / 0.94; object-fit: cover; display: block; }
.how4-num {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #9B1B22; color: #fff;
  font-family: var(--font-body); font-weight: 800; font-size: .82rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.how4-step h3 { font-size: 1.2rem; margin: 22px 0 9px; color: var(--night); }
.how4-step p { font-size: 1rem; color: var(--ink-soft); line-height: 1.55; max-width: 26ch; margin-inline: auto; }

.how4-arrow {
  align-self: center; margin-top: 22%;
  font-size: 1.4rem; color: var(--ink-soft); text-align: center;
}

/* bước 03 = thẻ cào thật, cùng khung với 2 ảnh kia */
/* bước 03: nền là ảnh chụp tay cào thẻ → cùng chất liệu với 2 ô kia,
   phủ tối để thẻ cào tương tác nổi lên trên */
.how4-frame--scratch {
  aspect-ratio: 1 / 0.94;
  background:
    linear-gradient(160deg, rgba(9, 17, 40, .72) 0%, rgba(9, 17, 40, .58) 100%),
    url("../assets/img/v5/how-3.webp") center/cover no-repeat;
  display: grid; place-items: center; padding: 9%;
}
.how4-frame--scratch .scratch-card { width: 100%; margin: 0; transform: rotate(-2deg); }

/* ============ ③ WHAT'S A MISSION (demo-3) ============ */

.mission4-title {
  text-align: center; margin-bottom: 34px;
  font-size: clamp(1.9rem, 4vw, 2.85rem); color: var(--night);
}
.mission4-title i { color: var(--gold); font-style: normal; font-size: .5em; vertical-align: middle; margin: 0 .35em; }

.slideshow {
  position: relative; max-width: 1000px; margin: 0 auto;
  aspect-ratio: 16 / 8.6; border-radius: 14px; overflow: hidden;
  box-shadow: var(--elev-3);
  background: var(--night);
}
.slideshow .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.slideshow .slide.on { opacity: 1; }
.slideshow .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ss-play {
  position: absolute; z-index: 6; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .9);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  transition: transform .2s ease, background .2s ease;
}
.ss-play:hover { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.ss-play svg { margin-left: 4px; }
.slideshow.playing .ss-play { opacity: 0; pointer-events: none; }
.slideshow:hover .ss-play { opacity: 1; pointer-events: auto; }
.slideshow.playing .ss-play svg { margin-left: 0; }

.ss-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5;
  display: flex; gap: 7px; justify-content: center;
}
.ss-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(253, 249, 240, .45);
  transition: background .3s ease, transform .3s ease;
}
.ss-dots i.on { background: var(--gold); transform: scale(1.3); }

.mission4-sub {
  text-align: center; margin: 28px auto 0; max-width: 46ch;
  font-size: 1.12rem; color: var(--ink-soft);
}
.mission4-verbs {
  max-width: 780px; margin: 34px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;
  color: var(--gold);
}
.mission4-verbs .mv { padding: 6px 10px; border-left: 1px solid rgba(253, 249, 240, .18); }
.mission4-verbs .mv:first-child { border-left: 0; }
.mission4-verbs svg { width: 36px; height: 36px; display: block; margin: 0 auto 11px; }
.mv b { font-size: .84rem; font-weight: 800; letter-spacing: .18em; color: rgba(253, 249, 240, .92); }

/* ============ ④ MADE EASY FOR PARENTS (demo-4) ============ */

.easy4 { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 48px; align-items: center; }
.easy4-copy h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; }
.easy4-copy p { margin-top: 18px; font-size: 1.09rem; color: var(--ink-soft); line-height: 1.62; }
.easy4-chips { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 34px; }
.easy4-chips .ec {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: .86rem; font-weight: 700; color: var(--ink); text-align: center;
}
.easy4-chips .ec svg { width: 36px; height: 36px; }
.easy4-media img {
  width: 100%; aspect-ratio: 4 / 2.9; object-fit: cover;
  border-radius: 14px; display: block;
  box-shadow: var(--elev-3);
}

/* ============ ⑤ WHAT'S INSIDE — flat lay (demo-5) ============ */

.flatlay { max-width: 940px; margin: 0 auto; }
.fl-top {
  display: grid; grid-template-columns: 1fr 1.12fr 1fr;
  gap: 18px; align-items: end;
}
.fl-cell { margin: 0; position: relative; text-align: center; }
.fl-cell img { width: 100%; display: block; margin-inline: auto; }
.fl-cell--pip img { max-width: 190px; filter: var(--cut-1); }
.fl-cell--box img { max-width: 300px; filter: var(--cut-2); }
.fl-cell--cards img { max-width: 230px; filter: var(--cut-1); }

.fl-label {
  position: absolute; top: 4px; z-index: 2;
  font-size: .9rem; font-weight: 700; line-height: 1.35; color: var(--ink);
}
.fl-label small { display: block; font-weight: 600; color: var(--ink-soft); font-size: .84rem; }
.fl-label--left { left: -6px; text-align: left; }
.fl-label--right { right: -6px; text-align: right; }
.fl-hook { position: absolute; width: 64px; height: 44px; top: 30px; left: 8px; }
.fl-hook--r { left: auto; right: 8px; }

.fl-bottom {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 42px;
}
.fl-item { margin: 0; text-align: center; }
.fl-item img {
  width: 100%; max-width: 132px; aspect-ratio: 1; object-fit: contain;
  object-position: 50% 100%;             /* mọi món cùng chạm một baseline */
  margin: 0 auto 14px; display: block;
  filter: var(--cut-1);
  transition: transform .25s ease;
}
.fl-item:hover img { transform: translateY(-5px); }
.fl-item figcaption { font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.fl-item figcaption small { display: block; font-weight: 600; color: var(--ink-soft); }

.inside4-cta { text-align: center; margin-top: 50px; }
.inside4-cta .btn { min-width: 260px; }

/* ============ ⑥ STARTING LATE (demo-6) ============ */

.late4-wrap {
  max-width: 940px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 190px; gap: 20px; align-items: center;
}
.late4 { display: grid; grid-template-columns: 1fr 110px 1fr; gap: 6px; align-items: stretch; }
.lt-card {
  background: #fff; border: 1px solid rgba(20, 40, 60, .10); border-radius: 14px;
  padding: 24px 22px 26px; text-align: center;
  box-shadow: var(--elev-1);
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.late4.play .lt-card { opacity: 1; transform: none; }
.late4.play .lt-card:nth-child(3) { transition-delay: .5s; }
/* chốt cuối do JS bật sau 1,6s — bảo hiểm cho trường hợp transition không chạy */
.late4.settled .lt-card, .late4.settled .lt-arrow {
  opacity: 1; transform: none; transition: none;
}
.lt-when { font-size: .88rem; font-weight: 800; letter-spacing: .14em; color: var(--night); }
.lt-m {
  font-family: var(--font-body); font-weight: 800; letter-spacing: .04em;
  font-size: 1.34rem; color: #C0392B; margin: 10px 0 4px;
}
.lt-note { font-size: .95rem; color: var(--ink-soft); margin-bottom: 18px; }
.lt-card img { width: min(70%, 156px); margin-inline: auto; border-radius: 6px; box-shadow: var(--elev-2); }

.lt-arrow { display: grid; place-items: center; opacity: 0; transition: opacity .5s ease .25s; }
.late4.play .lt-arrow { opacity: 1; }
.lt-arrow svg { width: 96px; }

.late4-pip { position: relative; text-align: center; }
.late4-pip img { width: min(100%, 168px); margin-inline: auto; display: block; filter: var(--cut-1); }
.late4-hand {
  display: block; font-family: var(--font-hand); font-weight: 700;
  font-size: 1.6rem; line-height: 1.1; color: #C79A3A; margin-bottom: 2px;
}
.late4-swoop { width: 52px; height: 52px; position: absolute; left: -6px; top: 46px; }

/* ============ ⑦ SEE HOW FAMILIES PLAY (demo-7) ============ */

.gal4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gal4 figure {
  margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--elev-2);
  transition: transform .3s ease, box-shadow .3s ease;
}
.gal4 figure:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }
.gal4 img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; display: block; }

/* ============ ⑧ EMAIL CAPTURE (demo-8) ============ */

.email4-sec { background: #FBF4E9; padding-bottom: 76px; }
.email4-grid { display: grid; grid-template-columns: 1fr 260px; gap: 26px; align-items: end; }
.email4-main h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); color: var(--night); }
.email4-lead { margin-top: 14px; font-size: 1.12rem; color: var(--ink-soft); }

.email4-form { margin-top: 30px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.f-field label { display: block; font-weight: 800; font-size: .92rem; color: var(--night); margin-bottom: 8px; }
.f-field label small { font-weight: 600; color: var(--ink-soft); }
.f-wrap { position: relative; }
.f-wrap input {
  width: 100%; padding: 15px 46px 15px 18px;
  border-radius: 8px; border: 1.5px solid rgba(176, 138, 62, .45);
  background: #fff; font-family: inherit; font-size: 1rem; color: var(--ink);
}
.f-wrap input::placeholder { color: #9c9284; }
.f-wrap input:focus { border-color: var(--gold); outline: none; }
.f-ico { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; }
.f-field--opt .f-wrap input { border-style: dashed; }

.email4-submit { margin-top: 22px; min-width: 340px; }
.email4-fine { margin-top: 20px; font-size: .95rem; color: var(--ink-soft); }
.email4-done {
  display: none; margin-top: 30px;
  font-family: var(--font-display); font-size: 1.7rem; color: var(--spruce);
}
.email4-grid.done .email4-form,
.email4-grid.done .email4-fine { display: none; }
.email4-grid.done .email4-done { display: block; }

.email4-pip img { width: 100%; max-width: 240px; display: block; margin-left: auto; filter: var(--cut-1); }

/* ============ FOOTER (demo-8) ============ */

.foot4 { background: #101F45; color: rgba(253, 249, 240, .8); padding: 40px 0 26px; }
.foot4-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot4-values { display: flex; gap: 46px; flex-wrap: wrap; }
.foot4-values span {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: .84rem; font-weight: 700; line-height: 1.4; text-align: center;
  color: rgba(253, 249, 240, .82);
}
.foot4-values svg { width: 30px; height: 30px; }
.foot4-brand { text-align: right; }
.foot4-brand .brand { justify-content: flex-end; margin: 0 0 12px; }
.foot4-brand .brand--stack span { font-size: 1.32rem; }
.foot4-social { display: flex; gap: 14px; justify-content: flex-end; color: var(--moon); }
.foot4-social a { display: grid; place-items: center; width: 26px; height: 26px; opacity: .85; }
.foot4-social a:hover { opacity: 1; }
.foot4-social svg { width: 22px; height: 22px; }

.foot4-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid rgba(253, 249, 240, .14);
  font-size: .8rem; color: rgba(253, 249, 240, .55);
}
.foot4-links { display: flex; gap: 18px; }
.foot4-links a:hover { color: var(--moon); }

/* ============ Responsive ============ */

@media (max-width: 1000px) {
  .how4 { grid-template-columns: 1fr; gap: 34px; max-width: 420px; }
  .how4-arrow { margin: 0; transform: rotate(90deg); }
  .easy4 { grid-template-columns: 1fr; gap: 30px; }
  .easy4-media { order: -1; }
  .late4-wrap { grid-template-columns: 1fr; }
  .late4-pip { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .late4-pip img { width: 120px; }
  .late4-swoop { display: none; }
  .email4-grid { grid-template-columns: 1fr; }
  .email4-pip { display: none; }
  .gal4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .sec4, .sec4--feature, .sec4--tight { padding: 70px 0; }
  .sec4 .sec-head { margin-bottom: 40px; }

  /* hero mobile (hero-mobile-nb): vùng TRÊN của ảnh tối và trống cho chữ,
     sản phẩm nằm nửa dưới → chữ lên trên, ảnh neo phần dưới */
  /* hero mobile: xem khối .hero4 trong v6.css — ảnh tách khối, không overlay */
  .hero4-copy { max-width: none; }
  .hero4-sub { max-width: none; }
  .hero4-cta .btn { width: 100%; }
  .hero4-arrow { display: block; text-align: center; margin-top: 20px; }
  .trust--hero { justify-content: center; font-size: .8rem; }
  .fl-top { grid-template-columns: 1fr; gap: 26px; }
  .fl-cell--box { order: -1; }
  .fl-label { position: static; margin-bottom: 8px; text-align: center; }
  .fl-hook { display: none; }
  .fl-bottom { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .late4 { grid-template-columns: 1fr; gap: 12px; }
  .lt-arrow svg { width: 60px; transform: rotate(90deg); }
  .f-row { grid-template-columns: 1fr; gap: 16px; }
  .email4-submit { min-width: 0; width: 100%; }
  .mission4-verbs { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .mission4-verbs .mv:nth-child(3) { border-left: 0; }
  .slideshow { aspect-ratio: 4 / 3.2; }
  .ss-play { width: 60px; height: 60px; }
  .gal4 { grid-template-columns: 1fr; }
  .foot4-grid { flex-direction: column; align-items: flex-start; }
  .foot4-values { gap: 26px; }
  .foot4-brand { text-align: left; }
  .foot4-brand .brand, .foot4-social { justify-content: flex-start; }
  body.v4 { padding-bottom: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow .slide { transition: none; }
  .lt-card, .lt-arrow { transition: none; opacity: 1; transform: none; }
  .fl-item img { transition: none; }
}

/* ============ Bổ sung: nút lớn + sticky CTA (trước nằm ở khối inline) ============ */

.btn-lg { padding: 18px 42px; font-size: 1.05rem; min-height: 56px; }
.btn-sm { min-height: 44px; }
@media (max-width: 760px) { .btn { min-height: 52px; } }

/* viền focus rõ, dùng vàng brand — trước đây chỉ có outline mặc định */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: rgba(250, 246, 239, .97); backdrop-filter: blur(10px);
  box-shadow: 0 -4px 22px rgba(20, 40, 60, .16);
  transform: translateY(110%); transition: transform .35s ease;
}
.stickybar.on { transform: none; }
.stickybar b { display: block; font-size: .9rem; color: var(--ink); }
.stickybar small { color: var(--ink-soft); font-size: .76rem; }
@media (max-width: 760px) { .stickybar { display: flex; } }

/* ============ Sửa flat-lay: nhãn nằm phía trên ảnh, không đè ============ */

.fl-cell--pip, .fl-cell--cards { padding-top: 78px; }
.fl-label { top: 0; max-width: 160px; }
.fl-label--left { left: 0; }
.fl-label--right { right: 0; }
.fl-hook { top: 40px; }
.fl-cell--cards img { max-width: 210px; }
@media (max-width: 760px) {
  .fl-cell--pip, .fl-cell--cards { padding-top: 0; }
  .fl-label { max-width: none; }
}