/* paotungs — ดำ / เขียวมรกต / ทองแดง */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 6rem; }
body {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(22,200,136,.16), transparent 60%),
    radial-gradient(40rem 26rem at -10% 30%, rgba(217,127,51,.10), transparent 60%),
    #030a08;
  color: #d9efe7;
}

/* การ์ดกระจก + ขอบเรืองแสง */
.bag-glass {
  background: linear-gradient(160deg, rgba(18,48,41,.62), rgba(6,18,15,.55));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(124,239,194,.14);
  border-radius: 1.25rem;
}
.bag-glow { position: relative; isolation: isolate; }
.bag-glow::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: linear-gradient(130deg, rgba(63,224,163,.7), rgba(232,156,85,.0) 40%, rgba(232,156,85,.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; transition: opacity .25s ease;
}
.bag-glow:hover::before { opacity: 1; }
.bag-solid { background: #0b1d18; border: 1px solid #123029; border-radius: 1rem; }

.bag-cta {
  background: linear-gradient(135deg, #f2bd85, #d97f33 55%, #b46224);
  color: #1a0d03; font-weight: 700;
  box-shadow: 0 10px 30px -8px rgba(232,156,85,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bag-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(232,156,85,.75); }
.bag-ghost { border: 1px solid rgba(63,224,163,.45); color: #7cefc2; transition: background .2s ease; }
.bag-ghost:hover { background: rgba(63,224,163,.1); }

.text-jadegrad {
  background: linear-gradient(90deg, #7cefc2, #3fe0a3 40%, #f2bd85);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* เมนู */
.nav-link[aria-current="page"] { color: #3fe0a3; }
.nav-link[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #3fe0a3, #e89c55);
}
#bag-drawer { transition: max-height .3s ease, opacity .3s ease; max-height: 0; opacity: 0; overflow: hidden; }
#bag-drawer.is-open { max-height: 28rem; opacity: 1; }

/* แถบโลโก้ค่ายเกม (Provider Logo Slider) */
.providers-section { padding: 2.5rem 0 1rem; }
.providers-header { text-align: center; max-width: 46rem; margin: 0 auto 1.25rem; padding: 0 1rem; }
.providers-header h2 { font-family: Itim, cursive; font-size: clamp(1.35rem, 2.6vw, 1.9rem); color: #ecfff7; }
.providers-header p { margin-top: .5rem; color: #9cc5b7; font-size: .95rem; line-height: 1.7; }
.providers-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.providers-track {
  display: flex; gap: 18px; width: max-content; margin: 0; padding: 10px 0 24px; list-style: none;
  animation: providers-scroll 48s linear infinite; animation-play-state: paused;
}
.providers-marquee.is-active .providers-track { animation-play-state: running; }
.providers-marquee.is-active:hover .providers-track { animation-play-state: paused; }
.providers-track li {
  flex: none; border-radius: 16px; padding: 3px;
  background: linear-gradient(140deg, rgba(63,224,163,.55), rgba(11,29,24,.9) 45%, rgba(232,156,85,.55));
  box-shadow: 0 10px 22px -10px rgba(22,200,136,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.providers-track li:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -10px rgba(232,156,85,.6); }
.providers-track img { width: 220px; height: 141px; display: block; border-radius: 13px; background: #0b1d18; }
@keyframes providers-scroll { to { transform: translateX(calc(-50% - 9px)); } }
@media (max-width: 600px) {
  .providers-track { gap: 12px; animation-duration: 34s; }
  .providers-track img { width: 170px; height: 109px; }
  @keyframes providers-scroll { to { transform: translateX(calc(-50% - 6px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .providers-track { animation-duration: 100s; }
}

/* เนื้อหาบทความ */
.bag-prose h2 { font-family: Itim, cursive; font-size: 1.6rem; color: #ecfff7; margin: 2.25rem 0 .75rem; }
.bag-prose h3 { font-size: 1.15rem; font-weight: 700; color: #7cefc2; margin: 1.6rem 0 .5rem; }
.bag-prose p { line-height: 1.95; margin: .85rem 0; color: #c8e3d9; }
.bag-prose ul, .bag-prose ol { margin: .75rem 0 1rem 1.25rem; line-height: 1.9; color: #c8e3d9; }
.bag-prose ul { list-style: disc; }
.bag-prose ol { list-style: decimal; }
.bag-prose a { color: #f2bd85; text-decoration: underline; text-underline-offset: 3px; }
.bag-prose strong { color: #ecfff7; }
.bag-prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.bag-prose th, .bag-prose td { border: 1px solid #123029; padding: .6rem .75rem; text-align: left; }
.bag-prose th { background: #0b1d18; color: #7cefc2; }

[data-filter][aria-pressed="true"] { background: #16c888; color: #03140e; border-color: #16c888; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }