/* Vì sao thế nhỉ? — clean white storybook theme.
   Family colours: yellow = Mẹ, blue = Bố, green = con trai, pink = con gái. */
:root{
  --yellow:#F2B705; --yellow-soft:#FFF6D6; --yellow-ink:#9A6B00;
  --blue:#3B8BD9;   --blue-soft:#E8F2FC;   --blue-ink:#1F5E9E;
  --green:#46AD5F;  --green-soft:#E7F6EA;  --green-ink:#2A7A3E;
  --pink:#EC6FA6;   --pink-soft:#FDEBF3;   --pink-ink:#B23A72;
  --paper:#FFFFFF; --wash:#FBFAF6;
  --ink:#24304A; --ink-2:#56607A; --line:#E7E4DC;
  --display:"Baloo 2",system-ui,sans-serif; --body:"Be Vietnam Pro",system-ui,sans-serif;
  --r:16px; --wrap:1160px;
  --t-sm:clamp(.88rem,.85rem + .15vw,.95rem); --t-base:clamp(1rem,.97rem + .2vw,1.08rem);
  --t-lg:clamp(1.15rem,1.08rem + .4vw,1.35rem); --t-xl:clamp(1.5rem,1.25rem + 1.1vw,2.1rem);
  --t-2xl:clamp(2.2rem,1.7rem + 2.6vw,3.7rem);
  --ease:cubic-bezier(.22,1,.36,1);
  /* aliases used by older templates */
  --sun:var(--yellow); --sun-soft:var(--yellow-soft); --leaf:var(--green); --leaf-soft:var(--green-soft);
  --sky:var(--blue); --sky-soft:var(--blue-soft); --border:var(--line); --ink-muted:var(--ink-2);
  --violet:var(--blue-ink); --violet-deep:var(--ink); --surface:var(--wash); --bg:var(--paper);
  --text-sm:var(--t-sm); --text-base:var(--t-base); --text-lg:var(--t-lg); --text-xl:var(--t-xl); --text-2xl:var(--t-2xl);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;
  --radius:var(--r); --dur-fast:120ms; --dur:220ms; --ease-out:var(--ease); --on-dark:#fff;
}
*,*::before,*::after{box-sizing:border-box} *{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--paper);color:var(--ink);font:400 var(--t-base)/1.65 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
p{max-width:66ch;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--yellow);padding:.5rem 1rem;z-index:99}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* thin family stripe */
.family-bar{height:4px;background:linear-gradient(90deg,var(--yellow) 0 25%,var(--blue) 0 50%,var(--green) 0 75%,var(--pink) 0)}
.pv-bar{background:var(--pink);color:#fff;text-align:center;padding:.45rem 1rem;font-weight:600;font-size:var(--t-sm)}
.pv-bar a{color:#fff;margin-left:.5rem}

/* header: logo · search · menu */
.nav{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:1rem;min-height:68px}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.4rem;white-space:nowrap;color:var(--ink)}
.logo img{width:44px;height:44px;transition:transform var(--dur) var(--ease)}
.logo:hover img{transform:rotate(-8deg) scale(1.05)}
/* crayon wordmark: colour + waxy paper grain clipped to the letters */
.crayon{display:inline-flex;gap:.28em;font-weight:800;letter-spacing:.01em}
.crayon>span{display:inline-block;color:var(--cc);background:url("../img/crayon-grain.svg") 0 0/80px 80px,var(--cc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(.5px .5px 0 rgba(0,0,0,.06))}
.crayon .w0{--cc:#E0A100;transform:rotate(-3deg) translateY(1px)}
.crayon .w1{--cc:#2F7FD0;transform:rotate(2deg)}
.crayon .w2{--cc:#3FA257;transform:rotate(-2deg) translateY(1px)}
.crayon .w3{--cc:#E2609C;transform:rotate(3deg)}
.crayon .w1{background-position:23px 11px,0 0}.crayon .w2{background-position:47px 31px,0 0}.crayon .w3{background-position:9px 53px,0 0}
.sx{position:relative;flex:1;max-width:440px;margin-left:auto}
.sx input{width:100%;font:inherit;font-size:var(--t-sm);padding:.62rem 1rem .62rem 2.6rem;border-radius:999px;border:1.5px solid var(--line);background:var(--wash);color:var(--ink);transition:border-color var(--dur),background var(--dur)}
.sx input::placeholder{color:#8b93a7}
.sx input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px var(--blue-soft)}
.sx svg{position:absolute;left:.9rem;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.sx-list{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1.5px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(36,48,74,.12);padding:.35rem;list-style:none;z-index:40}
.sx-list a{display:flex;gap:.6rem;align-items:center;padding:.5rem .65rem;border-radius:10px;text-decoration:none;font-size:var(--t-sm)}
.sx-list a:hover,.sx-list a[aria-selected=true]{background:var(--wash)}
.sx-list img{width:44px;height:33px;object-fit:cover;border-radius:6px;flex:none}
.sx-list small{display:block;color:var(--ink-2)}
.sx-list .all{justify-content:center;font-weight:700;color:var(--blue-ink)}
.nav-links{display:flex;align-items:center;gap:.15rem}
.nav-links>a,.menu summary{text-decoration:none;padding:.5rem .8rem;border-radius:999px;font-weight:600;font-size:var(--t-sm);cursor:pointer;list-style:none}
.nav-links>a:hover,.menu summary:hover,.menu[open] summary{background:var(--wash)}
.nav-links>a[aria-current]{background:var(--yellow-soft)}
.menu{position:relative}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"▾";margin-left:.3rem;font-size:.75em;color:var(--ink-2)}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:.4rem;min-width:250px;display:grid;gap:2px;box-shadow:0 14px 34px rgba(36,48,74,.12);z-index:30}
.menu-pop a{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:10px;text-decoration:none;font-weight:600;font-size:var(--t-sm)}
.menu-pop a:hover{background:var(--wash)}
.menu-pop small{color:var(--ink-2);font-weight:500;margin-left:auto}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.dot.mam-non{background:var(--pink)}.dot.tieu-hoc{background:var(--green)}.dot.thcs{background:var(--blue)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:1.1rem;text-decoration:none;border:0;cursor:pointer;padding:.8rem 1.5rem;border-radius:999px;background:var(--blue);color:#fff;min-height:50px;box-shadow:0 4px 0 var(--blue-ink);transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--blue-ink)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--blue-ink)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.tri,.btn .tri{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

/* HOME: above the fold */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(1.25rem,3.5vw,2.75rem) clamp(1rem,2.5vw,1.75rem)}
.hero h1{font-size:var(--t-2xl);line-height:1.02}
.hero h1 em{font-style:normal;color:var(--pink);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.22em;background:var(--yellow);opacity:.45;border-radius:4px;z-index:-1}
.lede{margin-top:1rem;font-size:var(--t-lg);color:var(--ink-2);max-width:34ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.hero-art{position:relative}
.hero-art img{width:100%;aspect-ratio:5/4;object-fit:contain}
.hero-art .bubble{position:absolute;right:6%;top:4%;background:#fff;border:2px solid var(--ink);color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.05rem;padding:.45rem 1rem;border-radius:999px 999px 999px 6px;transform:rotate(3deg)}
/* three values strip */
.values{border-block:1.5px solid var(--line);padding-block:1.1rem}
.values ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.values li{display:flex;align-items:center;gap:.85rem}
.values .vi{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.45rem}
.values li:nth-child(1) .vi{background:var(--yellow-soft)}
.values li:nth-child(2) .vi{background:var(--green-soft)}
.values li:nth-child(3) .vi{background:var(--pink-soft)}
.values b{display:block;font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.2}
.values span{font-size:var(--t-sm);color:var(--ink-2);line-height:1.35;display:block}

/* level chips row + section heads */
.block{padding-block:clamp(2rem,5vw,3.5rem)}
section.block{padding-block:clamp(2rem,5vw,3.5rem)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.sec-head h2{font-size:var(--t-xl)}
.sec-head p{color:var(--ink-2)}
.clear,.see-all{font-size:var(--t-sm);font-weight:700;color:var(--blue-ink);text-decoration:none}
.see-all:hover,.clear:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-l{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;padding:.5rem 1rem;border-radius:999px;font-weight:700;font-size:var(--t-sm);border:1.5px solid var(--line);background:#fff;transition:border-color var(--dur),background var(--dur)}
.chip-l small{font-weight:500;color:var(--ink-2)}
.chip-l:hover{border-color:var(--ink)}
.chip-l[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-l[aria-current] small{color:#dfe3ec}
.chip-l.mam-non .dot{background:var(--pink)}.chip-l.tieu-hoc .dot{background:var(--green)}.chip-l.thcs .dot{background:var(--blue)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem}
.card{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r);overflow:hidden;background:#fff;border:1.5px solid var(--line);transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(36,48,74,.10);border-color:transparent}
.card-img{background:var(--wash)}
.card-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-body{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card h3{font-size:1.25rem}
.card p{color:var(--ink-2);font-size:var(--t-sm)}
.meta{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.tag{display:inline-block;padding:.12rem .6rem;border-radius:999px;font-weight:600;font-size:.78rem;background:var(--yellow-soft);color:var(--yellow-ink);text-decoration:none}
.tag.mam-non{background:var(--pink-soft);color:var(--pink-ink)}
.tag.tieu-hoc{background:var(--green-soft);color:var(--green-ink)}
.tag.thcs{background:var(--blue-soft);color:var(--blue-ink)}
.play{margin-top:auto;padding-top:.4rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;color:var(--blue-ink)}
.play .tri{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
.card:hover .play{color:var(--pink)}
.soon{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;align-items:center}
.soon .lbl{font-weight:600;color:var(--ink-2);margin-right:.25rem;font-size:var(--t-sm)}
.soon .chip{padding:.35rem .85rem;border-radius:999px;border:1.5px dashed var(--line);color:var(--ink-2);font-size:var(--t-sm);background:#fff}

/* theme shelves on home */
.shelf+.shelf{margin-top:2.5rem}
.shelf-h{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.9rem}
.shelf-h h3{font-size:var(--t-lg)}
.shelf-h h3 a{text-decoration:none}
.shelf-h h3 a:hover{text-decoration:underline}
.shelf-h p{color:var(--ink-2);font-size:var(--t-sm);flex:1;min-width:200px}
.topics{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.topics a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;padding:.45rem .95rem;border-radius:999px;background:var(--wash);font-weight:600;font-size:var(--t-sm);border:1.5px solid transparent}
.topics a:hover{border-color:var(--ink)}
.topics a b{font-weight:600;color:var(--ink-2)}

/* mom note */
.mom{padding-block:clamp(2.5rem,6vw,4.5rem)}
.mom-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.mom-art img{width:100%}
.mom .eyebrow{font-family:var(--display);font-weight:700;color:var(--pink);font-size:var(--t-lg)}
.mom h2{font-size:var(--t-xl);margin-top:.25rem}
.mom p{margin-top:.9rem;color:var(--ink)}
.mom .sign{font-family:var(--display);font-weight:700;font-size:var(--t-lg);margin-top:1.25rem}
.fam-key{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;padding:0;list-style:none}
.fam-key li{display:flex;align-items:center;gap:.45rem;font-size:var(--t-sm);font-weight:600;padding:.3rem .8rem .3rem .4rem;border-radius:999px;background:var(--wash)}
.fam-key i{width:18px;height:18px;border-radius:50%;display:inline-block}

/* footer: short and clean */
footer{border-top:1.5px solid var(--line);margin-top:clamp(2rem,6vw,4rem);padding-block:1.75rem 2.25rem;font-size:var(--t-sm);color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem}
footer .logo{font-size:1.1rem}
footer .logo img{width:32px;height:32px}
footer .made{max-width:none}
footer .heart{color:var(--pink)}

/* hubs (age / theme / search) */
.hub-head{padding-block:clamp(1.75rem,4vw,2.75rem) 1.25rem;border-bottom:1.5px solid var(--line)}
.hub-head .crumb{font-size:var(--t-sm);color:var(--ink-2)}
.hub-head .crumb a{color:var(--ink-2)}
.hub-head h1{font-size:var(--t-2xl);margin-top:.4rem}
.hub-head h1 small{display:block;font-size:.45em;color:var(--ink-2);margin-top:.35rem;font-weight:600}
.hub-head p{font-size:var(--t-lg);color:var(--ink-2);margin-top:.6rem;max-width:60ch}
.hub-head.mam-non h1{color:var(--pink-ink)}.hub-head.tieu-hoc h1{color:var(--green-ink)}.hub-head.thcs h1{color:var(--blue-ink)}
.hub-head .chips,.pill-row{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem}
.pill-row a{text-decoration:none;padding:.45rem 1rem;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-weight:700;font-size:var(--t-sm)}
.pill-row a:hover{border-color:var(--ink)}
.pill-row a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.hub-group+.hub-group{margin-top:2.5rem}
.hub-group h2{font-size:var(--t-lg)}
.other-themes{margin-top:3rem}
.other-themes h2{font-size:var(--t-lg);margin-bottom:.9rem}
.found{font-size:var(--t-lg);margin-bottom:1.25rem}
.suggest{margin-top:1.5rem}
.big-search{margin-top:1.25rem;max-width:620px}
.big-search .sx{max-width:none;margin:0}
.big-search .sx input{font-size:var(--t-lg);padding:.85rem 1.2rem .85rem 3rem}
.big-search .sx svg{left:1.1rem;width:22px;height:22px}

/* LESSON page */
.ex-head{padding-block:1.5rem 1rem}
.crumb{font-size:var(--t-sm);color:var(--ink-2)}
.crumb a{color:var(--ink-2)}
.ex-head h1{font-size:var(--t-2xl);margin-top:.4rem}
.ex-head p{color:var(--ink-2);font-size:var(--t-lg);margin-top:.5rem}
.lvl-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.player{padding-bottom:1rem}
.stage{position:relative;background:var(--blue-soft);border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;border:1.5px solid var(--line)}
.stage canvas{width:100%;height:100%;display:block;touch-action:none}
.stage.yt iframe{width:100%;height:100%;border:0;display:block}
.caption{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(36,48,74,.9);color:#fff;padding:.75rem 1.4rem;border-radius:12px;font-size:var(--t-lg);line-height:1.45;font-weight:600;max-width:none;transition:opacity var(--dur)}
.caption:empty{opacity:0}
.startover{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.25)}
.startover[hidden]{display:none}
.bigplay{width:96px;height:96px;border-radius:50%;background:var(--yellow);border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 0 var(--yellow-ink);transition:transform var(--dur-fast) var(--ease)}
.bigplay:hover{transform:scale(1.06)}
.bigplay .tri{border-left:30px solid var(--ink);border-top:19px solid transparent;border-bottom:19px solid transparent;margin-left:8px}
.controls{display:flex;align-items:center;gap:.75rem;margin-top:.9rem;flex-wrap:wrap}
.cbtn{min-width:48px;height:48px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:inline-grid;place-items:center;padding:0 .9rem;transition:border-color var(--dur-fast)}
.cbtn:hover{border-color:var(--ink)}
.cbtn.primary{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.cbtn svg{width:20px;height:20px;fill:currentColor}
.dots{display:flex;gap:6px;flex:1;min-width:140px}
.dots button{flex:1;height:8px;border-radius:999px;border:0;background:var(--line);cursor:pointer;padding:0;position:relative}
.dots button::after{content:"";position:absolute;inset:-12px 0}
.dots button.done{background:#c9d6e8}
.dots button.on{background:var(--yellow)}
.voice{font-size:var(--t-sm);display:flex;align-items:center;gap:.4rem;color:var(--ink-2)}
.lab{background:var(--yellow-soft);border-radius:var(--r);padding:clamp(1rem,3vw,2rem);margin-top:2.5rem}
.lab-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start}
.lab h2{font-size:var(--t-xl);color:var(--pink-ink)}
.lab .stage{aspect-ratio:4/3}
.knobs{display:grid;gap:1.4rem}
.knob label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:.4rem}
.knob output{font-family:var(--display);color:var(--pink-ink)}
input[type=range]{width:100%;accent-color:var(--pink);height:32px;cursor:pointer}
.readout{background:#fff;border-radius:12px;padding:1rem 1.4rem;display:grid;gap:.2rem}
.readout .big{font-family:var(--display);font-weight:700;font-size:var(--t-xl);line-height:1.1}
.readout .say{color:var(--ink-2);font-size:var(--t-sm)}
.toggles{display:flex;flex-wrap:wrap;gap:.5rem}
.tbtn{border:2px solid var(--blue);background:#fff;color:var(--blue-ink);border-radius:999px;padding:.5rem 1rem;font-weight:700;cursor:pointer;min-height:44px;font-family:var(--body)}
.tbtn[aria-pressed=true]{background:var(--blue);color:#fff}
.hint{font-size:var(--t-sm);color:var(--ink-2);margin-top:1rem}
.learn{display:grid;grid-template-columns:1fr 340px;gap:3rem;margin-top:3rem;align-items:start}
.learn h2{font-size:var(--t-xl)}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-block:1rem 1.4rem}
.prose{font-size:var(--t-lg);line-height:1.65}
.prose b{color:var(--blue-ink)}
.eq{font-family:var(--display);font-weight:700;font-size:var(--t-lg);background:var(--pink-soft);padding:1rem 1.4rem;border-radius:12px;margin-block:1rem;text-align:center}
.eq span{font-size:.75em;color:var(--ink-2);white-space:nowrap}
.faq{margin-top:3rem}
.faq h2{font-size:var(--t-xl)}
details{border-top:1.5px solid var(--line);padding-block:1rem}
details:last-child{border-bottom:1.5px solid var(--line)}
summary{font-weight:700;cursor:pointer;font-size:var(--t-lg);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--pink)}
details[open] summary::after{content:"–"}
details p{margin-top:.5rem}
.menu summary::after{content:"▾";font-size:.75em;font-family:inherit;color:var(--ink-2);line-height:inherit}
.menu[open] summary::after{content:"▴"}
.menu{border:0;padding:0}
.side{position:sticky;top:90px;display:grid;gap:1.25rem}
.curr{font-size:var(--t-sm);background:var(--blue-soft);border-radius:12px;padding:1rem}
.src{font-size:var(--t-sm);color:var(--ink-2)}
.src h3{font-size:1.05rem;margin-bottom:.5rem}
.src ol{padding-left:1.2rem;display:grid;gap:.25rem}
.more{margin-top:3.5rem;padding-top:2rem;border-top:1.5px solid var(--line)}

/* PARENTS page */
.p-head{padding-block:clamp(2rem,5vw,3rem) 1.5rem;border-bottom:1.5px solid var(--line)}
.p-head h1{font-size:var(--t-2xl);color:var(--pink-ink)}
.p-head p{font-size:var(--t-lg);margin-top:.75rem;max-width:56ch;color:var(--ink-2)}
.p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem 3rem}
.p-item h2{font-size:var(--t-lg);margin-bottom:.5rem}
.p-item:nth-child(1) h2{color:var(--yellow-ink)}.p-item:nth-child(2) h2{color:var(--blue-ink)}.p-item:nth-child(3) h2{color:var(--green-ink)}.p-item:nth-child(4) h2{color:var(--pink-ink)}
.p-item ul{padding-left:1.2rem;display:grid;gap:.25rem}
.age-table{width:100%;border-collapse:collapse}
.age-table th,.age-table td{text-align:left;padding:1rem;border-bottom:1.5px solid var(--line);vertical-align:top}
.age-table th{font-family:var(--display);font-size:var(--t-lg)}
.age-table td:first-child{width:28%}
.qlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.q{background:#fff;border:1.5px solid var(--line);border-top:5px solid var(--c,var(--blue));border-radius:var(--r);padding:1.4rem}
.qlist .q:nth-child(3n+1){--c:var(--blue)}.qlist .q:nth-child(3n+2){--c:var(--pink)}.qlist .q:nth-child(3n+3){--c:var(--green)}
.q b{font-family:var(--display);font-size:var(--t-lg);display:block;line-height:1.25;margin-bottom:.5rem}
.q ul{padding-left:1.1rem;font-size:var(--t-sm);display:grid;gap:.25rem}
.q a{font-weight:700;color:var(--blue-ink);font-size:var(--t-sm);display:inline-block;margin-top:.75rem}
.wash{background:var(--wash)}

/* responsive */
@media (max-width:900px){
  .hero,.mom-grid,.lab-grid,.learn{grid-template-columns:1fr}
  .hero-art{order:-1;max-width:520px;margin-inline:auto;width:100%}
  .side{position:static}
  .values ol{grid-template-columns:1fr;gap:.75rem}
}
@media (max-width:720px){
  .nav .wrap{flex-wrap:wrap;gap:.5rem 1rem;padding-block:.5rem}
  .sx{order:3;flex-basis:100%;max-width:none}
  .nav-links{margin-left:auto}
  .nav-links .hide-sm{display:none}
  .logo{font-size:1.2rem}.logo img{width:38px;height:38px}
  .hero{padding-top:.75rem}
  .hero-art{max-width:360px}
  .stage{aspect-ratio:4/3.4}
  .caption{font-size:var(--t-base);padding:.5rem 1rem;left:.5rem;right:.5rem;bottom:.5rem}
  .age-table td:first-child{width:auto}
  .menu-pop{right:-40px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* keep the first screen compact so values + lessons start above the fold */
.hero-art img{max-height:min(52vh,440px);margin-inline:auto;width:auto}
@media (max-width:720px){
  .hero-art{max-width:280px}
  .hero-art img{max-height:220px}
  .hero-art .bubble{font-size:.9rem;right:0}
  .hero h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .lede{font-size:var(--t-base);margin-top:.6rem}
  .hero .cta{margin-top:1rem}
  .values{padding-block:.8rem}
  .values ol{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .values li{flex-direction:column;text-align:center;gap:.35rem}
  .values .vi{width:42px;height:42px;font-size:1.25rem}
  .values b{font-size:.92rem}
  .values span{display:none}
}
/* "Bài học" — clearly its own section */
.lessons-sec{background:var(--blue-soft);margin-top:clamp(1.5rem,4vw,2.5rem);padding-block:clamp(2rem,5vw,3.25rem);position:relative}
.lessons-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--yellow) 0 25%,var(--blue) 0 50%,var(--green) 0 75%,var(--pink) 0)}
.sec-head.big{justify-content:flex-start;align-items:center;gap:1rem;margin-bottom:1.5rem}
.sec-head.big h2{font-size:var(--t-2xl);line-height:1;color:var(--blue-ink)}
.sec-head.big p{margin-top:.35rem;font-size:var(--t-lg)}
.sec-icon{flex:none;width:64px;height:64px;border-radius:20px;background:#fff;display:grid;place-items:center;font-size:2rem;box-shadow:0 4px 0 rgba(31,94,158,.15)}
.filter-box{background:#fff;border-radius:var(--r);padding:1rem 1.25rem;display:grid;gap:.75rem;margin-bottom:2rem;box-shadow:0 2px 0 rgba(31,94,158,.08)}
.filter-row{display:flex;align-items:center;gap:.75rem 1rem;flex-wrap:wrap}
.filter-lbl{font-family:var(--display);font-weight:700;color:var(--ink-2);min-width:4.8rem;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.04em}
.filter-box .topics{margin:0}
.filter-box .topics a{background:var(--wash)}
.lessons-sec .shelf-h h3{color:var(--ink)}
.lessons-sec .card{border-color:transparent;box-shadow:0 2px 0 rgba(31,94,158,.08)}
.lessons-sec .soon .chip{background:transparent;border-color:#c5d8ee}
.lessons-sec + .mom{margin-top:0}
@media (max-width:720px){.sec-icon{width:48px;height:48px;font-size:1.5rem;border-radius:14px}.filter-lbl{min-width:0;flex-basis:100%}}

.yt-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.45rem 1rem .45rem .75rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;text-decoration:none;font-weight:700;font-size:var(--t-sm)}
.yt-link:hover{border-color:var(--ink)}
.yt-link svg{width:24px;height:24px}

/* trust section (homepage) */
.trust{padding-block:clamp(2.5rem,6vw,4rem)}
.trust-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.trust-head h2{font-size:var(--t-xl);color:var(--green-ink)}
.trust-head p{color:var(--ink-2);margin-top:.2rem}
.trust-badge{flex:none;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:1.8rem;font-weight:800;box-shadow:0 4px 0 var(--green-ink)}
.trust-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.trust-grid li{background:#fff;border:1.5px solid var(--line);border-top:5px solid var(--c,var(--green));border-radius:var(--r);padding:1.15rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.35rem}
.trust-grid li:nth-child(4n+1){--c:var(--yellow)}.trust-grid li:nth-child(4n+2){--c:var(--blue)}.trust-grid li:nth-child(4n+3){--c:var(--green)}.trust-grid li:nth-child(4n+4){--c:var(--pink)}
.trust-grid .ti{font-size:1.7rem;line-height:1}
.trust-grid b{font-family:var(--display);font-size:1.12rem;line-height:1.2;margin-top:.25rem}
.trust-grid span:not(.ti){font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.trust-src{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;margin-top:1.25rem;max-width:none;font-size:var(--t-sm);color:var(--ink-2)}
.trust-src span{margin-right:.25rem}
.trust-src b{padding:.25rem .75rem;border-radius:999px;background:var(--wash);border:1.5px solid var(--line);color:var(--ink);font-weight:700;letter-spacing:.01em}
@media (max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr}}

/* lesson body: single clean column */
.learn{display:block;max-width:780px;margin-top:3rem}
.learn>article>h2{font-size:var(--t-xl)}
/* age switcher above the video */
.age-switch{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.1rem}
.age-lbl{font-family:var(--display);font-weight:700;color:var(--ink-2);margin-right:.25rem}
.age-switch a.tab{--tc:var(--blue);display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;padding:.55rem 1.05rem;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--ink);transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast)}
.age-switch a.tab.mam-non{--tc:var(--pink)}.age-switch a.tab.tieu-hoc{--tc:var(--green)}.age-switch a.tab.thcs{--tc:var(--blue)}
.age-switch a.tab b{font-family:var(--display);font-size:1.1rem}
.age-switch a.tab small{color:var(--ink-2);font-size:.85rem}
.age-switch a.tab:hover{border-color:var(--tc)}
.age-switch a.tab[aria-current]{background:var(--tc);border-color:var(--tc);color:#fff;box-shadow:0 4px 0 rgba(36,48,74,.18);transform:translateY(-2px)}
.age-switch a.tab[aria-current] small{color:rgba(255,255,255,.92)}
.age-switch a.tab[aria-current] .tab-check{display:inline-grid}
.ex-head .crumb a{text-decoration:none;font-weight:600;color:var(--ink-2);background:var(--wash);padding:.3rem .8rem;border-radius:999px;display:inline-flex;gap:.35rem}
.ex-head .crumb a:hover{color:var(--ink);background:var(--line)}
/* stage border picks up the chosen age colour */
body[data-level=mam-non] .player .stage{border-color:var(--pink)}
body[data-level=tieu-hoc] .player .stage{border-color:var(--green)}
body[data-level=thcs] .player .stage{border-color:var(--blue)}
.player .stage{border-width:3px}
/* age tabs: clear selected state */
.tabs-hint{font-size:var(--t-sm);color:var(--ink-2);margin-top:.5rem}
.tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-block:.6rem 0}
.tabs a.tab{--tc:var(--blue);--ts:var(--blue-soft);display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;padding:.6rem 1.1rem;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--ink);transition:border-color var(--dur-fast),background var(--dur-fast)}
.tabs a.tab.mam-non{--tc:var(--pink);--ts:var(--pink-soft)}
.tabs a.tab.tieu-hoc{--tc:var(--green);--ts:var(--green-soft)}
.tabs a.tab.thcs{--tc:var(--blue);--ts:var(--blue-soft)}
.tabs a.tab b{font-family:var(--display);font-size:1.1rem}
.tabs a.tab small{color:var(--ink-2);font-size:.85rem}
.tabs a.tab:hover{border-color:var(--tc)}
.tab-check{display:none;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--tc);font-weight:800;font-size:.85rem;place-items:center}
.tabs a.tab[aria-current]{background:var(--tc);border-color:var(--tc);color:#fff;box-shadow:0 4px 0 rgba(36,48,74,.15);transform:translateY(-2px)}
.tabs a.tab[aria-current] small{color:rgba(255,255,255,.9)}
.tabs a.tab[aria-current] .tab-check{display:inline-grid}
.explain{--tc:var(--blue);--ts:var(--blue-soft);margin-top:1rem;border:2px solid var(--tc);border-radius:18px;padding:1.25rem 1.4rem 1.4rem;background:#fff;position:relative}
.explain.mam-non{--tc:var(--pink);--ts:var(--pink-soft)}.explain.tieu-hoc{--tc:var(--green);--ts:var(--green-soft)}.explain.thcs{--tc:var(--blue);--ts:var(--blue-soft)}
.explain-tag{display:inline-block;background:var(--ts);color:var(--ink);font-size:var(--t-sm);padding:.25rem .8rem;border-radius:999px;margin-bottom:.75rem}
.curr-line{margin-top:.75rem;font-size:var(--t-sm);color:var(--ink-2)}
/* "Làm cùng bố mẹ" — stand-out activity card */
.try{margin-top:2.5rem;background:var(--yellow-soft);border:2px solid var(--yellow);border-radius:22px;padding:clamp(1.25rem,3vw,1.75rem);position:relative}
.try-head{display:flex;align-items:center;gap:1rem}
.try-icon{flex:none;width:64px;height:64px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:2rem;box-shadow:0 4px 0 var(--yellow-ink);transform:rotate(-6deg)}
.try-kicker{font-family:var(--display);font-weight:700;color:var(--yellow-ink);font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.try-time{text-transform:none;letter-spacing:0;background:#fff;color:var(--ink);font-size:.85rem;padding:.15rem .65rem;border-radius:999px;font-family:var(--body);font-weight:600}
.try h2{font-size:var(--t-xl);color:var(--ink);margin-top:.15rem}
.try-body{display:grid;grid-template-columns:1fr 1.6fr;gap:1rem;margin-top:1.25rem}
.try-body>div{background:#fff;border-radius:16px;padding:1rem 1.15rem}
.try-body h3{font-size:1.05rem;color:var(--yellow-ink);margin-bottom:.5rem}
.try-need ul{list-style:none;padding:0;display:grid;gap:.4rem}
.try-need li{padding-left:1.6rem;position:relative}
.try-need li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800}
.try-steps ol{list-style:none;padding:0;display:grid;gap:.6rem;counter-reset:s}
.try-steps li{counter-increment:s;padding-left:2.4rem;position:relative}
.try-steps li::before{content:counter(s);position:absolute;left:0;top:-.05rem;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--yellow);color:var(--ink);font-family:var(--display);font-weight:700;display:grid;place-items:center}
.try-ask{margin-top:1rem;font-weight:600;background:#fff;border-radius:14px;padding:.75rem 1rem;max-width:none}
.try-safe{margin-top:.6rem;font-size:var(--t-sm);color:var(--yellow-ink);max-width:none}
@media (max-width:720px){.try-body{grid-template-columns:1fr}.try-icon{width:52px;height:52px;font-size:1.6rem}}
/* sources: simple numbered list of links */
.sources{margin-top:3rem}
.sources h2{font-size:var(--t-lg);margin-bottom:.75rem}
.sources ol{padding-left:1.6rem;display:grid;gap:.5rem}
.sources li{padding-left:.25rem;color:var(--ink-2)}
.sources a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sources a:hover{color:var(--blue-ink)}

/* feedback: quiet, optional strip above sources */
.fb{margin-top:3rem;padding:1rem 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.fb-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem}
.fb h2{font-family:var(--body);font-weight:600;font-size:var(--t-base);color:var(--ink-2)}
.fb-votes{display:flex;gap:.5rem}
.fb-btn{font:inherit;font-size:var(--t-sm);font-weight:600;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;min-height:38px}
.fb-btn:hover{border-color:var(--ink-2);color:var(--ink)}
.fb-btn[data-v="1"][aria-pressed=true]{background:var(--green-soft);border-color:var(--green);color:var(--ink)}
.fb-btn[data-v="0"][aria-pressed=true]{background:var(--yellow-soft);border-color:var(--yellow);color:var(--ink)}
.fb-more{border:0;padding:0;margin-top:.4rem}
.fb-more:last-child{border:0}
.fb-more summary{font-size:var(--t-sm);font-weight:600;color:var(--ink-2);display:inline-flex;gap:.3rem;text-decoration:underline;text-underline-offset:3px}
.fb-more summary::after{content:"";}
.fb-more[open] summary::after{content:""}
.fb-form{display:grid;gap:.4rem;margin-top:.75rem;max-width:560px}
.fb-form label{font-size:var(--t-sm);color:var(--ink);margin-top:.35rem}
.fb-form label span{color:var(--ink-2)}
.fb-form textarea,.fb-form input{font:inherit;font-size:var(--t-sm);width:100%;padding:.6rem .8rem;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.fb-form textarea:focus,.fb-form input:focus{outline:none;border-color:var(--blue)}
.fb-send{justify-self:start;margin-top:.4rem;font:inherit;font-size:var(--t-sm);font-weight:700;padding:.45rem 1.1rem;border-radius:999px;border:0;background:var(--ink);color:#fff;cursor:pointer}
.fb-msg{font-size:var(--t-sm);color:var(--green-ink);margin-top:.35rem}
.fb-msg:empty{display:none}
.sources{margin-top:2rem}
/* "Bạn có biết?" box inside explanations */
.prose .know{background:var(--yellow-soft);border-radius:14px;padding:.8rem 1rem;margin-top:1rem;font-size:var(--t-base)}
.prose p+p,.prose p+ul,.prose ul+p,.prose div+p,.prose p+div{margin-top:.75rem}
.prose ul,.prose ol{padding-left:1.3rem;display:grid;gap:.3rem;margin-top:.4rem}
.prose h4{font-family:var(--display);font-size:1.1rem;margin-top:1rem}

/* lab scenarios */
.lab-top{margin-bottom:1.25rem}
.lab-top p{margin-top:.35rem}
.scen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.scen-btn{font:inherit;font-weight:700;font-size:var(--t-sm);display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;border:2px solid #f1d98a;background:#fff;color:var(--ink);cursor:pointer;min-height:44px;transition:transform var(--dur-fast),border-color var(--dur-fast)}
.scen-btn span{font-size:1.2rem}
.scen-btn:hover{border-color:var(--pink);transform:translateY(-1px)}
.scen-btn[aria-pressed=true]{background:var(--pink);border-color:var(--pink);color:#fff}
.mission{margin-top:.9rem;background:#fff;border-left:5px solid var(--pink);border-radius:12px;padding:.75rem 1rem;max-width:none;font-size:var(--t-base)}
.mission.done{border-left-color:var(--green);background:var(--green-soft);animation:pop .4s var(--ease)}
@keyframes pop{0%{transform:scale(.97)}60%{transform:scale(1.02)}100%{transform:scale(1)}}

/* "Lời chào từ mẹ" as a handwritten note on lined notebook paper */
.mom .note{--hand:"Dancing Script","Patrick Hand",cursive;position:relative;background:#fffdf6;
  background-image:linear-gradient(90deg,transparent 2.6rem,rgba(236,111,166,.45) 2.6rem,rgba(236,111,166,.45) calc(2.6rem + 2px),transparent calc(2.6rem + 2px)),
                   repeating-linear-gradient(180deg,transparent 0,transparent calc(2rem - 1px),rgba(59,139,217,.22) calc(2rem - 1px),rgba(59,139,217,.22) 2rem);
  background-position:0 0,0 1.15rem;
  padding:2.2rem 1.8rem 1.8rem 3.6rem;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 28px rgba(36,48,74,.10);transform:rotate(-1deg);
  font-family:var(--hand);color:#2c3a5c}
.mom .note .tape{position:absolute;top:-14px;left:50%;width:120px;height:30px;transform:translateX(-50%) rotate(-3deg);background:rgba(242,183,5,.45);border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mom .note .eyebrow{font-family:var(--hand);font-weight:700;color:var(--pink);font-size:1.6rem;line-height:2rem}
.mom .note h2{font-family:var(--hand);font-weight:700;font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);line-height:2rem;margin-top:0;color:#2c3a5c}
.mom .note p{font-size:1.55rem;font-weight:500;line-height:2rem;margin-top:0;max-width:none}
.mom .note p+p{margin-top:2rem}
.mom .note .fam-key{margin-top:1.2rem}
.mom .note .fam-key li{font-family:var(--hand);font-size:1.35rem;font-weight:500;background:transparent;padding:.1rem .6rem .1rem 0}
.mom .note .sign{font-family:var(--hand);font-weight:700;font-size:2rem;line-height:2rem;color:var(--pink);text-align:right;margin-top:1rem;transform:rotate(-2deg)}
@media (max-width:720px){.mom .note{padding:2rem 1.1rem 1.4rem 2.6rem;transform:none;background-image:linear-gradient(90deg,transparent 1.8rem,rgba(236,111,166,.45) 1.8rem,rgba(236,111,166,.45) calc(1.8rem + 2px),transparent calc(1.8rem + 2px)),repeating-linear-gradient(180deg,transparent 0,transparent calc(2rem - 1px),rgba(59,139,217,.22) calc(2rem - 1px),rgba(59,139,217,.22) 2rem)}.mom .note p{font-size:1.4rem}}