/* ==========================================================================
   NURA-ZEN - EDITORIAL HEALTHCARE DESIGN SYSTEM (CHUẨN DESIGN LOOP)
   Tuân thủ bảng tiêu chuẩn bar.md:
   - Typography: Plus Jakarta Sans (Base) + Patrick Hand (Vietnamese-native Script)
   - Hero Layout: Text cố định an toàn 520px bên trái, không đè lên tranh
   - Chuyển tiếp mượt mà giữa các section, không gãy nhịp thị giác
   ========================================================================== */

:root {
  /* Brand Colors — Chuẩn Nura-Zen Bio-Emerald & Dawn Bridge */
  --color-primary: #029e8c;
  --color-primary-hover: #028777;
  --color-primary-dark: #141e36;
  --color-primary-light: #e6f7f3;
  --color-primary-soft: #f2faf8;
  --color-primary-glow: rgba(2, 158, 140, 0.25);
  --color-amber: #d97706;
  --color-amber-light: #fef3c7;

  /* Backgrounds & Surfaces — Tươi Sáng & Trắng Sứ */
  --color-bg: #f7fbfa;
  --color-surface: #ffffff;
  --color-surface-soft: #f2faf7;
  --color-surface-mint: #e6f7f3;
  --color-border: #dceee9;
  --color-border-hover: #029e8c;

  /* Text Colors */
  --color-text-main: #141e36;
  --color-text-secondary: #37534d;
  --color-text-muted: #5f7a74;
  --color-text-script: #029e8c;

  /* Thông điệp khoa học & thấu cảm (không dùng cảnh báo đỏ tiêu cực) */
  --color-danger-bg: #eef8f5;
  --color-danger-border: #a7f3d0;
  --color-danger-text: #065f46;

  /* Typography */
  --font-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Patrick Hand', cursive, sans-serif;

  /* Fluid Type Scale */
  --font-size-hero: clamp(2.2rem, 3.8vw, 3.35rem);
  --font-size-h2: clamp(1.75rem, 2.7vw, 2.35rem);
  --font-size-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --font-size-body: clamp(0.95rem, 0.3vw + 0.85rem, 1.05rem);
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.775rem;

  --line-height-tight: 1.18;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;

  /* Spacing */
  --pad-x: clamp(1.25rem, 4.5vw, 3rem);
  --section-spacing-y: clamp(3.5rem, 5.5vw, 5.5rem);
  --max-width: 1140px;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(20, 40, 36, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 40, 36, 0.06);
  --shadow-lg: 0 16px 40px rgba(20, 40, 36, 0.08);
  --shadow-cta: 0 6px 20px rgba(0, 158, 134, 0.28);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-base);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: var(--line-height-normal);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

img, svg {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   TYPOGRAPHY & ACCENTS
   ========================================================================== */

.text-teal {
  color: var(--color-primary);
}

.text-script {
  font-family: var(--font-script);
  font-size: 1.45rem;
  color: var(--color-text-script);
  line-height: 1.3;
  font-weight: 500;
  display: inline-block;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   BUTTONS (PILL SHAPE WITH CLEAN ARROW)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.85rem;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  user-select: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 158, 134, 0.38);
}

.btn-secondary {
  background: #ffffff;
  color: var(--color-text-main);
  border-color: #d8e6e1;
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.btn-sm {
  padding: 0.55rem 1.25rem;
  font-size: 0.875rem;
}

.btn-arrow {
  font-size: 1.15rem;
  transition: transform 0.2s ease;
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   CONTAINERS & SECTIONS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  min-width: 0;
}

.section {
  padding-top: var(--section-spacing-y);
  padding-bottom: var(--section-spacing-y);
  position: relative;
}

.section--alt {
  background-color: var(--color-surface-soft);
}

.section-header {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.section-header--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.section-header--center {
  text-align: center;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: var(--font-size-h2);
  font-weight: 800;
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  color: var(--color-text-main);
}

.section-desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 540px;
}

/* ==========================================================================
   1. SITE HEADER / NAVBAR
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  padding: 0.85rem 0;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo-brand-wrap {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  padding: 4px 0;
}

.site-logo {
  height: clamp(50px, 5.5vw, 64px);
  width: auto;
  max-width: 320px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}

.logo-brand-wrap:hover .site-logo {
  transform: scale(1.03);
}

.site-logo--dark {
  display: block;
}

.site-logo--light {
  display: none;
}

.footer-logo {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-logo--dark {
  display: block;
}

.footer-logo--light {
  display: none;
}

.logo-brand {
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--color-text-main);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-link {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   2. HERO SECTION — TOÀN CẢNH BACKGROUND IMAGE ẤM ÁP & TRỌNG TÂM
   ========================================================================== */

.hero,
section.hero,
#hero,
main > section.hero {
  position: relative;
  background-color: #060c18 !important;
  background-image: 
    linear-gradient(to right, rgba(6, 12, 24, 0.96) 0%, rgba(6, 12, 24, 0.88) 38%, rgba(6, 12, 24, 0.35) 68%, rgba(6, 12, 24, 0.05) 100%),
    url('../assets/images/nura-zen-hero.png') !important;
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  color: #ffffff !important;
  min-height: clamp(580px, 80vh, 780px) !important;
  display: flex !important;
  align-items: center !important;
  padding-top: clamp(2.5rem, 5vw, 4.5rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
  overflow: hidden;
}

/* Họa tiết sinh học mini-pattern trôi nhẹ ở nền */
.hero-pattern-bg {
  position: absolute;
  top: -60px;
  right: -60px;
  width: clamp(340px, 38vw, 540px);
  height: clamp(340px, 38vw, 540px);
  pointer-events: none;
  opacity: 0.10;
  z-index: 1;
  animation: floatZenPattern 24s ease-in-out infinite alternate;
}

@keyframes floatZenPattern {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(14px) rotate(2deg) scale(1.02);
  }
  100% {
    transform: translateY(-8px) rotate(-2deg) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pattern-bg {
    animation: none;
  }
}

html.reduce-motion .hero-pattern-bg {
  animation: none;
}

.hero-pattern-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-content {
  max-width: 620px;
  width: 100%;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--glow-teal, #4fd8ba);
  background: rgba(79, 216, 186, 0.12);
  border: 1.5px solid rgba(79, 216, 186, 0.35);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-tag-zen-icon {
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex-shrink: 0;
}

.hero-tag .tag-row-top {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.hero-tag .tag-brand {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 800;
}

.hero-tag .tag-name {
  color: #4fd8ba;
  font-weight: 900;
}

.hero-tag .tag-dot {
  color: rgba(79, 216, 186, 0.6);
}

.hero-tag .tag-desc {
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.hero-title {
  font-size: var(--font-size-hero);
  font-weight: 800 !important;
  line-height: var(--line-height-tight, 1.15);
  letter-spacing: -0.03em;
  color: #ffffff !important;
  margin-bottom: 1rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

.hero-title .text-teal {
  color: #4fd8ba !important;
  text-shadow: 0 0 22px rgba(79, 216, 186, 0.35);
}

.hero-subhead {
  font-size: clamp(1.025rem, 1.2vw, 1.18rem);
  color: rgba(255, 255, 255, 0.94) !important;
  line-height: 1.6;
  margin-bottom: 1.65rem;
  max-width: 580px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.hero-subhead strong {
  color: #ffffff !important;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.hero .btn-primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(2, 158, 140, 0.45);
}

.hero .btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(2, 158, 140, 0.6);
}

.hero .btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
  transform: translateY(-2px);
}

.hero-meta-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.hero-meta-icon {
  width: 18px;
  height: 18px;
  color: var(--glow-teal, #4fd8ba);
  flex-shrink: 0;
}

/* ==========================================================================
   3. SECTION 2: CÙNG BA MẸ THẤU HIỂU (PROBLEM & EMPATHY)
   ========================================================================== */

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.intro-photo-wrap {
  position: relative;
}

.intro-photo {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.intro-photo:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.intro-photo-badge {
  position: absolute;
  top: -16px;
  left: -12px;
  max-width: 250px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(20, 40, 36, 0.08);
  border: 1.5px solid var(--color-border);
  z-index: 2;
}

.intro-photo-badge .text-script {
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--color-primary-dark);
}

.intro-content .section-title {
  margin-bottom: 0.85rem;
}

.intro-subhead {
  font-size: 1.025rem;
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin-bottom: 1.75rem;
}

.stat-pill-banner {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.25rem;
  color: var(--color-danger-text);
  font-size: 0.925rem;
  font-weight: 600;
  margin-bottom: 1.75rem;
}

.intro-points-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.intro-point-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.intro-point-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.intro-point-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 0.2rem;
}

.intro-point-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   4. SECTION 3: GIẢI MÃ CƠ CHẾ THẦN KINH (THE MECHANISM - DSM-5)
   ========================================================================== */

.mechanism-editorial-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
}

.mechanism-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.mechanism-story h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 1rem;
  line-height: var(--line-height-snug);
}

.mechanism-story p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  line-height: var(--line-height-normal);
}

.compare-cards-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.compare-mini-card {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.compare-mini-card--danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

.compare-mini-card--safe {
  background: var(--color-primary-light);
  border-color: rgba(0, 158, 134, 0.25);
}

.compare-card-tag {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.compare-card-tag.text-danger {
  color: var(--color-danger-text);
}

.compare-card-tag.text-teal {
  color: var(--color-primary);
}

.compare-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 0.35rem;
}

.compare-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   5. SECTION 4: TRONG NURA-ZEN CÓ GÌ? (4 INGREDIENT CARDS)
   ========================================================================== */

.ingredients-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.ing-card {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.ing-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.ing-visual {
  width: 100px;
  height: 100px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ing-visual-rice {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.sphere-b6 {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fef08a 0%, #eab308 55%, #ca8a04 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #713f12;
  box-shadow: 0 8px 20px rgba(234, 179, 8, 0.35);
}

.sphere-mg {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0f2fe 0%, #38bdf8 55%, #0284c7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #0c4a6e;
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.35);
}

.sphere-zn {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8fafc 0%, #cbd5e1 55%, #64748b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #334155;
  box-shadow: 0 8px 20px rgba(100, 116, 139, 0.25);
}

.ing-dosage {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.65rem;
}

.ing-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 0.45rem;
}

.ing-desc {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* ==========================================================================
   6. SECTION 5: CAM KẾT AN TOÀN 6 KHÔNG (GFCF TRUST)
   ========================================================================== */

.trust-section {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.trust-pattern-bg {
  position: absolute;
  top: -60px;
  right: -60px;
  width: clamp(260px, 30vw, 420px);
  height: clamp(260px, 30vw, 420px);
  pointer-events: none;
  opacity: 0.08;
  z-index: 0;
}

.trust-pattern-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trust-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

.trust-item {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.trust-item:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  background: #ffffff;
}

.trust-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.trust-label {
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--color-text-main);
  line-height: 1.3;
}

/* ==========================================================================
   7. SECTION 6: LỘ TRÌNH CẢI THIỆN THỰC TẾ (TIMELINE 3 GIAI ĐOẠN)
   ========================================================================== */

.timeline-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.timeline-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform 0.2s ease;
}

.timeline-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

.timeline-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.775rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.timeline-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 0.65rem;
  line-height: var(--line-height-snug);
}

.timeline-desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ==========================================================================
   8. SECTION 7: THÔNG TIN BA MẸ CẦN BIẾT (HORIZONTAL ACTION CARDS)
   ========================================================================== */

.info-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.info-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.info-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.info-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-card-content {
  flex: 1;
  min-width: 0;
}

.info-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 0.25rem;
}

.info-card-desc {
  font-size: 0.825rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.info-card-arrow {
  color: var(--color-text-muted);
  font-size: 1.25rem;
  font-weight: 700;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.info-card:hover .info-card-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

/* ==========================================================================
   9. SECTION 8: CÂU HỎI THƯỜNG GẶP (FAQ ACCORDION)
   ========================================================================== */

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.faq-item {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item.active {
  border-color: var(--color-primary);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1.2rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}

.faq-arrow {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 1.5rem;
  color: var(--color-text-secondary);
  font-size: 0.925rem;
}

.faq-answer-inner {
  padding-bottom: 1.25rem;
  line-height: 1.6;
}

/* ==========================================================================
   10. SECTION 9: EDITORIAL CTA BANNER
   ========================================================================== */

.cta-editorial-banner {
  background: var(--color-primary-light);
  border: 1px solid rgba(0, 158, 134, 0.15);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cta-col-left {
  z-index: 1;
}

.cta-col-left .hero-tag {
  margin-bottom: 0.75rem;
}

.cta-col-left .cta-title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 0.5rem;
  line-height: var(--line-height-tight);
}

.cta-col-left .cta-desc {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.cta-col-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1rem;
}

.cta-col-mid .text-script {
  font-size: 1.65rem;
  max-width: 220px;
  line-height: 1.35;
}

.cta-col-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
}

/* Họa tiết trôi nhẹ trong banner CTA */
.cta-pattern-bg {
  position: absolute;
  bottom: -60px;
  right: -40px;
  width: clamp(260px, 32vw, 380px);
  height: clamp(260px, 32vw, 380px);
  pointer-events: none;
  opacity: 0.10;
  z-index: 0;
}

.cta-pattern-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-circle-graphic {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(2, 158, 140, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(2, 158, 140, 0.14);
  flex-shrink: 0;
}

.brand-zen-seal {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.cta-col-right .text-script {
  font-size: 1.45rem;
  max-width: 200px;
}

/* ==========================================================================
   11. SECTION 10: FORM TƯ VẤN CHUYÊN SÂU TRỰC TIẾP
   ========================================================================== */

.consult-wrap {
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.consult-pattern-bg {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 260px;
  height: 260px;
  pointer-events: none;
  opacity: 0.07;
  z-index: 0;
}

.consult-pattern-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1.15rem;
  text-align: left;
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--color-text-main);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
  background: #ffffff;
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0 1.75rem;
  background: #ffffff;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.footer-brand {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--color-text-main);
}

.footer-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.footer-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.footer-link:hover {
  color: var(--color-primary);
}

.footer-tagline {
  font-family: var(--font-script);
  font-size: 1.35rem;
  color: var(--color-text-muted);
}

.footer-disclaimer {
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.775rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  text-align: center;
}

/* ==========================================================================
   13. MODAL POPUP
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 36, 32, 0.65);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.25s;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-pattern-bg {
  position: absolute;
  top: -45px;
  right: -45px;
  width: 220px;
  height: 220px;
  pointer-events: none;
  opacity: 0.08;
  z-index: 0;
}

.modal-pattern-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal-brand-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-brand-logo {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
}

.modal-backdrop.open .modal-card {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.5rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.modal-close:hover {
  background: var(--color-surface-soft);
  color: var(--color-text-main);
}

/* ==========================================================================
   RESPONSIVE (390px Mobile QA)
   ========================================================================== */

@media (max-width: 992px) {
  .hero {
    background-image: none !important;
    background-color: var(--color-bg) !important;
  }

  .hero-tag {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    width: fit-content;
    max-width: 100%;
  }

  .hero-tag .tag-desktop-sep {
    display: none;
  }

  .hero-tag .tag-row-top {
    font-size: 0.72rem;
  }

  .hero-tag .tag-desc {
    font-size: 0.66rem;
    color: var(--color-primary);
    white-space: normal;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .hero-spacer {
    display: none;
  }

  .intro-grid {
    grid-template-columns: 1fr;
  }

  .mechanism-layout {
    grid-template-columns: 1fr;
  }

  .ingredients-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline-grid-3 {
    grid-template-columns: 1fr;
  }

  .info-cards-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .cta-editorial-banner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-col-mid {
    padding: 1.5rem 0;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .nav-links {
    display: none;
  }

  .btn {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .ingredients-grid-4 {
    grid-template-columns: 1fr;
  }

  .trust-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-top {
    flex-direction: column;
    text-align: center;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .intro-photo-badge {
    position: static;
    max-width: 100%;
    margin-bottom: 1rem;
  }
}


/* ==========================================================================
   ============ NURA-ZEN UX v3 — LỚP THIẾT KẾ "DỊU GIÁC QUAN" ============
   Mục tiêu: trang dành cho ba mẹ đang kiệt sức, đọc trên điện thoại,
   một tay bế con, và đã quá mệt mỏi với những lời quảng cáo thổi phồng.
   Nguyên tắc: đọc dễ - quét nhanh - trung thực - ít kích thích - dễ liên hệ.
   ========================================================================== */

:root {
  /* Hệ số cỡ chữ người dùng tự điều chỉnh (nút "Cỡ chữ lớn") */
  --ui-scale: 1;

  /* Nhịp đọc dễ chịu cho mắt mệt */
  --reading-measure: 66ch;
  --tap-min: 48px;

  /* Màu ngữ nghĩa cho khối minh bạch / an toàn */
  --color-honest-bg: #fffaf0;
  --color-honest-border: #f6dfb4;
  --color-honest-text: #7a4b0a;
  --color-amber: #b45309;
}

html {
  font-size: calc(100% * var(--ui-scale));
}

body {
  font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.12rem);
  line-height: 1.72;
  letter-spacing: 0.002em;
}

p, li, .ing-desc, .timeline-desc, .info-card-desc,
.intro-point-desc, .faq-answer-inner, .compare-card-desc {
  max-width: var(--reading-measure);
  line-height: 1.75;
}

/* --- Giảm chuyển động: tôn trọng cài đặt hệ điều hành + nút tắt thủ công --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, 
html[data-motion="off"] *::before, 
html[data-motion="off"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}
html[data-motion="off"] .ing-card:hover,
html[data-motion="off"] .intro-photo:hover,
html[data-motion="off"] .trust-item:hover,
html[data-motion="off"] .timeline-card:hover {
  transform: none;
}

/* --- Bàn phím & trình đọc màn hình --- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

.hero :where(a, button):focus-visible {
  outline-color: #7fe7d3;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 300;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0.75rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Vùng chạm tối thiểu 48px cho tay đang bận --- */
.btn,
.faq-question,
.nav-cta,
.a11y-btn,
.mobile-bar a,
.mobile-bar button {
  min-height: var(--tap-min);
}

/* ==========================================================================
   HEADER: thanh trợ năng + CTA + menu di động
   ========================================================================== */

.nav-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.a11y-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.a11y-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 48px;
  padding: 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  line-height: 1.1;
}

.a11y-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.a11y-btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: #fff;
}

.a11y-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0 1.1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
}

.nav-cta:hover { background: var(--color-primary-hover); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-main);
}

.nav-toggle svg { width: 22px; height: 22px; }

/* ==========================================================================
   DẢI "TRANG NÀY CÓ GÌ" — giúp ba mẹ nhảy thẳng tới thứ họ cần
   ========================================================================== */

.jump-strip {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0.85rem 0;
}

.jump-strip-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.jump-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: 0.25rem;
}

.jump-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-main);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.jump-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================================================
   DẢI MINH BẠCH — "Chúng tôi nói rõ ngay từ đầu"
   ========================================================================== */

.honest-band {
  background: var(--color-honest-bg);
  border-top: 1px solid var(--color-honest-border);
  border-bottom: 1px solid var(--color-honest-border);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
}

.honest-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-honest-text);
  margin-bottom: 1rem;
}

.honest-head svg { width: 18px; height: 18px; flex: none; }

.honest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.honest-item {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--color-honest-border);
  border-radius: var(--radius-md);
  padding: 1.05rem 1.15rem;
  min-width: 0;
}

.honest-item strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 0.3rem;
}

.honest-item span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   KHỐI AN TOÀN & LIỀU DÙNG — thông tin ba mẹ tìm trước khi tin
   ========================================================================== */

.safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.safety-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.35rem;
  min-width: 0;
}

.safety-card--warn { border-left-color: var(--color-amber); }

.safety-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 0.6rem;
}

.safety-card h3 svg { width: 19px; height: 19px; flex: none; color: var(--color-primary); }
.safety-card--warn h3 svg { color: var(--color-amber); }

.safety-list {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.safety-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.safety-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.safety-card--warn .safety-list li::before { background: var(--color-amber); }

.safety-note {
  margin-top: 1.5rem;
  background: var(--color-surface-mint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: none;
}

.safety-note strong { color: var(--color-text-main); }

/* ==========================================================================
   FORM: giảm ma sát, tôn trọng lựa chọn liên hệ của ba mẹ
   ========================================================================== */

.form-optional-tag {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.form-help {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.6rem;
}

.choice-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 0.95rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: var(--tap-min);
}

.choice-card input {
  margin-top: 0.22rem;
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  flex: none;
}

.choice-card span {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-main);
}

.choice-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.form-details {
  margin: 0.25rem 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  overflow: hidden;
}

.form-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-details > summary::-webkit-details-marker { display: none; }

.form-details > summary::before {
  content: "+";
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
}

.form-details[open] > summary::before { content: "–"; }

.form-details-body { padding: 0 1rem 1rem; }

/* Thông báo thành công thay cho alert() gây giật mình */
.form-status {
  display: none;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-primary-dark);
}

.form-status.is-visible { display: flex; }
.form-status svg { width: 20px; height: 20px; flex: none; color: var(--color-primary); }

/* ==========================================================================
   THANH HÀNH ĐỘNG CỐ ĐỊNH TRÊN DI ĐỘNG
   ========================================================================== */

.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem calc(0.65rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
}

.mobile-bar a,
.mobile-bar button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}

.mobile-bar svg { width: 18px; height: 18px; flex: none; }

.mobile-bar .mb-ghost {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary);
}

.mobile-bar .mb-solid {
  color: #fff;
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

/* ==========================================================================
   VI CHỈNH NHỊP ĐỌC CÁC KHỐI CŨ
   ========================================================================== */

.stat-pill-banner { max-width: none; }
.section-desc { max-width: 62ch; }

.timeline-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

.faq-question { text-align: left; }

/* Disclaimer y tế đọc được, không bị chìm */
.footer-disclaimer { max-width: none; }

/* ==========================================================================
   RESPONSIVE UX v3
   ========================================================================== */

/* Nút trợ năng phải còn ở lại trên di động — đó chính là nơi ba mẹ
   đọc trang này nhiều nhất và cũng là nơi chữ nhỏ nhất. */
@media (max-width: 860px) {
  .a11y-group { padding: 0.2rem; gap: 0.2rem; }
  .a11y-btn { min-width: 44px; padding: 0 0.5rem; }
  .logo-brand { font-size: 1.05rem; letter-spacing: 0.02em; }
  .nav-tools { gap: 0.4rem; }
}

@media (max-width: 400px) {
  .logo-brand { font-size: 0.95rem; }
  .a11y-btn { min-width: 40px; padding: 0 0.35rem; }
  .nav-toggle { width: 44px; }
}

@media (max-width: 992px) {
  .honest-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }

  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 0.75rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .nav-links.is-open { display: flex; }

  .nav-links li { padding: 0 var(--pad-x); }

  .nav-links .nav-link {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links li:last-child .nav-link { border-bottom: 0; }

  .site-header { position: sticky; }
  .nav-wrap { position: relative; }

  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }
}

@media (max-width: 640px) {
  /* Cho các chip xuống dòng thay vì cuộn ngang: không giấu lựa chọn nào
     khỏi mắt ba mẹ, và không cần thao tác vuốt để phát hiện ra chúng. */
  .jump-strip { padding: 0.8rem 0; }
  .jump-strip-inner { flex-wrap: wrap; gap: 0.5rem; }
  .jump-chip { font-size: 0.86rem; padding: 0 0.8rem; min-height: 42px; }
  .jump-label { display: none; }
}

:root {
  /* Dải cảnh: Tươi sáng, thanh nhã, ấm áp (Bình Minh - Dawn Bridge) */
  --scene-night-0: #f7fbfa;
  --scene-night-1: #ffffff;
  --scene-night-2: #f2faf7;
  --scene-night-3: #ffffff;
  --scene-night-4: #f7fbf9;
  --scene-night-5: #ffffff;
  --scene-dawn-1:  #eef8f5;
  --scene-dawn-2:  #ffffff;
  --scene-dawn-3:  #f4faf8;
  --scene-morning: #ffffff;

  /* Chữ trên nền sáng */
  --ink-night-hi: #141e36;
  --ink-night:    #37534d;
  --ink-night-lo: #5f7a74;

  /* Nhấn sáng theo màu sản phẩm Nura-Zen Bio-Emerald */
  --glow-teal:   #029e8c;
  --glow-amber:  #d97706;
  --glow-rose:   #029e8c;
  --glow-violet: #029e8c;

  --glass-bg: #ffffff;
  --glass-border: #dceee9;
  --glass-shadow: 0 12px 36px rgba(2, 158, 140, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);

  --radius-art: 22px;
}

