/* ไซต์ลงทะเบียน MMN × Conductor — สไตล์กลางของทุกหน้า (landing, ฟอร์ม, thanks, คู่มือ, แอดมิน)
   สีทั้งหมดประกาศที่ :root ที่นี่ที่เดียว ห้ามฝังรหัสสีในหน้าอื่น
   ปุ่ม/ไล่เฉดส้ม = ค่าเดียวกับหน้า DIPROM (vibecoding.diprom.network) เป๊ะ — เจ้าของสั่ง 6 ต.ค. 2569 "ให้ใช้สีเหมือนเดิมเลย"
   กรมท่าใช้ชุด navy เดิม (hero/ปุ่ม navy ใช้ไล่เฉด navy ของ DIPROM) · ทอง/คราม MMN เป็นจุดเน้นรอง
   ข้อความบนพื้นทองใช้ navy-900 เสมอ */
:root{
  /* กรมท่า (ตัวหนังสือ พื้นเข้ม เส้น) */
  --navy-900:#0D172C;--navy-800:#101D39;--navy-700:#142445;--navy-600:#172A50;--navy-500:#1A2F5A;
  --navy-400:#5F6D8C;--navy-300:#98A1B5;--navy-200:#C3C9D4;--navy-100:#E1E4EA;
  --stone-50:#FAF9F8;--stone-100:#F3F1EF;--stone-200:#E7E4E1;
  /* ส้ม — สีทุกค่ามาจาก public/css/site.css ของ DIPROM (#ef6320 #f0641e #ff8c3a #ffb070 #fff1e7)
     ทางผสม (auditor 6 ต.ค. 2569): คงสี DIPROM แต่ย้าย stop ของ --grad-orange ให้ 0–55% เป็น #f0641e ทึบ แล้วค่อยไล่สว่างทางขวา
       → ตัวหนังสือปุ่มใหญ่ (หนา 19px = ข้อความใหญ่ เกณฑ์ 3:1) ที่อยู่กลางปุ่มตกบนส่วนเข้ม: ตัวขาวบน #f0641e 3.2:1
       (DIPROM เดิม: 0% #f0641e → 55% #ff8c3a → 100% #ffb070 ตัวขาวกลางปุ่มเหลือ ~2.4:1)
     --grad-text: ตัวหนังสือไล่เฉด ใช้ส้มเข้ม → #ef6320 (หัวข้อใหญ่บนขาว ฝั่งสว่างสุด 3.2:1 ผ่านเกณฑ์ข้อความใหญ่) */
  --orange:#ef6320;--orange-2:#ff8c3a;--orange-3:#ffb070;--orange-soft:#fff1e7;
  --grad-orange:linear-gradient(135deg,#f0641e 0%,#f0641e 55%,#ff8c3a 80%,#ffb070 100%);
  --grad-navy:linear-gradient(160deg,#1c3a78 0%,#152a5c 45%,#0d1b3d 100%);
  --grad-text:linear-gradient(90deg,#b5440f,#ef6320);
  /* ส้มเข้ม — ไม่มีในหน้า DIPROM เพิ่มไว้เฉพาะจุดที่ตัวหนังสือเล็กกว่า 19px ต้องผ่าน AA (4.5:1) ซึ่งส้มของ DIPROM ทำไม่ได้
     (ตัวขาวบน #ef6320 ได้แค่ 3.2:1 · บน #ff8c3a 2.3:1 · บน #ffb070 1.8:1)
     --orange-ink: ตัวหนังสือ/ลิงก์ส้มบนพื้นสว่าง — บนขาว 5.5:1 · บน orange-soft 5.0:1
     --grad-orange-deep: ทุกอย่างที่ตัวเล็กกว่า 19px (ปุ่มเล็ก ตัวเลขขั้นตอน · ปุ่มหัวเว็บเปลี่ยนเป็นตัว 19px + --grad-orange แล้ว 14 ต.ค.) — ตัวขาว 4.7:1 (ซ้าย) ถึง 5.5:1 (ขวา)
     ห้ามใช้ --grad-orange กับตัวหนังสือที่เล็กกว่า 19px (มี test ตรวจ) */
  --orange-ink:#b5440f;
  /* ขั้นตอนการอบรม 7 ขั้น (landing): ส้มอ่อน → เข้ม ไล่ทีละระดับ · ตัวเลข 18px หนา = ข้อความปกติ (เกณฑ์ 4.5:1)
     qa 14 ต.ค.: ขั้น 1 เข้มขึ้น (ตัดกับพื้นครีมได้) · ขั้น 7 จบที่ส้มเข้มสด (= --orange-ink) ไม่หม่นเป็นน้ำตาล
     ขั้น 1–5 ตัว navy-900: 11.1 · 9.5 · 8.5 · 7.7 · 5.6:1 · ขั้น 6–7 ตัวขาว: 4.7 · 5.5:1 (tests/landing-v2.test.mjs คำนวณซ้ำ) */
  --jstep-1:#ffbf8c;--jstep-2:#ffa966;--jstep-3:#ff9a4d;--jstep-4:#ff8c3a;--jstep-5:#f0641e;--jstep-6:#c84c12;--jstep-7:#b5440f;
  --grad-orange-deep:linear-gradient(135deg,#c84c12 0%,#b5440f 100%);
  /* MMN — จากโปสเตอร์ */
  --gold-500:#F8C840;--gold-300:#F8D878;--gold-50:#FFFBEB;--indigo-600:#303070;
  /* สีตามความหมาย (สถานะ / error) */
  --ok-800:#174F2B;--ok-700:#1F6B3A;--ok-100:#E3F3E8;--warn-700:#7A4B00;--warn-100:#FFF3D6;--bad-800:#7F1616;--bad-700:#A11D1D;--bad-100:#FCE8E8;
  --white:#FFFFFF;
  --text:var(--navy-900);--muted:var(--navy-400);--line:var(--stone-200);
  --radius:16px;--max:1120px;
  --shadow:0 12px 40px rgba(13,23,44,.12);
  /* เงาปุ่ม: แยก "ขนาด" (--btn-sh*) กับ "สี" — หลังบ้านลดขนาดเงาได้โดยไม่ต้องใส่สีใน admin.css
     สีเงาส้ม = ของ DIPROM rgba(239,99,32,.28 / .36) */
  --btn-sh:0 10px 26px;--btn-sh-hover:0 14px 32px;
  --orange-shadow:rgba(239,99,32,.28);--orange-shadow-hover:rgba(239,99,32,.36);--navy-shadow:rgba(21,42,92,.25);
  --gold-shadow:rgba(248,200,64,.45);--gold-shadow-hover:rgba(248,200,64,.6);
  --bad-shadow:rgba(161,29,29,.28);--bad-shadow-hover:rgba(161,29,29,.36);--ok-shadow:rgba(31,107,58,.28);--ok-shadow-hover:rgba(31,107,58,.36);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:'Sarabun',Tahoma,sans-serif;font-size:17px;line-height:1.7;color:var(--text);background:var(--stone-50);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Prompt','Sarabun',sans-serif;line-height:1.3;margin:0}
p,ul,ol,dl,dd{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:var(--orange-ink)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.container{width:min(var(--max),calc(100% - 32px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.skip-link{position:fixed;left:12px;top:-80px;padding:10px 16px;background:var(--navy-900);color:var(--white);border-radius:8px;z-index:1000}
.skip-link:focus{top:12px}

/* ---------- ปุ่ม ---------- */
/* ปุ่มหลัก: แบบหน้า DIPROM — ไล่เฉดส้ม + เงาส้ม + ยกตัวตอน hover + แสงวิ่งผ่าน (::after)
   contrast: ครึ่งซ้าย–กลางของ --grad-orange เป็น #f0641e ทึบ (ตัวขาว 3.2:1) → ล็อกตัวหนา 700 ขนาด 19px (≥ 18.7px = ข้อความใหญ่ เกณฑ์ 3:1)
   ห้ามลดขนาดตัวอักษรของ .btn ต่ำกว่า 19px — ปุ่มตัวเล็ก (.btn-sm) ใช้ --grad-orange-deep ที่ผ่าน 4.5:1 แทน */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;font-family:'Prompt',sans-serif;font-weight:700;font-size:19px;color:var(--white);text-shadow:0 1px 1px rgba(0,0,0,.18);background:var(--grad-orange);box-shadow:var(--btn-sh) var(--orange-shadow);transition:transform .2s,box-shadow .2s,background-color .15s,border-color .15s,color .15s}
/* แสงวิ่ง: แถบขาวโปร่งเอียง วางพ้นขอบซ้ายไว้ แล้วเลื่อนผ่านไปขวาตอน hover (overflow:hidden ตัดส่วนเกิน) — ค่าเดียวกับ DIPROM */
.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;pointer-events:none}
/* hover เฉพาะอุปกรณ์ที่มีเมาส์ — กันปุ่มค้างสถานะ hover หลังแตะบนมือถือ */
@media (hover:hover){
  .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--btn-sh-hover) var(--orange-shadow-hover)}
  .btn:hover:not(:disabled)::after{left:130%}
}
.btn:active:not(:disabled){transform:translateY(0)}
/* focus: พื้นสว่างใช้ navy-900 (เห็นชัด) · พื้น navy ใช้ทอง */
:focus-visible{outline:3px solid var(--navy-900);outline-offset:2px}
.on-dark :focus-visible,.summary :focus-visible{outline-color:var(--gold-500)}
.btn:disabled{background:var(--navy-300);color:var(--navy-900);text-shadow:none;box-shadow:none;transform:none;cursor:not-allowed}
.btn:disabled::after{display:none}
.btn-sm{min-height:44px;padding:6px 16px;font-size:15px;background:var(--grad-orange-deep);text-shadow:none}
.btn-navy{background:var(--grad-navy);box-shadow:var(--btn-sh) var(--navy-shadow)}
@media (hover:hover){.btn-navy:hover:not(:disabled){box-shadow:var(--btn-sh-hover) var(--navy-shadow)}}
/* ปุ่มทอง MMN (ใช้ในกล่องข้อตกลง) — ตัว navy-900 บนทอง 11.3:1 */
.btn-gold{background:var(--gold-500);color:var(--navy-900);text-shadow:none;box-shadow:var(--btn-sh) var(--gold-shadow)}
@media (hover:hover){.btn-gold:hover:not(:disabled){background:var(--gold-300);box-shadow:var(--btn-sh-hover) var(--gold-shadow-hover)}}
/* ปุ่มรอง: พื้นใส ไม่มีเงา · hover ยกตัวเหมือนกัน เส้นขอบเป็นส้ม ตัวหนังสือส้มเข้ม (orange-ink บน orange-soft 5.0:1) */
.btn-ghost{background:transparent;color:var(--navy-900);text-shadow:none;border:1.5px solid var(--navy-200);box-shadow:none}
.btn-ghost:hover:not(:disabled){background:var(--orange-soft);color:var(--orange-ink);border-color:var(--orange);box-shadow:none}
.on-dark .btn-ghost{color:var(--white);border-color:var(--navy-400)}
.on-dark .btn-ghost:hover:not(:disabled){background:var(--navy-700);color:var(--white);border-color:var(--orange-2)}
/* สีตามความหมาย: พื้นทึบสีเดิม เงาเป็นสีของตัวเอง */
.btn-danger{background:var(--bad-700);text-shadow:none;box-shadow:var(--btn-sh) var(--bad-shadow)}
.btn-danger:hover:not(:disabled){background:var(--bad-800);box-shadow:var(--btn-sh-hover) var(--bad-shadow-hover)}
.btn-ok{background:var(--ok-700);text-shadow:none;box-shadow:var(--btn-sh) var(--ok-shadow)}
.btn-ok:hover:not(:disabled){background:var(--ok-800);box-shadow:var(--btn-sh-hover) var(--ok-shadow-hover)}
.btn-block{width:100%;flex-wrap:wrap;column-gap:8px;row-gap:0}
.nowrap{white-space:nowrap}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:var(--white);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- บล็อก "รอยืนยัน" (ใช้ซ้ำทุกหน้า) ---------- */
.pending-block{border:2px dashed var(--gold-500);border-radius:var(--radius);padding:14px 16px;background:rgba(248,200,64,.08);color:inherit;margin:12px 0}
.pending-block .pb-tag{display:inline-block;background:var(--gold-500);color:var(--navy-900);font-family:'Prompt',sans-serif;font-weight:600;font-size:13px;padding:2px 10px;border-radius:999px;margin-bottom:6px}
.pending-block .pb-what{font-weight:600}
.pending-block .pb-from{font-size:14px;opacity:.85}
.pending-block.compact{padding:10px 12px;margin:8px 0}
.on-light .pending-block,.card .pending-block{background:var(--gold-50)}
/* หน้าสาธารณะที่ตั้ง content.showPendingPublic = false: Worker ติด data-hide-pending ที่ <html>
   → ซ่อนกล่องรอยืนยัน · ป้ายรอยืนยันในประโยค · ช่องรอภาพ · ช่องรอโลโก้ · ส่วนที่มีความหมายเฉพาะตอนแสดงเรื่องรอยืนยัน (.pending-only)
   (หน้าเว็บที่มี JS ก็ไม่วาดของพวกนี้อยู่แล้ว — กฎนี้คือตาข่ายกันพลาด และใช้กับหน้า HTML ล้วนอย่างคู่มือ) */
[data-hide-pending] .pending-block,[data-hide-pending] .pending-inline,[data-hide-pending] .pending-only,
[data-hide-pending] .shot-placeholder,[data-hide-pending] .logo-slot{display:none!important}

/* ---------- ส่วนบน (หน้าผู้สมัคร: landing / thanks / 404) ----------
   แถบขาว + เส้นล่างบาง · โลโก้ทั้ง 2 ทำมาสำหรับพื้นขาวอยู่แล้ว วางตรงได้เลยไม่ต้องมีชิปรอง
   ข้อความ navy-900 (17.9:1) · ปุ่มส้มแบบ DIPROM · focus ใช้ navy-900 ตามกฎพื้นสว่างด้านบน
   (หน้าแอดมินใช้ .admin-top ของตัวเองใน admin.css — ยังเป็น navy เหมือนเดิม) */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);color:var(--navy-900);border-bottom:1px solid var(--stone-200)}
.header-inner{display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy-900)}
.brand img{display:block;width:auto}
/* ขนาดสายตาให้เท่ากัน: โลโก้ MMN เป็นวงกลมเส้นบาง มีที่ว่างรอบตัวอักษรเยอะ → ต้องสูงกว่าโลโก้ Conductor ที่เป็นตัวหนาแน่น */
.brand .logo-mmn{height:42px}
.brand .logo-conductor{height:32px}
#logo-mmn{display:inline-flex} /* กันโลโก้ลอยตาม baseline ของ span ห่อ ให้อยู่แนวเดียวกับโลโก้ Conductor */
.brand .x{color:var(--navy-400)}
.logo-slot{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 10px;border:1.5px dashed var(--navy-300);border-radius:8px;color:var(--navy-700);font-size:12px;white-space:nowrap}
.header-cta{margin-left:auto}
/* ปุ่มหัวเว็บ (14 ต.ค. เจ้าของสั่ง): สี/เงา/แสงวิ่งตอน hover เหมือนปุ่มหลัก — รับ --grad-orange + text-shadow จาก .btn ตรง ๆ
   contrast: ใช้กติกาเดียวกับ .btn = ตัวหนา 700 ขนาด 19px (ข้อความใหญ่ เกณฑ์ 3:1 · ตัวขาวบน #f0641e 3.2:1) ห้ามลดต่ำกว่า 19px
   (ส้มสว่างกับตัว 16px ไม่ผ่าน 4.5:1 ทุกเฉด) · line-height 1.6 ให้ปุ่มสูง 44px เท่าเดิม · มือถือ 320px ข้อความยาวสุดยังพอดีหัวเว็บ */
.header-cta .btn{min-height:44px;padding:6px 18px;font-size:19px;line-height:1.6}
/* ประกายวิ่งเองทุก 6 วิ (ปุ่มหลักวิ่งเฉพาะตอน hover — หัวเว็บติดจอตลอดจึงให้วิ่งเองเป็นจังหวะช้า ๆ)
   แถบเดียวกับ .btn::after (กว้าง 35% เอียง -20° ขาวโปร่ง .35) แต่ใช้ ::before แยก เพื่อไม่ชนแสงวิ่งตอน hover ที่ใช้ ::after
   เลื่อนด้วย transform (543% ของความกว้างแถบ = ระยะ -60% → 130% ของปุ่ม เท่ากับตอน hover) · วิ่ง 0.9 วิแรกของรอบ ที่เหลือพัก */
.header-cta .btn::before{content:'';position:absolute;inset:-40% auto -40% -60%;width:35%;transform:translateX(0) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);pointer-events:none;animation:header-cta-shine 6s ease-in-out 1.2s infinite}
@keyframes header-cta-shine{0%{transform:translateX(0) skewX(-20deg)}15%,100%{transform:translateX(543%) skewX(-20deg)}}

/* ---------- landing ---------- */
.on-dark{background:var(--navy-900);color:var(--white)}
.on-dark .muted{color:var(--navy-300)}
.on-dark a{color:var(--orange-3)}
/* ลิงก์ที่เป็นปุ่มบนพื้นเข้มต้องตัวขาว — กฎ .on-dark a (0,1,1) ชนะ .btn (0,1,0) ทำให้ปุ่ม "ลงทะเบียน" ใน hero เคยเป็นตัวส้มอ่อนบนส้ม (~2:1) */
.on-dark .btn:not(:disabled){color:var(--white)}
.hero{padding:48px 0 56px;background:var(--grad-navy)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.hero-grid>*{min-width:0}
/* เนื้อหา hero ค่อย ๆ ลอยขึ้นตอนโหลด (ข้อความก่อน โปสเตอร์ตามมา) */
.hero-grid>*{animation:arrive .8s cubic-bezier(.2,.7,.2,1) both}
.hero-grid>*+*{animation-delay:.15s}
/* ไม่มีโปสเตอร์ (poster-wrap ว่าง) → hero คอลัมน์เดียว ซ่อนช่องว่าง จำกัดความกว้างข้อความให้อ่านง่าย */
.poster-wrap:empty{display:none}
.hero-grid:has(>.poster-wrap:empty){grid-template-columns:minmax(0,1fr)}
.hero-grid:has(>.poster-wrap:empty)>:first-child{max-width:760px}
@keyframes arrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero .hero-intro{margin:10px 0 4px;font-size:clamp(17px,2vw,20px);color:var(--white)}
.hero .tagline{color:var(--gold-500);font-family:'Prompt',sans-serif;font-weight:600;font-size:clamp(18px,2.4vw,24px)}
.hero h1{font-size:clamp(40px,7vw,76px);font-weight:700;letter-spacing:-.01em;line-height:1.1;margin:6px 0 10px}
.hero .organizer{color:var(--navy-200);font-size:16px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0}
.fact{background:var(--indigo-600);border-radius:12px;padding:12px 14px}
.fact .k{font-size:13px;color:var(--navy-200)}
.fact .v{font-family:'Prompt',sans-serif;font-weight:600;font-size:18px}
.fact .s{font-size:13px;color:var(--gold-300)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.poster{border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.45);border:1px solid var(--navy-600)}
.section{padding:56px 0}
.section.alt{background:var(--stone-100)}
.section h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:6px}
.section .lead{color:var(--muted);margin-bottom:20px}
.eyebrow{display:inline-block;font-family:'Prompt',sans-serif;font-weight:600;font-size:14px;color:var(--orange-ink);margin-bottom:8px}
.on-dark .eyebrow{color:var(--gold-500)}

.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:8px}
.price{border-radius:var(--radius);padding:20px;background:var(--white);border:1.5px solid var(--line)}
.price.early{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900)}
.price .k{font-weight:600}
.price .amt{font-family:'Prompt',sans-serif;font-weight:700;font-size:clamp(36px,6vw,48px);line-height:1.1;margin:6px 0}
.price .sub{font-size:15px}
.price.inactive{opacity:.6}
.price-cta{margin:14px 0 6px}
.price .badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--navy-900);color:var(--white)}

