/* =========================================================
   0. DESIGN TOKENS — nguồn: Moodboard v1.1 (Typography/Color Lock)
      + UI Design Specification v1.0 §0
   ========================================================= */
:root{
  /* Color Lock — 8 màu duy nhất */
  --color-bg: #F7F3EC;
  --color-bg-alt: #EFE8DA;
  --color-heading: #2E3324;
  --color-body: #4A4A3E;
  --color-cta: #5C6B47;
  --color-cta-hover: #48543A;
  --color-divider: #D9D2C2;
  --color-accent: #B8935B;

  /* Typography Lock */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale — Desktop (≥1024px) */
  --fs-display: 52px;
  --fs-h2: 34px;
  --fs-anchor: 30px;
  --fs-anchor-ch7: 22px;
  --fs-subtitle: 19px;
  --fs-body: 18px;
  --fs-body-strong: 22px;
  --fs-h3-competency: 20px;
  --fs-small: 14px;
  --fs-cta: 16px;

  /* Spacing tokens — Desktop */
  --space-section: 120px; /* v2.0: giảm 25% từ 160px theo yêu cầu Final UI Polish */
  --space-section-lg: 160px; /* v2.0: giảm 20% từ 200px — vẫn rộng hơn space-section để Hero/CTA nổi bật */
  --space-heading-content: 48px;
  --space-block-ch2: 64px; /* tinh chỉnh: dùng mức cao nhất trong biên độ đã khóa 48–64px (Moodboard §4) */
  --space-block-ch4: 36px;
  --space-block-ch5-6: 40px;
  --space-anchor: 72px;
  --space-cta-closing: 160px; /* tinh chỉnh: dùng mức cao nhất trong biên độ đã khóa 120–160px (Moodboard §4) */
  --padding-page: 100px;
  --content-narrow: 680px;
  --content-wide: 1140px;

  /* Ch1-specific gap (câu hỏi mở đầu -> đoạn hội thoại) */
  --space-ch1-question-gap: 64px;
  /* Ch8-specific (câu kết -> footer) */
  --space-ch8-closing-footer: 64px;

  /* Ch7 — kích thước ảnh, tinh chỉnh vòng FINAL POLISH: tăng thêm 15% so với vòng trước (400px -> 460px, theo yêu cầu) */
  --ch7-photo-size: 460px;
}

/* Tablet (768–1023px) */
@media (max-width: 1023px){
  :root{
    --fs-display: 42px;
    --fs-h2: 30px;
    --fs-anchor: 27px;
    --fs-anchor-ch7: 20px;
    --fs-subtitle: 18px;
    --fs-body: 17px;
    --fs-body-strong: 20px;
    --fs-h3-competency: 20px;

    --space-section: 96px; /* v2.0 */
    --space-section-lg: 128px; /* v2.0 */
    --space-heading-content: 44px;
    --space-block-ch2: 48px;
    --space-block-ch4: 32px;
    --space-block-ch5-6: 36px;
    --space-anchor: 60px;
    --space-cta-closing: 125px; /* tinh chỉnh: tăng tương ứng nhịp desktop/mobile */
    --padding-page: 48px;
    --content-narrow: 560px;

    --space-ch1-question-gap: 56px;
    --ch7-photo-size: 280px;
  }
}

/* Mobile (<768px) */
@media (max-width: 767px){
  :root{
    --fs-display: 34px;
    --fs-h2: 26px;
    --fs-anchor: 24px;
    --fs-anchor-ch7: 19px;
    --fs-subtitle: 17px;
    --fs-body: 16.5px;
    --fs-body-strong: 19px;
    --fs-h3-competency: 18px;
    --fs-small: 13.5px;

    --space-section: 76px; /* v2.0: trong khoảng 72-80px theo yêu cầu */
    --space-section-lg: 96px; /* v2.0 */
    --space-heading-content: 36px;
    --space-block-ch2: 44px;
    --space-block-ch4: 30px;
    --space-block-ch5-6: 32px;
    --space-anchor: 52px;
    --space-cta-closing: 88px;
    --padding-page: 24px;
    --content-narrow: 100%;

    --space-ch1-question-gap: 40px;
    --space-ch8-closing-footer: 40px;
    --ch7-photo-size: 240px;

    /* tinh chỉnh Hero Mobile: giảm ~12% chiều cao tổng thể */
    --ch1-pad-top-mobile: 56px; /* v2.0 */
    --ch1-gap-mobile: 12px;
  }
}


