/* AI4Kids Master Hub — Knowledge Hub visual system.
   Direction: Editorial Intelligence × Youth Curiosity × Living AI Lab. */

:root {
  --mh-ink: #17181F;
  --mh-ink-soft: #56525F;
  --mh-bg: #FBF8F3;
  --mh-bg-deep: #12131C;
  --mh-surface: #FFFFFF;
  --mh-border: rgba(23, 24, 31, 0.09);
  --mh-primary: #16345C;
  --mh-primary-soft: #E7EEF6;
  --mh-brand: #E07B27;
  --mh-brand-soft: #FBEBDA;
  --mh-kids: #E07B27;
  --mh-kids-soft: #FFF1DC;
  --mh-teen: #4C3E86;
  --mh-teen-soft: #EFEAFB;
  --mh-safe: #2E7D5B;
  --mh-safe-soft: #E4F3EC;
  --mh-lab: #0E5C63;
  --mh-lab-soft: #E1F1EF;
  --mh-radius-lg: 24px;
  --mh-radius-md: 14px;
  --mh-radius-sm: 9px;
  --mh-shadow-soft: 0 18px 44px rgba(18, 19, 28, 0.12);
  --mh-shadow-card: 0 10px 24px rgba(23, 24, 31, 0.07);
  --mh-max: 1280px;
  --mh-max-wide: 1440px;
  /* Premium journey step accents (Knowledge Path), teal -> navy -> violet -> amber -> gold */
  --mh-step-0: #0E5C63;
  --mh-step-1: #16345C;
  --mh-step-2: #4C3E86;
  --mh-step-3: #C9691C;
  --mh-step-4: #B8862E;
}

* { box-sizing: border-box; }

body.mh-body {
  margin: 0;
  color: var(--mh-ink);
  font-family: 'Noto Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Premium layered surface: subtle warm/teal depth instead of a flat fill —
     shared by every section since they sit on white/tinted cards above it. */
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(22, 52, 92, 0.07), transparent 60%),
    radial-gradient(900px 520px at 100% 4%, rgba(14, 92, 99, 0.055), transparent 55%),
    radial-gradient(800px 480px at 50% 100%, rgba(224, 123, 39, 0.045), transparent 60%),
    var(--mh-bg);
  background-attachment: fixed;
}
@media (max-width: 900px) {
  body.mh-body { background-attachment: scroll; } /* fixed backgrounds can jank on mobile Safari scroll */
}

.mh-heading, h1.mh-h1, h2.mh-h2, h3.mh-h3, .mh-display {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.mh-container { width: 100%; max-width: var(--mh-max); margin: 0 auto; padding: 0 20px; }
.mh-container-wide { width: 100%; max-width: var(--mh-max-wide); margin: 0 auto; padding: 0 20px; }

.mh-section { padding: 60px 0; }
.mh-section-tight { padding: 40px 0; }

.mh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.84rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--mh-primary);
  margin-bottom: 14px;
}
.mh-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--mh-brand); display: inline-block; }

h1.mh-h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; }
h2.mh-h2 { font-size: clamp(1.55rem, 2.7vw, 2.2rem); line-height: 1.18; }
h3.mh-h3 { font-size: 1.14rem; line-height: 1.3; }

.mh-body-copy { color: var(--mh-ink-soft); line-height: 1.66; font-size: 1.02rem; }
.mh-section-header { max-width: 640px; margin: 0 0 34px; }
.mh-section-header.mh-center { margin-left: auto; margin-right: auto; text-align: center; }
.mh-section-header-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 30px; }

.mh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 0.97rem; padding: 13px 24px; border-radius: 999px;
  border: none; cursor: pointer; text-decoration: none; min-height: 44px;
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.mh-btn-primary { background: var(--mh-primary); color: #fff; box-shadow: var(--mh-shadow-soft); }
.mh-btn-primary:hover { transform: translateY(-1px); }
.mh-btn-lab { background: var(--mh-lab); color: #fff; box-shadow: 0 10px 24px rgba(14, 92, 99, 0.22); }
.mh-btn-kids { background: var(--mh-kids); color: #fff; }
.mh-btn-teen { background: var(--mh-teen); color: #fff; }
.mh-btn-ghost { background: transparent; color: var(--mh-primary); border: 1.5px solid var(--mh-border); }
.mh-btn-ghost:hover { border-color: var(--mh-primary); }
.mh-btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); }
/* Primary hero CTA: deepens + lifts with a teal glow. Secondary CTA: text/border
   warms to the brand amber — same lift logic, visually distinct so the pair
   reads as primary/secondary rather than two identical buttons. */
.mh-btn-lab:hover, .mh-btn-lab:focus-visible {
  background: #0A484E; transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(14, 92, 99, 0.38);
}
.mh-btn-outline-light:hover, .mh-btn-outline-light:focus-visible {
  color: #F6D9AE; border-color: #F6D9AE; background: rgba(246, 217, 174, 0.1);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .mh-btn-lab:hover, .mh-btn-outline-light:hover, .mh-btn-primary:hover { transform: none; }
}

.mh-link { color: var(--mh-primary); font-weight: 600; text-decoration: none; }
.mh-link:hover { text-decoration: underline; }
.mh-link:focus-visible, .mh-btn:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--mh-primary); outline-offset: 2px;
}

/* ---------- Header ---------- */
.mh-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 248, 243, 0.66);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(23, 24, 31, 0.07);
  box-shadow: 0 10px 30px rgba(23, 24, 31, 0.04);
}
.mh-header-inner { max-width: var(--mh-max-wide); margin: 0 auto; padding: 17px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mh-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mh-ink); }
.mh-logo img { height: 33px; width: auto; display: block; }
.mh-nav-desktop { display: none; align-items: center; gap: 28px; }
.mh-nav-desktop a {
  position: relative; color: var(--mh-ink); text-decoration: none; font-size: 0.93rem; font-weight: 600;
  letter-spacing: 0.005em; white-space: nowrap; padding: 6px 0; transition: color 0.2s ease;
}
.mh-nav-desktop a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--mh-lab); transition: right 0.25s cubic-bezier(.2,.8,.2,1); border-radius: 2px;
}
.mh-nav-desktop a:hover { color: var(--mh-lab); }
.mh-nav-desktop a:hover::after { right: 0; }
.mh-nav-desktop a.is-current, .mh-drawer a.is-current { color: var(--mh-lab); font-weight: 700; }
.mh-nav-desktop a.is-current::after { right: 0; background: var(--mh-brand); }

/* Kids/Teen read as distinct product pathways, not content nav pages */
.mh-nav-desktop a.mh-nav-product {
  padding: 7px 16px; border-radius: 999px; font-size: 0.86rem; font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.mh-nav-desktop a.mh-nav-product::after { content: none; }
.mh-nav-desktop a.mh-nav-product-kids { background: var(--mh-kids-soft); color: var(--mh-kids); }
.mh-nav-desktop a.mh-nav-product-kids:hover { background: var(--mh-kids); color: #fff; transform: translateY(-1px); }
.mh-nav-desktop a.mh-nav-product-teen { background: var(--mh-teen-soft); color: var(--mh-teen); }
.mh-nav-desktop a.mh-nav-product-teen:hover { background: var(--mh-teen); color: #fff; transform: translateY(-1px); }
.mh-drawer a.mh-nav-product-kids { background: var(--mh-kids-soft); color: var(--mh-kids); font-weight: 700; }
.mh-drawer a.mh-nav-product-teen { background: var(--mh-teen-soft); color: var(--mh-teen); font-weight: 700; margin-top: 4px; }
.mh-drawer a.mh-nav-product-kids:hover, .mh-drawer a.mh-nav-product-kids:focus-visible { background: var(--mh-kids); color: #fff; }
.mh-drawer a.mh-nav-product-teen:hover, .mh-drawer a.mh-nav-product-teen:focus-visible { background: var(--mh-teen); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .mh-nav-desktop a.mh-nav-product:hover { transform: none; }
}

/* ---------- Dedicated page shell (breadcrumb + page hero) ---------- */
.mh-page-hero { padding: 38px 0 34px; border-bottom: 1px solid var(--mh-border); background: var(--mh-surface); }
.mh-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--mh-ink-soft); margin-bottom: 16px; flex-wrap: wrap; }
.mh-breadcrumb a { color: var(--mh-ink-soft); text-decoration: none; }
.mh-breadcrumb a:hover { color: var(--mh-primary); text-decoration: underline; }
.mh-breadcrumb .sep { opacity: 0.5; }
.mh-page-hero h1.mh-h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.mh-page-hero .mh-body-copy { margin-top: 10px; max-width: 62ch; font-size: 1.05rem; }
.mh-nav-desktop .mh-nav-divider { width: 1px; height: 18px; background: var(--mh-border); margin: 0 4px; }
.mh-header-cta { display: none; }
.mh-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--mh-border); background: var(--mh-surface); }

@media (min-width: 1180px) {
  .mh-nav-desktop { display: flex; }
  .mh-header-cta { display: inline-flex; }
  .mh-menu-btn { display: none; }
}

.mh-drawer-overlay { position: fixed; inset: 0; background: rgba(15,14,22,0.44); z-index: 70; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.mh-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.mh-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(88vw, 340px); background: var(--mh-surface); z-index: 71; transform: translateX(100%); transition: transform 0.24s ease; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.mh-drawer.is-open { transform: translateX(0); }
.mh-drawer-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--mh-border); background: #fff; margin-bottom: 8px; }
.mh-drawer a { padding: 12px 10px; border-radius: 10px; text-decoration: none; color: var(--mh-ink); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.mh-drawer a:hover, .mh-drawer a:focus-visible { background: var(--mh-bg); }
.mh-drawer .mh-drawer-heading { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mh-ink-soft); padding: 14px 10px 4px; }
@media (min-width: 1180px) { .mh-drawer, .mh-drawer-overlay { display: none; } }