body { background: var(--color-bg); color: var(--color-text-main); }

/* --- Lớp hoa văn nhẹ nhàng tạo cảm giác hữu cơ sinh học --- */
body::after {
  display: none;
}

/* ==========================================================================
   CẢNH — nền và màu chữ tươi sáng theo từng phần
   ========================================================================== */

[data-scene] {
  position: relative;
  isolation: isolate;
}

[data-scene="night-0"]:not(.hero):not(#hero) { background: var(--scene-night-0); }
[data-scene="night-1"] { background: var(--scene-night-1); }
[data-scene="night-2"] { background: var(--scene-night-2); }
[data-scene="night-3"] { background: var(--scene-night-3); }
[data-scene="night-4"] { background: var(--scene-night-4); }
[data-scene="night-5"] { background: var(--scene-night-5); }
[data-scene="dawn-0"]  { background: var(--scene-night-0); }
[data-scene="dawn-1"]  { background: var(--scene-dawn-1); }
[data-scene="dawn-2"]  { background: var(--scene-dawn-2); }
[data-scene="dawn-3"]  { background: var(--scene-dawn-3); }
[data-scene="morning"] { background: var(--scene-morning); }

/* --- Chữ trên nền sáng chuẩn xác --- */
[data-scene] .section-title,
[data-scene] h2,
[data-scene] h3,
[data-scene] .intro-point-title,
[data-scene] .compare-card-title,
[data-scene] .ing-title,
[data-scene] .honest-item strong,
[data-scene] .scrolly-headline {
  color: var(--ink-night-hi);
}

[data-scene] p,
[data-scene] li,
[data-scene] .section-desc,
[data-scene] .intro-subhead,
[data-scene] .intro-point-desc,
[data-scene] .ing-desc,
[data-scene] .compare-card-desc,
[data-scene] .honest-item span,
[data-scene] .mechanism-story p {
  color: var(--ink-night);
}

[data-scene] strong { color: var(--ink-night-hi); }
[data-scene] .text-teal { color: var(--color-primary); }
[data-scene] .text-script { color: var(--color-primary); }
[data-scene] em { color: var(--color-amber); font-style: italic; }

/* ==========================================================================
   TYPOGRAPHY EDITORIAL — dấu chương và tiêu đề khổ lớn
   ========================================================================== */

.chapter-mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  max-width: none;
}

.section-header--center .chapter-mark { justify-content: center; }

.chapter-num {
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--color-primary);
  opacity: 0.85;
}

.chapter-line {
  width: clamp(28px, 5vw, 56px);
  height: 1px;
  background: linear-gradient(to right, var(--color-primary), transparent);
  opacity: 0.6;
}

.chapter-name {
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

[data-scene^="dawn"] .chapter-num { -webkit-text-stroke-color: var(--color-primary); }
[data-scene^="dawn"] .chapter-line { background: linear-gradient(to right, var(--color-primary), transparent); }
[data-scene^="dawn"] .chapter-name { color: var(--color-primary); }

.section-title {
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--color-text-main);
}

/* ==========================================================================
   CHUYỂN TIẾP KHỐI HERO VÀ CẢNH ĐÊM
   ========================================================================== */

.hero::after {
  height: 120px;
  background: linear-gradient(to bottom, transparent 0%, var(--scene-night-0, #060c18) 100%);
}

.honest-band {
  border-top: 1px solid rgba(245, 185, 113, 0.18);
  border-bottom: 1px solid rgba(245, 185, 113, 0.18);
}

.honest-head { color: var(--glow-amber); }

.honest-item {
  background: var(--glass-bg);
  border: 1px solid rgba(245, 185, 113, 0.20);
  border-radius: var(--radius-art);
  box-shadow: var(--glass-shadow);
}

/* ==========================================================================
   THẺ KÍNH TRÊN NỀN ĐÊM
   ========================================================================== */

[data-scene^="night"] .mechanism-editorial-card,
[data-scene^="night"] .trust-section,
[data-scene^="night"] .ing-card,
[data-scene^="night"] .compare-mini-card,
[data-scene^="night"] .scrolly-step {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-art);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-scene^="night"] .ing-card:hover {
  background: #ffffff;
  border-color: #029e8c;
  box-shadow: 0 12px 30px rgba(2, 158, 140, 0.15);
}

.compare-mini-card--danger,
[data-scene^="night"] .compare-mini-card--danger {
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
}

.compare-mini-card--safe,
[data-scene^="night"] .compare-mini-card--safe {
  border: 2px solid #029e8c;
  background: #f0fdf9;
  box-shadow: 0 10px 30px rgba(2, 158, 140, 0.12);
}

.compare-card-tag.text-danger,
[data-scene^="night"] .compare-card-tag.text-danger { color: #e11d48; }
.compare-card-tag.text-teal,
[data-scene^="night"] .compare-card-tag.text-teal { color: #029e8c; }

.compare-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.compare-mini-card { padding: 1.5rem 1.6rem; min-width: 0; }

/* Dải thống kê 80% — Thấu cảm khoa học mang lại giải pháp */
.stat-pill-banner,
[data-scene^="night"] .stat-pill-banner {
  background: #eef8f5;
  border: 1.5px solid #a7f3d0;
  border-radius: var(--radius-md);
  color: #065f46;
  padding: 0.85rem 1.25rem;
  font-size: 0.95rem;
}

.stat-pill-banner strong,
[data-scene^="night"] .stat-pill-banner strong { 
  color: #028777; 
  font-weight: 700; 
}

/* Điểm đau 01/02/03 — chuẩn màu ngọc bích */
[data-scene^="night"] .intro-point-icon {
  background: #e6f7f3;
  border: 1.5px solid #029e8c;
  color: #029e8c;
  font-weight: 700;
  font-size: 1rem;
}

.intro-photo {
  border-radius: var(--radius-art);
  box-shadow: 0 16px 40px rgba(20, 30, 54, 0.08);
}

[data-scene^="night"] .intro-photo-script .text-script { 
  color: #029e8c; 
}

/* ==========================================================================
   SCENE CUỘN KỂ CHUYỆN — cơ chế GABA
   ========================================================================== */

.scrolly {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.scrolly-visual {
  position: sticky;
  top: clamp(90px, 16vh, 150px);
  display: flex;
  justify-content: center;
}

.neuro-figure {
  width: min(100%, 380px);
  color: var(--glow-teal);
  text-align: center;
  transition: color 0.6s ease;
}

.neuro-figure[data-step="2"] { color: var(--glow-rose); }
.neuro-figure[data-step="3"] { color: var(--glow-teal); }

.neuro-figure svg { width: 100%; height: auto; overflow: visible; }

.neuro-ring {
  fill: none;
  stroke: currentColor;
  transition: opacity 0.6s ease, stroke-width 0.6s ease;
}

.neuro-ring--outer { stroke-width: 1; opacity: 0.22; }
.neuro-ring--inner { stroke-width: 1; opacity: 0.12; stroke-dasharray: 3 9; }

.neuro-wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.neuro-wave {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.neuro-wave--calm path:nth-child(2),
.neuro-wave--calm path:nth-child(3) { opacity: 0.4; }
.neuro-wave--settle path:nth-child(2),
.neuro-wave--settle path:nth-child(3) { opacity: 0.45; }
.neuro-wave--storm path:nth-child(2),
.neuro-wave--storm path:nth-child(3) { opacity: 0.5; stroke-width: 1.5; }

.neuro-figure[data-step="1"] .neuro-wave--calm,
.neuro-figure[data-step="2"] .neuro-wave--storm,
.neuro-figure[data-step="3"] .neuro-wave--settle { opacity: 1; }

.neuro-figure[data-step="2"] .neuro-ring--outer { opacity: 0.4; stroke-width: 2; }

.neuro-core {
  fill: currentColor;
  transition: r 0.6s ease, opacity 0.6s ease;
  opacity: 0.85;
}

.neuro-figure[data-step="2"] .neuro-core { opacity: 1; }

.neuro-caption {
  margin-top: 1.5rem;
  position: relative;
  min-height: 2.6rem;
}

.neuro-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.neuro-figure[data-step="1"] .neuro-state--1,
.neuro-figure[data-step="2"] .neuro-state--2,
.neuro-figure[data-step="3"] .neuro-state--3 { opacity: 1; }

.scrolly-headline {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 2rem;
  max-width: 22ch;
}

.scrolly-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 6vh, 3rem);
  padding-bottom: 12vh;
}

.scrolly-step {
  padding: 1.5rem 1.65rem;
  min-width: 0;
  transition: opacity 0.5s ease, border-color 0.5s ease;
}

.scrolly-step p { margin: 0; font-size: 1rem; }

.step-index {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glow-teal);
  margin-bottom: 0.7rem;
  opacity: 0.75;
}

/* Khi hiệu ứng bật: nhịp chưa tới thì mờ đi để mắt biết đang đọc nhịp nào */
html[data-motion="on"] .scrolly-step { opacity: 0.38; }
html[data-motion="on"] .scrolly-step.is-active {
  opacity: 1;
  border-color: rgba(79, 216, 186, 0.38);
}

/* ==========================================================================
   ORB THÀNH PHẦN — có chiều sâu thật thay cho hình tròn phẳng
   ========================================================================== */

.ing-visual { width: 118px; height: 118px; }

.sphere-b6, .sphere-mg, .sphere-zn {
  position: relative;
  width: 104px;
  height: 104px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  isolation: isolate;
}

/* Vệt sáng phản chiếu phía trên — thứ làm quả cầu trông có khối */
.sphere-b6::before, .sphere-mg::before, .sphere-zn::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 16%;
  width: 46%;
  height: 32%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
  filter: blur(3px);
  z-index: 1;
}

/* Bóng đổ nhận sáng từ dưới lên, tách quả cầu khỏi nền */
.sphere-b6::after, .sphere-mg::after, .sphere-zn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 -14px 24px rgba(0, 0, 0, 0.35), inset 0 6px 14px rgba(255, 255, 255, 0.25);
  z-index: 1;
}

