/* ══════════════════════════════════════════════════════════════════════════
   Quilcore — ระบบดีไซน์

   แนวทาง (แก้ใหม่ 2026-09-06 หลังเจ้าของชี้เว็บตัวอย่าง checkstockth.com)
     สว่าง · ฟ้าเป็นพระเอก · การ์ดมุมมน · เงานุ่ม · ภาพใหญ่ · อ่านง่าย เป็นมิตร
     ไม่ใช่แผงเครื่องมือ ไม่ใช่กระดาษเครื่องบันทึก

   ห้ามลืมสองข้อนี้
     1) ข้อความไทยห้ามใส่ letter-spacing และห้ามใส่ text-transform
        สระบน/ล่างและวรรณยุกต์จะหลุดจากพยัญชนะ
        .lab-en ใช้กับละติน/ตัวเลขเท่านั้น · ข้อความไทยใช้ .lab-th
     2) หัวข้อไทย line-height ≥ 1.34 และมี padding-block ไม่งั้นวรรณยุกต์โดนตัด
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* ── สีของเจ้าของ ตรงตัว ── */
  --core-blue:#2563EB;  --cyan:#06B6D4;  --amber:#F59E0B;
  --ink:#0B1220;        --slate:#94A3B8;

  /* ── พื้นผิว ── */
  --paper:#FFFFFF;              /* พื้นหน้าหลัก */
  --paper-2:#F1F6FF;            /* แถบสลับ ฟ้าอ่อนมาก */
  --paper-3:#E7F0FF;            /* เข้มขึ้นอีกขั้น */
  --surface:#FFFFFF;            /* การ์ด */
  --machine:#DCE9FF;

  /* ── ตัวอักษร ── */
  --text:#111827;
  --text-2:#374151;
  --muted:#5B6B85;              /* 5.9:1 บนขาว */
  --rise:#0E8A45;               /* ขึ้น = เขียว อ่านง่ายกว่าหมึกล้วน */
  --fall:#D02D3C;               /* ลง/เตือน */

  /* ── เส้น ── */
  --baseline:#94A3B8;
  --hair:#DBE4F0;
  --hair-2:#EDF2F9;
  --mass:rgba(17,24,39,.26);

  /* ── สัญญาณ ── */
  --signal:#2563EB;
  --signal-2:#1D4ED8;
  --signal-soft:#DBEAFE;
  --signal-glow:rgba(37,99,235,.22);

  --btn-bg:#2563EB;  --btn-fg:#FFFFFF;

  /* ── เงา · โค้ง · ระยะ ── */
  --sh-1:0 1px 2px rgba(16,32,64,.06), 0 1px 3px rgba(16,32,64,.05);
  --sh-2:0 4px 14px rgba(16,32,64,.08), 0 2px 5px rgba(16,32,64,.05);
  --sh-3:0 16px 44px rgba(16,32,64,.13), 0 4px 12px rgba(16,32,64,.07);
  --sh-blue:0 12px 30px rgba(37,99,235,.22);
  --r-s:10px; --r-m:16px; --r-l:22px; --r-pill:999px;
  --pad:22px;
  --wrap:1160px;

  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --disp:"Anuphan","IBM Plex Sans Thai",system-ui,sans-serif;
  /* Sarabun คือตัวที่ base.html โหลดจริง เมื่อก่อนตั้ง IBM Plex Sans Thai ไว้หัวแถว
     ทั้งที่ไม่ได้โหลด เว็บเลยตกไปใช้ฟอนต์ระบบ (Leelawadee) โดยไม่มีใครรู้ */
  --body:"Sarabun","IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
}

