/* ===== Happy Women — bảng màu =====
   Màu chủ đạo: Tím – Hồng – Trắng (lấy từ logo).
   Tông pastel theo nhóm chương trình:
   xanh lá = khóa cho con · vàng-nâu = khóa bố mẹ · cam-đỏ = khóa phụ nữ
   xanh dương = khóa miễn phí · tím = kiến thức tâm lý học */
:root{
  color-scheme: light;
  --plum:#5b2a6e;        /* tím logo */
  --plum-deep:#3f1b4d;
  --rose:#c2568c;        /* hồng logo */
  --rose-soft:#f8e6ef;
  --lilac:#f3edf8;
  --ivory:#fffcfa;
  --white:#ffffff;
  --ink:#2f2433;
  --muted:#6e6274;
  --line:#ebe0ee;

  --con-bg:#e7f4ea;   --con-ink:#2f6b45;
  --bome-bg:#f6eedd;  --bome-ink:#7a5a2b;
  --pn-bg:#fce7e0;    --pn-ink:#a8442f;
  --free-bg:#e4eefa;  --free-ink:#2d5b8c;
  --tl-bg:#eee7f7;    --tl-ink:#5b3b86;

  --radius:18px;
  --shadow:0 10px 30px rgba(91,42,110,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--plum)}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;color:var(--plum-deep)}
h2{font-size:clamp(1.6rem,4.5vw,2.3rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
.script{font-family:"Dancing Script",cursive;font-weight:700;color:var(--rose)}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.section{padding:72px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 40px}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);margin-bottom:10px}
.lead{color:var(--muted);font-size:1.05rem}
/* Từ khóa nhấn: chỉ đổi màu + in đậm, không tô nền */
.hl{color:var(--rose);font-weight:700}

/* ===== Nút ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid transparent;transition:transform .15s, box-shadow .15s, background .15s;
  min-height:48px;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--plum),var(--rose));color:#fff;box-shadow:0 8px 22px rgba(194,86,140,.35)}
.btn-ghost{background:#fff;color:var(--plum);border-color:var(--plum)}
.btn-sm{padding:9px 18px;min-height:40px;font-size:.92rem}
.btn .zalo-dot{width:22px;height:22px;border-radius:50%;background:#fff;color:#0068ff;font-size:.62rem;font-weight:800;display:inline-grid;place-items:center;letter-spacing:-.02em}

/* ===== Thanh trên ===== */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,252,250,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.brand img{height:70px;width:auto}
.nav{display:flex;gap:26px}
.nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--rose)}
@media (max-width:860px){.nav{display:none}}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 500px at 85% 10%,var(--rose-soft),transparent 60%),
  radial-gradient(700px 500px at 5% 90%,var(--lilac),transparent 60%),var(--ivory)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:72px}
.hero h1{font-size:clamp(2.6rem,8vw,4.4rem);font-weight:800;margin-bottom:.15em;letter-spacing:-.01em}
.hero h1 .script{font-size:1.1em}
.hero .tagline{font-size:clamp(1.15rem,3.5vw,1.5rem);font-weight:700;color:var(--plum);margin-bottom:18px}
.hero .tagline span{color:var(--rose)}
.hero p.lead{font-size:1.1rem;max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-photo{position:relative}
.hero-photo img{border-radius:28px;box-shadow:var(--shadow);aspect-ratio:1/1;object-fit:cover;object-position:62% center;width:100%}
.hero-photo .badge{position:absolute;left:-14px;bottom:24px;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);font-size:.9rem;line-height:1.4}
.hero-photo .badge b{display:block;color:var(--plum);font-size:1.25rem}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:32px;padding-top:40px}
  .hero-photo{max-width:420px;margin:0 auto}
  .hero-photo .badge{left:12px}
}

/* ===== Nỗi trăn trở ===== */
.pain{background:#fff}
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pain-col{border-radius:var(--radius);padding:28px;border:1px solid var(--line)}
.pain-col.me{background:var(--rose-soft)}
.pain-col.home{background:var(--lilac)}
.pain-col h3{display:flex;align-items:center;gap:10px}
.pain-col ul{margin:0;padding:0;list-style:none}
.pain-col li{position:relative;padding-left:28px;margin-bottom:12px}
.pain-col li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--rose)}
.pain-col.home li::before{background:var(--plum)}
.pain-quote{max-width:760px;margin:40px auto 0;text-align:center;font-size:1.2rem;font-weight:600;color:var(--plum)}
@media (max-width:760px){.pain-grid{grid-template-columns:1fr}}