.speakers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.speaker{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.speaker h3{font-size:20px;border-left:4px solid var(--gold-500);padding-left:10px}
.speaker .bio{margin-top:8px;color:var(--muted);white-space:pre-line}
.speaker .role{margin-top:6px;color:var(--muted);font-size:15px}
.speaker .speaker-tagline{margin-top:8px;font-family:'Prompt',sans-serif;font-weight:600;color:var(--orange-ink)}
.speaker-photo{width:100%;aspect-ratio:1;object-fit:cover;object-position:center top;border-radius:10px;margin-bottom:12px;background:linear-gradient(180deg,var(--orange-soft) 0%,var(--navy-100) 100%)} /* รูปพื้นใส: ใส่พื้นหลังอ่อนให้ตัวคนเด่น · ชิดบนไม่ตัดหัว */
.price-note{font-size:14px;color:var(--muted);margin:4px 0 0}
/* ประโยคที่นั่งจำกัด/รายชื่อสำรอง ใต้การ์ดราคา (ย้ายมาจากส่วน Early Bird เดิม) — ตัวเท่าเนื้อหา ไม่ใช่หมายเหตุตัวเล็ก */
.price-seats{margin:12px 0 14px;font-size:16px;color:var(--muted)}
.summary .price-note{color:var(--navy-200);margin-top:8px}
.summary .line span:last-child{white-space:nowrap} /* ตัวเลขเงินไม่ตัดบรรทัด */
.summary .line.sub{font-size:14px;color:var(--navy-200);padding-left:12px}
.wht-mailto{margin:8px 0 12px;padding:12px 14px;border-radius:10px;background:var(--stone-100);border:1px solid var(--line);font-size:15px}
.wht-mailto .label{font-weight:600;margin-bottom:4px}
.sub-h{font-size:20px;margin:18px 0 10px}
.outcomes{font-size:17px;font-weight:600}
.sessions{display:grid;gap:14px}
.session{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.session-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.session-time{font-family:'Prompt',sans-serif;font-weight:600;color:var(--navy-700)}
.session h4{font-size:18px;margin:6px 0 4px}
.session-summary{color:var(--muted)}
.session-topics{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.session-speaker{margin-top:10px;font-size:15px;font-weight:600}
.small{font-size:13px;font-weight:400}
/* การ์ดข้อมูลบนหน้า landing ยกตัวเล็กน้อยตอน hover · ไม่ใส่กับ .card เพราะเป็นกล่องฟอร์ม/สถานะ ขยับขณะกรอกจะรบกวน */
.price,.speaker,.session{transition:transform .3s,box-shadow .3s}
@media (hover:hover){.price:hover,.speaker:hover,.session:hover{transform:translateY(-4px);box-shadow:var(--shadow)}}

.schedule{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.schedule th,.schedule td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.schedule th{background:var(--navy-900);color:var(--white);font-weight:600;font-size:14px}
.schedule tr.break td{background:var(--stone-100);color:var(--muted)}
.schedule .time{white-space:nowrap;font-family:'Prompt',sans-serif;font-weight:600}
.schedule .note{font-size:14px;color:var(--muted)}
.cpd-tag{display:inline-block;font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--gold-300);color:var(--navy-900);white-space:nowrap}
.cpd-sum{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.text-block{white-space:pre-line}
.check-list{list-style:none;padding:0;display:grid;gap:8px}
.check-list li{position:relative;padding-left:22px}
.check-list li::before{content:'';position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--gold-500);border-radius:2px}
.faq dt{font-weight:600;margin-top:12px}.faq dd{color:var(--muted)}

/* ขั้นตอนการอบรม (landing) — แนวนอน (เจ้าของสั่ง 14 ต.ค. 2569): วงตัวเลขไล่ส้มอ่อน → เข้ม เส้นเชื่อมไล่สีตาม · ชื่อขั้น/คำอธิบายใต้ตัวเลข จัดกึ่งกลาง
   จอ ≥ 900px: 7 ขั้นแถวเดียวเต็มความกว้าง · จอเล็กกว่า: แถบเลื่อนข้างในกล่อง (scroll-snap · เห็นขั้นถัดไปโผล่ให้รู้ว่าเลื่อนได้ · ทั้งหน้าไม่เลื่อนข้าง)
   สีต่อขั้นตั้งที่ li (--js-bg พื้นวง · --js-fg ตัวเลข · --js-next สีวงถัดไป ใช้ไล่สีเส้นเชื่อม) */
.journey{list-style:none;padding:0 0 8px;margin:18px 0 0;counter-reset:j;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
.journey-step{position:relative;counter-increment:j;padding:0 6px;text-align:center;min-width:0}
.journey-step::before{content:counter(j);position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;margin:0 auto 8px;border-radius:50%;background:var(--js-bg,var(--grad-orange-deep));color:var(--js-fg,var(--white));font:700 18px/1 'Prompt',sans-serif;box-shadow:0 6px 14px rgba(239,99,32,.22)}
.journey-step:not(:last-child)::after{content:'';position:absolute;top:19px;left:calc(50% + 24px);right:calc(-50% + 24px);height:3px;border-radius:2px;background:linear-gradient(90deg,var(--js-bg,var(--navy-100)),var(--js-next,var(--navy-100)))}
.journey-step:nth-child(1){--js-bg:var(--jstep-1);--js-next:var(--jstep-2);--js-fg:var(--navy-900)}
.journey-step:nth-child(2){--js-bg:var(--jstep-2);--js-next:var(--jstep-3);--js-fg:var(--navy-900)}
.journey-step:nth-child(3){--js-bg:var(--jstep-3);--js-next:var(--jstep-4);--js-fg:var(--navy-900)}
.journey-step:nth-child(4){--js-bg:var(--jstep-4);--js-next:var(--jstep-5);--js-fg:var(--navy-900)}
.journey-step:nth-child(5){--js-bg:var(--jstep-5);--js-next:var(--jstep-6);--js-fg:var(--navy-900)}
.journey-step:nth-child(6){--js-bg:var(--jstep-6);--js-next:var(--jstep-7);--js-fg:var(--white)}
.journey-step:nth-child(7){--js-bg:var(--jstep-7);--js-fg:var(--white)}
.journey-step h3{font-size:16px;line-height:1.35;margin:0 0 2px}
.journey-step p{color:var(--muted);font-size:14px;line-height:1.5}
.journey-step .pending-block{background:var(--gold-50);text-align:left}
/* จอ 700–899px: ยังแถวเดียวพอดีจอ (ตัวอักษรเล็กลง) · เล็กกว่า 700px: แถบเลื่อนข้าง + เงาขอบบอกว่าเลื่อนได้ */
@media (min-width:700px) and (max-width:899px){
  .journey-step{padding:0 3px}
  .journey-step h3{font-size:14px}
  .journey-step p{font-size:12.5px}
}
@media (max-width:699px){
  /* เงาขอบ (scroll shadow): ชั้น local เลื่อนตามเนื้อหา ปิดเงาเมื่อสุดขอบ · ชั้น scroll ติดกรอบ = เงาที่เห็นตอนยังเลื่อนต่อได้ */
  .journey{background:linear-gradient(90deg,var(--stone-50) 30%,rgba(250,249,248,0)) left/40px 100% local no-repeat,linear-gradient(270deg,var(--stone-50) 30%,rgba(250,249,248,0)) right/40px 100% local no-repeat,radial-gradient(farthest-side at 0 50%,rgba(13,23,44,.16),transparent) left/14px 100% scroll no-repeat,radial-gradient(farthest-side at 100% 50%,rgba(13,23,44,.16),transparent) right/14px 100% scroll no-repeat}
  .journey{grid-auto-columns:30%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-left:0}
  .journey-step{scroll-snap-align:start}
}
@media (max-width:600px){
  .journey{grid-auto-columns:40%}
}
.journey-empty{list-style:none}

/* การ์ดคู่มือ (ส่วนเตรียมความพร้อม) */
.guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 8px}
.guide-card{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);color:var(--navy-900);text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s}
@media (hover:hover){.guide-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--orange-3)}}
.gc-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--grad-orange-deep);color:var(--white);box-shadow:0 8px 18px rgba(239,99,32,.25);margin-bottom:4px}
.gc-title{font-family:'Prompt',sans-serif;font-weight:600;font-size:18px;line-height:1.35}
.gc-desc{color:var(--muted);font-size:15px;flex:1}
.gc-go{font-weight:600;color:var(--orange-ink)}
.guide-links{margin-top:12px;font-size:15px}

