/* ===================================================================
   Smoothie Vibe — เลย์เอาต์ใหม่ของหน้าผู้เล่น (ใช้คู่กับ portal.js เวอร์ชัน Vibe Shell)
   โหลดต่อจาก sm-neon.css · ทุกอย่างอยู่ใต้ html.neon
   - เมนูแถบบน + แผงการ์ด (คอม) · แท็บล่าง + แผ่นเมนู (มือถือ) · ค้นหาเร็ว Ctrl+K
   - หัวหน้าแบบตัวใหญ่ ๆ + สติกเกอร์ · ปุ่มเด้ง · แสงตามเมาส์
   =================================================================== */
html.neon {
  --dock: 78px;       /* ความกว้าง dock ตอนหุบ */
  --dock-open: 268px; /* ตอนกาง */
  --gut: 22px;
  --vbar-h: 74px;
}

/* ---------- ตัวอักษรหัวข้อใหญ่ (ไทยหนา ๆ) ---------- */
html.soft.neon:not(#vx) .p-head h1, html.soft.neon:not(#vx) .wf-head h1, html.soft.neon:not(#vx) .rl-hero h1,
html.soft.neon:not(#vx) .ux-hero-tx h1, html.soft.neon:not(#vx) .g-title {
  font-family: 'Kanit', var(--nx-body) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.02 !important;
}

/* ===================================================================
   โครงหน้า: เว้นที่ให้ dock / แท็บล่าง
   =================================================================== */
@media (max-width: 1023.98px) {
  html.vshell body { padding-bottom: calc(var(--vbar-h) + 18px + env(safe-area-inset-bottom)) !important; }
}
html.vshell body.v-lock { overflow: hidden; }

/* ---------- แถบบน ---------- */
html.neon.vshell:not(#vx) header.nav.vtop {
  position: sticky !important; top: 12px; z-index: 50;
  width: calc(100% - 16px) !important; max-width: 1240px; margin: 14px auto 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(26, 21, 31, 0.82), rgba(14, 12, 18, 0.86)) padding-box, linear-gradient(90deg, rgba(255, 163, 217, 0.55), rgba(143, 200, 255, 0.55)) border-box !important;
  border: 1px solid transparent !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
@media (max-width: 1023.98px) { html.neon.vshell:not(#vx) header.nav.vtop { margin: 10px 10px 0 !important; top: 8px; } }
html.neon.vshell:not(#vx) .vt-in { display: flex !important; align-items: center; gap: 14px; height: 64px !important; padding: 0 10px 0 12px !important; max-width: none !important; }
.vt-brand { display: block; flex: none; }
.vt-logo { width: 52px; height: 46px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(255, 143, 207, 0.4)); transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.vt-brand:hover .vt-logo { transform: rotate(-8deg) scale(1.08); }

/* เมนูบน */
.vt-nav { display: flex; align-items: center; gap: 4px; }
@media (max-width: 1023.98px) { .vt-nav { display: none; } }
.vn-grp { position: relative; }
.vn-top { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 500 15px 'Kanit', var(--nx-body); color: var(--muted); background: transparent; text-decoration: none; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.vn-top > svg { width: 18px; height: 18px; flex: none; }
.vn-top:hover, .vn-grp.open > .vn-top { color: #fff; background: rgba(255, 255, 255, 0.07); }
.vn-top.on, .vn-grp.on > .vn-top { color: #fff; border: 1px solid transparent;
  background: linear-gradient(90deg, #4a2240, #2a2448) padding-box, var(--nx-edge) border-box; box-shadow: 0 0 18px -6px rgba(255, 143, 207, 0.6); }
.vn-top.on > svg, .vn-grp.on > .vn-top > svg { color: var(--nx-pink); }
.vn-chev { display: grid; width: 15px; height: 15px; margin-left: -2px; transition: rotate 0.25s; }
.vn-chev svg { width: 15px; height: 15px; }
.vn-grp.open .vn-chev { rotate: 180deg; }
.vn-drop { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 80; width: 560px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px;
  border-radius: 24px; border: 1.5px solid transparent; background: linear-gradient(180deg, #1e1824, #121015) padding-box, var(--nx-edge) border-box;
  box-shadow: 0 30px 70px -20px #000, 0 0 50px -20px rgba(255, 143, 207, 0.5);
  opacity: 0; visibility: hidden; translate: -50% -8px; scale: 0.97; transform-origin: 50% 0;
  transition: opacity 0.18s, visibility 0.18s, translate 0.28s cubic-bezier(0.3, 1.4, 0.5, 1), scale 0.28s cubic-bezier(0.3, 1.4, 0.5, 1); }
.vn-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.vn-grp.open .vn-drop { opacity: 1; visibility: visible; translate: -50% 0; scale: 1; }
@media (hover: hover) and (pointer: fine) {
  .vn-grp:hover .vn-drop { opacity: 1; visibility: visible; translate: -50% 0; scale: 1; }
  .vn-grp:hover .vn-chev { rotate: 180deg; }
}
.vn-card { --tc: var(--nx-pink); display: flex; flex-direction: column; gap: 6px; padding: 14px; min-height: 118px; border-radius: 18px; text-decoration: none; color: var(--text);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 18%, #1a1520), #15121a 75%); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), border-color 0.2s, box-shadow 0.2s; }
.vn-card:hover { transform: translateY(-3px); border-color: var(--tc); box-shadow: 0 14px 30px -14px var(--tc); }
.vn-card.on { border-color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); }
.vn-card.c-blue { --tc: var(--nx-blue); } .vn-card.c-lav { --tc: var(--nx-lav); } .vn-card.c-mint { --tc: var(--nx-mint); } .vn-card.c-peach { --tc: #ffb79d; } .vn-card.c-butter { --tc: var(--nx-gold); }
.vn-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--tc); background: color-mix(in srgb, var(--tc) 18%, transparent); transition: transform 0.35s cubic-bezier(0.3, 1.7, 0.5, 1); }
.vn-ic svg { width: 20px; height: 20px; }
.vn-card:hover .vn-ic { transform: scale(1.1) rotate(-8deg); }
.vn-tx { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.vn-tx b { font: 600 15px 'Kanit', var(--nx-body); }
.vn-tx small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.vt-crumb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vt-emo { width: 42px; height: 42px; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.vt-path { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.vt-path small { font: 400 10.5px var(--nx-head); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.vt-path b { font: 700 18px 'Kanit', var(--nx-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023.98px) { .vt-emo { display: none; } }
.vt-search {
  margin-left: auto; flex: 0 1 220px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 16px; border-radius: 999px; cursor: pointer;
  color: var(--faint); font: 400 14px var(--nx-body); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.vt-search:hover { color: var(--text); border-color: rgba(255, 159, 214, 0.55); background: rgba(255, 255, 255, 0.08); }
.vt-search svg { width: 18px; height: 18px; flex: none; }
.vt-search span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; }
html.neon kbd { display: inline-grid; place-items: center; min-width: 22px; height: 24px; padding: 0 7px; border-radius: 8px; font: 500 11px 'JetBrains Mono', monospace; color: var(--muted); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-bottom-width: 2px; }
@media (max-width: 1023.98px) { .vt-search { display: none; } html.neon.vshell .vt-in .nav-r { margin-left: auto; } }
html.neon.vshell .vt-in .nav-r { display: flex; align-items: center; gap: 8px; }
.vt-live { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  color: var(--nx-mint); background: rgba(126, 226, 196, 0.1); border: 1px solid rgba(126, 226, 196, 0.35); font-size: 13px; }
.vt-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: vPing 1.8s infinite; }
.vt-live b { font: 700 15px 'Kanit', var(--nx-body); color: #fff; }
.vt-live span { color: var(--muted); }
.vt-live.off { color: var(--danger); background: rgba(255, 120, 160, 0.1); border-color: rgba(255, 138, 168, 0.35); }
.vt-live.off i { animation: none; }
@keyframes vPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
@media (max-width: 520px) { .vt-live span { display: none; } }

/* ---------- แท็บล่าง (มือถือ) ---------- */
.vbar { display: none; }
@media (max-width: 1023.98px) {
  html.neon .vbar {
    position: fixed; z-index: 70; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: var(--vbar-h);
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 6px; border-radius: 26px; border: 1.5px solid transparent;
    background: linear-gradient(180deg, rgba(30, 24, 36, 0.92), rgba(14, 12, 18, 0.96)) padding-box, var(--nx-edge) border-box;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.9), 0 0 30px -14px rgba(255, 143, 207, 0.6);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
}
.vb-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; border: 0; background: none; cursor: pointer;
  color: var(--faint); text-decoration: none; font: 500 11px var(--nx-body); transition: color 0.2s; -webkit-tap-highlight-color: transparent; }
.vb-tab svg { width: 22px; height: 22px; transition: transform 0.3s cubic-bezier(0.3, 1.7, 0.5, 1); }
.vb-tab:active svg { transform: scale(0.85); }
.vb-tab.on { color: #fff; }
.vb-tab.on svg { color: var(--nx-pink); filter: drop-shadow(0 0 8px rgba(255, 143, 207, 0.8)); transform: translateY(-2px); }
.vb-fab { justify-self: center; width: 60px; height: 60px; margin-top: -30px; border-radius: 22px; border: 0; cursor: pointer; display: grid; place-items: center; color: #1a1220;
  background: var(--nx-edge); box-shadow: 0 12px 26px -8px rgba(255, 143, 207, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.5); rotate: 45deg;
  transition: transform 0.25s cubic-bezier(0.3, 1.7, 0.5, 1); }
.vb-fab svg { width: 24px; height: 24px; rotate: -45deg; }
.vb-fab:active { transform: scale(0.9); }

/* ---------- แผ่นเมนู (มือถือ) ---------- */
.vsheet { position: fixed; inset: 0; z-index: 120; }
.vs-back { position: absolute; inset: 0; background: rgba(6, 5, 9, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s; }
.vs-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto; padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0; border: 1.5px solid transparent; border-bottom: 0;
  background: linear-gradient(180deg, #1d1723, #110f15) padding-box, var(--nx-edge) border-box;
  translate: 0 100%; transition: translate 0.35s cubic-bezier(0.2, 1.1, 0.3, 1); }
.vsheet.show .vs-back { opacity: 1; }
.vsheet.show .vs-panel { translate: 0 0; }
.vs-grip { display: block; width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.25); }
.vs-sec { margin: 14px 4px 8px; font: 400 11px var(--nx-head); letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs-tile { --tc: var(--nx-pink); position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; min-height: 104px; border-radius: 22px; text-decoration: none; color: var(--text); overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 22%, #1a1520), #15121a 70%); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); transition: transform 0.2s; }
.vs-tile:active { transform: scale(0.96); }
.vs-tile.c-blue { --tc: var(--nx-blue); } .vs-tile.c-lav { --tc: var(--nx-lav); } .vs-tile.c-mint { --tc: var(--nx-mint); } .vs-tile.c-peach { --tc: #ffb79d; } .vs-tile.c-butter { --tc: var(--nx-gold); }
.vs-tile.on { box-shadow: 0 0 0 2px var(--tc), 0 0 24px -6px var(--tc); }
.vs-ic { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: auto; border-radius: 14px; color: var(--tc); background: color-mix(in srgb, var(--tc) 20%, transparent); }
.vs-ic svg { width: 21px; height: 21px; }
.vs-tile b { font: 600 15px 'Kanit', var(--nx-body); margin-top: 10px; }
.vs-tile small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.vs-row { display: flex; gap: 8px; margin-top: 16px; }
.vs-mini { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 16px; cursor: pointer; text-decoration: none;
  color: var(--muted); font: 500 14px var(--nx-body); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.vs-mini svg { width: 18px; height: 18px; }

/* ---------- ค้นหาเร็ว ---------- */
.vcmd { position: fixed; inset: 0; z-index: 130; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 14px 14px; }
.vc-back { position: absolute; inset: 0; background: rgba(6, 5, 9, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.2s; }
.vc-box { position: relative; width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; border: 1.5px solid transparent;
  background: linear-gradient(180deg, #1e1824, #121015) padding-box, var(--nx-edge) border-box; box-shadow: 0 40px 100px -30px #000, 0 0 60px -20px rgba(255, 143, 207, 0.6);
  opacity: 0; translate: 0 -12px; scale: 0.97; transition: opacity 0.2s, translate 0.3s cubic-bezier(0.2, 1.2, 0.3, 1), scale 0.3s cubic-bezier(0.2, 1.2, 0.3, 1); }
.vcmd.show .vc-back { opacity: 1; }
.vcmd.show .vc-box { opacity: 1; translate: 0 0; scale: 1; }
.vc-in { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 64px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--nx-pink); }
.vc-in svg { width: 22px; height: 22px; flex: none; }
html.soft.neon:not(#vx) .vc-in input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { flex: 1; height: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font: 400 18px 'Kanit', var(--nx-body) !important; color: var(--text) !important; outline: none; }
.vc-list { overflow: auto; padding: 8px; }
.vc-g { margin: 8px 10px 4px; font: 400 10.5px var(--nx-head); letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.vc-it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 16px; background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.vc-it.on { background: linear-gradient(90deg, rgba(255, 143, 207, 0.18), rgba(142, 197, 255, 0.08)); box-shadow: inset 0 0 0 1px rgba(255, 159, 214, 0.35); }
.vc-emo { --ic: var(--nx-pink); width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--ic); background: color-mix(in srgb, var(--ic) 16%, transparent); }
.vc-emo svg { width: 19px; height: 19px; }
.vc-emo.c-blue { --ic: var(--nx-blue); } .vc-emo.c-lav { --ic: var(--nx-lav); } .vc-emo.c-mint { --ic: var(--nx-mint); } .vc-emo.c-peach { --ic: #ffb79d; } .vc-emo.c-butter { --ic: var(--nx-gold); } .vc-emo.c-ghost { --ic: #cfc6da; }
.vc-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vc-tx b { font: 500 15px var(--nx-body); }
.vc-tx small { color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-go { color: var(--faint); opacity: 0; transition: opacity 0.15s; }
.vc-go svg { width: 18px; height: 18px; }
.vc-it.on .vc-go { opacity: 1; color: var(--nx-pink); }
.vc-empty { padding: 30px; text-align: center; color: var(--muted); }
.vc-ft { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: var(--faint); }
.vc-ft span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) { .vc-ft { display: none; } .vcmd { padding-top: 70px; } }

/* ---------- แสงตามเมาส์ ---------- */
.vglow { position: fixed; left: 0; top: 0; z-index: 0; width: 560px; height: 560px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 143, 207, 0.13), rgba(142, 197, 255, 0.06) 45%, transparent 70%); will-change: transform; }
html.vshell main, html.vshell .sitefoot { position: relative; z-index: 1; }

/* ---------- เข้าเพจ: ลอยขึ้นนุ่ม ๆ ---------- */
html.vshell main { animation: vIn 0.6s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
@keyframes vIn { from { opacity: 0; translate: 0 16px; } }
@media (prefers-reduced-motion: reduce) { html.vshell main { animation: none; } .vglow { display: none; } }

/* ===================================================================
   หัวหน้าเพจแบบใหม่: ชิดซ้าย ตัวใหญ่ + สติกเกอร์เอียง ๆ
   =================================================================== */
html.soft.neon:not(#vx) .p-head, html.soft.neon:not(#vx) .wf-head, html.soft.neon:not(#vx) .rl-hero {
  text-align: left !important; align-items: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 18px !important;
}
html.soft.neon:not(#vx) .p-head h1, html.soft.neon:not(#vx) .wf-head h1, html.soft.neon:not(#vx) .rl-hero h1 {
  font-size: clamp(40px, 6.4vw, 86px) !important; margin: 10px 0 6px !important;
}
html.soft.neon:not(#vx) .p-eyebrow, html.soft.neon:not(#vx) .rl-eyebrow, html.soft.neon:not(#vx) .wf-head .g-eyebrow, html.soft.neon:not(#vx) .ux-kicker {
  display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 14px !important; border-radius: 999px !important; rotate: -3deg;
  color: #1a1220 !important; background: var(--nx-edge) !important; border: 0 !important; font: 400 11.5px var(--nx-head) !important; letter-spacing: 0.18em !important;
  box-shadow: 0 8px 20px -8px rgba(255, 143, 207, 0.8);
}
html.soft.neon:not(#vx) .ux-kicker .ux-pulse { background: #1a1220 !important; }
html.soft.neon:not(#vx) .p-head p:not(.p-eyebrow), html.soft.neon:not(#vx) .wf-head p, html.soft.neon:not(#vx) .rl-sub { font-size: 16.5px !important; max-width: 640px; }
html.soft.neon:not(#vx) .wf-head h1 { color: transparent; }

/* ===================================================================
   หน้ากฎ: หมวดเป็นชิปเลื่อนแนวนอน ติดบนจอ · AI เป็นลิ้นชักด้านขวา
   =================================================================== */
html.soft.neon:not(#vx) .rl-hero { padding-bottom: 6px !important; }
html.soft.neon:not(#vx) .rl-search { max-width: 640px; height: 58px; padding-left: 20px !important; }
html.soft.neon:not(#vx) label.rl-search input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { font-size: 16px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.soft.neon:not(#vx) .rl-tabs {
  position: sticky; top: calc(var(--pnav-h, 66px) + 22px); z-index: 30;
  display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; padding: 8px !important; margin: 18px 0 22px !important;
  border-radius: 22px; background: rgba(16, 14, 20, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  grid-template-columns: none !important;
}
html.soft.neon:not(#vx) .rl-tabs::-webkit-scrollbar { display: none; }
html.soft.neon:not(#vx) .rl-tab { flex: none !important; width: auto !important; min-width: 0 !important; padding: 8px 16px 8px 8px !important; border-radius: 999px !important; }
html.soft.neon:not(#vx) .rl-tab-ic { width: 34px !important; height: 34px !important; }
html.soft.neon:not(#vx) .rl-tab.on { background: var(--nx-edge) !important; border-color: transparent !important; color: #1a1220 !important; box-shadow: 0 8px 22px -8px rgba(255, 143, 207, 0.8) !important; }
html.soft.neon:not(#vx) .rl-tab.on * { color: #1a1220 !important; }
html.soft.neon:not(#vx) .rl-tab.on .rl-tab-ic { background: rgba(255, 255, 255, 0.45) !important; }
html.soft.neon:not(#vx) .rl-side { top: calc(var(--pnav-h, 66px) + 104px) !important; }
html.soft.neon:not(#vx) .rl-side a { border-radius: 14px !important; }
html.soft.neon:not(#vx) .rl-side a.on { background: linear-gradient(90deg, rgba(255, 143, 207, 0.22), transparent) !important; box-shadow: inset 3px 0 0 #ff9fd6 !important; }
html.soft.neon:not(#vx) .rl-rule { border-radius: 16px; transition: background 0.2s; }
html.soft.neon:not(#vx) .rl-rule:hover { background: rgba(255, 255, 255, 0.04); }

/* ปุ่ม AI ลอย + ลิ้นชัก */
html.soft.neon:not(#vx) .ai-fab {
  height: 56px !important; padding: 0 22px 0 18px !important; border-radius: 20px !important; font: 600 15px 'Kanit', var(--nx-body) !important;
  color: #1a1220 !important; background: var(--nx-edge) !important; border: 0 !important; box-shadow: 0 16px 34px -10px rgba(255, 143, 207, 0.85), inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
  animation: vFloat 3.2s ease-in-out infinite; text-shadow: none !important;
}
@keyframes vFloat { 50% { translate: 0 -5px; } }
html.soft.neon:not(#vx) .ai-box {
  top: 14px !important; right: 14px !important; bottom: 14px !important; left: auto !important; height: auto !important; width: min(440px, calc(100vw - 28px)) !important;
  border-radius: 28px !important; border: 1.5px solid transparent !important; z-index: 140 !important;
  background: linear-gradient(180deg, #1e1824, #111015) padding-box, var(--nx-edge) border-box !important;
  box-shadow: -30px 0 80px -30px #000, 0 0 60px -20px rgba(255, 143, 207, 0.5) !important;
  animation: vDrawer 0.35s cubic-bezier(0.2, 1.1, 0.3, 1) !important;
}
@keyframes vDrawer { from { opacity: 0; translate: 40px 0; } }
html.soft.neon:not(#vx) .ai-hd b { font-family: 'Kanit', var(--nx-body) !important; font-size: 17px; }
html.soft.neon:not(#vx) .ai-sug button { border-radius: 999px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--text) !important; }
html.soft.neon:not(#vx) .ai-sug button:hover { border-color: var(--nx-pink) !important; }
html.soft.neon:not(#vx) .ai-msg.bot .ai-bub { background: rgba(255, 255, 255, 0.06) !important; border-radius: 20px 20px 20px 6px !important; }
html.soft.neon:not(#vx) .ai-msg.me .ai-bub { border-radius: 20px 20px 6px 20px !important; }
html.soft.neon:not(#vx) .ai-send { border-radius: 16px !important; background: var(--nx-edge) !important; color: #1a1220 !important; border: 0 !important; }
@media (max-width: 1023.98px) {
  html.vshell:not(#vx) .ai-fab { bottom: calc(var(--vbar-h) + 22px + env(safe-area-inset-bottom)) !important; right: 14px !important; }
}
@media (max-width: 640px) {
  html.soft.neon:not(#vx) .ai-box { inset: 8px !important; width: auto !important; border-radius: 24px !important; animation-name: vSheetUp !important; }
  @keyframes vSheetUp { from { opacity: 0; translate: 0 40px; } }
}

/* ปุ่มเลื่อนขึ้นบนสุด / ของลอยอื่น ๆ ให้หลบแท็บล่างบนมือถือ */
@media (max-width: 1023.98px) {
  html.vshell .fx-top, html.vshell .sm-top, html.vshell .to-top, html.vshell #toTop { bottom: calc(var(--vbar-h) + 22px + env(safe-area-inset-bottom)) !important; }
}

/* ===================================================================
   การ์ด: เด้งตอนชี้ + กดยุบ
   =================================================================== */
html.soft.neon:not(#vx) .g-card, html.soft.neon:not(#vx) .e-card, html.soft.neon:not(#vx) .v-card, html.soft.neon:not(#vx) .rm-card {
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.3s !important;
}
html.soft.neon:not(#vx) a.g-card:hover, html.soft.neon:not(#vx) .e-card:hover, html.soft.neon:not(#vx) .g-bento > .g-card:hover {
  transform: translateY(-4px) rotate(-0.4deg) !important; box-shadow: 0 30px 60px -30px #000, 0 0 50px -16px rgba(255, 143, 207, 0.55) !important;
}
html.soft.neon:not(#vx) .sm-btn:active, html.soft.neon:not(#vx) .rl-btn:active, html.soft.neon:not(#vx) .nx-pill:active, html.soft.neon:not(#vx) a.g-card:active { transform: scale(0.96) !important; }

/* ===================================================================
   หน้าแรก: ป้ายวิ่ง + หัวข้อยักษ์ + สติกเกอร์
   =================================================================== */
.vmarq { position: relative; z-index: 2; margin: 18px 0 0; padding: 6px; border-radius: 999px; border: 1.5px solid transparent;
  background: linear-gradient(90deg, #23192a, #161a26) padding-box, var(--nx-edge) border-box;
  box-shadow: 0 16px 40px -20px #000, 0 0 30px -16px rgba(255, 143, 207, 0.55); }
.vm-scroll { overflow-x: auto; overflow-y: hidden; border-radius: 999px; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.vm-scroll::-webkit-scrollbar { display: none; }
.vm-scroll.drag { cursor: grabbing; user-select: none; }
.vm-scroll.drag a { pointer-events: none; }
.vm-track { display: flex; width: max-content; }
.vm-set { display: flex; align-items: center; gap: 10px; padding: 0 5px; white-space: nowrap; font: 500 14px 'Kanit', var(--nx-body); color: var(--muted); }
.vm-set > a, .vm-set > span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; color: var(--text); text-decoration: none;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.2s, border-color 0.2s; -webkit-user-drag: none; }
.vm-set > a:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 159, 214, 0.5); }
.vm-set b { color: #fff; font-weight: 700; }
.vm-brand { padding-left: 4px !important; background: transparent !important; border: 0 !important; }
.vm-brand img { height: 32px; width: auto; -webkit-user-drag: none; }
.vm-ic { --ic: var(--nx-pink); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ic); background: color-mix(in srgb, var(--ic) 18%, transparent); }
.vm-ic svg { width: 15px; height: 15px; }
.vm-ic.c-blue { --ic: var(--nx-blue); } .vm-ic.c-peach { --ic: #ffb79d; } .vm-ic.c-lav { --ic: var(--nx-lav); } .vm-ic.c-mint { --ic: var(--nx-mint); }
.vm-on { padding-left: 14px !important; color: var(--nx-mint) !important; }
.vm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-mint); animation: vPing 1.8s infinite; color: var(--nx-mint); }
.vm-sep { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--nx-edge); opacity: 0.7; }

html.soft.neon:not(#vx) .g-title { font-size: clamp(46px, 5.6vw, 92px) !important; }
html.soft.neon:not(#vx) .g-title > span { white-space: nowrap; }
html.soft.neon:not(#vx) .g-l3 { color: transparent !important; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55); }
.v-sticker { position: absolute; z-index: 3; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; pointer-events: none;
  color: #1a1220; background: var(--nx-edge); box-shadow: 0 16px 40px -12px rgba(255, 143, 207, 0.8); animation: vSpin 16s linear infinite; }
.v-sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-sticker text { font: 400 10.5px var(--nx-head); letter-spacing: 0.24em; fill: #1a1220; }
.v-stk-logo { width: 62%; height: auto; animation: vSpin 16s linear infinite reverse; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); }
@keyframes vSpin { to { rotate: 360deg; } }
html.soft.neon:not(#vx) .g-hero { position: relative; }
html.soft.neon:not(#vx) .g-hero .v-sticker { right: 8%; top: 10%; }
@media (max-width: 860px) { html.soft.neon:not(#vx) .g-hero .v-sticker { right: 6%; top: 2%; width: 92px; height: 92px; } .v-stk-logo { width: 60%; } }
@media (prefers-reduced-motion: reduce) { .v-sticker, .v-stk-logo { animation: none; } }

/* ===================================================================
   ข้อกำหนดการใช้งาน / นโยบาย (legal.js)
   =================================================================== */
html.soft.neon:not(#vx) .dialog.info.wide { max-width: min(100%, 780px) !important; padding: 28px 26px 26px !important; }
html.soft.neon:not(#vx) .dialog.info h2 { font: 800 clamp(24px, 3.4vw, 32px)/1.15 'Kanit', var(--nx-body) !important; letter-spacing: -0.01em !important; }
html.neon .lg-terms { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; }
html.neon .lg-terms p { margin: 0; }
html.neon .lg-meta { display: flex; flex-wrap: wrap; gap: 8px; }
html.neon .lg-meta span { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
html.neon .lg-tldr { padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 143, 207, 0.14), rgba(142, 197, 255, 0.1)); border: 1px solid rgba(255, 159, 214, 0.35); }
html.neon .lg-tldr b { display: block; margin-bottom: 6px; font: 700 15px 'Kanit', var(--nx-body); color: #fff; }
html.neon .lg-tldr ul { gap: 2px; }
html.neon .lg-toc { display: flex; flex-wrap: wrap; gap: 6px; }
html.neon .lg-toc a { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted); text-decoration: none; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: color 0.2s, border-color 0.2s; }
html.neon .lg-toc a:hover { color: #fff; border-color: var(--nx-pink); }
html.neon .lg-sec { scroll-margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 6px; }
html.neon .lg-sec h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 2px !important; font: 700 16.5px 'Kanit', var(--nx-body) !important; color: #fff !important; }
html.neon .lg-sec h4 span { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; color: #1a1220; background: var(--nx-edge); }
html.neon .lg-terms ul { display: flex; flex-direction: column; gap: 5px; margin: 0; padding-left: 20px; }
html.neon .lg-terms li::marker { color: var(--nx-pink); }
html.neon .lg-link { padding: 0 2px; border: 0; background: none; color: var(--nx-pink); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 1279.98px) {
  .vt-search { flex: none; width: 44px; padding: 0; justify-content: center; }
  .vt-search span, .vt-search kbd { display: none; }
  .vt-live span { display: none; }
}
@media (min-width: 1024px) and (max-width: 1150px) { .vn-top { padding: 0 10px; font-size: 14px; } .vn-top > svg { display: none; } }
@media (max-width: 1279.98px) { html.neon .vt-search kbd { display: none; } }
@media (max-width: 560px) { html.neon .vt-in .lang-sw { display: none !important; } } /* สลับภาษาได้จากเมนูค้นหา */