/* AI Vibe Coding — DIPROM SMEs Network × Conductor
   ธีม: กรมท่า + ส้มไล่เฉด ตามโปสเตอร์ · แก้สีที่ token ด้านล่างได้ที่เดียว */
:root{
  --navy:#152a5c;--navy-deep:#0d1b3d;--navy-ink:#1a2f5a;
  --orange:#ef6320;--orange-2:#ff8c3a;--orange-3:#ffb070;--orange-soft:#fff1e7;
  --green:#2f9e49;--green-soft:#e8f6ec;
  --paper:#fff;--cream:#fbf7f1;--mist:#f3f6fb;
  --text:#4b5870;--muted:#6f7a90;--line:#e1e6ef;
  --grad-orange:linear-gradient(135deg,#f0641e 0%,#ff8c3a 55%,#ffb070 100%);
  --grad-navy:linear-gradient(160deg,#1c3a78 0%,#152a5c 45%,#0d1b3d 100%);
  --grad-text:linear-gradient(90deg,#ef6320,#ff9550);
  --max:1180px;--radius:22px;--header:84px;
  --shadow:0 18px 50px rgba(21,42,92,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--navy);font-family:'Anuphan',Tahoma,Arial,sans-serif;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,dl,dd,ul,ol{margin:0}
h2{font-size:clamp(30px,3.3vw,46px);line-height:1.25;font-weight:700;letter-spacing:-.02em}
h3{line-height:1.35}
p+p{margin-top:14px}
[hidden]{display:none!important}
.container{width:min(var(--max),calc(100% - 64px));margin-inline:auto}
.section{padding:96px 0}
.eyebrow{font-family:'Poppins','Anuphan',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--orange);margin-bottom:16px;text-transform:uppercase}
.accent{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:fixed;left:16px;top:-80px;padding:10px 16px;background:var(--navy);color:#fff;border-radius:8px;z-index:1000}
.skip-link:focus{top:12px}

/* ปุ่ม */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:12px 28px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;font-weight:600;font-size:16px;color:#fff;background:var(--grad-orange);box-shadow:0 10px 26px rgba(239,99,32,.28);transition:transform .2s,box-shadow .2s,filter .2s;overflow:hidden}
.btn::after{content:'';position:absolute;inset:-40% auto -40% -60%;width:35%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .6s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(239,99,32,.36)}
.btn:hover::after{left:130%}
.btn:disabled{filter:grayscale(.4);opacity:.6;cursor:not-allowed;transform:none}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange);box-shadow:none}
.btn-navy{background:var(--grad-navy);box-shadow:0 10px 26px rgba(21,42,92,.25)}
.btn-sm{min-height:42px;padding:8px 18px;font-size:14px}
.btn-block{width:100%}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(225,230,239,.8)}
.header-inner{height:var(--header);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.brand img{object-fit:contain}
.brand .l-diprom{width:76px;height:54px}
.brand .l-conductor{width:98px;height:54px}
.brand .x{color:#b4bccb;font-size:18px}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{font-size:15px;font-weight:500;text-decoration:none;position:relative}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--grad-orange);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a:hover::after{transform:scaleX(1)}
.menu-toggle{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--navy);margin:6px 0;transition:.2s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{padding:8px 24px 20px;border-top:1px solid var(--line)}
.mobile-menu a{display:block;padding:10px 0;text-decoration:none;font-size:17px}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--grad-orange)}

/* Hero */
.hero{position:relative;padding:64px 0 0;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:
  radial-gradient(800px 400px at 85% 0%,rgba(255,140,58,.16),transparent 60%),
  radial-gradient(600px 300px at 0% 100%,rgba(21,42,92,.10),transparent 60%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:16px;align-items:center;min-height:600px}
.hero-copy{position:relative;z-index:2}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--orange-soft);color:var(--orange);font-weight:600;font-size:14px;margin-bottom:18px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(239,99,32,.18);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239,99,32,.35)}70%{box-shadow:0 0 0 8px rgba(239,99,32,0)}100%{box-shadow:0 0 0 0 rgba(239,99,32,0)}}
h1{font-family:'Poppins',sans-serif;font-size:clamp(60px,6.4vw,92px);font-weight:700;line-height:1.02;letter-spacing:-.05em;margin-left:-3px}
h1 .accent{display:inline-block}
.hero-benefit{font-size:clamp(26px,2.6vw,36px);line-height:1.35;letter-spacing:-.02em;margin:22px 0 14px;font-weight:600}
.hero-desc{color:var(--text);font-size:18px;max-width:520px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin:28px 0 14px}
.hero-note{font-size:14px;color:var(--muted)}
.hero-note strong{color:var(--navy);font-weight:600}
.hero-visual{position:relative;padding:20px 0 30px}
.hero-art{width:112%;max-width:none;margin-left:-6%;filter:drop-shadow(0 30px 40px rgba(21,42,92,.12));animation:arrive 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* Journey — แอนิเมชันวนลูป 9 วิ: IDEA (0–33%) → BUILD (33–66%) → LAUNCH (66–100%) */
.journey{--cyc:9s;position:relative;z-index:2;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px}
.scene{width:min(330px,80%);height:auto;overflow:hidden}
.ph{opacity:0;transform-origin:130px 60px;animation:phase var(--cyc) cubic-bezier(.2,.7,.2,1) infinite}
.ph-build{animation-delay:3s}.ph-launch{animation-delay:6s}
@keyframes phase{0%{opacity:0;transform:translateY(16px) scale(.85)}5%{opacity:1;transform:none}28%{opacity:1;transform:none}33%{opacity:0;transform:translateY(-14px) scale(.9)}100%{opacity:0}}
/* IDEA */
.bulb{fill:url(#gOr);transform-origin:130px 55px;animation:bulbPop var(--cyc) infinite}
@keyframes bulbPop{0%,3%{transform:scale(.6)}8%{transform:scale(1.12)}11%{transform:scale(1)}100%{transform:scale(1)}}
.fil{stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.base{fill:#152a5c}
.rays line{stroke:var(--orange);stroke-width:3;stroke-linecap:round}
.rays{transform-origin:0 0;animation:rays var(--cyc) infinite}
@keyframes rays{0%,7%{opacity:0;transform:scale(.6)}11%{opacity:1;transform:scale(1)}15%{opacity:.35}19%{opacity:1}23%{opacity:.35}27%{opacity:1}31%,100%{opacity:0}}
.spark{fill:#ffb070;transform-box:fill-box;transform-origin:center;animation:spark var(--cyc) infinite}
.s2{animation-delay:.5s}.s3{animation-delay:1s}
@keyframes spark{0%,9%{opacity:0;transform:scale(0) rotate(0)}13%{opacity:1;transform:scale(1) rotate(45deg)}20%{opacity:.3;transform:scale(.6) rotate(90deg)}26%{opacity:1;transform:scale(1) rotate(135deg)}31%,100%{opacity:0;transform:scale(0) rotate(180deg)}}
/* BUILD */
.blk{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:blk var(--cyc) infinite}
.b1{fill:#152a5c;animation-delay:0s}.b2{fill:url(#gOr);animation-delay:.35s}.b3{fill:#1c3a78;animation-delay:.7s}
@keyframes blk{0%,37%{transform:scaleY(0)}41%{transform:scaleY(1.15)}43%{transform:scaleY(1)}62%{transform:scaleY(1)}66%,100%{transform:scaleY(0)}}
.code{font:700 30px 'Poppins',monospace;fill:#152a5c;letter-spacing:-.04em}
.cursor{fill:var(--orange);animation:blink .7s steps(2) infinite}
@keyframes blink{to{opacity:0}}
.gear{transform-origin:0 0;animation:spin 4s linear infinite}
/* LAUNCH */
.rocket{animation:rocket var(--cyc) cubic-bezier(.4,0,.6,1) infinite}
@keyframes rocket{0%,66%{transform:translate(0,70px)}73%{transform:translate(0,18px)}97%,100%{transform:translate(10px,-70px)}}
.flame{transform-box:fill-box;transform-origin:top;animation:flame .14s ease-in-out infinite alternate}
@keyframes flame{from{transform:scaleY(.75) scaleX(.9)}to{transform:scaleY(1.15) scaleX(1.05)}}
.card{transform-box:fill-box;transform-origin:center;animation:card var(--cyc) infinite}
@keyframes card{0%,78%{opacity:0;transform:scale(.55) translateY(10px)}83%{opacity:1;transform:scale(1.07)}86%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.tick{stroke-dasharray:20;stroke-dashoffset:20;animation:tick var(--cyc) infinite}
@keyframes tick{0%,85%{stroke-dashoffset:20}90%,100%{stroke-dashoffset:0}}
.c{opacity:0;animation:conf var(--cyc) ease-out infinite}
.c1{--dx:-40px;--dy:-38px}.c2{--dx:34px;--dy:-44px}.c3{--dx:-26px;--dy:26px}.c4{--dx:44px;--dy:10px}.c5{--dx:-48px;--dy:-6px}.c6{--dx:18px;--dy:34px}
@keyframes conf{0%,83%{opacity:0;transform:translate(0,0) rotate(0)}86%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(260deg)}}
/* ป้ายขั้นตอน */
.journey-steps{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:16px;font:600 13px 'Poppins',sans-serif;letter-spacing:.04em}
.journey-steps .arrow{color:#b4bccb;font-weight:400}
.st{position:relative;color:#aab3c1;padding-bottom:6px;animation:stepLabel var(--cyc) infinite}
.st i{font-style:normal;color:var(--orange);margin-right:6px;font-size:11px}
.st b{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--grad-orange);transform:scaleX(0);transform-origin:left;animation:stepBar var(--cyc) linear infinite}
.st-2,.st-2 b{animation-delay:3s}.st-3,.st-3 b{animation-delay:6s}
@keyframes stepLabel{0%{color:#aab3c1;transform:none}4%{color:var(--navy);transform:translateY(-2px)}30%{color:var(--navy);transform:translateY(-2px)}34%,100%{color:#aab3c1;transform:none}}
@keyframes stepBar{0%,3%{transform:scaleX(0)}31%{transform:scaleX(1)}33%,100%{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.ph,.bulb,.rays,.spark,.blk,.rocket,.card,.c,.st,.st b,.gear,.cursor,.flame{animation:none!important}.ph-idea{opacity:1}.rays{opacity:1}.spark{opacity:1;transform:none}.st{color:var(--navy)}}
.ribbon{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin-top:20px}
.ribbon>div{padding:0 24px;border-left:1px solid var(--line)}
.ribbon>div:first-child{padding-left:0;border:0}
.ribbon dt{font:500 11px 'Poppins',sans-serif;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.ribbon dd{font-size:18px;font-weight:500}
.ribbon strong{font-family:'Poppins','Anuphan',sans-serif;font-size:22px;font-weight:600}

/* Overview */
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.large-copy{font-size:27px;line-height:1.5;font-weight:600}
.overview p:not(.large-copy){color:var(--text)}
.audience{display:flex;gap:16px;align-items:center;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);color:var(--text);font-size:16px}
/* ป้ายติ๊กถูกสีเขียว: วงแหวนเต้นเบา ๆ + เครื่องหมายถูกวาดซ้ำทุก 4 วิ */
.check-badge{width:52px;height:52px;flex-shrink:0;display:grid;place-items:center}
.check-badge svg{width:52px;height:52px;overflow:visible}
.cb-fill{fill:#2f9e49;transform-origin:center;animation:cbPop 4s ease-out infinite;filter:drop-shadow(0 6px 12px rgba(47,158,73,.35))}
.cb-ring{fill:none;stroke:#2f9e49;stroke-width:2;opacity:0;transform-origin:center;animation:cbRing 4s ease-out infinite}
.cb-tick{stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:cbTick 4s ease-out infinite}
@keyframes cbPop{0%{transform:scale(.85)}12%{transform:scale(1.08)}20%,100%{transform:scale(1)}}
@keyframes cbRing{0%{opacity:.6;transform:scale(.8)}40%{opacity:0;transform:scale(1.4)}100%{opacity:0;transform:scale(1.4)}}
@keyframes cbTick{0%,8%{stroke-dashoffset:30}28%,100%{stroke-dashoffset:0}}
.audience strong{color:var(--navy);font-weight:500}

/* Curriculum */
.curriculum{background:var(--cream);border-top:1px solid #efe8dc;border-bottom:1px solid #efe8dc}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:40px}
.section-head>p{color:var(--text);max-width:320px}
.day-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.day-card{position:relative;background:#fff;border:1px solid #ebe3d8;border-radius:var(--radius);padding:32px 34px 0;display:flex;flex-direction:column;overflow:hidden;transition:transform .3s,box-shadow .3s}
.day-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.day-top{display:flex;justify-content:space-between;align-items:center}
.day-label{font:600 12px 'Poppins',sans-serif;letter-spacing:.08em;color:#fff;background:var(--grad-orange);border-radius:999px;padding:8px 14px}
.day-date{font-size:15px;color:var(--text)}
.day-title{display:flex;align-items:center;gap:22px;margin:26px 0 16px}
.big-day{font:600 84px/1 'Poppins',sans-serif;letter-spacing:-.07em;color:#f4e6d8}
.day-title h3{font-size:28px;font-weight:600;letter-spacing:-.02em}
.day-lead{color:var(--text);margin-bottom:22px}
.topics{list-style:none;padding:0;margin:0}
.topics li{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-family:'Poppins','Anuphan',sans-serif;font-size:15px}
.topics .n{font-size:12px;color:var(--orange)}
.topics-2col{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;grid-auto-flow:column;grid-template-rows:repeat(4,1fr);padding-bottom:28px}
.day-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:18px 0;margin-top:auto;font:500 11px 'Poppins',sans-serif;letter-spacing:.1em;color:var(--muted)}
.day-foot .arrow{font-size:20px;color:var(--orange)}
.day-dark{background:var(--grad-navy);border-color:transparent;color:#fff}
.day-dark .day-date,.day-dark .day-lead{color:#cfd8e8}
.day-dark .big-day{color:rgba(255,255,255,.12)}
.day-dark .topics li,.day-dark .day-foot{border-color:rgba(255,255,255,.16)}
.day-dark .topics .n,.day-dark .day-foot .arrow{color:var(--orange-3)}
.day-dark .day-foot{color:#cfd8e8}
.topics-2 li{padding:12px 0;gap:16px}
.topics-2 strong{font-weight:500;font-size:16px;display:block}
.topics-2 .d{font-family:'Anuphan',sans-serif;font-size:14px;color:#c9d3e6}
.topics-2 .sym{margin-left:auto;color:var(--orange-3);font-family:monospace;font-size:20px}

/* Details */
.date-panel{display:grid;grid-template-columns:1fr 1fr;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:36px;gap:40px;align-items:center}
.date-block{display:flex;align-items:center;gap:22px}
.date-fig{font:600 clamp(46px,5.2vw,72px)/1.1 'Poppins',sans-serif;letter-spacing:-.07em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.date-block strong{font-size:23px;font-weight:600;display:block}
.date-block span{font-size:15px;color:var(--text)}
.venue{padding-left:36px;border-left:1px solid var(--line)}
.venue h3{font-size:25px;font-weight:600;margin:4px 0 6px}
.venue p{color:var(--text)}
.fee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fee-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px;background:#fff;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.fee-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.fee-card::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad-orange)}
.fee-card.free::before{background:linear-gradient(90deg,#2f9e49,#7bd389)}
.fee-card.navy::before{background:var(--grad-navy)}
.fee-card .k{font:600 12px 'Poppins',sans-serif;letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
.fee-card .v{font:600 44px/1.1 'Poppins',sans-serif;letter-spacing:-.04em;color:var(--navy)}
.fee-card .v small{font:500 18px 'Anuphan',sans-serif;letter-spacing:0;color:var(--text);margin-left:6px}
.fee-card.free .v{color:var(--green)}
.fee-card p{color:var(--text);font-size:15px;margin-top:12px}
.capacity{display:flex;align-items:center;gap:26px;margin-top:26px;padding:24px 30px;border-radius:var(--radius);background:var(--grad-navy);color:#fff}
.capacity .num{font:600 64px/1 'Poppins',sans-serif;letter-spacing:-.05em;background:linear-gradient(90deg,#ffb070,#ff8c3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.capacity strong{font-size:22px;display:block}
.capacity span{color:#cfd8e8;font-size:15px}
.capacity .meter{margin-left:auto;min-width:220px}
.meter-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:8px}
.meter-bar i{display:block;height:100%;width:0;background:var(--grad-orange);transition:width .8s}
.meter-label{font-size:13px;color:#cfd8e8;display:flex;justify-content:space-between}

/* Prep checklist */
.prep{background:var(--mist)}
.prep-card{background:#fff;border-radius:var(--radius);border:1px solid var(--line);padding:34px 36px;box-shadow:var(--shadow)}
.prep-head{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.prep-logos{display:flex;align-items:center;gap:12px;flex-shrink:0}
.prep-head img{width:60px;height:42px;object-fit:contain}
.prep-head .t{font-weight:700;font-size:20px;line-height:1.3}
.prep-head .s{font-size:13px;color:var(--muted)}
.prep-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.prep-item{display:grid;grid-template-columns:48px 1fr;column-gap:14px;row-gap:8px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--cream);border:1px solid #efe8dc}
.prep-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--grad-orange);color:#fff;box-shadow:0 8px 18px rgba(239,99,32,.25)}
.prep-icon svg{width:24px;height:24px}
.prep-item h4{font-size:17px;font-weight:600;line-height:1.35}
.pi-body{grid-column:2}
.prep-item p,.prep-item li{color:var(--text);font-size:15px;line-height:1.6}
.prep-item ul{padding-left:18px;margin:0}
.pi-note{margin-top:8px!important}
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table th,.spec-table td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table td:first-child{color:var(--muted);white-space:nowrap}
.spec-table th{color:var(--muted);font-weight:500}
.apps{display:flex;flex-wrap:wrap;gap:8px}
.app{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:500}
.app i{width:10px;height:10px;border-radius:3px;background:var(--grad-orange);display:inline-block}
.prep-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* Registration */
.register{background:var(--grad-navy);color:#fff;position:relative;overflow:hidden}
.register::before{content:'';position:absolute;inset:0;background:radial-gradient(700px 350px at 100% 0%,rgba(255,140,58,.18),transparent 60%);pointer-events:none}
.register-intro{text-align:center;max-width:760px;margin:0 auto 36px;position:relative}
.register-intro .eyebrow{color:var(--orange-3)}
.register-intro p{color:#d5deee;font-size:18px}
.countdown{display:flex;justify-content:center;gap:14px;margin:26px 0 8px}
.cd{min-width:84px;padding:14px 10px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);text-align:center}
.cd b{display:block;font:600 36px/1 'Poppins',sans-serif}
.cd span{font-size:12px;color:#c9d3e6}
.shell{position:relative;max-width:920px;margin:0 auto;background:#fff;color:var(--navy);border-radius:var(--radius);padding:34px 40px;box-shadow:0 30px 90px rgba(0,0,0,.25)}
.shell-top{display:flex;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);font:500 11px 'Poppins',sans-serif;letter-spacing:.12em;color:var(--muted)}
.notice{text-align:center;padding:48px 10px}
.notice .ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--orange-soft);color:var(--orange);font-size:30px;margin-bottom:16px}
.notice h3{font-size:26px;font-weight:600}
.notice p{color:var(--text);margin-top:8px}
.banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;font-size:15px;margin:20px 0 0}
.banner.warn{background:#fff6e5;color:#7a4b00;border:1px solid #ffd58a}
.banner.info{background:var(--green-soft);color:#1d6b31;border:1px solid #b9e4c4}
.banner.err{background:#fdecec;color:#9b1c1c;border:1px solid #f5b5b5}
.step{margin-top:28px}
.step-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step-n{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--grad-orange);color:#fff;font:600 14px 'Poppins',sans-serif;flex-shrink:0}
.step-h h3{font-size:19px;font-weight:600}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:14px;font-weight:600}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;outline:0;transition:border .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(239,99,32,.14)}
.field .hint{font-size:13px;color:var(--muted)}
.field input.invalid,.field select.invalid{border-color:#d92d20;box-shadow:0 0 0 4px rgba(217,45,32,.12)}
.err-msg{display:block;font-size:13px;color:#b42318;margin-top:-2px}
.fine.why{color:#b45309;font-weight:500}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row-3{display:grid;grid-template-columns:150px 1fr 1fr;gap:14px}
.combo{position:relative}
.combo-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);max-height:260px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px}
.combo-list button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:15px}
.combo-list button:hover,.combo-list button.active{background:var(--orange-soft)}
.tag{font-size:11px;padding:3px 8px;border-radius:999px;font-weight:600}
.tag.active{background:var(--green-soft);color:var(--green)}
.tag.lapsed{background:#fff6e5;color:#a35a00}
.tag.new{background:var(--mist);color:var(--muted)}
.status-line{display:flex;gap:10px;align-items:center;font-size:14px;margin-top:4px}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:border .15s,background .15s}
.check:hover{border-color:var(--orange)}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--orange);flex-shrink:0}
.check.on{border-color:var(--orange);background:var(--orange-soft)}
.check b{display:block;font-weight:600}
.check span{font-size:14px;color:var(--text)}
.learner{border:1.5px solid var(--line);border-radius:16px;padding:18px 18px 6px;margin-bottom:14px;position:relative;background:var(--cream)}
.learner .lh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.learner .lh b{font-size:15px}
.learner .lh .badge{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--green-soft);color:var(--green);font-weight:600}
.learner .lh .badge.paid{background:var(--orange-soft);color:var(--orange)}
.rm{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;padding:4px 8px}
.rm:hover{color:#b91c1c}
.add-seat{display:inline-flex;align-items:center;gap:10px;border:1.5px dashed var(--orange);color:var(--orange);background:#fff;border-radius:999px;padding:10px 18px;cursor:pointer;font-weight:600}
.add-seat:hover{background:var(--orange-soft)}
.summary{border-radius:18px;background:var(--navy-deep);color:#fff;padding:22px 24px;margin-top:6px}
.summary .line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px}
.summary .line span:last-child{font-family:'Poppins','Anuphan',sans-serif;font-weight:500}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;font-size:16px}
.summary .total b{font:600 34px/1 'Poppins',sans-serif;background:linear-gradient(90deg,#ffb070,#ff8c3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.summary .free-note{color:#9fe0b0;font-size:14px;margin-top:8px}
/* กล่องบัญชีรับโอน — ธีมสีม่วง SCB */
.bank{--scb:#462279;--scb-2:#6a3aa8;--scb-gold:#feac00;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;margin-top:16px;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,var(--scb) 0%,var(--scb-2) 100%);border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 30px rgba(78,42,132,.35);color:#fff}
.bank-logo{background:#fff;border-radius:12px;padding:8px 12px;display:grid;place-items:center}
.bank-logo img{width:120px;height:38px;object-fit:contain}
.bank .b1{font-size:13px;color:#e6dcf5}
.bank .b2{font-weight:600}
.bank .b3{font:600 24px 'Poppins',sans-serif;letter-spacing:.06em;color:var(--scb-gold)}
.copy{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:9px 16px;font-size:13px;cursor:pointer;white-space:nowrap}
.copy:hover{background:rgba(255,255,255,.22)}
.copy.ok{background:var(--green);border-color:var(--green)}
.drop{border:2px dashed var(--line);border-radius:16px;padding:22px;text-align:center;cursor:pointer;transition:.15s;background:var(--cream)}
.drop:hover,.drop.over{border-color:var(--orange);background:var(--orange-soft)}
.drop input{display:none}
.drop .ok{color:var(--green);font-weight:600}
.consent{display:grid;gap:10px}
.actions{margin-top:26px;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.fine{font-size:13px;color:var(--muted);text-align:center}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Footer */
.site-footer{background:var(--navy-deep);color:#fff;padding:30px 0;border-top:1px solid rgba(255,255,255,.12)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-inner strong{font:500 16px 'Poppins',sans-serif}
.footer-inner span{color:#c2ccdc;font-size:14px;margin-left:16px}
.footer-inner a{color:#dbe2ec;text-decoration:none;font-size:14px}
.mobile-bar{display:none}

/* Reveal */
[data-reveal]{opacity:1}
.motion [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.motion [data-reveal].in{opacity:1;transform:none}

/* Thank-you / guide pages */
.page{padding:60px 0 90px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 38px;box-shadow:var(--shadow)}
.ref{display:inline-block;font:600 28px 'Poppins',sans-serif;letter-spacing:.06em;padding:10px 20px;border-radius:14px;background:var(--orange-soft);color:var(--orange);margin:10px 0}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;font-size:15px;margin-top:16px}
.kv dt{color:var(--muted)}
.kv dd{font-weight:500}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:14px}
.steps li{position:relative;padding:18px 18px 18px 64px;border:1px solid var(--line);border-radius:16px;background:#fff}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:10px;background:var(--grad-orange);color:#fff;display:grid;place-items:center;font:600 14px 'Poppins',sans-serif}
.steps h4{font-size:17px;font-weight:600;margin-bottom:4px}
.steps p,.steps li li{font-size:15px;color:var(--text)}
.steps code{background:var(--mist);padding:2px 8px;border-radius:6px;font-size:14px}
.steps a{color:var(--orange)}
.os-switch{display:flex;gap:10px;margin-bottom:22px}
.os-switch a{text-decoration:none;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);font-weight:600}
.os-switch a.on{background:var(--grad-navy);color:#fff;border-color:transparent}

@media(max-width:1100px){.container{width:calc(100% - 48px)}.hero-grid{grid-template-columns:1fr 1fr}.fee-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){:root{--header:74px}.nav{display:none}.menu-toggle{display:block}.hero{padding-top:36px}.hero-grid{grid-template-columns:1fr;min-height:0}.hero-visual{max-width:640px;margin:auto;padding-bottom:20px}.hero-art{width:100%;margin:0}.ribbon{grid-template-columns:1fr 1fr;row-gap:20px}.ribbon>div:nth-child(3){border:0;padding-left:0}.section{padding:72px 0}.overview-grid{grid-template-columns:1fr;gap:34px}.section-head{display:block}.section-head>p{margin-top:14px}.day-grid{grid-template-columns:1fr}.date-panel{grid-template-columns:1fr;gap:22px}.venue{border-left:0;border-top:1px solid var(--line);padding:20px 0 0}.capacity{flex-wrap:wrap}.capacity .meter{margin-left:0;width:100%}.shell{padding:26px 24px}.row-3{grid-template-columns:1fr}.row{grid-template-columns:1fr}.prep-card{padding:22px 18px}.prep-head{flex-wrap:wrap;gap:10px}.prep-head .t{font-size:18px}.prep-item{grid-template-columns:40px 1fr;column-gap:12px;padding:14px}.prep-icon{width:40px;height:40px;border-radius:12px}.prep-icon svg{width:20px;height:20px}.pi-body{grid-column:1 / -1}.prep-item h4{font-size:16px}.spec-table{font-size:13px}.spec-table th,.spec-table td{padding:4px 5px}.kv{grid-template-columns:1fr}}
@media(max-width:640px){body{font-size:16px}.container{width:calc(100% - 32px)}.section{padding:60px 0}h1{font-size:clamp(58px,15vw,80px)}.hero-benefit{font-size:27px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%}.topics-2col{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}.fee-grid{grid-total:1fr;grid-template-columns:1fr}.countdown{gap:8px}.cd{min-width:66px;padding:10px 6px}.cd b{font-size:28px}.shell{padding:20px 16px;border-radius:18px}.learner{padding:14px 14px 4px}.bank{grid-template-columns:1fr}.bank-logo{justify-self:start}.site-footer{padding-bottom:100px}.mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -8px 26px rgba(21,42,92,.08);transition:transform .25s}.mobile-bar>span{font-size:13px;color:var(--text);line-height:1.4}.mobile-bar strong{display:block;color:var(--navy);font-size:14px}.mobile-bar.hide{transform:translateY(110%)}.prep-foot{flex-direction:column;align-items:stretch}.prep-foot .btn{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.motion [data-reveal]{opacity:1;transform:none}}

@media(max-width:640px){.scene{width:min(300px,86%)}.journey-steps{font-size:11px;gap:10px}.st i{font-size:10px;margin-right:4px}}

@media(max-width:640px){.footer-inner{flex-direction:column;align-items:center;text-align:center;gap:14px}.footer-inner p{display:flex;flex-direction:column;align-items:center;gap:4px}.footer-inner strong{font-size:16px}.footer-inner span{margin-left:0;font-size:13px;color:#c2ccdc}.footer-inner a{display:inline-block;padding:8px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px}}
@media(prefers-reduced-motion:reduce){.cb-fill,.cb-ring,.cb-tick{animation:none}.cb-tick{stroke-dashoffset:0}}