/* ═══ BotV8 Demo Lab — ระบบหน้าตาหลัก ═══════════════════════════════════════
   โทเคนจาก skill-ui (AI tokens) + พื้นหลัง orb/grid/อนุภาค + แผงโฮโลแกรม (HUD)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #17120a;
  --bg2: #20180a;
  --surface: rgba(10, 24, 19, .62);
  --surface-solid: #272013;
  --border: rgba(139, 92, 246, .14);
  --border-hi: rgba(139, 92, 246, .32);
  --text: #eef3f1;
  --muted: #9aa8a3;
  --dim: #59655c;
  --primary: #f59e0b;
  --accent: #bfa5fa;
  --cyan: #8b5cf6;
  --pink: #f472b6;
  --amber: #fbbf24;
  --red: #fb7185;
  --line: #06c755;
  --tg: #2aabee;
  --grad: linear-gradient(90deg, #f59e0b, #8b5cf6, #bfa5fa);
  --grad-x: linear-gradient(90deg, #f59e0b, #8b5cf6, #eef2f5, #bfa5fa, #f59e0b);
  --glow: 0 0 24px rgba(245, 158, 11, .35), 0 0 60px rgba(191, 165, 250, .12);
  --radius: 18px;
  --font: 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Orbitron', var(--font);
  --ease: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.6; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; }
.muted { color: var(--muted); }
.grad-text {
  background: var(--grad-x); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: grad-flow 6s linear infinite;
}
@keyframes grad-flow { to { background-position: 300% 0; } }

/* ── พื้นหลังเคลื่อนไหว ─────────────────────────────────────────────────── */
.fx-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 50% -10%, #452c03 0%, var(--bg) 55%); }
.fx-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; will-change: transform; }
.fx-orb.o1 { width: 560px; height: 560px; background: #452c03; top: -180px; left: -140px; animation: orb1 18s ease-in-out infinite alternate; }
.fx-orb.o2 { width: 480px; height: 480px; background: #452c03; bottom: -160px; right: -120px; animation: orb2 22s ease-in-out infinite alternate; }
.fx-orb.o3 { width: 380px; height: 380px; background: #f59e0b; top: 40%; left: 55%; opacity: .25; animation: orb3 26s ease-in-out infinite alternate; }
@keyframes orb1 { to { transform: translate(140px, 100px) scale(1.15); } }
@keyframes orb2 { to { transform: translate(-110px, -90px) scale(1.2); } }
@keyframes orb3 { to { transform: translate(-160px, 70px) scale(.85); } }
.fx-grid {
  position: absolute; inset: -40px; opacity: .22;
  background-image: linear-gradient(rgba(245, 158, 11, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 158, 11, .22) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%);
  animation: grid-move 6s linear infinite;
}
@keyframes grid-move { to { transform: translate(48px, 48px); } }
#fx-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-noise { position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── กระจก + แผงโฮโลแกรม ─────────────────────────────────────────────── */
.glass { background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.holo-panel {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background:
    linear-gradient(rgba(245, 158, 11, .06) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(160deg, rgba(245, 158, 11, .10), rgba(191, 165, 250, .04) 60%, rgba(194, 200, 200, .05)),
    var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px rgba(0, 0, 0, .35);
}
.holo-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 35%, rgba(245, 158, 11, .10) 50%, transparent 65%);
  animation: sweep 5s ease-in-out infinite;
}
@keyframes sweep { 0%, 45% { transform: translateX(-100%); } 80%, 100% { transform: translateX(100%); } }
.corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--cyan); opacity: .7; pointer-events: none; z-index: 2; }
.corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.scanline { position: absolute; left: 0; right: 0; height: 1px; top: 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .45; animation: scan 4s ease-in-out infinite alternate; pointer-events: none; }
@keyframes scan { to { transform: translateY(var(--scan-h, 220px)); } }

/* ── จุดสด / ป้าย ─────────────────────────────────────────────────────── */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(191, 165, 250, .6); animation: live 1.6s infinite; vertical-align: middle; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(191, 165, 250, .6); } 70% { box-shadow: 0 0 0 9px rgba(191, 165, 250, 0); } 100% { box-shadow: 0 0 0 0 rgba(191, 165, 250, 0); } }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); font-family: var(--mono); margin: 0 0 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: .74rem; font-weight: 600; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .3); color: #d6ecd0; white-space: nowrap; }
.chip.green { background: rgba(191, 165, 250, .12); border-color: rgba(191, 165, 250, .35); color: #bfa5fa; }
.chip.pink { background: rgba(244, 114, 182, .12); border-color: rgba(244, 114, 182, .35); color: #ffb3da; }
.chip.amber { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .35); color: #ffe08a; }
.bump { animation: bump .45s var(--spring); }
@keyframes bump { 40% { transform: scale(1.18); color: #fff; text-shadow: 0 0 12px var(--accent); } }

/* ── ปุ่ม ────────────────────────────────────────────────────────────── */
.btn-glow {
  position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 99px; border: 0; font-weight: 700; color: #fff; background: #0a1f13; isolation: isolate;
  transition: transform .25s var(--spring);
}
.btn-glow::before, .btn-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
  background: conic-gradient(from var(--a, 0deg), #f59e0b, #8b5cf6, #bfa5fa, #eef2f5, #f59e0b);
  animation: spin-a 3s linear infinite;
}
.btn-glow { box-shadow: 0 0 22px rgba(245, 158, 11, .45), 0 0 46px rgba(191, 165, 250, .15); }
.btn-glow::after { inset: 2px; z-index: -1; background: linear-gradient(135deg, #0f2e1b, #0b2a20); animation: none; }
.btn-glow > span, .btn-glow > i { position: relative; z-index: 1; }
.btn-glow:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 30px rgba(245, 158, 11, .65), 0 0 60px rgba(191, 165, 250, .25); }
.btn-glow.sm { padding: 8px 16px; font-size: .9rem; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin-a { to { --a: 360deg; } }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 99px; font-weight: 600;
  border: 1px solid var(--border-hi); background: rgba(255, 255, 255, .04); transition: .25s;
}
.btn-ghost:hover { background: rgba(245, 158, 11, .14); border-color: var(--primary); box-shadow: var(--glow); }
.btn-ghost.sm { padding: 6px 14px; font-size: .85rem; }
.btn-line {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  padding: 16px 22px; border-radius: 14px; background: var(--line); color: #fff; font-weight: 700; font-size: 1.08rem;
  box-shadow: 0 10px 30px rgba(6, 199, 85, .35); transition: transform .25s var(--spring), box-shadow .25s;
}
.btn-line::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 60% { left: -75%; } 100% { left: 130%; } }
.btn-line:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(6, 199, 85, .5); }

/* ── ไอคอนเคลื่อนไหว (mask SVG + การเคลื่อนไหวต่อชนิด) ─────────────────── */
.ico { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; vertical-align: -.22em; }
.ico-chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm3 6.5a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01z'/%3E%3C/svg%3E"); }
.ico-bolt { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); animation: ico-flick 2.4s infinite; }
.ico-chart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3zm2-4h3V9H5zm5 0h3V4h-3zm5 0h3v-6h-3z'/%3E%3C/svg%3E"); }
.ico-line { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C6.2 2.5 1.5 6.3 1.5 11c0 4.2 3.7 7.7 8.8 8.4.6.1.9.4.9 1l-.1 1.4c0 .3-.2 1 .9.5s5.9-3.5 8-6c1.5-1.6 2.2-3.3 2.2-5.3 0-4.7-4.7-8.5-10.2-8.5z'/%3E%3C/svg%3E"); }
.ico-tg { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.6 20c-.2 1.1-.9 1.4-1.8.9l-5-3.7-2.4 2.3c-.3.3-.5.5-1 .5l.3-5.1 9.3-8.4c.4-.4-.1-.6-.6-.2L5.9 13.5 1 12c-1.1-.3-1.1-1.1.2-1.6l19.2-7.4c.9-.3 1.7.2 1.5 1.3z'/%3E%3C/svg%3E"); }
.ico-shield { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.6 8 11 4.6-1.4 8-6 8-11V5zm-1.2 14.2L7 12.4l1.4-1.4 2.4 2.4 4.8-4.8L17 10z'/%3E%3C/svg%3E"); }
.ico-wallet { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a3 3 0 0 1 3-3h12v3h1a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-1a1 1 0 0 0 0 2h10V5zm11 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E"); }
.ico-play { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E"); }
.ico-pause { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zm8 0h4v16h-4z'/%3E%3C/svg%3E"); }
.ico-reset { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V1L7 6l5 5V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z'/%3E%3C/svg%3E"); }
.ico-users { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM1 20c0-3.3 3.6-6 8-6s8 2.7 8 6v1H1zm16.5-5.9c3 .3 5.5 2.4 5.5 4.9v2h-4v-1c0-2.3-.6-4.3-1.5-5.9z'/%3E%3C/svg%3E"); }
.ico-cpu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h2v2h2V2h2v2h2a2 2 0 0 1 2 2v2h2v2h-2v2h2v2h-2v2a2 2 0 0 1-2 2h-2v2h-2v-2h-2v2H9v-2H7a2 2 0 0 1-2-2v-2H3v-2h2v-2H3V8h2V6a2 2 0 0 1 2-2h2zm-1 6v8h8V8z'/%3E%3C/svg%3E"); animation: ico-pulse 2s ease-in-out infinite; }
.ico-gift { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7h-2.2A3 3 0 0 0 12 3.8 3 3 0 0 0 6.2 7H4a1 1 0 0 0-1 1v3h8V7h2v4h8V8a1 1 0 0 0-1-1zM9 7a1 1 0 1 1 1-1v1zm5 0V6a1 1 0 1 1 1 1zM4 13v7a1 1 0 0 0 1 1h6v-8zm9 8h6a1 1 0 0 0 1-1v-7h-7z'/%3E%3C/svg%3E"); animation: ico-wiggle 3s ease-in-out infinite; }
.ico-globe { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-3a15 15 0 0 0-1.3-3.9A8 8 0 0 1 18.9 8zM12 4c.8 1.2 1.5 2.5 1.9 4h-3.8c.4-1.5 1.1-2.8 1.9-4zM4.3 14a8 8 0 0 1 0-4h3.4a16 16 0 0 0 0 4zm.8 2h3a15 15 0 0 0 1.3 3.9A8 8 0 0 1 5.1 16zm3-8h-3a8 8 0 0 1 4.3-3.9C8.8 5.3 8.4 6.6 8.1 8zM12 20c-.8-1.2-1.5-2.5-1.9-4h3.8c-.4 1.5-1.1 2.8-1.9 4zm2.3-6H9.7a14 14 0 0 1 0-4h4.6a14 14 0 0 1 0 4zm.3 5.9c.6-1.2 1-2.5 1.3-3.9h3a8 8 0 0 1-4.3 3.9zm1.7-5.9a16 16 0 0 0 0-4h3.4a8 8 0 0 1 0 4z'/%3E%3C/svg%3E"); animation: ico-spin 10s linear infinite; }
.ico-paw { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c-3 0-6 3.5-6 6 0 1.7 1.3 3 3 3 1.2 0 2-.6 3-.6s1.8.6 3 .6c1.7 0 3-1.3 3-3 0-2.5-3-6-6-6zM5.5 11a2.5 3 0 1 0 0-.01zM9 7a2.5 3 0 1 0 0-.01zm6 0a2.5 3 0 1 0 0-.01zm3.5 4a2.5 3 0 1 0 0-.01z'/%3E%3C/svg%3E"); animation: ico-hop 2.2s ease-in-out infinite; }
.ico-target { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm0 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E"); animation: ico-pulse 1.8s ease-in-out infinite; }
.ico-slip { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12a1 1 0 0 1 1 1v19l-3-2-2 2-2-2-2 2-2-2-3 2V3a1 1 0 0 1 1-1zm2 5v2h8V7zm0 4v2h8v-2zm0 4v2h5v-2z'/%3E%3C/svg%3E"); }
.ico-team { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 6v2h18V6zM5 10v8h3v-8zm5.5 0v8h3v-8zM16 10v8h3v-8zM3 20v2h18v-2z'/%3E%3C/svg%3E"); }
.ico-live { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h11a2 2 0 0 1 2 2v2.5l4-2.5v10l-4-2.5V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); animation: ico-pulse 1.4s ease-in-out infinite; }
.ico-dice { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2.5 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM12 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM7.5 15a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E"); animation: ico-roll 3s ease-in-out infinite; }
.ico-check { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 16.2-4.2-4.2-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.ico-x { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z'/%3E%3C/svg%3E"); }
.ico-menu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); }
.ico-star { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.9 7.4.6-5.6 4.9 1.7 7.3L12 17.8 5.5 21.7l1.7-7.3L1.6 9.5 9 8.9z'/%3E%3C/svg%3E"); animation: ico-twinkle 2.6s ease-in-out infinite; }
@keyframes ico-flick { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .3; } 96% { opacity: 1; } 98% { opacity: .5; } }
@keyframes ico-pulse { 50% { transform: scale(1.15); filter: drop-shadow(0 0 6px currentColor); } }
@keyframes ico-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
@keyframes ico-spin { to { transform: rotate(360deg); } }
@keyframes ico-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px) rotate(-8deg); } }
@keyframes ico-roll { 0%, 70%, 100% { transform: rotate(0); } 85% { transform: rotate(180deg) scale(.9); } }
@keyframes ico-twinkle { 50% { transform: scale(.8) rotate(20deg); opacity: .7; } }
.ico-badge { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-size: 1.3rem; color: #fff;
  background: linear-gradient(135deg, var(--c1, #f59e0b), var(--c2, #8b5cf6)); box-shadow: 0 8px 22px color-mix(in srgb, var(--c1, #f59e0b) 45%, transparent); position: relative; }
.ico-badge::after { content: ""; position: absolute; inset: -4px; border-radius: 17px; border: 1px solid color-mix(in srgb, var(--c1, #f59e0b) 50%, transparent); animation: ring-out 2.4s ease-out infinite; }
@keyframes ring-out { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav-wrap { position: sticky; top: 0; z-index: 50; padding: 12px 16px; transition: padding .3s; }
.nav-wrap.scrolled { padding-top: 6px; }
.nav { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 8px 10px 8px 16px; border-radius: 99px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand img { filter: drop-shadow(0 0 10px rgba(245, 158, 11, .6)); animation: logo-float 4s ease-in-out infinite; }
@keyframes logo-float { 50% { transform: translateY(-2px) rotate(-4deg); } }
.brand-text { font-family: var(--mono); letter-spacing: .04em; font-size: 1.02rem; white-space: nowrap; }
.brand-text em { font-style: normal; color: var(--cyan); font-family: var(--font); font-weight: 600; font-size: .85rem; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0 auto; padding: 0; }
.nav-links a { display: block; padding: 8px 14px; border-radius: 99px; color: var(--muted); font-size: .94rem; font-weight: 500; transition: .2s; }
.nav-links a:hover, .nav-links a.on { color: #fff; background: rgba(245, 158, 11, .16); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); padding: 5px 11px; border-radius: 99px; background: rgba(191, 165, 250, .08); border: 1px solid rgba(191, 165, 250, .25); white-space: nowrap; }
.live-pill b { color: #bfa5fa; font-family: var(--mono); font-size: .8rem; }
.me { display: flex; align-items: center; gap: 8px; }
.me img, .me-ph { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; }
.me-ph { display: grid; place-items: center; background: var(--primary); font-weight: 700; }
.me-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.nav-burger { display: none; background: none; border: 0; width: 40px; height: 40px; padding: 10px; margin-left: auto; }
.nav-burger span { display: block; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; transition: .3s; }
@media (max-width: 1080px) {
  .nav { border-radius: 22px; flex-wrap: wrap; }
  .nav-burger { display: block; }
  .nav-links { order: 3; width: 100%; flex-direction: column; display: none; margin: 0; padding: 6px 0; }
  .nav.open .nav-links { display: flex; }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-cta { margin-left: 0; }
  .me-name { display: none; }
}
@media (max-width: 560px) { .live-pill { display: none; } .brand-text em { display: none; } }

/* ── ส่วนของหน้า ─────────────────────────────────────────────────────── */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.section { padding: 84px 0; position: relative; }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 42px; }
.sec-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.sec-head p { color: var(--muted); font-size: 1.05rem; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* hero */
.hero { padding: 56px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); font-weight: 700; letter-spacing: -.01em; }
.hero h1 .glitch { position: relative; display: inline-block; }
.hero-lead { font-size: 1.15rem; color: var(--muted); max-width: 580px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 600px; }
.hstat { padding: 12px 14px; border-radius: 14px; }
.hstat b { display: block; font-family: var(--mono); font-size: 1.45rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hstat span { font-size: .78rem; color: var(--muted); }
.hero-phone { position: relative; justify-self: center; }
.hero-phone::before { content: ""; position: absolute; inset: 10% -10%; background: radial-gradient(closest-side, rgba(245, 158, 11, .45), transparent); filter: blur(30px); z-index: -1; animation: halo 6s ease-in-out infinite alternate; }
@keyframes halo { to { transform: scale(1.12); opacity: .7; } }
.float-tag { position: absolute; padding: 8px 12px; border-radius: 12px; font-size: .8rem; font-weight: 600; white-space: nowrap; animation: floaty 5s ease-in-out infinite; z-index: 3; }
.float-tag.t1 { top: 12%; left: -18%; } .float-tag.t2 { top: 46%; right: -20%; animation-delay: -1.6s; } .float-tag.t3 { bottom: 10%; left: -14%; animation-delay: -3.2s; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .float-tag { display: none; }
}

/* ticker */
.ticker { overflow: hidden; border-block: 1px solid var(--border); background: rgba(245, 158, 11, .05); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-track { display: flex; gap: 42px; padding: 14px 0; width: max-content; animation: tick 40s linear infinite; }
.ticker-track span { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); white-space: nowrap; font-weight: 500; }
.ticker-track b { color: var(--text); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ขั้นตอน (stepper เรืองแสง) */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: st; position: relative; }
.flow::before { content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--primary), var(--cyan), var(--accent)); opacity: .35; }
.flow-step { position: relative; text-align: center; padding: 0 6px; }
.flow-step .num { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 1.4rem; font-weight: 800; background: var(--surface-solid); border: 2px solid var(--primary); box-shadow: 0 0 0 6px rgba(245, 158, 11, .12), var(--glow); position: relative; z-index: 1; }
.flow-step:nth-child(2) .num { border-color: var(--cyan); } .flow-step:nth-child(3) .num { border-color: var(--pink); } .flow-step:nth-child(4) .num { border-color: var(--amber); } .flow-step:nth-child(5) .num { border-color: var(--accent); }
.flow-step .num::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .2); animation: ico-spin 14s linear infinite; }
.flow-step h4 { margin-bottom: 4px; }
.flow-step code { display: inline-block; font-family: var(--mono); background: rgba(191, 165, 250, .12); color: #bfa5fa; padding: 2px 10px; border-radius: 8px; margin-bottom: 6px; }
.flow-step p { color: var(--muted); font-size: .9rem; margin: 0; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; gap: 18px; } .flow::before { display: none; } .flow-step { display: grid; grid-template-columns: 68px 1fr; gap: 14px; text-align: left; align-items: center; } .flow-step .num { margin: 0; } }

/* bento ฟีเจอร์ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.bcell { grid-column: span 4; padding: 24px; border-radius: var(--radius); position: relative; overflow: hidden; transition: transform .35s var(--ease), border-color .35s; --hue: var(--primary); }
.bcell:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hue) 55%, transparent); }
.bcell.w6 { grid-column: span 6; } .bcell.w8 { grid-column: span 8; } .bcell.w12 { grid-column: span 12; }
.bcell h3 { font-size: 1.15rem; margin: 14px 0 6px; }
.bcell p { color: var(--muted); font-size: .94rem; margin: 0; }
.bcell ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.bcell li { margin: 3px 0; }
.bcell .tag { position: absolute; top: 16px; right: 16px; }
.bcell::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hue) 40%, transparent), transparent); opacity: .5; transition: .5s; }
.bcell:hover::before { opacity: .9; transform: scale(1.2); }
@media (max-width: 960px) { .bcell, .bcell.w6, .bcell.w8 { grid-column: span 6; } }
@media (max-width: 640px) { .bcell, .bcell.w6, .bcell.w8 { grid-column: span 12; } }

/* กราฟแท่งโฮโลแกรม */
.holo-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 10px 4px 22px; position: relative; }
.holo-bars .hb { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.holo-bars .hb i { display: block; height: var(--h, 4%); border-radius: 6px 6px 2px 2px; transition: height .8s var(--spring);
  background: linear-gradient(180deg, rgba(139, 92, 246, .95), rgba(245, 158, 11, .35)); box-shadow: 0 0 14px rgba(139, 92, 246, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
  position: relative; overflow: hidden; }
.holo-bars .hb i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 6px); animation: bars-up 1.4s linear infinite; }
@keyframes bars-up { to { background-position: 0 -12px; } }
.holo-bars .hb em { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-style: normal; font-size: .68rem; color: var(--muted); font-family: var(--mono); }
.holo-bars::before { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }

/* แผงสถิติสด */
.livebar { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 14px; }
.kpi { padding: 18px; border-radius: 16px; position: relative; overflow: hidden; }
.kpi span { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi b { display: block; font-family: var(--mono); font-size: 1.9rem; margin-top: 4px; }
.kpi .spark { position: absolute; right: 12px; bottom: 12px; width: 70px; height: 26px; opacity: .8; }
.feed { list-style: none; margin: 0; padding: 0; font-size: .85rem; max-height: 196px; overflow: hidden; }
.feed li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); animation: feed-in .5s var(--ease); }
.feed li:last-child { border: 0; }
.feed time { margin-left: auto; color: var(--dim); font-size: .75rem; white-space: nowrap; }
.feed .fd-name { font-weight: 600; }
.fd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }
.fd-dot.fd-demo_start { background: var(--cyan); } .fd-dot.fd-round { background: var(--accent); }
.fd-empty { color: var(--dim); }
@keyframes feed-in { from { opacity: 0; transform: translateX(-10px); } }
@media (max-width: 1000px) { .livebar { grid-template-columns: repeat(2, 1fr); } .livebar .kpi-feed { grid-column: span 2; } }

/* การ์ดเกม */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.gcard { position: relative; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s; --hue: var(--primary); transform-style: preserve-3d; }
.gcard:hover { transform: translateY(-6px); box-shadow: 0 24px 60px color-mix(in srgb, var(--hue) 35%, transparent); }
.gcard-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--hue) 45%, #000), #020705); display: grid; place-items: center; }
.gcard-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gcard:hover .gcard-art img { transform: scale(1.08); }
.gcard-art .emoji { font-size: 4.2rem; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5)); animation: floaty 4s ease-in-out infinite; }
.gcard-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23, 18, 10, .95), transparent 55%); }
.gcard-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 2; }
.gcard-live { display: none; }
.gcard.has-live .gcard-live { display: inline-flex; }
.gcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gcard-body h3 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.gcard-body .ver { font-family: var(--mono); font-size: .7rem; color: var(--cyan); border: 1px solid rgba(139, 92, 246, .35); padding: 1px 7px; border-radius: 6px; }
.gcard-body p { margin: 0; color: var(--muted); font-size: .9rem; flex: 1; }
.gcard-meta { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--dim); }
.gcard-go { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 12px; font-weight: 700; background: linear-gradient(135deg, color-mix(in srgb, var(--hue) 85%, #000), color-mix(in srgb, var(--hue) 45%, #000)); transition: .3s; }
.gcard:hover .gcard-go { box-shadow: 0 0 24px color-mix(in srgb, var(--hue) 55%, transparent); }

/* ราคา CPBotPay */
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: 22px; }
.price { padding: 30px 28px; border-radius: 24px; text-align: left; }
.price.hot { border-color: rgba(191, 165, 250, .5); box-shadow: 0 0 0 1px rgba(191, 165, 250, .2), 0 30px 80px rgba(191, 165, 250, .15); }
.price h3 { font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.price .amt { font-family: var(--mono); font-size: 2.8rem; font-weight: 800; margin: 10px 0 2px; }
.price .amt small { font-family: var(--font); font-size: 1rem; color: var(--muted); font-weight: 500; }
.price ul { list-style: none; padding: 0; margin: 18px 0 0; }
.price li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; color: var(--muted); }
.price li .ico { color: var(--accent); margin-top: 3px; }
.price-note { text-align: center; color: var(--amber); margin-top: 22px; font-weight: 600; }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } }

/* login */
.login-wrap { min-height: calc(100vh - 200px); display: grid; place-items: center; padding: 40px 16px; }
.login-card { width: 100%; max-width: 460px; padding: 40px 32px 30px; text-align: center; }
.login-card h1 { font-size: 1.7rem; }
.login-orb { position: relative; width: 132px; height: 132px; margin: 0 auto 18px; display: grid; place-items: center; }
.login-orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(139, 92, 246, .4); animation: ring-out 3s ease-out infinite; }
.login-orb .r2 { animation-delay: 1s; } .login-orb .r3 { animation-delay: 2s; }
.login-orb img { filter: drop-shadow(0 0 18px rgba(245, 158, 11, .8)); animation: logo-float 4s ease-in-out infinite; }
.login-perks { list-style: none; padding: 0; margin: 22px 0 10px; display: grid; gap: 8px; text-align: left; }
.login-perks li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .92rem; }
.login-perks .ico { color: var(--cyan); }
.privacy { text-align: left; margin-top: 14px; font-size: .82rem; color: var(--dim); }
.privacy summary { cursor: pointer; color: var(--muted); }
.alert { background: rgba(251, 113, 133, .12); border: 1px solid rgba(251, 113, 133, .4); color: #ffc2cc; padding: 10px 14px; border-radius: 12px; margin: 14px 0; font-size: .9rem; }

/* footer + fab */
.foot { border-top: 1px solid var(--border); margin-top: 60px; padding: 40px 16px 30px; background: linear-gradient(180deg, transparent, rgba(245, 158, 11, .05)); }
.foot-in { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: flex; gap: 14px; align-items: center; }
.foot-brand b { display: block; font-family: var(--mono); font-size: 1.2rem; }
.foot-brand span { color: var(--muted); font-size: .9rem; }
.foot-contact { display: flex; gap: 12px; flex-wrap: wrap; }
.ct { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: .3s; }
.ct .ico { font-size: 1.6rem; }
.ct span { display: flex; flex-direction: column; font-size: .78rem; color: var(--muted); line-height: 1.3; }
.ct b { color: #fff; font-size: 1rem; }
.ct-line .ico { color: var(--line); } .ct-tg .ico { color: var(--tg); }
.ct-line:hover { border-color: var(--line); box-shadow: 0 0 24px rgba(6, 199, 85, .35); }
.ct-tg:hover { border-color: var(--tg); box-shadow: 0 0 24px rgba(42, 171, 238, .35); }
.foot-note { max-width: 1240px; margin: 26px auto 0; font-size: .78rem; color: var(--dim); text-align: center; }

.fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
.fab-main { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 12px 30px rgba(245, 158, 11, .45); transition: transform .3s var(--spring); }
.fab-main:hover { transform: scale(1.08) rotate(-6deg); }
.fab-ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ring-out 2s ease-out infinite; }
.fab-menu { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.fab-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; color: #fff; font-weight: 600; font-size: .9rem;
  opacity: 0; transform: translateY(14px) scale(.9); transition: .3s var(--spring); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.fab-item.line { background: var(--line); } .fab-item.tg { background: var(--tg); transition-delay: .05s; }
.fab.open .fab-menu { pointer-events: auto; }
.fab.open .fab-item { opacity: 1; transform: none; }
.pg-demo .fab { bottom: 86px; }

/* หลังบ้านพรีวิว (ใช้ทั้งหน้าแรกและหน้า backoffice) */
.bo-frame { border-radius: 22px; overflow: hidden; }
.bo-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, .25); }
.bo-top .dots { display: flex; gap: 6px; } .bo-top .dots i { width: 11px; height: 11px; border-radius: 50%; background: #fb7185; } .bo-top .dots i:nth-child(2) { background: #fbbf24; } .bo-top .dots i:nth-child(3) { background: #34d399; }
.bo-top .addr { flex: 1; text-align: center; font-size: .8rem; color: var(--dim); font-family: var(--mono); letter-spacing: .08em; }
.bo-body { display: grid; grid-template-columns: 210px 1fr; min-height: 520px; }
.bo-side { border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; background: rgba(0, 0, 0, .18); }
.bo-side button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none; color: var(--muted); font-size: .9rem; transition: .2s; }
.bo-side button:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.bo-side button.on { background: linear-gradient(90deg, rgba(245, 158, 11, .28), rgba(245, 158, 11, .04)); color: #fff; box-shadow: inset 3px 0 0 var(--primary); }
.bo-main { padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bo-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bo-kpi { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); position: relative; overflow: hidden; }
.bo-kpi span { font-size: .76rem; color: var(--muted); }
.bo-kpi b { display: block; font-family: var(--mono); font-size: 1.35rem; margin-top: 2px; }
.bo-kpi .trend { font-size: .72rem; padding: 1px 8px; border-radius: 99px; background: rgba(191, 165, 250, .14); color: #bfa5fa; }
.bo-kpi .trend.down { background: rgba(251, 113, 133, .14); color: #ffb3c0; }
.bo-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.bo-card { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); min-width: 0; position: relative; overflow: hidden; }
.bo-card h4 { font-size: .92rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bo-card svg { width: 100%; height: auto; display: block; }
.bo-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.bo-table th { text-align: left; color: var(--dim); font-weight: 500; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.bo-table td { padding: 7px 4px; border-bottom: 1px dashed rgba(255, 255, 255, .05); white-space: nowrap; }
.bo-table tr.new td { animation: row-flash 1.6s ease-out; }
@keyframes row-flash { 0% { background: rgba(191, 165, 250, .25); } 100% { background: transparent; } }
.st { padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 600; }
.st.ok { background: rgba(191, 165, 250, .15); color: #bfa5fa; } .st.wait { background: rgba(251, 191, 36, .15); color: #ffe08a; } .st.out { background: rgba(245, 158, 11, .18); color: #d6ecd0; }
.donut { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; position: relative; background: conic-gradient(var(--primary) 0 var(--p1), var(--cyan) 0 var(--p2), var(--accent) 0 var(--p3), var(--pink) 0); transition: .8s; }
.donut::after { content: attr(data-label); position: absolute; inset: 22px; border-radius: 50%; background: var(--surface-solid); display: grid; place-items: center; font-family: var(--mono); font-size: 1.1rem; }
.legend { list-style: none; padding: 0; margin: 12px 0 0; font-size: .8rem; display: grid; gap: 4px; }
.legend li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend b { margin-left: auto; color: var(--text); font-family: var(--mono); font-size: .78rem; }
.bo-pane { display: none; } .bo-pane.on { display: flex; flex-direction: column; gap: 14px; animation: pane-in .45s var(--ease); }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px); } }
.bo-explain { font-size: .88rem; color: var(--muted); padding: 12px 14px; border-radius: 12px; background: rgba(245, 158, 11, .08); border: 1px dashed rgba(245, 158, 11, .35); }
.bo-explain b { color: #fff; }
.toggle { width: 38px; height: 21px; border-radius: 99px; background: var(--accent); position: relative; display: inline-block; vertical-align: middle; }
.toggle::after { content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #fff; top: 2px; right: 2px; transition: .3s; }
.toggle.off { background: #2f4a3a; } .toggle.off::after { right: 19px; }
@media (max-width: 900px) {
  .bo-body { grid-template-columns: 1fr; }
  .bo-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .bo-side button { white-space: nowrap; }
  .bo-kpis { grid-template-columns: repeat(2, 1fr); }
  .bo-row { grid-template-columns: 1fr; }
}

/* แนะนำโมดูลอนาคต */
.road { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.road-card { padding: 20px; border-radius: 18px; }
.road-card h4 { margin: 12px 0 4px; }
.road-card p { margin: 0; color: var(--muted); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── หน้าแรก: โทรศัพท์เล่นอัตโนมัติ · ตัวอย่างหลังบ้าน · แถบติดต่อ ── */
.mini-phone { width: 340px; max-width: 86vw; padding: 10px; border-radius: 40px; background: linear-gradient(145deg, #17291f, #08130f); box-shadow: 0 0 0 2px #243d2f, 0 40px 90px rgba(0, 0, 0, .6); position: relative; }
.mini-phone .chat { height: 560px; min-height: 0; border-radius: 32px; }
.mini-phone .chat-top { padding-top: 14px; }
.mini-phone .flex { width: 230px; } .mini-phone .flex.giga { width: 250px; }
.bo-teaser { display: block; padding: 22px; position: relative; transition: transform .4s var(--ease); }
.bo-teaser:hover { transform: translateY(-4px); }
.bo-teaser-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; z-index: 1; }
.bo-teaser-kpis div { padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--border); }
.bo-teaser-kpis span { display: block; font-size: .8rem; color: var(--muted); }
.bo-teaser-kpis b { font-family: var(--mono); font-size: 1.3rem; display: block; margin: 2px 0; }
.bo-teaser-kpis em { font-style: normal; font-size: .74rem; padding: 1px 8px; border-radius: 99px; }
em.up { background: rgba(191, 165, 250, .14); color: #bfa5fa; } em.down { background: rgba(251, 113, 133, .14); color: #ffb3c0; }
.bo-teaser-chart { width: 100%; height: 160px; margin-top: 16px; display: block; filter: drop-shadow(0 0 8px rgba(139, 92, 246, .5)); }
.bo-teaser-go { position: absolute; right: 22px; bottom: 22px; z-index: 2; }
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 34px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
@media (max-width: 760px) { .bo-teaser-kpis { grid-template-columns: repeat(2, 1fr); } .bo-teaser-go { position: relative; right: auto; bottom: auto; margin-top: 14px; } .mini-phone .chat { height: 500px; } }

/* ── หน้าเลือกเกม / หลังบ้านตัวอย่าง (เพิ่มเติม) ── */
.g-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 26px; }
.g-filter button { border: 1px solid var(--border); background: rgba(255, 255, 255, .03); color: var(--muted); padding: 7px 16px; border-radius: 99px; font-size: .88rem; transition: .2s; }
.g-filter button b { color: var(--cyan); font-family: var(--mono); font-size: .76rem; margin-left: 4px; }
.g-filter button:hover { color: #fff; border-color: var(--primary); }
.g-filter button.on { color: #fff; background: linear-gradient(135deg, rgba(245, 158, 11, .45), rgba(191, 165, 250, .2)); border-color: transparent; box-shadow: 0 4px 18px rgba(245, 158, 11, .3); }
.legend-inline { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); font-weight: 400; }
.legend-inline i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#bo-30d { height: 200px; }
.health { position: relative; width: 140px; height: 140px; margin: 4px auto; }
.health svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.health .trk { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 10; }
.health .val { fill: none; stroke: url(#rg2); stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); filter: drop-shadow(0 0 8px rgba(191, 165, 250, .6)); }
.health b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 2rem; }
.health small { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; color: var(--muted); font-size: .72rem; }
.heat { display: grid; grid-template-columns: 26px repeat(24, 1fr); gap: 3px; }
.heat .hd { font-size: .66rem; color: var(--muted); align-self: center; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: rgba(139, 92, 246, var(--v)); box-shadow: 0 0 calc(var(--v) * 8px) rgba(139, 92, 246, calc(var(--v) * .6)); animation: heat-in .5s var(--ease) backwards; }
@keyframes heat-in { from { transform: scale(0); } }
.todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .86rem; }
.todo li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); }
.todo em { margin-left: auto; font-style: normal; }
.mini-btn { border: 0; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 8px; transition: .2s; }
.mini-btn:hover { transform: scale(1.06); box-shadow: 0 0 14px rgba(191, 165, 250, .5); }
.bo-table td.pos { color: #4ade80; } .bo-table td.neg { color: var(--red); }
.bo-table { display: block; overflow-x: auto; }
.holo-bars.pl .hb.neg i { background: linear-gradient(180deg, rgba(251, 113, 133, .95), rgba(244, 114, 182, .3)); box-shadow: 0 0 14px rgba(251, 113, 133, .45); }
.ai-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ai-card { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); animation: pane-in .6s var(--ease) backwards; }
.ai-card h4 { margin: 10px 0 6px; font-size: .95rem; } .ai-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.ai-bar { height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .06); margin-top: 12px; overflow: hidden; }
.ai-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--red)); box-shadow: 0 0 10px var(--red); animation: grow 1.2s var(--ease); }
@keyframes grow { from { width: 0 !important; } }
.set-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.set-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--border); font-size: .88rem; }
.set-list small { display: block; color: var(--dim); font-size: .74rem; }
.toggle { cursor: pointer; flex: none; }
.kpi .feed b { display: inline; font-family: inherit; font-size: inherit; margin: 0; color: var(--cyan); }

/* ── โลโก้ CP BOT (รูปเดียวกับหน้าเว็บเล่นสด) ── */
.logo-img { border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px rgba(34, 197, 94, .45), 0 0 14px rgba(34, 197, 94, .35); }
.foot-brand .logo-img { border-radius: 12px; }
.login-orb .logo-mark { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(34, 197, 94, .6), 0 0 34px rgba(34, 197, 94, .45); }

/* ── ลายน้ำกันแอบอ้าง (wm.js) — ทุกหน้า + ในจอโทรศัพท์จำลอง ─────────────── */
.wm-page { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; opacity: .085; }
.wm-tile { position: absolute; inset: -520px; background-repeat: repeat; animation: wm-drift 120s linear infinite; will-change: transform; }
@keyframes wm-drift { to { transform: translate(460px, 250px); } }
.wm-chat { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: inherit; opacity: .14; }
.wm-chat .wm-tile { animation-duration: 90s; }
.wm-ribbon {
  position: relative; z-index: 3; flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px;
  padding: 5px 12px; font-size: .68rem; line-height: 1.35; color: #eafff0; letter-spacing: .01em;
  background: linear-gradient(90deg, rgba(4, 40, 22, .94), rgba(245, 158, 11, .9) 60%, rgba(12, 74, 58, .94));
  border-bottom: 1px solid rgba(191, 165, 250, .35); box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.wm-ribbon b { color: #bfa5fa; font-weight: 700; }
.wm-ribbon-ct { opacity: .85; font-size: .64rem; }
@media (max-width: 520px) { .wm-ribbon-ct { display: none; } }
@media (prefers-reduced-motion: reduce) { .wm-tile { animation: none; } }
@media print { .wm-page { opacity: .2; } }

/* ── หลังบ้านตัวอย่าง: แผง AI ผู้ช่วย ──────────────────────────────────── */
.ai-morning p { margin: 0; color: var(--text); line-height: 1.8; font-size: .9rem; }
.ai-ask { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ai-ask button { padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(139, 92, 246, .4); background: rgba(245, 158, 11, .12); color: var(--text); font-size: .8rem; transition: .2s; }
.ai-ask button:hover { background: var(--primary); }
.ai-ans { min-height: 64px; padding: 10px 12px; border-radius: 12px; background: rgba(23, 18, 10, .6); border: 1px solid var(--border); color: var(--text); font-size: .88rem; }

/* .section (padding: 84px 0) ประกาศหลัง .wrap → ทับระยะขอบซ้าย-ขวา 16px จนเนื้อหาชิดขอบจอมือถือ */
main .wrap, main.wrap { padding-left: 16px; padding-right: 16px; }

/* เมนู 9 ช่อง: จอ 1081–1320 ลดระยะห่างและซ่อนป้ายออนไลน์ ไม่ให้แถบบนสูงเป็น 2 ชั้น */
@media (min-width: 1081px) and (max-width: 1320px) {
  .nav-links a { padding: 8px 9px; font-size: .88rem; }
  .nav .live-pill { display: none; }
}

/* เมนูห้ามตัดคำ ("หน้า/แรก") · login แล้วชื่อ+รูปกินที่ → ย่อเมนูถึง 1520 และซ่อนป้ายออนไลน์ */
.nav-links a { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1520px) {
  .nav-cta:has(.me) .live-pill { display: none; }
  .nav:has(.me) .nav-links a { padding: 8px 8px; font-size: .86rem; }
  .nav:has(.me) { gap: 12px; }
  .nav .me-name { max-width: 90px; }
}
@media (min-width: 1081px) and (max-width: 1260px) {
  .nav:has(.me) .me-name { display: none; }
  .nav:has(.me) .brand-text em { display: none; }
}