/* ============================================================
   assets/landing.css — สไตล์เฉพาะหน้าแรก (index.html) เท่านั้น
   ------------------------------------------------------------
   ❗ ไฟล์นี้โหลดที่ index.html ไฟล์เดียว — หน้าอื่นยังใช้ assets/style.css เหมือนเดิม
   ฟอนต์: IBM Plex Sans Thai (+ IBM Plex Sans สำหรับตัวเลข/ตัวอักษรละติน)
   สีหลัก: accent #5B4AD1 (พัฒนาจากสีแบรนด์ #9184d9 ให้ contrast ผ่าน WCAG AA)
   ธีมมืด: เปิดด้วย <html data-theme="dark"> เท่านั้น (ไม่ auto ตาม prefers-color-scheme
   เพราะหน้าอื่นอีก 14 หน้ายังเป็นธีมสว่างล้วน — เปิด auto จะสลับธีมกลางทางเมื่อกดเมนู)
   ============================================================ */

:root{
  --ground:#FAF9FE;
  --surface:#FFFFFF;
  --surface-2:#F4F2FC;
  --ink:#1A1730;
  --ink-2:#3A3457;
  --muted:#575176;
  --line:#E5E1F2;
  --line-strong:#D3CDE8;
  --accent:#5B4AD1;
  --accent-hover:#4A3AB5;
  --accent-ink:#3B2F93;
  --accent-tint:#EFECFD;
  --on-accent:#FFFFFF;
  --pass:#0F7A55;
  --pass-tint:#E4F4EC;
  --warn:#8A5A00;
  --warn-tint:#FBF0DC;
  --gold:#8A5A00;                 /* ใช้โดย assets/testimonials.js (ดาวให้คะแนน) */
  --shadow-soft:0 1px 2px rgba(26,23,48,.04), 0 10px 30px -12px rgba(26,23,48,.14);
  --shadow-lift:0 1px 2px rgba(26,23,48,.05), 0 24px 50px -20px rgba(91,74,209,.30);
  --r-sm:10px; --r:14px; --r-lg:20px;
  --maxw:1120px;
  --font-th:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-lat:"IBM Plex Sans","IBM Plex Sans Thai",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#12141F;
  --surface:#1B1E2C;
  --surface-2:#232739;
  --ink:#ECECF2;
  --ink-2:#CFD0DC;
  --muted:#9B9EB4;
  --line:#2E3345;
  --line-strong:#3D4257;
  --accent:#A99CF0;
  --accent-hover:#BBB0F6;
  --accent-ink:#CFC8FA;
  --accent-tint:#262B4A;
  --on-accent:#141227;
  --pass:#57C79A;
  --pass-tint:#17342A;
  --warn:#E0B368;
  --warn-tint:#33280F;
  --gold:#E0B368;
  --shadow-soft:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.7);
  --shadow-lift:0 1px 2px rgba(0,0,0,.55), 0 26px 54px -22px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
section[id],div[id]{scroll-margin-top:84px;}
.nb{white-space:nowrap;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-th);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;}
a{color:var(--accent-ink);text-decoration:none;}
a:hover{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:600;text-wrap:balance;letter-spacing:-.01em;}
h1{font-size:clamp(1.95rem,4.6vw,3rem);line-height:1.24;}
h2{font-size:clamp(1.45rem,3.2vw,2.05rem);}
h3{font-size:1.1rem;}
p{margin:0;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,28px);}
.sec{padding-block:clamp(56px,8vw,92px);}
.sec-head{max-width:66ch;display:flex;flex-direction:column;gap:14px;}
.sec-head.center{margin-inline:auto;text-align:center;align-items:center;}
.eyebrow{
  font-family:var(--font-lat);font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);
  display:inline-flex;align-items:center;gap:8px;line-height:1.4;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);opacity:.7;}
