@import url('https://fonts.googleapis.com/css2?family=Kodchasan:wght@500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');
:root{--b:#6699bd;--p:#efb7c3;--g:#b7d7a7;--ink:#30465c;--sh:0 15px 38px #54708b26}
*{box-sizing:border-box}body{margin:0;font-family:Sarabun,sans-serif;color:var(--ink);background:linear-gradient(#f8fdff,#fff8f4)}
a{text-decoration:none;color:inherit}.top{background:#5c87a9;color:white;text-align:center;padding:7px}.nav{position:sticky;top:0;z-index:10;background:#fffffff2;border-bottom:1px solid #dceaf2}.navin{max-width:1200px;margin:auto;padding:12px 18px;display:flex;justify-content:space-between;align-items:center}.brand{font-family:Kodchasan;font-weight:700;color:#3d7298}.links{display:flex;gap:4px;flex-wrap:wrap}.links a{padding:8px 10px;border-radius:999px;font-weight:700}.links a:hover,.links a.on{background:var(--b);color:white}.menu{display:none}
.wrap{max-width:1200px;margin:auto;padding:26px 18px}.hero{min-height:650px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;overflow:hidden;border-radius:0 0 55px 55px;background:linear-gradient(#dff4fc 0 58%,#dcebd3 58%)}
.copy{z-index:2;padding:46px 20px 46px 32px}.tag{display:inline-block;background:#ffd8bf;padding:8px 14px;border-radius:999px;font-weight:700}.copy h1{font:700 clamp(2.8rem,5.4vw,5rem)/1.05 Kodchasan;color:#39739d;text-shadow:0 4px white;margin:25px 0 15px}.copy h1 span{display:block;font-size:.53em;color:#c25d6b;margin-top:12px}.lead{line-height:1.85;font-size:1.08rem}.btn{display:inline-block;padding:12px 20px;border-radius:15px;border:2px solid var(--b);font-weight:700;margin:12px 8px 0 0;background:white}.primary{background:var(--b);color:white}.art{position:relative;min-height:600px;align-self:end}.art img{position:absolute;width:108%;right:-5%;bottom:1%;filter:drop-shadow(0 18px 20px #33445533)}
h1,h2{font-family:Kodchasan;color:#39739d}.head h1{font-size:clamp(2.2rem,4vw,3.8rem);margin-bottom:5px}.sub{color:#66798b;line-height:1.75}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card,.poem{background:white;border:1px solid #dbe9f1;border-radius:23px;padding:22px;box-shadow:var(--sh);line-height:1.75}.card h3{color:#41769a}.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.photo{background:white;padding:7px;border-radius:22px;box-shadow:var(--sh);max-width:100%}.poem{line-height:2;font-size:1.05rem}.meaning{background:#edf7e9;padding:14px;border-radius:15px;margin-top:14px}.quote{background:white;border-left:7px solid var(--p);padding:20px;border-radius:0 20px 20px 0;box-shadow:var(--sh);line-height:1.85}.vocab{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vocab div{background:white;border:1px solid #dceaf1;border-radius:14px;padding:12px}.vocab b{color:#39739d}
.q{background:white;border-radius:20px;padding:20px;margin:16px 0;box-shadow:var(--sh)}.opt{display:block;border:2px solid #dce9ef;border-radius:13px;padding:11px;margin:8px 0}.prog{height:13px;background:#e6edf2;border-radius:99px;overflow:hidden}.bar{height:100%;width:0;background:linear-gradient(90deg,var(--b),var(--p))}.result{display:none;background:white;padding:24px;border-radius:22px;box-shadow:var(--sh)}.result.show{display:block}.review{padding:12px;border-radius:12px;margin:8px 0}.ok{background:#e9f7e7}.bad{background:#fff0ed}.foot{margin-top:45px;background:#5c87a9;color:white;text-align:center;padding:28px}
@media(max-width:900px){.hero{grid-template-columns:1fr}.art{min-height:430px}.grid{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.links{display:none}.menu{display:block;border:0;background:var(--b);color:white;padding:9px 13px;border-radius:12px}.links.open{display:flex;position:absolute;left:12px;right:12px;top:63px;background:white;padding:10px;flex-direction:column;box-shadow:var(--sh)}}@media(max-width:560px){.grid,.vocab{grid-template-columns:1fr}.copy h1{font-size:2.7rem}.art{min-height:320px}.art img{width:125%;right:-20%}}


/* ===== Hero cover redesign ===== */
.hero-redesign{
  min-height:700px;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
  padding:38px 28px 24px;
  border-radius:38px;
  background:
    radial-gradient(circle at 9% 12%,rgba(255,255,255,.96),transparent 24%),
    radial-gradient(circle at 88% 5%,rgba(255,231,192,.78),transparent 25%),
    linear-gradient(145deg,#e7f7fd 0%,#f9fbf2 51%,#fceee7 100%);
  box-shadow:0 22px 60px rgba(65,98,120,.16);
  border:1px solid rgba(138,184,210,.34);
  isolation:isolate;
}
.hero-redesign:before{
  height:26%;
  opacity:.5;
  background:
    radial-gradient(ellipse at 10% 100%,#9fc491 0 26%,transparent 27%),
    radial-gradient(ellipse at 42% 100%,#b9d8a7 0 33%,transparent 34%),
    radial-gradient(ellipse at 78% 100%,#91b481 0 30%,transparent 31%);
}
.hero-copy-new{padding:42px 18px 42px 24px;align-self:center}
.level-badge{display:inline-block;margin:16px 0 0 8px;padding:8px 14px;border-radius:999px;background:#fff;border:2px solid #8eb7d2;color:#436b85;font-weight:700;box-shadow:5px 5px 0 #ffd8ac}
.hero-redesign .copy h1{font-size:clamp(3.05rem,5.3vw,5.3rem);margin:25px 0 16px;letter-spacing:-.035em;line-height:.98}
.hero-redesign .copy h1 span{font-size:.48em;line-height:1.28;margin-top:15px;color:#c35e70;text-shadow:0 3px #fff}
.hero-redesign .lead{max-width:610px;font-size:1.08rem;line-height:1.82;color:#425467}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.hero-actions .btn{margin:0;min-height:52px;display:flex;align-items:center;justify-content:center}
.hero-highlights{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.hero-highlights span{background:rgba(255,255,255,.82);border:1px solid #d5e5ee;padding:7px 11px;border-radius:999px;font-size:.9rem;font-weight:600;color:#527086;box-shadow:0 5px 14px rgba(61,92,111,.08)}
.hero-visual{position:relative;z-index:2;min-height:610px;align-self:stretch}
.blob-back{position:absolute;inset:5% -1% 4% 8%;border-radius:42% 58% 38% 62% / 45% 39% 61% 55%;background:linear-gradient(145deg,#ffd8c2,#f7b9c8 53%,#a8d8ef);transform:rotate(3deg);opacity:.78;filter:drop-shadow(0 20px 35px rgba(77,103,119,.17))}
.image-blob{position:absolute;inset:3% 1% 4% 5%;overflow:hidden;border-radius:48% 52% 42% 58% / 37% 42% 58% 63%;background:#dff1f8;box-shadow:0 25px 50px rgba(54,85,103,.22);border:8px solid rgba(255,255,255,.9)}
.image-blob img{width:100%;height:100%;object-fit:cover;object-position:center 54%;transform:scale(1.06);filter:saturate(.98) contrast(1.02)}
.floating-note{position:absolute;z-index:5;background:rgba(255,255,255,.94);padding:10px 15px;border-radius:999px;font-weight:700;color:#4b6e85;box-shadow:0 10px 25px rgba(62,86,102,.18);border:1px solid #d8e8ef}
.note-one{left:2%;top:19%;transform:rotate(-4deg)}.note-two{right:1%;bottom:14%;transform:rotate(3deg)}
.hero-decor{position:absolute;border-radius:50%;z-index:0;filter:blur(.2px)}.dot-one{width:70px;height:70px;background:#ffe4b7;right:43%;top:8%;opacity:.75}.dot-two{width:38px;height:38px;background:#f5bdcb;left:3%;bottom:14%;opacity:.65}
@media(max-width:1020px){.hero-redesign{grid-template-columns:1fr;min-height:auto;padding:24px 18px 10px}.hero-copy-new{padding:24px 12px 10px}.hero-visual{min-height:520px}.hero-redesign .copy h1{font-size:clamp(3rem,8vw,5rem)}}
@media(max-width:600px){.hero-redesign{padding:15px 10px 0;border-radius:25px}.hero-copy-new{padding:22px 10px 5px}.level-badge{margin-left:0}.hero-redesign .copy h1{font-size:2.85rem}.hero-redesign .copy h1 span{font-size:.5em}.hero-visual{min-height:390px}.image-blob{inset:5% -4% 2% 0}.blob-back{inset:8% -5% 2% 2%}.floating-note{font-size:.78rem;padding:7px 10px}.note-one{left:0;top:13%}.note-two{right:0;bottom:8%}.hero-highlights span{font-size:.82rem}}

/* ===== Homepage using the supplied original illustration ===== */
.hero-photo-layout{
  min-height:700px;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
  align-items:stretch;
  position:relative;
  overflow:hidden;
  border-radius:38px;
  padding:0;
  background:linear-gradient(135deg,#e7f7fd 0%,#fff7f2 100%);
  border:1px solid rgba(116,163,192,.28);
  box-shadow:0 22px 60px rgba(65,98,120,.16)
}
.hero-photo-layout:before{display:none}
.hero-photo-bg{position:absolute;inset:0;background:url('images/hero-family-original.png') center/cover no-repeat;filter:blur(18px);transform:scale(1.08);opacity:.13}
.hero-photo-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,253,255,.98) 0%,rgba(247,253,255,.96) 37%,rgba(247,253,255,.50) 58%,rgba(255,255,255,.03) 100%)}
.hero-photo-copy{position:relative;z-index:3;padding:64px 30px 54px 38px;align-self:center}
.hero-photo-layout .copy h1{font-size:clamp(3.1rem,5.25vw,5.15rem);margin:26px 0 18px;line-height:1;letter-spacing:-.035em}
.hero-photo-layout .copy h1 span{font-size:.48em;line-height:1.28;margin-top:15px;color:#c35e70;text-shadow:0 3px #fff}
.hero-photo-layout .lead{max-width:620px;color:#3d5367;font-size:1.08rem;line-height:1.85}
.hero-photo-panel{position:relative;z-index:2;min-height:700px;overflow:hidden;border-radius:48% 0 0 48% / 24% 0 0 76%;box-shadow:-20px 0 42px rgba(75,104,120,.13)}
.hero-photo-panel:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(231,247,253,.70) 0%,rgba(231,247,253,.12) 22%,transparent 46%)}
.hero-photo-panel img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;filter:saturate(1.02) contrast(1.01)}
@media(max-width:1020px){
  .hero-photo-layout{grid-template-columns:1fr;min-height:auto}
  .hero-photo-overlay{background:linear-gradient(180deg,rgba(247,253,255,.98) 0%,rgba(247,253,255,.92) 48%,rgba(247,253,255,.16) 73%,transparent 100%)}
  .hero-photo-copy{padding:38px 24px 16px}
  .hero-photo-panel{min-height:500px;border-radius:48px 48px 0 0;order:2}
  .hero-photo-panel:before{background:linear-gradient(180deg,rgba(247,253,255,.36),transparent 24%)}
}
@media(max-width:600px){
  .hero-photo-layout{border-radius:25px}
  .hero-photo-copy{padding:28px 16px 12px}
  .hero-photo-layout .copy h1{font-size:2.75rem}
  .hero-photo-panel{min-height:390px;border-radius:34px 34px 0 0}
  .hero-photo-panel img{object-position:center center}
}
/* Better quiz readability */
.q h3{line-height:1.65;margin-bottom:14px}.opt{position:relative;padding:13px 14px 13px 48px;line-height:1.65;min-height:54px;cursor:pointer}.opt input{position:absolute;left:15px;top:18px}.opt-letter{position:absolute;left:31px;top:12px;font-weight:800;color:#4b7697}.opt:hover{border-color:#73a5c6;background:#f5fbff}.opt:has(input:checked){border-color:#5c91b5;background:#edf7fc}.review small{display:block;margin-top:5px;line-height:1.6}


/* ===== Final clean homepage cover ===== */
.hero-clean-cover{
  position:relative;
  min-height:720px;
  display:block;
  overflow:hidden;
  border-radius:34px;
  background:#dff3fb;
  border:1px solid #d6e7ef;
  box-shadow:0 20px 55px rgba(69,100,122,.16);
  isolation:isolate;
}
.hero-clean-cover::before{display:none!important}
.hero-clean-image{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("images/hero-family-full.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.hero-clean-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.95) 25%,
      rgba(255,255,255,.80) 40%,
      rgba(255,255,255,.28) 57%,
      rgba(255,255,255,0) 76%),
    linear-gradient(180deg,rgba(240,250,255,.10),rgba(255,248,241,.08));
}
.hero-clean-copy{
  position:relative;
  z-index:2;
  width:min(620px,49%);
  padding:70px 28px 62px 42px;
}
.hero-clean-copy .tag{margin-bottom:16px}
.hero-clean-copy .level-badge{display:block;width:max-content;margin:0 0 25px 7px}
.hero-clean-copy h1{
  font-size:clamp(3.1rem,5.35vw,5.45rem);
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 22px;
}
.hero-clean-copy h1 span{
  display:block;
  margin-top:17px;
  max-width:560px;
  font-size:.49em;
  line-height:1.28;
}
.hero-clean-copy .lead{max-width:570px;font-size:1.08rem;line-height:1.9}
.hero-clean-copy .hero-actions{margin-top:24px}
.hero-clean-copy .hero-highlights{max-width:560px}
@media(max-width:980px){
  .hero-clean-cover{min-height:830px;background:#e8f7fc}
  .hero-clean-image{background-size:auto 58%;background-position:center bottom}
  .hero-clean-shade{background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 42%,rgba(255,255,255,.15) 70%,rgba(255,255,255,0) 100%)}
  .hero-clean-copy{width:100%;padding:42px 28px 300px}
  .hero-clean-copy h1 span{max-width:700px}
}
@media(max-width:600px){
  .hero-clean-cover{min-height:760px;border-radius:24px}
  .hero-clean-image{background-size:auto 46%;background-position:center bottom}
  .hero-clean-copy{padding:30px 18px 285px}
  .hero-clean-copy h1{font-size:2.8rem}
  .hero-clean-copy h1 span{font-size:.5em}
  .hero-clean-copy .lead{font-size:1rem;line-height:1.72}
}

/* ===== Quiz option alignment fix ===== */
.opt{
  display:grid!important;
  grid-template-columns:24px 34px minmax(0,1fr);
  align-items:start;
  column-gap:8px;
  position:relative;
  padding:15px 16px!important;
  min-height:58px;
  line-height:1.65;
}
.opt input[type="radio"]{
  position:static!important;
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  margin:3px 0 0 0!important;
  border:2px solid #8aa9bd;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-content:center;
  flex:none;
}
.opt input[type="radio"]::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  transform:scale(0);
  transition:transform .12s ease;
  background:#4f87ad;
}
.opt input[type="radio"]:checked::before{transform:scale(1)}
.opt-letter{
  position:static!important;
  display:block;
  font-weight:800;
  color:#4b7697;
  line-height:1.5;
  padding-top:0;
}
.opt-text{display:block;min-width:0}