/* แบนเนอร์เลื่อนอัตโนมัติ (partials/banners.ejs + app.js [data-banner]) — รูปทำจากแม่แบบรูปยิงแอด (ธีมอวกาศเดียวกับเว็บ) */
.bn { position: relative; margin: 22px auto 6px; max-width: 1180px; padding: 0 16px; }
.bn.bn-in { padding: 0; margin: 4px 0 18px; }
.bn-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 24px;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; outline: none;
  border: 1px solid rgba(196, 181, 253, 0.25); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 22px 60px rgba(5, 3, 15, 0.55), 0 0 60px rgba(124, 92, 255, 0.18); }
.bn-track::-webkit-scrollbar { display: none; }
.bn-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: block; aspect-ratio: 1440 / 540; background: #0a0720; }
.bn-slide picture, .bn-slide img { display: block; width: 100%; height: 100%; }
.bn-slide img { object-fit: cover; }
.bn-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.bn-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(196, 181, 253, 0.3); cursor: pointer; transition: width .3s, background .3s; }
.bn-dot.on { width: 26px; background: linear-gradient(90deg, #7c5cff, #db2777); }
@media (max-width: 640px) {
  .bn, .bn.bn-in { padding: 0; margin-left: -6px; margin-right: -6px; }
  .bn { margin-top: 14px; }
  .bn-track { border-radius: 18px; }
  .bn-slide { aspect-ratio: 1080 / 420; }
}