.lead{color:var(--muted);font-size:1.0625rem;}
.num{font-family:var(--font-lat);font-variant-numeric:tabular-nums;}
/* คลาสเดิมที่ assets/testimonials.js สร้าง markup มาใช้ */
.note{font-size:.84rem;color:var(--muted);line-height:1.65;}
.muted{color:var(--muted);}
.center{text-align:center;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-th);font-size:1rem;font-weight:600;line-height:1;
  padding:14px 22px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease;
  text-align:center;
}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-hover);color:var(--on-accent);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink);}
.btn-sm{padding:10px 16px;font-size:.9375rem;}
.btn-block{width:100%;}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;}}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:16px;height:64px;position:relative;}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:1.02rem;white-space:nowrap;}
.brand:hover{color:var(--ink);}
.brand .mark{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent-ink);flex:0 0 auto;
}
.brand small{display:block;font-size:.68rem;font-weight:500;color:var(--muted);letter-spacing:.02em;line-height:1.2;}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto;}
.nav-links a:not(.btn){
  color:var(--ink-2);font-size:.95rem;font-weight:500;padding:8px 12px;border-radius:8px;
}
.nav-links a:not(.btn):hover{color:var(--accent-ink);background:var(--accent-tint);}
.nav-toggle{
  display:none;margin-left:auto;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:10px;width:42px;height:42px;
  align-items:center;justify-content:center;cursor:pointer;
}
@media (max-width:980px){
  .nav-toggle{display:inline-flex;}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:10px clamp(16px,4vw,28px) 18px;
    box-shadow:var(--shadow-soft);
  }
  .nav-links[hidden]{display:none !important;}
  /* เผื่อมีโค้ดเดิมเรียก toggleNav() ของ assets/app.js (สลับคลาส .open) */
  .nav-links.open{display:flex !important;}
  .nav-links a:not(.btn){padding:12px 10px;font-size:1rem;}
  .nav-links .btn{margin-top:8px;}
}
@media (min-width:981px){
  .nav-links[hidden]{display:flex !important;}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,76px) clamp(36px,5vw,64px);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,52px);align-items:center;}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;}}
.pill{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--accent-tint);color:var(--accent-ink);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius:999px;padding:6px 14px;font-size:.84rem;font-weight:500;line-height:1.5;
}
.hero-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.hero-copy p.lead{max-width:56ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;}
.hero-note{font-size:.875rem;color:var(--muted);max-width:52ch;line-height:1.65;}

/* ตัวอย่างหน้าจอทำข้อสอบ */
.mock{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);overflow:hidden;
}
.mock-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.mock-set{font-size:.82rem;color:var(--muted);font-weight:500;}
.mock-timer{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-lat);
  font-variant-numeric:tabular-nums;font-weight:600;font-size:.95rem;
  background:var(--accent-tint);color:var(--accent-ink);border-radius:999px;padding:5px 12px;
}
.mock-body{padding:18px 16px 16px;display:flex;flex-direction:column;gap:14px;}
.mock-step{font-size:.8rem;color:var(--muted);font-family:var(--font-lat);letter-spacing:.04em;}
.mock-q{font-size:1.05rem;font-weight:600;line-height:1.55;}
.mock-opts{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0;}
.mock-opts li{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);font-size:.97rem;color:var(--ink-2);background:var(--surface);
}
.mock-opts li .key{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface-2);color:var(--muted);font-size:.82rem;font-weight:600;
}
.mock-opts li.is-right{border-color:color-mix(in srgb, var(--pass) 55%, transparent);background:var(--pass-tint);color:var(--ink);}
.mock-opts li.is-right .key{background:var(--pass);color:#fff;}
.mock-exp{
  font-size:.86rem;color:var(--ink-2);background:var(--surface-2);
  border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 13px;line-height:1.6;
}
.mock-legs{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line);padding-top:14px;}
.leg{display:flex;flex-direction:column;gap:6px;}
.leg b{font-size:.8rem;font-weight:600;color:var(--ink-2);}
.leg .track{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.leg .fill{display:block;height:100%;border-radius:999px;background:var(--accent);}
.leg span.v{font-size:.76rem;color:var(--muted);font-family:var(--font-lat);}
.mock-cap{font-size:.78rem;color:var(--muted);text-align:center;margin-top:12px;line-height:1.6;}

/* ---------- facts strip ---------- */
.facts{border-block:1px solid var(--line);background:var(--surface);}
.facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.facts-grid > div{padding:22px clamp(14px,2.4vw,24px);border-left:1px solid var(--line);}
.facts-grid > div:first-child{border-left:0;}
.facts b{display:block;font-family:var(--font-lat);font-size:1.28rem;font-weight:600;color:var(--ink);line-height:1.3;}
.facts b.th{font-family:var(--font-th);font-size:1.05rem;}
.facts span{display:block;font-size:.86rem;color:var(--muted);line-height:1.55;margin-top:4px;}
@media (max-width:820px){
  .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .facts-grid > div{border-left:1px solid var(--line);border-top:1px solid var(--line);}
  .facts-grid > div:nth-child(odd){border-left:0;}
  .facts-grid > div:nth-child(-n+2){border-top:0;}
}

/* ---------- card grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
@media (max-width:900px){.grid-3{grid-template-columns:1fr;}.grid-2{grid-template-columns:1fr;}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,26px);display:flex;flex-direction:column;gap:10px;
}
.card h3{color:var(--ink);}
.card p{color:var(--muted);font-size:.97rem;}
.icon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent-ink);margin-bottom:4px;
}

/* ---------- bento ชุดข้อสอบ ---------- */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
@media (max-width:900px){.bento{grid-template-columns:1fr;}}
.set-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:16px;
}
.set-card.soon{background:var(--surface-2);border-style:dashed;}
.set-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.set-name{display:flex;flex-direction:column;gap:3px;}
.set-name h3{font-size:1.18rem;}
.set-name span{font-size:.84rem;color:var(--muted);}
.tag{
  font-size:.76rem;font-weight:600;padding:4px 11px;border-radius:999px;white-space:nowrap;
  background:var(--pass-tint);color:var(--pass);border:1px solid color-mix(in srgb, var(--pass) 30%, transparent);
}
.tag.wait{background:var(--warn-tint);color:var(--warn);border-color:color-mix(in srgb, var(--warn) 32%, transparent);}
.set-rows{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);}
.set-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px 14px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.set-row .t{font-size:.95rem;color:var(--ink-2);font-weight:500;}
.set-row .m{display:block;font-size:.82rem;color:var(--muted);font-family:var(--font-lat);font-variant-numeric:tabular-nums;margin-top:1px;}
.set-row .p{font-family:var(--font-lat);font-variant-numeric:tabular-nums;font-weight:600;font-size:1rem;color:var(--ink);white-space:nowrap;}
.set-row .p.free{color:var(--pass);}
.set-row .p.soon{font-family:var(--font-th);font-size:.86rem;font-weight:600;color:var(--warn);}
.set-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;}
.rule{
  font-size:.84rem;color:var(--muted);background:var(--surface-2);
  border-radius:var(--r-sm);padding:10px 13px;line-height:1.6;
}
.set-card.soon .rule{background:var(--surface);}

