/* ═══ อ่านบนมือถือเป็นหลัก เปิดจาก LINE → สว่างเป็นค่าตั้งต้น รองรับมืดครบ ═══ */
:root {
  --ground:#f5f7f9; --surface:#ffffff; --raised:#eef2f6; --line:#dce3ea; --line-soft:#e8edf2;
  --ink:#0c1319; --muted:#56656f; --faint:#7e8d97;
  --sea:#0a6ebd; --sea-ink:#ffffff; --sea-wash:#e4f0fa;
  --gold:#8f6508; --gold-wash:#fbf1d9; --gold-line:#e3c884;
  --red:#b93636; --red-wash:#fbe9e9;
  --flame:#c95a22; --flame-wash:#fdeee6;
  --shadow:0 1px 2px rgba(12,19,25,.05), 0 6px 18px rgba(12,19,25,.06);
  --disp:"Bai Jamjuree","Sarabun",system-ui,sans-serif;
  --body:"Sarabun","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0a0d10; --surface:#141a20; --raised:#1b232a; --line:#2a353e; --line-soft:#212a31;
    --ink:#f1f5f8; --muted:#95a4ae; --faint:#6f7e88;
    --sea:#4aa8ea; --sea-ink:#04243c; --sea-wash:#102534;
    --gold:#e8b04b; --gold-wash:#2b2213; --gold-line:#5c4a1e;
    --red:#ff7b7b; --red-wash:#2e1717;
    --flame:#f0824a; --flame-wash:#2e1b12;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --ground:#0a0d10; --surface:#141a20; --raised:#1b232a; --line:#2a353e; --line-soft:#212a31;
  --ink:#f1f5f8; --muted:#95a4ae; --faint:#6f7e88;
  --sea:#4aa8ea; --sea-ink:#04243c; --sea-wash:#102534;
  --gold:#e8b04b; --gold-wash:#2b2213; --gold-line:#5c4a1e;
  --red:#ff7b7b; --red-wash:#2e1717;
  --flame:#f0824a; --flame-wash:#2e1b12;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.78;-webkit-font-smoothing:antialiased}
.page{max-width:880px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,32px) 96px}
h1,h2,h3{font-family:var(--disp);font-weight:700;margin:0;line-height:1.28;text-wrap:balance}
p{margin:0 0 .9em}
a{color:var(--sea)}
figure{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── หัว ── */
.top{border-bottom:2px solid var(--ink);padding-bottom:22px;margin-bottom:10px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);font-weight:600}
.top h1{font-size:clamp(1.95rem,6.4vw,2.8rem);letter-spacing:-.022em;margin-top:10px}
.top .sub{color:var(--muted);font-size:17px;margin:12px 0 0;max-width:54ch}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pill{font-size:13.5px;font-weight:600;padding:6px 13px;border-radius:999px;background:var(--sea-wash);color:var(--sea);border:1px solid transparent}
.pill.g{background:var(--gold-wash);color:var(--gold);border-color:var(--gold-line)}

/* ── สารบัญ ── */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:22px 0 40px;box-shadow:var(--shadow)}
.toc .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.toc ol{margin:0;padding-left:22px;columns:2;column-gap:28px}
.toc li{margin-bottom:5px;font-size:14.5px;break-inside:avoid}
.toc a{text-decoration:none;color:var(--ink)}
.toc a:hover{color:var(--sea);text-decoration:underline}
@media (max-width:560px){.toc ol{columns:1}}

/* ── บล็อกเนื้อหา ── */
section{margin-bottom:46px;scroll-margin-top:24px}
.h-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.h-num{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--sea-ink);background:var(--sea);width:27px;height:27px;border-radius:8px;display:grid;place-items:center;flex:none}
section h2{font-size:clamp(1.28rem,3.8vw,1.62rem);letter-spacing:-.014em}
.lede{color:var(--muted);margin:0 0 18px;max-width:60ch}
h3{font-size:16.5px;margin:22px 0 8px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(15px,3vw,22px);box-shadow:var(--shadow);margin-bottom:14px}