.sphere-b6 {
  background: radial-gradient(circle at 34% 28%, #fde68a 0%, #f0b429 42%, #b8791a 78%, #6d4410 100%);
  box-shadow: 0 18px 38px rgba(240, 180, 41, 0.28), 0 0 0 1px rgba(253, 230, 138, 0.18);
}

.sphere-mg {
  background: radial-gradient(circle at 34% 28%, #cffafe 0%, #4cc9e8 42%, #1a7fa8 78%, #0b3d55 100%);
  box-shadow: 0 18px 38px rgba(76, 201, 232, 0.26), 0 0 0 1px rgba(207, 250, 254, 0.18);
}

.sphere-zn {
  background: radial-gradient(circle at 34% 28%, #f1f5f9 0%, #b6c3d1 42%, #6d7d90 78%, #333e4c 100%);
  box-shadow: 0 18px 38px rgba(148, 163, 184, 0.24), 0 0 0 1px rgba(241, 245, 249, 0.2);
}

.ing-visual-rice {
  width: 104px;
  height: 104px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(79, 216, 186, 0.28);
}

[data-scene^="night"] .ing-dosage {
  background: rgba(79, 216, 186, 0.14);
  border: 1px solid rgba(79, 216, 186, 0.3);
  color: var(--glow-teal);
}

/* ==========================================================================
   HUY HIỆU GFCF — đặt trên đĩa sáng để ảnh gốc màu teal vẫn đọc được,
   và hiển thị đủ lớn để chữ in trong ảnh không bị bóp thành vệt mờ
   ========================================================================== */

[data-scene^="night"] .trust-item {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-art);
  padding: 1.15rem 0.6rem;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

[data-scene^="night"] .trust-item:hover {
  background: #ffffff;
  border-color: var(--glow-teal);
}

.trust-item img {
  width: 86px;
  height: auto;
  object-fit: contain;
}

/* Nhãn chữ đã có sẵn trong ảnh huy hiệu — giữ lại cho trình đọc màn hình */
.trust-label {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   GIAO MÙA — nơi đêm gặp bình minh
   ========================================================================== */

.dawn-break {
  position: relative;
  height: clamp(210px, 30vw, 340px);
  overflow: hidden;
  background: linear-gradient(to bottom,
    var(--scene-night-5) 0%,
    #3b2440 22%,
    #7a3d4e 44%,
    #c4694f 64%,
    #eda45f 80%,
    var(--scene-dawn-1) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

/* Vòng cung ánh sáng — motif "cây cầu" của Dawn Bridge */
.dawn-arc {
  position: absolute;
  left: 50%;
  bottom: -62%;
  width: 190%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 224, 178, 0.55) 0%, rgba(255, 186, 120, 0.22) 38%, transparent 68%);
  pointer-events: none;
}

.dawn-sun {
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: clamp(70px, 11vw, 120px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6e2 0%, #ffd79a 42%, rgba(255, 186, 120, 0) 72%);
  pointer-events: none;
}

.dawn-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: none;
  text-align: center;
}

.dawn-quote .text-script {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  color: #4a2415;
  text-shadow: 0 1px 14px rgba(255, 233, 199, 0.75);
}

/* ==========================================================================
   NỬA SÁNG — bình minh ấm, không còn trắng bệnh viện
   ========================================================================== */

[data-scene^="dawn"] .timeline-card,
[data-scene^="dawn"] .info-card,
[data-scene^="dawn"] .safety-card,
[data-scene^="dawn"] .faq-item,
[data-scene^="dawn"] .consult-wrap {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(196, 160, 126, 0.24);
  border-radius: var(--radius-art);
  box-shadow: 0 14px 34px rgba(124, 82, 48, 0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

[data-scene^="dawn"] .safety-card { border-radius: 6px var(--radius-art) var(--radius-art) 6px; }

/* Số chương khổ lớn cho lộ trình — nhịp editorial của nửa sáng */
.timeline-card { counter-increment: tl; overflow: hidden; }

.timeline-card::after {
  content: "0" counter(tl);
  position: absolute;
  right: 0.75rem;
  bottom: -0.6rem;
  font-size: clamp(3.4rem, 7vw, 5rem);
  font-weight: 200;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(180, 83, 9, 0.28);
  pointer-events: none;
}

.timeline-grid-3 { counter-reset: tl; }

.timeline-step-badge {
  background: linear-gradient(135deg, rgba(245, 185, 113, 0.28), rgba(245, 185, 113, 0.12));
  color: var(--color-amber);
  border: 1px solid rgba(180, 83, 9, 0.18);
}

.safety-note {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.86), rgba(253, 241, 231, 0.7));
  border-color: rgba(196, 160, 126, 0.26);
  border-radius: var(--radius-art);
}

/* ==========================================================================
   CTA — nắng sớm
   ========================================================================== */

.cta-editorial-banner {
  background:
    radial-gradient(70% 120% at 12% 12%, rgba(255, 233, 199, 0.95), transparent 62%),
    linear-gradient(135deg, #fff4e0 0%, #ffe6c6 48%, #ffd9ae 100%);
  border: 1px solid rgba(180, 83, 9, 0.16);
  border-radius: 28px;
  box-shadow: 0 26px 60px rgba(180, 110, 40, 0.14);
}

.cta-editorial-banner .cta-title { letter-spacing: -0.02em; }
.cta-editorial-banner .text-script { color: #8a4a12; }

.brand-circle-graphic {
  background: linear-gradient(140deg, var(--color-primary), #046b5c);
  box-shadow: 0 16px 34px rgba(0, 158, 134, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.site-footer {
  background: var(--scene-morning);
  border-top: 1px solid rgba(196, 160, 126, 0.24);
}

/* ==========================================================================
   HEADER — theo cảnh: kính tối trong đêm, kính sáng khi trời sáng
   ========================================================================== */

.site-header {
  background: rgba(6, 12, 24, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Trong header kính tối (cảnh đêm): hiển thị logo bản sáng (chữ trắng) */
.site-header .site-logo--dark {
  display: none;
}

.site-header .site-logo--light {
  display: block;
}

.site-header .logo-brand { color: var(--ink-night-hi); }
.site-header .nav-link { color: rgba(255, 255, 255, 0.85); }
.site-header .nav-link:hover { color: var(--glow-teal); }

.site-header .nav-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--ink-night-hi);
}

html.is-dawn .site-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* Trong header kính sáng (bình minh / nền sáng): hiển thị logo bản tối (chữ xanh đen) */
html.is-dawn .site-header .site-logo--dark {
  display: block;
}

html.is-dawn .site-header .site-logo--light {
  display: none;
}

html.is-dawn .site-header .logo-brand { color: var(--color-text-main); }
html.is-dawn .site-header .nav-link { color: var(--color-text-secondary); }
html.is-dawn .site-header .nav-link:hover { color: var(--color-primary); }
html.is-dawn .site-header .nav-toggle { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); color: var(--color-text-main); }
html.is-dawn .nav-links { background: var(--scene-morning); }

/* Menu di động xổ xuống trong đêm */
@media (max-width: 860px) {
  .nav-links {
    background: rgba(8, 17, 31, 0.98);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  .nav-links .nav-link { border-bottom-color: rgba(255, 255, 255, 0.07); }
  html.is-dawn .nav-links .nav-link { border-bottom-color: var(--color-border); }
}

/* ==========================================================================
   THANH TIẾN TRÌNH CHƯƠNG
   ========================================================================== */

.story-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 150;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.story-rail-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #3b2440, #7a3d4e, #c4694f, #f5b971, #4fd8ba);
  transition: width 0.12s linear;
}

html[data-motion="off"] .story-rail-fill { transition: none; }

/* ==========================================================================
   HIỆU ỨNG XUẤT HIỆN KHI CUỘN
   Chỉ là lớp tăng cường: tắt chuyển động thì mọi thứ hiện đầy đủ ngay.
   ========================================================================== */

html[data-motion="on"] [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-motion="on"] [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

html[data-motion="on"] [data-reveal][data-reveal-delay="1"] { transition-delay: 0.05s; }
html[data-motion="on"] [data-reveal][data-reveal-delay="2"] { transition-delay: 0.10s; }
html[data-motion="on"] [data-reveal][data-reveal-delay="3"] { transition-delay: 0.15s; }

/* Không JS thì không giấu gì cả */
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE v4
   ========================================================================== */

@media (max-width: 992px) {
  .compare-cards-row { grid-template-columns: 1fr; }

  .scrolly { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Trên di động, hình ghim lại ở đỉnh màn hình, nội dung cuộn bên dưới.
     Nền phải ĐỤC HOÀN TOÀN, nếu không chữ của nhịp kế tiếp sẽ trôi qua
     phía sau hình và chồng chữ lên nhau. */
  .scrolly-visual {
    top: 64px;
    padding: 0.75rem 0 0;
    background: var(--scene-night-3);
    z-index: 3;
  }

  /* Vệt chuyển mềm ở mép dưới để chữ không bị cắt ngang đột ngột */
  .scrolly-visual::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 28px;
    background: linear-gradient(to bottom, var(--scene-night-3), rgba(17, 26, 49, 0));
    pointer-events: none;
  }

  .neuro-figure { width: min(72%, 250px); }
  .neuro-caption { margin-top: 0.85rem; min-height: 2rem; }
  .scrolly-steps { padding-bottom: 4vh; }
  .scrolly-headline { max-width: none; margin-bottom: 1.25rem; }
}

@media (max-width: 640px) {
  .chapter-mark { gap: 0.6rem; }
  .trust-item img { width: 72px; }
  .dawn-break { height: clamp(170px, 42vw, 240px); }
}


/* ==========================================================================
   ===== NURA-ZEN v5 — HỆ ĐỒ HOẠ CƠ CHẾ (MECHANISM VISUAL SYSTEM) =====
   Mục tiêu: bốn chương chuyên môn phải trông như MỘT hệ, không phải bốn
   khối rời. Mọi sơ đồ dùng chung: một vòng tròn chủ, một vòng nét đứt,
   quầng sáng, nét vẽ 2px bo tròn đầu, và cùng một cách đặt chú thích.
   Chỉ có MÀU và HÌNH BÊN TRONG thay đổi theo từng dưỡng chất.
   ========================================================================== */

.mech {
  --mech-color: var(--glow-teal);
  position: relative;
}

.mech[data-mech="gaba"] { --mech-color: #4fd8ba; }
.mech[data-mech="b6"]   { --mech-color: #f0c05a; }
.mech[data-mech="mg"]   { --mech-color: #5cc6e8; }
.mech[data-mech="zn"]   { --mech-color: #b9c6d6; }

.mech-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.mech--flip .mech-visual { order: 2; }
.mech--flip .mech-body { order: 1; }

/* --- Sân khấu đồ hoạ: vòng tròn chủ + orb dưỡng chất chồng lên tâm --- */
.mech-figure { margin: 0; text-align: center; }

.mech-stage {
  position: relative;
  width: min(100%, 360px);
  margin: 0 auto;
  color: var(--mech-color);
}

.mech-diagram { width: 100%; height: auto; overflow: visible; }

.mech-ring { fill: none; stroke: currentColor; }
.mech-ring--outer { stroke-width: 1; opacity: 0.24; }
.mech-ring--inner { stroke-width: 1; opacity: 0.13; stroke-dasharray: 3 9; }

.mech-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mech-line--soft { opacity: 0.4; }
.mech-dot { fill: currentColor; }
.mech-node { opacity: 0.55; }
.mech-node--out { opacity: 0.9; stroke-width: 2.5; }
.mech-enzyme { opacity: 0.8; stroke-dasharray: 5 4; }
.mech-arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.mech-brake { opacity: 0.6; }
.mech-key { opacity: 0.7; stroke-dasharray: 4 4; }
.mech-gate { opacity: 0.85; stroke-width: 3; }
.mech-plug { opacity: 0.95; }
.mech-block { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: 0.55; }
.mech-tune { opacity: 0.35; stroke-dasharray: 3 6; }

/* Orb dưỡng chất — cùng một khối cầu, chỉ khác màu; đặt lệch tâm dưới
   để không che mất sơ đồ phía sau */
.orb {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  isolation: isolate;
  overflow: hidden;
}

.orb::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 16%;
  width: 46%;
  height: 32%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
  filter: blur(3px);
  z-index: 2;
}

.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 -14px 26px rgba(0, 0, 0, 0.38), inset 0 6px 14px rgba(255, 255, 255, 0.24);
  z-index: 2;
}

.orb > span { position: relative; z-index: 1; }

.orb--rice { background: #1a1208; }
.orb--rice img { width: 100%; height: 100%; object-fit: cover; }
.orb--b6 { background: radial-gradient(circle at 34% 28%, #fde68a 0%, #f0b429 42%, #b8791a 78%, #6d4410 100%); }
.orb--mg { background: radial-gradient(circle at 34% 28%, #cffafe 0%, #4cc9e8 42%, #1a7fa8 78%, #0b3d55 100%); }
.orb--zn { background: radial-gradient(circle at 34% 28%, #f1f5f9 0%, #b6c3d1 42%, #6d7d90 78%, #333e4c 100%); }

.orb--rice, .orb--b6, .orb--mg, .orb--zn {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.14),
              0 0 36px -6px var(--mech-color);
}

.mech-cap {
  margin-top: clamp(2.2rem, 5vw, 3rem);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mech-color);
  opacity: 0.85;
}

/* --- Cột nội dung --- */
.mech-body { min-width: 0; }

.chapter-mark--sub .chapter-num {
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  font-weight: 300;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: var(--mech-color);
  opacity: 1;
}

.chapter-mark--sub .chapter-line { background: linear-gradient(to right, var(--mech-color), transparent); }
.chapter-mark--sub .chapter-name { color: var(--mech-color); }

.mech-title {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  margin-bottom: 0.4rem;
}

.mech-role {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  margin-bottom: 1rem;
  max-width: none;
}

.mech-role .text-script { color: var(--mech-color); }

.mech-lead {
  font-size: 1.02rem;
  margin-bottom: 1.6rem;
}

.mech-steps {
  list-style: none;
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1.6rem;
  padding: 0;
  counter-reset: none;
}

.mech-steps li {
  position: relative;
  padding-left: 1.35rem;
  max-width: none;
}

/* Gạch dọc mảnh màu dưỡng chất — chi tiết lặp lại tạo nhịp cho cả bốn chương */
.mech-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  bottom: 0.2em;
  width: 2px;
  border-radius: 2px;
  background: var(--mech-color);
  opacity: 0.45;
}

.mech-step-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mech-color);
  margin-bottom: 0.2rem;
  opacity: 0.9;
}

.mech-steps p { margin: 0; font-size: 0.95rem; max-width: none; }

.mech-dose {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--mech-color) 40%, transparent);
  background: color-mix(in srgb, var(--mech-color) 12%, transparent);
  font-size: 0.85rem;
  max-width: none;
}

.mech-dose span {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--mech-color);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   CHƯƠNG 04 — GABA TỰ NHIÊN vs TỔNG HỢP
   ========================================================================== */

.source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.source-card {
  --mech-color: var(--glow-teal);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-art);
  box-shadow: var(--glass-shadow);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
  text-align: center;
}

.source-card--natural { --mech-color: #4fd8ba; border-color: rgba(79, 216, 186, 0.32); }
.source-card--synthetic { --mech-color: #8c9bb0; }

.source-visual { color: var(--mech-color); }
.source-visual svg { width: min(100%, 210px); height: auto; margin: 0 auto; overflow: visible; }

.source-mark {
  fill: currentColor;
  font-size: 19px;
  font-weight: 800;
  text-anchor: middle;
  letter-spacing: 0.02em;
}

.source-matrix circle { fill: currentColor; opacity: 0.55; }
.source-link path { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.35; stroke-linecap: round; }
.source-empty circle { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.14; stroke-dasharray: 2 10; }

.source-card h3 {
  margin: 1.1rem 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
}

.source-card h3 span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-night-lo);
}

.source-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  text-align: left;
  padding: 0;
}

.source-list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.93rem;
  line-height: 1.65;
  max-width: none;
}

.source-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--mech-color);
}

.source-card--natural .source-list li::before { background: var(--mech-color); }

.source-honest {
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  max-width: 62rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-art);
  border: 1px solid rgba(245, 185, 113, 0.28);
  background: linear-gradient(170deg, rgba(245, 185, 113, 0.10), rgba(245, 185, 113, 0.03));
  font-size: 0.95rem;
  line-height: 1.72;
  text-align: center;
}

/* ==========================================================================
   CHƯƠNG 05 — SƠ ĐỒ VÌ SAO PHẢI LÀ MỘT CÔNG THỨC
   ========================================================================== */

.why-circuit {
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  max-width: 560px;
}

.why-circuit svg { width: 100%; height: auto; overflow: visible; }

.why-links path {
  fill: none;
  stroke: var(--glow-teal);
  stroke-width: 1.25;
  opacity: 0.3;
  stroke-dasharray: 4 7;
}

.why-node { fill: none; stroke-width: 2; }
.why-node--gaba { stroke: #4fd8ba; fill: rgba(79, 216, 186, 0.12); }
.why-node--b6   { stroke: #f0c05a; fill: rgba(240, 192, 90, 0.12); }
.why-node--mg   { stroke: #5cc6e8; fill: rgba(92, 198, 232, 0.12); }
.why-node--zn   { stroke: #b9c6d6; fill: rgba(185, 198, 214, 0.12); }

.why-labels text {
  fill: var(--ink-night-hi);
  font-size: 16px;
  font-weight: 800;
  text-anchor: middle;
  letter-spacing: 0.02em;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.why-item {
  margin: 0;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius-art);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 0.93rem;
  line-height: 1.68;
  max-width: none;
}

.why-item span {
  display: block;
  font-weight: 800;
  color: var(--glow-teal);
  margin-bottom: 0.2rem;
}

.why-item--end {
  border-color: rgba(79, 216, 186, 0.4);
  background: linear-gradient(170deg, rgba(79, 216, 186, 0.12), rgba(79, 216, 186, 0.03));
}

.why-item--end span { color: var(--glow-amber); }

/* ==========================================================================
   RESPONSIVE v5
   ========================================================================== */

@media (max-width: 900px) {
  .mech-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .mech--flip .mech-visual { order: 0; }
  .mech--flip .mech-body { order: 0; }
  .mech-stage { width: min(78%, 300px); }
  .mech-cap { margin-top: 2.4rem; }
  .source-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mech-stage { width: min(88%, 260px); }
  .mech-role { font-size: 1.3rem; }
  .why-circuit { max-width: 100%; }
  .why-labels text { font-size: 19px; }
}


/* ==========================================================================
   BẢN ĐỒ CHƯƠNG 03 — bốn thẻ tóm tắt, mỗi thẻ là lối vào một chương sâu.
   Dùng lại đúng orb và đúng dải màu của bốn chương để mắt nhận ra ngay
   thẻ nào dẫn tới đâu.
   ========================================================================== */

.map-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.map-card {
  --mech-color: var(--glow-teal);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  padding: 2.4rem 1.1rem 1.4rem;
  min-width: 0;
  border-radius: var(--radius-art);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.map-card[data-map="gaba"] { --mech-color: #4fd8ba; }
.map-card[data-map="b6"]   { --mech-color: #f0c05a; }
.map-card[data-map="mg"]   { --mech-color: #5cc6e8; }
.map-card[data-map="zn"]   { --mech-color: #b9c6d6; }

.map-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--mech-color) 55%, transparent);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}

.map-num {
  position: absolute;
  top: 0.95rem;
  left: 1.1rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--mech-color);
  opacity: 0.8;
}

/* Orb ở đây nằm trong dòng chảy, KHÔNG neo tuyệt đối như trong chương sâu.
   Phải là `relative` chứ không phải `static`: hai lớp sáng/bóng của .orb là
   pseudo-element absolute, nếu orb không tự làm gốc toạ độ thì chúng sẽ neo
   vào cả thẻ và phủ một vệt trắng lên toàn bộ card. */
.map-orb {
  position: relative;
  /* Huỷ mọi neo lệch tâm mà .orb dùng trong chương sâu */
  inset: auto;
  transform: none;
  width: 74px;
  height: 74px;
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
}

.map-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink-night-hi);
  line-height: 1.25;
}

.map-role {
  font-family: var(--font-script);
  font-size: 1.15rem;
  color: var(--mech-color);
  line-height: 1.2;
}

.map-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-night);
  margin-top: 0.2rem;
}

.map-dose {
  margin-top: 0.75rem;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--mech-color);
  border: 1px solid color-mix(in srgb, var(--mech-color) 38%, transparent);
  background: color-mix(in srgb, var(--mech-color) 11%, transparent);
}

@media (max-width: 900px) {
  .map-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .map-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .map-card { padding: 2.2rem 1.1rem 1.25rem; }
  .map-orb { width: 62px; height: 62px; }
  .map-desc { font-size: 0.88rem; }
}


/* ==========================================================================
   ===== NURA-ZEN v6 — DESIGN LOOP ROUND 1 =====
   Bar: seed.com, đo ở 1440×900. Bảy cơ chế M1–M7 trong bar.md.
   Mục tiêu: sáng, tích cực, rộng rãi — mà không đánh mất câu chuyện.
   Đêm giờ chỉ còn là CHƯƠNG MỞ ĐẦU, không còn là nền của cả trang.
   ========================================================================== */

:root {
  /* M1 — container rộng bằng bar: ~95% viewport, chặn trên 1340px */
  --max-width: 1340px;
  --pad-x: clamp(1.25rem, 3.2vw, 2.5rem);

  /* M3 — không dùng trắng thuần / đen thuần */
  --color-bg: #fdfaf4;
  --color-surface: #fffdf8;
  --color-surface-soft: #f8f3ea;
  --color-surface-mint: #eef7f2;
  --color-border: #e6ddd0;
  --color-text-main: #1b322c;
  --color-text-secondary: #4d6259;
  --color-text-muted: #7d8f86;

  /* M7 — đúng HAI bán kính cho toàn hệ */
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-sm: var(--radius-card);
  --radius-md: var(--radius-card);
  --radius-lg: var(--radius-card);
  --radius-art: var(--radius-card);
  --radius-full: var(--radius-pill);

  /* M7 — nhịp khoảng cách dọc cố định, mặc định 80px như bar */
  --space-tight: 2rem;
  --space-snug: 3.5rem;
  --space-base: 5rem;
  --space-loose: 8rem;
  --section-spacing-y: var(--space-base);

  /* M4/M5 — thang cỡ chữ gọn lại, tiêu đề lớn NHẸ và siết tracking */
  --font-size-hero: clamp(2.4rem, 4.4vw, 3.9rem);
  --font-size-h2: clamp(1.95rem, 3.1vw, 2.85rem);
  --font-size-h3: clamp(1.15rem, 1.5vw, 1.35rem);
  --font-size-body: clamp(1rem, 0.3vw + 0.92rem, 1.075rem);

  /* Nền ban ngày — ấm, tích cực, vẫn là bình minh */
  --scene-dawn-1: #fdfaf4;
  --scene-dawn-2: #fbf4e9;
  --scene-dawn-3: #fdfaf4;
  --scene-morning: #fffdf8;

  /* Màu dưỡng chất bản ban ngày — đậm lại để đạt tương phản trên nền sáng */
  --day-gaba: #0b8c77;
  --day-b6:   #b06a09;
  --day-mg:   #0a6f96;
  --day-zn:   #5c6b7a;
}

body { background: var(--color-bg); }

/* Lớp nhiễu hạt phải dịu hẳn đi trên nền sáng, nếu không trang bị bẩn */
body::after { opacity: 0.022; mix-blend-mode: multiply; }

/* ==========================================================================
   M5 — TIÊU ĐỀ LỚN NHẸ VÀ SIẾT TRACKING
   Đây là thay đổi làm trang nhẹ đi nhiều nhất: cùng một cỡ chữ, nhưng
   weight 800 đọc như một tiếng quát, còn weight 300 đọc như một lời kể.
   ========================================================================== */

.hero-title,
.section-title,
.mech-title,
.cta-title,
.scrolly-headline {
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.08;
}

.hero-title { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45); }

/* Chỉ phần được nhấn mới đậm — tương phản trọng lượng thay cho tô màu */
.hero-title strong,
.section-title strong,
.section-title .text-teal,
.mech-title strong { font-weight: 600; }

h3, .ing-title, .timeline-title, .info-card-title,
.compare-card-title, .source-card h3, .safety-card h3 {
  font-weight: 600;
  letter-spacing: -0.012em;
}

.faq-question { font-weight: 500; font-size: 1.02rem; }

/* M4 — nhãn nhỏ viết hoa: một cỡ duy nhất cho toàn hệ */
.chapter-name, .mech-step-tag, .step-index, .mech-cap,
.jump-label, .honest-head, .timeline-step-badge, .ing-dosage {
  font-size: 0.75rem;
}

.chapter-name { font-size: 1.15rem; }

/* ==========================================================================
   NỬA SÁNG — nền, chữ, và quầng sáng ấm
   ========================================================================== */

[data-scene^="dawn"], [data-scene="morning"] { color: var(--color-text-main); }

[data-scene="dawn-1"]::before {
  background: radial-gradient(58% 60% at 82% 8%, rgba(245, 185, 113, 0.13), transparent 70%);
}
[data-scene="dawn-2"]::before {
  background: radial-gradient(55% 60% at 14% 12%, rgba(11, 140, 119, 0.07), transparent 70%);
}
[data-scene="dawn-3"]::before { background: none; }

/* ==========================================================================
   HỆ CƠ CHẾ TRÊN NỀN SÁNG
   Giữ nguyên ngôn ngữ vẽ, chỉ đổi sang bản màu ban ngày.
   ========================================================================== */

[data-scene^="dawn"] .mech[data-mech="gaba"],
.mech[data-mech="gaba"][data-scene^="dawn"] { --mech-color: var(--day-gaba); }

.mech[data-scene^="dawn"][data-mech="gaba"] { --mech-color: var(--day-gaba); }
.mech[data-scene^="dawn"][data-mech="b6"]   { --mech-color: var(--day-b6); }
.mech[data-scene^="dawn"][data-mech="mg"]   { --mech-color: var(--day-mg); }
.mech[data-scene^="dawn"][data-mech="zn"]   { --mech-color: var(--day-zn); }

[data-scene^="dawn"] .map-card[data-map="gaba"] { --mech-color: var(--day-gaba); }
[data-scene^="dawn"] .map-card[data-map="b6"]   { --mech-color: var(--day-b6); }
[data-scene^="dawn"] .map-card[data-map="mg"]   { --mech-color: var(--day-mg); }
[data-scene^="dawn"] .map-card[data-map="zn"]   { --mech-color: var(--day-zn); }

/* Thẻ trên nền sáng: viền mảnh + bóng rất nhẹ, không dùng kính mờ */
[data-scene^="dawn"] .map-card,
[data-scene^="dawn"] .source-card,
[data-scene^="dawn"] .why-item,
[data-scene^="dawn"] .trust-section,
[data-scene^="dawn"] .compare-mini-card,
[data-scene^="dawn"] .scrolly-step,
[data-scene^="dawn"] .mechanism-editorial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(27, 50, 44, 0.03), 0 10px 28px rgba(27, 50, 44, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-scene^="dawn"] .map-card:hover {
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--mech-color) 45%, transparent);
  box-shadow: 0 2px 4px rgba(27, 50, 44, 0.04), 0 16px 36px rgba(27, 50, 44, 0.09);
}

[data-scene^="dawn"] .map-name { color: var(--color-text-main); }
[data-scene^="dawn"] .map-desc { color: var(--color-text-secondary); }
[data-scene^="dawn"] .source-card h3 span { color: var(--color-text-muted); }
[data-scene^="dawn"] .why-labels text { fill: var(--color-text-main); }
[data-scene^="dawn"] .why-item span { color: var(--day-gaba); }
[data-scene^="dawn"] .why-item--end span { color: var(--color-amber); }

[data-scene^="dawn"] .why-links path { stroke: var(--day-gaba); opacity: 0.22; }
[data-scene^="dawn"] .why-node--gaba { stroke: var(--day-gaba); fill: rgba(11, 140, 119, 0.08); }
[data-scene^="dawn"] .why-node--b6   { stroke: var(--day-b6);   fill: rgba(176, 106, 9, 0.08); }
[data-scene^="dawn"] .why-node--mg   { stroke: var(--day-mg);   fill: rgba(10, 111, 150, 0.08); }
[data-scene^="dawn"] .why-node--zn   { stroke: var(--day-zn);   fill: rgba(92, 107, 122, 0.08); }

[data-scene^="dawn"] .why-item--end {
  border-color: color-mix(in srgb, var(--day-gaba) 40%, transparent);
  background: linear-gradient(170deg, rgba(11, 140, 119, 0.07), rgba(11, 140, 119, 0.02));
}

[data-scene^="dawn"] .source-card--natural {
  --mech-color: var(--day-gaba);
  border-color: color-mix(in srgb, var(--day-gaba) 34%, transparent);
}
[data-scene^="dawn"] .source-card--synthetic { --mech-color: var(--day-zn); }

[data-scene^="dawn"] .source-honest {
  border-color: rgba(176, 106, 9, 0.24);
  background: linear-gradient(170deg, rgba(245, 185, 113, 0.14), rgba(245, 185, 113, 0.05));
  color: var(--color-text-secondary);
}

[data-scene^="dawn"] .compare-mini-card--danger {
  border-color: rgba(190, 70, 95, 0.26);
  background: linear-gradient(170deg, rgba(190, 70, 95, 0.06), rgba(190, 70, 95, 0.02));
}
[data-scene^="dawn"] .compare-mini-card--safe {
  border-color: color-mix(in srgb, var(--day-gaba) 32%, transparent);
  background: linear-gradient(170deg, rgba(11, 140, 119, 0.07), rgba(11, 140, 119, 0.02));
}
[data-scene^="dawn"] .compare-card-tag.text-danger { color: #a6304d; }
[data-scene^="dawn"] .compare-card-tag.text-teal { color: var(--day-gaba); }

/* Huy hiệu GFCF trở về nền sáng tự nhiên, bỏ đĩa trắng nổi khối */
[data-scene^="dawn"] .trust-item {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  box-shadow: none;
  border-radius: var(--radius-card);
}
[data-scene^="dawn"] .trust-item:hover {
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--day-gaba) 45%, transparent);
}

/* Scene cuộn kể chuyện chuyển sang ban ngày */
[data-scene^="dawn"] .neuro-figure { color: var(--day-gaba); }
[data-scene^="dawn"] .neuro-figure[data-step="2"] { color: #b3495f; }
[data-scene^="dawn"] .step-index { color: var(--day-gaba); opacity: 1; }
[data-scene^="dawn"] .scrolly-visual { background: transparent; }

@media (max-width: 992px) {
  [data-scene^="dawn"] .scrolly-visual { background: var(--scene-dawn-1); }
  [data-scene^="dawn"] .scrolly-visual::after {
    background: linear-gradient(to bottom, var(--scene-dawn-1), rgba(253, 250, 244, 0));
  }
}

[data-scene^="dawn"] .stat-pill-banner {
  background: linear-gradient(170deg, rgba(190, 70, 95, 0.07), rgba(190, 70, 95, 0.02));
  border: 1px solid rgba(190, 70, 95, 0.22);
  color: var(--color-text-secondary);
}
[data-scene^="dawn"] .stat-pill-banner strong { color: #a6304d; }

/* Orb giữ nguyên chất liệu nhưng bớt quầng sáng gắt trên nền sáng */
[data-scene^="dawn"] .orb--rice,
[data-scene^="dawn"] .orb--b6,
[data-scene^="dawn"] .orb--mg,
[data-scene^="dawn"] .orb--zn {
  box-shadow: 0 10px 26px rgba(27, 50, 44, 0.16), 0 0 0 1px rgba(27, 50, 44, 0.06);
}

/* ==========================================================================
   M6 — SIẾT MÀU NHẤN
   Trước đây teal xuất hiện ở tag, badge, gạch, số, viền... khắp nơi.
   Giờ chỉ CTA chính và liên kết được mang màu; nhãn dùng sắc độ chữ.
   ========================================================================== */

[data-scene^="dawn"] .hero-tag {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

[data-scene^="dawn"] .ing-dosage {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

[data-scene^="dawn"] .timeline-step-badge {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

[data-scene^="dawn"] .jump-chip {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-main);
}

/* ==========================================================================
   GIAO MÙA — rút gọn vì giờ nó đến rất sớm trong trang
   ========================================================================== */

.dawn-break {
  height: clamp(180px, 22vw, 280px);
  background: linear-gradient(to bottom,
    var(--scene-night-2) 0%,
    #33283f 20%,
    #7c4550 42%,
    #c67a55 62%,
    #edb072 80%,
    var(--scene-dawn-1) 100%);
}

.dawn-quote .text-script { color: #532a16; }

/* ==========================================================================
   HEADER — nền sáng là mặc định vì trang giờ chủ yếu là ban ngày
   ========================================================================== */

html.is-dawn .site-header { background: rgba(253, 250, 244, 0.93); }
html.is-dawn .nav-links { background: var(--color-bg); }

/* ==========================================================================
   M7 — NHỊP KHOẢNG CÁCH & BO GÓC ĐỒNG NHẤT
   ========================================================================== */

.section { padding-top: var(--space-base); padding-bottom: var(--space-base); }
.honest-band { padding-top: var(--space-snug); padding-bottom: var(--space-snug); }

.btn, .jump-chip, .hero-tag, .ing-dosage, .mech-dose,
.timeline-step-badge, .map-dose, .nav-cta, .a11y-group,
.a11y-btn, .mobile-bar a, .mobile-bar button { border-radius: var(--radius-pill); }

/* ==========================================================================
   M1 — TẬN DỤNG BỀ RỘNG MỚI
   Container rộng thêm 200px thì các lưới phải thở ra theo, nếu không
   trang chỉ bị kéo dãn chứ không thực sự rộng rãi hơn.
   ========================================================================== */

.section-header--center { max-width: 820px; }
.section-desc { max-width: 60ch; }
.faq-list { max-width: 880px; }
.consult-wrap { max-width: 820px; }
.source-honest { max-width: 78ch; }

@media (min-width: 1100px) {
  .mech-grid { gap: clamp(3rem, 6vw, 6rem); }
  .trust-grid-6 { gap: 1.25rem; }
  .ingredients-grid-4, .map-grid { gap: 1.5rem; }
}

/* --- Header: 7 mục điều hướng + cụm trợ năng làm tràn thanh ở 1440px,
       khiến logo và nhãn bị ngắt thành hai dòng. Siết nhịp và nâng
       ngưỡng chuyển sang menu hamburger. --- */
.logo-brand { white-space: nowrap; }

.nav-links { gap: 1.35rem; }

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }

  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 0.75rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 10px 28px rgba(27, 50, 44, 0.08);
  }

  .nav-links.is-open { display: flex; }
  .nav-links li { padding: 0 var(--pad-x); }

  .nav-links .nav-link {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links li:last-child .nav-link { border-bottom: 0; }
  .nav-wrap { position: relative; }
}


/* ==========================================================================
   ===== v7 — SỬA THEO PHÁN QUYẾT CRITIC VÒNG 1 =====
   System critic chỉ ra: container thực dụng chỉ 87% (chuẩn 92–96%), quá
   nhiều cỡ chữ trong một khung nhìn, thẻ đọc ra trắng tinh, teal dùng quá
   tay, nhịp dọc lúc chật lúc rộng, và vài lỗi bố cục.
   ========================================================================== */

:root {
  /* S1 — lề phải mỏng lại thì phần chữ mới thực sự rộng ra.
     Trước: max-width 1340 + pad 46px  → chữ bắt đầu ở 96px (86,7% khả dụng)
     Sau:   max-width 1400 + pad 32px  → chữ bắt đầu ở 52px (92,8% khả dụng) */
  --max-width: 1400px;
  --pad-x: clamp(1.15rem, 2.2vw, 2rem);

  /* S4 — bề mặt thẻ phải ngả ấm, không được đọc ra trắng tinh */
  --color-surface: #fdf8ef;
  --color-surface-soft: #f7f1e5;

  /* S2 — thang chữ rút về ĐÚNG BA bậc: nhãn / thân / tiêu đề */
  --type-label: 0.75rem;
  --type-body: 1.0625rem;
}

/* --- S2: mọi thứ thuộc bậc "thân" dùng chung một cỡ --- */
.btn, .hero-meta-item, .hero-subhead, .mech-lead, .mech-steps p,
.scrolly-step p, .section-desc, .intro-subhead, .map-desc,
.source-list li, .why-item, .safety-list li, .faq-answer-inner {
  font-size: var(--type-body);
}

/* --- S2: mọi thứ thuộc bậc "nhãn" dùng chung một cỡ --- */
.chapter-num, .chapter-name, .mech-step-tag, .step-index, .mech-cap,
.jump-label, .honest-head, .timeline-step-badge, .ing-dosage,
.map-num, .map-dose, .hero-tag, .form-optional-tag {
  font-size: var(--type-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Dấu chương rút về MỘT dòng nhãn duy nhất.
   Số viền rỗng khổ lớn và chữ viết tay là bậc chữ thứ tư và thứ năm trong
   cùng một khung nhìn — đẹp riêng lẻ nhưng phá kỷ luật thang chữ. */
.chapter-mark { gap: 0.6rem; margin-bottom: 0.85rem; align-items: center; }

.chapter-num {
  font-family: var(--font-base);
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  -webkit-text-stroke: 0;
  opacity: 1;
}

.chapter-name {
  font-family: var(--font-base);
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: 1;
}

.chapter-line { width: 22px; opacity: 0.5; }

[data-scene^="night"] .chapter-num { color: var(--glow-teal); }
[data-scene^="night"] .chapter-name { color: var(--ink-night-lo); }
.chapter-mark--sub .chapter-num { font-size: var(--type-label); }

/* Số chìm 01/02/03 sau thẻ lộ trình: bậc chữ thừa, lại đè lên phần mô tả */
.timeline-card::after { display: none; }

/* --- S8: chặn ngắt dòng xấu ở mọi tiêu đề --- */
.section-title, .hero-title, .mech-title, .cta-title,
.scrolly-headline, .map-name, .source-card h3 {
  text-wrap: balance;
}

/* --- S7: khoảng trống khổng lồ trước cặp thẻ so sánh --- */
.scrolly-steps { padding-bottom: 2vh; }
.compare-cards-row { margin-top: var(--space-snug); }

/* --- S5: màu nhấn trên nền sáng --- */

[data-scene^="dawn"] .intro-point-icon {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  background: none;
}

[data-scene^="dawn"] .mech-cap { color: var(--color-text-muted); }

/* --- S1: lưới nở ra theo container mới, không chỉ bị kéo dãn --- */
@media (min-width: 1200px) {
  .honest-grid { gap: 1.5rem; }
  .why-grid { gap: 1.25rem; }
  .source-grid { gap: 2rem; }
  .compare-cards-row { gap: 1.75rem; }
}


/* ==========================================================================
   ===== v8 — SỬA THEO PHÁN QUYẾT CRAFT CRITIC VÒNG 2 =====
   Đo bằng máy xác nhận critic đúng:
     · khối bản đồ 6 cỡ chữ, khối GABA 5 cỡ   (chuẩn: ≤3)
     · toàn trang 6 giá trị bo góc             (chuẩn: 2)
     · padding dọc section có 5 biến thể       (chuẩn: một nhịp)
     · màu nhấn phát tán 8 lần trong một khung nhìn (chuẩn: ≤2)
   ========================================================================== */

/* --------------------------------------------------------------------------
   M4 — ÉP TOÀN BỘ VỀ ĐÚNG BA BẬC CHỮ
   Trước đây mỗi component tự đặt cỡ bằng rem lẻ (1.05 / 1.1 / 1.15 / 1.25rem)
   nên sinh ra 16.8 / 17.6 / 18.4 / 19px — bốn bậc mà mắt đọc ra là "lộn xộn"
   chứ không phải "phân cấp". Phân biệt bằng TRỌNG LƯỢNG và MÀU, không bằng cỡ.
   -------------------------------------------------------------------------- */

.map-name, .map-role, .map-desc,
.mech-role, .mech-lead, .mech-steps p,
.source-card h3, .source-list li, .source-honest,
.why-item, .compare-card-title, .compare-card-desc,
.ing-title, .ing-desc, .timeline-title, .timeline-desc,
.info-card-title, .info-card-desc, .safety-card h3, .safety-list li,
.intro-point-title, .intro-point-desc, .scrolly-headline,
.faq-question, .faq-answer-inner, .honest-item strong, .honest-item span,
.stat-pill-banner, .hero-meta-item, .btn, .nav-cta, .jump-chip,
.mech-dose, .form-label, .choice-card span {
  font-size: var(--type-body);
}

/* Bậc nhãn — một cỡ duy nhất cho mọi chữ viết hoa nhỏ */
.chapter-num, .chapter-name, .mech-step-tag, .step-index, .mech-cap,
.jump-label, .honest-head, .timeline-step-badge, .ing-dosage,
.map-num, .map-dose, .hero-tag, .form-optional-tag, .form-help,
.compare-card-tag, .source-card h3 span, .footer-disclaimer,
.timeline-note, .safety-note {
  font-size: var(--type-label);
}

/* Bậc tiêu đề — chỉ section-title, mech-title, hero-title và cta-title */
.scrolly-headline { font-weight: 600; }

/* Phân cấp bằng trọng lượng thay cho cỡ chữ */
.map-name, .compare-card-title, .ing-title, .timeline-title,
.info-card-title, .safety-card h3, .intro-point-title,
.source-card h3, .honest-item strong { font-weight: 600; }

.map-desc, .mech-steps p, .source-list li, .why-item,
.compare-card-desc, .ing-desc, .timeline-desc, .info-card-desc,
.safety-list li, .intro-point-desc, .honest-item span { font-weight: 400; }

/* Dòng vai trò viết tay: giữ chất cảm xúc nhưng về đúng bậc thân */
.mech-role, .map-role { font-size: var(--type-body); line-height: 1.35; }
.mech-role { margin-bottom: 0.85rem; }

/* Ghi chú dài ở bậc nhãn cần giãn dòng rộng hơn để vẫn đọc được */
.safety-note, .timeline-note, .footer-disclaimer, .source-honest {
  line-height: 1.75;
  letter-spacing: 0;
  text-transform: none;
}

.form-help, .source-card h3 span { letter-spacing: 0; text-transform: none; }

/* --------------------------------------------------------------------------
   M7a — ĐÚNG HAI BÁN KÍNH GÓC
   `50%` cho khối tròn (orb, nút icon) được giữ: đó là một HÌNH, không phải
   một cách bo góc. Hai giá trị lệch chuẩn còn lại thì gỡ.
   -------------------------------------------------------------------------- */

[data-scene^="dawn"] .safety-card,
.safety-card { border-radius: var(--radius-card); }

.cta-editorial-banner { border-radius: var(--radius-card); }

/* --------------------------------------------------------------------------
   M7b — MỘT NHỊP KHOẢNG CÁCH DỌC DUY NHẤT
   -------------------------------------------------------------------------- */

main > section.section { padding-top: var(--space-base); padding-bottom: var(--space-base); }
main > section.honest-band { padding-top: var(--space-snug); padding-bottom: var(--space-snug); }
main > section.dawn-break { padding-top: 0; padding-bottom: var(--space-tight); }

/* Bốn chương cơ chế nằm kề nhau nên thở hẹp hơn một bậc, đều nhau tuyệt đối */
main > section.mech { padding-top: var(--space-snug); padding-bottom: var(--space-snug); }

/* --------------------------------------------------------------------------
   M6 — THU MÀU NHẤN VỀ ĐÚNG MỘT ĐIỂM MỖI THẺ
   Bốn màu dưỡng chất được giữ vì chúng MANG THÔNG TIN (chất nào là chất nào),
   nhưng mỗi module chỉ được phát ra MỘT lần: ở quả cầu và ở nét vẽ sơ đồ.
   Nhãn, viên liều lượng và dòng vai trò trả về sắc độ chữ.
   -------------------------------------------------------------------------- */

[data-scene^="dawn"] .mech-step-tag { color: var(--color-text-muted); }

[data-scene^="dawn"] .mech-dose {
  border-color: var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
}

[data-scene^="dawn"] .mech-dose span { color: var(--color-text-main); }

[data-scene^="dawn"] .map-num { color: var(--color-text-muted); }

[data-scene^="dawn"] .map-role { color: var(--color-text-secondary); }

[data-scene^="dawn"] .map-dose {
  border-color: var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
}

[data-scene^="dawn"] .chapter-num { color: var(--color-text-muted); }

[data-scene^="dawn"] .compare-card-tag.text-teal,
[data-scene^="dawn"] .compare-card-tag.text-danger { color: var(--color-text-muted); }

[data-scene^="dawn"] .step-index { color: var(--color-text-muted); }

/* Khối CTA cuối: bỏ gradient cam rực, về cùng hệ bề mặt với phần còn lại */
.cta-editorial-banner {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.cta-editorial-banner .text-script { color: var(--color-text-muted); }

/* --- v8b: bốn phần tử còn lệch khỏi thang chữ (đã truy bằng CDP) --- */
.btn-arrow { font-size: var(--type-body); }
.cta-desc { font-size: var(--type-body); }
.intro-point-icon { font-size: var(--type-label); }
.mech-dose span { font-size: var(--type-body); }
.mech-role .text-script, .map-role .text-script { font-size: inherit; }

/* Khối CTA cuối trước đây bị style nội tuyến ghim padding 16/32px,
   phá nhịp dọc của cả trang. Đưa về đúng nhịp. */
main > section.section--cta {
  padding-top: var(--space-snug);
  padding-bottom: var(--space-base);
}

/* NGOẠI LỆ CÓ CHỦ Ý: chữ NẰM TRONG hình minh hoạ (ký hiệu trên quả cầu
   dưỡng chất, nhãn trong SVG sơ đồ) không thuộc thang chữ của giao diện —
   đó là một phần của bức vẽ. Bóp chúng về cỡ nhãn sẽ hỏng hình. */


/* ==========================================================================
   ===== v9 — SỬA THEO PHÁN QUYẾT SYSTEM CRITIC VÒNG 2 =====
   Critic đo pixel và chỉ ra 4 vi phạm còn lại. Ba trong số đó là thật:
     S4 · mặt thẻ form và toàn bộ ô input là #ffffff thuần
     S3 · hai tiêu đề cuối trang vẫn in đậm 800 (do style nội tuyến ghi đè)
     S5 · teal rải khắp mọi khung nhìn, không khung nào ≤2
   ========================================================================== */

/* --- S3: tiêu đề khối tư vấn về đúng hệ --- */
.consult-title {
  font-size: var(--font-size-h3);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--color-text-main);
}

.consult-sub {
  font-size: var(--type-body);
  color: var(--color-text-secondary);
  margin-top: 0.35rem;
}

.form-note {
  text-align: center;
  font-size: var(--type-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  margin-top: 0.85rem;
  line-height: 1.7;
}

/* --- S4: khử mọi mảng trắng tuyệt đối trên khối chuyển đổi --- */
.consult-wrap,
[data-scene^="dawn"] .consult-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.form-input, .form-select, .form-textarea {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
  color: var(--color-text-main);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
}

.choice-card { background: var(--color-surface-soft); }
.choice-card:has(input:checked) {
  background: var(--color-surface);
  border-color: var(--color-primary);
}

.form-details { background: var(--color-surface-soft); }
.modal-card { background: var(--color-surface); }
.mobile-bar { background: rgba(253, 248, 239, 0.97); }
[data-scene^="dawn"] .trust-item img { background: transparent; }

/* --- S5: teal chỉ còn ở ĐÚNG MỘT chỗ mỗi khung nhìn — nút hành động chính.
       Nhãn, viền, icon phụ trợ trả hết về sắc độ chữ. --- */

.hero-tag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
}

.hero-tag .tag-brand, .hero-tag .tag-name, .hero-tag .tag-desc, .hero-tag .tag-dot {
  color: inherit;
}

.hero-meta-icon { color: rgba(255, 255, 255, 0.45); }
.hero-meta-item { color: rgba(255, 255, 255, 0.72); }

/* Nút Nhận tư vấn trên header: nổi bật, chuyên nghiệp, chỉ trỏ về Zalo */
.site-header .nav-cta {
  background: var(--color-primary, #029e8c);
  border: 1.5px solid var(--color-primary, #029e8c);
  color: #ffffff !important;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.55rem 1.35rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(2, 158, 140, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.site-header .nav-cta:hover {
  background: var(--color-primary-hover, #028273);
  border-color: var(--color-primary-hover, #028273);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2, 158, 140, 0.5);
}

html.is-dawn .site-header .nav-cta {
  background: var(--color-primary, #029e8c);
  border-color: var(--color-primary, #029e8c);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 158, 140, 0.25);
}

html.is-dawn .site-header .nav-cta:hover {
  background: var(--color-primary-hover, #028273);
  border-color: var(--color-primary-hover, #028273);
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(2, 158, 140, 0.4);
}

/* Số thứ tự nỗi đau trên nền đêm: viền trung tính, không phải teal */
[data-scene^="night"] .intro-point-icon {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.6);
}

/* Vòng tròn con dấu thương hiệu trong khối CTA: nền trắng viền ngọc sinh học */
.brand-circle-graphic {
  background: #ffffff;
  border: 2px solid rgba(2, 158, 140, 0.25);
  box-shadow: 0 8px 24px rgba(2, 158, 140, 0.12);
}

/* --- S8: thanh hành động cố định che mất dòng thông số cuối hero --- */
@media (max-width: 860px) {
  .hero { padding-bottom: calc(var(--space-base) + 76px); }
}
.btn-block { width: 100%; padding: 1rem; font-size: var(--type-body); }

/* Rule cũ `.cta-col-left .cta-title` có độ cụ thể cao hơn nên vẫn ghì 800 */
.cta-editorial-banner .cta-col-left .cta-title {
  font-weight: 300;
  letter-spacing: -0.028em;
}

/* --- v9b: hai chỗ bố cục còn gợn khi nhìn bản render --- */

/* Tiêu đề trong scene cuộn bị `max-width: 22ch` ép ngắt dòng giữa cụm từ */
.scrolly-headline {
  max-width: none;
  margin-bottom: 1.5rem;
  line-height: 1.35;
}

/* Hero vẫn bị ghim ở 520px từ thời container còn hẹp; container đã rộng
   thêm 260px thì cột chữ cũng phải nới ra, nếu không tiêu đề vỡ 3 dòng. */
@media (min-width: 1100px) {
  .hero-content { max-width: 640px; }
  .hero-grid { grid-template-columns: minmax(0, 640px) 1fr; }
  .hero-subhead { max-width: 600px; }
}


/* ==========================================================================
   ===== v10 — GỘP TẦNG NHÃN THEO PHÁN QUYẾT CRAFT CRITIC VÒNG 3 =====
   Máy đo xác nhận chỉ có 3 CỠ chữ, nhưng critic đúng ở tầng sâu hơn: mỗi
   khối cõng tới bốn TẦNG NHÃN cùng lúc (eyebrow đánh số, biệt danh in
   nghiêng, nhãn caps nội bộ, viên liều lượng). Cùng cỡ vẫn đọc ra là ồn.
   Nay gộp biệt danh vào chính dòng eyebrow, bỏ số trên thẻ bản đồ.
   ========================================================================== */

.chapter-role {
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
}

[data-scene^="night"] .chapter-role { color: var(--ink-night-lo); }

.chapter-mark--sub { flex-wrap: wrap; }

/* Thẻ bản đồ rút còn 4 tầng: quả cầu · tên · một dòng mô tả · liều */
.map-card { padding: 1.6rem 1.15rem 1.4rem; }
.map-role { display: none; }

/* Huy hiệu GFCF là ảnh thương hiệu có sẵn, không vẽ lại được bằng CSS.
   Hạ độ bão hoà để sáu huy hiệu đọc ra MỘT khối trầm, thay vì sáu điểm
   nhấn teal xếp hàng cạnh nhau. */
.trust-item img { filter: saturate(0.45); }
.trust-item:hover img { filter: saturate(0.9); }


/* ==========================================================================
   ===== v11 — SỬA THEO PHÁN QUYẾT BRIEF CRITIC VÒNG 3 =====
   Tổng nền tối chỉ 15% chiều cao trang, nhưng trên điện thoại nó dồn hết
   vào BA MÀN HÌNH ĐẦU — đúng phần mà một phụ huynh kiệt sức lúc nửa đêm
   chắc chắn đọc. Hy vọng nằm sau ngưỡng cuộn thì coi như không có.
   Nay: đêm rút còn hai màn, bình minh rơi vào màn thứ ba, và khối minh
   bạch chuyển sang nền sáng ngay sau đó.
   ========================================================================== */

/* --- Khối minh bạch trên nền ban ngày --- */
[data-scene^="dawn"].honest-band {
  background: linear-gradient(180deg, var(--scene-dawn-1), var(--scene-dawn-2));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

[data-scene^="dawn"] .honest-head { color: var(--color-amber); }

[data-scene^="dawn"] .honest-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(27, 50, 44, 0.03), 0 10px 28px rgba(27, 50, 44, 0.05);
}

[data-scene^="dawn"] .honest-item strong { color: var(--color-text-main); }
[data-scene^="dawn"] .honest-item span { color: var(--color-text-secondary); }

/* --- Nén chương Đêm trên di động để bình minh đến sớm một màn hình --- */
@media (max-width: 860px) {
  main > section.hero { padding-bottom: calc(var(--space-snug) + 76px); }

  main > section#empathy {
    padding-top: var(--space-snug);
    padding-bottom: var(--space-snug);
  }

  #empathy .intro-grid { gap: 1.5rem; }
  #empathy .intro-points-list { gap: 0.85rem; }
  #empathy .intro-point-desc { font-size: var(--type-label); letter-spacing: 0; text-transform: none; line-height: 1.6; }
  #empathy .stat-pill-banner { padding: 0.85rem 1rem; }

  /* Ảnh sản phẩm trong chương Đêm chiếm gần trọn một màn trên điện thoại;
     hạ chiều cao để cả chương gói gọn trong một lần cuộn. */
  #empathy .intro-photo { max-height: 210px; object-fit: cover; }
  #empathy .intro-photo-script { font-size: var(--type-label); }

  .dawn-break { height: clamp(150px, 34vw, 200px); }
}

/* --- Tối ưu di động: Tươi sáng, thoáng đãng, giữ trọn vẹn ảnh sản phẩm --- */
@media (max-width: 860px) {
  .hero {
    min-height: auto;
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-title { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .hero-subhead { margin-bottom: 1.5rem; }
  .hero-actions { gap: 0.6rem; }
  .hero-meta-list { gap: 0.4rem 1rem; margin-top: 1.25rem; }
  .hero-meta-item { font-size: var(--type-label); letter-spacing: 0; text-transform: none; }

  /* Hiển thị ảnh hộp Nura-Zen ấm cúng trên di động */
  #empathy .intro-photo-wrap { 
    display: block; 
    width: 100%; 
    margin-bottom: 1.5rem; 
  }
  #empathy .intro-photo { 
    width: 100%;
    max-height: 260px; 
    object-fit: cover; 
    border-radius: var(--radius-md);
  }
  #empathy .section-title { font-size: clamp(1.7rem, 7.2vw, 2.1rem); }
  #empathy .intro-subhead { margin-bottom: 1rem; }
}

/* ==========================================================================
   ĐỒNG BỘ NỀN GRADIENT & VISUAL BLOCK TRẮNG CHUẨN SẢN PHẨM HIỂU CON TỪ GỐC
   ========================================================================== */

/* 1. Nền Healing Gradient đồng bộ toàn diện với trang sản phẩm */
html {
  background-color: #FFF9F0 !important;
}

body {
  background: linear-gradient(to bottom, #FFF9F0 0%, #FFD6C0 45%, #B4C8BB 100%) fixed !important;
  background-attachment: fixed !important;
  color: #141e36;
}

/* 2. Loại bỏ mọi nền gradient màu cam/hồng/xám cục bộ trên các section để nền chạy xuyên suốt */
[data-scene]:not(.hero):not(#hero),
.section:not(.hero):not(#hero),
.section--alt,
.honest-band,
#empathy,
#mechanism,
#ingredients,
.mech,
#source,
#why,
#trust,
#timeline,
#info,
#safety,
#faq,
.section--cta,
.dawn-break {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Khử thanh phân cách cũ nếu còn */
.dawn-break {
  display: none !important;
}

/* 3. Chuyển TẤT CẢ các block shape / card thành màu trắng tinh khôi (#ffffff) theo visual hộp sản phẩm Nura-Zen */
.honest-item,
.stat-pill-banner,
.scrolly-step,
.map-card,
.source-card,
.source-honest,
.why-item,
.trust-section,
.timeline-card,
.timeline-note,
.info-card,
.safety-card,
.safety-note,
.faq-item,
.cta-editorial-banner,
.consult-wrap,
.modal-card,
.modal-content,
[data-scene] .honest-item,
[data-scene] .stat-pill-banner,
[data-scene] .scrolly-step,
[data-scene] .map-card,
[data-scene] .source-card,
[data-scene] .source-honest,
[data-scene] .why-item,
[data-scene] .trust-section,
[data-scene] .timeline-card,
[data-scene] .timeline-note,
[data-scene] .info-card,
[data-scene] .safety-card,
[data-scene] .safety-note,
[data-scene] .faq-item,
[data-scene] .cta-editorial-banner,
[data-scene] .consult-wrap,
[data-scene^="dawn"] .honest-item,
[data-scene^="dawn"] .stat-pill-banner,
[data-scene^="dawn"] .scrolly-step,
[data-scene^="dawn"] .map-card,
[data-scene^="dawn"] .source-card,
[data-scene^="dawn"] .source-honest,
[data-scene^="dawn"] .why-item,
[data-scene^="dawn"] .trust-section,
[data-scene^="dawn"] .timeline-card,
[data-scene^="dawn"] .timeline-note,
[data-scene^="dawn"] .info-card,
[data-scene^="dawn"] .safety-card,
[data-scene^="dawn"] .safety-note,
[data-scene^="dawn"] .faq-item,
[data-scene^="dawn"] .consult-wrap,
[data-scene^="dawn"] .compare-mini-card {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 20px -2px rgba(10, 25, 49, 0.05), 0 1px 3px rgba(10, 25, 49, 0.03) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Tinh chỉnh đặc biệt cho từng block để đạt độ hoàn thiện cao nhất */

/* Dải minh bạch: bỏ viền cam cũ, item trắng nổi bật trên nền gradient */
.honest-band {
  border-top: none !important;
  border-bottom: none !important;
}
.honest-item {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
}

/* Banner số liệu thấu cảm: khối chữ nhật bo góc trắng */
.stat-pill-banner {
  border-radius: 16px !important;
  color: #141e36 !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
}
.stat-pill-banner strong {
  color: var(--color-primary) !important;
}

/* Thẻ 4 dưỡng chất */
.map-card {
  border-radius: 20px !important;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease !important;
}
.map-card:hover {
  background: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -4px rgba(10, 25, 49, 0.1) !important;
  border-color: rgba(2, 158, 140, 0.4) !important;
}

/* Thẻ so sánh GABA tự nhiên vs tổng hợp */
.source-card {
  border-radius: 24px !important;
}
.source-card--natural {
  border: 1.5px solid rgba(2, 158, 140, 0.35) !important;
}
.source-card--synthetic {
  border: 1px solid rgba(140, 155, 176, 0.3) !important;
}
.source-honest {
  border-radius: 18px !important;
  color: #37534d !important;
}

/* Khối Vì sao Nura-Zen */
.why-item {
  border-radius: 18px !important;
}
.why-item--end {
  border: 1.5px solid var(--color-primary) !important;
}

/* Khối GFCF Cam Kết 6 Không */
.trust-section {
  border-radius: 28px !important;
  box-shadow: 0 10px 35px -5px rgba(10, 25, 49, 0.07) !important;
}
.trust-item {
  background: #f8fafc !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
}
.trust-item:hover {
  background: #ffffff !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(2, 158, 140, 0.12) !important;
}

/* Thẻ Lộ trình 3 giai đoạn */
.timeline-card {
  border-radius: 22px !important;
}
.timeline-note {
  border-radius: 16px !important;
}
.timeline-step-badge {
  background: #e6f7f3 !important;
  color: #029e8c !important;
  border: 1px solid rgba(2, 158, 140, 0.2) !important;
}

/* Thẻ thông tin & an toàn */
.info-card {
  border-radius: 20px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.info-card:hover {
  background: #ffffff !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -4px rgba(10, 25, 49, 0.1) !important;
}
.safety-card {
  border-radius: 20px !important;
}
.safety-note {
  border-radius: 18px !important;
}

/* FAQ Accordion Items */
.faq-item {
  border-radius: 18px !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important;
}

/* Banner Editorial CTA - Chuyển từ gradient cam sang nền trắng sang trọng */
.cta-editorial-banner {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 28px !important;
  box-shadow: 0 12px 40px -10px rgba(10, 25, 49, 0.08) !important;
}
.cta-editorial-banner .text-script {
  color: var(--color-primary) !important;
}

/* Khối Form tư vấn */
.consult-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 28px !important;
  box-shadow: 0 12px 40px -10px rgba(10, 25, 49, 0.08) !important;
}
.form-input, .form-select, .form-textarea {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  color: #141e36 !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  background: #ffffff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(2, 158, 140, 0.15) !important;
}
.choice-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
}
.choice-card:has(input:checked) {
  background: #ffffff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 4px 14px rgba(2, 158, 140, 0.12) !important;
}

/* Modal Popup */
.modal-card, .modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(10, 25, 49, 0.2) !important;
}

/* Chip nhảy nhanh */
.jump-chip {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 2px 8px rgba(10, 25, 49, 0.04) !important;
}
.jump-chip:hover {
  background: #ffffff !important;
  border-color: var(--color-primary) !important;
}

/* Giữ chữ có độ tương phản tối ưu trên nền thẻ trắng */
.section-title, h2, h3, .timeline-title, .info-card-title, .consult-title, .cta-title {
  color: #141e36 !important;
}
.intro-subhead, .section-desc, .timeline-desc, .info-card-desc, .consult-sub, .cta-desc, p {
  color: #37534d;
}

@media (max-width: 860px) {
  main > section.hero { padding-bottom: 2.5rem; }
}