/* =============================================
   pg2u — HOTZA888 Style Navbar (FULL MERGED)
   Royal Blue #1E5799 | Aqua Teal #2DC4B2
   เมนูบนทั้งหมด + ปุ่มฝาก + ปุ่มกลม
   hash ล่าสุด: data-v-e737550c / data-v-78188242
   ============================================= */

/* ── Appbar background — deep blue gradient ── */
.appbar-top[data-v-e737550c] {
  background: linear-gradient(180deg,
    #1a2a6e 0%,
    #0e1a4a 55%,
    #06091a 100%) !important;
  border-bottom: 1px solid rgba(30,87,153,0.45) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.6) !important;
  min-height: 72px !important;
}

/* ── Menu container ── */
.menu-items[data-v-e737550c] {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.menu-items[data-v-e737550c] .item[data-v-e737550c] {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── ปุ่มเมนูแต่ละอัน — icon box พรีเมียม ── */
.menu-items[data-v-e737550c] .menu-item[data-v-e737550c] {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 62px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;

  background: linear-gradient(180deg,
    #2a5ba8 0%,
    #1e4a8a 40%,
    #0e2a60 100%) !important;
  border: 1px solid rgba(45,130,220,0.4) !important;
  box-shadow:
    0 2px 12px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* Glass sheen ด้านบนปุ่ม */
.menu-items[data-v-e737550c] .menu-item[data-v-e737550c]::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.03) 70%,
    transparent 100%) !important;
  pointer-events: none;
  z-index: 1;
}

/* Hover */
.menu-items[data-v-e737550c] .menu-item[data-v-e737550c]:hover {
  background: linear-gradient(180deg,
    rgba(45,196,178,0.5) 0%,
    #1a6a90 50%,
    #0d3a60 100%) !important;
  border-color: rgba(45,196,178,0.6) !important;
  box-shadow:
    0 4px 18px rgba(45,196,178,0.35),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transform: translateY(-2px) !important;
}

/* Active (หน้าที่เปิดอยู่) — Aqua Teal เต็มรูปแบบ */
.menu-items[data-v-e737550c] .item.active[data-v-e737550c] .menu-item[data-v-e737550c] {
  background: linear-gradient(145deg,
    #4dffd9 0%,
    #2DC4B2 40%,
    #1aaa9a 70%,
    #0f8070 100%) !important;
  border-color: rgba(160,255,245,0.7) !important;
  box-shadow:
    0 0 20px rgba(45,196,178,0.6),
    0 3px 14px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Shimmer sweep วิ่งผ่านปุ่ม active */
.menu-items[data-v-e737550c] .item.active[data-v-e737550c] .menu-item[data-v-e737550c]::after {
  content: '' !important;
  position: absolute !important;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent) !important;
  animation: topMenuShimmer 3.2s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes topMenuShimmer {
  0%, 55% { left: -80%; opacity: 0; }
  65%     { opacity: 1; }
  100%    { left: 130%; opacity: 0; }
}

/* ── Icon ── */
.menu-items[data-v-e737550c] .icon[data-v-e737550c] {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 3 !important;
  filter: brightness(0) invert(1)
    drop-shadow(0 1px 4px rgba(0,0,0,0.5)) !important;
  opacity: 0.9 !important;
  transition: all 0.25s !important;
}

.menu-items[data-v-e737550c] .item.active[data-v-e737550c] .icon[data-v-e737550c] {
  filter: brightness(0) invert(1)
    drop-shadow(0 0 7px rgba(255,255,255,0.75)) !important;
  opacity: 1 !important;
}

/* ── Text ── */
.menu-items[data-v-e737550c] .menu-text[data-v-e737550c] {
  position: relative !important;
  z-index: 3 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.menu-items[data-v-e737550c] .item.active[data-v-e737550c] .menu-text[data-v-e737550c] {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.6) !important;
}

/* =============================================
   ปุ่มฝาก + wallet pill — data-v-78188242
   ============================================= */

/* กล่อง pill หลัก — glass + glow */
.appbar-wallet__pill[data-v-78188242] {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: linear-gradient(145deg,
    rgba(30,74,138,0.55),
    rgba(10,20,60,0.75)) !important;
  border: 1px solid rgba(99,180,255,0.3) !important;
  border-radius: 26px !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.5),
    0 0 20px rgba(56,140,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
  padding: 5px !important;
  backdrop-filter: blur(8px) !important;
}

.appbar-wallet__pill[data-v-78188242]::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: -150%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent) !important;
  transform: skewX(-18deg);
  animation: pillSweep 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pillSweep {
  0%   { left: -150%; opacity: 0; }
  15%  { opacity: 1; }
  45%  { left: 150%; opacity: 0; }
  100% { left: 150%; opacity: 0; }
}

/* ยอดเงิน */
.appbar-wallet__balance[data-v-78188242] {
  padding: 4px 14px !important;
  color: rgba(255,255,255,0.9) !important;
  font-weight: 600 !important;
}

.appbar-wallet__amount[data-v-78188242] {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(99,180,255,0.4) !important;
}

.appbar-wallet__cur[data-v-78188242] {
  color: rgba(255,255,255,0.55) !important;
  font-weight: 500 !important;
  font-size: 0.8em !important;
}

/* เส้นแบ่งเรืองแสง */
.appbar-wallet__divider[data-v-78188242] {
  width: 1px !important;
  height: 20px !important;
  background: linear-gradient(180deg,
    transparent,
    rgba(99,180,255,0.4),
    transparent) !important;
}

/* ไอคอน refresh */
.appbar-wallet__refresh[data-v-78188242] {
  color: rgba(255,255,255,0.55) !important;
  transition: all 0.2s !important;
}
.appbar-wallet__refresh[data-v-78188242]:hover {
  color: #2DC4B2 !important;
  transform: rotate(180deg) !important;
}

/* ปุ่มฝาก — ตัวเด่นสุด พร้อม shimmer วิ่งถาวร */
.appbar-wallet__deposit[data-v-78188242] {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg,
    #4de8d2 0%,
    #2DC4B2 45%,
    #17a893 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
  padding: 7px 22px !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  box-shadow:
    0 0 18px rgba(45,196,178,0.55),
    0 3px 10px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.appbar-wallet__deposit[data-v-78188242]::after {
  content: '' !important;
  position: absolute !important;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent) !important;
  transform: skewX(-18deg);
  animation: depositShine 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes depositShine {
  0%, 55% { left: -100%; opacity: 0; }
  65%     { opacity: 1; }
  100%    { left: 140%; opacity: 0; }
}

.appbar-wallet__deposit[data-v-78188242]:hover {
  box-shadow:
    0 0 28px rgba(45,196,178,0.8),
    0 4px 14px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

/* ปุ่มกลม (gift / user) */
.appbar-wallet__round[data-v-78188242] {
  position: relative !important;
  background: linear-gradient(180deg,
    #2a5ba8 0%,
    #1e4a8a 40%,
    #0e2a60 100%) !important;
  border: 1px solid rgba(45,130,220,0.4) !important;
  border-radius: 50% !important;
  box-shadow:
    0 2px 10px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transition: all 0.2s ease !important;
}

.appbar-wallet__round[data-v-78188242]:hover {
  background: linear-gradient(180deg,
    rgba(45,196,178,0.5) 0%,
    #1a6a90 55%,
    #0d3a60 100%) !important;
  border-color: rgba(45,196,178,0.6) !important;
  box-shadow:
    0 0 16px rgba(45,196,178,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-2px) !important;
}

/* badge แจ้งเตือน — glow แดง + pulse */
.appbar-wallet__badge[data-v-78188242] {
  background: linear-gradient(135deg, #ff5c7a, #c9184a) !important;
  box-shadow: 0 0 10px rgba(255,80,110,0.75) !important;
  font-weight: 800 !important;
  animation: badgePulse 1.8s ease-in-out infinite !important;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* ============================================
   จบส่วนของ Navbar เมนูด้านบน (FULL MERGED)
   ============================================ */

/* ============================================
   SLIDER EFFECTS — pg2u Banner Swiper
   STYLE 2: Large Banner Cards
   (keyframes เปลี่ยนชื่อเป็น card* — กันชื่อชนกับ section อื่น)
   ============================================ */

/* --- Keyframe: Neon สลับเขียวมิ้น ↔️ ทอง + Shadow Depth --- */
@keyframes cardNeon {
  0%, 100% {
    box-shadow:
      0 0 6px #00ffb3,
      0 0 20px #00ffb3,
      0 0 40px #00ffb3,
      inset 0 0 0 2px #00ffb3,
      0 6px 10px rgba(0,0,0,0.35),
      0 14px 28px rgba(0,0,0,0.3),
      0 24px 48px rgba(0,0,0,0.2);
  }
  50% {
    box-shadow:
      0 0 6px #ffd700,
      0 0 20px #ffd700,
      0 0 40px #ffd700,
      inset 0 0 0 2px #ffd700,
      0 6px 10px rgba(0,0,0,0.35),
      0 14px 28px rgba(0,0,0,0.3),
      0 24px 48px rgba(0,0,0,0.2);
  }
}

@keyframes cardNeonHover {
  0%, 100% {
    box-shadow:
      0 0 10px #00ffb3,
      0 0 30px #00ffb3,
      0 0 60px #00ffb3,
      inset 0 0 0 2px #00ffb3,
      0 12px 20px rgba(0,0,0,0.4),
      0 28px 50px rgba(0,0,0,0.35),
      0 40px 70px rgba(0,0,0,0.25);
  }
  50% {
    box-shadow:
      0 0 10px #ffd700,
      0 0 30px #ffd700,
      0 0 60px #ffd700,
      inset 0 0 0 2px #ffd700,
      0 12px 20px rgba(0,0,0,0.4),
      0 28px 50px rgba(0,0,0,0.35),
      0 40px 70px rgba(0,0,0,0.25);
  }
}

@keyframes cardFrameGlow {
  0%, 100% { box-shadow: 0 0 10px #00ffb3, 0 0 25px #00ffb3, 0 0 50px rgba(0,255,179,0.3); border-color: #00ffb3; }
  50%      { box-shadow: 0 0 10px #ffd700, 0 0 25px #ffd700, 0 0 50px rgba(255,215,0,0.3);  border-color: #ffd700; }
}

/* ============================================
   FRAME — กรอบล้อมสไลด์ทั้งหมด
   ============================================ */

[data-v-34442c26].div-banner {
  border: 3px solid #00ffb3 !important;
  border-radius: 16px !important;
  padding: 8px !important;
  animation: cardFrameGlow 3s ease-in-out infinite !important;
  background: rgba(0, 0, 0, 0.2) !important;
  height: auto !important;
  max-height: none !important;
}

/* ============================================
   SWIPER CONTAINER
   ============================================ */

[data-v-34442c26].swiper-container,
[data-v-34442c26].swiper {
  width: 100% !important;
  height: auto !important;
}

[data-v-34442c26].swiper-wrapper {
  align-items: stretch !important;
  height: auto !important;
}

/* ============================================
   SLIDE — แต่ละใบ ใหญ่ขึ้น สัดส่วนไม่เสีย
   ============================================ */

[data-v-34442c26].swiper-slide {
  border-radius: 12px !important;
  overflow: hidden !important;
  width: calc(33.333% - 12px) !important;  /* 3 ใบ */
  flex-shrink: 0 !important;
  height: auto !important;
}

/* ============================================
   CARD หลัก
   ============================================ */

[data-v-34442c26].div-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  transform: translateY(0) !important;
  transition: transform 0.3s ease !important;
  animation: cardNeon 3s ease-in-out infinite !important;
  height: auto !important;
  width: 100% !important;
}

[data-v-34442c26].div-card:hover {
  transform: translateY(-6px) scale(1.03) !important;
  animation: cardNeonHover 3s ease-in-out infinite !important;
}

/* ============================================
   รูปภาพ — เต็มกว้าง สัดส่วนไม่เสีย
   ============================================ */

[data-v-34442c26].div-card img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  transition: transform 0.5s ease, filter 0.3s ease !important;
  filter: brightness(0.95) saturate(1.1) !important;
}

[data-v-34442c26].div-card:hover img {
  transform: scale(1.07) !important;
  filter: brightness(1.05) saturate(1.3) !important;
}

/* --- Shimmer ไหลผ่านตอน hover --- */
[data-v-34442c26].div-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%
  ) !important;
  transition: left 0.5s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

[data-v-34442c26].div-card:hover::after {
  left: 150% !important;
}

/* ============================================
   RESPONSIVE — Desktop & Mobile
   ============================================ */

@media (min-width: 1200px) {
  [data-v-34442c26].swiper-slide {
    width: calc(25% - 12px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  [data-v-34442c26].swiper-slide {
    width: calc(33.333% - 12px) !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  [data-v-34442c26].swiper-slide {
    width: calc(50% - 8px) !important;
  }
  [data-v-34442c26].div-banner {
    padding: 6px !important;
  }
}

@media (max-width: 479px) {
  [data-v-34442c26].swiper-slide {
    width: 100% !important;
  }
  [data-v-34442c26].div-banner {
    padding: 4px !important;
    border-radius: 10px !important;
  }
  [data-v-34442c26].div-card {
    border-radius: 8px !important;
  }
  [data-v-34442c26].div-card:hover {
    transform: none !important;
    animation: cardNeon 3s ease-in-out infinite !important;
  }
}

/* =========================================
   จบ PG2U PREMIUM BANNER SLIDER
   ========================================= */

/* =============================================
   Mobile Menu — เฉพาะ 5 ปุ่มเมนูเท่านั้น
   ============================================= */

.col-4[data-v-a4bc7e82] {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  padding: 4px !important;
  box-sizing: border-box !important;
}

.menu-item[data-v-a4bc7e82] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;

  background: linear-gradient(180deg,
    #2a5ba8 0%,
    #1e4a8a 40%,
    #0e2a60 100%) !important;
  border: 1px solid rgba(45,130,220,0.4) !important;
  box-shadow:
    0 2px 14px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.25) !important;
}

.menu-item[data-v-a4bc7e82]:hover {
  background: linear-gradient(180deg,
    rgba(45,196,178,0.45) 0%,
    #1a6a90 50%,
    #0d3a60 100%) !important;
  border-color: rgba(45,196,178,0.55) !important;
  box-shadow:
    0 4px 20px rgba(45,196,178,0.28),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-2px) !important;
}

.menu-item.active[data-v-a4bc7e82] {
  background: linear-gradient(180deg,
    #3dd8c4 0%,
    #2DC4B2 35%,
    #1a8a7c 100%) !important;
  border-color: rgba(45,196,178,0.75) !important;
  box-shadow:
    0 0 20px rgba(45,196,178,0.5),
    0 4px 16px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.2) !important;
}

.menu-item[data-v-a4bc7e82] .icon[data-v-a4bc7e82] {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,0.5)) !important;
  opacity: 0.9 !important;
  margin: 0 !important;
  transition: all 0.2s !important;
}

.menu-item.active[data-v-a4bc7e82] .icon[data-v-a4bc7e82] {
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,0.6)) !important;
  opacity: 1 !important;
}

.menu-item[data-v-a4bc7e82] .text[data-v-a4bc7e82] {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.82) !important;
  text-shadow: 0 1px 5px rgba(0,0,0,0.7) !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.menu-item.active[data-v-a4bc7e82] .text[data-v-a4bc7e82] {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.6) !important;
}

/* =============================================
   จบ Mobile Menu — เฉพาะ 5 ปุ่มเมนูเท่านั้น
   ============================================= */

/* =============================================
   Game Menu — 11 ปุ่ม (Mint Green → Gold)
   data-v-4b1df93a
   ============================================= */

.menu-item[data-v-4b1df93a] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 10px 6px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 72px !important;

  background: linear-gradient(160deg,
    #80ffdf 0%,
    #3de8cc 30%,
    #1fcfb0 65%,
    #0fa882 100%) !important;
  border: 1px solid rgba(130,255,220,0.6) !important;
  box-shadow:
    0 2px 14px rgba(63,232,200,0.5),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.15) !important;
}

.menu-item[data-v-4b1df93a]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.6), transparent) !important;
}

.menu-item[data-v-4b1df93a]:hover,
.menu-item.active[data-v-4b1df93a],
.menu-item.nuxt-link-active[data-v-4b1df93a] {
  background: linear-gradient(160deg,
    #fff176 0%,
    #ffe033 30%,
    #f5b800 65%,
    #c87d00 100%) !important;
  border-color: rgba(255,220,50,0.85) !important;
  box-shadow:
    0 0 28px rgba(255,215,0,0.7),
    0 4px 18px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 0 rgba(0,0,0,0.15) !important;
  transform: translateY(-3px) scale(1.04) !important;
}

.menu-item[data-v-4b1df93a] .icon[data-v-4b1df93a] {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35)) !important;
  opacity: 1 !important;
  transition: all 0.25s !important;
}