/* ---------- การ์ด/ฟอร์ม ---------- */
.card{background:var(--white);color:var(--navy-900);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.form-section{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.form-section:first-child,.hp+.form-section{border-top:0;padding-top:0;margin-top:0}
.form-section h3{font-size:20px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.form-section h3 .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy-900);color:var(--white);font-size:14px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:140px repeat(2,minmax(0,1fr));gap:12px}
.grid2>*,.grid3>*,.facts>*{min-width:0}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label,.field .label{font-weight:600;font-size:15px}
.field .hint{font-size:14px;color:var(--muted)}
.field .small-note{font-size:13px}
.req{color:var(--bad-700)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid var(--navy-400);border-radius:10px;background:var(--white);font-size:16px}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy-900);box-shadow:0 0 0 3px rgba(239,99,32,.25)}
/* ช่องที่ยังผิด: ต้องชนะ .field input[type=text] (0,2,1) → ใช้ form .field … (0,2,2)+ */
form .field :is(input,select,textarea).invalid{border-color:var(--bad-700);background:var(--bad-100)}
form .field :is(input,select,textarea).invalid:focus{box-shadow:0 0 0 3px var(--bad-100)}
form .field .choices.invalid .choice{border-color:var(--bad-700)}
form .field .drop.invalid{border-color:var(--bad-700);background:var(--bad-100)}
.field input[readonly]{background:var(--stone-100);color:var(--navy-700)}
.err-msg{color:var(--bad-700);font-size:14px;font-weight:600}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1.5px solid var(--navy-400);border-radius:10px;cursor:pointer;background:var(--white)}
.choice:has(input:checked){border-color:var(--orange);background:var(--orange-soft)}
.choice input{accent-color:var(--orange);width:18px;height:18px}
.choice:has(input:focus-visible),.check:has(input:focus-visible),.drop:has(input:focus-visible){outline:3px solid var(--navy-900);outline-offset:2px}
.choice input:focus-visible,.check input:focus-visible{outline:0}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--navy-200);border-radius:10px;margin-bottom:8px;cursor:pointer;background:var(--white)}
.check:has(input:checked){border-color:var(--ok-700);background:var(--ok-100)}
.check input{margin-top:5px;width:20px;height:20px;accent-color:var(--ok-700);flex-shrink:0}
.drop{display:block;position:relative;border:2px dashed var(--navy-400);border-radius:12px;padding:16px;text-align:center;cursor:pointer;background:var(--stone-50)}
.drop:hover,.drop.over{border-color:var(--orange);background:var(--orange-soft)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop .ok{color:var(--ok-700);font-weight:600}
.drop img.preview{max-height:160px;margin:8px auto 0;border-radius:8px}
.summary{background:var(--navy-900);color:var(--white);border-radius:var(--radius);padding:18px}
.summary .line{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--navy-700)}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px}
.summary .total .amt{font-family:'Prompt',sans-serif;font-weight:700;font-size:30px;color:var(--gold-500)}
.summary .muted{color:var(--navy-200)}
.summary .tier{display:inline-block;background:var(--gold-500);color:var(--navy-900);font-weight:600;font-size:13px;padding:2px 10px;border-radius:999px}
/* บล็อกรอยืนยันบนพื้น navy ของสรุปยอด: พื้นเข้ม ตัวขาว (ต้องชนะกฎ .card .pending-block ที่เป็นพื้นสว่าง) */
.card .summary .pending-block,.on-dark .pending-block{background:var(--navy-800);color:var(--white)}
.bank{border:1.5px solid var(--line);border-radius:12px;padding:14px;margin-top:12px}
.bank .no{font-family:'Prompt',sans-serif;font-weight:700;font-size:22px;letter-spacing:.04em}
.form-error{background:var(--bad-100);color:var(--bad-700);border-radius:10px;padding:10px 14px;margin:12px 0}
.pay-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0 8px;padding:10px 14px;border-radius:10px;background:var(--gold-50);border:1.5px solid var(--gold-500)}
.pay-line b{font-family:'Prompt',sans-serif;font-size:22px;white-space:nowrap}
.pay-line .muted{flex-basis:100%;font-size:14px}
.submit-why{font-size:14px;color:var(--muted);margin-top:8px}
.state-box{text-align:center;padding:30px 18px}
/* แถบโหมดดูตัวอย่างฟอร์ม (ยังไม่เปิดรับ) — โทนกรมท่าอ่อน ไม่ใช่สีเหลืองของกล่องรอยืนยัน */
.preview-bar{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0 0 14px;padding:12px 16px;border-radius:10px;background:var(--navy-100);border-left:4px solid var(--navy-500);color:var(--navy-900);font-size:15px;line-height:1.5}
.preview-bar[hidden]{display:none}
.preview-bar b{font-size:16px}
/* รายชื่อสำรอง (9 ต.ค. 2569) — แถบบนฟอร์ม · กล่องในหน้าขอบคุณ/หน้าจัดการ/หน้าชำระเงิน · ป้าย */
.waitlist-bar{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;padding:12px 16px;border-radius:10px;background:var(--warn-100);border-left:4px solid var(--orange);color:var(--warn-700);font-size:15px;line-height:1.5}
.waitlist-bar[hidden]{display:none}
.waitlist-bar b{font-size:16px;color:var(--navy-900)}
.waitlist-agree{padding:10px 12px 6px;border-radius:10px;border-left:4px solid var(--orange);background:var(--warn-100)}
.waitlist-agree .agree-hint{color:var(--warn-700)}
.waitlist-box{margin:12px 0;padding:12px 16px;border-radius:10px;background:var(--warn-100);border-left:4px solid var(--orange);color:var(--warn-700);font-size:15px;line-height:1.55}
.waitlist-box[hidden]{display:none}
.waitlist-box b{display:block;font-size:16px;color:var(--navy-900)}
.waitlist-pill{display:inline-block;padding:2px 12px;border-radius:999px;font-weight:600;font-size:14px;background:var(--orange-soft);color:var(--orange-ink);border:1px solid var(--orange-3)}
.state-box h3{font-size:24px;margin-bottom:8px}
.countdown{display:flex;justify-content:center;gap:10px;margin-top:14px}
.countdown div{background:var(--navy-900);color:var(--white);border-radius:12px;padding:10px 14px;min-width:70px}
.countdown b{display:block;font-family:'Prompt',sans-serif;font-size:28px;color:var(--gold-500)}
.cap-bar{height:10px;background:var(--navy-100);border-radius:999px;overflow:hidden;margin-top:6px}
.cap-bar span{display:block;height:100%;background:var(--orange)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.site-footer{padding:28px 0;font-size:15px}
.site-footer .row{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:center}
/* ช่องทางติดต่อหลายองค์กร (ท้ายเว็บ + หน้าขอบคุณ) — จอแคบเรียงลงทีละบล็อก */
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px 32px;line-height:1.6}
.contact-head{margin-bottom:2px}
.contact-topic{opacity:.85}
.contact-hours{opacity:.8}
.site-footer #footer-contact{flex:1 1 520px}
.contacts a{overflow-wrap:anywhere}