/* =========================================================
   Reset & base
   ========================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
ul, ol{ list-style:none; margin:0; padding:0; }
p{ margin:0; }
blockquote{ margin:0; }
a{ color: inherit; }

/* Visible keyboard focus (accessibility quality floor) */
a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--color-heading);
  outline-offset: 2px;
}

/* =========================================================
   Layout helpers
   ========================================================= */
.ch{ padding-left: var(--padding-page); padding-right: var(--padding-page); }
.ch-inner-narrow{ max-width: var(--content-narrow); margin: 0 auto; }
.ch-inner-wide{ max-width: var(--content-wide); margin: 0 auto; }
.bg-alt{ background: var(--color-bg-alt); }
.align-left{ text-align: left; }
.align-center{ text-align: center; }

/* =========================================================
   Type scale utility classes
   ========================================================= */
.t-display{
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-display); line-height: 1.2; color: var(--color-heading); margin:0;
}
.t-h2{
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-h2); line-height: 1.3; color: var(--color-heading); margin:0;
}
.t-anchor{
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-anchor); line-height: 1.4; color: var(--color-heading); margin:0;
}
.t-subtitle{
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-subtitle); line-height: 1.5; color: var(--color-body); margin:0;
}
.t-body{
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-body); line-height: 1.8; color: var(--color-body); margin:0;
}
.t-body-strong{
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-body-strong); line-height: 1.6; color: var(--color-heading); margin:0;
}
.t-small{
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-small); line-height: 1.6; color: var(--color-body); opacity: .8; margin:0;
}

/* =========================================================
   CTA — UI Spec §0.5 (dùng chung Ch1 & Ch8)
   ========================================================= */
.btn-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 16px 32px;
  border-radius: 8px;
  border: none;
  background: var(--color-cta);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-cta);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 250ms ease-out, transform 250ms ease-out;
}
.btn-cta:hover{
  background: var(--color-cta-hover);
  transform: translateY(-1px);
}
.btn-cta--wide{ padding-left: 36px; padding-right: 36px; }

@media (max-width: 767px){
  .btn-cta{ width: 100%; padding: 14px 24px; }
}

/* =========================================================
   Ảnh Coach — khung chung (ảnh thật, không còn placeholder)
   ========================================================= */
.photo-real{
  width:100%; height:100%;
  object-fit: cover;
  border-radius: 4px;
  display:block;
  position: relative;
  z-index: 1;
}
.ch1-photo picture, .ch7-photo picture{ display:block; width:100%; height:100%; }
/* Quầng sáng tự nhiên rất nhẹ quanh ảnh — không phải khung trang trí,
   chỉ là một vùng sáng mờ giúp ảnh "thở" với nền thay vì cắt dán cứng */
.photo-halo{ position:relative; }
.photo-halo::before{
  content:"";
  position:absolute;
  inset: -6%;
  background: radial-gradient(closest-side, var(--color-accent) 0%, transparent 72%);
  opacity: .11;
  filter: blur(28px);
  z-index: 0;
  pointer-events:none;
}
.ch1-photo.photo-halo::before{ opacity: .12; } /* v2.0: +10% — Hero là điểm nhấn ánh sáng mạnh nhất */
.ch7-photo.photo-halo::before{ opacity: .085; } /* v2.0: giảm nhẹ để không cạnh tranh với Hero */

/* =========================================================
   Nature Layer — lớp cảm xúc thị giác rất mờ, dùng đúng 8 màu đã khóa.
   Không icon, không clip-art, không texture giấy. Chỉ ánh sáng/bóng.
   ========================================================= */
.nature-glow{
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  filter: blur(46px);
  opacity:.10;
}
.nature-glow--accent{ background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%); }
.nature-glow--soft{ background: radial-gradient(circle, var(--color-bg-alt) 0%, transparent 70%); opacity:.5; }

/* Bóng cành cây rất mờ — một nét hữu cơ đơn giản, không phải icon lá */
.nature-branch{
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.07;
  filter: blur(1.5px);
  color: var(--color-body);
}

/* =========================================================
   Divider — hệ thống mới: mềm, organic, mờ dần hai đầu (không còn border cứng)
   ========================================================= */