/* ---------- ตัวเลขสนามสอบจริง ---------- */
.realfacts{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;}
.realfacts > h3{padding:16px 18px 0;font-size:1.02rem;}
.rf-scroll{overflow-x:auto;}
.realfacts table{width:100%;border-collapse:collapse;min-width:620px;}
.realfacts caption{text-align:left;padding:6px 18px 14px;font-size:.88rem;color:var(--muted);line-height:1.65;}
.realfacts th,.realfacts td{
  text-align:left;padding:11px 18px;border-top:1px solid var(--line);
  font-size:.91rem;color:var(--ink-2);vertical-align:top;line-height:1.6;
}
.realfacts thead th{font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-family:var(--font-lat);background:var(--surface-2);}
.realfacts tbody th{font-weight:600;color:var(--ink);white-space:nowrap;}
.realfacts td.n{font-family:var(--font-lat);font-variant-numeric:tabular-nums;white-space:nowrap;}
.source-note{margin-top:14px;font-size:.86rem;color:var(--muted);line-height:1.7;}
.source-note a{text-decoration:underline;text-underline-offset:2px;}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}
.step{display:flex;flex-direction:column;gap:9px;padding-top:18px;border-top:2px solid var(--line);}
.step .n{font-family:var(--font-lat);font-size:.78rem;font-weight:600;letter-spacing:.12em;color:var(--accent-ink);}
.step h3{font-size:1.02rem;}
.step p{font-size:.93rem;color:var(--muted);}

/* ---------- pricing ---------- */
.price-group{margin-top:34px;}
.pg-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.pg-head h3{font-size:1.15rem;}
.pg-head span{font-size:.86rem;color:var(--muted);}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
@media (max-width:1000px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.tiers{grid-template-columns:1fr;}}
.tier{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;gap:10px;position:relative;
}
.tier.base{border-color:var(--accent);box-shadow:var(--shadow-soft);}
.tier.soon{background:var(--surface-2);border-style:dashed;}
.tier .badge{
  position:absolute;top:-11px;left:20px;background:var(--accent);color:var(--on-accent);
  font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:999px;letter-spacing:.02em;
}
.tier h4{font-size:1rem;font-weight:600;margin:0;}
.tier .amt{display:flex;align-items:baseline;gap:4px;font-family:var(--font-lat);font-variant-numeric:tabular-nums;}
.tier .amt b{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;}
.tier .amt i{font-style:normal;font-size:.95rem;color:var(--muted);}
.tier .amt.soon-amt{font-family:var(--font-th);}
.tier .amt.soon-amt b{font-size:1.05rem;color:var(--warn);}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.tier li{display:flex;gap:8px;font-size:.9rem;color:var(--muted);line-height:1.55;}
.tier li svg{flex:0 0 auto;margin-top:5px;color:var(--accent);}
.tier .btn{margin-top:auto;}
.price-note{margin-top:26px;font-size:.88rem;color:var(--muted);line-height:1.7;}