/* ช่องยอมรับแบบช่องเดียว (ข้อตกลง / ข้อกำหนด) + ปุ่มลิงก์เปิดกล่อง */
.agree .check{margin-bottom:4px}
.agree-hint{font-size:14px;color:var(--muted);margin:0 0 4px 2px}
form .field .agree.invalid .check{border-color:var(--bad-700)}
.check-optional{border-style:dashed}
.check-optional:has(input:checked){border-style:solid}
.optional-text{margin:0 0 4px;padding:8px 12px 8px 30px;font-size:14px;color:var(--muted);background:var(--stone-50);border-radius:10px;display:grid;gap:6px}
.link-btn{border:0;background:none;padding:6px 0;min-height:32px;font:inherit;font-weight:600;color:var(--orange-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* กล่องรายการ (dialog) — กว้างไม่เกินจอ เนื้อหาเลื่อนในกล่อง ปุ่มอยู่ล่างเสมอ */
.modal{width:min(640px,calc(100% - 24px));max-width:none;max-height:min(88vh,780px);margin:auto;padding:0;border:0;border-radius:var(--radius);background:var(--white);color:var(--navy-900);box-shadow:0 30px 80px rgba(13,23,44,.35);overflow:hidden}
.modal[open]{display:flex;flex-direction:column}
.modal::backdrop{background:rgba(13,23,44,.62)}
.modal-head{padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:20px;margin-bottom:4px}
.modal-head p{font-size:14px}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 20px;overscroll-behavior:contain}
.modal-body:focus-visible{outline-offset:-3px}
.modal-list{padding-left:22px;display:grid;gap:12px}
.modal-list li::marker{font-family:'Prompt',sans-serif;font-weight:600;color:var(--orange-ink)}
.modal-links{margin-top:14px;font-size:15px}
/* หนังสือแจ้งฯ ในกล่อง (MMN.consentNoticeHtml): หัวข้อ + ย่อหน้า + กล่องข้อที่ยินยอม (ป้าย จำเป็น / ไม่บังคับ) */
.notice-doc{display:grid;gap:14px;font-size:15px;line-height:1.65}
.notice-doc p{margin:0}
.nd-sec{display:grid;gap:8px}
.nd-h{margin:0;font:600 15px/1.55 'Prompt',sans-serif;color:var(--navy-900)}
.nd-item{padding:10px 12px;border:1.5px solid var(--navy-200);border-left:4px solid var(--orange-ink);border-radius:10px;background:var(--stone-50)}
.nd-item.nd-optional{border-left-color:var(--navy-300)}
.nd-tag{display:inline-block;margin-bottom:4px;padding:1px 8px;border-radius:999px;background:var(--orange-soft);color:var(--orange-ink);font:600 12px/1.6 'Prompt',sans-serif}
.nd-optional .nd-tag{background:var(--navy-100);color:var(--navy-700)}
.nd-note{font-style:italic;color:var(--muted);font-size:14px}
.modal-actions{display:flex;flex-wrap:wrap;gap:10px;padding:14px 20px 18px;border-top:1px solid var(--line)}
.modal-actions .btn{flex:1 1 200px}
/* เบราว์เซอร์เก่าที่ไม่มี <dialog>: วางกลางจอแบบ fixed + พื้นหลังมืดด้วยเงากว้าง */
.modal-fallback{position:fixed;left:0;right:0;top:4vh;z-index:200;box-shadow:0 0 0 100vmax rgba(13,23,44,.62)}

/* ---------- หน้าคู่มือ /guide/* ---------- */
.page{padding:44px 0 72px}
.page .container{max-width:860px}
.page h1{font-size:clamp(28px,4.4vw,40px);font-weight:700;margin:4px 0 10px}
.accent{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.page .lead{color:var(--muted);margin-bottom:20px}
.os-switch{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.os-switch a{text-decoration:none;color:var(--navy-900);padding:8px 18px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;border:1.5px solid var(--navy-200);font-weight:600;background:var(--white)}
.os-switch a[aria-current=page]{background:var(--grad-navy);color:var(--white);border-color:transparent}
.page h2{font-size:clamp(22px,3vw,28px);margin:34px 0 12px}
.guide-steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:14px}
.guide-steps>li{position:relative;padding:18px 18px 18px 64px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);min-width:0}
.guide-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-deep);color:var(--white);display:grid;place-items:center;font:700 15px/1 'Prompt',sans-serif}
.guide-steps h3{font-size:18px;margin-bottom:4px}
.guide-steps p,.guide-steps li li{font-size:16px}
.guide-steps p+p{margin-top:8px}
.guide-steps ul{padding-left:20px;margin-top:6px;display:grid;gap:4px}
.page code,.page kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:var(--stone-100);border:1px solid var(--line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
.page a{overflow-wrap:anywhere}
.note{margin:14px 0;padding:12px 16px;border-radius:12px;background:var(--gold-50);border-left:5px solid var(--gold-500)}
.note.info{background:var(--stone-100);border-left-color:var(--navy-400)}
.prompt-box{margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--navy-900);color:var(--white);font-size:15px;line-height:1.6}
.shot{margin:12px 0 4px}
.shot img{width:100%;border-radius:12px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(13,23,44,.08)}
.shot figcaption{font-size:14px;color:var(--muted);margin-top:6px;text-align:center}
.shot-placeholder{display:grid;place-items:center;align-content:center;text-align:center;gap:4px;min-height:150px;padding:18px;border:2px dashed var(--navy-300);border-radius:12px;background:var(--stone-50);color:var(--navy-400);font-size:15px}
.shot-placeholder b{color:var(--navy-700)}
.guide-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:16px}
.guide-table th,.guide-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.guide-table th{background:var(--navy-900);color:var(--white);font-weight:600;font-size:14px}
.guide-table td:first-child{font-weight:600;white-space:nowrap}
.guide-table .pending-inline,.pending-inline{display:inline-block;background:var(--gold-300);color:var(--navy-900);font-weight:600;font-size:14px;padding:1px 8px;border-radius:6px}
.guide-check{list-style:none;padding:0;display:grid;gap:8px}
.guide-check li{position:relative;padding-left:30px}
.guide-check li::before{content:'';position:absolute;left:0;top:.3em;width:18px;height:18px;border:2px solid var(--navy-400);border-radius:5px;background:var(--white)}
.guide-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.guide-toc a{font-size:14px;padding:4px 12px;border-radius:999px;background:var(--white);border:1px solid var(--line);text-decoration:none;color:var(--navy-900)}
.guide-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.guide-help{margin-top:12px}
.table-wrap{overflow-x:auto;margin:4px 0}
.page .shot-placeholder{margin:12px 0}
.page .check-list{margin-bottom:8px}