/* ---------- Hero (Knowledge Constellation, 3-state rotation) ---------- */
.mh-hero { position: relative; padding: 40px 0 56px; overflow: hidden; background: var(--mh-bg-deep); color: #fff; }
.mh-hero-bg { position: absolute; inset: 0; }
.mh-hero-bg-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.mh-hero-bg-layer {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease;
  background-size: cover; background-position: center;
}
.mh-hero-bg-layer.is-active { opacity: 1; }
.mh-hero-bg-layer[data-theme-bg="0"] {
  background-image: linear-gradient(100deg, rgba(10,11,18,0.5) 0%, rgba(10,11,18,0.15) 45%), url('/master-hub-preview/assets/hero/hero-state-1-hieu-ai-v02.png');
  background-position: 65% center;
}
.mh-hero-bg-layer[data-theme-bg="1"] {
  background-image: linear-gradient(100deg, rgba(10,11,18,0.5) 0%, rgba(10,11,18,0.15) 45%), url('/master-hub-preview/assets/hero/hero-state-2-kiem-chung-v02.png');
  background-position: 65% center;
}
.mh-hero-bg-layer[data-theme-bg="2"] {
  background-image: linear-gradient(100deg, rgba(10,11,18,0.5) 0%, rgba(10,11,18,0.15) 45%), url('/images/master-kids/hero-hoc-tao-kids.webp');
  background-position: 65% center;
}
.mh-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(10,11,18,0.94) 0%, rgba(10,11,18,0.8) 38%, rgba(10,11,18,0.42) 68%, rgba(10,11,18,0.18) 100%);
}
@media (max-width: 1023px) {
  .mh-hero::after { background: linear-gradient(180deg, rgba(10,11,18,0.9) 0%, rgba(10,11,18,0.82) 45%, rgba(10,11,18,0.62) 100%); }
}
.mh-hero-inner { position: relative; z-index: 2; }
.mh-hero-grid { display: grid; gap: 30px; align-items: end; }
.mh-hero .mh-eyebrow { color: #F3C892; }
.mh-hero .mh-eyebrow::before { background: #F3C892; }
.mh-hero h1 { color: #fff; }
.mh-hero-support { color: rgba(255,255,255,0.82); margin-top: 14px; font-size: 1.06rem; max-width: 46ch; }
.mh-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: center; min-height: 44px; }
.mh-hero-media {
  position: relative; border-radius: var(--mh-radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16); min-height: 76px;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(8px);
  margin-bottom: 1px; /* nudges baseline to visually match the CTA row's text baseline */
}
.mh-hero-slide {
  position: absolute; inset: 0; display: flex; flex-direction: row; align-items: center; gap: 16px;
  text-align: left; padding: 14px 60px 14px 18px; opacity: 0; transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease; color: #fff;
}
.mh-hero-slide.is-active { opacity: 1; transform: translateY(0); }
.mh-hero-slide-icon { width: 40px; height: 40px; flex-shrink: 0; color: #F3C892; }
.mh-hero-slide-icon svg { width: 100%; height: 100%; }
.mh-hero-slide-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mh-hero-slide-title { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 1.05rem; margin: 0; }
.mh-hero-slide-copy { font-size: 0.86rem; color: rgba(255,255,255,0.82); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-hero-slide-dots { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; z-index: 2; }
.mh-hero-slide-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); transition: background 0.3s ease, width 0.3s ease; display: block; }
.mh-hero-slide-dots span.is-active { background: #F3C892; width: 20px; border-radius: 4px; }

@media (min-width: 1024px) { .mh-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; } }
@media (max-width: 599px) {
  .mh-hero-slide-copy { display: none; }
  .mh-hero-slide { padding-right: 50px; }
  .mh-hero-bg-layer { background-position: 72% center; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-hero-bg-layer, .mh-hero-slide { transition: none; }
}

/* M01 — hero soft entrance (once, on load, not scroll-triggered) */
@keyframes mh-hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.mh-hero .mh-eyebrow, .mh-hero h1.mh-h1, .mh-hero-support, .mh-hero-ctas {
  opacity: 0; animation: mh-hero-in 0.6s ease forwards;
}
.mh-hero .mh-eyebrow { animation-delay: 0.05s; }
.mh-hero h1.mh-h1 { animation-delay: 0.15s; }
.mh-hero-support { animation-delay: 0.28s; }
.mh-hero-ctas { animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .mh-hero .mh-eyebrow, .mh-hero h1.mh-h1, .mh-hero-support, .mh-hero-ctas { opacity: 1; animation: none; }
}

/* ---------- Knowledge Path (signature scroll experience) ---------- */
/* Dark "night sky" scene: teal glow (left) → gold glow (right) mirrors the Dùng → Làm chủ journey.
   Step accents are re-tuned brighter here so every node reads on navy. */
.mh-path-section {
  --mh-step-0: #2EC4C4; --mh-step-1: #5B9BF0; --mh-step-2: #9D8BF2; --mh-step-3: #F28C3A; --mh-step-4: #F5C451;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 72px 0 64px;
  background-color: #0B1A33;
  background-image: url('/master-hub-preview/assets/motion/knowledge-path-bg-v02.webp');
  background-size: cover; background-position: center bottom;
  color: #fff;
}
@media (max-width: 899px) {
  .mh-path-section { background-image: url('/master-hub-preview/assets/motion/knowledge-path-bg-v02-mobile.webp'); background-position: 18% bottom; padding: 56px 0 48px; }
}
/* Slow breathing glows over the teal and gold corners of the artwork. */
.mh-path-section::before, .mh-path-section::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(40px);
  width: 420px; height: 420px; animation: mh-path-glow 7s ease-in-out infinite alternate;
}
.mh-path-section::before { left: -140px; top: -80px; background: radial-gradient(circle, rgba(46,196,196,0.30), transparent 70%); }
.mh-path-section::after { right: -140px; top: -60px; background: radial-gradient(circle, rgba(245,170,80,0.30), transparent 70%); animation-delay: -3.5s; }
@keyframes mh-path-glow { from { opacity: 0.45; transform: scale(0.92); } to { opacity: 1; transform: scale(1.08); } }
.mh-path-section > .mh-container { position: relative; z-index: 1; }
.mh-path-section .mh-eyebrow { color: #F6C08E; }
.mh-path-section .mh-eyebrow::before { background: linear-gradient(90deg, #2EC4C4, #F5C451); }
.mh-path-section h2.mh-h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.mh-path-section .mh-section-header .mh-body-copy { color: rgba(255,255,255,0.8); margin: 14px auto 0; max-width: 56ch; }
.mh-path-hl {
  background: linear-gradient(90deg, #F28C3A, #F5C451); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mh-path-wrap { position: relative; max-width: 900px; margin: 34px auto 10px; }
.mh-path-svg { display: none; }
#mh-path-line-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.mh-path-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.mh-path-node {
  display: flex; align-items: center; gap: 14px; opacity: 0.55; transition: opacity 0.35s ease;
  cursor: default; border-radius: var(--mh-radius-md); padding: 6px; margin: -6px;
}
.mh-path-node.is-active { opacity: 1; }
.mh-path-dot {
  position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--mh-surface); border: 2px solid var(--mh-border);
  display: flex; align-items: center; justify-content: center; color: var(--mh-ink-soft);
  flex-shrink: 0; transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.mh-path-dot svg { width: 18px; height: 18px; position: relative; z-index: 1; }
.mh-path-dot-pulse { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.mh-path-label { font-weight: 700; font-family: 'Be Vietnam Pro', sans-serif; }
.mh-path-desc {
  display: block; font-size: 0.84rem; color: var(--mh-ink-soft); max-width: 26ch;
  opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
}
.mh-path-node:hover .mh-path-desc, .mh-path-node:focus-visible .mh-path-desc, .mh-path-node.is-active .mh-path-desc {
  opacity: 1; max-height: 60px; margin-top: 2px;
}
.mh-path-caption { text-align: center; max-width: 46ch; margin: 22px auto 0; }

@keyframes mh-path-pulse { 0% { transform: scale(0.75); opacity: 0.5; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }

/* Per-step accent colors, active + hover state */
.mh-path-node[data-step-color="0"].is-active .mh-path-dot, .mh-path-node[data-step-color="0"]:hover .mh-path-dot { background: var(--mh-step-0); border-color: var(--mh-step-0); color: #fff; transform: scale(1.1); box-shadow: 0 8px 20px rgba(14,92,99,0.35); }
.mh-path-node[data-step-color="1"].is-active .mh-path-dot, .mh-path-node[data-step-color="1"]:hover .mh-path-dot { background: var(--mh-step-1); border-color: var(--mh-step-1); color: #fff; transform: scale(1.1); box-shadow: 0 8px 20px rgba(22,52,92,0.35); }
.mh-path-node[data-step-color="2"].is-active .mh-path-dot, .mh-path-node[data-step-color="2"]:hover .mh-path-dot { background: var(--mh-step-2); border-color: var(--mh-step-2); color: #fff; transform: scale(1.1); box-shadow: 0 8px 20px rgba(76,62,134,0.35); }
.mh-path-node[data-step-color="3"].is-active .mh-path-dot, .mh-path-node[data-step-color="3"]:hover .mh-path-dot { background: var(--mh-step-3); border-color: var(--mh-step-3); color: #fff; transform: scale(1.1); box-shadow: 0 8px 20px rgba(201,105,28,0.35); }
.mh-path-node[data-step-color="4"].is-active .mh-path-dot, .mh-path-node[data-step-color="4"]:hover .mh-path-dot { background: var(--mh-step-4); border-color: var(--mh-step-4); color: #fff; transform: scale(1.1); box-shadow: 0 8px 20px rgba(184,134,46,0.35); }
.mh-path-node[data-step-color="0"].is-active .mh-path-dot-pulse { background: var(--mh-step-0); animation: mh-path-pulse 1.8s ease-out infinite; }
.mh-path-node[data-step-color="1"].is-active .mh-path-dot-pulse { background: var(--mh-step-1); animation: mh-path-pulse 1.8s ease-out infinite; }
.mh-path-node[data-step-color="2"].is-active .mh-path-dot-pulse { background: var(--mh-step-2); animation: mh-path-pulse 1.8s ease-out infinite; }
.mh-path-node[data-step-color="3"].is-active .mh-path-dot-pulse { background: var(--mh-step-3); animation: mh-path-pulse 1.8s ease-out infinite; }
.mh-path-node[data-step-color="4"].is-active .mh-path-dot-pulse { background: var(--mh-step-4); animation: mh-path-pulse 1.8s ease-out infinite; }

@media (min-width: 900px) {
  .mh-path-svg { display: block; width: 100%; height: auto; position: absolute; top: 8px; left: 0; z-index: 0; }
  .mh-path-nodes { flex-direction: row; justify-content: space-between; position: relative; z-index: 1; padding-top: 44px; }
  .mh-path-node { flex-direction: column; gap: 10px; text-align: center; flex: 1; }
  .mh-path-desc { margin-left: auto; margin-right: auto; }
}
/* Dark-scene node styling (overrides the light defaults above). */
.mh-path-section .mh-path-node { opacity: 0.62; }
.mh-path-section .mh-path-node.is-active { opacity: 1; }
.mh-path-section .mh-path-dot {
  width: 48px; height: 48px; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mh-path-section .mh-path-dot svg { width: 20px; height: 20px; }
.mh-path-section .mh-path-label { color: #fff; font-size: 1.08rem; letter-spacing: 0.01em; }
.mh-path-section .mh-path-desc { color: rgba(255,255,255,0.74); font-size: 0.88rem; line-height: 1.5; }
.mh-path-section .mh-path-node:hover .mh-path-desc,
.mh-path-section .mh-path-node:focus-visible .mh-path-desc,
.mh-path-section .mh-path-node.is-active .mh-path-desc { max-height: 72px; }
.mh-path-section .mh-path-node.is-active .mh-path-dot,
.mh-path-section .mh-path-node:hover .mh-path-dot { color: #0B1A33; }
.mh-path-section .mh-path-node[data-step-color="0"].is-active .mh-path-dot, .mh-path-section .mh-path-node[data-step-color="0"]:hover .mh-path-dot { box-shadow: 0 0 0 4px rgba(46,196,196,0.18), 0 0 28px rgba(46,196,196,0.55); }
.mh-path-section .mh-path-node[data-step-color="1"].is-active .mh-path-dot, .mh-path-section .mh-path-node[data-step-color="1"]:hover .mh-path-dot { box-shadow: 0 0 0 4px rgba(91,155,240,0.18), 0 0 28px rgba(91,155,240,0.55); }
.mh-path-section .mh-path-node[data-step-color="2"].is-active .mh-path-dot, .mh-path-section .mh-path-node[data-step-color="2"]:hover .mh-path-dot { box-shadow: 0 0 0 4px rgba(157,139,242,0.18), 0 0 28px rgba(157,139,242,0.55); }
.mh-path-section .mh-path-node[data-step-color="3"].is-active .mh-path-dot, .mh-path-section .mh-path-node[data-step-color="3"]:hover .mh-path-dot { box-shadow: 0 0 0 4px rgba(242,140,58,0.18), 0 0 28px rgba(242,140,58,0.55); }
.mh-path-section .mh-path-node[data-step-color="4"].is-active .mh-path-dot, .mh-path-section .mh-path-node[data-step-color="4"]:hover .mh-path-dot { box-shadow: 0 0 0 4px rgba(245,196,81,0.18), 0 0 28px rgba(245,196,81,0.6); }
.mh-path-section #mh-path-line-draw { filter: drop-shadow(0 0 6px rgba(157,139,242,0.55)); }
.mh-path-section .mh-path-caption {
  color: rgba(255,255,255,0.86); font-size: 1.05rem; max-width: 52ch; margin-top: 34px;
  padding: 14px 22px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (max-width: 899px) {
  .mh-path-section .mh-path-nodes { gap: 20px; padding-left: 4px; }
  .mh-path-section .mh-path-label { white-space: nowrap; min-width: 104px; }
  .mh-path-section .mh-path-caption { border-radius: var(--mh-radius-md); }
}

@media (prefers-reduced-motion: reduce) {
  .mh-path-section::before, .mh-path-section::after { animation: none; }
  .mh-path-node { opacity: 1; }
  .mh-path-node .mh-path-dot { background: var(--mh-lab); border-color: var(--mh-lab); color: #fff; transform: none; }
  .mh-path-dot-pulse { animation: none !important; }
  #mh-path-line-draw { stroke-dashoffset: 0; }
}

/* ---------- "Những điều cần biết về AI" — premium knowledge cards ---------- */
.mh-today-rail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.mh-today-card {
  scroll-snap-align: start; flex: 0 0 82%; display: block; text-decoration: none; color: inherit;
  border: 1.5px solid transparent; border-radius: var(--mh-radius-md); padding: 20px; box-shadow: var(--mh-shadow-card);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.mh-today-icon { display: inline-block; font-size: 1.15rem; margin-bottom: 8px; opacity: 0.75; transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); }
.mh-today-card:hover, .mh-today-card:focus-visible { transform: translateY(-6px); }
.mh-today-card:hover .mh-today-icon, .mh-today-card:focus-visible .mh-today-icon { transform: scale(1.3) rotate(10deg); }
.mh-today-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }

.mh-today-c1 { background: linear-gradient(160deg, var(--mh-primary-soft), #fff 72%); }
.mh-today-c1 .mh-today-tag { color: var(--mh-primary); background: rgba(22,52,92,0.1); }
.mh-today-c1:hover, .mh-today-c1:focus-visible { border-color: var(--mh-primary); box-shadow: 0 18px 36px rgba(22,52,92,0.22); }

.mh-today-c2 { background: linear-gradient(160deg, var(--mh-lab-soft), #fff 72%); }
.mh-today-c2 .mh-today-tag { color: var(--mh-lab); background: rgba(14,92,99,0.1); }
.mh-today-c2:hover, .mh-today-c2:focus-visible { border-color: var(--mh-lab); box-shadow: 0 18px 36px rgba(14,92,99,0.24); }

.mh-today-c3 { background: linear-gradient(160deg, var(--mh-safe-soft), #fff 72%); }
.mh-today-c3 .mh-today-tag { color: var(--mh-safe); background: rgba(46,125,91,0.1); }
.mh-today-c3:hover, .mh-today-c3:focus-visible { border-color: var(--mh-safe); box-shadow: 0 18px 36px rgba(46,125,91,0.22); }

.mh-today-c4 { background: linear-gradient(160deg, var(--mh-teen-soft), #fff 72%); }
.mh-today-c4 .mh-today-tag { color: var(--mh-teen); background: rgba(76,62,134,0.1); }
.mh-today-c4:hover, .mh-today-c4:focus-visible { border-color: var(--mh-teen); box-shadow: 0 18px 36px rgba(76,62,134,0.22); }

@media (min-width: 900px) { .mh-today-rail { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; } .mh-today-card { flex: initial; } }
@media (prefers-reduced-motion: reduce) {
  .mh-today-card:hover, .mh-today-card:focus-visible { transform: none; }
  .mh-today-card:hover .mh-today-icon { transform: none; }
}

/* ---------- AI Explorer (sticky desktop) ---------- */
.mh-explorer { display: grid; gap: 24px; }
.mh-explorer-visual { border-radius: var(--mh-radius-lg); background: var(--mh-lab-soft); border: 1px solid var(--mh-border); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mh-explorer-visual img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 732/332; }
.mh-explorer-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mh-explorer-tab { border: 1px solid var(--mh-border); background: var(--mh-surface); border-radius: 999px; padding: 9px 16px; font-size: 0.86rem; font-weight: 600; cursor: pointer; min-height: 40px; color: var(--mh-ink); }
.mh-explorer-tab[aria-selected="true"] { background: var(--mh-lab); color: #fff; border-color: var(--mh-lab); }
.mh-explorer-body h3 { margin-bottom: 8px; }

@media (min-width: 1024px) {
  .mh-explorer { grid-template-columns: 0.95fr 1.05fr; gap: 40px; align-items: start; }
  .mh-explorer-visual { position: sticky; top: 84px; }
}

/* ---------- Verification Lab ---------- */
.mh-lab-card { background: var(--mh-bg-deep); color: #fff; border-radius: var(--mh-radius-lg); padding: 30px 24px; }
.mh-lab-answer { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--mh-radius-md); padding: 18px; margin-bottom: 20px; font-size: 1.02rem; }
.mh-lab-question { font-weight: 600; margin-bottom: 12px; }
.mh-lab-checks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mh-lab-check-btn { border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 0.86rem; font-weight: 600; cursor: pointer; min-height: 40px; }
.mh-lab-check-btn[aria-pressed="true"] { background: var(--mh-lab); border-color: var(--mh-lab); }
.mh-lab-reveal { background: rgba(46,125,91,0.16); border: 1px solid rgba(46,125,91,0.4); border-radius: var(--mh-radius-sm); padding: 12px 14px; font-size: 0.92rem; margin-top: 8px; }
.mh-lab-status { font-size: 0.86rem; color: rgba(255,255,255,0.7); margin-top: 14px; }
.mh-lab-layout { display: grid; gap: 20px; }
.mh-lab-visual { border-radius: var(--mh-radius-lg); overflow: hidden; min-height: 220px; }
.mh-lab-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1000px) { .mh-lab-layout { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; } }

/* ---------- Teen character panel (editorial support, no Sulato) ---------- */
.mh-teen-panel {
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  min-height: 260px; aspect-ratio: 16/9;
}
.mh-teen-panel img { width: auto; height: 94%; max-height: 340px; object-fit: contain; margin-top: auto; }
.mh-teen-panel--create {
  background-image:
    radial-gradient(700px 500px at 70% 15%, rgba(76,62,134,0.32), transparent 60%),
    linear-gradient(160deg, #201A3A, #0E1F3A),
    url('/images/visual-kit/05_BACKGROUND_MOTIFS/MOT-TRACE-01.svg');
  background-size: cover, cover, 280px 280px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, soft-light;
}
.mh-teen-panel--explore {
  background-image:
    radial-gradient(700px 500px at 30% 15%, rgba(22,52,92,0.35), transparent 60%),
    linear-gradient(160deg, #16203A, #0E2A2C),
    url('/images/visual-kit/05_BACKGROUND_MOTIFS/MOT-NETWORK-01.svg');
  background-size: cover, cover, 280px 280px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, soft-light;
}

/* ---------- Editorial/resource/activity banner visuals (Room C rendered assets) ---------- */
.mh-banner-visual { border-radius: var(--mh-radius-lg); overflow: hidden; margin-bottom: 26px; border: 1px solid var(--mh-border); }
.mh-banner-visual img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; object-position: center top; }
@media (min-width: 1000px) { .mh-banner-visual img { aspect-ratio: 21/8; } }

/* ---------- Editorial: featured story + supporting topic rail ---------- */
.mh-editorial-featured { display: grid; gap: 20px; margin-bottom: 22px; border-radius: var(--mh-radius-lg); overflow: hidden; background: var(--mh-surface); border: 1px solid var(--mh-border); box-shadow: var(--mh-shadow-card); }
.mh-editorial-featured-visual { overflow: hidden; }
.mh-editorial-featured-visual img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 16/9; }
.mh-editorial-featured-text { padding: 22px 24px 26px; align-self: center; }
@media (min-width: 900px) {
  .mh-editorial-featured { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
  .mh-editorial-featured-visual img { aspect-ratio: auto; }
}

.mh-topic-rail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.mh-topic-card { border-radius: var(--mh-radius-md); overflow: hidden; border: 1px solid var(--mh-border); background: var(--mh-surface); box-shadow: var(--mh-shadow-card); text-decoration: none; color: inherit; display: block; transition: transform 0.2s ease; flex: 0 0 62%; scroll-snap-align: start; }
.mh-topic-card:hover { transform: translateY(-2px); }
.mh-topic-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform 0.35s ease; }
.mh-topic-card:hover img { transform: scale(1.04); }
.mh-topic-card-body { padding: 12px 14px; }
@media (min-width: 700px) { .mh-topic-card { flex-basis: 30%; } }
@media (min-width: 1024px) { .mh-topic-rail { overflow: visible; flex-wrap: wrap; } .mh-topic-card { flex: 1 1 180px; } }
@media (prefers-reduced-motion: reduce) { .mh-topic-card:hover img { transform: none; } }

/* ---------- Learning Compass ---------- */
.mh-compass {
  position: relative; overflow: hidden;
  background: var(--mh-primary-soft) url('/master-hub-preview/assets/motion/knowledge-constellation-v01.svg') center/cover no-repeat;
  border-radius: var(--mh-radius-lg); padding: 30px 24px;
}
.mh-compass::before { content: ''; position: absolute; inset: 0; background: var(--mh-primary-soft); opacity: 0.86; }
.mh-compass > * { position: relative; z-index: 1; }
.mh-compass-row { margin-bottom: 18px; }
.mh-compass-row-label { font-weight: 700; margin-bottom: 10px; display: block; }
.mh-compass-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-compass-option { border: 1px solid var(--mh-border); background: var(--mh-surface); border-radius: 999px; padding: 9px 16px; font-size: 0.88rem; font-weight: 600; cursor: pointer; min-height: 40px; }
.mh-compass-option[aria-pressed="true"] { background: var(--mh-primary); color: #fff; border-color: var(--mh-primary); }
.mh-compass-result { margin-top: 20px; background: var(--mh-surface); border-radius: var(--mh-radius-md); padding: 18px; border: 1px solid var(--mh-border); display: none; }
.mh-compass-result.is-visible { display: block; }
.mh-compass-step-2 { opacity: 0.4; max-height: 0; overflow: hidden; transition: opacity 0.3s ease, max-height 0.3s ease; pointer-events: none; }
.mh-compass-step-2.is-visible { opacity: 1; max-height: 200px; pointer-events: auto; }

/* ---------- Pathways (secondary, ~10-15% attention) ---------- */
.mh-pathways-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .mh-pathways-grid { grid-template-columns: 1fr 1fr; } }
.mh-pathway-card {
  border-radius: var(--mh-radius-md); border: 1px solid var(--mh-border); box-shadow: var(--mh-shadow-card);
  display: flex; gap: 14px; padding: 16px; text-decoration: none; color: inherit; align-items: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.mh-pathway-card.kids { background: linear-gradient(120deg, var(--mh-kids-soft), #fff 70%); }
.mh-pathway-card.teen { background: linear-gradient(120deg, var(--mh-teen-soft), #fff 70%); }
/* M06 — Kids warms on hover/focus, Teen sharpens/deepens; no layout shift */
.mh-pathway-card.kids:hover, .mh-pathway-card.kids:focus-visible {
  transform: translateY(-3px); border-color: var(--mh-kids);
  box-shadow: 0 14px 30px rgba(224, 123, 39, 0.22);
}
.mh-pathway-card.teen:hover, .mh-pathway-card.teen:focus-visible {
  transform: translateY(-3px); border-color: var(--mh-teen);
  box-shadow: 0 14px 30px rgba(76, 62, 134, 0.26);
}
.mh-pathway-thumb { width: 84px; height: 84px; border-radius: var(--mh-radius-sm); overflow: hidden; flex-shrink: 0; background: #eee; }
.mh-pathway-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mh-pathway-age { display: inline-block; font-weight: 700; font-size: 0.72rem; padding: 3px 9px; border-radius: 999px; margin-bottom: 4px; }
.mh-pathway-card.kids .mh-pathway-age { background: var(--mh-kids); color: #fff; }
.mh-pathway-card.teen .mh-pathway-age { background: var(--mh-teen); color: #fff; }

/* ---------- Safety Center: central visual + compact principle list ---------- */
.mh-safety-layout { display: grid; gap: 20px; }
.mh-safety-visual {
  border-radius: var(--mh-radius-lg); background: var(--mh-safe-soft); border: 1px solid var(--mh-border);
  min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 28px;
}
.mh-safety-visual img { max-width: 100%; max-height: 240px; transition: opacity 0.25s ease; }
.mh-safety-list { display: flex; flex-direction: column; gap: 8px; }
.mh-safety-item {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--mh-surface); border: 1.5px solid var(--mh-border); border-radius: var(--mh-radius-md);
  padding: 13px 15px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.mh-safety-item[aria-pressed="true"] { border-color: var(--mh-safe); background: var(--mh-safe-soft); }
.mh-safety-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mh-safe); flex-shrink: 0; margin-top: 7px; }
@media (min-width: 900px) { .mh-safety-layout { grid-template-columns: 0.9fr 1.1fr; align-items: start; } .mh-safety-visual { position: sticky; top: 84px; } }

/* ---------- Parent ---------- */
.mh-split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1000px) { .mh-split { grid-template-columns: 1fr 1fr; } }
.mh-parent-visual { border-radius: var(--mh-radius-lg); overflow: hidden; background: var(--mh-kids-soft); border: 1px solid var(--mh-border); display: flex; align-items: center; justify-content: center; min-height: 220px; }
.mh-parent-visual img { max-width: 62%; }
.mh-principle-list { display: grid; gap: 10px; margin-top: 16px; }
.mh-principle { display: flex; gap: 10px; align-items: flex-start; }
.mh-principle-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--mh-safe); flex-shrink: 0; margin-top: 3px; }

/* ---------- Frameworks ---------- */
.mh-framework-grid { display: grid; gap: 24px; }
@media (min-width: 1000px) { .mh-framework-grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; } }
.mh-framework-map { border-radius: var(--mh-radius-lg); overflow: hidden; border: 1px solid var(--mh-border); background: var(--mh-surface); }
.mh-framework-map img { width: 100%; display: block; }
.mh-framework-card { background: var(--mh-surface); border: 1px solid var(--mh-border); border-radius: var(--mh-radius-md); padding: 18px; box-shadow: var(--mh-shadow-card); margin-bottom: 12px; }
.mh-framework-tag { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--mh-primary); background: var(--mh-primary-soft); padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
.mh-disclosure { font-size: 0.82rem; color: var(--mh-ink-soft); margin-top: 8px; border-top: 1px dashed var(--mh-border); padding-top: 8px; }

/* ---------- Resource Library ---------- */
.mh-resource-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .mh-resource-grid { grid-template-columns: repeat(3, 1fr); } }
.mh-resource-card { background: var(--mh-surface); border: 1px solid var(--mh-border); border-radius: var(--mh-radius-md); box-shadow: var(--mh-shadow-card); overflow: hidden; display: flex; flex-direction: column; position: relative; text-decoration: none; color: inherit; }
.mh-resource-card img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--mh-primary-soft); padding: 14px; }
.mh-resource-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mh-badge-soon { position: absolute; top: 12px; right: 12px; background: var(--mh-ink); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; z-index: 1; }

/* ---------- Editorial (Tin tức & Góc nhìn) ---------- */
.mh-grid-3 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .mh-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.mh-card { background: var(--mh-surface); border: 1px solid var(--mh-border); border-radius: var(--mh-radius-md); box-shadow: var(--mh-shadow-card); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.mh-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mh-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }

/* ---------- Activity module ---------- */
.mh-activity-card { background: var(--mh-surface); border: 1px solid var(--mh-border); border-radius: var(--mh-radius-lg); padding: 26px; box-shadow: var(--mh-shadow-card); max-width: 640px; margin: 0 auto; }
.mh-activity-claim { font-size: 1.08rem; font-weight: 600; margin-bottom: 18px; }
.mh-activity-choices { display: flex; gap: 12px; margin-bottom: 14px; }
.mh-activity-choice { flex: 1; border: 1.5px solid var(--mh-border); background: var(--mh-surface); border-radius: var(--mh-radius-sm); padding: 12px; font-weight: 700; cursor: pointer; min-height: 46px; }
.mh-activity-choice:hover { border-color: var(--mh-primary); }
.mh-activity-tip { background: var(--mh-lab-soft); border-radius: var(--mh-radius-sm); padding: 12px 14px; font-size: 0.92rem; display: none; margin-bottom: 14px; }
.mh-activity-tip.is-visible { display: block; }
.mh-activity-progress { font-size: 0.84rem; color: var(--mh-ink-soft); }

/* ---------- About ---------- */
.mh-about-wrap { max-width: 720px; margin: 0 auto; text-align: center; }

/* ---------- Footer ---------- */
.mh-footer { background: var(--mh-bg-deep); color: #D8D5E0; padding: 46px 0 24px; }
.mh-footer a { color: #D8D5E0; text-decoration: none; font-size: 0.92rem; }
.mh-footer a:hover { color: #fff; }
.mh-footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
.mh-footer-brand img { filter: brightness(0) invert(1); opacity: 0.92; }
.mh-footer-brand p { margin: 0; font-size: 0.86rem; color: #A7A3B5; max-width: 44ch; }
.mh-footer-grid { display: grid; gap: 26px; grid-template-columns: 1fr; margin-bottom: 28px; }
@media (min-width: 700px) { .mh-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.mh-footer-col h4 { color: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.9rem; margin: 0 0 12px; }
.mh-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mh-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; font-size: 0.8rem; color: #8F8BA0; }

/* ---------- Reveal-once motion ---------- */
.mh-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.mh-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .mh-reveal { opacity: 1; transform: none; transition: none; }
  .mh-pathway-card:hover, .mh-topic-card:hover, .mh-btn:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

.mh-skip-link { position: absolute; left: -9999px; top: 0; background: var(--mh-primary); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 100; }
.mh-skip-link:focus { left: 0; }

.mh-video-gap-note { font-size: 0.76rem; color: rgba(255,255,255,0.55); margin-top: 8px; }

/* =====================================================================
   SECTION PASS 02 — /kham-pha-ai/, /hoc-ai/, /safety/ premium modules
   ===================================================================== */

/* ---------- Knowledge cards (richer "Những điều cần biết về AI", kham-pha-ai) ---------- */
.mh-knowledge-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .mh-knowledge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mh-knowledge-grid { grid-template-columns: repeat(4, 1fr); } }
.mh-knowledge-card {
  position: relative; display: block; text-decoration: none; color: inherit;
  border-radius: var(--mh-radius-lg); padding: 26px 22px; border: 1.5px solid transparent;
  background: var(--mh-surface); box-shadow: var(--mh-shadow-card);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.mh-knowledge-card:hover, .mh-knowledge-card:focus-visible { transform: translateY(-7px); }
.mh-knowledge-icon {
  width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.mh-knowledge-icon svg { width: 22px; height: 22px; }
.mh-knowledge-card:hover .mh-knowledge-icon, .mh-knowledge-card:focus-visible .mh-knowledge-icon { transform: scale(1.14) rotate(-6deg); }
.mh-knowledge-tag { display: block; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.mh-knowledge-card h3 { font-size: 1.04rem; margin-bottom: 8px; }
.mh-knowledge-card p { margin: 0; font-size: 0.93rem; }

.mh-knowledge-card--amber { background: linear-gradient(165deg, var(--mh-brand-soft), #fff 68%); }
.mh-knowledge-card--amber .mh-knowledge-icon { background: rgba(224,123,39,0.14); color: var(--mh-brand); }
.mh-knowledge-card--amber .mh-knowledge-tag { color: var(--mh-brand); }
.mh-knowledge-card--amber:hover { border-color: var(--mh-brand); box-shadow: 0 20px 40px rgba(224,123,39,0.24); }

.mh-knowledge-card--blue { background: linear-gradient(165deg, var(--mh-primary-soft), #fff 68%); }
.mh-knowledge-card--blue .mh-knowledge-icon { background: rgba(22,52,92,0.12); color: var(--mh-primary); }
.mh-knowledge-card--blue .mh-knowledge-tag { color: var(--mh-primary); }
.mh-knowledge-card--blue:hover { border-color: var(--mh-primary); box-shadow: 0 20px 40px rgba(22,52,92,0.22); }

.mh-knowledge-card--teal { background: linear-gradient(165deg, var(--mh-safe-soft), #fff 68%); }
.mh-knowledge-card--teal .mh-knowledge-icon { background: rgba(46,125,91,0.14); color: var(--mh-safe); }
.mh-knowledge-card--teal .mh-knowledge-tag { color: var(--mh-safe); }
.mh-knowledge-card--teal:hover { border-color: var(--mh-safe); box-shadow: 0 20px 40px rgba(46,125,91,0.22); }

.mh-knowledge-card--violet { background: linear-gradient(165deg, var(--mh-teen-soft), #fff 68%); }
.mh-knowledge-card--violet .mh-knowledge-icon { background: rgba(76,62,134,0.14); color: var(--mh-teen); }
.mh-knowledge-card--violet .mh-knowledge-tag { color: var(--mh-teen); }
.mh-knowledge-card--violet:hover { border-color: var(--mh-teen); box-shadow: 0 20px 40px rgba(76,62,134,0.22); }

@media (prefers-reduced-motion: reduce) {
  .mh-knowledge-card:hover, .mh-knowledge-card:focus-visible { transform: none; }
  .mh-knowledge-card:hover .mh-knowledge-icon { transform: none; }
}

/* ---------- World/Tập structured-learning cards (hoc-ai) ---------- */
.mh-world-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 720px) { .mh-world-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mh-world-grid { grid-template-columns: repeat(4, 1fr); } }
.mh-world-card {
  border-radius: var(--mh-radius-lg); padding: 22px 20px; background: var(--mh-surface);
  border: 1.5px solid var(--mh-border); box-shadow: var(--mh-shadow-card);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.mh-world-card:hover { transform: translateY(-6px); border-color: var(--mh-step-1); box-shadow: 0 20px 38px rgba(22,52,92,0.18); }
.mh-world-num {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; font-weight: 800; font-size: 0.92rem; margin-bottom: 14px; color: #fff;
}
.mh-world-card:nth-child(1) .mh-world-num { background: var(--mh-step-0); }
.mh-world-card:nth-child(2) .mh-world-num { background: var(--mh-step-1); }
.mh-world-card:nth-child(3) .mh-world-num { background: var(--mh-step-2); }
.mh-world-card:nth-child(4) .mh-world-num { background: var(--mh-step-3); }
.mh-world-card h3 { font-size: 1.0rem; margin-bottom: 6px; }
.mh-world-card p { margin: 0 0 10px; font-size: 0.88rem; color: var(--mh-ink-soft); }
.mh-world-lessons { font-size: 0.78rem; font-weight: 700; color: var(--mh-ink-soft); }

.mh-stats-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 30px; }
.mh-stat-chip {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; border-radius: var(--mh-radius-md);
  background: var(--mh-primary-soft); min-width: 140px;
}
.mh-stat-chip strong { font-family: 'Be Vietnam Pro', sans-serif; font-size: 1.5rem; color: var(--mh-primary); line-height: 1; }
.mh-stat-chip span { font-size: 0.8rem; color: var(--mh-ink-soft); }

.mh-outcome-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .mh-outcome-grid { grid-template-columns: repeat(3, 1fr); } }
.mh-outcome-card {
  border-radius: var(--mh-radius-lg); overflow: hidden; background: var(--mh-surface);
  border: 1px solid var(--mh-border); box-shadow: var(--mh-shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mh-outcome-card:hover { transform: translateY(-6px); box-shadow: var(--mh-shadow-soft); }
.mh-outcome-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mh-outcome-body { padding: 16px 18px 18px; }
.mh-outcome-body span { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mh-lab); }
.mh-outcome-body h3 { font-size: 0.98rem; margin: 6px 0 0; }

.mh-trust-banner {
  display: flex; align-items: center; gap: 16px; border-radius: var(--mh-radius-lg);
  padding: 20px 24px; background: var(--mh-lab-soft); border: 1px solid rgba(14,92,99,0.18);
}
.mh-trust-banner-icon { width: 40px; height: 40px; flex-shrink: 0; color: var(--mh-lab); }
.mh-trust-banner p { margin: 0; font-size: 0.94rem; color: var(--mh-ink); }

/* ---------- Safety Center: color-coded, numbered premium items ---------- */
.mh-safety-item {
  transition: transform 0.25s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}
.mh-safety-item:hover { transform: translateX(4px); box-shadow: var(--mh-shadow-card); }
.mh-safety-item-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.76rem; font-weight: 800; color: #fff; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.mh-safety-item:hover .mh-safety-item-dot { transform: scale(1.12); }
.mh-safety-item--c0 .mh-safety-item-dot { background: var(--mh-step-0); }
.mh-safety-item--c0[aria-pressed="true"] { border-color: var(--mh-step-0); background: var(--mh-lab-soft); }
.mh-safety-item--c1 .mh-safety-item-dot { background: var(--mh-step-1); }
.mh-safety-item--c1[aria-pressed="true"] { border-color: var(--mh-step-1); background: var(--mh-primary-soft); }
.mh-safety-item--c2 .mh-safety-item-dot { background: var(--mh-step-2); }
.mh-safety-item--c2[aria-pressed="true"] { border-color: var(--mh-step-2); background: var(--mh-teen-soft); }
.mh-safety-item--c3 .mh-safety-item-dot { background: var(--mh-step-3); }
.mh-safety-item--c3[aria-pressed="true"] { border-color: var(--mh-step-3); background: var(--mh-brand-soft); }
@media (prefers-reduced-motion: reduce) {
  .mh-safety-item:hover, .mh-safety-item:hover .mh-safety-item-dot { transform: none; }
}

/* ---------- Verify-flow step cards (safety) ---------- */
.mh-verify-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 700px) { .mh-verify-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mh-verify-grid { grid-template-columns: repeat(4, 1fr); } }
.mh-verify-card {
  border-radius: var(--mh-radius-lg); padding: 20px 18px; background: var(--mh-surface);
  border: 1.5px solid var(--mh-border); position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.mh-verify-card:hover { transform: translateY(-6px); border-color: var(--mh-lab); box-shadow: 0 18px 36px rgba(14,92,99,0.18); }
.mh-verify-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--mh-lab); color: #fff; font-weight: 800; font-size: 0.84rem; margin-bottom: 12px;
}
.mh-verify-card h3 { font-size: 0.98rem; margin-bottom: 6px; }
.mh-verify-card p { margin: 0; font-size: 0.88rem; color: var(--mh-ink-soft); }

/* ---------- Co-guidance calm banner (safety) ---------- */
.mh-coguidance {
  display: grid; gap: 20px; border-radius: var(--mh-radius-lg); padding: 28px 26px;
  background: linear-gradient(150deg, var(--mh-safe-soft), #fff 75%); border: 1px solid rgba(46,125,91,0.18);
}
@media (min-width: 800px) { .mh-coguidance { grid-template-columns: repeat(3, 1fr); } }
.mh-coguidance-item { display: flex; gap: 12px; align-items: flex-start; }
.mh-coguidance-item svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--mh-safe); }
.mh-coguidance-item h3 { font-size: 0.96rem; margin: 0 0 4px; }
.mh-coguidance-item p { margin: 0; font-size: 0.88rem; color: var(--mh-ink-soft); }

/* ---------- Shared: section eyebrow divider rhythm ---------- */
.mh-section-divider { height: 1px; background: var(--mh-border); margin: 0; }

/* ---------- Click-to-play video slots (non-hero: V02, V03) ---------- */
.mh-video-slot { position: relative; border-radius: var(--mh-radius-md); overflow: hidden; background: #000; }
.mh-video-slot img, .mh-video-slot video { width: 100%; display: block; }
.mh-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.94);
  border: none; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; cursor: pointer; color: var(--mh-ink);
}
.mh-video-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 1023px) {
  .mh-hero-ctas .mh-btn { width: 100%; }
  .mh-today-card { flex-basis: 86%; }
}

/* =====================================================================
   FINAL SECTION BATCH — parents / resources / frameworks / about
   + homepage teaser polish + footer
   ===================================================================== */

/* ---------- Practical-principle icon list (parents) ---------- */
.mh-principle-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 700px) { .mh-principle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mh-principle-grid { grid-template-columns: repeat(3, 1fr); } }
.mh-principle-tile { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--mh-radius-md); background: var(--mh-surface); border: 1px solid var(--mh-border); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mh-principle-tile:hover { transform: translateY(-4px); box-shadow: var(--mh-shadow-card); }
.mh-principle-tile svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--mh-primary); margin-top: 2px; }
.mh-principle-tile h3 { font-size: 0.96rem; margin: 0 0 4px; }
.mh-principle-tile p { margin: 0; font-size: 0.88rem; color: var(--mh-ink-soft); }

/* ---------- Do / Avoid comparison (parents) ---------- */
.mh-doavoid-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 800px) { .mh-doavoid-grid { grid-template-columns: 1fr 1fr; } }
.mh-doavoid-col { border-radius: var(--mh-radius-lg); padding: 22px; }
.mh-doavoid-col.do { background: var(--mh-safe-soft); border: 1px solid rgba(46,125,91,0.22); }
.mh-doavoid-col.avoid { background: var(--mh-brand-soft); border: 1px solid rgba(224,123,39,0.22); }
.mh-doavoid-col h3 { font-size: 1rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.mh-doavoid-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mh-doavoid-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--mh-ink); }
.mh-doavoid-col li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.mh-doavoid-col.do li svg { color: var(--mh-safe); }
.mh-doavoid-col.avoid li svg { color: var(--mh-brand); }

/* ---------- Age tabs (parents) ---------- */
.mh-age-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.mh-age-tab { border: 1px solid var(--mh-border); background: var(--mh-surface); border-radius: 999px; padding: 9px 18px; font-size: 0.88rem; font-weight: 700; cursor: pointer; min-height: 40px; color: var(--mh-ink); }
.mh-age-tab[aria-selected="true"] { background: var(--mh-primary); color: #fff; border-color: var(--mh-primary); }
.mh-age-panel { display: none; }
.mh-age-panel.is-active { display: block; }

/* ---------- Expandable "Tình huống thường gặp" (parents) ---------- */
.mh-situation-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mh-situation {
  border: 1px solid var(--mh-border); border-radius: var(--mh-radius-md); background: var(--mh-surface); overflow: hidden;
}
.mh-situation summary {
  cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 0.94rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mh-situation summary::-webkit-details-marker { display: none; }
.mh-situation summary::after { content: '+'; font-size: 1.3rem; color: var(--mh-ink-soft); transition: transform 0.25s ease; flex-shrink: 0; }
.mh-situation[open] summary::after { transform: rotate(45deg); }
.mh-situation summary:hover { color: var(--mh-primary); }
.mh-situation-body { padding: 0 18px 18px; font-size: 0.92rem; color: var(--mh-ink-soft); }

/* ---------- Resource shelf: featured + filters + list (resources) ---------- */
.mh-resource-featured { display: grid; gap: 22px; border-radius: var(--mh-radius-lg); overflow: hidden; background: var(--mh-surface); border: 1px solid var(--mh-border); box-shadow: var(--mh-shadow-card); margin-bottom: 34px; }
@media (min-width: 900px) { .mh-resource-featured { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; } }
.mh-resource-featured-visual { background: var(--mh-primary-soft); display: flex; align-items: center; justify-content: center; padding: 30px; min-height: 220px; }
.mh-resource-featured-visual svg { width: 100%; max-width: 220px; height: auto; }
.mh-resource-featured-body { padding: 26px 28px 28px; align-self: center; }
.mh-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.mh-filter-chip { border: 1px solid var(--mh-border); background: var(--mh-surface); border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 38px; color: var(--mh-ink); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.mh-filter-chip[aria-pressed="true"] { background: var(--mh-primary); color: #fff; border-color: var(--mh-primary); }
.mh-resource-shelf-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .mh-resource-shelf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mh-resource-shelf-grid { grid-template-columns: repeat(3, 1fr); } }
.mh-shelf-card { border-radius: var(--mh-radius-lg); padding: 20px; background: var(--mh-surface); border: 1px solid var(--mh-border); transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; gap: 10px; }
.mh-shelf-card:hover { transform: translateY(-5px); box-shadow: var(--mh-shadow-card); }
.mh-shelf-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.mh-shelf-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; background: var(--mh-lab-soft); color: var(--mh-lab); }
.mh-shelf-tag.audience { background: var(--mh-teen-soft); color: var(--mh-teen); }
.mh-shelf-card h3 { font-size: 0.98rem; margin: 0; }
.mh-shelf-card p { margin: 0; font-size: 0.86rem; color: var(--mh-ink-soft); flex-grow: 1; }
.mh-shelf-badge-soon { align-self: flex-start; font-size: 0.72rem; font-weight: 700; color: var(--mh-ink-soft); background: var(--mh-bg); border: 1px dashed var(--mh-border); padding: 3px 10px; border-radius: 999px; }

/* ---------- Frameworks: evidence cards + disclosure ---------- */
.mh-evidence-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .mh-evidence-grid { grid-template-columns: repeat(2, 1fr); } }
.mh-evidence-card { border-radius: var(--mh-radius-lg); padding: 22px; background: var(--mh-surface); border: 1px solid var(--mh-border); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mh-evidence-card:hover { transform: translateY(-4px); box-shadow: var(--mh-shadow-card); }
.mh-evidence-card h3 { font-size: 1rem; margin: 0 0 4px; }
.mh-evidence-issuer { font-size: 0.8rem; font-weight: 700; color: var(--mh-primary); margin-bottom: 10px; display: block; }
.mh-evidence-card p { margin: 0 0 12px; font-size: 0.9rem; color: var(--mh-ink-soft); }
.mh-evidence-align { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mh-lab); background: var(--mh-lab-soft); padding: 3px 10px; border-radius: 999px; display: inline-block; margin-bottom: 12px; }
.mh-evidence-source { font-size: 0.86rem; font-weight: 600; }
.mh-disclosure-banner { border-radius: var(--mh-radius-md); padding: 16px 20px; background: var(--mh-bg); border: 1px dashed var(--mh-border); font-size: 0.88rem; color: var(--mh-ink-soft); margin-top: 26px; }

/* ---------- About: editorial narrative rhythm ---------- */
.mh-editorial-block { max-width: 720px; margin: 0 auto 46px; }
.mh-editorial-block:last-child { margin-bottom: 0; }
.mh-editorial-block h2 { margin-bottom: 12px; }
.mh-editorial-block p { font-size: 1.02rem; line-height: 1.7; color: var(--mh-ink-soft); }
.mh-editorial-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mh-primary-soft); color: var(--mh-primary); font-weight: 800; font-size: 0.86rem; margin-bottom: 12px; }
.mh-principle-pair { display: grid; gap: 18px; margin-top: 10px; }
@media (min-width: 700px) { .mh-principle-pair { grid-template-columns: 1fr 1fr; } }
.mh-principle-pair-card { border-radius: var(--mh-radius-lg); padding: 22px; border: 1px solid var(--mh-border); background: var(--mh-surface); }
.mh-principle-pair-card h3 { font-size: 0.98rem; margin: 0 0 8px; }
.mh-principle-pair-card p { margin: 0; font-size: 0.9rem; color: var(--mh-ink-soft); }

/* ---------- Homepage: asymmetric trust bridge (safety+parent teaser) ---------- */
.mh-trust-split { display: grid; gap: 0; border-radius: var(--mh-radius-lg); overflow: hidden; }
@media (min-width: 900px) { .mh-trust-split { grid-template-columns: 1.15fr 0.85fr; } }
.mh-trust-split-main { background: var(--mh-bg-deep); color: #fff; padding: 34px 32px; }
.mh-trust-split-main .mh-eyebrow { color: #8FD9CC; }
.mh-trust-split-main h2 { color: #fff; }
.mh-trust-split-main p { color: rgba(255,255,255,0.8); }
.mh-trust-split-side { background: var(--mh-kids-soft); padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; }

/* ---------- Homepage: Kids/Teen pathway hover refinement ---------- */
.mh-pathway-card.kids:hover .mh-pathway-thumb, .mh-pathway-card.kids:focus-visible .mh-pathway-thumb { box-shadow: 0 0 0 3px rgba(224,123,39,0.35); }
.mh-pathway-card.teen:hover .mh-pathway-thumb, .mh-pathway-card.teen:focus-visible .mh-pathway-thumb { box-shadow: 0 0 0 3px rgba(76,62,134,0.4); }
.mh-pathway-thumb { transition: box-shadow 0.25s ease; }

/* ---------- Homepage: featured resource + article split ---------- */
.mh-featured-split { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .mh-featured-split { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .mh-principle-tile:hover, .mh-shelf-card:hover, .mh-evidence-card:hover { transform: none; }
}

/* ---------- Kids imagery (20–30% Kids / 70–80% Teen balance) ----------
   Kids illustrations are 4:3 with the title baked into the top-left, so they keep
   their own ratio in the Explorer panel and anchor to the top when cropped in cards. */
.mh-explorer-visual img[src*="/master-kids/"] { aspect-ratio: 4/3; object-fit: cover; }
.mh-card img[src*="/master-kids/"], .mh-topic-card img[src*="/master-kids/"] { object-position: center top; }
.mh-hero-bg-layer[data-theme-bg="2"] { background-position: 70% center; }

/* ---------- Homepage: parent card (solo) + closing "An toàn AI" section ---------- */
.mh-trust-split--solo { grid-template-columns: 1fr !important; }
.mh-trust-split--solo .mh-trust-split-side { padding: 30px 32px; }
@media (min-width: 900px) {
  .mh-trust-split--solo .mh-trust-split-side { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 32px; }
  .mh-trust-split--solo .mh-trust-split-side .mh-eyebrow, .mh-trust-split--solo .mh-trust-split-side h2, .mh-trust-split--solo .mh-trust-split-side p { grid-column: 1; }
  .mh-trust-split--solo .mh-trust-split-side .mh-btn { grid-column: 2; grid-row: 1 / span 3; margin-top: 0 !important; }
}
.mh-safety-home { background: linear-gradient(180deg, var(--mh-safe-soft), #fff 85%); border-top: 1px solid var(--mh-border); }
.mh-safety-home-grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 960px) { .mh-safety-home-grid { grid-template-columns: 0.95fr 1.05fr; gap: 52px; } }
.mh-safety-home-visual img { width: 100%; display: block; border-radius: var(--mh-radius-lg); box-shadow: var(--mh-shadow-soft); }
.mh-safety-home .mh-eyebrow { color: var(--mh-safe); }
.mh-safety-home-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .mh-safety-home-list { grid-template-columns: 1fr 1fr; } }
.mh-safety-home-list li { position: relative; padding: 12px 14px 12px 42px; background: #fff; border: 1px solid var(--mh-border); border-radius: var(--mh-radius-md); }
.mh-safety-home-list li::before { content: ''; position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--mh-safe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.mh-safety-home-list strong { display: block; font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.95rem; color: var(--mh-ink); }
.mh-safety-home-list span { display: block; font-size: 0.86rem; color: var(--mh-ink-soft); margin-top: 2px; line-height: 1.45; }

/* ---------- Học AI: learning structure — Kids + Teen tracks ---------- */
.mh-track { border-radius: var(--mh-radius-lg); padding: 22px 18px; margin-top: 22px; border: 1px solid var(--mh-border); }
@media (min-width: 900px) { .mh-track { padding: 28px 28px 30px; } }
.mh-track--kids { background: linear-gradient(160deg, var(--mh-kids-soft), #fff 70%); }
.mh-track--teen { background: linear-gradient(160deg, var(--mh-teen-soft), #fff 70%); }
.mh-track-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: 18px; }
.mh-track-badge { display: inline-block; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; padding: 6px 12px; border-radius: 999px; margin-bottom: 10px; }
.mh-track--kids .mh-track-badge { background: var(--mh-kids); }
.mh-track--teen .mh-track-badge { background: var(--mh-teen); }
.mh-track-title { font-size: clamp(1.08rem, 1.8vw, 1.3rem); max-width: 34ch; line-height: 1.3; }
.mh-track-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mh-track .mh-stat-chip { background: #fff; border: 1px solid var(--mh-border); padding: 10px 16px; }
.mh-track--kids .mh-stat-chip strong { color: var(--mh-kids); }
.mh-track--teen .mh-stat-chip strong { color: var(--mh-teen); }
.mh-track-cta { white-space: nowrap; }
.mh-track .mh-world-grid { margin-top: 0; }
.mh-world-kicker { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mh-ink-soft); margin: 2px 0 4px; }
.mh-track--kids .mh-world-card:hover { border-color: var(--mh-kids); box-shadow: 0 20px 38px rgba(224,123,39,0.2); }
.mh-track--teen .mh-world-card:hover { border-color: var(--mh-teen); box-shadow: 0 20px 38px rgba(76,62,134,0.2); }
.mh-track--kids .mh-world-lessons { color: var(--mh-kids); }
.mh-track--teen .mh-world-lessons { color: var(--mh-teen); }

/* ---------- Học AI: Learning Compass on the night-sky background ---------- */
.mh-compass-section .mh-compass {
  background: #0E0F2E url('/master-hub-preview/assets/motion/compass-bg-v02.webp') center bottom / cover no-repeat;
  color: #fff; padding: 44px 22px 36px; border-radius: 28px; box-shadow: 0 30px 70px rgba(14,15,46,0.35); isolation: isolate;
}
@media (max-width: 899px) { .mh-compass-section .mh-compass { background-image: url('/master-hub-preview/assets/motion/compass-bg-v02-mobile.webp'); background-position: 20% bottom; } }
@media (min-width: 900px) { .mh-compass-section .mh-compass { padding: 56px 48px 44px; } }
.mh-compass-section .mh-compass::before { background: radial-gradient(700px 320px at 50% 0%, rgba(10,11,40,0.55), transparent 70%); opacity: 1; }
.mh-compass-intro { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.mh-compass-intro .mh-eyebrow { color: #F6C08E; }
.mh-compass-intro .mh-eyebrow::before { background: linear-gradient(90deg, #8B7CF6, #F5C451); }
.mh-compass-intro h2.mh-h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.mh-compass-intro p { margin: 12px 0 0; color: rgba(255,255,255,0.8); font-size: 1.02rem; line-height: 1.65; }

.mh-compass-groups { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 26px; perspective: 900px; }
@media (min-width: 820px) { .mh-compass-groups { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.mh-compass-group {
  --g: #8B7CF6; --g2: #5B9BF0;
  position: relative; overflow: hidden; text-align: left; cursor: pointer; color: #fff; font: inherit;
  display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px; min-height: 230px;
  border-radius: 22px; border: 1.5px solid rgba(255,255,255,0.16);
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .45s ease, opacity .35s ease, background .35s ease;
}
.mh-compass-group--kids { --g: #F5A742; --g2: #F5C451; }
.mh-compass-group--teen { --g: #9D8BF2; --g2: #5B9BF0; }
.mh-compass-group--parent { --g: #2EC4A6; --g2: #7FE0C8; }
/* moving shine sweep */
.mh-compass-group::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent); transform: skewX(-18deg);
  transition: left .8s ease;
}
.mh-compass-group-glow {
  position: absolute; right: -30%; bottom: -60%; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, var(--g), transparent 65%); opacity: 0.22; filter: blur(10px);
  transition: opacity .45s ease, transform .6s ease;
}
.mh-compass-group-icon {
  width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
  color: #0E0F2E; background: linear-gradient(135deg, var(--g), var(--g2)); box-shadow: 0 10px 26px -6px var(--g);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.mh-compass-group-icon svg { width: 28px; height: 28px; }
.mh-compass-group-tag { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g); }
.mh-compass-group-title { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.2; }
.mh-compass-group-desc { font-size: 0.93rem; line-height: 1.55; color: rgba(255,255,255,0.78); }
.mh-compass-group-cta { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 0.9rem; color: var(--g); opacity: 0.75; transition: opacity .3s ease, letter-spacing .3s ease; }
.mh-compass-group-cta span { display: inline-block; transition: transform .35s ease; }
.mh-compass-group-check {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #0E0F2E; background: var(--g); transform: scale(0); transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
/* hover / focus: lift, tilt, glow, shine, siblings dim */
@media (hover: hover) {
  .mh-compass-groups:hover .mh-compass-group:not(:hover):not([aria-pressed="true"]) { opacity: 0.55; transform: scale(0.97); }
}
.mh-compass-group:hover, .mh-compass-group:focus-visible {
  transform: translateY(-12px) rotateX(4deg) scale(1.03); border-color: var(--g);
  background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
  box-shadow: 0 26px 60px -12px var(--g), 0 0 0 1px var(--g) inset; outline: none;
}
.mh-compass-group:hover::after, .mh-compass-group:focus-visible::after { left: 130%; }
.mh-compass-group:hover .mh-compass-group-glow, .mh-compass-group:focus-visible .mh-compass-group-glow { opacity: 0.6; transform: scale(1.35); }
.mh-compass-group:hover .mh-compass-group-icon, .mh-compass-group:focus-visible .mh-compass-group-icon { transform: scale(1.15) rotate(-8deg); }
.mh-compass-group:hover .mh-compass-group-cta, .mh-compass-group:focus-visible .mh-compass-group-cta { opacity: 1; letter-spacing: 0.02em; }
.mh-compass-group:hover .mh-compass-group-cta span, .mh-compass-group:focus-visible .mh-compass-group-cta span { transform: translateX(6px); }
/* selected */
.mh-compass-group[aria-pressed="true"] {
  border-color: var(--g); background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  box-shadow: 0 0 0 2px var(--g), 0 22px 50px -14px var(--g); transform: translateY(-6px);
}
.mh-compass-group[aria-pressed="true"] .mh-compass-group-check { transform: scale(1); }
.mh-compass-group[aria-pressed="true"] .mh-compass-group-cta { opacity: 1; }
.mh-compass-group[aria-pressed="true"] .mh-compass-group-glow { opacity: 0.55; }

/* steps 2–4 + result as glass on dark */
.mh-compass-section .mh-compass-row-label { color: #fff; font-family: 'Be Vietnam Pro', sans-serif; }
.mh-compass-section .mh-compass-option {
  background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.22);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.mh-compass-section .mh-compass-option:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); transform: translateY(-2px); }
.mh-compass-section .mh-compass-option[aria-pressed="true"] { background: linear-gradient(135deg, #9D8BF2, #F5A742); border-color: transparent; color: #0E0F2E; }
.mh-compass-section .mh-compass-step-2.is-visible { max-height: 320px; }
.mh-compass-section .mh-compass-result { background: rgba(255,255,255,0.95); color: var(--mh-ink); border: 0; box-shadow: 0 18px 40px rgba(0,0,0,0.25); }
@media (prefers-reduced-motion: reduce) {
  .mh-compass-group, .mh-compass-group::after, .mh-compass-group-icon, .mh-compass-group-glow { transition: none; }
  .mh-compass-group:hover, .mh-compass-group:focus-visible { transform: none; }
}

/* ---------- Learning Compass: steps 2–4 themed by the chosen group ---------- */
.mh-compass { --q: #9D8BF2; --q2: #F5A742; }
.mh-compass[data-group="7-10"] { --q: #F5A742; --q2: #F5C451; }
.mh-compass[data-group="11-15"] { --q: #9D8BF2; --q2: #5B9BF0; }
.mh-compass[data-group="parent"] { --q: #2EC4A6; --q2: #7FE0C8; }
.mh-compass-group-intro {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 9px 16px; border-radius: 999px;
  font-size: 0.92rem; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid var(--q);
}
.mh-compass-group-intro::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--q); box-shadow: 0 0 10px var(--q); }
.mh-compass-group-intro[hidden] { display: none; }
.mh-compass-section .mh-compass-row-label { display: flex; align-items: center; gap: 10px; }
.mh-compass-section .mh-compass-row-label::before { content: ''; width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, var(--q), var(--q2)); }
.mh-compass-section .mh-compass-option:hover { border-color: var(--q); box-shadow: 0 6px 18px -6px var(--q); }
.mh-compass-section .mh-compass-option[aria-pressed="true"] { background: linear-gradient(135deg, var(--q), var(--q2)); box-shadow: 0 8px 22px -8px var(--q); }
/* when the group changes, the question block re-enters */
@keyframes mh-compass-q-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mh-compass.is-switching .mh-compass-group-intro,
.mh-compass.is-switching .mh-compass-step-2.is-visible { animation: mh-compass-q-in .5s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .mh-compass.is-switching .mh-compass-group-intro, .mh-compass.is-switching .mh-compass-step-2.is-visible { animation: none; }
}

/* ---------- Homepage: "Khung năng lực" highlight strip under the hero (running glow border) ---------- */
@property --mh-kn-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.mh-kn-strip-wrap { position: relative; z-index: 2; margin-top: -26px; padding-bottom: 8px; }
.mh-kn-strip {
  --mh-kn-angle: 0deg;
  position: relative; display: block; padding: 2px; border-radius: 18px; text-decoration: none; color: var(--mh-ink);
  background: conic-gradient(from var(--mh-kn-angle), #F28C3A, #F5C451, #2EC4C4, #5B9BF0, #9D8BF2, #F28C3A);
  box-shadow: 0 18px 40px -18px rgba(76,62,134,0.55);
  animation: mh-kn-spin 4.5s linear infinite;
  transition: transform .3s ease, box-shadow .3s ease;
}
.mh-kn-strip::before { /* soft outer glow following the border */
  content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 22px; filter: blur(14px); opacity: .45;
  background: inherit;
}
@keyframes mh-kn-spin { to { --mh-kn-angle: 360deg; } }
.mh-kn-strip:hover, .mh-kn-strip:focus-visible { transform: translateY(-3px); box-shadow: 0 26px 50px -18px rgba(76,62,134,0.7); outline: none; }
.mh-kn-strip:hover::before { opacity: .7; }
.mh-kn-strip-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 20px; border-radius: 16px; background: var(--mh-surface);
}
.mh-kn-strip-badge {
  flex-shrink: 0; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #4C3E86, #16345C);
}
.mh-kn-strip-text { flex: 1 1 420px; font-size: 1rem; line-height: 1.55; color: var(--mh-ink-soft); }
.mh-kn-strip-text strong { color: var(--mh-ink); }
.mh-kn-strip-cta {
  flex-shrink: 0; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 0.95rem; color: #fff; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px; background: linear-gradient(135deg, #E07B27, #C9691C); box-shadow: 0 8px 20px -8px rgba(224,123,39,0.7);
}
.mh-kn-strip-cta span { display: inline-block; transition: transform .3s ease; }
.mh-kn-strip:hover .mh-kn-strip-cta span { transform: translateX(5px); }
@media (max-width: 640px) {
  .mh-kn-strip-wrap { margin-top: -18px; }
  .mh-kn-strip-inner { padding: 14px 16px; }
  .mh-kn-strip-text { flex-basis: 100%; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .mh-kn-strip { animation: none; } }

/* ---------- Hero: +20% height, less top-cropping (Founder request 24/09/2026) ----------
   Was ~435px desktop / 560px tablet / 611px mobile. The Teen art is 16:9, so a short hero
   cropped it hard from the centre and cut the characters' heads; anchor it higher instead. */
.mh-hero { display: flex; align-items: center; }
.mh-hero > .mh-container { width: 100%; }
@media (min-width: 1024px) {
  .mh-hero { min-height: clamp(522px, 36.25vw, 700px); padding: 48px 0 64px; }
  .mh-hero-grid { align-items: end; }
  .mh-hero-bg-layer[data-theme-bg="0"], .mh-hero-bg-layer[data-theme-bg="1"] { background-position: 65% 22%; }
  .mh-hero-bg-layer[data-theme-bg="2"] { background-position: 70% 30%; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .mh-hero { min-height: 672px; align-items: flex-start; padding-top: 48px; }
}
@media (max-width: 599px) {
  .mh-hero { min-height: 733px; align-items: flex-start; padding-top: 44px; }
  .mh-hero-bg-layer[data-theme-bg="0"], .mh-hero-bg-layer[data-theme-bg="1"] { background-position: 72% 20%; }
}
@media (max-width: 1023px) {
  /* keep text readable at the top, let the artwork show through at the bottom */
  .mh-hero::after { background: linear-gradient(180deg, rgba(10,11,18,0.9) 0%, rgba(10,11,18,0.82) 48%, rgba(10,11,18,0.45) 78%, rgba(10,11,18,0.25) 100%); }
}

/* ---------- Hero v3 (Founder 24/09/2026): CTA row + caption down 40% of the empty band,
   "Khung năng lực" strip up 40% of it, right 2/3 of the artwork brighter/clearer ----------
   Empty band = strip top − CTA bottom. On desktop the hero height is H = clamp(522px, 36.25vw, 700px)
   and the band ≈ (H − 443px)/2 + 38px, so 40% of it = 0.2·H − 73px (31px @1440, 66px @1920).
   `translate` (not `transform`) so it never fights the hero entrance animation. */
@media (min-width: 1024px) {
  .mh-hero-ctas, .mh-hero-media { translate: 0 calc(clamp(522px, 36.25vw, 700px) * 0.2 - 73px); }
  .mh-kn-strip-wrap { margin-top: calc(47px - clamp(522px, 36.25vw, 700px) * 0.2); }

  /* brighter right side: darkness now fades out by ~60% of the width instead of never */
  .mh-hero::after {
    background: linear-gradient(100deg, rgba(10,11,18,0.9) 0%, rgba(10,11,18,0.78) 30%, rgba(10,11,18,0.35) 42%, rgba(10,11,18,0.08) 52%, rgba(10,11,18,0) 60%);
  }
  .mh-hero-bg-layer { filter: brightness(1.08) saturate(1.06) contrast(1.03); }
  .mh-hero-bg-layer[data-theme-bg="0"] { background-image: linear-gradient(100deg, rgba(10,11,18,0.35) 0%, rgba(10,11,18,0) 40%), url('/master-hub-preview/assets/hero/hero-state-1-hieu-ai-v02.png'); }
  .mh-hero-bg-layer[data-theme-bg="1"] { background-image: linear-gradient(100deg, rgba(10,11,18,0.35) 0%, rgba(10,11,18,0) 40%), url('/master-hub-preview/assets/hero/hero-state-2-kiem-chung-v02.png'); }
  .mh-hero-bg-layer[data-theme-bg="2"] { background-image: linear-gradient(100deg, rgba(10,11,18,0.35) 0%, rgba(10,11,18,0) 40%), url('/images/master-kids/hero-hoc-tao-kids.webp'); }
  /* keep the headline crisp where it runs over the now-brighter art */
  .mh-hero h1, .mh-hero-support { text-shadow: 0 2px 18px rgba(10,11,18,0.55), 0 1px 3px rgba(10,11,18,0.5); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .mh-hero-ctas, .mh-hero-media { translate: 0 54px; }
  .mh-kn-strip-wrap { margin-top: -80px; }
}
@media (max-width: 599px) {
  .mh-hero-ctas, .mh-hero-media { translate: 0 62px; }
  .mh-kn-strip-wrap { margin-top: -80px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { /* headline wraps more here: band is ~56px, not ~74px */
  .mh-hero-ctas, .mh-hero-media { translate: 0 22px; }
  .mh-kn-strip-wrap { margin-top: -48px; }
}
@media (min-width: 1024px) { /* caption now sits on brighter art: darker glass keeps the white text legible */
  .mh-hero-media { background: rgba(10,11,18,0.62); border-color: rgba(255,255,255,0.22); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.6); }
}

/* ---------- Khối "Chọn chương trình cho con" (Kids / Teen → bảng giá) — trang tài nguyên + Khung năng lực ---------- */
.mh-buy { margin: 28px 0; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--mh-border); box-shadow: var(--mh-shadow-card); }
.mh-buy-kicker { display: block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mh-ink-soft); margin-bottom: 4px; }
.mh-buy-title { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1.3; margin: 0 0 14px; color: var(--mh-ink); }
.mh-buy-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .mh-buy-grid { grid-template-columns: 1fr 1fr; } }
.mh-buy-opt { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; text-decoration: none; color: var(--mh-ink); border: 1.5px solid transparent; transition: transform .15s, border-color .15s; }
.mh-buy-opt:hover { transform: translateY(-2px); }
.mh-buy-opt--kids { background: var(--mh-kids-soft); } .mh-buy-opt--kids:hover { border-color: var(--mh-kids); }
.mh-buy-opt--teen { background: var(--mh-teen-soft); } .mh-buy-opt--teen:hover { border-color: var(--mh-teen); }
.mh-buy-opt strong { font-family: 'Be Vietnam Pro', sans-serif; font-size: 1.08rem; }
.mh-buy-opt span { font-size: 0.93rem; line-height: 1.5; color: var(--mh-ink-soft); }
.mh-buy-opt em { font-style: normal; margin-top: 4px; font-weight: 800; font-size: 0.95rem; }
.mh-buy-opt--kids em { color: var(--mh-kids); } .mh-buy-opt--teen em { color: var(--mh-teen); }
.mh-buy-foot { margin: 12px 0 0; font-size: 0.9rem; color: var(--mh-ink-soft); }
.mh-buy-foot a { color: var(--mh-primary); font-weight: 700; }
.mh-parent-note { margin: 18px 0 0; text-align: center; font-size: 0.9rem; color: var(--mh-ink-soft); }
.mh-parent-note a { color: var(--mh-primary); font-weight: 700; }
.mh-container > .mh-buy { max-width: 880px; margin-left: auto; margin-right: auto; }