:root{
  --brown:#6b3e26; --brown-2:#8a5a3c; --pink:#f7c6d9; --pink-2:#ee8fb3; --pink-3:#fde3ee;
  --cream:#fff8ec; --teal:#2bb3a6; --orange:#f4793b; --navy:#23315e; --yellow:#ffcf4a; --lilac:#ecdcef;
  --ink:#3b2418; --muted:#7a5f50;
  --radius:22px; --shadow:0 14px 40px -18px rgba(107,62,38,.35);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
  --fs:1; /* ตัวคูณขนาดตัวอักษร: ก=1, ก+=1.15, ก++=1.3 */
}
html{font-size:calc(100% * var(--fs));-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-fs="2"]{--fs:1.15}
html[data-fs="3"]{--fs:1.3}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:"Sarabun",system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;overflow-x:hidden;font-size:1.0625rem}
h1,h2,h3,.btn,.tag,.brand b{font-family:"Prompt",sans-serif;line-height:1.3}
a{color:inherit}
img,svg{display:block;max-width:100%}
.container{width:min(1140px,100% - 32px);margin-inline:auto;position:relative;z-index:1}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:4px;z-index:100;background:transparent}
.scroll-progress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--pink-2),var(--orange),var(--yellow))}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(16px,calc((100% - 1180px)/2));transition:background .35s,box-shadow .35s,padding .35s}
.site-header.scrolled{background:rgba(255,248,236,.9);backdrop-filter:blur(10px);box-shadow:0 6px 24px -14px rgba(107,62,38,.4);padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand span{display:flex;flex-direction:column;line-height:1.2}
.brand b{color:var(--brown);font-size:1rem}
.brand small{color:var(--pink-2);font-weight:600;font-size:0.8125rem}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{text-decoration:none;padding:8px 12px;border-radius:999px;font-family:"Prompt";font-size:0.9375rem;color:var(--brown);transition:background .25s}
.site-nav a:hover{background:var(--pink-3)}
.site-nav a.btn{color:#fff}
.nav-toggle{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-toggle span{width:24px;height:3px;background:var(--brown);border-radius:3px;transition:transform .3s,opacity .3s}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--pink-2);color:#fff;font-weight:600;padding:13px 26px;border-radius:999px;box-shadow:0 10px 24px -10px var(--pink-2);transition:transform .3s var(--ease),box-shadow .3s,background .3s;border:2px solid transparent}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px var(--pink-2);background:#e77aa4}
.btn-ghost{background:transparent;color:var(--brown);border-color:var(--brown);box-shadow:none}
.btn-ghost:hover{background:var(--brown);color:#fff;box-shadow:none}
.btn-sm{padding:8px 18px !important;margin-left:6px}
.btn-big{font-size:1.25rem;padding:18px 34px}
.btn-big svg{transition:transform .3s}
.btn-big:hover svg{transform:translateX(5px)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:110px 16px 160px}
.hero-scene{position:absolute;inset:0;width:100%;height:100%}
.hero-scene .layer{will-change:transform}
.cloud{animation:drift linear infinite}
.cloud.c1{animation-duration:60s;transform:translate(-200px,120px)}
.cloud.c2{animation-duration:85s;animation-delay:-30s;transform:translate(-200px,240px) scale(.7)}
.cloud.c3{animation-duration:72s;animation-delay:-55s;transform:translate(-200px,60px) scale(.55)}
@keyframes drift{from{translate:-250px 0}to{translate:1700px 0}}

.floaters{position:absolute;inset:0;pointer-events:none}
.floater{position:absolute;left:var(--x);top:var(--y);will-change:transform}
.bob{animation:bob 5s ease-in-out infinite}
.bob.slow{animation-duration:7s}
.spin{animation:spin 14s linear infinite}
.spin.slow{animation-duration:22s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-18px) rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-content{position:relative;z-index:2;text-align:center;max-width:860px;padding:28px clamp(16px,4vw,44px) 32px;border-radius:32px;background:rgba(255,248,236,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 20px 60px -30px rgba(107,62,38,.45)}
.eyebrow{display:inline-block;background:#fff;color:var(--brown-2);padding:6px 18px;border-radius:999px;font-weight:500;box-shadow:var(--shadow);margin-bottom:18px}
.hero h1{color:var(--brown);margin-bottom:12px;overflow-wrap:anywhere}
h2,h3,p,li,td{overflow-wrap:break-word}
.t-small{display:block;font-size:clamp(1.25rem,calc(3vw * var(--fs)),1.875rem);font-weight:500;color:var(--brown-2)}
.t-big{display:block;font-size:clamp(2.5rem,calc(8vw * var(--fs)),5.5rem);font-weight:700;letter-spacing:-.5px}
.t-big em{font-style:normal;color:var(--pink-2);position:relative;display:inline-block;animation:wiggle 4s ease-in-out infinite}
@keyframes wiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-4deg)}96%{transform:rotate(3deg)}}
.hero-sub{font-size:clamp(1rem,calc(2.2vw * var(--fs)),1.25rem);color:var(--muted);font-weight:500}

.countdown{display:flex;justify-content:center;gap:12px;margin:26px 0 30px;flex-wrap:wrap}
.countdown div{background:#fff;border-radius:18px;min-width:84px;padding:10px 12px;box-shadow:var(--shadow);border-bottom:4px solid var(--pink)}
.countdown b{display:block;font-family:"Prompt";font-size:clamp(1.625rem,calc(4vw * var(--fs)),2.375rem);color:var(--brown);line-height:1.1;font-variant-numeric:tabular-nums}
.countdown span{font-size:0.875rem;color:var(--muted)}
.countdown b.tick{animation:tickPop .4s var(--ease)}
@keyframes tickPop{from{transform:translateY(-6px);opacity:.3}to{transform:none;opacity:1}}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.scroll-hint{position:absolute;bottom:28px;left:50%;translate:-50% 0;z-index:3}
.scroll-hint .wheel{animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}}

/* ---------- sections ---------- */
.section{position:relative;padding:110px 0;overflow:hidden}
.section-head{text-align:center;max-width:760px;margin:0 auto 54px}
.tag{display:inline-block;background:var(--pink-3);color:var(--pink-2);font-weight:600;padding:4px 16px;border-radius:999px;font-size:0.9375rem;margin-bottom:12px}
.section h2{font-size:clamp(1.75rem,calc(4.4vw * var(--fs)),2.75rem);color:var(--brown)}
.hl{color:var(--pink-2);background:linear-gradient(transparent 65%,rgba(255,207,74,.45) 0);padding:0 4px}
.lead{font-size:1.125rem;color:var(--muted);margin-top:8px}
.note,.small-note{color:var(--muted);font-size:0.9375rem;margin-top:8px}
.scribble{width:min(320px,70%);margin:6px auto 4px;overflow:visible}

.bg-confetti{position:absolute;inset:-20% 0;background:url(../svg/confetti.svg) repeat;background-size:380px;opacity:.35;z-index:0;will-change:transform}

/* about */
.about{background:var(--cream)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border-radius:var(--radius);padding:28px 22px;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s}
.card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 24px 50px -22px rgba(107,62,38,.45)}
.card-ico{width:76px;height:76px;margin-bottom:14px}
.card h3{font-size:1.25rem;color:var(--brown);margin-bottom:6px}
.card p{color:var(--muted);font-size:1rem}
/* ไอคอนในการ์ด เคลื่อนไหวเมื่อเข้า viewport */
.card .arrow-hit{stroke-dasharray:44;stroke-dashoffset:44;transition:stroke-dashoffset .7s .5s var(--ease)}
.card.in .arrow-hit{stroke-dashoffset:0}
.card .tick{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .7s .6s var(--ease)}
.card.in .tick{stroke-dashoffset:0}
.card .bars rect{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .6s var(--ease)}
.card.in .bars rect{transform:scaleY(1)}
.card.in .bars rect:nth-child(1){transition-delay:.6s}.card.in .bars rect:nth-child(2){transition-delay:.75s}.card.in .bars rect:nth-child(3){transition-delay:.9s}
.card .seal{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.card:hover .card-ico{animation:jelly .7s}
@keyframes jelly{30%{transform:scale(1.15,.88)}50%{transform:scale(.9,1.1)}70%{transform:scale(1.05,.97)}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.stat{text-align:center;background:var(--brown);color:#fff;border-radius:var(--radius);padding:24px 10px}
.stat b{display:block;font-family:"Prompt";font-size:clamp(2.125rem,calc(5vw * var(--fs)),3.125rem);color:var(--yellow);line-height:1.1}
.stat:nth-child(2){background:var(--teal)}.stat:nth-child(3){background:var(--pink-2)}.stat:nth-child(4){background:var(--navy)}

/* wave divider */
.wave-divider{height:90px;overflow:hidden;background:var(--cream);margin-bottom:-1px}
.wave-divider svg{width:200%;height:100%}
.wave-divider path{will-change:transform}

/* types */
.types{background:var(--pink-3)}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.type-card{background:#fff;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);transition:transform .4s var(--ease)}
.type-card:hover{transform:translateY(-6px)}
.type-top{position:relative;height:200px;display:grid;place-items:center}
.type-top svg{height:150px}
.type-top.normal{background:linear-gradient(135deg,#ffd7a8,#ffbfa0)}
.type-top.special{background:linear-gradient(135deg,var(--navy),#4a5ca8)}
.type-badge{position:absolute;left:20px;bottom:16px;background:#fff;color:var(--brown);font-family:"Prompt";font-weight:600;padding:4px 16px;border-radius:999px;font-size:0.9375rem}
.type-body{padding:26px 28px 30px}
.type-body h3{font-size:1.375rem;color:var(--brown);margin-bottom:12px}
.check{list-style:none;display:grid;gap:8px}
.check li{position:relative;padding-left:32px}
.check li::before{content:"";position:absolute;left:0;top:5px;width:22px;height:22px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.type-card .line{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .6s var(--ease)}
.type-card.in .line{stroke-dashoffset:0}
.type-card.in .l1{transition-delay:.5s}.type-card.in .l2{transition-delay:.7s}.type-card.in .l3{transition-delay:.9s}.type-card.in .l4{transition-delay:1.1s}
.book-open{animation:bob 6s ease-in-out infinite;transform-origin:100px 60px}
.bubble{animation:bubble 2.4s ease-in infinite;transform-box:fill-box}
.bubble.b2{animation-delay:.8s}.bubble.b3{animation-delay:1.5s}
@keyframes bubble{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-70px);opacity:0}}
.sym{animation:bob 4s ease-in-out infinite}
.sym.s2{animation-delay:-1.3s}.sym.s3{animation-delay:-2.6s}

/* timeline */
.timeline-sec{background:var(--cream)}
.timeline{position:relative;max-width:820px;margin:0 auto}
.tl-svg{position:absolute;left:0;top:0;width:80px;height:100%;overflow:visible;pointer-events:none}
.tl-list{list-style:none;display:grid;gap:30px;padding-left:96px}
.tl-item{position:relative}
.tl-dot{position:absolute;left:-96px;top:14px;width:56px;height:56px;margin-left:12px;border-radius:50%;background:#fff;border:4px solid #f2d9c2;display:grid;place-items:center;font-family:"Prompt";font-weight:700;color:var(--muted);font-size:1.25rem;transition:background .4s,border-color .4s,color .4s,transform .4s var(--ease);z-index:2}
.tl-item.active .tl-dot{background:var(--pink-2);border-color:#fff;color:#fff;transform:scale(1.1);box-shadow:0 0 0 6px rgba(238,143,179,.25)}
.tl-card{background:#fff;border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow);opacity:.35;transform:translateX(30px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.tl-item.active .tl-card{opacity:1;transform:none}
.tl-card time{display:inline-block;font-family:"Prompt";font-weight:600;color:var(--pink-2);font-size:0.9375rem;margin-bottom:2px}
.tl-card h3{color:var(--brown);font-size:1.3125rem;margin-bottom:4px}
.tl-card p{color:var(--muted);font-size:1rem}
.tl-card.highlight{background:var(--brown);color:#fff}
.tl-card.highlight h3{color:#fff}.tl-card.highlight p{color:#f3e2d6}.tl-card.highlight time{color:var(--yellow)}

/* apply */
.apply{background:var(--lilac)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;perspective:900px}
.step{position:relative;background:#fff;border-radius:var(--radius);padding:30px 20px 24px;text-align:center;box-shadow:var(--shadow)}
.step svg{width:76px;height:76px;margin:0 auto 10px}
.step>b{position:absolute;top:-14px;left:50%;translate:-50% 0;width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;font-family:"Prompt";display:grid;place-items:center}
.step h3{color:var(--brown);font-size:1.1875rem}
.step p{color:var(--muted);font-size:0.9375rem}
.step .typing{stroke-dasharray:40;animation:typing 3s ease-in-out infinite}
@keyframes typing{0%{stroke-dashoffset:40}50%,100%{stroke-dashoffset:0}}
.step .coin{animation:bob 1.6s ease-in-out infinite;transform-box:fill-box}
.step .pencil-write{animation:write 1.8s ease-in-out infinite}
@keyframes write{0%,100%{transform:translate(0,0)}25%{transform:translate(8px,4px)}50%{transform:translate(16px,0)}75%{transform:translate(8px,4px)}}
.apply-box{margin-top:44px;background:#fff;border-radius:28px;padding:34px 36px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;box-shadow:var(--shadow);border:3px dashed var(--pink)}
.apply-box h3{color:var(--brown);font-size:1.375rem;margin-bottom:12px}
.apply-cta{text-align:center;display:grid;gap:10px;justify-items:center}
.apply-cta small{color:var(--muted)}

/* awards */
.awards{background:linear-gradient(180deg,var(--cream),#fff1d6)}
.awards-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.awards h2{font-size:clamp(1.75rem,calc(4vw * var(--fs)),2.5rem);color:var(--brown);margin-bottom:6px}
.trophy-wrap{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:380px;margin:auto;width:100%}
.trophy-wrap img{position:relative;z-index:1;width:58%;height:auto}
.rays{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,207,74,.35) 0 10deg,transparent 10deg 20deg);mask:radial-gradient(circle,#000 30%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%)}
.medals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 12px}
.medal{background:#fff;border-radius:20px;padding:18px 10px;text-align:center;box-shadow:var(--shadow)}
.medal span{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 8px;border-radius:50%;font-family:"Prompt";font-weight:700;font-size:1.625rem;color:#fff;position:relative}
.medal span::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px dashed currentColor;opacity:.4;animation:spin 10s linear infinite}
.medal p{font-family:"Prompt";font-weight:500;color:var(--brown);font-size:0.9375rem}
.gold span{background:linear-gradient(135deg,#ffe08a,#f6b93b);color:#8a5a00}
.silver span{background:linear-gradient(135deg,#eef1f6,#b8c0cc);color:#4b5563}
.bronze span{background:linear-gradient(135deg,#f5c79b,#c97c3f);color:#6b3e26}
.medal span{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}

/* results */
.results{background:var(--pink-3)}
.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.link-group{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);display:grid;gap:10px;align-content:start}
.link-group h3{color:var(--brown);font-size:1.3125rem;margin-bottom:4px}
.link-group a{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;padding:12px 16px;border-radius:14px;background:var(--cream);color:var(--brown);font-weight:500;transition:background .3s,transform .3s var(--ease),padding .3s}
.link-group a::after{content:"→";color:var(--pink-2);font-weight:700;transition:transform .3s}
.link-group a:hover{background:var(--pink);transform:translateX(4px)}
.link-group a:hover::after{transform:translateX(4px)}

/* footer */
.site-footer{position:relative;background:var(--brown);color:#f3e2d6;padding:30px 0 20px;margin-top:60px}
.footer-wave{position:absolute;bottom:100%;left:0;width:100%;height:60px}
.footer-inner{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:26px;align-items:start}
.footer-inner>div:first-child{display:flex;gap:12px;align-items:center}
.site-footer h3{color:#fff;font-size:1.1875rem}
.site-footer small{font-size:0.8125rem;letter-spacing:1px;color:var(--pink)}
.footer-links{display:grid;gap:6px}
.footer-links a{color:#fff;text-decoration:none}
.footer-links a:hover{color:var(--yellow)}
.copy{text-align:center;font-size:0.875rem;opacity:.7;margin-top:22px}

/* hero extras */
.hero-sub b{color:var(--brown)}
.cd-label{margin-top:18px;font-family:"Prompt";font-weight:500;color:var(--pink-2);font-size:0.9375rem}
.cd-label+.countdown{margin-top:8px}

/* about: roof bob */
.card .roof{animation:bob 4s ease-in-out infinite;transform-box:fill-box}

/* types: schedule */
.type-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.type-meta span{background:var(--pink-3);color:var(--brown);font-family:"Prompt";font-size:0.875rem;padding:3px 12px;border-radius:999px}
.type-meta span:first-child{background:#fff1d6}
.sched{width:100%;border-collapse:collapse;font-size:0.9375rem}
.sched th{font-family:"Prompt";font-weight:600;text-align:left;color:#fff;background:var(--brown);padding:8px 10px}
.sched th:first-child{border-radius:10px 0 0 0}.sched th:last-child{border-radius:0 10px 0 0}
.sched td{padding:8px 10px;border-bottom:1px solid #f2e4d8;vertical-align:top}
.sched .time{font-weight:700;color:var(--brown-2);white-space:nowrap}
.sched .num{text-align:center;width:4.5em}
.sched .qtype{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.sched .qtype i{font-style:normal;font-size:0.75rem;line-height:1.4;padding:1px 8px;border-radius:999px;background:#e6f0ff;color:var(--navy);white-space:nowrap}
.sched .qtype i+i{background:#fff1d6;color:#9a5a12}
.sched .muted-row td{color:var(--muted);background:#fffaf3;font-size:0.875rem}
.sched .break-row td{text-align:center;color:var(--orange);font-family:"Prompt";font-size:0.875rem;background:repeating-linear-gradient(45deg,#fff7ec 0 8px,#fff 8px 16px)}
.type-card.in .sched tbody tr{animation:rowIn .5s var(--ease) both}
.type-card.in .sched tbody tr:nth-child(1){animation-delay:.4s}.type-card.in .sched tbody tr:nth-child(2){animation-delay:.47s}
.type-card.in .sched tbody tr:nth-child(3){animation-delay:.54s}.type-card.in .sched tbody tr:nth-child(4){animation-delay:.61s}
.type-card.in .sched tbody tr:nth-child(5){animation-delay:.68s}.type-card.in .sched tbody tr:nth-child(6){animation-delay:.75s}
.type-card.in .sched tbody tr:nth-child(7){animation-delay:.82s}.type-card.in .sched tbody tr:nth-child(8){animation-delay:.89s}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.parent-note{display:flex;gap:10px;align-items:center;margin-top:14px;background:#fff1d6;border-radius:14px;padding:10px 14px;color:var(--brown);font-weight:500;font-size:0.9375rem}
.parent-note svg{flex:none}

/* apply links */
.step .tick{stroke-dasharray:40;animation:typing 2.6s ease-in-out infinite}
.check li.warn::before{background-color:var(--orange);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v8M12 18h.01' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.apply-box{grid-template-columns:1fr 1.1fr}
.apply-cta{justify-items:stretch;text-align:left}
.apply-link{display:flex;align-items:center;gap:14px;text-decoration:none;background:var(--cream);border:2px solid #f2e4d8;border-radius:18px;padding:12px 16px;color:var(--brown);transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.apply-link>span:nth-child(2){flex:1;display:flex;flex-direction:column;line-height:1.35}
.apply-link b{font-family:"Prompt";font-size:1.0625rem}
.apply-link small{color:var(--muted)}
.apply-link>svg{color:var(--pink-2);transition:transform .3s}
.apply-link:hover{transform:translateY(-3px);border-color:var(--pink-2);background:#fff;box-shadow:0 12px 24px -14px var(--pink-2)}
.apply-link:hover>svg{transform:translateX(5px)}
.al-ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-family:"Prompt";font-weight:700;font-size:1.25rem;color:#fff;background:var(--pink-2)}
.al-ico.normal{background:var(--orange)}.al-ico.special{background:var(--navy)}
.apply-link.both{background:var(--brown);border-color:var(--brown);color:#fff}
.apply-link.both small{color:#f3e2d6}.apply-link.both>svg{color:var(--yellow)}
.apply-link.both .al-ico{background:var(--yellow);color:var(--brown)}
.apply-cta>small{text-align:center}

/* exam day */
.examday{background:var(--cream)}
.bring{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bring-item{background:#fff;border-radius:var(--radius);padding:24px 18px;text-align:center;box-shadow:var(--shadow)}
.bring-item svg{width:80px;height:80px;margin:0 auto 10px}
.bring-item p{color:var(--brown);font-weight:500}
.bring-item.gift{background:var(--pink-3);border:2px dashed var(--pink-2)}
.bring-item .wiggle{animation:wig 2.4s ease-in-out infinite;transform-origin:40px 70px}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.rules{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.rules li{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--shadow)}
.rules span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ffe1d6;color:#d4502a;font-weight:700}
.rules span.ok{background:#dff5f2;color:var(--teal)}

/* awards extras */
.medal strong{display:block;font-family:"Prompt";font-size:clamp(1.125rem,calc(2.2vw * var(--fs)),1.5rem);color:var(--pink-2)}
.medal small{color:var(--muted);font-size:0.8125rem}
.tiebreak{margin-top:14px;background:#fff;border-radius:16px;padding:4px 18px;box-shadow:var(--shadow)}
.tiebreak summary{cursor:pointer;font-family:"Prompt";font-weight:600;color:var(--brown);padding:10px 0}
.tiebreak div{display:grid;gap:6px;padding-bottom:14px;color:var(--muted);font-size:0.9375rem}
.tiebreak b{color:var(--brown)}

/* ---------- Reveal on scroll (Transition) ---------- */
.reveal{opacity:0;transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.reveal[data-anim="fade-up"]{transform:translateY(40px)}
.reveal[data-anim="fade-down"]{transform:translateY(-30px)}
.reveal[data-anim="slide-right"]{transform:translateX(-60px)}
.reveal[data-anim="slide-left"]{transform:translateX(60px)}
.reveal[data-anim="zoom"]{transform:scale(.85)}
.reveal[data-anim="flip"]{transform:rotateY(70deg);transform-origin:left center}
.reveal[data-anim="pop"]{transform:scale(.4) rotate(-12deg);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- ปุ่มปรับขนาดตัวอักษร ---------- */
.fs-control{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:4px;background:#fff;border-radius:999px;padding:5px;box-shadow:0 10px 30px -10px rgba(107,62,38,.5);border:2px solid var(--pink)}
.fs-control .fs-label{font-family:"Prompt";font-size:13px;color:var(--muted);padding:0 6px 0 10px;white-space:nowrap}
.fs-control button{font-family:"Prompt";font-weight:600;color:var(--brown);background:transparent;border:0;border-radius:999px;min-width:44px;height:44px;padding:0 10px;cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease);line-height:1}
.fs-control button:nth-of-type(1){font-size:15px}
.fs-control button:nth-of-type(2){font-size:18px}
.fs-control button:nth-of-type(3){font-size:21px}
.fs-control button:hover{background:var(--pink-3)}
.fs-control button[aria-pressed="true"]{background:var(--pink-2);color:#fff;transform:scale(1.05)}
.fs-control button:focus-visible,.btn:focus-visible,.apply-link:focus-visible,.site-nav a:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
/* ปุ่มสลับมุมมอง Desktop / มือถือ */
.fs-control .view-toggle{display:inline-flex;align-items:center;gap:6px;font-size:14px;border-left:2px solid var(--pink-3);border-radius:0 999px 999px 0;margin-left:2px;padding:0 14px 0 12px;background:var(--pink-3)}
.fs-control .view-toggle[hidden]{display:none}
.view-toggle .ico-mobile{display:none}
html[data-view="desktop"] .view-toggle .ico-mobile{display:block}
html[data-view="desktop"] .view-toggle .ico-desktop{display:none}
.fs-control .view-toggle[aria-pressed="true"]{background:var(--navy);color:#fff;transform:none}
/* ในมุมมอง Desktop บนโทรศัพท์ ขยายปุ่มลอยให้ยังกดง่าย */
html[data-view="desktop"] .fs-control{transform:scale(var(--vs,1));transform-origin:right bottom}
html[data-view="desktop"] .fs-control .fs-label{display:none}
html[data-view="desktop"] .fs-toast{transform:scale(var(--vs,1));transform-origin:center bottom}
.fs-toast{position:fixed;left:50%;bottom:84px;translate:-50% 10px;z-index:61;background:var(--brown);color:#fff;font-family:"Prompt";font-size:14px;padding:8px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s,translate .3s var(--ease)}
.fs-toast.show{opacity:1;translate:-50% 0}
.site-footer{padding-bottom:84px}

/* header ใช้ขนาดคงที่ ไม่ให้เมนูล้นเมื่อขยายตัวอักษร */
.brand b{font-size:16px}.brand small{font-size:13px}
.site-nav a{font-size:15px}

/* ---------- responsive ---------- */
/* Desktop กว้าง */
@media (min-width:1400px){
  .container{width:min(1240px,100% - 64px)}
  .hero-content{max-width:920px}
}
/* Laptop / tablet แนวนอน: ย่อเมนู */
@media (max-width:1180px){
  .site-nav a{padding:8px 9px;font-size:14px}
}
@media (max-width:1100px){
  .cards,.steps,.bring{grid-template-columns:repeat(2,1fr)}
  .rules{grid-template-columns:1fr}
  .site-nav{position:fixed;inset:64px 16px auto 16px;flex-direction:column;align-items:stretch;background:#fff;border-radius:20px;padding:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s,transform .3s}
  .site-nav.open{opacity:1;transform:none;pointer-events:auto}
  .site-nav a.btn{margin:6px 0 0;justify-content:center}
  .nav-toggle{display:flex}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
@media (max-width:760px){
  body{font-size:1rem}
  .section{padding:80px 0}
  .type-grid,.link-grid,.apply-box,.awards-inner,.footer-inner{grid-template-columns:1fr}
  .type-body{padding:22px 16px 24px}
  .sched{font-size:0.875rem}
  .sched td,.sched th{padding:7px 6px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .apply-box{padding:26px 22px}
  .tl-list{padding-left:66px}
  .tl-svg{width:50px}
  .tl-dot{left:-66px;width:44px;height:44px;margin-left:3px;font-size:1.0625rem}
  .floater svg{width:64px !important}
  .floater{opacity:.75}
  .countdown div{min-width:68px}
  .btn-big{font-size:1.0625rem;padding:15px 24px}
  .brand small{display:none}
}
@media (max-width:480px){
  .cards,.steps,.bring{grid-template-columns:1fr}
  .bring-item{display:flex;align-items:center;gap:14px;text-align:left;padding:16px}
  .bring-item svg{width:60px;height:60px;margin:0;flex:none}
  .medals{grid-template-columns:repeat(3,1fr);gap:8px}
  .medal p{font-size:0.8125rem}
}

/* Tablet: การ์ดประเภทการสอบเรียงเดี่ยวให้ตารางอ่านง่าย */
@media (max-width:900px){
  .type-grid{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
  .awards-inner{grid-template-columns:1fr;text-align:center}
  .awards .medals{max-width:520px;margin-inline:auto}
  .awards .small-note,.tiebreak{text-align:left}
}
/* ตารางเลื่อนแนวนอนได้ถ้าจอแคบมากหรือขยายตัวอักษร */
.type-body{overflow-x:auto}
/* กันลูกของ grid ขยายเกินจอ */
.type-grid>*,.cards>*,.steps>*,.bring>*,.medals>*,.stats>*,.apply-box>*,.awards-inner>*,.footer-inner>*{min-width:0}
@media (max-width:480px){
  .sched td,.sched th{padding:7px 5px}
  .type-body{padding:20px 12px 22px}
  .sched .time{white-space:normal;min-width:4.2em}
  .sched .num{width:auto}
  .sched th.num{font-size:0.8rem}
}
/* โทรศัพท์ */
@media (max-width:480px){
  .hero{padding:96px 12px 120px}
  .hero-content{padding:22px 14px 24px;border-radius:24px}
  .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .countdown div{min-width:0;padding:8px 4px;border-radius:14px}
  .hero-cta .btn{width:100%;justify-content:center}
  .medals{grid-template-columns:1fr}
  .medal{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 14px;text-align:left;padding:14px 16px}
  .medal span{grid-row:1 / span 3;margin:0}
  .medal p,.medal strong,.medal small{grid-column:2}
  .stats{gap:10px}
  .stat{padding:18px 6px}
  .section-head{margin-bottom:36px}
  .scroll-hint{display:none}
  .fs-control .fs-label{display:none}
  .fs-control{right:12px;bottom:12px}
}
@media (max-width:360px){
  .container{width:calc(100% - 24px)}
  .t-big{font-size:2.1rem}
  html[data-fs="3"] .t-big{font-size:1.9rem}
  .stats{grid-template-columns:1fr 1fr}
}

/* ลดการเคลื่อนไหวตามการตั้งค่าผู้ใช้ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .tl-card{opacity:1;transform:none}
}