/* ── ที่นั่งสีของแต่ละโปรแกรม — ประกาศครั้งเดียว ห้ามมี CSS ต่อโปรแกรม ── */
[data-seat="A"]{ --accent:#F59E0B; --accent-ink:#9A5B08; --accent-soft:#FEF3C7; }
[data-seat="B"]{ --accent:#06B6D4; --accent-ink:#0A6070; --accent-soft:#CFFAFE; }
[data-seat="C"]{ --accent:#10B981; --accent-ink:#05684A; --accent-soft:#D1FAE5; }
[data-seat="D"]{ --accent:#8B5CF6; --accent-ink:#5B3BC4; --accent-soft:#EDE9FE; }



/* ═══ ฐาน ═════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);
  font:400 16px/1.78 var(--body);-webkit-font-smoothing:antialiased}
/* ภาษาไทยไม่มีช่องว่างคั่นคำ เบราว์เซอร์เลยตัดบรรทัดผิดที่ได้
   เคยตัดเป็น "จัดการออเด / อร์" บนมือถือ ซึ่งอ่านไม่รู้เรื่อง
   - เอา text-wrap:balance ออก เพราะออกแบบมาสำหรับภาษาที่มีช่องว่าง
     พอเจอไทยมันเกลี่ยบรรทัดโดยไม่สนขอบเขตคำ
   - จุดขึ้นบรรทัดของหัวข้อสำคัญให้คุมเองด้วย <br> หรือครอบด้วย .nb
   ห้ามใส่ word-break:break-all / overflow-wrap:anywhere ที่หัวข้อเด็ดขาด */
h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:600;line-height:1.34;
  padding-block:.06em;margin:0;letter-spacing:0;
  word-break:normal;overflow-wrap:normal;text-wrap:pretty}
/* .nb = ห้ามตัดบรรทัดกลางกลุ่มคำนี้ ใช้กับวลีสั้น ๆ ที่ตรวจแล้วว่าไม่ล้นจอ 320px */
.nb{white-space:nowrap}
h1{font-size:clamp(30px,4.4vw,50px);line-height:1.28}
h2{font-size:clamp(24px,3.3vw,36px)}
h3{font-size:19px}
p{margin:0}
a{color:var(--signal);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
svg{display:block}
code{font-family:var(--mono);font-size:.88em;background:var(--paper-2);
  padding:2px 6px;border-radius:6px}
:focus-visible{outline:3px solid var(--signal-glow);outline-offset:2px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ป้ายสองคลาส — ห้ามสลับกัน */
.lab-en{font:600 11.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lab-th{font:600 13px/1.6 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.lat{letter-spacing:-.01em}
.kicker{display:inline-block;font:600 13px/1 var(--body);letter-spacing:0;
  color:var(--signal);background:var(--signal-soft);
  padding:8px 16px;border-radius:var(--r-pill);margin-bottom:18px}
.kicker[data-seat],[data-seat] > .kicker{color:var(--accent-ink);background:var(--accent-soft)}

/* ป้ายใน SVG */
.st    {font:400 12px var(--body);letter-spacing:0;fill:var(--muted)}
.st-n  {font:500 12px var(--mono);font-variant-numeric:tabular-nums;fill:var(--muted)}
.st-en {font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.st-sig{fill:var(--signal);font-weight:600}
.st-ink{fill:var(--text)}


/* ═══ ปุ่ม ════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 16px/1 var(--body);padding:15px 30px;border:0;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border-radius:var(--r-pill);
  box-shadow:var(--sh-blue)}
.btn:hover{background:var(--signal-2);text-decoration:none;color:var(--btn-fg)}
.btn.sm{padding:11px 22px;font-size:14.5px}
.btn.ghost{background:var(--surface);color:var(--text);box-shadow:var(--sh-1);
  border:1px solid var(--hair)}
.btn.ghost:hover{background:var(--paper-2);color:var(--text)}
.btn-line{display:inline-flex;align-items:center;gap:8px;font:600 16px/1 var(--body);
  color:var(--signal);padding:15px 4px}
.btn-line:hover{color:var(--signal-2)}
.btn-line.sm{font-size:14.5px;padding:11px 4px}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
}


/* ═══ แถบบน ═══════════════════════════════════════════════════════════ */
.topbar{display:flex;align-items:center;gap:20px;padding:16px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;color:var(--text)}
.brand:hover{text-decoration:none}
.mark{flex:none}
.mark .lg-q{fill:none;stroke:var(--text);stroke-width:11}
.mark .lg-c{fill:none;stroke:var(--signal);stroke-width:11;stroke-linecap:round}
.mark .lg-w{fill:none;stroke:var(--amber);stroke-width:8;stroke-linecap:round}
.mark .lg-o{fill:var(--amber)}
.mark .lg-h{fill:var(--cyan)}
.brand .wm{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.012em}
.brand .sub{font:400 13px/1.4 var(--body);color:var(--muted);
  padding-left:11px;margin-left:2px;border-left:1px solid var(--hair)}
.nav{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:9px 15px;border-radius:var(--r-pill);color:var(--text-2);
  font-size:15px;font-weight:500}
.nav-links a:hover{background:var(--paper-2);color:var(--text);text-decoration:none}
.nav-links a.on{background:var(--signal-soft);color:var(--signal)}


/* ═══ แถบล่างบนมือถือ ═════════════════════════════════════════════════ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--hair);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 0 8px;color:var(--muted);font-size:11.5px;font-weight:600}
.tabbar a:hover{text-decoration:none}
.tabbar a.on{color:var(--signal)}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){
  .tabbar{display:flex}
  body.app{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}
/* เมนูลิงก์ต้องหายก่อนที่แถบหัวจะขึ้นสองบรรทัด
   วัดแล้วว่าแบรนด์ + เมนู 5 อัน + สวิตช์ธีม + สองปุ่ม ต้องการราว 1,150px
   ถ้าปล่อยให้ซ่อนที่ 860 เหมือนเดิม ช่วง 860-1150 จะตกบรรทัดดูรก */
@media (max-width:1150px){
  .nav-links{display:none}
}
/* คำโปรยข้างโลโก้กินที่ราว 200px ซ่อนก่อนตั้งแต่จอกลาง ปุ่มจะได้ไม่เบียด */
@media (max-width:900px){
  .brand .sub{display:none}
}
/* จอแคบ: แบรนด์กับเมนูอยู่คนละบรรทัดอยู่แล้ว (topbar wrap)
   บรรทัดล่างเลยให้กางเต็มความกว้าง สวิตช์ธีมชิดซ้าย ปุ่มเข้าสู่ระบบชิดขวา
   ไม่งั้นทั้งก้อนจะไปกองอยู่ขวามือ เหลือที่ว่างครึ่งบรรทัด */
@media (max-width:620px){
  .topbar{gap:12px;padding:14px 0}
  .nav{width:100%;margin-left:0;justify-content:space-between;gap:8px}
}


/* ═══ โครงหน้า ════════════════════════════════════════════════════════ */
.band{padding:66px 0}
.band.tint{background:var(--paper-2)}
.band.tint-2{background:var(--paper-3)}
.band-head{margin-bottom:36px;max-width:64ch}
.band-head.center{margin-left:auto;margin-right:auto;text-align:center}
.band-head p{margin-top:14px;font-size:17px;color:var(--muted);line-height:1.82}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.grid{display:grid;gap:22px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ruler{height:1px;border:0;background:var(--hair);margin:0}
.lede{margin-top:20px;max-width:48ch;font-size:18px;line-height:1.82;color:var(--text-2)}
.lede b{font-weight:600;color:var(--text)}
.cta{display:flex;gap:14px;align-items:center;margin-top:30px;flex-wrap:wrap}
.fine{margin-top:18px;font-size:14px;line-height:1.8;color:var(--muted)}


/* ═══ การ์ด ═══════════════════════════════════════════════════════════ */
.card{background:var(--surface);border-radius:var(--r-l);padding:var(--pad);
  box-shadow:var(--sh-2);border:1px solid var(--hair-2)}
.panel{background:var(--paper-2);border-radius:var(--r-l);padding:var(--pad);
  border:1px solid var(--hair-2)}
.card.lift{box-shadow:var(--sh-3)}
@media (prefers-reduced-motion:no-preference){
  .card.hoverable{transition:transform .2s ease,box-shadow .2s ease}
  .card.hoverable:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
}

/* การ์ดฟีเจอร์ — มีไอคอนวงกลมสี */
.feat{display:flex;flex-direction:column;gap:12px}
.feat .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--signal-soft);color:var(--signal);flex:none}
.feat[data-seat] .ic{background:var(--accent-soft);color:var(--accent-ink)}
.feat .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:18px}
.feat p{color:var(--muted);font-size:15px;line-height:1.82}

/* รายการติ๊กถูก */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--text-2);
  line-height:1.72}
/* ห้ามใส่ ::before ที่นี่ — วงกลมมาจาก .ck อยู่แล้ว ถ้าใส่ทั้งคู่จะได้วงกลมซ้อนสองวง */
.ticks li .ck{flex:none;width:21px;height:21px;border-radius:50%;margin-top:3px;
  background:var(--signal-soft);display:grid;place-items:center;color:var(--signal)}
.ticks li .ck svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}


/* ═══ หน้าแรก: กรอบจอโปรแกรม ══════════════════════════════════════════ */
.shot{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--sh-3);
  border:1px solid var(--hair-2);overflow:hidden}
.shot .bar{display:flex;align-items:center;gap:7px;padding:12px 16px;
  background:var(--paper-2);border-bottom:1px solid var(--hair-2)}
.shot .bar i{width:11px;height:11px;border-radius:50%;background:var(--hair);flex:none}
.shot .bar .url{margin-left:10px;font:500 12px/1 var(--mono);color:var(--muted);
  background:var(--surface);padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--hair-2)}
.shot .body{padding:18px}

/* จอมือถือลอยข้างจอคอม */
.phone{position:absolute;right:-8px;bottom:-26px;width:172px;border-radius:24px;
  background:var(--surface);box-shadow:var(--sh-3);border:1px solid var(--hair);
  padding:9px;z-index:2}
.phone .scr{background:var(--paper-2);border-radius:17px;padding:12px 11px;overflow:hidden}
.hero-vis{position:relative}
@media (max-width:600px){ .phone{display:none} }


/* ═══ สถิติ ═══════════════════════════════════════════════════════════ */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{background:var(--surface);border-radius:var(--r-m);padding:17px 18px 18px;
  box-shadow:var(--sh-1);border:1px solid var(--hair-2)}
.tile.wide{grid-column:1 / -1}
.tile .tv{font:600 28px/1.16 var(--mono);font-variant-numeric:tabular-nums;margin-top:7px;
  letter-spacing:0;color:var(--text)}
.tile.wide .tv{font-size:36px}
.tile .d{display:flex;align-items:center;gap:6px;margin-top:8px;
  font:600 12.5px/1.45 var(--body)}
.tile .d.up{color:var(--rise)}
.tile .d.fall{color:var(--fall)}
.tile .d.same,.tile .d.flat{color:var(--muted)}
.dv{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}


/* ═══ กราฟ ════════════════════════════════════════════════════════════ */
.plot{background:var(--surface);border-radius:var(--r-m);padding:10px 8px 4px}
.plot svg{width:100%;height:auto}
.plot .bl{stroke:var(--hair);stroke-width:1;fill:none}
.plot .gl{stroke:var(--hair);stroke-width:1;fill:none;stroke-dasharray:3 5}
.plot .ink{stroke:var(--accent);stroke-width:1;fill:none}
.plot .bar{fill:var(--accent);opacity:.55;rx:2.5}
.plot .bar.now{fill:var(--signal);opacity:1}
.plot .step{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.plot .pen path{fill:var(--signal)}
.plot .pen line{stroke:var(--signal);stroke-width:1;opacity:.5}
.plot .fut{fill:none;stroke:var(--baseline);stroke-width:1.4}
.plot .hr{fill:var(--accent);opacity:.5;rx:2}
.plot .hr.now{fill:var(--signal);opacity:1}

.hourstrip .readout{font:500 12.5px/1.5 var(--mono);color:var(--muted);margin-bottom:6px}
.hourstrip svg{width:100%;height:auto}
.hourstrip .bl{stroke:var(--hair);stroke-width:1;fill:none}
.hourstrip .hr{fill:var(--accent);opacity:.5;rx:1.6}
.hourstrip .hr.now{fill:var(--signal);opacity:1}
.hourstrip .fut{fill:none;stroke:var(--baseline);stroke-width:1.3}


/* ═══ ลิสต์อันดับ ═════════════════════════════════════════════════════ */
.toplist{display:grid;gap:15px}
.tl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.tl .nm{font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl .qty{font:600 13.5px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.tl .sub{grid-column:1/-1;font-size:12.5px;color:var(--muted)}
.tl .sub.warn{color:var(--fall)}
.tl .rail{grid-column:1/-1;height:8px;border-radius:var(--r-pill);
  background:var(--hair-2);overflow:hidden}
.tl .rail i{display:block;height:100%;border-radius:var(--r-pill);
  background:var(--accent);transform:scaleX(var(--f,1));transform-origin:left}


/* ═══ แถวซิงก์ · ชิป · ไฟสถานะ ════════════════════════════════════════ */
.syncrow{display:flex;align-items:center;gap:11px;padding:13px 16px;
  background:var(--paper-2);border-radius:var(--r-m)}
.syncrow .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.syncrow .dot.on{background:var(--rise)}
.syncrow .t{font-size:14px;color:var(--text-2)}
.syncrow .m{margin-left:auto;font:500 12.5px/1 var(--mono);color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .syncrow .dot.on{animation:qc-breathe 3.6s ease-in-out infinite}
}
@keyframes qc-breathe{0%,100%{opacity:1}50%{opacity:.4}}

.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;
  border-radius:var(--r-pill);font:600 13px/1 var(--body);
  background:var(--paper-2);color:var(--muted)}
.pill.on{background:var(--accent-soft);color:var(--accent-ink)}
.pill.warn{background:#FEE2E2;color:var(--fall)}
.pill.sig{background:var(--signal-soft);color:var(--signal)}
.lamp{width:8px;height:8px;border-radius:50%;background:var(--baseline);flex:none}
.lamp.on{background:var(--accent)}
.lamp.warn{background:var(--fall)}


/* ═══ ข้อความแจ้ง ═════════════════════════════════════════════════════ */
.msg{padding:15px 18px;border-radius:var(--r-m);font-size:15px;line-height:1.75;
  background:var(--paper-2);color:var(--text-2);margin-bottom:18px}
.msg.ok{background:#DCFCE7;color:#065F31}
.msg.warn{background:#FEF3C7;color:#8A5300}


/* ═══ ตาราง ═══════════════════════════════════════════════════════════ */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl caption{text-align:left;font:600 13px/1.6 var(--body);color:var(--muted);padding-bottom:9px}
.tbl th{font:600 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:11px 14px;background:var(--paper-2)}
.tbl th:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}
.tbl th:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
.tbl th.th-th{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--hair-2)}
.tbl td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl tbody tr:last-child td{border-bottom:0}
@media (max-width:600px){
  .tbl thead{display:none}
  .tbl tr{display:block;padding:12px 0;border-bottom:1px solid var(--hair-2)}
  .tbl td{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border:0}
  .tbl td::before{content:attr(data-l);font-weight:600;color:var(--muted);font-size:13.5px}
  .tbl td.n{text-align:right}
}


/* ═══ ฟอร์ม ═══════════════════════════════════════════════════════════ */
.field{margin-bottom:20px}
.fl{display:block;font:600 14.5px/1.6 var(--body);margin-bottom:8px}
.fi{width:100%;padding:14px 16px;font:400 16px/1.5 var(--body);
  background:var(--surface);color:var(--text);
  border:1.5px solid var(--hair);border-radius:var(--r-m)}
.fi:focus{outline:0;border-color:var(--signal);box-shadow:0 0 0 4px var(--signal-glow)}
.fi[aria-invalid="true"]{border-color:var(--fall)}
select.fi{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.fh{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.72}
.fe{margin-top:8px;font-size:13.5px;color:var(--fall)}
.switch{display:flex;align-items:flex-start;gap:13px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .tr{width:48px;height:28px;border-radius:var(--r-pill);background:var(--hair);
  position:relative;flex:none;margin-top:1px}
.switch .tr::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:#fff;box-shadow:var(--sh-1)}
.switch input:checked + .tr{background:var(--signal)}
.switch input:checked + .tr::after{transform:translateX(20px)}
.switch input:focus-visible + .tr{box-shadow:0 0 0 4px var(--signal-glow)}
.switch .sl{font-size:15.5px;font-weight:500;line-height:1.7}
@media (prefers-reduced-motion:no-preference){
  .switch .tr,.switch .tr::after{transition:background .2s ease,transform .2s ease}
}


/* ═══ ราคา ════════════════════════════════════════════════════════════ */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.pr{background:var(--surface);border-radius:var(--r-l);padding:30px 26px 30px;
  box-shadow:var(--sh-2);border:1px solid var(--hair-2);display:flex;flex-direction:column;
  position:relative}
.pr.bundle{box-shadow:var(--sh-3);border:2px solid var(--signal)}
.pr .tagtop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--signal);color:#fff;font:600 12.5px/1 var(--body);
  padding:8px 16px;border-radius:var(--r-pill);white-space:nowrap}
.pr .ph2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pr .co{font:600 12px/1 var(--mono);color:var(--muted);margin-left:auto}
.pr .amt{font:700 40px/1.15 var(--disp);font-variant-numeric:tabular-nums;
  margin:16px 0 4px;letter-spacing:-.02em}
.pr .per{font-size:14px;color:var(--muted);line-height:1.7}
.pr .foot{margin-top:auto;padding-top:24px}
.pr .foot .btn{width:100%}
.pr-note{margin-top:26px;font-size:15px;color:var(--muted);line-height:1.85;max-width:76ch}
.meter{display:flex;gap:6px;margin-top:20px}
.meter .cell{flex:1;height:34px;border-radius:var(--r-s);display:grid;place-items:center;
  font:600 12px/1 var(--mono);background:var(--paper-2);color:var(--muted)}
.meter .cell.on{background:var(--text);color:var(--paper)}
.meter .cell.on[data-seat]{background:var(--accent);color:#0B1220}
.meter .cell.free{background:transparent;border:1.5px dashed var(--hair)}
.meter-cap{margin-top:10px;font-size:13.5px;color:var(--muted)}


/* ═══ แร็ค ════════════════════════════════════════════════════════════ */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.slot{background:var(--surface);border-radius:var(--r-l);padding:24px 22px;
  box-shadow:var(--sh-2);border:1px solid var(--hair-2);display:flex;flex-direction:column;gap:12px}
.slot .sh{display:flex;align-items:center;gap:10px}
.slot .sh h3{font-size:19px}
.slot .co{font:600 12px/1 var(--mono);color:var(--muted);margin-left:auto}
.slot p{font-size:15px;color:var(--muted);line-height:1.8}
.slot.empty{background:transparent;box-shadow:none;border:2px dashed var(--hair)}


/* ═══ ท้ายหน้า ════════════════════════════════════════════════════════ */
.foot{background:var(--paper-2);padding:52px 0 44px;margin-top:0}
.foot-in{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.foot-in p{font-size:14.5px;color:var(--muted);line-height:1.9;max-width:46ch}
.foot-in a{color:var(--text-2)}
.foot-in .fcol{max-width:34ch}
.foot-in .fnav{display:flex;gap:52px;flex-wrap:wrap}
.foot-in .fnav > div{display:flex;flex-direction:column;gap:9px}
.foot-in .fnav .fh{font:600 12.5px/1 var(--body);color:var(--text);margin-bottom:3px}
.foot-in .fnav a{font-size:14.2px;color:var(--muted)}
.foot-in .fnav a:hover{color:var(--signal)}
@media (max-width:640px){ .foot-in .fnav{gap:30px} }


/* ═══ การเคลื่อนไหว ═══════════════════════════════════════════════════
   สถานะ "เสร็จแล้ว" คือสถานะฐาน แอนิเมชันเป็นของแถม
   ปิดแอนิเมชัน = เห็นภาพสุดท้ายเสมอ ห้ามเห็นภาพว่าง                      */
.plot .bar,.plot .hr{transform-origin:center bottom}
.courier{opacity:1}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px)}
  .reveal.in{opacity:1;transform:none;
    transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .pw svg .bars{transform:translateX(var(--sweep,0));opacity:.72}
  .pw.in svg .bars{transform:none;opacity:1;
    transition:transform .4s cubic-bezier(.25,.7,.3,1),opacity .4s ease}
  .tl .rail i{transform:scaleX(.35)}
  .in .rail i,.toplist.in .rail i{transform:scaleX(var(--f,1));
    transition:transform .34s cubic-bezier(.2,.7,.3,1)}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


/* ═══ จอเล็ก ══════════════════════════════════════════════════════════ */
@media (max-width:960px){
  .grid.c3,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices,.slots{grid-template-columns:1fr}
  .band{padding:52px 0}
}
@media (max-width:700px){
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  h1{font-size:clamp(27px,7vw,36px)}
  .lede{font-size:16.5px}
  .cta .btn{flex:1;min-width:180px}
}
@media (max-width:430px){
  .wrap{padding:0 18px}
  .card,.panel{--pad:17px}
  .brand .sub{display:none}
  .band{padding:42px 0}
  .tile .tv{font-size:25px}
  .tile.wide .tv{font-size:33px}
}


/* ══════════════════════════════════════════════════════════════════════════
   เพิ่มรอบ 2 — เอาไอเดียจาก zortout.com มาปรับ + ใส่สีส้มให้ทั้งเว็บ
   เจ้าของบอกว่า "ในเว็บไม่มีสีส้มเลย เพิ่มเข้าไปบ้าง"
   ส้ม #F59E0B เป็นสีของ "การกระทำ / ความสำเร็จ / จุดเน้น"
   น้ำเงินยังเป็นโครงหลัก ส้มเป็นตัวปลุก ไม่ใช่แย่งความเป็นพระเอก
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --orange:#F59E0B;
  --orange-2:#EA8C00;
  --orange-soft:#FEF3C7;
  --orange-ink:#8A5300;
  --sh-orange:0 12px 30px rgba(245,158,11,.32);
}

.kicker.orange{background:var(--orange-soft);color:var(--orange-ink)}
.btn.orange{background:var(--orange);color:#3A2600;box-shadow:var(--sh-orange)}
.btn.orange:hover{background:var(--orange-2);color:#3A2600}
.feat .ic.orange{background:var(--orange-soft);color:var(--orange-ink)}
.ticks li .ck.orange{background:var(--orange-soft);color:var(--orange-ink)}
.stepn.orange{background:var(--orange);color:#3A2600;box-shadow:var(--sh-orange)}

/* ── แถบตัวเลข ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:var(--surface);border-radius:var(--r-l);box-shadow:var(--sh-2);
  border:1px solid var(--hair-2);overflow:hidden}
.stats .s{padding:28px 22px;text-align:center;border-right:1px solid var(--hair-2)}
.stats .s:last-child{border-right:0}
.stats .s .v{font:700 clamp(28px,3.6vw,40px)/1.1 var(--disp);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.stats .s:nth-child(odd) .v{color:var(--signal)}
.stats .s:nth-child(even) .v{color:var(--orange-ink)}
.stats .s .l{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.6}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stats .s{border-bottom:1px solid var(--hair-2)}
  .stats .s:nth-child(even){border-right:0}
}

/* ── แถบช่องทาง/ขนส่งที่รองรับ ── */
.chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.chip-b{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-pill);
  font:600 15px/1 var(--body);color:var(--text-2);box-shadow:var(--sh-1)}
.chip-b .sq{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  font:700 11px/1 var(--mono);color:#fff}

/* ── ส่วน FEATURED: มือถือซ้าย เนื้อหาขวา ── */
.showcase{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:56px;align-items:center;position:relative}
.showcase.flip{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.showcase.flip .vis{order:2}
.showcase .modes{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}
.showcase .mode{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;
  color:var(--text-2)}
.showcase .mode .mi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--orange-soft);color:var(--orange-ink);flex:none}
.showcase .mode:nth-child(2) .mi{background:var(--signal-soft);color:var(--signal)}
.showcase .mode:nth-child(3) .mi{background:#CFFAFE;color:#0A6070}
.showcase .mode .mi svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .showcase,.showcase.flip{grid-template-columns:1fr;gap:34px}
  .showcase.flip .vis{order:0}
}

/* โครงมือถือแอนดรอยด์ — วาดด้วย CSS ไว้ก่อน สลับเป็นรูปจริงได้ทันที
   แค่ใส่ <img> แทน .droid .scr แล้วลบกรอบทิ้ง */
.droid{width:min(300px,84%);margin-inline:auto;position:relative}
.droid .body{border-radius:38px;background:linear-gradient(160deg,#2B3446,#161D2B);
  padding:11px;box-shadow:0 28px 60px rgba(16,32,64,.3),0 6px 16px rgba(16,32,64,.2)}
.droid .scr{border-radius:29px;background:var(--paper);overflow:hidden;position:relative}
.droid .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:#0C121C;z-index:3}
.droid .btn-side{position:absolute;right:-3px;top:118px;width:3px;height:56px;
  border-radius:3px;background:var(--orange)}
.droid .app{padding:26px 14px 16px}
.droid .aph{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.droid .aph .t{font:700 13px/1 var(--disp)}
.droid .aph .p{margin-left:auto;font:600 10px/1 var(--body);color:var(--rise);
  background:var(--paper-2);padding:5px 9px;border-radius:var(--r-pill)}
.droid .tile-s{background:var(--paper-2);border-radius:13px;padding:11px 12px;margin-bottom:9px}
.droid .tile-s.hi{background:var(--signal);color:#fff}
.droid .tile-s .lb{font-size:10.5px;font-weight:600;opacity:.75}
.droid .tile-s .vl{font:700 20px/1.2 var(--mono);font-variant-numeric:tabular-nums;margin-top:3px}
.droid .tile-s.hi .vl{font-size:26px}
.droid .r2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.droid .scanrow{display:flex;align-items:center;gap:9px;background:var(--orange-soft);
  border-radius:13px;padding:11px 12px;margin-top:9px;color:var(--orange-ink)}
.droid .scanrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;flex:none}
.droid .scanrow b{font-size:12.5px}
.droid .scanrow span{font-size:11px;opacity:.85;display:block}

/* เส้นโค้งจาง ๆ หลังส่วน showcase — ให้หน้ามีลมหายใจ ไม่แข็ง */
.wave{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wave svg{position:absolute;left:-6%;top:12%;width:112%;height:auto;opacity:.5}
.wave path{fill:none;stroke:var(--signal);stroke-width:1.4;opacity:.28}
.wave path.o{stroke:var(--orange);opacity:.3}
.showcase > *:not(.wave){position:relative;z-index:1}

/* ── แถบ CTA สีส้ม ── */
.strip{background:linear-gradient(135deg,var(--orange),#DD7C00);border-radius:var(--r-l);
  padding:34px 36px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  box-shadow:var(--sh-orange)}
.strip h3{color:#3A2600;font-size:clamp(19px,2.6vw,25px);flex:1;min-width:240px}
.strip p{color:rgba(58,38,0,.82);font-size:15.5px;margin-top:7px;line-height:1.75}
.strip .btn{background:#241800;color:#FFF3D6;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.strip .btn:hover{background:#0F0A00;color:#FFF3D6}

/* ── ช่องทางขายที่โปรแกรมอ่านใบปะหน้าได้ ───────────────────────────
   เจ้าของย้ำ 2026-09-06: "ใบแปะก็คือใบแปะ ไม่ใช่ขนส่ง"
   ใบปะหน้าออกมาจากช่องทางขาย (Shopee/TikTok/Lazada/LINE) ไม่ใช่จากบริษัทขนส่ง
   → แถวนี้ต้องเป็นช่องทางขายเท่านั้น ห้ามเอาโลโก้ขนส่งกลับมาใส่

   โลโก้แต่ละเจ้าสัดส่วนไม่เท่ากัน บางเจ้าเป็นไอคอนจัตุรัส บางเจ้าเป็นตัวอักษรยาว
   เลยวางในกล่องสูงเท่ากันแล้วให้ object-fit จัดเอง ทุกใบจะดูหนักเท่ากัน */
.chan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.chan .c{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;min-height:104px;padding:20px 12px;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--r-l);box-shadow:var(--sh-1);
  text-align:center;transition:transform .18s ease,box-shadow .18s ease}
@media (hover:hover){ .chan .c:hover{transform:translateY(-3px);box-shadow:var(--sh-2)} }
/* ทุกใบมีแค่โลโก้ ไม่มีชื่อกำกับ (เจ้าของสั่ง "text เอาออก เอาแค่โลโก้")
   กล่องโลโก้จึงสูงเท่ากันทุกใบ ไม่มีเงื่อนไขพิเศษของใบไหนทั้งนั้น
   ห้ามใช้ display:grid คู่กับ max-height:100% เพราะ % จะไปอิงความสูงแถวที่โตตามรูป
   รูปจะไม่ถูกจำกัดแล้วล้นออกนอกกล่อง (เคยเจอมาแล้ว) ใช้ flex + พิกเซลเท่านั้น */
.chan .lg{height:48px;width:100%;display:flex;align-items:center;justify-content:center}
.chan .lg img{max-height:48px;max-width:80%;width:auto;height:auto;object-fit:contain}

/* โหมดมืด: ใบช่องทางขายใช้พื้นขาวทั้งใบไปเลย (เจ้าของสั่ง 2026-09-06)
   ของเดิมทำแผ่นขาวเล็ก ๆ รองเฉพาะโลโก้ กลายเป็นสี่เหลี่ยมขาวลอยกลางการ์ดมืด
   แถมแผ่นแต่ละใบขนาดไม่เท่ากันด้วย — ทำทั้งใบให้ขาวแล้วทุกใบเท่ากันเอง
   ที่ต้องขาวเพราะ Lazada เป็นน้ำเงินเข้ม TikTok เป็นดำ วางบนพื้นมืดแล้วจมหาย
   และห้ามใช้ filter:invert แก้ เพราะเป็นการดัดแปลงเครื่องหมายการค้าของเขา */
@media (max-width:620px){
  .chan{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .chan .c{min-height:86px;padding:14px 10px}
  .chan .lg{height:40px}
  .chan .lg img{max-height:40px}
}

/* Workspace pages share the existing light palette and Thai type scale. */
.workspace-nav{display:flex;flex-wrap:wrap;gap:8px 20px;padding:12px 0;border-bottom:1px solid var(--hair)}
.workspace-nav a{font-size:14px;line-height:1.6;padding:4px 0;color:var(--muted)}
.workspace-nav a[aria-current="page"]{color:var(--text);border-bottom:2px solid var(--signal);font-weight:600}
.workspace-local{font-size:12.5px;color:var(--muted);margin:10px 0}
.workspace .band{padding-top:24px}
.workspace h1{font-size:clamp(24px,4vw,34px);line-height:1.4;margin:0 0 12px}
.workspace h2{font-size:20px;line-height:1.45;margin:0 0 14px}
.workspace p{line-height:1.75}
.workspace-heading{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.workspace-number{font-size:32px;margin:12px 0}
.workspace-section{margin-top:24px}
.workspace-task{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.workspace-task>div{min-width:0}
.workspace-task strong{font-size:16px;line-height:1.65;overflow-wrap:break-word}
.workspace-role-form{display:grid;gap:8px;max-width:180px}
.workspace-warning{color:var(--fall)}
.workspace-email{overflow-wrap:anywhere;font-size:14px}
.workspace-facts{display:grid;grid-template-columns:1fr auto;gap:10px;margin:16px 0}
.workspace-facts dt{color:var(--muted)}
.workspace-facts dd{margin:0;font-variant-numeric:tabular-nums}
.workspace-fieldset{border:0;margin:0;padding:0;min-width:0}
.workspace-fieldset:disabled{opacity:.65}
.workspace .msg{margin-top:18px}
.workspace button.btn-line{background:transparent;border:0;padding:8px 0;cursor:pointer;font:600 14px/1.6 var(--body);color:var(--signal)}
@media(max-width:600px){
 .workspace-task{align-items:flex-start;flex-direction:column}
 .workspace-task form{max-width:none;width:100%}
 .workspace-facts{grid-template-columns:1fr}
 .workspace-facts dd{margin-bottom:8px}
 .workspace-nav{gap:4px 16px}
 .tabbar{grid-template-columns:repeat(4,minmax(0,1fr))}
}