/* ---------- landing ฉบับเนื้อหา 14 ต.ค. 2569 (aiforacc-landing.html) — คอมโพเนนต์เพิ่มเท่าที่จำเป็น ใช้สี/ตัวอักษรชุดเดิม ----------
   มือถือมาก่อน: การ์ดเรียงแถวเดียว · ตารางเลื่อนในกรอบ (ไม่ทำให้ทั้งหน้าเลื่อนข้าง) · แถบภาพเลื่อนซ้าย–ขวา */
.container.narrow{max-width:860px}
.section.center,.section.center .lead{text-align:center}
.section h2.display{font-size:clamp(28px,4.6vw,44px)}
.on-dark .lead{color:var(--navy-200)}
/* หัวข้อใหญ่ hero เป็นประโยคยาว (course.tagline) → ลดเพดานขนาดลงจาก h1 ชื่อหลักสูตรเดิม */
.hero h1.h1-long{font-size:clamp(32px,5.4vw,56px);line-height:1.18}
.hero .hero-lead{font-size:clamp(17px,2vw,20px);color:var(--white);margin:0 0 4px}
.hero .hero-intro{color:var(--navy-200)}
.hero-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 16px}
.hp-was{color:var(--navy-300);text-decoration:line-through;font-size:16px}
.hp-now{font-family:'Prompt',sans-serif;font-weight:700;font-size:clamp(30px,4.4vw,40px);color:var(--gold-500);line-height:1.15}
.hp-note{flex-basis:100%;font-size:14px;color:var(--gold-300)}
.hero-visual{width:100%;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.45);border:1px solid var(--navy-600)}
.statement{margin:18px 0 6px;padding:12px 16px;border-left:4px solid var(--orange);background:var(--orange-soft);border-radius:0 10px 10px 0;font-family:'Prompt',sans-serif;font-weight:600;color:var(--navy-900)}
.pain-list{list-style:none;padding:0;display:grid;gap:8px;margin:4px 0 0}
.pain-list li{position:relative;padding:10px 12px 10px 38px;background:var(--white);border:1px solid var(--line);border-radius:12px}
.pain-list li::before{content:'×';position:absolute;left:12px;top:8px;font:700 20px/1.2 'Prompt',sans-serif;color:var(--bad-700)}
/* การ์ดข้อความ (ผลลัพธ์ 4 ข้อ · หลัก 3 ข้อ · กลุ่มผู้เรียน · สิ่งที่ได้ · ต่อยอด) — หน้าตาเดียวกับการ์ดวิทยากร */
.info-grid{display:grid;gap:12px;margin:4px 0 0}
.info-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.info-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:transform .3s,box-shadow .3s}
@media (hover:hover){.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}}
.info-card h3{font-size:18px;margin:2px 0 4px;border-left:4px solid var(--gold-500);padding-left:10px}
.info-card p{color:var(--muted);font-size:16px}
.info-num{display:inline-block;font:700 14px/1.6 'Prompt',sans-serif;color:var(--orange-ink);margin-bottom:4px}
.section-cta{margin-top:20px}
.btn[aria-disabled="true"]{background:var(--navy-300);color:var(--navy-900);text-shadow:none;box-shadow:none;transform:none;cursor:not-allowed}
.btn[aria-disabled="true"]::after,.btn[aria-disabled="true"]::before{display:none}
.on-dark .btn[aria-disabled="true"]{color:var(--navy-900)}
/* ตารางในกรอบเลื่อนได้ */
.table-scroll{overflow-x:auto;margin-top:14px;-webkit-overflow-scrolling:touch}
.cpd-status{font-size:15px;font-weight:600;color:var(--navy-700);margin:-8px 0 4px}
.agenda .row-title{font-family:'Prompt',sans-serif;font-weight:600}
.agenda .row-desc{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.agenda .row-topics{margin:6px 0 0;padding-left:20px;display:grid;gap:2px;font-size:15px}
.agenda .speaker-col{white-space:nowrap;font-weight:600}
.agenda .speaker-mobile{display:none;margin-top:6px;font-size:14px;font-weight:600;color:var(--navy-700)}
/* รายละเอียดแต่ละช่วง (details): จอกว้างเปิดเสมอ (landing.js syncAgendaOpen) และซ่อนปุ่มพับ · จอแคบพับไว้ แตะเปิด */
.agenda .row-more>summary{display:none}
.agenda .row-more>summary::-webkit-details-marker{color:var(--orange-ink)}
.schedule.compare th[scope=row]{background:var(--stone-100);color:var(--navy-900);font-size:15px;white-space:nowrap}
.schedule.compare td:last-child{font-weight:600}
.schedule.calc td{white-space:nowrap}
.table-note{font-size:14px;color:var(--muted);margin-top:8px}
.paras{display:grid;gap:12px}
/* แถบภาพบรรยากาศ — สูงเท่ากัน กว้างตามสัดส่วนภาพ · เลื่อนในแถบ */
.gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(16px,calc((100% - var(--max)) / 2)) 4px;-webkit-overflow-scrolling:touch}
.gallery-item{flex:0 0 auto;margin:0;scroll-snap-align:start}
.gallery-item img{height:220px;width:auto;max-width:none;border-radius:12px;border:1px solid var(--line);background:var(--stone-100)}
/* ข้อความ + ภาพ 2 คอลัมน์ (จอแคบเรียงลง) */
.two-col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center}
.two-col>*{min-width:0}
.landing-figure{margin:0}
.landing-figure img{width:100%;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.landing-figure figcaption{font-size:14px;color:var(--muted);margin-top:8px;text-align:center}
.on-dark .landing-figure figcaption{color:var(--navy-200)}
/* ส่วนพื้นกรมท่า (Skill ติดเครื่อง · ปิดท้าย) */
.section.band-navy{background:var(--grad-navy)}
.band-navy .schedule{color:var(--navy-900)}
.notfor{display:grid;gap:10px;margin-top:4px}
.notfor-item{padding:12px 16px;border-radius:12px;background:var(--white);border:1px solid var(--line)}
.notfor dt{font-family:'Prompt',sans-serif;font-weight:600}
.notfor dd{color:var(--muted);font-size:16px;margin-top:2px}
.slot-pill{display:inline-block;margin:6px 0;padding:6px 14px;border-radius:999px;background:var(--gold-500);color:var(--navy-900);font-family:'Prompt',sans-serif;font-weight:600}
.close-list{list-style:none;padding:0;display:grid;gap:6px;margin:4px auto 20px;max-width:620px;text-align:left}
.close-list li{position:relative;padding-left:26px}
.close-list li::before{content:'✓';position:absolute;left:0;color:var(--gold-500);font-weight:700}
.status-label{font-family:'Prompt',sans-serif;font-weight:600;font-size:14px;color:var(--orange-ink);margin-bottom:4px}
.apply-note{font-size:14px;margin-top:10px}
.closing-tagline{margin-top:18px;font-family:'Prompt',sans-serif;font-weight:600;color:var(--gold-300)}
.prep-short{padding-left:24px;display:grid;gap:4px}
.prep-short li::marker{font-family:'Prompt',sans-serif;font-weight:600;color:var(--orange-ink)}
.faq-list{margin-top:20px;border-bottom:1px solid var(--line)}
.footer-updated{margin-top:14px;font-size:13px;color:var(--navy-300)}
@media (max-width:860px){
  /* แท็บเล็ต: การ์ด 3 ใบยังเรียง 3 คอลัมน์ (ไม่ตกเป็น 2+1) · การ์ด 4 ใบเป็น 2×2 */
  .info-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .info-grid.g2,.info-grid.g3,.info-grid.g4{grid-template-columns:minmax(0,1fr)}
  /* ตารางเทียบ "จำคำสั่งกลับไปเอง vs Skill ติดเครื่อง": มือถือเป็นการ์ดต่อแถว ชื่อคอลัมน์อยู่หน้าค่า (data-label จาก landing.js) */
  .schedule.compare thead{display:none}
  .schedule.compare,.schedule.compare tbody,.schedule.compare tr,.schedule.compare th,.schedule.compare td{display:block;width:100%}
  .schedule.compare tr{border-bottom:1px solid var(--line)}
  .schedule.compare th[scope=row]{white-space:normal;padding:10px 14px 4px;background:var(--stone-100)}
  .schedule.compare td{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:8px;padding:6px 14px;border-bottom:0}
  .schedule.compare td::before{content:attr(data-label);color:var(--muted);font-weight:400;font-size:14px}
  .schedule.compare tr td:last-child{padding-bottom:10px}
  .info-card{padding:12px 14px}
  .gallery-item img{height:160px}
  .statement{font-size:16px}
  /* ตารางคืนทุน 4 คอลัมน์: ให้ตัดบรรทัดได้ ไม่ต้องเลื่อนข้าง */
  .schedule.calc th,.schedule.calc td{white-space:normal;padding:10px 8px;font-size:15px}
  /* การ์ดคู่มือบนมือถือ: ไอคอนซ้าย ข้อความขวา (เตี้ยลง) */
  #guide-cards .guide-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:2px;padding:12px 14px}
  #guide-cards .gc-icon{grid-row:1 / span 3;margin:0}
  #guide-cards .gc-title{font-size:17px}
  #guide-cards .gc-desc{font-size:14px}
  /* การ์ดวิทยากรบนมือถือ: รูปเล็กซ้าย ข้อความขวา (เดิมรูปเต็มความกว้าง ~370px ต่อคน — หน้ายาวเกิน) */
  .speakers{gap:10px}
  .speaker{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;align-items:start;padding:12px}
  .speaker .speaker-photo{grid-row:1 / span 3;margin:0}
  .speaker h3{font-size:18px}
  .speaker .role{margin-top:2px;font-size:14px}
  .speaker .speaker-tagline{margin-top:4px;font-size:15px}
}

/* ---------- กล่อง "สมัครเข้าอบรม" หน้าแรก (ฟอร์มย้ายไป /register แล้ว — กล่องนี้บอกสถานะ + ปุ่มไปหน้าลงทะเบียน) ---------- */
.apply-box h2{margin-bottom:12px}
.apply-go{margin-top:20px}
.apply-go .btn{min-width:min(100%,300px)}

/* ---------- หน้าลงทะเบียน /register: แถบสรุปหลักสูตรแถวเดียว (เจ้าของสั่ง 7 ต.ค.: มือถือไม่เกิน ~120px) ----------
   ชื่อหลักสูตร · วันที่ · ราคาตอนนี้ + ลิงก์ "ดูรายละเอียดหลักสูตร" (รูปแบบ/เวลาอยู่หน้าแรก) */
.course-bar{padding:14px 0;background:var(--grad-navy)}
.course-bar .container{width:min(860px,calc(100% - 32px))}
.course-bar-inner{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px}
.course-bar-text{flex:1 1 auto;min-width:0}
.course-bar h1{font-size:clamp(20px,3vw,26px);font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-line{margin:2px 0 0;font-size:15px;color:var(--gold-300);font-weight:600}
.course-more{font-weight:600;white-space:nowrap;font-size:14px}
.reg-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin-bottom:10px}
.reg-head h2{margin:0;font-size:clamp(20px,3vw,26px)}
.reg-head .lead{margin:0;font-size:14px}
#register.section{padding-top:16px}

/* ---------- ฟอร์ม 4 ขั้น (/register · User Journey 7 ต.ค. 2569 · ปรับกระชับตามเจ้าของ 7 ต.ค. "อย่ากินพื้นที่") ----------
   แถบสถานะเตี้ย (≤ 56px): วงกลมเล็ก + ชื่อขั้น · กำลังทำ = ส้มเข้ม (ตัวขาว 4.7:1) · เสร็จ = เขียว ✓ · ต้องแก้ = แดง ! · ยังไม่ทำ = ขอบเทา
   จอแคบ: วงกลมทุกขั้น + ชื่อเฉพาะขั้นปัจจุบัน */
.stepper{margin:0 0 12px}
.stepper ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.stepper li{position:relative;min-width:0}
.stepper li:not(:last-child)::after{content:'';position:absolute;top:15px;left:calc(50% + 19px);right:calc(-50% + 19px);height:2px;background:var(--navy-100)}
.stepper li:has(.is-done):not(:last-child)::after{background:var(--ok-700)}
.step-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;font:inherit;color:var(--navy-700);text-align:center}
.step-btn:disabled{cursor:not-allowed;opacity:.65}
.step-dot{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--navy-300);background:var(--white);font:700 15px/1 'Prompt',sans-serif;color:var(--navy-700)}
.step-name{font-family:'Prompt',sans-serif;font-weight:600;font-size:13px;line-height:1.3;white-space:nowrap}
.step-btn.is-current .step-dot{background:var(--grad-orange-deep);border-color:transparent;color:var(--white)}
.step-btn.is-current .step-name{color:var(--orange-ink)}
.step-btn.is-done .step-dot{background:var(--ok-700);border-color:var(--ok-700);color:var(--white)}
.step-btn.is-error .step-dot{background:var(--bad-100);border-color:var(--bad-700);color:var(--bad-700)}
.step-btn.is-error .step-name{color:var(--bad-700)}
/* ผ่านแล้วแต่ยังขาดไฟล์ (8 ต.ค. 2569): วงกลมเหลือง "…" + ป้าย "แนบภายหลัง" — ไม่ใช่ ✓ เขียว (ผู้สมัครเข้าใจผิดว่าแนบแล้ว) · ส่งได้ตามเดิม */
.step-btn.is-later .step-dot{background:var(--gold-500);border-color:var(--warn-700);color:var(--warn-700)}
.step-btn.is-later .step-name{color:var(--warn-700)}
.stepper li:has(.is-later):not(:last-child)::after{background:var(--gold-500)}
.step-tag{max-width:100%;padding:0 6px;border-radius:999px;background:var(--warn-100);color:var(--warn-700);font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.step-btn:not(:disabled):not(.is-here):hover .step-dot{border-color:var(--orange)}}
.panel-title:focus{outline:0}
/* ส่วนย่อยในแต่ละขั้น: ระยะห่างน้อยลง */
.step-panel .form-section{padding-top:12px;margin-top:12px}
.step-panel .form-section:first-of-type{border-top:0;padding-top:0;margin-top:0}
.step-panel .field{margin-bottom:10px}
.step-panel .field label,.step-panel .field .label{font-size:14px}
.step-panel .field input[type=text],.step-panel .field input[type=email],.step-panel .field input[type=tel],.step-panel .field select{min-height:44px;padding:8px 10px}
.step-panel .field textarea{min-height:64px;padding:8px 10px}
.sub-title{font-size:17px;margin:0 0 8px}
.sub-note{font-family:'Sarabun',sans-serif;font-weight:400;font-size:14px;color:var(--muted)}
/* Early Bird: วันสุดท้ายโอนเงิน (ขั้น 2 ใต้ข้อมูลบัญชี) */
#transfer-box .eb-line{margin:8px 0 0;padding:6px 10px;border-radius:8px;background:var(--orange-soft);color:var(--orange-ink);font-size:14px;font-weight:600}
.check-sm{padding:8px 10px;margin-bottom:8px;font-size:15px;line-height:1.5}
.check-sm input{margin-top:3px}
/* คำอธิบายพับได้ ("ทำไมต้องกรอก" / วิธีถ่ายรูป) */
.why{margin:0 0 10px;font-size:14px;color:var(--navy-700)}
.why summary{cursor:pointer;color:var(--orange-ink);font-weight:600;min-height:32px;display:flex;align-items:center;list-style-position:inside}
.why summary::-webkit-details-marker{color:var(--orange-ink)}
.why ul{margin:4px 0 0;padding:8px 12px 8px 28px;background:var(--stone-100);border-radius:10px;display:grid;gap:4px}

