/* Kru Yok Inter — funnel shared styles
   ทุกคลาสขึ้นต้น ky- เพื่อกันชนกับ stylesheet อื่นที่อาจถูกเพิ่มทีหลัง
   แบรนด์: Navy #00276A · Royal #0044EE · Gold #FDBE01 · Red #DB1A20 */

:root{
  --ky-navy:#00276A; --ky-navy-d:#001B4C; --ky-royal:#0044EE; --ky-royal-l:#2A63F5;
  --ky-gold:#FDBE01; --ky-gold-d:#C99700; --ky-red:#DB1A20;
  --ky-ink:#141C2B; --ky-ink2:#4A5668; --ky-ink3:#77839A;
  --ky-bg:#F4F7FB; --ky-white:#FFFFFF; --ky-soft:#EAF0FA;
  --ky-line:#DBE3EF; --ky-line2:#EDF1F7;
  --ky-ok:#0F7A4F; --ky-goldbg:#FFF8E3; --ky-redbg:#FDECEC;
  --ky-shadow:0 1px 2px rgba(0,39,106,.05), 0 10px 30px rgba(0,39,106,.07);
  --ky-shadow-d:0 18px 50px rgba(0,20,60,.42);
  --ky-head:"Anuphan","IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,sans-serif;
  --ky-body:"IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  font-family:var(--ky-body); background:var(--ky-bg); color:var(--ky-ink);
  font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--ky-head);line-height:1.28;text-wrap:balance}
p,li{text-wrap:pretty}
img{max-width:100%;display:block}
a{color:inherit}
b,strong{font-weight:600}

/* วลีที่ห้ามตกบรรทัด ปลดล็อกบนจอเล็กกันล้น */
.ky-nw{white-space:nowrap}
@media(max-width:620px){.ky-nw{white-space:normal}}

.ky-wrap{max-width:940px;margin:0 auto;padding:0 20px}
.ky-narrow{max-width:740px}
.ky-sec{padding:66px 0}
.ky-sec-sm{padding:44px 0}
.ky-center{text-align:center}

/* ---------- nav ---------- */
.ky-nav{background:var(--ky-white);border-bottom:1px solid var(--ky-line);padding:14px 0}
.ky-nav .ky-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ky-logo{height:76px;width:auto}
.ky-nav-date{font-size:14px;color:var(--ky-ink2);font-weight:500;text-align:right}
.ky-nav-date b{color:var(--ky-navy)}

/* ---------- urgency bar ---------- */
.ky-urg{
  background:var(--ky-navy);color:#EAF0FF;text-align:center;
  padding:11px 16px;font-size:14.5px;font-weight:500;
}
.ky-urg b{color:var(--ky-gold)}