/* ---------- รีวิว (widget จาก assets/testimonials.js) ---------- */
#testimonialGrid{margin-top:30px;}
#testimonialGrid .card{gap:6px;}
#testimonialGrid .card p{color:var(--ink-2);font-size:.98rem;line-height:1.75;}
#testimonialGrid .tag{border-color:transparent;}
#testimonialGrid .note{display:flex;}
#testimonialGrid .card .btn{align-self:center;}
#testimonialGrid .card.center{align-items:center;}
/* การ์ด "ยังไม่มีรีวิว" ของ testimonials.js ใส่พื้นหลังสว่างมาแบบ inline — ทับให้เข้าธีม */
:root[data-theme="dark"] #testimonialGrid .card{background:var(--surface) !important;border-color:var(--line-strong) !important;}
.review-cta{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
}
.review-cta p{font-size:.93rem;color:var(--muted);max-width:52ch;}

/* ---------- รางวัลคืน ---------- */
.reward-band{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.6vw,40px);display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-soft);
}
.reward-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media (max-width:860px){.reward-steps{grid-template-columns:1fr;}}
.reward-steps > div{background:var(--surface-2);border-radius:var(--r);padding:16px 18px;}
.reward-steps b{display:block;font-size:.98rem;font-weight:600;color:var(--ink);margin-bottom:4px;}
.reward-steps p{font-size:.92rem;color:var(--muted);line-height:1.7;}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);margin-top:28px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq .ans{padding:0 0 20px;color:var(--muted);font-size:.97rem;max-width:74ch;}
.faq .ans p + p{margin-top:10px;}

/* ---------- final cta ---------- */
.cta-band{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,4.5vw,52px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:var(--shadow-soft);
}
.cta-band .lead{max-width:56ch;}
.cta-band .hero-cta{justify-content:center;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:clamp(40px,6vw,72px);}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:28px;padding-block:44px;}
@media (max-width:980px){.foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));}}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:24px;}}
.foot-grid h4{font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--font-lat);}
.foot-col{display:flex;flex-direction:column;gap:9px;}
.foot-col a{color:var(--ink-2);font-size:.95rem;}
.foot-col a:hover{color:var(--accent-ink);}
.foot-col p{font-size:.93rem;color:var(--muted);max-width:44ch;}
.foot-bottom{border-top:1px solid var(--line);padding-block:18px;font-size:.84rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;line-height:1.7;}
.foot-views{border-top:0;padding-top:0;padding-bottom:22px;justify-content:center;}
.disclaimer{font-size:.84rem;color:var(--muted);line-height:1.7;}

/* ข้อความสำรองตอน JS ไม่ทำงาน / โหลดข้อมูลไม่ได้ */
.js-fallback{
  border:1px dashed var(--line-strong);border-radius:var(--r);
  padding:18px 20px;font-size:.95rem;color:var(--muted);line-height:1.75;
}

/* ---------- บอร์ดป้ายใบอนุญาต (28 ต.ค. 2569) — แบบบอร์ดตารางสอบ passstation.com ----------
   สีบอร์ดตั้งตายตัว (ดำเหมือนป้ายสถานี) ใช้ได้ทั้งธีมสว่าง/มืด · แถวสร้างจาก assets/license-board.js */