/* ช่องสั้นอยู่คู่กันแถวเดียว (เจ้าของสั่ง 7 ต.ค.): grid 20 ส่วน · ช่องกำหนดความกว้างด้วย span · dense = ช่องที่ถูกดันลงแถวใหม่ (ระบุคำนำหน้า)
   ไม่ทำให้คู่ "นามสกุล|เบอร์" แตก · ช่องที่ซ่อนไม่กินที่ · ระยะห่างใช้ padding ของช่อง (gap 19 ช่องจะกินความกว้างหมด)
   มือถือ: คำนำหน้า(35%)|ชื่อ · นามสกุล|เบอร์ · เลขบัตร|ประเภท CPD · LINE|อีเมล · จอแคบกว่า 340px ลงแถวละช่อง */
.person-grid{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));grid-auto-flow:row dense;column-gap:0;margin:0 -5px}
.person-grid>.field{min-width:0;padding:0 5px}
.a-pre{grid-column:span 4}.a-first{grid-column:span 8}.a-last{grid-column:span 8}.a-preo{grid-column:span 20}
.a-phone{grid-column:span 6}.a-nid{grid-column:span 8}.a-cpd{grid-column:span 6}.a-cpa{grid-column:span 20}
.a-line{grid-column:span 8}.a-email{grid-column:span 12}
.coord-grid .a-phone{grid-column:span 8}
.is-synced .a-line{grid-column:span 6}
.learner-card .sync-hidden{display:none}
.person-grid label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-synced{font-size:14px;color:var(--navy-700);background:var(--navy-100);border-radius:8px;padding:6px 10px;margin:0 0 10px}

