/* ============================================================================================
   onboarding.css — R237 Onboarding ลูกค้าใหม่ "เริ่มต้นที่นี่" (docs/task/167 = new-mgmt D328 docs/design/customer-onboarding-spec.md §1.3, §2.4, §3 ; คู่ R DEV-247 ONB_STYLE)
   3 ส่วน ทุกส่วน "หน้าตาเดิม 100 %" (กติกา §0.2 ข้อ 1 — ไม่มีสีใหม่ ใช้ token --nhf-* ของเว็บ):
   1. แผ่น .nhf-onb (แผ่นต้อนรับ W1 + ทัวร์ T1–T7) = sheet .nhf-recgame ของ recgame.js:31-55 ที่เจ้าของรับแล้ว 1:1 (ฉากหลัง .62 blur 4 · การ์ด 440 radius 22 · ไล่สี #27272e→#141418 + radial แดง ·
      kicker pill · ✕ 48 · CTA 56 แดง #d21414→#b90504 · "ไว้ก่อน" 48 ghost) จัดเป็น 3 ชั้น (หัวติดบน · ตัวเลื่อน · ท้ายตรึง) ≤ 70vh บนมือถือ (สเปก §2.1 UX-M2) · desktop ≥ 576 = กล่องกลาง
   2. การ์ดในหน้า .nhf-onb-card = การ์ด Push (.nhf-push theme-override.css:1721) 1:1: ไล่สี #2a0000→#7a0000→#c40707 ขอบทอง .4 radius 20 เงา · ไอคอนวง 44 สีปุ่มจริง (เขียว ฝาก / แดง-ทอง แทง / น้ำเงิน ถอน) ·
      ปุ่ม 56 แดง · ✕ 48 · สูง ≤ 150 px ทุก state (desktop ≤ 110 แถวเดียว) — mockup research/front/mockups/onboarding-2026-10-29/L/home-entry.html
   3. หน้าคู่มือ .onb-howto บน MpShell (โทนสว่าง inner-light: พื้น #e9e9e9 การ์ดขาว ปุ่มแดง) — mockup guide.html 1:1 ; สารบัญชิปห่อ 2 แถว ≤ 96 px ไม่มี overflow-x ; desktop ≥ 992 = รายการซ้าย sticky + คอลัมน์ 900
   กติกาผู้สูงอายุ: ทุกบรรทัด ≥ 17 px (หัว 20–26 ตัวเลข proof 30) · ปุ่มหลัก ≥ 56 · แตะ ≥ 48 · summary FAQ ≥ 56 · รูปทุกรูปในกล่อง aspect ตาย object-fit:contain (ปกเกม 2:3) · ไม่มี animation ·
   prefers-reduced-motion ไม่มี transition · ธีม red (SUKJAI99) = .onb-theme-red เปลี่ยนแค่สี (#DC2626) ; L base font 14 px → กำหนด px ตรงทุก block
   ============================================================================================ */