/* ---------- hero ---------- */
.ky-hero{
  background:linear-gradient(168deg,var(--ky-navy) 0%,#012159 55%,var(--ky-navy-d) 100%);
  color:#EDF2FC;padding:60px 0 66px;position:relative;overflow:hidden;
}
.ky-eyebrow{
  font-family:var(--ky-head);font-weight:600;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ky-gold);margin-bottom:16px;
}
.ky-eventname{
  font-family:var(--ky-head);font-weight:700;
  font-size:clamp(34px,7.6vw,64px);line-height:1.06;letter-spacing:-.01em;
  color:#fff;text-transform:uppercase;margin-bottom:18px;
}
.ky-eventname .ky-hl{color:var(--ky-gold)}
.ky-headline{font-size:clamp(21px,3.8vw,31px);font-weight:600;color:#fff;margin-bottom:14px}
.ky-subhead{font-size:clamp(16px,2.2vw,19px);color:#B9C8E6;max-width:56ch}
.ky-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ky-pill{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:8px 16px;font-size:14.5px;color:#DCE6FA;font-weight:500;
}
.ky-pill b{color:#fff}

/* ---------- headings ---------- */
.ky-tag{
  font-family:var(--ky-head);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ky-royal);margin-bottom:10px;
}
.ky-h2{font-size:clamp(24px,4vw,35px);font-weight:700;color:var(--ky-navy)}
.ky-lead{font-size:17px;color:var(--ky-ink2);margin-top:14px;max-width:64ch}
.ky-center .ky-lead{margin-left:auto;margin-right:auto}
.ky-rule{width:56px;height:4px;border-radius:4px;background:var(--ky-gold);margin-top:16px}
.ky-center .ky-rule{margin-left:auto;margin-right:auto}

/* ---------- cards ---------- */
.ky-grid{display:grid;gap:18px}
.ky-g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ky-g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ky-card{
  background:var(--ky-white);border:1px solid var(--ky-line);border-radius:14px;
  padding:24px 26px;box-shadow:var(--ky-shadow);
}
.ky-card h3{font-size:19px;font-weight:600;color:var(--ky-navy);margin-bottom:8px}
.ky-card p{font-size:15.5px;color:var(--ky-ink2)}
.ky-icon{
  width:42px;height:42px;border-radius:11px;background:var(--ky-soft);
  display:grid;place-items:center;font-family:var(--ky-head);font-weight:700;
  color:var(--ky-royal);font-size:18px;margin-bottom:14px;
}

/* ---------- mechanism ---------- */
.ky-mech{display:grid;gap:0;border:1px solid var(--ky-line);border-radius:14px;overflow:hidden;background:var(--ky-white);box-shadow:var(--ky-shadow)}
.ky-mech-row{display:grid;grid-template-columns:74px 1fr;gap:20px;padding:22px 26px;border-top:1px solid var(--ky-line2);align-items:start}
.ky-mech-row:first-child{border-top:none}
.ky-mech-l{font-family:var(--ky-head);font-weight:700;font-size:40px;color:var(--ky-royal);line-height:1}
.ky-mech-l small{display:block;font-family:var(--ky-body);font-size:12.5px;font-weight:500;color:var(--ky-ink3);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.ky-mech-row h4{font-size:18px;font-weight:600;color:var(--ky-navy);margin-bottom:5px}
.ky-mech-row p{font-size:15.5px;color:var(--ky-ink2)}

/* ---------- agenda ---------- */
.ky-agenda{display:grid;gap:14px}
.ky-ag{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:var(--ky-white);border:1px solid var(--ky-line);border-left:4px solid var(--ky-royal);
  border-radius:12px;padding:20px 24px;
}
.ky-ag-t{font-family:var(--ky-head);font-weight:700;color:var(--ky-royal);font-size:15px;white-space:nowrap;padding-top:2px}
.ky-ag h4{font-size:18px;font-weight:600;color:var(--ky-navy);margin-bottom:6px}
.ky-ag ul{margin:0;padding-left:20px}
.ky-ag li{font-size:15.5px;color:var(--ky-ink2);margin-top:4px}

/* ---------- proof ---------- */
.ky-quote{
  background:var(--ky-white);border:1px solid var(--ky-line);border-radius:14px;
  padding:22px 24px;box-shadow:var(--ky-shadow);display:flex;flex-direction:column;gap:12px;
}
.ky-stars{color:var(--ky-gold);letter-spacing:2px;font-size:14px}
.ky-quote p{font-size:15.5px;color:var(--ky-ink2);line-height:1.75;flex:1}
.ky-who{font-size:14.5px;font-weight:600;color:var(--ky-navy);border-top:1px solid var(--ky-line2);padding-top:12px}
.ky-who span{display:block;font-weight:400;color:var(--ky-ink3);font-size:13.5px;margin-top:2px}

/* ---------- bio ---------- */
.ky-bio{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:34px;align-items:start}
.ky-bio-photo{border-radius:16px;overflow:hidden;border:1px solid var(--ky-line);background:var(--ky-soft);aspect-ratio:3/4;display:grid;place-items:center;color:var(--ky-ink3);font-size:14px;text-align:center;padding:16px}
.ky-creds{list-style:none;display:grid;gap:9px;margin-top:16px}
.ky-creds li{display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:16px;color:var(--ky-ink2)}
.ky-creds li::before{content:"✓";color:var(--ky-ok);font-weight:700}
@media(max-width:700px){.ky-bio{grid-template-columns:1fr}}

/* ---------- bonus ---------- */
.ky-bonus{display:grid;gap:14px}
.ky-bn{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;background:var(--ky-white);border:1px solid var(--ky-line);border-radius:12px;padding:18px 22px}
.ky-bn-n{width:36px;height:36px;border-radius:50%;background:var(--ky-gold);color:#2B2000;font-family:var(--ky-head);font-weight:700;display:grid;place-items:center;font-size:15px}
.ky-bn h4{font-size:17px;font-weight:600;color:var(--ky-navy);margin-bottom:4px}
.ky-bn p{font-size:15px;color:var(--ky-ink2)}

/* ---------- offer / form ---------- */
.ky-offer{background:var(--ky-white);border:2px solid var(--ky-navy);border-radius:18px;overflow:hidden;box-shadow:var(--ky-shadow);max-width:560px;margin:0 auto}
.ky-offer-head{background:var(--ky-navy);color:#fff;padding:22px 26px;text-align:center}
.ky-offer-head h3{font-size:22px;font-weight:700;color:#fff}
.ky-offer-head p{font-size:15px;color:#B9C8E6;margin-top:5px}
.ky-offer-body{padding:26px}
.ky-price{text-align:center;padding:18px 0 8px}
.ky-price .ky-num{font-family:var(--ky-head);font-weight:700;font-size:58px;color:var(--ky-navy);line-height:1}
.ky-price .ky-num small{font-size:20px;font-weight:600;margin-left:6px}
.ky-price .ky-incl{font-size:14.5px;color:var(--ky-ok);font-weight:600;margin-top:8px}
.ky-step{display:grid;gap:6px;margin-bottom:16px}
.ky-step label{font-size:14.5px;font-weight:600;color:var(--ky-navy);display:flex;align-items:center;gap:9px}
.ky-step-n{width:22px;height:22px;border-radius:50%;background:var(--ky-royal);color:#fff;font-size:12.5px;font-weight:600;display:grid;place-items:center;font-family:var(--ky-head)}
.ky-step input{
  width:100%;padding:14px 16px;border:1px solid var(--ky-line);border-radius:11px;
  font-family:var(--ky-body);font-size:16.5px;background:var(--ky-bg);color:var(--ky-ink);
}
.ky-step input:focus{outline:3px solid rgba(0,68,238,.22);border-color:var(--ky-royal);background:#fff}
.ky-btn{
  display:block;width:100%;text-align:center;border:none;cursor:pointer;
  background:linear-gradient(180deg,var(--ky-royal-l),var(--ky-royal));color:#fff;
  font-family:var(--ky-head);font-weight:700;font-size:19px;padding:18px 20px;border-radius:999px;
  text-decoration:none;box-shadow:0 8px 22px rgba(0,68,238,.32);transition:transform .15s,filter .15s;
}
.ky-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.ky-btn-gold{background:linear-gradient(180deg,#FFD247,var(--ky-gold));color:#2B2000;box-shadow:0 8px 22px rgba(253,190,1,.4)}
.ky-safe{text-align:center;font-size:13.5px;color:var(--ky-ok);font-weight:600;margin-top:14px}
.ky-seats{text-align:center;font-size:14px;color:var(--ky-red);font-weight:600;margin-top:10px}

/* ---------- guarantee ---------- */
.ky-guar{background:var(--ky-goldbg);border:1px solid #F0DFA8;border-radius:14px;padding:24px 26px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.ky-guar-badge{width:56px;height:56px;border-radius:50%;background:var(--ky-gold);display:grid;place-items:center;font-size:26px}
.ky-guar h3{font-size:19px;font-weight:600;color:#7A5A10;margin-bottom:6px}
.ky-guar p{font-size:15.5px;color:#6B5210}

/* ---------- faq ---------- */
.ky-faq{border:1px solid var(--ky-line);border-radius:14px;overflow:hidden;background:var(--ky-white)}
.ky-faq details{border-top:1px solid var(--ky-line2)}
.ky-faq details:first-child{border-top:none}
.ky-faq summary{padding:18px 24px;font-family:var(--ky-head);font-weight:600;font-size:16.5px;color:var(--ky-navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.ky-faq summary::-webkit-details-marker{display:none}
.ky-faq summary::after{content:"+";color:var(--ky-royal);font-size:22px;font-weight:600;flex:none}
.ky-faq details[open] summary::after{content:"–"}
.ky-faq summary:focus-visible{outline:3px solid rgba(0,68,238,.3);outline-offset:-3px}
.ky-faq .ky-a{padding:0 24px 20px;font-size:15.5px;color:var(--ky-ink2)}

/* ---------- footer ---------- */
.ky-foot{background:var(--ky-navy-d);color:#8FA3C8;padding:44px 0 36px;text-align:center;font-size:14px}
.ky-foot img{height:112px;width:auto;margin:0 auto 18px}
.ky-foot p{max-width:60ch;margin:0 auto}

/* ---------- OTO / checkout shared ---------- */
.ky-sheet{max-width:660px;margin:34px auto;background:var(--ky-white);border:1px solid var(--ky-line);border-radius:18px;overflow:hidden;box-shadow:var(--ky-shadow)}
.ky-sheet-head{background:linear-gradient(168deg,var(--ky-navy),var(--ky-navy-d));color:#fff;padding:28px 30px;text-align:center}
.ky-sheet-head h1{font-size:clamp(21px,4.4vw,28px);font-weight:700;color:#fff}
.ky-sheet-head p{font-size:15.5px;color:#B9C8E6;margin-top:8px}
.ky-sheet-body{padding:28px 30px}
.ky-prog{margin-bottom:22px}
.ky-prog-bar{height:9px;border-radius:99px;background:var(--ky-line2);overflow:hidden}
.ky-prog-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ky-royal),var(--ky-gold))}
.ky-prog p{font-size:13.5px;color:var(--ky-ink3);margin-top:8px;text-align:center;font-weight:500}
.ky-interrupt{
  text-align:center;font-family:var(--ky-head);font-weight:700;
  font-size:clamp(28px,6vw,44px);color:var(--ky-red);margin:8px 0 6px;line-height:1.15;
}
.ky-excl{background:var(--ky-soft);border:1px solid #CFDDF5;border-radius:12px;padding:16px 20px;font-size:15.5px;color:var(--ky-navy);margin:18px 0}
.ky-stack{list-style:none;display:grid;gap:11px;margin:18px 0}
.ky-stack li{display:grid;grid-template-columns:24px 1fr;gap:11px;font-size:15.5px;color:var(--ky-ink2)}
.ky-stack li::before{content:"✓";color:var(--ky-ok);font-weight:700}
.ky-cmp{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.ky-cmp th{background:var(--ky-navy);color:#fff;font-family:var(--ky-head);font-weight:600;font-size:14px;padding:11px 14px;text-align:left}
.ky-cmp td{padding:11px 14px;border-top:1px solid var(--ky-line2);color:var(--ky-ink2)}
.ky-cmp td:first-child{width:50%}
.ky-yes{color:var(--ky-ok);font-weight:600}
.ky-no{color:var(--ky-red);font-weight:600}
.ky-once{background:var(--ky-redbg);border:1px solid #F3C6C8;border-radius:12px;padding:15px 20px;font-size:15px;color:#96181D;font-weight:500;margin:18px 0}
.ky-sum{background:var(--ky-bg);border:1px dashed var(--ky-navy);border-radius:12px;padding:18px 22px;margin:20px 0}
.ky-sum-row{display:flex;justify-content:space-between;gap:16px;font-size:15.5px;color:var(--ky-ink2);padding:6px 0}
.ky-sum-row.ky-total{border-top:1px solid var(--ky-line);margin-top:8px;padding-top:12px;font-size:18px;font-weight:700;color:var(--ky-navy)}
.ky-sum-row b{font-family:var(--ky-head)}
.ky-decline{display:block;text-align:center;margin-top:18px;font-size:14.5px;color:var(--ky-ink3);text-decoration:underline}
.ky-commit{text-align:center;font-family:var(--ky-head);font-weight:600;font-size:19px;color:var(--ky-navy);margin:22px 0 4px}
.ky-anchor{text-align:center;margin:6px 0 2px}
.ky-anchor s{color:var(--ky-ink3);font-size:19px}
.ky-anchor .ky-now{font-family:var(--ky-head);font-weight:700;font-size:46px;color:var(--ky-royal);display:block;line-height:1.1}
.ky-anchor .ky-save{font-size:14.5px;color:var(--ky-ok);font-weight:600;margin-top:6px;display:block}

/* checkout bits */
.ky-steps3{display:flex;gap:10px;margin-bottom:22px}
.ky-st{flex:1;text-align:center;font-size:12.5px;color:var(--ky-ink3)}
.ky-st .ky-dot{width:30px;height:30px;border-radius:50%;background:var(--ky-line2);color:var(--ky-ink3);display:grid;place-items:center;margin:0 auto 6px;font-family:var(--ky-head);font-weight:600;font-size:14px}
.ky-st.ky-done .ky-dot{background:var(--ky-ok);color:#fff}
.ky-st.ky-now .ky-dot{background:var(--ky-royal);color:#fff}
.ky-st.ky-now{color:var(--ky-navy);font-weight:600}
.ky-bank{background:var(--ky-bg);border:1px solid var(--ky-line);border-radius:14px;padding:20px 22px;margin:18px 0}
.ky-bank h3{font-size:16px;font-weight:600;color:var(--ky-navy);margin-bottom:12px}
.ky-acc{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.ky-acc .ky-accnum{font-family:var(--ky-head);font-weight:700;font-size:24px;color:var(--ky-navy);letter-spacing:.02em}
.ky-copy{background:var(--ky-navy);color:#fff;border:none;border-radius:9px;padding:9px 16px;font-family:var(--ky-body);font-size:14px;cursor:pointer;font-weight:500}
.ky-warn{background:var(--ky-goldbg);border:1px dashed var(--ky-gold-d);border-radius:12px;padding:14px 18px;font-size:15px;color:#6B5210;margin:18px 0}
.ky-warn b{color:#7A5A10}
.ky-note{font-size:13.5px;color:var(--ky-ink3);margin-top:16px;line-height:1.7}

/* thank you */
.ky-todo{display:grid;gap:14px;margin:22px 0}
.ky-td{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;background:var(--ky-bg);border:1px solid var(--ky-line);border-radius:12px;padding:18px 20px}
.ky-td-n{width:32px;height:32px;border-radius:50%;background:var(--ky-royal);color:#fff;font-family:var(--ky-head);font-weight:600;display:grid;place-items:center;font-size:14px}
.ky-td h4{font-size:16.5px;font-weight:600;color:var(--ky-navy);margin-bottom:4px}
.ky-td p{font-size:15px;color:var(--ky-ink2)}
.ky-td a{color:var(--ky-royal);font-weight:600}

@media(max-width:560px){
  body{font-size:16px}
  .ky-sec{padding:48px 0}
  .ky-sheet{margin:18px auto;border-radius:14px}
  .ky-sheet-body,.ky-sheet-head{padding:22px 20px}
  .ky-card{padding:20px}
  .ky-mech-row{grid-template-columns:1fr;gap:8px}
  .ky-ag{grid-template-columns:1fr;gap:8px}
  .ky-guar{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* หัวข้อที่ล็อกจุดตัดด้วย inline white-space:nowrap → ปลดล็อกบนจอเล็กกันข้อความล้น */
@media(max-width:620px){
  h1 span[style*="nowrap"], h2 span[style*="nowrap"], h3 span[style*="nowrap"],
  h4 span[style*="nowrap"], .ky-eyebrow span[style*="nowrap"], .ky-tag span[style*="nowrap"]{
    white-space:normal !important;
  }
}

/* โลโก้ครูหยกเป็นไฟล์พื้นขาว · ห้ามแก้สี ห้าม invert
   บนพื้นเข้มจึงวางบนแผ่นขาวแทน (ถ้าได้ไฟล์ knockout ทางการจากครูหยกแล้วค่อยเปลี่ยน) */
.ky-logo-plate{
  display:inline-block;background:#fff;border-radius:14px;padding:14px 22px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);line-height:0;
}
.ky-logo-plate img{height:112px;width:auto;margin:0}
.ky-sheet-head .ky-logo-plate{padding:10px 16px;border-radius:12px}
.ky-sheet-head .ky-logo-plate img{height:76px}
.ky-foot .ky-logo-plate{margin-bottom:18px}

/* รายการ "ยังไม่เหมาะ" ใช้กากบาทแทนเครื่องหมายถูก */
.ky-stack.ky-stack-x li::before{content:"✕";color:var(--ky-ink3)}