/* ── ขั้นตอน ── */
.steps{display:grid;gap:12px}
.step{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.step .n{font-family:var(--disp);font-size:23px;font-weight:700;color:var(--sea);line-height:1.15}
.step .t{font-weight:700;font-size:16.5px;margin-bottom:3px}
.step .d{color:var(--muted);font-size:14.5px;line-height:1.72}
.step .d p{margin:0 0 .6em}
.step .d p:last-child{margin-bottom:0}

/* ── ตารางแปลหน้าจอ ── */
.tbl-hint{font-size:13px;color:var(--faint);margin:-6px 0 14px;display:none}
.tbl-hint.on{display:block}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:14px}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14.5px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{background:var(--raised);font-weight:700;font-size:13px;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.en{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--sea);white-space:nowrap}
td.th b{font-weight:700}
td.note{color:var(--muted);font-size:13.5px}

/* ── กล่องเตือน ── */
.box{border-radius:14px;padding:16px 18px;margin-bottom:14px;border:1px solid var(--line);border-left-width:4px;background:var(--surface)}
.box .bh{font-family:var(--disp);font-weight:700;font-size:15.5px;margin-bottom:5px}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.box ul{margin:6px 0 0;padding-left:20px}
.box li{margin-bottom:5px;font-size:14.5px}
.box.warn{border-left-color:var(--gold);background:var(--gold-wash);border-color:var(--gold-line)}
.box.warn .bh{color:var(--gold)}
.box.stop{border-left-color:var(--red);background:var(--red-wash)}
.box.stop .bh{color:var(--red)}
.box.ok{border-left-color:var(--sea);background:var(--sea-wash)}
.box.ok .bh{color:var(--sea)}

/* ── ปุ่ม ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--sea);color:var(--sea-ink);font-family:var(--disp);font-weight:700;font-size:16.5px;padding:14px 26px;border-radius:12px;text-decoration:none;box-shadow:var(--shadow);border:0}
.btn.ghost{background:var(--surface);color:var(--sea);border:1.5px solid var(--sea)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 10px}
.btn-note{font-size:13.5px;color:var(--muted);margin:0}

/* ── โค้ด/ลิงก์ตัวอย่าง ── */
.codebox{font-family:var(--mono);font-size:13.5px;background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:12px 14px;word-break:break-all;line-height:1.7;margin-bottom:10px}
.codebox .hl{color:var(--flame);font-weight:600}

/* ── สคริปต์แคปชัน ── */
.script{background:var(--raised);border:1px dashed var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px}
.script .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.script .body{font-size:15.5px;line-height:1.85;white-space:pre-line}

/* ── แผนภาพ 4 ขั้น (เรียงลงมาเองเมื่อจอแคบ) ── */
.flow{display:flex;align-items:stretch;gap:6px;margin-bottom:10px}
.fbox{flex:1;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center}
.fbox:first-child{border-color:var(--sea);background:var(--sea-wash)}
.fbox.pay{border-color:var(--gold);background:var(--gold-wash)}
.fbox .fn{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--faint);display:block;margin-bottom:4px}
.fbox:first-child .fn{color:var(--sea)}
.fbox.pay .fn{color:var(--gold)}
.fbox b{font-family:var(--disp);font-size:15.5px;font-weight:700;display:block;line-height:1.35}
.fbox.pay b{color:var(--gold)}
.fbox small{display:block;color:var(--muted);font-size:13px;line-height:1.55;margin-top:4px}
.farr{align-self:center;color:var(--faint);font-size:19px;line-height:1;flex:none}
.flow-cap{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.65}
@media (max-width:620px){
  .flow{flex-direction:column;gap:4px}
  .fbox{padding:12px 14px}
  .farr{transform:rotate(90deg);font-size:17px}
}

/* ── ถาม-ตอบ ── */
.qa{border-bottom:1px solid var(--line-soft);padding:14px 0}
.qa:last-child{border-bottom:0}
.qa .q{font-weight:700;font-size:15.5px;margin-bottom:4px}
.qa .a{color:var(--muted);font-size:14.5px;line-height:1.75}