.lboard-sec{padding-top:clamp(14px,2.5vw,24px);}
.lboard{background:#111417;color:#fff;border-radius:16px;padding:14px clamp(14px,2.4vw,22px) 6px;box-shadow:0 10px 30px rgba(17,20,23,.18);}
.lboard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);}
.lboard-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-weight:600;font-size:1rem;margin:0;color:#fff;}
.lboard-title small{font-weight:400;font-size:.85rem;color:rgba(255,255,255,.6);}
.lboard-clock{font-family:var(--font-lat);font-variant-numeric:tabular-nums;font-size:1.15rem;font-weight:500;letter-spacing:.06em;color:#f7c948;white-space:nowrap;}
.lboard-clock small{font-size:.7rem;letter-spacing:.12em;color:rgba(255,255,255,.45);margin-right:6px;}
.lb-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#fff;text-decoration:none;}
.lb-row:last-child{border-bottom:0;}
.lb-row:hover{background:rgba(255,255,255,.04);color:#fff;}
.lb-row:focus-visible{outline:2px solid #f7c948;outline-offset:2px;border-radius:6px;}
.lb-code{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--c);color:#fff;font-weight:600;font-size:.85rem;}
.lb-plate{display:flex;flex-wrap:wrap;gap:3px;perspective:400px;min-width:0;}
.lb-plate i{font-style:normal;font-weight:600;font-size:1rem;line-height:1.5;padding:.12em .55em;background:#23272b;border-radius:4px;position:relative;}
.lb-plate i.is-flip{animation:lbflap .13s ease-in-out;}
.lb-row{transition:background .4s;}
.lb-row.is-live{background:rgba(247,201,72,.07);}
.lb-status i{animation:lbpulse 1.6s ease-in-out infinite;}
.lb-status--soon i{animation:none;}
@keyframes lbflap{0%{transform:rotateX(0)}50%{transform:rotateX(-88deg)}100%{transform:rotateX(0)}}
.lb-meta b{font-weight:400;white-space:nowrap;}
.lb-meta{min-width:0;font-size:.85rem;color:rgba(255,255,255,.62);white-space:nowrap;font-variant-numeric:tabular-nums;}
.lb-status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:.82rem;font-weight:500;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);justify-self:end;}
.lb-status i{width:7px;height:7px;border-radius:50%;background:#3ccf7a;flex:none;}
.lb-status--soon i{background:rgba(255,255,255,.4);}
.lb-row--soon .lb-plate,.lb-row--soon .lb-code{opacity:.6;}
@media (max-width:720px){
  .lboard-title small{display:none;}
  .lb-row{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:'code plate plate' 'meta meta status';}
  .lb-code{grid-area:code;} .lb-plate{grid-area:plate;}
  .lb-meta{grid-area:meta;white-space:normal;font-size:.8rem;}
  .lb-status{grid-area:status;}
  .lb-plate i{font-size:.95rem;}
  .lb-pre{display:none;}
}
@media (max-width:359px){
  .lb-row{grid-template-areas:'code plate plate' 'meta meta meta' 'status status status';}
  .lb-status{justify-self:start;}
}

/* แถบตัวเลขใต้บอร์ด (แบบ GorPass) */
.lboard-foot [hidden]{display:none !important;}   /* .lbf-live ตั้ง display เอง → ต้องบังคับซ่อน ไม่งั้นป้ายว่างโผล่ */
.lboard-foot{border-top:1px solid rgba(255,255,255,.1);padding:12px 0 10px;display:grid;gap:12px;}
.lbf-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.lbf-row:not(:has(:not([hidden]))){display:none;}
.lbf-starts{font-size:.9rem;color:rgba(255,255,255,.75);}
.lbf-starts b{color:#3ccf7a;}
.lbf-live{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#f7c948;color:#1a1530;font-weight:600;font-size:.9rem;box-shadow:0 0 18px rgba(247,201,72,.35);}
.lbf-live i{width:9px;height:9px;border-radius:50%;background:#3ccf7a;flex:none;animation:lbpulse 1.6s ease-in-out infinite;}
@keyframes lbpulse{0%,100%{opacity:1}50%{opacity:.35}}
.lbf-stats{display:flex;flex-wrap:wrap;gap:10px 40px;}
.lbf-stats div{display:grid;}
.lbf-stats b{font-family:var(--font-lat);font-size:1.6rem;font-weight:600;color:#f7c948;line-height:1.2;font-variant-numeric:tabular-nums;}
.lbf-stats span{font-size:.82rem;color:rgba(255,255,255,.62);}

/* ลิงก์เรดาร์สอบในบอร์ดหน้าแรก (28 ต.ค. 2569) */
.lbf-radar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 10px; padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, #1f9d6b 16%, transparent); border: 1px solid color-mix(in srgb, #1f9d6b 45%, transparent);
  color: #d9f5e8; font-size: .88rem; text-decoration: none; }
.lbf-radar span { font-weight: 800; color: #fff; }
.lbf-radar b { margin-left: auto; }
.lbf-radar:hover { border-color: #1f9d6b; }