.menu-item[data-v-4b1df93a]:hover .icon[data-v-4b1df93a],
.menu-item.active[data-v-4b1df93a] .icon[data-v-4b1df93a] {
  filter: drop-shadow(0 0 6px rgba(255,200,0,0.7)) !important;
  transform: scale(1.12) !important;
}

.menu-item[data-v-4b1df93a] .text[data-v-4b1df93a] {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5) !important;
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
  padding-bottom: 2px !important;
  display: block !important;
  white-space: nowrap !important;
}

.menu-item[data-v-4b1df93a]:hover .text[data-v-4b1df93a],
.menu-item.active[data-v-4b1df93a] .text[data-v-4b1df93a] {
  text-shadow:
    0 0 10px rgba(255,180,0,0.9),
    0 1px 4px rgba(0,0,0,0.4) !important;
}

/* =============================================
   จบ Game Menu — 11 ปุ่ม
   ============================================= */

/* ============================================
   PG2U Banner — แบนเนอร์แบบใหญ่ของทั้งเว็บ ทุกหน้า
   (keyframes เปลี่ยนชื่อเป็น page* — กันชื่อชน)
   ============================================ */

@keyframes pageNeon {
  0%, 100% { box-shadow: 0 0 6px #00ffb3, 0 0 20px #00ffb3, 0 0 40px #00ffb3, inset 0 0 0 2px #00ffb3; }
  50%      { box-shadow: 0 0 6px #ffd700, 0 0 20px #ffd700, 0 0 40px #ffd700, inset 0 0 0 2px #ffd700; }
}

@keyframes pageNeonHover {
  0%, 100% { box-shadow: 0 0 10px #00ffb3, 0 0 30px #00ffb3, 0 0 60px #00ffb3, inset 0 0 0 2px #00ffb3; }
  50%      { box-shadow: 0 0 10px #ffd700, 0 0 30px #ffd700, 0 0 60px #ffd700, inset 0 0 0 2px #ffd700; }
}

@keyframes pageFrameGlow {
  0%, 100% { box-shadow: 0 0 10px #00ffb3, 0 0 25px #00ffb3, 0 0 50px rgba(0,255,179,0.3); border-color: #00ffb3; }
  50%      { box-shadow: 0 0 10px #ffd700, 0 0 25px #ffd700, 0 0 50px rgba(255,215,0,0.3);  border-color: #ffd700; }
}

[data-v-6e40dd2c] .banner-section {
  border: 3px solid #00ffb3 !important;
  border-radius: 16px !important;
  padding: 8px !important;
  animation: pageFrameGlow 3s ease-in-out infinite !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

[data-v-6e40dd2c] .VueCarousel-slide {
  border-radius: 12px !important;
  overflow: hidden !important;
  animation: pageNeon 3s ease-in-out infinite !important;
  transition: transform 0.3s ease !important;
  position: relative !important;
}

[data-v-6e40dd2c] .VueCarousel-slide:hover {
  transform: translateY(-6px) scale(1.03) !important;
  animation: pageNeonHover 3s ease-in-out infinite !important;
  z-index: 2 !important;
}

[data-v-6e40dd2c] .VueCarousel-slide::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%) !important;
  transition: left 0.5s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

[data-v-6e40dd2c] .VueCarousel-slide:hover::after {
  left: 150% !important;
}

@media (max-width: 767px) {
  [data-v-6e40dd2c] .VueCarousel-slide:hover {
    transform: none !important;
    animation: pageNeon 3s ease-in-out infinite !important;
  }
}

/* ============================================
   จบ PG2U Banner — แบนเนอร์แบบใหญ่ของทั้งเว็บ ทุกหน้า
   ============================================ */

/* ============================================
   Banner Marquee ด้านบนสุด — data-v-5d0d2afb
   Slide ไป-กลับ ทีละใบ (CSS ล้วน)
   - ทุกครั้งที่หยุด รูปเต็มใบพอดีกรอบ ไม่มีใบขาดครึ่ง
   - ค้างแต่ละจังหวะ แล้วเลื่อนไปอีก 1 ใบ จนสุดแล้ววิ่งกลับ

   *** มีแบนเนอร์จริง 9 ใบ (component clone ซ้ำเป็น 18) ***
   ถ้าเพิ่ม/ลดแบนเนอร์ ต้องแก้ 2 ที่:
   1) nth-child(n+10) = จำนวนแบนเนอร์ + 1
   2) จำนวนจังหวะใน keyframes = จำนวนแบนเนอร์ - จำนวนใบที่โชว์
   ============================================ */

@keyframes topFrameGlow {
  0%, 100% {
    border-color: #00ffb3;
    box-shadow: 0 0 10px rgba(0, 255, 179, 0.45),
                inset 0 0 12px rgba(0, 255, 179, 0.15);
  }
  50% {
    border-color: #00d1ff;
    box-shadow: 0 0 22px rgba(0, 209, 255, 0.75),
                inset 0 0 18px rgba(0, 209, 255, 0.25);
  }
}

@keyframes topNeon {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 255, 179, 0.35); }
  50%      { box-shadow: 0 0 6px rgba(0, 209, 255, 0.35); }
}

@keyframes topNeonHover {
  0%, 100% { box-shadow: 0 0 18px rgba(0, 255, 179, 0.85); }
  50%      { box-shadow: 0 0 18px rgba(0, 209, 255, 0.85); }
}

/* --step = ความกว้าง 1 ใบ + gap (กำหนดต่อขนาดจอด้านล่าง)
   % ใน translateX อิงความกว้าง track = ความกว้างกรอบ */

/* 9 ใบ โชว์ 4 → 5 จังหวะ */
@keyframes topStep5 {
  0%, 6%     { transform: translateX(0); }
  14%, 26%   { transform: translateX(calc(var(--step) * -1)); }
  34%, 46%   { transform: translateX(calc(var(--step) * -2)); }
  54%, 66%   { transform: translateX(calc(var(--step) * -3)); }
  74%, 86%   { transform: translateX(calc(var(--step) * -4)); }
  94%, 100%  { transform: translateX(calc(var(--step) * -5)); }
}

/* 9 ใบ โชว์ 3 → 6 จังหวะ */
@keyframes topStep6 {
  0%, 5%          { transform: translateX(0); }
  11.67%, 21.67%  { transform: translateX(calc(var(--step) * -1)); }
  28.33%, 38.33%  { transform: translateX(calc(var(--step) * -2)); }
  45%, 55%        { transform: translateX(calc(var(--step) * -3)); }
  61.67%, 71.67%  { transform: translateX(calc(var(--step) * -4)); }
  78.33%, 88.33%  { transform: translateX(calc(var(--step) * -5)); }
  95%, 100%       { transform: translateX(calc(var(--step) * -6)); }
}

/* 9 ใบ โชว์ 2 → 7 จังหวะ */
@keyframes topStep7 {
  0%, 4.29%       { transform: translateX(0); }
  10%, 18.57%     { transform: translateX(calc(var(--step) * -1)); }
  24.29%, 32.86%  { transform: translateX(calc(var(--step) * -2)); }
  38.57%, 47.14%  { transform: translateX(calc(var(--step) * -3)); }
  52.86%, 61.43%  { transform: translateX(calc(var(--step) * -4)); }
  67.14%, 75.71%  { transform: translateX(calc(var(--step) * -5)); }
  81.43%, 90%     { transform: translateX(calc(var(--step) * -6)); }
  95.71%, 100%    { transform: translateX(calc(var(--step) * -7)); }
}

/* 9 ใบ โชว์ 1 → 8 จังหวะ */
@keyframes topStep8 {
  0%, 3.75%       { transform: translateX(0); }
  8.75%, 16.25%   { transform: translateX(calc(var(--step) * -1)); }
  21.25%, 28.75%  { transform: translateX(calc(var(--step) * -2)); }
  33.75%, 41.25%  { transform: translateX(calc(var(--step) * -3)); }
  46.25%, 53.75%  { transform: translateX(calc(var(--step) * -4)); }
  58.75%, 66.25%  { transform: translateX(calc(var(--step) * -5)); }
  71.25%, 78.75%  { transform: translateX(calc(var(--step) * -6)); }
  83.75%, 91.25%  { transform: translateX(calc(var(--step) * -7)); }
  96.25%, 100%    { transform: translateX(calc(var(--step) * -8)); }
}

/* ---------- กรอบ (element แม่ของ track) ---------- */
.banner-marquee[data-v-5d0d2afb],
*:has(> .banner-marquee__track[data-v-5d0d2afb]) {
  overflow: hidden !important;
  border: 3px solid #00ffb3 !important;
  border-radius: 16px !important;
  padding: 8px !important;
  animation: topFrameGlow 3s ease-in-out infinite !important;
  background: rgba(0, 0, 0, 0.2) !important;
  /* ปลดความสูงตายตัวของ component → ไม่ตัดหัว/เท้ารูป */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* ---------- track ----------
   width: 100% = กว้างเท่ากรอบ → ใช้ % คำนวณขนาดใบได้ตรง
   รูปที่เกินล้นไปทางขวา แล้วกรอบ overflow: hidden ซ่อนไว้ */
.banner-marquee__track[data-v-5d0d2afb] {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  align-items: flex-start !important;
  position: relative !important;
  left: 0 !important;
  --step: calc(100% + 12px);            /* มือถือ: 1 ใบ */
  /* !important ชนะ inline animation-duration: 31.5s ของ component */
  animation: topStep8 40s ease-in-out infinite alternate !important;
  will-change: transform;
}

/* ---------- ซ่อนรูปชุดที่ clone ซ้ำ ---------- */
.banner-marquee__track[data-v-5d0d2afb] .banner-marquee__item:nth-child(n+10) {
  display: none !important;
}

/* ---------- แต่ละใบ — มือถือ 1 ใบเต็มกรอบ ---------- */
.banner-marquee__item[data-v-5d0d2afb] {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  animation: topNeon 3s ease-in-out infinite !important;
  transition: transform 0.35s ease, opacity 0.35s ease !important;
}

.banner-marquee__item[data-v-5d0d2afb] a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

/* รูป — กว้างเต็มใบ สูงตามสัดส่วนจริง ไม่ crop ไม่ยืด */
.banner-marquee__item[data-v-5d0d2afb] .img-banner {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 12px !important;
}

/* ---------- Shimmer hover ---------- */
.banner-marquee__item[data-v-5d0d2afb]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%) !important;
  transition: left 0.5s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.banner-marquee__item[data-v-5d0d2afb]:hover::after {
  left: 150% !important;
}

/* ---------- หยุดตอนชี้ / แตะค้าง ---------- */
.banner-marquee__track[data-v-5d0d2afb]:hover,
.banner-marquee__track[data-v-5d0d2afb]:active {
  animation-play-state: paused !important;
}

/* ---------- Tablet: 2 ใบ ---------- */
@media (min-width: 480px) {
  .banner-marquee__track[data-v-5d0d2afb] {
    --step: calc((100% - 12px) / 2 + 12px);
    animation: topStep7 35s ease-in-out infinite alternate !important;
  }
  .banner-marquee__item[data-v-5d0d2afb] {
    flex-basis: calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
  }
}

/* ---------- Desktop: 3 ใบ + gallery feel ---------- */
@media (min-width: 768px) {
  .banner-marquee__track[data-v-5d0d2afb] {
    --step: calc((100% - 24px) / 3 + 12px);
    animation: topStep6 30s ease-in-out infinite alternate !important;
  }
  .banner-marquee__item[data-v-5d0d2afb] {
    flex-basis: calc((100% - 24px) / 3) !important;
    width: calc((100% - 24px) / 3) !important;
  }

  /* ชี้ใบไหน ใบนั้นเด่น ใบอื่นหรี่ลง */
  .banner-marquee__track[data-v-5d0d2afb]:hover .banner-marquee__item {
    opacity: 0.5 !important;
  }
  .banner-marquee__track[data-v-5d0d2afb]:hover .banner-marquee__item:hover {
    opacity: 1 !important;
    transform: scale(1.03) !important;
    animation: topNeonHover 3s ease-in-out infinite !important;
    z-index: 2 !important;
  }
}

/* ---------- จอใหญ่: 4 ใบ ---------- */
@media (min-width: 1200px) {
  .banner-marquee__track[data-v-5d0d2afb] {
    --step: calc((100% - 36px) / 4 + 12px);
    animation: topStep5 25s ease-in-out infinite alternate !important;
  }
  .banner-marquee__item[data-v-5d0d2afb] {
    flex-basis: calc((100% - 36px) / 4) !important;
    width: calc((100% - 36px) / 4) !important;
  }
}

/* ---------- ลดการเคลื่อนไหวตามระบบ → ปัดเลื่อนเอง ---------- */
@media (prefers-reduced-motion: reduce) {
  .banner-marquee[data-v-5d0d2afb],
  *:has(> .banner-marquee__track[data-v-5d0d2afb]) {
    animation: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  .banner-marquee__track[data-v-5d0d2afb],
  .banner-marquee__item[data-v-5d0d2afb] {
    animation: none !important;
  }
  .banner-marquee__item[data-v-5d0d2afb] {
    scroll-snap-align: start !important;
  }
}

/* ============================================
   จบ Banner Marquee ด้านบนสุด
   ============================================ */

/* ============================================
   ซ่อน เมนูเกม กีฬา
   ============================================ */

div[data-v-9e0e6230].page {
  display: none !important;
}

/* ============================================
   จบ ซ่อน เมนูเกม กีฬา
   ============================================ */