/* ── สรุปตัวเลข ── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px 16px;box-shadow:var(--shadow)}
.fact .k{font-size:12.5px;color:var(--faint);font-weight:600;letter-spacing:.02em}
.fact .v{font-family:var(--disp);font-size:21px;font-weight:700;color:var(--sea);margin-top:3px;line-height:1.25}
.fact .v small{font-size:14px;font-weight:600}

/* ── ภาพประกอบ ── */
figure{margin-bottom:14px}
figure svg{width:100%;height:auto;display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
figcaption{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.65}

/* ── ท้ายหน้า ── */
.foot{border-top:1px solid var(--line);margin-top:16px;padding-top:20px;font-size:13.5px;color:var(--faint);line-height:1.8}

/* ── แถบเตือนค่าที่ยังไม่ใส่ (เห็นเฉพาะตอนยังมีช่องว่าง) ── */
.todo{background:var(--red-wash);border:1px solid var(--red);border-radius:12px;padding:12px 16px;margin-bottom:22px;font-size:14px;color:var(--red);font-weight:600}
.cfg-blank{background:var(--red-wash);color:var(--red);padding:0 5px;border-radius:4px;font-weight:700}

/* ═══════════════════════════════════════════════════════
   หน้า /referral — กติกาผู้แนะนำ
   ═══════════════════════════════════════════════════════ */

/* ── แถบบอกว่ายังไม่เปิด (ปิดได้ที่ PROGRAM_LIVE ท้ายไฟล์ referral/index.html) ── */
.draft{background:var(--gold-wash);border:1px solid var(--gold-line);border-left:4px solid var(--gold);border-radius:12px;padding:14px 18px;margin-bottom:24px}
.draft b{color:var(--gold);font-family:var(--disp);display:block;margin-bottom:3px}
.draft p{margin:0;font-size:14.5px;color:var(--muted)}

/* ── ภาพ: ใครได้ ใครไม่ได้ (2 ชั้น) ── */
.tree{margin-bottom:12px}
.tbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow)}
.tbox .who{font-family:var(--disp);font-weight:700;font-size:16.5px;flex:1 1 160px;line-height:1.35}
.tbox .who small{display:block;font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.6}
.tbox .mark{font-family:var(--disp);font-weight:700;font-size:14.5px;padding:7px 14px;border-radius:999px;white-space:nowrap;flex:none}
.tbox.me{border-color:var(--ink)}
.tbox.yes{border-color:var(--gold);background:var(--gold-wash)}
.tbox.yes .mark{background:var(--gold);color:#fff}
.tbox.no{border-color:var(--line);opacity:.78}
.tbox.no .mark{background:var(--raised);color:var(--muted);border:1px solid var(--line)}
.tstep{display:flex;align-items:center;gap:9px;padding:9px 0 9px 22px;color:var(--muted);font-size:14px}
.tstep::before{content:"↓";font-size:17px;color:var(--faint)}

/* ── ภาพ: เงินก้อนนี้แบ่งยังไง ── */
.split{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);margin-bottom:12px}
.srow{margin-bottom:16px}
.srow:last-child{margin-bottom:0}
.srow .sk{font-size:14px;font-weight:600;margin-bottom:6px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.srow .sk em{font-style:normal;font-family:var(--mono);font-weight:600;color:var(--muted)}
.srow .sv{font-family:var(--disp);font-size:19px;font-weight:700}
.sbar{height:16px;border-radius:999px;background:var(--raised);overflow:hidden}
.sbar i{display:block;height:100%;border-radius:999px;min-width:6px}
.srow.total .sbar i{width:100%;background:var(--line)}
.srow.total .sv{color:var(--muted)}
.srow.seller .sbar i{width:10%;background:var(--sea)}
.srow.seller .sv{color:var(--sea)}
.srow.you .sbar i{width:3%;background:var(--gold)}
.srow.you .sv{color:var(--gold)}
.snote{font-size:13.5px;color:var(--muted);margin:10px 0 0;line-height:1.65}

/* ── ภาพ: เส้นเวลา 6 เดือน ── */
.tl{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);margin-bottom:12px}
.tl-bar{display:flex;gap:3px;margin:10px 0 8px}
.tl-bar span{flex:1;height:28px;background:var(--gold-wash);border:1px solid var(--gold-line);border-radius:5px;display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--gold)}
.tl-bar span.off{background:var(--raised);border-color:var(--line);color:var(--faint)}
.tl-ends{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--muted);line-height:1.5}
.tl-ends b{display:block;color:var(--ink);font-size:14px}
.tl-ends div:last-child{text-align:right}

/* ── หมุดหมายของรางวัล ── */
.mile{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin-bottom:12px}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);text-align:center}
.mcard .mn{font-family:var(--disp);font-size:30px;font-weight:700;color:var(--gold);line-height:1}
.mcard .mu{font-size:13px;color:var(--faint);font-weight:600;margin:2px 0 9px}
.mcard .mr{font-weight:700;font-size:15.5px;line-height:1.4}
.mcard .mr small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.55}