.divider-soft{
  height:1px;
  width:100%;
  background: linear-gradient(to right, transparent 0%, var(--color-divider) 50%, transparent 100%);
  border:none;
  opacity:.8;
}
.divider-soft--section{
  height:1px;
  max-width: 240px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent 0%, var(--color-divider) 50%, transparent 100%);
  opacity:.7;
}

/* =========================================================
   Animation — UI Spec §0.6
   ========================================================= */
@keyframes fadeInLoad{ from{opacity:0} to{opacity:1} }

.fade-load{
  opacity: 0;
  animation: fadeInLoad .7s ease-out forwards;
}
.fade-load.d1{ animation-delay: .1s; }

.fade-io{
  opacity: 0;
  transition: opacity .7s ease-out, transform .6s ease-out;
}
.fade-io.up{ transform: translateY(16px); }
.fade-io.is-visible{ opacity: 1; transform: none; }

/* stagger helpers (100–120ms so le) */
.fade-io.s0{ transition-delay: 0ms; }
.fade-io.s1{ transition-delay: 100ms; }
.fade-io.s2{ transition-delay: 200ms; }
.fade-io.s3{ transition-delay: 300ms; }
.fade-io.s4{ transition-delay: 400ms; }
.fade-io.s5{ transition-delay: 500ms; }
.fade-io.s6{ transition-delay: 600ms; }
.fade-io.s7{ transition-delay: 700ms; }
.fade-io.s8{ transition-delay: 800ms; }