/* ---------- 1. แผ่น (= .nhf-recgame) ---------- */
.nhf-onb { --onb-a: #27272e; --onb-b: #141418; --onb-glow: rgba(210, 20, 20, .42); --onb-kicker: rgba(210, 20, 20, .28); --onb-ring: rgba(210, 20, 20, .16); --onb-red: var(--nhf-red, #b90504); --onb-red-hi: var(--nhf-red-hi, #d21414);
  --onb-cta-shadow: rgba(185, 5, 4, .45); --onb-gold: var(--nhf-gold, #f2c14e); --onb-green: var(--nhf-green, #1f9d55); --onb-blue: var(--nhf-blue, #2563eb);
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1090; display: flex; align-items: flex-end; justify-content: center; padding: 0; font-family: var(--nhf-font-body, 'NotosansThai', 'Mitr', sans-serif); }
.nhf-onb.onb-theme-red { --onb-glow: rgba(220, 38, 38, .42); --onb-kicker: rgba(220, 38, 38, .32); --onb-ring: rgba(220, 38, 38, .18); --onb-red: #DC2626; --onb-red-hi: #EF4444; --onb-cta-shadow: rgba(220, 38, 38, .45); --onb-gold: #F59E0B; --onb-green: #16A34A; }
.nhf-onb__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.nhf-onb__card { position: relative; width: 100%; max-width: 440px; max-height: 70vh; display: flex; flex-direction: column; margin: 0; padding: 0; border-radius: 22px 22px 0 0; color: #fff; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, var(--onb-glow), transparent 60%), linear-gradient(180deg, var(--onb-a) 0%, var(--onb-b) 100%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 -18px 50px rgba(0, 0, 0, .55); overflow: hidden; }
.nhf-onb__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px 0 22px; min-height: 52px; }
.nhf-onb__kicker { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #fff; background: var(--onb-kicker); border: 1px solid rgba(255, 255, 255, .18); text-align: left; }
.nhf-onb__x { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .78); font-size: 30px; line-height: 48px; cursor: pointer; font-family: inherit; }
.nhf-onb__x:hover, .nhf-onb__x:focus { background: rgba(255, 255, 255, .1); color: #fff; outline: none; }
.nhf-onb__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 22px 2px; }
.nhf-onb__title { margin: 0 0 10px; font-size: 22px; font-weight: 700; line-height: 1.3; color: #fff; font-family: inherit; }
.nhf-onb__title--t { font-size: 20px; }
.nhf-onb__pic { display: none; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 120px; height: 120px; margin: 0 auto 8px; border-radius: 18px; background: #1d1d22; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 6px var(--onb-ring), 0 12px 30px rgba(0, 0, 0, .45); overflow: hidden; color: var(--onb-gold); }
.nhf-onb--tall .nhf-onb__pic, .nhf-onb--tour .nhf-onb__pic { display: flex; }
.nhf-onb__pic img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; padding: 12px; display: block; }
.nhf-onb__pic--160 { width: 160px; height: 160px; }
.nhf-onb__pic--cover { width: 120px; height: 180px; border-radius: 14px; }
.nhf-onb__pic--cover img { padding: 0; -o-object-fit: contain; object-fit: contain; }
.nhf-onb__pic--light { background: #fff; }
.nhf-onb__pic--big .fas { font-size: 84px; }
.nhf-onb__pic--row { width: 100%; max-width: 300px; height: 96px; gap: 18px; border-radius: 18px; }
.nhf-onb__pic--row .nhf-onb__ic { width: 48px; height: 48px; flex: 0 0 48px; }
.nhf-onb__pic--row .nhf-onb__ic .fas { font-size: 24px; }
.nhf-onb__fl { display: block; width: 64px; height: 48px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.nhf-onb__fl img { padding: 0; -o-object-fit: cover; object-fit: cover; }
.nhf-onb__pic--fab { display: flex; width: auto; max-width: 100%; height: 56px; margin: 30px auto 8px; padding: 0 20px 0 14px; gap: 7px; border-radius: 999px; background: #141416; border: 2px solid var(--onb-red); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); color: var(--onb-gold); font-weight: 700; font-size: 18px; }
.nhf-onb__pic--fab .fas { font-size: 24px; }
.nhf-onb__rows { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 0; padding: 0; list-style: none; }
.nhf-onb__row { display: flex; align-items: center; gap: 12px; min-height: 44px; list-style: none; }
.nhf-onb__ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; overflow: hidden; }
.nhf-onb__ic--dep { background: var(--onb-green); }
.nhf-onb__ic--bet { background: var(--onb-red); color: var(--onb-gold); }
.nhf-onb__ic--wd { background: var(--onb-blue); }
.nhf-onb__ic--bank { background: rgba(255, 255, 255, .12); color: var(--onb-gold); }
.nhf-onb__ic--pl { background: rgba(255, 255, 255, .12); color: #fff; }
.nhf-onb__ic--flag { background: #fff; }
.nhf-onb__ic--flag img { width: 44px; height: 44px; -o-object-fit: cover; object-fit: cover; }
.nhf-onb__t { font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; }
.nhf-onb__s { font-size: 17px; line-height: 1.35; color: rgba(255, 255, 255, .86); }
.nhf-onb__box { margin: 0 0 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 17px; line-height: 1.45; color: #fff; text-align: left; }
.nhf-onb__dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 17px; color: rgba(255, 255, 255, .72); line-height: 1.2; }
.nhf-onb__dotrow { letter-spacing: 2px; color: var(--onb-gold); }
.nhf-onb__foot { flex: 0 0 auto; padding: 6px 22px calc(12px + env(safe-area-inset-bottom, 0px)); }
.nhf-onb__btn, .nhf-onb__btn:visited, .nhf-onb__btn:hover { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 8px; min-height: 56px; width: 100%; padding: 0 12px; border: 0; border-radius: 14px; font-size: 18px; font-weight: 700; line-height: 1.2;
  color: #fff !important; text-decoration: none !important; background: linear-gradient(180deg, var(--onb-red-hi), var(--onb-red)); box-shadow: 0 10px 24px var(--onb-cta-shadow); cursor: pointer; font-family: inherit; }
.nhf-onb__btn:focus { -webkit-filter: brightness(1.06); filter: brightness(1.06); outline: none; }
.nhf-onb__later, .nhf-onb__later:visited { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 8px 0 0; min-height: 48px; border: 0; border-radius: 12px; background: transparent; color: rgba(255, 255, 255, .82); font-size: 17px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; }
.nhf-onb__later:hover, .nhf-onb__later:focus { background: rgba(255, 255, 255, .08); color: #fff; outline: none; text-decoration: none; }
.nhf-onb__link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; border: 0; background: transparent; color: #fff; font-size: 17px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: inherit; }
.nhf-onb__nav { display: flex; gap: 10px; margin-top: 8px; }
.nhf-onb__nav .nhf-onb__later { flex: 1 1 0; margin: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.nhf-onb__toast { margin: 6px 0 0; font-size: 17px; line-height: 1.4; color: var(--onb-gold); text-align: center; }
.nhf-onb__toast:empty { display: none; }
html.nhf-onb-open, html.nhf-onb-open body { overflow: hidden; }
@media (min-width: 576px) { .nhf-onb { align-items: center; padding: 16px; } .nhf-onb__card { border-radius: 22px; max-height: 88vh; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .nhf-onb__head { padding: 12px 8px 0 28px; } .nhf-onb__body { padding: 8px 28px 6px; } .nhf-onb__foot { padding: 8px 28px 22px; } }

/* ---------- 1b. R239 ทัวร์แบบ "ชี้ของจริง" (docs/task/169 = new-mgmt D328-22 / X23 ; คู่ R DEV-250) — รูเดียวรอบปุ่มจริง + กรอบทอง (token --onb-gold เดิม) · แผ่นล่าง/บนจอ (มือถือ) · ป๊อปโอเวอร์+caret (PC ≥ 992) ·
   z 10001 เหนือแถบบน/เมนูข้าง (#sidebar 1023, FAB 997) · กะพริบเบา ๆ ปิดเมื่อ prefers-reduced-motion · ตัวอักษร ≥ 17 ปุ่ม ≥ 48/56 เดิม ---------- */
.nhf-onb--coach { display: block; padding: 0; z-index: 10001; }
.nhf-onb--coach .nhf-onb__backdrop { background: rgba(0, 0, 0, .74); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nhf-onbc__hole { position: absolute; border-radius: 14px; box-sizing: border-box; border: 3px solid var(--onb-gold); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .74); pointer-events: none; }
.nhf-onbc__hole::after { content: ''; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 17px; border: 3px solid var(--onb-gold); opacity: 0; animation: nhf-onbc-pulse 1.6s ease-out infinite; }
@keyframes nhf-onbc-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.14); opacity: 0; } }
.nhf-onb--coach .nhf-onbc__sheet { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 62vh; max-height: 62dvh; margin: 0; border-radius: 22px 22px 0 0; text-align: left; overflow: visible; }
.nhf-onb--coach .nhf-onbc__sheet--top { bottom: auto; top: 0; border-radius: 0 0 22px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.nhf-onb--coach .nhf-onbc__sheet--pop { position: absolute; left: auto; right: auto; bottom: auto; border-radius: 16px; max-height: min(84vh, 760px); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.nhf-onb--coach .nhf-onbc__sheet .nhf-onb__body, .nhf-onb--coach .nhf-onbc__sheet .nhf-onb__foot { text-align: left; }
.nhf-onb--coach .nhf-onbc__sheet--bottom .nhf-onb__foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.nhf-onbc__caret { position: absolute; width: 18px; height: 18px; background: var(--onb-a); border: 1px solid rgba(255, 255, 255, .14); transform: rotate(45deg); }
.nhf-onbc__caret--top { top: -10px; border-right: 0; border-bottom: 0; }
.nhf-onbc__caret--bottom { bottom: -10px; border-left: 0; border-top: 0; background: var(--onb-b); }
.nhf-onb--coach .nhf-onb__head { padding: 6px 4px 0 18px; }
.nhf-onbc__count { display: inline-flex; align-items: center; min-height: 32px; margin-right: 8px; font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, .78); letter-spacing: 1px; white-space: nowrap; }
.nhf-onb--coach .nhf-onb__kicker { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nhf-onbc__point { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--onb-gold); text-align: left; }
.nhf-onbc__point-glyph { flex: 0 0 auto; font-size: 26px; line-height: 1; }
.nhf-onbc__row { display: flex; gap: 12px; align-items: flex-start; }
.nhf-onbc__thumb { display: block; flex: 0 0 64px; width: 64px; height: 96px; margin: 0; border-radius: 10px; background: #1d1d22; border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; overflow: hidden; }
.nhf-onbc__thumb img { width: 100%; height: 100%; padding: 0; -o-object-fit: cover; object-fit: cover; display: block; }
.nhf-onbc__text { flex: 1 1 auto; min-width: 0; }
.nhf-onbc__head { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; text-align: left; overflow-wrap: anywhere; font-family: inherit; }
.nhf-onb--coach .nhf-onb__box { margin-top: 4px; }
.nhf-onbc__hint { margin: 6px 0 0; font-size: 17px; line-height: 1.3; color: rgba(255, 255, 255, .78); text-align: center; }
.nhf-onb--short .nhf-onbc__hint { display: none; }
.nhf-onb__nav--one { justify-content: stretch; }
@media (min-width: 576px) { .nhf-onb--coach { padding: 0; } .nhf-onb--coach .nhf-onbc__sheet { border-radius: 22px 22px 0 0; max-height: 62vh; } .nhf-onb--coach .nhf-onbc__sheet--top { border-radius: 0 0 22px 22px; } .nhf-onb--coach .nhf-onbc__sheet--pop { border-radius: 16px; max-height: min(84vh, 760px); } }
@media (prefers-reduced-motion: reduce) { .nhf-onbc__hole::after { animation: none; display: none; } }

/* ---------- 2. การ์ดในหน้า (= .nhf-push) ---------- */
.nhf-onb-card { --onb-red: var(--nhf-red, #b90504); --onb-red-hi: var(--nhf-red-hi, #d21414); --onb-gold: #ffd34d; --onb-green: var(--nhf-green, #1f9d55); --onb-blue: var(--nhf-blue, #2563eb);
  position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 10px 14px 10px 12px; border-radius: 20px; border: 1px solid rgba(255, 211, 77, .4);
  background: linear-gradient(135deg, #2a0000 0%, #7a0000 55%, #c40707 100%); box-shadow: 0 10px 28px rgba(196, 7, 7, .35), inset 0 1px 0 rgba(255, 255, 255, .12); color: #fff; max-height: 150px; overflow: hidden; font-family: var(--nhf-font-body, 'NotosansThai', 'Mitr', sans-serif); }
.nhf-onb-card.onb-theme-red { --onb-red: #DC2626; --onb-red-hi: #EF4444; --onb-gold: #F59E0B; --onb-green: #16A34A; background: linear-gradient(135deg, #1f1f1f 0%, #7f1d1d 55%, #DC2626 100%); box-shadow: 0 10px 28px rgba(220, 38, 38, .3), inset 0 1px 0 rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); }
.nhf-onb-card__top { display: flex; align-items: center; gap: 10px; padding-right: 44px; min-height: 44px; }
.nhf-onb-card__ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); overflow: hidden; }
.nhf-onb-card__ic--dep { background: var(--onb-green); }
.nhf-onb-card__ic--bet { background: var(--onb-red); color: var(--onb-gold); }
.nhf-onb-card__ic--wd { background: var(--onb-blue); }
.nhf-onb-card__ic--bank, .nhf-onb-card__ic--pl { background: var(--onb-gold); color: #3a1b00; }
.nhf-onb-card__ic--cover { width: 48px; height: 72px; flex-basis: 48px; border-radius: 6px; background: #1d1d22; }
.nhf-onb-card__ic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.nhf-onb-card__txt { flex: 1 1 auto; min-width: 0; }
.nhf-onb-card__h { font-family: var(--nhf-font-display, 'Mitr', 'NotosansThai', sans-serif); font-size: 20px; font-weight: 600; line-height: 1.15; color: #fff; overflow-wrap: anywhere; }
.nhf-onb-card__s { font-size: 17px; line-height: 1.2; color: rgba(255, 255, 255, .86); margin-top: 2px; overflow-wrap: anywhere; }
.nhf-onb-card__btn, .nhf-onb-card__btn:visited, .nhf-onb-card__btn:hover { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 14px; background: linear-gradient(180deg, var(--onb-red-hi), var(--onb-red)); box-shadow: 0 10px 24px rgba(185, 5, 4, .45);
  color: #fff !important; font-size: 18px; font-weight: 700; line-height: 1.2; text-decoration: none !important; padding: 0 12px; }
.nhf-onb-card__btn i { font-size: 15px; }
.nhf-onb-card__dots { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 17px; line-height: 20px; color: rgba(255, 255, 255, .8); }
.nhf-onb-card__dotrow { letter-spacing: 2px; color: var(--onb-gold); }
.nhf-onb-card__x { position: absolute; top: 2px; right: 2px; width: 48px; height: 48px; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .8); font-size: 20px; line-height: 48px; text-align: center; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.nhf-onb-card__x:hover, .nhf-onb-card__x:focus { background: rgba(255, 255, 255, .14); color: #fff; outline: none; }
@media (min-width: 992px) { .nhf-onb-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 56px 12px 16px; max-height: 110px; margin: 0 0 10px; }
  .nhf-onb-card__top { flex: 1 1 auto; min-width: 0; padding-right: 0; } .nhf-onb-card__btn { flex: 0 0 300px; min-height: 56px; } .nhf-onb-card__dots { flex: 0 0 100%; justify-content: flex-start; padding-left: 54px; margin-top: -2px; } }

/* ---------- 3. หน้าคู่มือ "เริ่มต้นที่นี่" (MpShell โทนสว่าง — mockup guide.html) ---------- */
body.nhf-onb-howto .fixed-bg { background: var(--nhf-main-bg, #e9e9e9) !important; }
body.nhf-onb-howto .fixed-bg::after { display: none; }
.mp-root.onb-howto { --onb-ink: var(--nhf-ink, #1b1b1f); --onb-ink-2: var(--nhf-ink-2, #3a3a42); --onb-muted: #5f6470; --onb-faint: #9ca3af; --onb-paper: #fff; --onb-paper-2: #f7f7f9; --onb-bg-2: #e5e6eb;
  --onb-line: var(--nhf-card-border, #e2ddd2); --onb-line-strong: rgba(27, 27, 31, .22); --onb-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  --onb-red: var(--nhf-red, #b90504); --onb-red-hi: var(--nhf-red-hi, #d21414); --onb-red-deep: var(--nhf-red-deep, #790000); --onb-red-soft: var(--nhf-red-soft, #fff1f1); --onb-red-line: rgba(185, 5, 4, .22);
  --onb-gold: var(--nhf-gold, #f2c14e); --onb-gold-deep: #c9971a; --onb-green: var(--nhf-green, #1f9d55); --onb-green-soft: #eaf7ee; --onb-blue: var(--nhf-blue, #2563eb); --onb-warn-soft: #fff4d6; --onb-warn-ink: #7a4d0b; --onb-bad: #c53030; --onb-bad-soft: #fde8e8;
  font-family: var(--nhf-font-body, 'NotosansThai', 'Mitr', sans-serif); font-size: 17px; line-height: 1.55; color: var(--onb-ink); padding: 8px 0 48px; }
.mp-root.onb-howto.mp-theme-red { --onb-red: #DC2626; --onb-red-hi: #EF4444; --onb-red-deep: #B91C1C; --onb-red-soft: #FEF2F2; --onb-red-line: rgba(220, 38, 38, .22); --onb-gold: #F59E0B; --onb-gold-deep: #D97706; --onb-green: #16A34A; font-family: 'Prompt', var(--nhf-font-body, 'NotosansThai', sans-serif); }
.mp-root.onb-howto .mp-wrap { max-width: 820px; margin: 0 auto; padding: 12px 12px 18px; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.mp-root.onb-howto .nhf-backpill { background: var(--onb-paper); border-color: var(--onb-red); color: var(--onb-red-deep); box-shadow: var(--onb-shadow); min-height: 48px; font-size: 17px; }
.mp-root.onb-howto .nhf-backpill i { color: var(--onb-red); opacity: 1; }
.mp-root.onb-howto .mp-head { padding: 14px 0 10px; }
.mp-root.onb-howto .mp-head h1, .mp-root.onb-howto h1, .mp-root.onb-howto h2, .mp-root.onb-howto h3 { color: var(--onb-ink) !important; }
.mp-root.onb-howto .mp-head h1 { font-family: var(--nhf-font-display, 'Mitr', 'NotosansThai', sans-serif); font-size: 26px; line-height: 1.25; margin: 0 0 4px; font-weight: 500; }
.mp-root.onb-howto .mp-head h1 i { color: var(--onb-red); margin-right: 8px; }
.mp-root.onb-howto .mp-sub { margin: 0; color: var(--onb-muted); font-size: 17px; line-height: 1.5; }
.mp-root.onb-howto .mp-sticky { position: sticky; top: var(--mp-sticky-top, 101px); z-index: 30; background: rgba(233, 233, 233, .96); padding: 8px 0; margin: 0 0 10px; }
.onb-toc { display: flex; flex-wrap: wrap; gap: 0 8px; max-height: 96px; overflow: hidden; margin: 0; padding: 0; }
.onb-chip, .onb-chip:visited { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 999px; background: var(--onb-paper); border: 1px solid var(--onb-line); color: var(--onb-ink); font-size: 17px; font-weight: 600; line-height: 1.2; box-shadow: var(--onb-shadow); white-space: nowrap; text-decoration: none; }
.onb-chip:hover, .onb-chip:focus { text-decoration: none; color: var(--onb-ink); }
.onb-chip--on, .onb-chip--on:visited { background: var(--onb-red); border-color: var(--onb-red); color: #fff; }
.onb-gd { display: block; }
.onb-main { min-width: 0; max-width: 900px; }
.onb-side { display: none; }
.onb-sec { background: var(--onb-paper); border: 1px solid var(--onb-line); border-radius: 18px; padding: 16px; margin: 0 0 12px; box-shadow: var(--onb-shadow); scroll-margin-top: calc(var(--mp-sticky-top, 101px) + 118px); min-width: 0; position: relative; overflow: hidden; }
.onb-sec--hero { border-color: var(--onb-red-line); }
.onb-h2 { font-family: var(--nhf-font-display, 'Mitr', 'NotosansThai', sans-serif); font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.onb-h2 i { color: var(--onb-red); font-size: 20px; width: 24px; text-align: center; }
.onb-h3 { font-family: var(--nhf-font-display, 'Mitr', 'NotosansThai', sans-serif); font-size: 20px; font-weight: 500; line-height: 1.3; margin: 16px 0 6px; }
.onb-h3__sub { font-weight: 400; font-size: 17px; color: var(--onb-muted); }
.onb-sub { margin: 0 0 12px; color: var(--onb-muted); font-size: 17px; line-height: 1.5; }
.onb-p { margin: 0 0 8px; font-size: 17px; line-height: 1.55; }
.onb-small { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--onb-muted); }
.onb-small--tight { margin-top: 4px; }
.onb-small a { color: var(--onb-red-deep); font-weight: 700; }
.onb-must { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--onb-ink-2); padding: 10px 12px; border-radius: 12px; background: var(--onb-paper-2); border: 1px solid var(--onb-line); }
.onb-tip { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--onb-warn-soft); border: 1px solid rgba(201, 151, 26, .35); color: var(--onb-warn-ink); font-size: 17px; line-height: 1.5; }
.onb-btn, .onb-btn:visited, .onb-btn:hover { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 20px; border-radius: 14px; font-size: 18px; font-weight: 700; line-height: 1.2; border: 1px solid transparent; font-family: inherit; cursor: pointer; margin-top: 12px;
  background: var(--onb-red); background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); color: #fff !important; box-shadow: 0 8px 20px var(--onb-red-line); text-decoration: none !important; text-align: center; }
.onb-btn--ghost, .onb-btn--ghost:visited, .onb-btn--ghost:hover { background: var(--onb-paper); background-image: none; color: var(--onb-ink) !important; border-color: var(--onb-line-strong); box-shadow: none; }
.onb-btn--sm { min-height: 48px; font-size: 17px; border-radius: 12px; padding: 0 16px; margin-top: 10px; width: auto; display: inline-flex; }
.onb-btn i { font-size: 17px; }
.onb-lnk, .onb-lnk:visited, .onb-lnk:hover { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 4px; color: var(--onb-red-deep) !important; font-size: 17px; font-weight: 600; text-decoration: none; }
.onb-pills { display: flex; justify-content: space-around; gap: 6px; margin: 8px 0 14px; text-align: center; }
.onb-pill { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; line-height: 1.25; }
.onb-pill__ic { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; }
.onb-pill__ic--bank { background: var(--onb-red-soft); color: var(--onb-red); box-shadow: inset 0 0 0 1.5px var(--onb-red-line); }
.onb-pill__ic--dep { background: var(--onb-green); }
.onb-pill__ic--bet { background: var(--onb-red); color: var(--onb-gold); }
.onb-img { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: var(--onb-paper-2); border: 1px solid var(--onb-line); margin: 0 0 12px; }
.onb-img--32 { padding-top: 66.667%; }
.onb-img--11 { padding-top: 100%; }
.onb-img--23 { padding-top: 150%; }
.onb-img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; z-index: 1; background: var(--onb-paper-2); }
.onb-img--pad img { padding: 10px; }
.onb-img--cv img { -o-object-fit: cover; object-fit: cover; }
.onb-img__ph { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--onb-red); font-size: 48px; }
.onb-img__ph .onb-img__n { font-family: var(--nhf-font-display, 'Mitr', sans-serif); font-size: 28px; font-weight: 500; color: var(--onb-ink); }
.onb-imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.onb-imgs--2 { grid-template-columns: 2fr 1fr; }
.onb-imgs .onb-img { margin: 0; }
.onb-steps { display: grid; grid-template-columns: 1fr; gap: 12px; }
.onb-step { border: 1px solid var(--onb-line); border-radius: 14px; padding: 12px; background: var(--onb-paper); display: flex; flex-direction: column; min-width: 0; }
.onb-step__k { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-family: var(--nhf-font-display, 'Mitr', sans-serif); font-size: 20px; font-weight: 500; line-height: 1.3; }
.onb-step__k b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--onb-red); color: #fff; font-size: 18px; font-weight: 700; flex: none; }
.onb-step .onb-p { flex: 1 1 auto; }
.onb-rows { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.onb-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 6px 4px 10px; border: 1px solid var(--onb-line); border-radius: 12px; background: var(--onb-paper); }
.onb-row__fl { display: block; flex: none; width: 36px; height: 27px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(27, 27, 31, .15); background: #fff; }
.onb-row__fl img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.onb-row__fl--ic { display: flex; align-items: center; justify-content: center; color: var(--onb-red); font-size: 22px; box-shadow: none; background: var(--onb-red-soft); border-radius: 8px; }
.onb-row__n { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.onb-row__n b { font-size: 18px; font-weight: 700; }
.onb-row__n span { font-size: 17px; color: var(--onb-ink-2); }
.onb-row__b, .onb-row__b:visited, .onb-row__b:hover { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 48px; padding: 0 16px; border-radius: 12px; background: var(--onb-red-soft); border: 1.5px solid var(--onb-red-hi); color: var(--onb-red-hi) !important; font-size: 17px; font-weight: 700; text-decoration: none !important; }
.onb-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 8px; }
.onb-three > div { border: 1px solid var(--onb-line); border-radius: 12px; padding: 10px 8px; text-align: center; background: var(--onb-paper); min-width: 0; }
.onb-three__ic { width: 48px; height: 48px; border-radius: 50%; background: var(--onb-red-soft); color: var(--onb-red); display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 6px; }
.onb-three b { display: block; font-size: 17px; line-height: 1.3; }
.onb-ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.onb-ol li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.5; list-style: none; }
.onb-ol__n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--onb-red); color: #fff; font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.onb-ol__t { min-width: 0; }
.onb-ol__s { display: block; font-size: 17px; line-height: 1.45; color: var(--onb-ink-2); margin-top: 2px; }
.onb-ck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.onb-ck-badge { font-size: 17px; font-weight: 700; color: var(--onb-green); background: var(--onb-green-soft); border: 1px solid rgba(31, 157, 85, .35); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.onb-bar { height: 8px; border-radius: 4px; background: var(--onb-bg-2); margin: 10px 0 12px; overflow: hidden; }
.onb-bar i { display: block; height: 100%; width: 0; background: var(--onb-green); }
.onb-ck { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--onb-line); font-size: 17px; line-height: 1.3; padding: 4px 0; color: var(--onb-ink); }
.onb-ck:first-child { border-top: 0; }
.onb-ck__i { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; border: 2px solid var(--onb-line-strong); color: var(--onb-green); }
.onb-ck--done .onb-ck__i { background: var(--onb-green-soft); border-color: var(--onb-green); }
.onb-ck__t { flex: 1 1 auto; min-width: 0; }
.onb-ck__done { margin-left: auto; color: var(--onb-green); font-weight: 700; font-size: 17px; white-space: nowrap; }
.onb-ck .onb-btn--sm { margin: 0 0 0 auto; }
.onb-num { display: grid; gap: 10px; margin: 6px 0 10px; }
.onb-num__box { border: 1px solid var(--onb-line); border-radius: 14px; padding: 12px 14px; background: var(--onb-paper-2); }
.onb-num__v { font-family: var(--nhf-font-display, 'Mitr', sans-serif); font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--onb-red); }
.onb-num__l { font-size: 17px; line-height: 1.35; color: var(--onb-ink-2); margin-top: 4px; }
.onb-rank { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 56px; border-top: 1px solid var(--onb-line); padding: 6px 0; }
.onb-rank--game { grid-template-columns: 36px 48px minmax(0, 1fr); }
.onb-rank__n { width: 36px; height: 36px; border-radius: 50%; background: var(--onb-paper-2); border: 1px solid var(--onb-line); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.onb-rank__cover { width: 48px; height: 72px; border-radius: 6px; overflow: hidden; background: var(--onb-paper-2); display: block; }
.onb-rank__cover img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.onb-rank__t { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.onb-rank__v { font-weight: 700; font-size: 18px; color: var(--onb-red-deep); }
.onb-checks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.onb-checks li { display: flex; gap: 10px; font-size: 17px; line-height: 1.45; list-style: none; }
.onb-checks li i { color: var(--onb-green); font-size: 18px; margin-top: 3px; flex: 0 0 18px; }
.onb-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 4px; }
.onb-game { border: 1px solid var(--onb-line); border-radius: 10px; overflow: hidden; background: var(--onb-paper); box-shadow: var(--onb-shadow); display: flex; flex-direction: column; min-width: 0; }
.onb-game__media { position: relative; padding-top: 150%; background: var(--onb-paper-2); }
.onb-game__media img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.onb-game__body { padding: 8px 10px 10px; border-top: 1px solid var(--onb-line); flex: 1; display: flex; flex-direction: column; background: #f3ede2; }
.onb-game__n { font-weight: 700; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.onb-game__p { font-size: 17px; color: var(--onb-ink-2); line-height: 1.3; }
.onb-game__c { font-size: 17px; line-height: 1.3; margin-top: 2px; }
.onb-game__btn { margin-top: auto; padding-top: 8px; display: flex; }
.onb-game__btn .onb-btn--sm { margin: 0; width: 100%; padding: 0 8px; }
.onb-ex { border-radius: 14px; padding: 14px; background: var(--onb-red-soft); border: 1px solid var(--onb-red-line); margin: 4px 0 12px; }
.onb-ex__big { font-family: var(--nhf-font-display, 'Mitr', sans-serif); font-weight: 500; font-size: 30px; line-height: 1.25; overflow-wrap: anywhere; }
.onb-ex__mid { font-weight: 700; font-size: 20px; line-height: 1.3; margin-top: 4px; }
.onb-ex__p { font-size: 17px; line-height: 1.45; color: var(--onb-ink-2); margin: 8px 0 0; }
.onb-share { display: flex; gap: 8px; margin: 6px 0 4px; align-items: center; }
.onb-share__f { flex: 1 1 0; width: 0; min-width: 0; min-height: 56px; border: 1px solid var(--onb-line-strong); border-radius: 12px; background: var(--onb-paper-2); padding: 0 12px; display: flex; align-items: center; font-size: 17px; color: var(--onb-ink-2); overflow: hidden; }
.onb-share__f span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-share .onb-btn--sm { margin: 0; flex: 0 0 auto; }
.onb-toast { margin: 6px 0 0; font-size: 17px; line-height: 1.4; color: var(--onb-green); }
.onb-toast:empty { display: none; }
.onb-warn { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--onb-bad-soft); border: 1px solid var(--onb-bad); color: var(--onb-bad); font-size: 17px; line-height: 1.45; }
.onb-faq { border: 1px solid var(--onb-line); border-radius: 14px; background: var(--onb-paper); overflow: hidden; margin-top: 8px; }
.onb-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.onb-faq summary::-webkit-details-marker { display: none; }
.onb-faq summary i { margin-left: auto; font-size: 17px; color: var(--onb-red); flex: 0 0 auto; }
.onb-faq__a { padding: 10px 0 14px; margin: 0 14px; font-size: 17px; line-height: 1.5; color: var(--onb-ink-2); border-top: 1px solid var(--onb-line); }
.onb-howto a:focus-visible, .onb-howto button:focus-visible, .onb-howto summary:focus-visible { outline: 3px solid var(--onb-red); outline-offset: 2px; }
@media (min-width: 768px) { .onb-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) {
  .mp-root.onb-howto .mp-wrap { max-width: 1180px; padding: 22px 26px 26px; }
  .mp-root.onb-howto .mp-sticky { display: none; }
  .onb-gd { display: grid; grid-template-columns: 220px minmax(0, 900px); gap: 24px; justify-content: center; align-items: start; }
  .onb-side { display: block; position: sticky; top: 16px; background: var(--onb-paper); border: 1px solid var(--onb-line); border-radius: 18px; padding: 10px; box-shadow: var(--onb-shadow); }
  .onb-side a, .onb-side a:visited { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px; border-radius: 12px; font-size: 17px; font-weight: 600; color: var(--onb-ink-2); text-decoration: none; }
  .onb-side a::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--onb-faint); flex: none; }
  .onb-side a.onb-side--on { background: var(--onb-red-soft); color: var(--onb-red-deep); }
  .onb-side a.onb-side--on::before { background: var(--onb-red); border-color: var(--onb-red); }
  .onb-sec { padding: 22px 26px; scroll-margin-top: 24px; }
  .onb-hero { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: center; }
  .onb-hero .onb-pills { margin: 0; }
  .onb-hero .onb-btn { margin-top: 0; }
  .onb-cklist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .onb-num { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .onb-proofgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
  .onb-proofgrid .onb-checks { margin-top: 0; }
  .onb-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .onb-afgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .onb-media { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .nhf-onb, .nhf-onb *, .nhf-onb-card, .nhf-onb-card *, .onb-howto * { transition: none !important; animation: none !important; } }