/* การ์ดผู้เรียน (พับได้ เปิดทีละใบ) */
.learner-card{border:1.5px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--white)}
.learner-card.is-open{background:var(--stone-50);border-color:var(--navy-200)}
.learner-card.is-invalid{border-color:var(--bad-700)}
.lc-head{display:flex;align-items:center;gap:6px;padding:2px 10px 2px 2px}
.lc-toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 8px;border:0;background:none;cursor:pointer;font:inherit;text-align:left;color:var(--navy-900)}
.lc-n{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--navy-900);color:var(--white);font:600 13px/1 'Prompt',sans-serif}
.lc-sum{flex:1 1 auto;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-state{flex:0 0 auto;font-weight:700;font-size:14px}
.lc-state.is-ok{color:var(--ok-700)}
.lc-state.is-bad{color:var(--bad-700)}
.lc-act{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--orange-ink);text-decoration:underline;text-underline-offset:3px}
.learner-remove{flex:0 0 auto;color:var(--bad-700);min-height:44px;padding:0 4px}
.lc-body{padding:4px 12px 2px}
.learner-card .field input[type=text],.learner-card .field input[type=email],.learner-card .field input[type=tel],.learner-card .field select{background:var(--white)}
.btn-add{min-height:44px;font-size:16px;padding:6px 18px}
#learners.invalid{outline:2px solid var(--bad-700);outline-offset:4px;border-radius:12px}

/* ใบกำกับภาษี */
.choices-row{flex-wrap:nowrap}
.choices-row .choice{flex:1 1 0;justify-content:center;min-height:42px;padding:6px 10px}
.input-row{display:flex;gap:8px;align-items:stretch}
.input-row input{flex:1 1 auto;min-width:0}
.input-row .btn{flex:0 0 auto;min-height:44px}
.branch-row{display:flex;gap:8px;align-items:flex-start}
.branch-row .choices{flex:1 1 auto}
.branch-row>.field{flex:0 0 110px;margin:0}
/* ใบกำกับในนามผู้เรียนคนที่ 1: แถวสรุปแทนช่องที่ล็อก */
.same-summary{margin:0;padding:8px 12px;border-radius:10px;background:var(--ok-100);color:var(--ok-800);font-size:15px;overflow-wrap:anywhere}
.same-summary .link-btn{min-height:28px;padding:0 4px}
form .field .same-summary.invalid{background:var(--bad-100);color:var(--bad-700)}
.taxid-status{margin:6px 0 0;font-size:14px;padding:6px 10px;border-radius:8px;background:var(--stone-100);overflow-wrap:anywhere}
.taxid-status.ok{background:var(--ok-100);color:var(--ok-800)}
.taxid-status.warn{background:var(--warn-100);color:var(--warn-700)}

/* ช่องทางชำระเงิน: ปุ่มเลือกแถวเดียว (segmented) · บัตรล็อก */
.seg{display:flex;border:1.5px solid var(--navy-400);border-radius:12px;overflow:hidden}
.seg-opt{flex:1 1 0;position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 8px;text-align:center;cursor:pointer;font-weight:600;font-size:15px;line-height:1.3;background:var(--white)}
.seg-opt+.seg-opt{border-left:1.5px solid var(--navy-400)}
.seg-opt input{position:absolute;opacity:0;width:1px;height:1px}
.seg-opt:has(input:checked){background:var(--orange-soft);color:var(--orange-ink);box-shadow:inset 0 -3px 0 var(--orange)}
.seg-opt:has(input:focus-visible){outline:3px solid var(--navy-900);outline-offset:-3px}
.seg-opt.locked{cursor:not-allowed;background:var(--stone-100);color:var(--navy-400);font-weight:400}
.seg-opt small{font-size:13px}
form .field .seg.invalid{border-color:var(--bad-700)}

/* QR พร้อมเพย์ (จริง / ตัวอย่าง) — การ์ดแถวเดียว QR ซ้าย ข้อความขวา */
.qr-card{display:flex;gap:12px;align-items:center;margin:0 0 10px;padding:10px;border:1.5px solid var(--line);border-radius:12px;background:var(--white)}
.qr-frame{position:relative;flex:0 0 132px;width:132px;display:grid;place-items:center;min-height:80px}
.qr-frame svg,.qr-frame img{display:block;width:100%;height:auto}
.qr-info{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;font-size:14px;line-height:1.45}
.qr-amount{font-family:'Prompt',sans-serif;font-weight:700;font-size:17px;white-space:nowrap}
.qr-note{color:var(--navy-700)}
/* ตัวอย่าง: QR จางลง + ตราประทับทับกลาง + ป้ายแดง — ให้เห็นทันทีว่าใช้จ่ายไม่ได้ */
.qr-card.is-mockup{border-style:dashed;border-color:var(--gold-500);background:var(--gold-50)}
.qr-card.is-mockup .qr-frame svg{opacity:.35}
.qr-stamp{position:absolute;transform:rotate(-14deg);padding:2px 8px;border:2px solid var(--bad-700);border-radius:6px;color:var(--bad-700);background:rgba(255,255,255,.85);font:700 15px/1.2 'Prompt',sans-serif}
.mock-tag{align-self:flex-start;font-size:13px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--bad-700);color:var(--white)}
.note-box{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:var(--stone-100);border-left:4px solid var(--navy-400);font-size:14px}

/* แถวแนบไฟล์ (สลิป / 50 ทวิ / รูปคู่บัตรรายคน): ชื่อ + สถานะ · ภาพย่อ 48px · ปุ่มแนบ */
.file-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px dashed var(--navy-300);border-radius:12px;background:var(--white)}
.file-row.over{border-color:var(--orange);background:var(--orange-soft)}
form .field .file-row.invalid{border-color:var(--bad-700);background:var(--bad-100)}
.fr-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.fr-label{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.fr-status{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-status.is-ok{color:var(--ok-700);font-weight:600}
.fr-thumb{flex:0 0 48px;width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.fr-btn{position:relative;flex:0 0 auto;min-height:44px;padding:6px 14px;cursor:pointer}
.fr-btn input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.fr-btn:has(input:focus-visible){outline:3px solid var(--navy-900);outline-offset:2px}
.photo-row .photo-n{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--navy-100);font:600 13px/1 'Prompt',sans-serif}
.photo-field{margin-bottom:8px}
.proxy-note{margin:2px 0 4px;padding:6px 10px;border-radius:8px;background:var(--navy-100);font-size:14px}
.modal-proxy{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--navy-100);font-size:15px}
.agree-hint{margin-bottom:0}

/* ขั้น 4: ตรวจข้อมูลก่อนส่ง (พับไว้) */
.review-box{margin-top:6px;border:1px solid var(--line);border-radius:12px;padding:0 12px}
.review-box>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;font-family:'Prompt',sans-serif;font-weight:600;list-style-position:inside}
.review-dl{margin:0 0 10px;display:grid;gap:6px;font-size:14px;line-height:1.5}
.review-dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;padding-top:6px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.review-dl dt{color:var(--muted)}
.review-dl dd{margin:0}
.review-edit{min-height:24px;padding:0 0 0 4px;font-size:14px}
.review .bad{color:var(--bad-700);font-weight:600}
.review .later{padding:0 6px;border-radius:6px;background:var(--warn-100);color:var(--warn-700);font-weight:600}

/* แถบล่างติดขอบจอ: ยอดบรรทัดเดียว (แตะดูรายละเอียด) + ปุ่มย้อน/ถัดไป/ส่ง */
.step-foot{position:sticky;bottom:0;z-index:20;margin:14px -22px -22px;padding:8px 22px 10px;background:var(--white);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 -8px 20px rgba(13,23,44,.08)}
.sum-panel{max-height:55vh;overflow-y:auto;margin-bottom:8px}
.sum-panel .summary{padding:14px}
.total-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:2px 0;border:0;background:none;cursor:pointer;font:inherit;color:var(--navy-900);text-align:left}
#total-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#total-text b{font-family:'Prompt',sans-serif;font-weight:700;font-size:16px}
#total-text small{font-size:13px;color:var(--muted)}
.total-more{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--orange-ink);text-decoration:underline;text-underline-offset:3px}
.step-nav{display:flex;gap:10px;align-items:center;margin-top:6px}
.step-nav .btn{min-height:48px}
.step-nav #next-btn,.step-nav #submit-btn{margin-left:auto;flex:1 1 auto;max-width:360px}
.step-foot .submit-why{margin:6px 0 0;font-size:13px}