/* prefers-reduced-motion — bắt buộc theo accessibility (UI Spec §0.6) */
@media (prefers-reduced-motion: reduce){
  .fade-load, .fade-io{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}
body.no-motion .fade-load,
body.no-motion .fade-io{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* =========================================================
   CHƯƠNG 1 — CUỘC GẶP ĐẦU TIÊN
   ========================================================= */
.ch1{
  padding-top: 170px; /* v2.0: +50px theo yêu cầu tăng chiều cao Hero (40-60px) */
  padding-bottom: var(--space-section-lg);
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}
.ch1 .nature-glow--corner{ top: -80px; right: -60px; width: 380px; height: 380px; }
.ch1 .nature-branch{ top: 32px; right: 6%; width: 130px; height: 130px; }
.ch1 .nature-glow--text-side{ top: 40%; left: -120px; width: 420px; height: 420px; opacity: .07; }
@media (max-width: 1023px){
  .ch1 .nature-glow--text-side{ display:none; } /* tránh chồng lớp khi Hero chuyển sang xếp dọc */
}

/* Logo — chỉ là dấu hiệu nhận diện thương hiệu ở góc, không phải Navigation Bar */
.ch1-logo{
  position: absolute;
  top: 32px;
  left: var(--padding-page);
  width: 68px;
  height: 68px;
  z-index: 2;
}
.ch1-logo img{ width:100%; height:100%; display:block; border-radius:50%; }
@media (max-width: 767px){
  .ch1-logo{ top: 16px; left: var(--padding-page); width: 52px; height: 52px; }
}
.ch1-grid{
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.ch1-content{ display:flex; flex-direction:column; }
.ch1-content > * + *{ margin-top: 20px; }
.ch1-subtitle{ margin-top: 16px; }
.ch1-question{ margin-top: var(--space-heading-content); }
.ch1-dialogue{ margin-top: var(--space-ch1-question-gap); display:flex; flex-direction:column; gap:16px; }
.ch1-cta-wrap{ margin-top: 32px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.ch1-photo{
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 518px; /* v2.0: +8% theo yêu cầu (480px -> 518px) */
  justify-self: end;
}
.ch1-photo .photo-real{ object-position: 50% 20%; } /* v2.0: ảnh đã crop lại tại nguồn với neo lên trên; giá trị này là dự phòng nếu tỉ lệ khung thay đổi */

@media (max-width: 1023px){
  .ch1{ padding-top: 80px; }
  .ch1-grid{ display:flex; flex-direction:column; }
  .ch1-photo{ max-width: 60%; margin: 0 auto; order: 3; }
  .ch1-content{ order: 2; }
  .ch1-question{ order: 0; } /* sửa lỗi QA: order:1 trước đây đẩy câu hỏi xuống dưới CTA, sai luồng đọc */
}
@media (max-width: 767px){
  .ch1{ padding-top: 56px; padding-bottom: 104px; } /* v2.0: Hero cao hơn +32px trên Mobile, tỉ lệ với Desktop */
  .ch1-grid{ display:flex; flex-direction:column; gap:0; }
  .ch1-content{ order: 0; } /* sửa lỗi: trước đây thiếu reset order khiến ảnh bị đẩy lên trên cùng, tiêu đề rơi xuống dưới ảnh trên Mobile */
  .ch1-content > * + *{ margin-top: var(--ch1-gap-mobile); }
  .ch1-question{ margin-top: 28px; order: 0; }
  .ch1-photo{ max-width: 100%; margin: 18px 0; order: 0; }
  .ch1-cta-wrap{ width:100%; margin-top: 24px; }
  .ch1-cta-wrap .btn-cta{ width:100%; }
}
/* thứ tự mobile chuẩn: Tiêu đề chính -> phụ -> câu hỏi -> ảnh -> hội thoại -> CTA -> ghi chú */
@media (max-width: 767px){
  .ch1-grid{ flex-direction: column; }
}

/* =========================================================
   CHƯƠNG 2 — CÓ PHẢI BẠN CŨNG TỪNG NHƯ VẬY?
   ========================================================= */
.ch2{
  background: var(--color-bg);
  padding-top: var(--space-section-lg);
  padding-bottom: var(--space-section-lg);
}
.ch2-inner{ max-width: var(--content-narrow); margin:0 auto; text-align:center; }
.ch2-pairs{ margin-top: var(--space-heading-content); display:flex; flex-direction:column; }
.ch2-pair{ padding: 0; }
.ch2-pair + .ch2-pair{ margin-top: var(--space-block-ch2); }
.ch2-pair p{ font-family: var(--font-sans); font-size: var(--fs-body); color: var(--color-body); }
.ch2-question{ margin-top: var(--space-block-ch2); font-style: italic; }
.ch2-explain{ margin-top: 40px; text-align:left; }
.ch2-invite{ margin-top: 32px; text-align:left; }
.ch2-end-divider{ margin-top: var(--space-heading-content); }

/* =========================================================
   CHƯƠNG 3 — HÀNH TRÌNH SỐNG ĐÚNG LÀ GÌ?
   ========================================================= */
.ch3{
  background: var(--color-bg-alt);
  padding-top: var(--space-section-lg);
  padding-bottom: var(--space-section-lg);
  position: relative;
  overflow: hidden;
}
.ch3 .nature-glow--behind-anchor{
  top: 50%; left: 50%;
  width: 340px; height: 340px;
  transform: translate(-50%, -50%);
  opacity: .12;
}
.ch3-inner{ max-width: var(--content-narrow); margin:0 auto; text-align:center; position:relative; z-index:1; }
.ch3-inner p + p{ margin-top: 12px; }
.ch3-anchor{ margin-top: var(--space-anchor); margin-bottom: var(--space-anchor); position:relative; }
.ch3-lead{ margin-top: 0; }

/* =========================================================
   CHƯƠNG 4 — CHÚNG TA SẼ BẮT ĐẦU TỪ ĐÂU?
   ========================================================= */
.ch4{
  background: var(--color-bg);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}
.ch4-inner{ max-width: 720px; margin:0 auto; text-align:center; }
.ch4-intro > * + *{ margin-top: 16px; }
.ch4-list{ margin-top: var(--space-heading-content); text-align:left; }
.ch4-item{
  padding: 25px 0;
  position: relative;
}
.ch4-item::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(to right, transparent 0%, var(--color-divider) 50%, transparent 100%);
  opacity:.4;
  filter: blur(.6px);
}
.ch4-item:last-child::after{
  content:"";
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(to right, transparent 0%, var(--color-divider) 50%, transparent 100%);
  opacity:.4;
  filter: blur(.6px);
}
.ch4-item-num{
  font-family: var(--font-sans); font-weight:400; font-size:13px;
  color: var(--color-accent); opacity:.7; display:block; margin-bottom:4px;
}
.ch4-item-name{
  font-family: var(--font-sans); font-weight:600; font-size: var(--fs-h3-competency);
  color: var(--color-heading); margin: 0 0 6px 0;
}
.ch4-item-desc{ font-family: var(--font-sans); font-size: var(--fs-body); color: var(--color-body); }
.ch4-outro{ margin-top: var(--space-heading-content); text-align:center; }

/* =========================================================
   CHƯƠNG 5 & 6 — danh sách khai mở
   ========================================================= */
.ch5, .ch6{
  background: var(--color-bg);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  position: relative;
  overflow: hidden;
}
.ch6{
  background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg-alt) 50%, var(--color-bg) 100%);
} /* tạo cảm giác thoáng/thở bằng sắc độ rất nhẹ, không thay đổi khoảng cách đã khóa */
.ch5{ padding-bottom: var(--space-section-lg); } /* khoảng lớn hơn trước Ch6 */
.ch5 .nature-glow--field{ bottom: -100px; left: -80px; width: 340px; height: 340px; opacity: .05; }
.ch5-inner, .ch6-inner{ max-width: var(--content-narrow); margin:0 auto; text-align:left; position:relative; z-index:1; }
.list-block{ margin-top: var(--space-heading-content); }
.list-item{ display:flex; gap:12px; align-items:flex-start; }
.list-item + .list-item{ margin-top: var(--space-block-ch5-6); }
.list-item-mark{ flex: 0 0 auto; color: var(--color-body); font-size: var(--fs-body); line-height:1.8; }
.list-item p{ font-size: var(--fs-body); color: var(--color-body); }
.ch5-reassure{ margin-top: var(--space-block-ch5-6); }
.ch5-invite, .ch6-invite{ margin-top: 32px; }
.ch6-boundary{ margin-top: var(--space-block-ch5-6); }

/* =========================================================
   CHƯƠNG 7 — NGƯỜI SẼ ĐỒNG HÀNH CÙNG BẠN
   ========================================================= */
.ch7{
  background: var(--color-bg);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  position: relative;
  overflow: hidden;
}
.ch7 .nature-glow--halo{
  top: 50%; left: 50%;
  width: 620px; height: 620px;
  transform: translate(-50%, -55%);
  opacity: .055; /* v2.0: giảm nhẹ so với .065 để Hero vẫn nổi bật nhất */
  filter: blur(58px);
}
.ch7-inner{ max-width: var(--content-narrow); margin:0 auto; text-align:center; position:relative; z-index:1; }
.ch7-photo{
  width: var(--ch7-photo-size); max-width: 100%; aspect-ratio: 1 / 1;
  margin: 0 auto; border-radius: 4px;
  transition: width .3s ease-out;
}
.ch7-photo .photo-real{ object-position: 42% 38%; } /* neo crop giữ khuôn mặt/ánh mắt cân đối trong khung vuông */
.ch7-text{ margin-top: 40px; text-align:left; }
.ch7-text > * + *{ margin-top: 16px; }
.ch7-anchor{
  display:block;
  margin-top: var(--space-anchor);
  margin-bottom: var(--space-anchor);
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-anchor-ch7);
  line-height: 1.6;
  color: var(--color-accent);
  text-align: left;
  position: relative;
}
.ch7-anchor::before{
  content:"";
  position:absolute;
  inset: -28% -8%;
  background: radial-gradient(closest-side, var(--color-accent) 0%, transparent 70%);
  opacity: .08;
  filter: blur(32px);
  z-index: -1;
  pointer-events:none;
}
.ch7-invite{ text-align:left; }

@media (max-width: 767px){
  .ch7-photo{ width: 240px; }
}

/* =========================================================
   CHƯƠNG 8 — MỘT LỜI MỜI DÀNH CHO BẠN (kết)
   ========================================================= */
.ch8{
  background: var(--color-bg-alt);
  padding-top: var(--space-section-lg);
  padding-bottom: 0;
}
.ch8-inner{ max-width: var(--content-narrow); margin:0 auto; text-align:center; }
.ch8-open p + p{ margin-top: 12px; }
.ch8-cta-group{ margin-top: 40px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.ch8-closing{
  margin-top: var(--space-cta-closing);
  font-style: italic;
}
.ch8-footer-gap{ height: var(--space-ch8-closing-footer); }
.site-footer{
  padding: 0 var(--padding-page) 40px;
  text-align: center;
  color: var(--color-body);
}
.site-footer p{ font-size: var(--fs-small); opacity: .7; }
.site-footer p + p{ margin-top: 4px; }