/* ===== Happy Women là gì ===== */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
.value{background:#fff;border-radius:var(--radius);padding:28px 24px;text-align:center;box-shadow:var(--shadow);border-top:5px solid var(--rose)}
.value:nth-child(2){border-top-color:var(--plum)}
.value .script{font-size:2.2rem;display:block;line-height:1.1;margin-bottom:8px}
.value p{color:var(--muted);margin:0}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pillar{background:var(--lilac);border-radius:var(--radius);padding:26px}
.pillar ul{margin:0;padding-left:20px}
.topics{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.topic{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-weight:600;color:var(--plum)}
@media (max-width:760px){.values,.pillars{grid-template-columns:1fr}}

/* ===== Hành trình ===== */
.journey{background:linear-gradient(180deg,#fff,var(--rose-soft))}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{background:#fff;border-radius:var(--radius);padding:30px 24px;box-shadow:var(--shadow);position:relative}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--plum),var(--rose));color:#fff;font-weight:800;margin-bottom:14px}
.step p{color:var(--muted);margin:0}
.journey-quote{text-align:center;margin-top:40px;font-size:clamp(1.5rem,4.5vw,2.1rem)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* ===== Chương trình ===== */
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px}
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 14px;font-size:.88rem;font-weight:700}
.chip::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.t-con{background:var(--con-bg);color:var(--con-ink)}
.t-bome{background:var(--bome-bg);color:var(--bome-ink)}
.t-pn{background:var(--pn-bg);color:var(--pn-ink)}
.t-free{background:var(--free-bg);color:var(--free-ink)}
.t-tl{background:var(--tl-bg);color:var(--tl-ink)}
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.course{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;border:1px solid var(--line)}
.course-top{padding:22px 24px 18px}
.course-top .chip{margin-bottom:14px}
.course-top h3{font-size:1.3rem;margin-bottom:4px;color:inherit}
.course-top .sub{font-size:.95rem;font-weight:600;opacity:.85;margin:0}
.course-body{padding:18px 24px 24px;display:flex;flex-direction:column;flex:1}
.course-body .who{font-size:.92rem;color:var(--muted);margin-bottom:10px}
.course-body ul{margin:0 0 18px;padding-left:20px;font-size:.96rem}
.course-body li{margin-bottom:6px}
.course-body .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.soon{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);border:1.5px dashed var(--rose);border-radius:999px;padding:4px 12px}
.course .btn-sm{background:var(--plum);color:#fff}
/* Thẻ cuối trải hết 1 hàng, chia 2 cột bên trong */
.course-wide{grid-column:1/-1;flex-direction:row}
.course-wide .course-top{flex:0 0 38%;display:flex;flex-direction:column;justify-content:center}
.course-wide .course-body ul{margin-bottom:14px}
.course-wide .foot{justify-content:flex-start}
@media (max-width:980px){.courses{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.course-wide{flex-direction:column}}
@media (max-width:640px){.courses{grid-template-columns:1fr}}

/* ===== Người sáng lập ===== */
.founder{background:#fff}
.founder-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.founder-photo img{border-radius:28px;box-shadow:var(--shadow);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.founder h2 .script{font-size:1.2em}
.role{font-weight:700;color:var(--rose);margin-bottom:18px}
.facts{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.facts li{display:flex;gap:12px;align-items:flex-start}
.facts li::before{content:"✦";color:var(--rose);flex:none;line-height:1.7}
.founder blockquote{margin:0;padding:20px 24px;background:var(--rose-soft);border-left:4px solid var(--rose);border-radius:0 14px 14px 0;font-style:italic;color:var(--plum-deep)}
@media (max-width:860px){.founder-grid{grid-template-columns:1fr;gap:28px}.founder-photo{max-width:380px;margin:0 auto}}

/* ===== Dấu ấn 2019 ===== */
.legacy{background:var(--con-bg)}
.legacy .eyebrow{color:var(--con-ink)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.gallery figure{margin:0}
.gallery .wide{grid-column:span 2}
.gallery .wide img{aspect-ratio:auto;height:100%}
@media (max-width:640px){.gallery{grid-template-columns:1fr 1fr}.gallery .wide{grid-column:span 2}.gallery figure:last-child{display:none}}

/* ===== Hỏi đáp ===== */
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 22px}
.faq-list summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font-weight:700;color:var(--plum-deep);position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--rose);font-weight:400}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{color:var(--muted);padding-bottom:6px}

/* ===== Lời mời cuối ===== */
.cta{background:linear-gradient(135deg,var(--plum-deep),var(--plum) 55%,var(--rose));color:#fff}
.cta .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.9)}
.cta .btn-primary{background:#fff;color:var(--plum)}
.qr{background:#fff;border-radius:22px;padding:18px;text-align:center;color:var(--ink);max-width:280px;justify-self:center}
.qr img{border-radius:10px;margin:0 auto 10px}
.qr small{color:var(--muted);font-size:.85rem}
@media (max-width:760px){.cta .wrap{grid-template-columns:1fr;text-align:center}.cta .hero-ctas{justify-content:center}}

/* ===== Chân trang ===== */
.footer{background:var(--plum-deep);color:rgba(255,255,255,.8);padding:40px 0 110px;font-size:.92rem}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.footer a{color:#fff}
.footer .logo-box{background:#fff;border-radius:16px;padding:8px 14px;display:inline-block;margin-bottom:12px}
.footer .logo-box img{height:56px}
.footer .note{flex-basis:100%;border-top:1px solid rgba(255,255,255,.15);padding-top:18px;font-size:.84rem;color:rgba(255,255,255,.65)}
@media (min-width:861px){.footer{padding-bottom:40px}}

/* ===== Nút Zalo nổi trên điện thoại ===== */
.mobile-cta{position:fixed;left:16px;right:16px;bottom:14px;z-index:60;display:none}
.mobile-cta .btn{width:100%}
@media (max-width:860px){.mobile-cta{display:block}}

/* ===== Hiện dần khi cuộn (chỉ khi có mã chạy) ===== */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Ẩn huy hiệu "Powered by Netlify" mà Netlify tự chèn vào trang */
#nl-badge-frame,#nl-hud-frame{display:none!important}