/* หน้าขอบคุณ: สรุปบนสุดสั้น · ลิงก์ยืนยันรายคนแถวเดียว · รายละเอียดอื่นพับ */
.save-warn{margin:6px 0 12px;padding:8px 12px;border-radius:10px;background:var(--warn-100);color:var(--warn-700);border-left:4px solid var(--warn-700);font-weight:600;font-size:14px}
.thanks-top{display:grid;gap:8px;padding:14px;border-radius:14px;border:1.5px solid var(--gold-500);background:var(--gold-50);margin:10px 0}
.thanks-top .row1{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.thanks-top .ref{margin:0;font-size:clamp(20px,6vw,26px);padding:2px 12px}
.thanks-top .amt-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.thanks-top .amt{font-family:'Prompt',sans-serif;font-weight:700;font-size:24px}
/* แนบสลิปแล้ว (thanks.js): กล่องเขียวแทนข้อความชวนแนบ */
.thanks-top .slip-ok-note{margin:0;padding:8px 12px;border-radius:10px;background:var(--ok-100);color:var(--ok-800);font-weight:600}
/* หน้าขอบคุณ: หน้าจัดการใบสมัคร + PIN · รายการที่ยังขาด (7 ต.ค.) — มือถือ 390 กะทัดรัด */
.manage-box{display:grid;gap:8px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--navy-900);background:#fff;margin:10px 0}
/* ยังไม่เปิดอีเมล: หน้าขอบคุณเป็นที่เดียวที่เห็น PIN → กรอบส้ม + แถบเตือนให้แคปหน้าจอ */
.manage-box.is-only{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.manage-alert{margin:0;padding:8px 10px;border-radius:10px;background:var(--warn-100);color:var(--warn-700);font-size:14px}
.manage-box.is-only .manage-alert{background:var(--orange-soft);color:var(--orange-ink)}
.manage-head{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.pin-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pin-code{font-family:'Prompt',sans-serif;font-weight:700;font-size:26px;letter-spacing:.18em;color:var(--navy-900);background:var(--gold-300);padding:2px 12px;border-radius:10px}
.manage-note{margin:0;font-size:13px}
.missing-box{padding:10px 14px;border-radius:12px;background:var(--warn-100);color:var(--warn-700);border-left:4px solid var(--warn-700);margin:10px 0;font-size:14px}
.missing-box ul{margin:4px 0 6px;padding-left:20px}
.missing-box p{margin:0}
.link-actions{display:flex;flex-wrap:wrap;gap:8px}
.link-actions{flex-wrap:nowrap;align-items:center}
.link-actions .btn:not(.btn-sm){flex:1 1 auto;min-height:48px}
.link-actions .btn-sm{flex:0 0 auto}
.learner-links{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px}
.learner-links li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.learner-links .who{flex:1 1 120px;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.learner-links .who b{overflow-wrap:anywhere}
.learner-links .rid{font-size:13px;color:var(--muted)}
.learner-links .btn-sm{min-height:40px;padding:4px 12px}
.learner-links .link-actions{flex:0 0 auto;gap:6px}
.learner-links .ok-pill{align-self:flex-start}
.link-text{display:block;flex-basis:100%;font-size:12px;color:var(--navy-700);overflow-wrap:anywhere;font-family:ui-monospace,Menlo,Consolas,monospace}
.ok-pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:13px;font-weight:600;background:var(--ok-100);color:var(--ok-800)}
.fold{border-top:1px solid var(--line)}
.fold>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-family:'Prompt',sans-serif;font-weight:600;font-size:17px;list-style-position:inside}
.fold>div{padding:0 0 12px}

/* ---------- หน้าขอบคุณ ---------- */
.ref{font-family:'Prompt',sans-serif;font-weight:700;font-size:clamp(22px,7vw,32px);white-space:nowrap;letter-spacing:.02em;color:var(--navy-900);background:var(--gold-300);display:inline-block;padding:6px 16px;border-radius:12px;margin:8px 0 14px}
.ref-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ref-row .ref{margin:8px 0}
.kv{display:grid;grid-template-columns:170px 1fr;gap:6px 14px;margin:12px 0}
.kv dt{color:var(--muted)}
.steps{padding-left:20px}
.steps li{margin-bottom:6px}
.status-pill{display:inline-block;padding:2px 12px;border-radius:999px;font-weight:600;font-size:14px;background:var(--warn-100);color:var(--warn-700)}

@media (max-width:860px){
  .speakers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .guide-cards{grid-template-columns:1fr}
}/* มือถือ: การ์ดวิทยากรกลับเป็นแถวละคน (รูปเล็กซ้าย ข้อความขวา — กฎ .speaker บนมือถืออยู่ส่วน landing) */
@media (max-width:600px){.speakers{grid-template-columns:minmax(0,1fr)}}

/* จอแคบ: ข้อความ → ข้อมูล → ปุ่มลงทะเบียน ขึ้นก่อน แล้วค่อยโปสเตอร์ (จัดกลาง ไม่กินจอ) · 701–860 ยังเป็น 2 คอลัมน์ */
@media (max-width:700px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero .poster-wrap{max-width:380px;margin-inline:auto}
  .hero .poster{max-height:60vh;width:auto;margin-inline:auto}
}
@media (max-width:600px){
  body{font-size:16px}
  .section{padding:40px 0}
  .grid2,.grid3,.price-grid{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:1fr 1fr}
  .card{padding:16px}
  .kv{grid-template-columns:1fr;gap:0 0}
  .kv dd{margin-bottom:8px}
  /* ตารางกำหนดการ: ซ่อนคอลัมน์วิทยากร แสดงใต้หัวข้อแทน (ตารางอื่นของ landing ไม่โดน) */
  .agenda .speaker-col{display:none}
  .agenda .speaker-mobile{display:block;margin-top:2px}
  .agenda .row-more>summary{display:list-item;cursor:pointer;margin-top:2px;min-height:44px;line-height:44px;font-size:14px;font-weight:600;color:var(--orange-ink);list-style-position:inside}
  /* จอแคบ: เวลาอยู่บรรทัดบน หัวข้อเต็มความกว้าง (คอลัมน์เวลาไม่กินที่ หน้าไม่ยาวเกิน) */
  .agenda thead{display:none}
  .agenda tr,.agenda td{display:block}
  .agenda td.time{padding:10px 14px 0;border-bottom:0}
  .agenda tr.break{display:flex;gap:10px;background:var(--stone-100)}
  .agenda tr.break td{padding:8px 14px;border-bottom:0}
  .agenda tr.break td.time{padding-right:0}
  .agenda tr{border-bottom:1px solid var(--line)}
  .agenda td{border-bottom:0}
  .brand{gap:8px}
  .brand .logo-mmn{height:36px}
  .brand .logo-conductor{height:27px}
  .logo-slot{height:28px;font-size:11px;padding:0 6px}
  .hero{padding:32px 0 40px}
  .hero .facts{margin:16px 0}
  /* หน้าลงทะเบียนบนมือถือ: แถบสรุปเตี้ยลง ให้ฟอร์มโผล่เร็ว */
  .header-cta .btn{padding:6px 12px} /* ตัวคง 19px (ข้อความใหญ่) — ห้ามลด ดูคอมเมนต์ปุ่มหัวเว็บด้านบน */
  .page{padding:28px 0 56px}
  .guide-steps>li{padding:16px 14px 16px 54px}
  .guide-steps>li::before{left:12px;top:16px}
  .guide-table td:first-child{white-space:normal}
  .guide-actions .btn{width:100%}
  .modal-head,.modal-body,.modal-actions{padding-left:16px;padding-right:16px}
  /* แถบขั้นตอน: วงกลมทุกขั้น ชื่อเฉพาะขั้นปัจจุบัน */
  .step-btn:not(.is-here) .step-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .step-dot{width:30px;height:30px;font-size:14px}
  .stepper li:not(:last-child)::after{top:14px;left:calc(50% + 18px);right:calc(-50% + 18px)}
  /* ช่องคู่บนมือถือ (แถวเดียว): คำนำหน้า 35%|ชื่อ · นามสกุล|เบอร์ · เลขบัตร|CPD · LINE|อีเมล */
  .a-pre{grid-column:span 7}.a-first{grid-column:span 13}.a-last,.a-phone,.coord-grid .a-phone{grid-column:span 10}
  .a-nid{grid-column:span 12}.a-cpd{grid-column:span 8}.a-line{grid-column:span 7}.a-email{grid-column:span 13}.coord-grid .a-email{grid-column:span 20}
  .learner-grid .a-email input{font-size:14px}
  .is-synced .a-line{grid-column:span 20}
  .person-grid{margin:0 -4px}.person-grid>.field{padding:0 4px}
  .person-grid .field input[type=text],.person-grid .field input[type=email],.person-grid .field input[type=tel],.person-grid .field select{font-size:15px;padding:8px}
  .lc-body{padding:4px 10px 2px}
  .step-foot{margin:12px -16px -16px;padding:8px 16px 10px}
  .step-nav .btn{padding:8px 14px;font-size:17px}
  /* ตัว 17px ไม่ใช่ข้อความใหญ่ → ปุ่มส้ม (ถัดไป/ส่งฟอร์ม) บนมือถือใช้ส้มเข้มที่ผ่าน 4.5:1 แทนการขยายเป็น 19px
     (19px ทำให้ "ถัดไป: ตรวจและยืนยัน" ตัดเป็น 2 บรรทัดตั้งแต่จอ 375) · :not(:disabled) ให้ปุ่มส่งที่ยังกดไม่ได้เป็นเทาตามเดิม */
  .step-nav #next-btn,.step-nav #submit-btn:not(:disabled){background:var(--grad-orange-deep);text-shadow:none}
  .qr-frame{flex-basis:112px;width:112px}
  .review-dl>div{grid-template-columns:88px minmax(0,1fr)}
  /* แถบสรุปหลักสูตรของหน้าลงทะเบียน: เตี้ยสุด ให้ฟอร์มขึ้นเร็ว */
}
@media (max-width:400px){
  .countdown{gap:6px}
  .countdown div{min-width:64px;padding:8px 6px}
  .countdown b{font-size:24px}
}

/* จอแคบมาก (< 340px): ช่องคู่ลงแถวละช่อง กันช่องเล็กเกินจนตัวเลขล้น */
@media (max-width:339px){
  .person-grid>.field{grid-column:span 20!important}
}

/* ผู้ใช้ที่ตั้งค่า "ลดการเคลื่อนไหว": ปิด animation/transition ทั้งหมด (hero แสดงทันที ปุ่มไม่ยก ไม่มีแสงวิ่ง)
   ยกเว้น spinner ตอนกำลังส่ง — เป็นตัวบอกสถานะที่จำเป็น จึงคงไว้แต่หมุนช้าลง */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .btn:hover,.price:hover,.speaker:hover,.session:hover,.guide-card:hover,.info-card:hover{transform:none!important}
  .btn::after,.header-cta .btn::before{display:none}
  .spinner{animation:spin 1.6s linear infinite!important}
}

/* แถบระบบทดสอบ (Worker แทรกให้ทุกหน้าเมื่อ STAGING=1) — ไม่ sticky: เลื่อนลงแล้วหาย ไม่บังหัวเว็บ */
.staging-bar{background:#B71C1C;color:#fff;text-align:center;font-family:'Sarabun',system-ui,sans-serif;font-weight:600;font-size:14px;line-height:1.4;padding:7px 12px;position:relative;z-index:60}