body {
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  color: #e0e0e0;
  /* 🔥 FIX MOBILE OVERSCROLL 🔥 */
  overscroll-behavior-y: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(40, 30, 20, 0.5);
}

::-webkit-scrollbar-thumb {
  background: #8b4513;

  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}

.glass-nav {
  background: rgba(30, 25, 20, 0.95);

  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.nav-icon-img {
  width: 42px;
  /* ✅ ใหญ่ขึ้น */
  height: 42px;
  /* ✅ ใหญ่ขึ้น */
  object-fit: contain;
  margin-bottom: 6px;
  /* ✅ ห่างจากข้อความนิดนึง */
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.32));
}

/* Top Menu Item Styling (Desktop) */
.top-nav-item {
  position: relative;
  /* ✅ ใช้ทำ stroke */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 92px;
  padding: 0 10px;
  height: 100%;

  border: 0;
  /* ✅ ไม่ใช้เส้นซ้าย/ขวาแบบเดิม */
  transition: all 0.2s;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.top-nav-item::after {
  content: '';
  position: absolute;
  inset: 7px 7px 9px;
  /* ✅ ระยะ stroke ขอบใน */
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  /* ✅ stroke */
  pointer-events: none;
  opacity: 0.9;
}

.top-nav-item span {
  font-size: 12px;
  /* ✅ ใหญ่ขึ้นนิด */
  line-height: 1.1;
}

.top-nav-item:hover,
.top-nav-item.active {
  background: linear-gradient(to bottom, rgba(255, 215, 0, 0.12), rgba(40, 30, 20, 0.18));
}

.top-nav-item:hover::after,
.top-nav-item.active::after {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.12);
}

.top-nav-item:hover span,
.top-nav-item.active span {
  color: #f9f295;
}

.top-nav-item:hover span,
.top-nav-item.active span {
  color: #f9f295;
}

aside {
  /* ពណ៌ Background ត្រូវបានលុបចេញ ដើម្បីឱ្យវាទាញយកពី Admin Panel */
  border-right: 1px solid rgba(212, 175, 55, 0.2) !important;
}

/* ✅ ปรับระยะห่างรายการใน sidebar ให้ “พอดี” (override space-y-1 ของ Tailwind) */
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

aside .space-y-1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* ✅ ระยะห่างแต่ละแท็บ */
  padding: 6px 10px;
  /* ✅ เว้นขอบด้านใน */
}

.sidebar-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  gap: 12px;
  /* ✅ ระยะ icon-text */
  padding: 12px 12px;
  /* ✅ ให้ดูเต็มขึ้น */
  border-radius: 16px;

  border: 1px solid rgba(212, 175, 55, 0.18);
  /* ✅ stroke */
  background: rgba(0, 0, 0, 0.08);

  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
}

/* Icon Styling */
.sidebar-item img {
  width: 52px;
  /* ✅ ใหญ่ขึ้น */
  height: 52px;
  /* ✅ ใหญ่ขึ้น */
  object-fit: contain;
  flex: 0 0 auto;

  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.85)) grayscale(0.25) sepia(0.18);
  position: relative;
  z-index: 2;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

/* Text Styling (2 บรรทัดแบบไม่ใช้ -webkit-line-clamp เพื่อไม่ให้ VS Code เตือน) */
aside .sidebar-item span {
  position: relative;
  z-index: 2;
  color: #b0a090;

  flex: 1 1 auto;
  text-align: left;

  font-size: 13px;
  line-height: 1.2;

  white-space: normal !important;
  overflow: hidden;
  text-overflow: clip !important;

  /* ✅ จำกัดสูงสุด 2 บรรทัดด้วยความสูงแทน */
  display: block;
  max-height: calc(1.2em * 2);
  /* 2 บรรทัด */
  overflow-wrap: anywhere;
  /* กันคำยาวล้น */

  transition:
    color 0.25s ease,
    text-shadow 0.25s ease;
}

aside .sidebar-item {
  min-height: 68px;
}

.sidebar-item:hover {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(212, 175, 55, 0.32);
}

.sidebar-item:hover img {
  transform: scale(1.12);
  filter: drop-shadow(0 0 10px rgba(249, 242, 149, 0.6)) grayscale(0) sepia(0);
}

.sidebar-item:hover span {
  color: #f9f295;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.sidebar-item.active {
  border-color: rgba(212, 175, 55, 0.6);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.12), rgba(0, 0, 0, 0.06));
}

.sidebar-item.active span {
  color: #ffd700;
  font-weight: 800;
}

.sidebar-item:hover {
  background: rgba(255, 215, 0, 0.08);
}

.sidebar-item:hover img {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(249, 242, 149, 0.6)) grayscale(0) sepia(0);
}

.sidebar-item.active img {
  filter: grayscale(0) sepia(0) drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

.sidebar-item:hover span {
  color: #f9f295;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.sidebar-item.active span {
  color: #ffd700;
  font-weight: bold;
}

.stats-box {
  background: rgba(40, 30, 20, 0.85);

  border-right: 1px solid rgba(212, 175, 55, 0.15);
  position: relative;
  overflow: hidden;
}

.stats-box:last-child {
  border-right: none;
}

/* Swiper Fixes */
.swiper {
  padding-top: 10px;
  padding-bottom: 20px;
}

/* ============================================================
           🔥 COMBINED GOLD EFFECT (4 + 14) for Swiper & Cards
============================================================ */

@keyframes pulse-gold {
  from {
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.35),
      0 0 10px rgba(212, 175, 55, 0.14);
  }

  to {
    border-color: rgba(249, 242, 149, 0.82);
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.35),
      0 0 18px rgba(212, 175, 55, 0.24);
  }
}

@keyframes slider-edge-glow {
  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 0.95;
  }
}

/* Style for Swiper Slides */
.swiper-slide {
  background:
    radial-gradient(circle at center, rgba(255, 210, 90, 0.22) 0%, rgba(255, 210, 90, 0) 45%),
    linear-gradient(135deg, #5c2d00 0%, #b76500 38%, #ffbf3f 52%, #a84e00 72%, #3d1b00 100%);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.55);
  animation: pulse-gold 2.8s ease-in-out infinite alternate;
}

/* ไฟบน-ล่างแบบบาง ๆ ไม่พาดกลางรูป */
.swiper-slide::before,
.swiper-slide::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  height: 14px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
  filter: blur(6px);
  animation: slider-edge-glow 2.8s ease-in-out infinite;
}

.swiper-slide::before {
  top: 8px;
  background: linear-gradient(180deg, rgba(249, 242, 149, 0.28), rgba(249, 242, 149, 0));
}

.swiper-slide::after {
  bottom: 8px;
  background: linear-gradient(0deg, rgba(249, 242, 149, 0.24), rgba(249, 242, 149, 0));
}

.swiper-slide:hover {
  transform: translateY(-3px);
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 3;
  background: transparent;
  border-radius: inherit;
}

.swiper-pagination-bullet {
  background: #8b4513;

  opacity: 0.6;
}

.swiper-pagination-bullet-active {
  background: #d4af37;

  opacity: 1;
}

.game-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #2a2218;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;

  /* Apply Effect 4 (Pulse) */
  border: 1px solid #553a1a;

  animation: none;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

.game-card:hover {
  border-color: #d4af37;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  transform: translateY(-5px);
}

/* Apply Effect 14 (Shimmer) to Game Cards */
.game-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.25), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3s infinite;
  /* Slightly faster for small cards */
  z-index: 20;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .game-card img {
    aspect-ratio: 16/10;
  }
}

.game-card:hover img {
  transform: scale(1.05);
  filter: brightness(1.15);
}

.mobile-menu-scroll {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 4px 4px 10px;
  gap: 10px;
}

.mobile-menu-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-menu-item {
  flex: 0 0 auto;
  width: 75px;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #2a2218;

  border: 1px solid rgba(212, 175, 55, 0.2);
  backdrop-filter: blur(4px);
  transition: all 0.3s;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.mobile-menu-item.active {
  background: linear-gradient(145deg, rgba(60, 45, 30, 1) 0%, rgba(30, 20, 10, 1) 100%);
  border: 1px solid #d4af37;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.mobile-menu-item img {
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) grayscale(0.4) sepia(0.3);
  transition: all 0.3s ease;
}

.mobile-menu-item.active img {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(249, 242, 149, 0.6)) grayscale(0) sepia(0);
}

.mobile-menu-item span {
  font-size: 10px;
  font-weight: 500;
  color: #b0a090;

  transition: color 0.3s ease;
}

.mobile-menu-item.active span {
  color: #d4af37;
  font-weight: 700;
}

.btn-gold-gradient {
  background: linear-gradient(180deg, #f9f295 0%, #e0aa3e 30%, #b8860b 100%);
  border: 1px solid #f3d275;
  color: #2b1c03;

  text-shadow: none;
}

.btn-outline-white {
  background: rgba(40, 30, 20, 0.6);
  border: 1px solid #d4af37;

  color: #d4af37;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.btn-outline-white:hover {
  background: rgba(212, 175, 55, 0.2);
  color: #fff;
}

/* Grid Layout */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 640px) {
  .games-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .games-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
}

@media (min-width: 1024px) {
  .games-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 1280px) {
  .games-grid {
    gap: 20px;
  }
}

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.center-fab {
  width: 120px;
  /* 🚀 เพิ่มขนาดกรอบรอบนอก */
  height: 120px;
  /* 🚀 เพิ่มขนาดกรอบรอบนอก */
  border-radius: 9999px;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: -105px !important;
  display: grid;
  place-items: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.center-fab img {
  width: 98px;
  /* 🚀 เพิ่มขนาดตัวลูกบอลด้านในให้ใหญ่ขึ้น */
  height: 98px;
  /* 🚀 เพิ่มขนาดตัวลูกบอลด้านในให้ใหญ่ขึ้น */
  object-fit: contain;
  border-radius: 9999px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 16px rgba(212, 175, 55, 0.5));
  transform-origin: 50% 50%;
  animation: ball-idle-spin 18s linear infinite;
}

@keyframes ball-idle-spin {
  to {
    transform: rotate(360deg);
  }
}

/* UPDATED MOBILE BOTTOM NAV CSS */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: visible;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: auto;
  min-height: 80px;
  flex-shrink: 0;
  z-index: 100;
  padding-bottom: max(10px, env(safe-area-inset-bottom));

  background: transparent !important;
  border: none !important;

  /* 🚀 ขยายวงให้กว้างขึ้นนิดหน่อยให้มีช่องว่างห่างลูกบอล (มุมโค้งซ้าย-ขวาคงเดิม) */
  --svg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80' viewBox='0 0 200 80'%3E%3Cpath d='M0,0 L33,0 C40,0 43,8 46,18 A57,57 0 0,0 154,18 C157,8 160,0 167,0 L200,0 L200,80 L0,80 Z' fill='black'/%3E%3C/svg%3E");
}

/* 🚀 ใช้ Mask ร่วมกันทั้งพื้นหลังและเส้นขอบ (เขียนแยกบรรทัด เพื่อให้มือถืออ่านออก 100%) */
.mobile-bottom-nav::before,
.mobile-bottom-nav::after {
  content: '';
  position: absolute;
  -webkit-mask-image: var(--svg-mask), linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size:
    200px 100%,
    calc(50% - 100px) 100%,
    calc(50% - 100px) 100%;
  -webkit-mask-position:
    center 0,
    left 0,
    right 0;
  -webkit-mask-repeat: no-repeat;

  mask-image: var(--svg-mask), linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-size:
    200px 100%,
    calc(50% - 99px) 100%,
    calc(50% - 99px) 100%;
  mask-position:
    center 0,
    left 0,
    right 0;
  mask-repeat: no-repeat;
}

/* 🚀 เลเยอร์ 1: พื้นหลังแถบเมนู (ทับอยู่ข้างหน้า) */
.mobile-bottom-nav::before {
  inset: 0;
  z-index: -1;
  background: var(--bottom-nav-bg, #1a1510);
}

/* 🚀 เลเยอร์ 2: เส้นขอบสีทอง (ซ่อนอยู่ข้างหลัง แต่ดันขึ้นมา 1.5px ให้โผล่เป็นเส้นขอบโค้งๆ แบบสวยงาม) */
.mobile-bottom-nav::after {
  top: -1.5px;
  left: 0;
  right: 0;
  bottom: 1.5px;
  z-index: -2;
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0.4) 0%,
    rgba(255, 234, 166, 0.9) 50%,
    rgba(212, 175, 55, 0.4) 100%
  );
}

.mobile-bottom-nav a.bn-item {
  position: relative;
  isolation: isolate;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.promo-modal.is-open {
  display: block;
}

.promo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 10, 0.9);

  backdrop-filter: blur(8px);
}

.promo-modal__sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(850px, calc(100vw - 20px));
  /* 🚀 ขยายความกว้างสูงสุดให้ใหญ่เต็มตา */
  max-height: 90vh;
  /* 🚀 ไม่ให้ล้นจอแนวตั้งบนคอม */
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%) scale(0.98);
  background: linear-gradient(180deg, #2b2010, #000000);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: 180ms ease;
}

.promo-modal.is-open .promo-modal__sheet {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.promo-modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(40, 30, 20, 0.7);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 5;
}

.promo-modal__media {
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.promo-modal__media img {
  width: 100%;
  height: auto;
  /* 🚀 ปรับให้สูงตามสัดส่วนจริงของรูป เต็มใบไม่โดนตัด */
  max-height: 45vh;
  /* 🚀 จำกัดความสูงไม่ให้ดันข้อความตกขอบจอ */
  object-fit: contain;
  display: block;
}

.promo-modal__body {
  padding: 14px 14px 16px;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}

.promo-modal__title {
  font-size: 18px;
  margin: 0 0 6px;
  line-height: 1.25;
  color: #d4af37;

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

.promo-modal__subtitle {
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.promo-modal__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
  margin-bottom: 10px;
}

.promo-modal__cta {
  display: block;
  margin-top: 14px;
  text-align: center;
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 700;
  color: #2b1c03;
  background: linear-gradient(180deg, #ffe2a0, #d6a640);
  box-shadow: 0 12px 26px rgba(214, 166, 64, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

/* Mobile Promo Modal */
@media (max-width: 640px) {
  .promo-modal__sheet {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh;
    /* 🚀 บังคับให้สูงเต็มจอมือถือเป๊ะๆ */
    max-height: none;
    transform: none !important;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
  }

  .promo-modal__close {
    top: calc(14px + env(safe-area-inset-top));
    /* 🚀 หลบติ่งกล้องมือถือ */
    right: 14px;
  }

  .promo-modal.is-open .promo-modal__sheet {
    transform: none !important;
  }

  .promo-modal__body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }
}

/* Promo Page Grid */
#tab-promo .promo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 0 12px;
}

@media (min-width: 640px) {
  #tab-promo .promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }
}

#tab-promo .promo-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(40, 30, 20, 0.6);

  border: 1px solid rgba(212, 175, 55, 0.2);
}

#tab-promo .promo-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1920 / 800;
  transition: transform 0.3s;
}

#tab-promo .promo-card:hover img {
  transform: scale(1.03);
}

/* Promo Page Scroll */
#tab-promo.tab-content {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  top: 70px;
  bottom: 85px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px 140px;
  background: linear-gradient(180deg, #1a1510, #000000);
  backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
  #tab-promo.tab-content {
    top: 90px;
    bottom: 0;
    left: 130px;
    padding: 18px 18px 28px;
  }
}

/* ===== Logo slot above promo image (BIGGER + TRUE CENTER) ===== */
.promo-modal__top {
  position: relative;

  height: clamp(120px, 18vh, 200px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 6px;

  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.promo-modal__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  max-height: calc(100% - 14px);

  max-width: 92%;

  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* =========================
   Replace ALL your quick-menu styles with this block
   ========================= */

.quick-menu {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
}

.quick-menu.is-open {
  display: block;
}

.quick-menu__backdrop {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 50% 25%, rgba(212, 175, 55, 0.1) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, #000000 0%, #2b2010 70%, #000000 100%);
  backdrop-filter: blur(6px);
}

.quick-menu__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  opacity: 1;

  background: transparent;

  border: none;
  border-radius: 0;
  box-shadow: none;

  padding: calc(18px + env(safe-area-inset-top)) 22px calc(120px + env(safe-area-inset-bottom)) 22px;

  overflow: auto;
}

.quick-menu__close {
  position: fixed;
  left: 16px;
  top: calc(16px + env(safe-area-inset-top));
  width: 48px;

  height: 48px;

  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(40, 30, 20, 0.5);
  color: #fff;
  font-size: 24px;

  line-height: 1;
  cursor: pointer;
  z-index: 12001;
  display: flex;

  align-items: center;
  justify-content: center;

  /* Updated transition properties */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: scale(0) rotate(-180deg);
  opacity: 0;
}

.quick-menu__grid {
  width: min(520px, 100%);
  margin: 80px auto 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.quick-menu__item {
  height: 96px;
  border-radius: 14px;

  border: 1px solid rgba(212, 175, 55, 0.75);

  background: rgba(40, 30, 20, 0.7);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  text-decoration: none;
  transition:
    transform 140ms ease,
    background 140ms ease,
    border-color 140ms ease;
}

.quick-menu__item:active {
  transform: scale(0.98);
}

.quick-menu__item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)) sepia(0.2);
}

/* ✅ Quick Menu: FontAwesome icon support (used by Profile tile) */
.quick-menu__item .qm-fa {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)) sepia(0.2);
}

.quick-menu__item .qm-fa i {
  font-size: 34px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

.quick-menu__item span {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(249, 242, 149, 0.95);
  text-align: center;
  line-height: 1.1;
  padding: 0 6px;
}

/* 🔥🔥 NEW: CSS FOR SECTION TITLE 🔥🔥 */
.quick-menu__section {
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 700;
  color: #d4af37;
  margin-top: 12px;
  margin-bottom: 4px;
  padding-left: 4px;
  border-left: 3px solid #d4af37;
  line-height: 1.2;
}

@media (max-width: 360px) {
  .quick-menu__item {
    height: 90px;
  }

  .quick-menu__grid {
    gap: 14px;
  }
}

/* ===== QUICK MENU color override (short) ===== */
:root {
  --qm-bg1: #1a1510;
  --qm-bg2: #000000;
  --qm-card: #2a2218;
  --qm-gold: rgba(212, 175, 55, 0.6);
  --qm-text: rgba(255, 255, 255, 0.92);
}

.quick-menu__backdrop {
  background:
    radial-gradient(circle at 50% 25%, rgba(212, 175, 55, 0.1) 0%, rgba(0, 0, 0, 0) 45%),
    linear-gradient(180deg, var(--qm-bg1) 0%, var(--qm-bg2) 100%);
}

.quick-menu__item {
  background: var(--qm-card);
  border-color: var(--qm-gold);
}

.quick-menu__item span {
  color: var(--qm-text);
}

.quick-menu__close {
  background: rgba(60, 45, 30, 0.6);
}

/* ===== ☰ (quickMenuToggle) Animation ===== */
#quickMenuToggle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(60, 45, 30, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);

  transform-origin: 50% 50%;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
  animation: qmIdle 5.2s ease-in-out infinite;
}

@keyframes qmIdle {
  0%,
  84%,
  100% {
    transform: translateY(0) scale(1);
  }

  88% {
    transform: translateY(-2px) scale(1.06);
  }

  92% {
    transform: translateY(0) scale(1);
  }

  95% {
    transform: translateY(-1px) scale(1.03);
  }
}

#quickMenuToggle.qm-tap {
  animation: qmTap 0.28s ease;
}

@keyframes qmTap {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(0.92);
  }

  100% {
    transform: scale(1.06);
  }
}

#quickMenuToggle.is-open {
  transform: scale(1.08);
  animation: none;
}

@keyframes qmOpen {
  0% {
    transform: rotate(0deg) scale(1);
  }

  70% {
    transform: rotate(95deg) scale(1.12);
  }

  100% {
    transform: rotate(90deg) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #quickMenuToggle {
    animation: none;
    transition: none;
  }

  #quickMenuToggle.is-open {
    animation: none;
  }

  #quickMenuToggle.qm-tap {
    animation: none;
  }
}

#quickMenuToggle.fa-xmark {
  font-size: 1.65rem;
  line-height: 1;
}

#quickMenuToggle.fa-bars {
  font-size: 1.5rem;
  line-height: 1;
}

#quickMenuToggle.is-open {
  transform: scale(1.08);
}

:root {
  --cm-bg1: #1a1510;
  --cm-bg2: #000000;
  --cm-panel1: #2a2218;
  --cm-panel2: #1a1510;
  --cm-border: rgba(212, 175, 55, 0.4);
}

@media (min-width: 768px) {
  #quickMenuToggle {
    display: none !important;
  }
}

/* REGISTER MODAL (Theme: Black/Gold/Brown) */
#registerModal .rg-backdrop {
  background: radial-gradient(
    70% 50% at 50% 20%,
    rgba(60, 45, 30, 0.4) 0%,
    rgba(20, 15, 10, 0.85) 55%,
    rgba(0, 0, 0, 0.92) 100%
  );
  backdrop-filter: blur(12px);
}

#registerModal .rg-panel {
  background: linear-gradient(180deg, #2b2010 0%, #000000 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease;
}

#registerModal.is-open .rg-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

#registerModal .rg-input {
  width: 100%;
  background: rgba(60, 45, 30, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: #fff;
  padding: 12px 14px;
  border-radius: 14px;
  outline: none;
}

#registerModal .rg-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

#registerModal .rg-input:focus {
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

@media (max-width: 767px) {
  #registerModal .rg-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
  }

  #registerModal .rg-panel {
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

.register-modal {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.register-modal.is-open {
  display: flex;
}

.register-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 10, 0.9);
  backdrop-filter: blur(6px);
}

.register-modal__panel {
  position: relative;
  width: min(520px, 100%);
  border-radius: 22px;
  background: linear-gradient(180deg, #2b2010 0%, #000 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  padding: 22px;
}

.register-modal__close {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(60, 45, 30, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #fff;
}

.register-modal__top {
  text-align: center;
  margin-top: 10px;
}

.register-modal__logo {
  height: 80px;
  margin: 0 auto 10px;
}

.register-modal__title {
  font-size: 22px;
  font-weight: 800;
  color: #d4af37;
}

.register-modal__subtitle {
  opacity: 0.85;
  font-size: 13px;
}

.register-modal__form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rm-input {
  height: 46px;
  width: 100%;
  border-radius: 14px;
  background: rgba(60, 45, 30, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 0 14px;
  color: #fff;
}

.rm-input:focus {
  outline: none;
  border-color: rgba(212, 175, 55, 0.7);
}

.rm-note {
  font-size: 12px;
  color: #ffeaa6;
  background: rgba(212, 175, 55, 0.15);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.rm-btn {
  height: 46px;
  border-radius: 14px;
  font-weight: 800;
}

/* ✅ Loading spinner on submit button */
.rm-btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.92;
  padding-right: 46px;
}

.rm-btn.is-loading::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: currentColor;

  animation: rmSpin 0.65s linear infinite;
}

@keyframes rmSpin {
  to {
    transform: rotate(360deg);
  }
}

.rm-btn-gold {
  background: linear-gradient(180deg, #ffeaa6, #b8860b);
  color: #2b1c03;
}

.rm-btn-dark {
  background: rgba(60, 45, 30, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #d4af37;
}

.rm-footer {
  text-align: center;
  font-size: 12px;
  opacity: 0.9;
}

.rm-login-link {
  color: #ffd24a;
  font-weight: 700;
}

/* 🔥 MOBILE FIX: แก้ไขให้เลื่อนหน้าจอได้ และปุ่มไม่ตกขอบ 🔥 */
@media (max-width: 640px) {
  .register-modal {
    padding: 0 !important;
    align-items: flex-start !important;
    /* จัดให้เริ่มจากด้านบน แทนที่จะอยู่ตรงกลาง */
  }

  .register-modal__panel {
    width: 100% !important;
    height: 100dvh !important;
    /* ความสูงเต็มหน้าจอ */
    max-height: none !important;
    border-radius: 0 !important;

    /* ✅ คำสั่งสำคัญ: เปิดให้ Scroll แนวตั้งได้ */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* ให้เลื่อนลื่นๆ บน iOS */

    /* ✅ เว้นระยะด้านล่างเยอะๆ เพื่อให้เลื่อนปุ่ม "ลงทะเบียน" ขึ้นมาพ้นขอบจอ */
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
}

/* ==============================
        ================================ */

.register-modal__panel select.rm-input {
  color-scheme: dark;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding-right: 44px;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(212, 175, 55, 0.95) 50%),
    linear-gradient(135deg, rgba(212, 175, 55, 0.95) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

.register-modal__panel select.rm-input:focus {
  outline: none;
  border-color: rgba(212, 175, 55, 0.7);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.register-modal__panel select.rm-input option {
  background: #17120b;

  color: #f3f3f3;
}

.register-modal__panel select.rm-input option:disabled {
  color: #b0a090;
}

.register-modal__panel select.rm-input option:checked {
  background: #d4af37;
  color: #2b1c03;
}

/* CONTACT MODAL */
#contactModal .cm-backdrop {
  background: rgba(20, 15, 10, 0.92);
  backdrop-filter: blur(10px);
}

#contactModal .cm-panel {
  border-color: var(--cm-border);
  background: linear-gradient(180deg, var(--cm-panel1), var(--cm-panel2));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
}

#contactModal .cm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(60, 45, 30, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  z-index: 10;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

#contactModal .cm-close:hover {
  background: rgba(85, 62, 39, 0.9);
  border-color: rgba(249, 242, 149, 0.55);
}

#contactModal .cm-close:active {
  transform: scale(0.96);
}

#contactModal #contact-modal-logo {
  display: block;
  width: auto;
  max-width: 220px;
  max-height: 140px;
  object-fit: contain;
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 2px;
}

#contactModal #contact-links-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (max-width: 767px) {
  #contactModal .cm-backdrop {
    background: rgba(20, 15, 10, 0.95);
    backdrop-filter: blur(8px);
  }

  /* บังคับ wrapper ของ modal ให้กินเต็มจอ */
  #contactModal > .absolute.inset-0 {
    inset: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* กล่องเต็มจอมือถือ */
  #contactModal .cm-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
  }

  /* ให้ content ภายในเลื่อนเองได้ */
  #contactModal .cm-panel > div:last-child {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;

    /* ดันทุกอย่างไปอยู่ด้านบน */
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  #contactModal .cm-close {
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
    width: 40px;
    height: 40px;
  }

  #contactModal #contact-modal-logo {
    max-width: 200px;
    max-height: 112px;
    margin-bottom: 0;
  }

  /* สำคัญ: เอา flex-grow ออก และไม่จัดกึ่งกลางแนวตั้ง */
  #contactModal #contact-links-list {
    width: 100%;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
  }

  #contactModal .cm-pill {
    width: min(290px, 100%);
  }

  #contactModal .cm-imgbtn {
    width: min(230px, 100%);
  }
}

/* ✅ LOGIN MODAL (NO STEP / NO GRADIENT) */
.login-backdrop {
  background: rgba(0, 0, 0, 0.88);
}

.login-panel {
  border-color: rgba(212, 175, 55, 0.3);
  background: rgba(20, 15, 10, 0.96);

  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.85);
}

.login-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(60, 45, 30, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.login-logo {
  /* 🚀 บีบขนาดให้เล็กลง กะทัดรัดเหมือนเว็บตัวอย่าง */
  height: clamp(45px, 6vw, 60px);
  max-width: 160px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  margin-bottom: -5px;
  /* ดึงให้ตัวหนังสือด้านล่างขยับขึ้นมาชิดโลโก้นิดนึง */
}

.login-input {
  width: 100%;
  height: 52px;
  border-radius: 999px;
  padding: 0 18px;
  color: #fff;
  background: rgba(60, 45, 30, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.25);
  outline: none;
}

.login-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* ==============================
================================ */

#contactModal .cm-pill {
  --cm-icon-wrap: 58px;

  --cm-icon-size: 36px;

  width: 100%;
  height: 62px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  padding: 0 18px 0 calc(var(--cm-icon-wrap) + 30px);

  font-weight: 800;
  text-decoration: none;
  overflow: hidden;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}

#contactModal .cm-pill:active {
  transform: translateY(1px);
}

#contactModal .cm-pill:hover {
  filter: brightness(1.03);
}

#contactModal .cm-pill__icon {
  width: var(--cm-icon-wrap);
  height: var(--cm-icon-wrap);
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 10px 18px rgba(0, 0, 0, 0.25);

  overflow: hidden;
}

#contactModal .cm-pill__icon img {
  width: var(--cm-icon-size);
  height: var(--cm-icon-size);
  object-fit: contain;

  display: block;
}

#contactModal .cm-pill__icon.cm-icon--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#contactModal .cm-pill__text {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.2px;
}

#contactModal .cm-pill--tg {
  background: linear-gradient(180deg, #9ad7ff, #2aa8ff);
  color: #07101b;
}

#contactModal .cm-pill--ms {
  background: linear-gradient(180deg, #d6c7ff, #7b5cff);
  color: #07101b;
}

@media (max-width: 420px) {
  #contactModal .cm-pill {
    height: 56px;
    --cm-icon-wrap: 52px;
    --cm-icon-size: 34px;
    padding-left: calc(var(--cm-icon-wrap) + 26px);
  }

  #contactModal .cm-pill__text {
    font-size: 15px;
  }
}

/* ================================
        ================================ */
#loginModal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 15000;
}

#loginModal .login-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.92);
}

@media (max-width: 640px) {
  #loginModal .login-backdrop {
    background: linear-gradient(180deg, #2b2010 0%, #000 100%) !important;
    backdrop-filter: none !important;
  }

  #loginModal > div:nth-child(2) {
    padding: 0 !important;
    margin: 0 !important;
  }

  #loginModal .login-panel {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    border: 1px solid rgba(212, 175, 55, 0.25) !important;

    overflow-y: auto !important;
  }
}

.btn-login-match {
  background: rgba(42, 34, 24, 0.8);
  /* = bg-[#2a2218]/80 */
  border: 2px solid rgba(212, 175, 55, 0.5);
  /* = border-2 border-[#d4af37]/50 */
  color: #d4af37;
  /* = text-[#d4af37] */
  border-radius: 1rem;

  font-weight: 800;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  /* shadow-lg */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    transform 0.12s ease,
    filter 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

.btn-login-match:hover {
  background: rgba(42, 34, 24, 0.95);
  border-color: rgba(212, 175, 55, 0.7);
  filter: brightness(1.06);
}

.btn-login-match:active {
  transform: scale(0.95);
}

.auth-btn {
  height: 40px;

  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 12px;

  min-width: 104px;
}

@media (min-width: 768px) {
  .auth-btn {
    height: 44px;
    font-size: 14px;
    padding: 0 18px;
    min-width: 128px;
  }
}

@media (min-width: 768px) {
  .swiper {
    padding-top: 0px;
    /* 🚀 ลดระยะห่างด้านบนในตัว Swiper ออก */
    margin-top: -10px;
    /* 🚀 ดึงรูปสไลด์ขึ้นไปให้ชิดกับแถบตัวหนังสือวิ่งมากขึ้น */
    padding-bottom: 40px;
  }

  .swiper-slide {
    width: 600px;
  }
}

.mySwiper {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

.mySwiper .swiper-wrapper {
  align-items: stretch;
}

.mySwiper .swiper-slide {
  width: 100% !important;
  aspect-ratio: 1920 / 800;
  max-height: 800px;
  overflow: hidden;
  border-radius: 16px;
}

.mySwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: transparent;
}

@media (min-width: 768px) {
  .swiper {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 32px;
  }

  .swiper-slide {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .mySwiper {
    padding-left: 6px;
    padding-right: 6px;
  }

  .mySwiper .swiper-slide {
    aspect-ratio: 1920 / 800;
    min-height: 150px;
    border-radius: 14px;
  }

  .mySwiper .swiper-slide img {
    object-position: center center;
  }
}

#contactModal .cm-btn__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}

#contactModal .cm-btn__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#contactModal .cm-btn__icon i {
  font-size: 20px;
  line-height: 1;
}

/* ==============================
   ============================== */
#contactModal #contact-links-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#contactModal #contact-modal-logo {
  display: block;
  width: auto;
  max-width: 220px;
  max-height: 140px;
  object-fit: contain;
  margin-inline: auto;
}

#contactModal .cm-pill {
  width: min(260px, 100%);
  min-height: 54px;
  margin-inline: auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 18px 0 74px;
  font-weight: 800;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}

#contactModal .cm-pill:active {
  transform: translateY(1px);
}

#contactModal .cm-pill:hover {
  filter: brightness(1.03);
}

#contactModal .cm-pill__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 18px rgba(0, 0, 0, 0.25);
}

#contactModal .cm-pill__text {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.2px;
}

#contactModal .cm-pill--tg {
  background: linear-gradient(180deg, #9ad7ff, #2aa8ff);
  color: #07101b;
}

#contactModal .cm-pill--ms {
  background: linear-gradient(180deg, #d6c7ff, #7b5cff);
  color: #07101b;
}

#contactModal .cm-pill--line {
  background: linear-gradient(180deg, #98ef8d, #36c94d);
  color: #07101b;
}

#contactModal .cm-pill--wa {
  background: linear-gradient(180deg, #8ff3b2, #25d366);
  color: #07101b;
}

@media (max-width: 420px) {
  #contactModal .cm-pill {
    width: min(240px, 100%);
    min-height: 52px;
    padding-left: 70px;
  }

  #contactModal .cm-pill__text {
    font-size: 15px;
  }

  #contactModal #contact-modal-logo {
    max-width: 180px;
    max-height: 110px;
  }
}

#contactModal .cm-imgbtn {
  width: min(200px, 100%);
  display: block;
  margin-inline: auto;
  border-radius: 999px;
  overflow: hidden;
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#contactModal .cm-imgbtn:hover {
  filter: brightness(1.03);
}

#contactModal .cm-imgbtn:active {
  transform: translateY(1px);
}

#contactModal .cm-imgbtn:focus,
#contactModal .cm-imgbtn:focus-visible {
  outline: none !important;
}

#contactModal .cm-imgbtn img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* =========================
   REGISTER SUCCESS MODAL
        ========================= */
.success-modal {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.success-modal.is-open {
  display: flex;
}

.success-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 10, 0.9);
  backdrop-filter: blur(6px);
}

.success-modal__panel {
  position: relative;
  width: min(520px, 100%);
  border-radius: 22px;
  background: linear-gradient(180deg, #2b2010 0%, #000 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  padding: 22px;
  color: #fff;
}

.success-modal__close {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(60, 45, 30, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #fff;
  cursor: pointer;
}

.success-modal__top {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 14px;
}

.success-modal__title {
  font-size: 20px;
  font-weight: 900;
  color: #d4af37;
}

.success-modal__subtitle {
  opacity: 0.85;
  font-size: 13px;
}

.success-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cred-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(60, 45, 30, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.25);
}

.cred-text {
  min-width: 0;
}

.cred-label {
  font-size: 12px;
  opacity: 0.8;
}

.cred-value {
  font-family: Kanit, monospace;
  font-weight: 800;
  word-break: break-all;
}

.cred-pass {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  background: rgba(40, 30, 20, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #d4af37;
}

.eye-btn {
  height: 30px;
  width: 38px;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(40, 30, 20, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #fff;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  z-index: 20000;
  font-size: 13px;
}

.success-badge {
  width: 84px;
  height: 84px;
  margin: -8px auto 10px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #fff6c7 0%, #d4af37 38%, #7a5a12 100%);
  box-shadow:
    0 0 0 6px rgba(212, 175, 55, 0.14),
    0 18px 45px rgba(0, 0, 0, 0.55);
  animation: pop 0.35s ease-out both;
}

.success-badge__icon {
  font-size: 44px;
  font-weight: 900;
  color: #1a1207;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
}

@keyframes pop {
  from {
    transform: scale(0.75);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.sheet-modal {
  position: fixed;
  inset: 0;
  z-index: 17000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  /* Safe area fix */
}

.sheet-modal.is-open {
  display: flex;
}

/* 🔥 MOBILE FULL SCREEN FIX 🔥 */
@media (max-width: 640px) {
  .sheet-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .sheet-modal.is-open {
    align-items: stretch !important;
  }
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 5, 0.88);
  backdrop-filter: blur(6px);
}

.sheet-panel {
  position: relative;
  width: min(520px, 100%);
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, #2b2010 0%, #000 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  color: #fff;

  max-height: calc(100dvh - 40px);
  /* Limit height on desktop */
  overflow-y: auto;
  /* Enable scroll */
  -webkit-overflow-scrolling: touch;
  /* Smooth scroll iOS */
  overscroll-behavior: contain;
  /* Prevent body scroll */
}

/* 🔥 MOBILE FULL SCREEN PANEL 🔥 */
@media (max-width: 640px) {
  .sheet-panel {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    /* Add safe area spacing at top */
    padding-top: calc(20px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  /* Adjust close button position for full screen */
  .sheet-close {
    top: calc(14px + env(safe-area-inset-top)) !important;
    left: 14px !important;
  }
}

/* Custom Scrollbar for Modal */
.sheet-panel::-webkit-scrollbar {
  width: 4px;
}

.sheet-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  margin: 10px 0;
}

.sheet-panel::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 4px;
}

.sheet-close {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(60, 45, 30, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #fff;
  cursor: pointer;
  z-index: 10;
}

.sheet-title {
  text-align: center;
  color: #d4af37;
  margin: 8px 0 14px;
  font-weight: 900;
}

.sheet-label {
  display: block;
  font-size: 13px;
  opacity: 0.85;
  margin: 6px 0 6px;
}

/* ============ BANK SELECTOR (NEW) ============ */
.bank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.bank-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background: rgba(60, 45, 30, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.bank-item:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.5);
}

.bank-item.active {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.2) 0%, rgba(60, 45, 30, 0.8) 100%);
  border: 1px solid #d4af37;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

.bank-item.active::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: #d4af37;
  color: #000;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bank-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s;
}

.bank-item.active .bank-icon {
  transform: scale(1.1);
}

.bank-name {
  font-size: 11px;
  color: #e0e0e0;
  text-align: center;
  font-weight: 500;
}

.bank-item.active .bank-name {
  color: #d4af37;
  font-weight: 700;
}

/* ============ BANK INFO & QR (NEW) ============ */
.bank-info-box {
  background: linear-gradient(180deg, rgba(40, 30, 20, 0.9) 0%, rgba(20, 15, 10, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
  animation: fadeIn 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bank-info-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  opacity: 0.5;
}

.bank-info-title {
  font-size: 14px;
  color: #b0a090;
  margin-bottom: 8px;
}

.bank-acc-name {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
}

.bank-acc-no-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 10px;
  border-radius: 8px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bank-acc-no {
  font-family: 'Kanit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #d4af37;
  letter-spacing: 0.5px;
}

.btn-copy-tiny {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #d4af37;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-copy-tiny:active {
  transform: scale(0.95);
  background: #d4af37;
  color: #000;
}

.bank-qr-frame {
  background: #fff;
  padding: 8px;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.bank-qr-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  display: block;
}

.bank-qr-hint {
  color: #333;
  font-size: 11px;
  font-weight: bold;
  margin-top: 4px;
}

/* 🔥🔥 NEW: UPLOAD BOX STYLES 🔥🔥 */
.upload-box {
  width: 100%;
  height: 120px;
  border: 2px dashed rgba(212, 175, 55, 0.4);
  background: rgba(60, 45, 30, 0.25);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.upload-box:hover,
.upload-box:active {
  background: rgba(212, 175, 55, 0.1);
  border-color: #d4af37;
}

.upload-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 18px;
  color: #d4af37;
}

.upload-text {
  font-size: 13px;
  font-weight: 700;
  color: #e0e0e0;
}

.upload-hint {
  font-size: 11px;
  color: #b0a090;
  margin-top: 2px;
}

/* Preview area improvements */
.preview-container {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: #000;
  margin-bottom: 10px;
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.preview-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

.preview-actions {
  display: flex;
  gap: 10px;
}

/* ============ DUPLICATE PHONE MODAL (Gold Theme) ============ */
.dup-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.dup-modal.is-open {
  display: block;
}

.dup-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
}

.dup-modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100% - 28px));
  transform: translate(-50%, -50%);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: linear-gradient(180deg, rgba(30, 22, 14, 0.98), rgba(10, 8, 5, 0.92));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.85);
}

.dup-modal__close {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.dup-modal__top {
  padding: 18px 18px 10px;
  text-align: center;
}

.dup-modal__icon {
  width: 64px;
  height: 64px;
  margin: 6px auto 10px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 34px;
  color: #2b1c03;
  background: radial-gradient(circle at 30% 30%, #ffe8b7, #d6a640 55%, #9b6a10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 40px rgba(214, 166, 64, 0.22);
}

.dup-modal__title {
  font-size: 18px;
  font-weight: 800;
  color: #d4af37;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
  margin-bottom: 6px;
}

.dup-modal__subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}

.dup-modal__body {
  padding: 12px 18px 18px;
}

.dup-modal__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 14px;
}

.dup-modal__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.dup-modal__value {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
}

.dup-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dup-modal__btn {
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  font-weight: 800;
}

.dup-modal__btn--gold {
  color: #2b1c03;
  background: linear-gradient(180deg, #ffe2a0, #d6a640);
  box-shadow: 0 14px 30px rgba(214, 166, 64, 0.18);
}

.dup-modal__btn--ghost {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(212, 175, 55, 0.22);
}

/* =========================
   FIX MODAL CLICK (IMPORTANT)
   ========================= */

html.modal-open,
body.modal-open {
  overflow: hidden !important;
}

.register-modal,
.success-modal,
.dup-modal,
.admin-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 99999;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}

.register-modal.is-open,
.success-modal.is-open,
.dup-modal.is-open,
.admin-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.register-modal__backdrop,
.success-modal__backdrop,
.dup-modal__backdrop,
.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.register-modal__panel,
.success-modal__panel,
.dup-modal__panel,
.admin-modal__panel {
  position: relative;
  z-index: 1;
}

#quickMenuToggle {
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

#quickMenuToggle .qm-burger {
  position: relative;
  width: 24px;
  height: 18px;
  display: inline-block;
}

#quickMenuToggle .qm-line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 2.5px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.95);
  transform-origin: 50% 50%;
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 160ms ease,
    width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#quickMenuToggle .qm-line--top {
  transform: translateY(-7px);
  width: 22px;
}

#quickMenuToggle .qm-line--mid {
  transform: translateY(0);
  width: 24px;
  opacity: 0.95;
}

#quickMenuToggle .qm-line--bot {
  transform: translateY(7px);
  width: 18px;
}

#quickMenuToggle.is-open .qm-line--top {
  transform: translateY(0) rotate(45deg);
  width: 24px;
}

#quickMenuToggle.is-open .qm-line--mid {
  opacity: 0;
  transform: translateY(0) scaleX(0.2);
  width: 24px;
}

#quickMenuToggle.is-open .qm-line--bot {
  transform: translateY(0) rotate(-45deg);
  width: 24px;
}

/* 🔥🔥 UPDATED CLOSE BUTTON STYLING 🔥🔥 */
/* Close button animation */
@keyframes qmCloseIn {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.1) rotate(10deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.quick-menu__close {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(60, 45, 30, 0.6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);

  color: rgba(255, 255, 255, 0.95);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;
  z-index: 12001;

  /* Initial hidden state for animation */
  transform: scale(0) rotate(-180deg);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quick-menu.is-open .quick-menu__close {
  animation: qmCloseIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}

.quick-menu__close:active {
  transform: scale(0.92);
}

/* Inner X construction */
.qm-x {
  position: relative;
  width: 24px;
  height: 24px;
  display: block;
}

.qm-x-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2.5px;
  background-color: #fff;
  border-radius: 2px;
  transform-origin: center;
  transition: background-color 0.3s;
}

.qm-x-line:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.qm-x-line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.quick-menu__close:hover .qm-x-line {
  background-color: #f9f295;
  box-shadow: 0 0 5px rgba(249, 242, 149, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .quick-menu__close.qm-close .qm-line {
    transition: none;
  }

  .quick-menu__close.qm-close.qm-tap {
    animation: none;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.success-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 🔥 MOBILE FULL SCREEN FIX FOR SUCCESS & PLAY GAME MODAL 🔥 */
@media (max-width: 640px) {
  .success-modal {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  .success-modal__panel {
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;

    /* เปิดให้เลื่อนขึ้นลงได้หากจอมือถือเล็กมาก */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    /* ดันเนื้อหาลงมาไม่ให้ชิดขอบบนเกินไป และหลบแถบด้านล่าง */
    padding-top: calc(30px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
  }

  .success-modal__close {
    top: calc(14px + env(safe-area-inset-top)) !important;
  }
}

/* ==========================================
   🚀 LUCKY WHEEL MODAL (កងវិលសំណាង)
   ========================================== */
#wheelModal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#wheelModal.is-open {
  display: flex;
}

.wheel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 5, 0.92);
  backdrop-filter: blur(8px);
}

.wheel-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* ขยายกรอบให้กว้างขึ้นบนคอม */
  background: linear-gradient(180deg, #2b2010 0%, #000 100%);
  border: 2px solid rgba(212, 175, 55, 0.6);
  border-radius: 24px;
  padding: 30px 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(212, 175, 55, 0.2);
  text-align: center;
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#wheelModal.is-open .wheel-panel {
  transform: scale(1);
  opacity: 1;
}

/* 🚀 ทำให้เต็มจอบนมือกถือ */
@media (max-width: 640px) {
  #wheelModal {
    padding: 0 !important;
  }

  .wheel-panel {
    max-width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    padding-top: calc(30px + env(safe-area-inset-top));
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }

  .wheel-close {
    top: calc(14px + env(safe-area-inset-top)) !important;
  }
}

.wheel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(60, 45, 30, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
  font-weight: bold;
}

.wheel-icon-wrap {
  font-size: 48px;
  color: #d4af37;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  margin-bottom: 5px;
}

.wheel-title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.wheel-subtitle {
  color: #b0a090;
  font-size: 14px;
  margin-bottom: 15px;
}

/* 🚀 ดีไซน์วงล้อใหม่ 10 ช่อง (ธีม ดำ-ทอง หรูหราเข้ากับเว็บ) */
.wheel-wrapper {
  position: relative;
  width: clamp(280px, 88vw, 420px);
  height: clamp(280px, 88vw, 420px);
  margin: 25px auto 30px;
  border-radius: 50%;
  border: 10px solid #d4af37;
  /* 🚀 ขอบวงล้อสีทอง */
  box-shadow:
    0 0 25px rgba(212, 175, 55, 0.6),
    inset 0 0 20px rgba(0, 0, 0, 0.8);
  background: #1a1510;
}

/* 🚀 เข็มหมุนรูป Location Pin (แดงเข้มขอบทอง) */
.wheel-pointer {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 42px;
  height: 42px;
  background: #e72a2a;
  border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    -3px 3px 6px rgba(0, 0, 0, 0.6),
    inset 2px -2px 4px rgba(255, 255, 255, 0.3);
}

.wheel-pointer::before {
  content: '';
  width: 14px;
  height: 14px;
  background: #2b1c03;
  border-radius: 50%;
  box-shadow:
    inset 1px -1px 3px rgba(0, 0, 0, 0.8),
    0 0 2px #d4af37;
}

/* 🚀 สีวงล้อ 10 ช่อง ดำ-ทอง สลับกัน */
.wheel-spinner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform 4.5s cubic-bezier(0.15, 0.85, 0.15, 1);
  background: conic-gradient(
    #2a2218 0deg 36deg,
    /* น้ำตาลเข้ม */ #d4af37 36deg 72deg,
    /* ทอง */ #2a2218 72deg 108deg,
    #d4af37 108deg 144deg,
    #2a2218 144deg 180deg,
    #d4af37 180deg 216deg,
    #2a2218 216deg 252deg,
    #d4af37 252deg 288deg,
    #2a2218 288deg 324deg,
    #d4af37 324deg 360deg
  );
  position: relative;
  overflow: hidden;
}

/* ใส่เงาขอบวงล้อด้านในให้ดูมีมิติ */
.wheel-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.wheel-slice {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}

/* เอียงกรอบแต่ละช่องให้ตรงศูนย์กลางเป๊ะๆ (36 องศาต่อช่อง) */
.wheel-slice:nth-child(1) {
  transform: rotate(18deg);
}

.wheel-slice:nth-child(2) {
  transform: rotate(54deg);
}

.wheel-slice:nth-child(3) {
  transform: rotate(90deg);
}

.wheel-slice:nth-child(4) {
  transform: rotate(126deg);
}

.wheel-slice:nth-child(5) {
  transform: rotate(162deg);
}

.wheel-slice:nth-child(6) {
  transform: rotate(198deg);
}

.wheel-slice:nth-child(7) {
  transform: rotate(234deg);
}

.wheel-slice:nth-child(8) {
  transform: rotate(270deg);
}

.wheel-slice:nth-child(9) {
  transform: rotate(306deg);
}

.wheel-slice:nth-child(10) {
  transform: rotate(342deg);
}

/* 🚀 ล็อคตัวหนังสือให้อยู่ในช่องตัวเอง */
.wheel-slice span {
  position: absolute;
  top: 50%;
  left: 50%;
  /* หมุนตัวหนังสือให้อ่านจากในออกนอกแนวรัศมีวงล้อ */
  transform: translate(-50%, -50%) rotate(-90deg) translateX(clamp(50px, 15vw, 85px));
  width: clamp(70px, 20vw, 120px);
  text-align: right;
  font-family: 'Kanit', 'Battambang', sans-serif;
  font-weight: 900;
  font-size: clamp(11px, 3.2vw, 16px);
  line-height: 1.15;
}

/* 🚀 ปรับสีอักษรให้ตัดกับพื้นหลัง */
.wheel-slice:nth-child(odd) span {
  color: #f9f295;
  /* สีทองอ่อนบนพื้นเข้ม */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}

.wheel-slice:nth-child(even) span {
  color: #2b1c03;
  /* สีน้ำตาลเข้มบนพื้นทอง */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* 🚀 ปุ่มหมุนสีทองตรงกลาง */
.wheel-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(65px, 18vw, 85px);
  height: clamp(65px, 18vw, 85px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe8b7, #d6a640 60%, #9b6a10);
  /* ไล่สีทอง */
  border: 4px solid #1a1510;
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.8),
    inset 0 -3px 5px rgba(0, 0, 0, 0.3);
  color: #2b1c03;
  font-weight: 900;
  font-size: clamp(18px, 5vw, 24px);
  cursor: pointer;
  z-index: 15;
  transition: transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.wheel-center-btn:active {
  transform: translate(-50%, -50%) scale(0.92);
}

.wheel-lights {
  display: none;
}

.wheel-terms {
  color: #d4af37;
  font-size: 13px;
  padding: 12px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  margin-top: auto;
  width: 100%;
}

/* 🚀 ซ่อนปุ่มเข้าเกมเฉพาะบนมือถือ ไม่ให้ตีกับระบบจัดการล็อกอิน */
@media (max-width: 767px) {
  .desktop-only-btn {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .stats-play-up {
    margin-top: -6px !important;
    /* ปรับ -6 / -12 ได้ตามที่ชอบ */
  }
}

/* ✅ SPEED: ลดภาระ GPU บนมือถือ */
@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }

  /* header blur หนักบนมือถือ */
  .glass-nav {
    backdrop-filter: none !important;
  }

  /* blur หลังโมดัล (หนักบนมือถือ) */
  .promo-modal__backdrop,
  .dup-modal__backdrop {
    backdrop-filter: none !important;
  }

  /* shimmer animation กินแบต/CPU */
  .swiper-slide::after,
  .game-card::after {
    animation: none !important;
  }
}

/* ==========================================
   🚀 FIX KHMER FONT CLIPPING (แก้ปัญหาตัวอักษรและสระเขมรโดนตัดขอบ)
   ========================================== */

/* 1. เมนูด้านซ้าย (Sidebar) */
.sidebar-item {
  overflow: visible !important;
  /* ปลดล็อคกรอบไม่ให้ตัดสระล่าง */
}

aside .sidebar-item span {
  overflow: visible !important;
  max-height: none !important;
  /* เลิกบีบความสูง */
  line-height: 1.5 !important;
  /* ขยายบรรทัดให้อักษรเต็มตัว */
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* 2. ปุ่มตรงกลางกงล้อนำโชค (Wheel Center Button) */
.wheel-center-btn {
  overflow: visible !important;
  line-height: normal !important;
}

/* 3. ปุ่มกดเข้าเล่นเกม และปุ่มหลักๆ (Play Game Button) */
button[onclick*='openPlayGame'],
.btn-gold-gradient,
.btn-login-match {
  line-height: 1.5 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ==========================================
   🚀 FIX SIDEBAR ACTIVE & GLOW EFFECT (เพิ่มไฟเอฟเฟคเมนูซ้าย)
   ========================================== */
.sidebar-item.active {
  border-color: #d4af37 !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.25) 0%, rgba(0, 0, 0, 0) 100%) !important;
  box-shadow:
    inset 4px 0 0 #d4af37,
    0 0 15px rgba(212, 175, 55, 0.4) !important;
  transform: translateX(6px) !important;
  /* เด้งขวาออกมานิดนึงให้รู้ว่ากดแล้ว */
}

.sidebar-item.active span {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8) !important;
  /* ตัวหนังสือเรืองแสง */
}

.sidebar-item.active img {
  filter: grayscale(0) sepia(0) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) scale(1.15) !important;
  /* ไอคอนเรืองแสง */
}

/* ===== CHANGE PASSWORD MODAL : FULLSCREEN POLISHED UI ===== */
#changePasswordModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

#changePasswordModal .sheet-modal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255, 215, 0, 0.06), transparent 30%), rgba(8, 6, 3, 0.82);
  backdrop-filter: blur(10px);
}

#changePasswordModal .sheet-modal__panel.change-password-panel {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at top, rgba(255, 215, 0, 0.1), transparent 32%),
    linear-gradient(180deg, #4a3516 0%, #24170a 20%, #120d08 58%, #080603 100%);
}

/* จัดทุกส่วนให้อยู่กลางจอและอ่านง่าย */
#changePasswordModal .change-password-hero,
#changePasswordModal .change-password-note,
#changePasswordModal .sheet-modal__body.change-password-form {
  width: min(100%, 460px);
  margin-left: auto;
  margin-right: auto;
}

#changePasswordModal .change-password-hero {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 14px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
  background: linear-gradient(180deg, rgba(43, 30, 12, 0.92), rgba(24, 17, 10, 0.78));
  backdrop-filter: blur(12px);
}

#changePasswordModal .change-password-hero__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1d1408;
  font-size: 22px;
  background: linear-gradient(180deg, #f9f295 0%, #e7b64d 38%, #b8860b 100%);
  box-shadow:
    0 10px 26px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

#changePasswordModal .change-password-hero__content {
  min-width: 0;
  flex: 1 1 auto;
}

#changePasswordModal .sheet-modal__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  color: #f9f295;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#changePasswordModal .sheet-modal__subtitle {
  margin-top: 4px;
  color: #d2c09f;
  font-size: 12px;
  line-height: 1.5;
}

#changePasswordModal .change-password-close {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex: 0 0 auto;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #f9f295;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#changePasswordModal .change-password-note {
  width: min(calc(100% - 32px), 460px);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  background: rgba(255, 215, 0, 0.05);
  color: #dccda9;
  font-size: 12px;
  line-height: 1.55;
  overflow: hidden;
}

#changePasswordModal .change-password-note i {
  color: #f9f295;
  margin-top: 1px;
  flex: 0 0 auto;
}

#changePasswordModal .change-password-note span {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
}

#changePasswordModal .sheet-modal__body.change-password-form {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 26px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#changePasswordModal .change-password-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #f9f295;
  letter-spacing: 0.1px;
}

#changePasswordModal .change-password-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  background: linear-gradient(180deg, rgba(52, 37, 20, 0.96), rgba(31, 23, 15, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 16px rgba(0, 0, 0, 0.16);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#changePasswordModal .change-password-input-wrap:focus-within {
  border-color: rgba(249, 242, 149, 0.78);
  box-shadow:
    0 0 0 3px rgba(212, 175, 55, 0.1),
    0 10px 26px rgba(212, 175, 55, 0.08);
  transform: translateY(-1px);
}

#changePasswordModal .change-password-input-wrap i {
  color: #d4af37;
  font-size: 15px;
  flex: 0 0 auto;
}

#changePasswordModal .change-password-input-wrap input {
  flex: 1 1 auto;
  width: 100%;
  height: 56px;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 15px;
  box-shadow: none !important;
  appearance: none;
}

#changePasswordModal .change-password-input-wrap input::placeholder {
  color: #8f816a;
}

#changePasswordModal .change-password-submit {
  margin-top: 10px;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #1c1408;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(180deg, #f9f295 0%, #e0aa3e 35%, #b8860b 100%);
  box-shadow:
    0 12px 28px rgba(212, 175, 55, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

#changePasswordModal .change-password-submit:active {
  transform: scale(0.988);
}

#changePasswordModal .change-password-submit:disabled {
  opacity: 0.72;
  filter: grayscale(0.12);
}

@media (max-width: 480px) {
  #changePasswordModal .change-password-hero,
  #changePasswordModal .change-password-note,
  #changePasswordModal .sheet-modal__body.change-password-form {
    width: 100%;
  }

  #changePasswordModal .change-password-hero {
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 12px;
  }

  #changePasswordModal .change-password-note {
    width: calc(100% - 32px);
    margin-top: 12px;
    margin-left: 16px;
    margin-right: 16px;
    padding: 12px 14px;
  }

  #changePasswordModal .change-password-note span {
    font-size: 12px;
    line-height: 1.5;
  }

  #changePasswordModal .sheet-modal__body.change-password-form {
    padding: 14px 16px 0;
  }
}

#changePasswordModal .change-password-input-wrap {
  cursor: text;
  -webkit-tap-highlight-color: transparent;
}

#changePasswordModal .change-password-input-wrap i {
  pointer-events: none;
}

#changePasswordModal .change-password-input-wrap input {
  position: relative;
  z-index: 1;
}

#changePasswordModal .change-password-panel {
  display: block;
  max-height: min(92dvh, 760px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#changePasswordModal .change-password-form {
  display: block;
  padding-bottom: 0;
  overflow: visible;
}

#changePasswordModal .change-password-actions {
  margin-top: 14px;
  padding: 0 20px 20px;
  border-top: 0;
  background: transparent;
  position: static;
  bottom: auto;
  z-index: auto;
}

#changePasswordModal .change-password-submit {
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* จัดกล่องเปลี่ยนรหัสให้อยู่กลางจอเฉพาะหน้าคอม */
@media (min-width: 1024px) {
  #changePasswordModal .sheet-modal__panel.change-password-panel {
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 64px)) !important;
    height: auto !important;
    max-height: min(88dvh, 760px) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(212, 175, 55, 0.26) !important;
    box-shadow:
      0 28px 70px rgba(0, 0, 0, 0.58),
      0 0 0 1px rgba(249, 242, 149, 0.04) inset !important;
    padding: 0 !important;
    overflow-y: auto;
  }

  #changePasswordModal .change-password-hero,
  #changePasswordModal .change-password-note,
  #changePasswordModal .sheet-modal__body.change-password-form {
    width: 100%;
    max-width: none;
  }

  #changePasswordModal .change-password-hero {
    padding: 18px 20px 14px;
  }

  #changePasswordModal .change-password-note {
    width: calc(100% - 40px);
    margin: 14px 20px 0;
  }

  #changePasswordModal .sheet-modal__body.change-password-form {
    padding: 18px 20px 0;
  }

  #changePasswordModal .change-password-actions {
    padding: 0 0 20px;
  }
}

@media (max-width: 480px) {
  #changePasswordModal .change-password-panel {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    border-radius: 26px;
  }

  #changePasswordModal .sheet-modal__body.change-password-form {
    padding: 14px 16px 0;
  }

  #changePasswordModal .change-password-actions {
    margin-top: 12px;
    padding: 0 16px 16px;
  }
}

.app-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.app-notice-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.app-notice-dialog {
  width: min(100%, 360px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: linear-gradient(180deg, #2b2010 0%, #120d08 45%, #000000 100%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(249, 242, 149, 0.08);
  transform: translateY(18px) scale(0.94);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease;
  opacity: 0;
}

.app-notice-overlay.is-open .app-notice-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.app-notice-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 14px;
}

.app-notice-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 2px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.18);
}

.app-notice-dialog[data-type='success'] .app-notice-icon {
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.45);
  background: rgba(34, 197, 94, 0.12);
  box-shadow: 0 0 22px rgba(34, 197, 94, 0.2);
}

.app-notice-dialog[data-type='error'] .app-notice-icon {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.45);
  background: rgba(255, 77, 77, 0.12);
  box-shadow: 0 0 22px rgba(255, 77, 77, 0.2);
}

.app-notice-dialog[data-type='info'] .app-notice-icon {
  color: #f9f295;
  background: rgba(212, 175, 55, 0.1);
}

.app-notice-title {
  margin: 0;
  color: #f9f295;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.app-notice-body {
  padding: 0 18px 18px;
}

.app-notice-message {
  margin: 0;
  color: #d8c7a6;
  font-size: 14px;
  line-height: 1.7;
}

.app-notice-actions {
  padding: 0 18px 18px;
}

.app-notice-btn {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  color: #2b1c03;
  background: linear-gradient(180deg, #f9f295 0%, #e0aa3e 38%, #b8860b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 24px rgba(212, 175, 55, 0.22);
}

.app-notice-btn:active {
  transform: translateY(1px);
}

.change-password-input-wrap.is-invalid {
  border-color: rgba(255, 107, 107, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(255, 107, 107, 0.28),
    0 0 20px rgba(255, 77, 77, 0.12) !important;
  background: rgba(255, 77, 77, 0.08) !important;
}

@media (max-width: 480px) {
  .app-notice-overlay {
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .app-notice-dialog {
    width: min(100%, 360px);
    max-width: calc(100vw - 32px);
    border-radius: 22px;
  }

  .app-notice-head {
    padding: 16px 16px 12px;
  }

  .app-notice-body,
  .app-notice-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .app-notice-actions {
    padding-bottom: 16px;
  }
}

#changePasswordModal .change-password-actions.change-password-actions--inline {
  margin-top: 12px;
  padding: 0;
}

#changePasswordModal .change-password-actions.change-password-actions--inline .change-password-submit {
  width: 100%;
}

@media (max-width: 480px) {
  #changePasswordModal .change-password-actions.change-password-actions--inline {
    margin-top: 10px;
    padding: 0;
  }
}

.ticker-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.ticker-track {
  position: relative;
  display: block;
  width: 100%;
  height: 22px;
}

.ticker-text {
  position: absolute;
  top: 0;
  left: 100%;
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  will-change: transform;
  animation: ticker-run 14s linear infinite;
}

@keyframes ticker-run {
  0% {
    transform: translateX(0);
  }

  85.714% {
    transform: translateX(calc(-100% - 100vw));
  }

  100% {
    transform: translateX(calc(-100% - 100vw));
  }
}

.bank-qr-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2f1f0d 0%, #1a1208 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 170, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.24);
}

.bank-qr-img {
  display: block;
  width: min(100%, 320px);
  height: auto;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f1dfb2 0%, #d7b56a 100%);
  border: 1px solid rgba(123, 83, 19, 0.55);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: zoom-in;
  filter: sepia(0.18) saturate(0.95) brightness(0.97);
}

.bank-qr-hint {
  color: #fff8dc;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.35);
  background: rgba(43, 28, 3, 0.38);
  padding: 6px 10px;
  border-radius: 10px;
  display: inline-block;
}

.bank-qr-download {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #d4af37;
  background: linear-gradient(180deg, #4a3417 0%, #2b1c03 100%);
  color: #f9f295;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  text-shadow: none;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 235, 170, 0.15);
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.bank-qr-download:hover {
  filter: brightness(1.12);
  border-color: #f9f295;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(249, 242, 149, 0.18);
  transform: translateY(-1px);
}

.bank-qr-download:active {
  transform: scale(0.98);
}

.bank-qr-download i {
  color: #f3d275;
}

.bank-qr-download span {
  color: #f9f295;
}

#depositModal .deposit-bank-rail-wrap {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

#depositModal .deposit-bank-rail-col {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  flex: 0 0 84px !important;
}

#depositModal .deposit-bank-detail-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#depositModal #depBankGrid.bank-grid.deposit-bank-rail {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#depositModal #depBankGrid.bank-grid.deposit-bank-rail > div[style] {
  width: 84px !important;
}

#depositModal #depBankGrid.bank-grid.deposit-bank-rail .bank-item {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  min-height: 108px !important;
  padding: 10px 6px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(212, 175, 55, 0.24) !important;
  background: linear-gradient(180deg, rgba(83, 57, 28, 0.95), rgba(42, 29, 16, 0.98)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  text-align: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

#depositModal #depBankGrid.bank-grid.deposit-bank-rail .bank-item.active {
  border-color: rgba(212, 175, 55, 0.78) !important;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.28), rgba(145, 94, 23, 0.38)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 200, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

#depositModal #depBankGrid.bank-grid.deposit-bank-rail .bank-icon {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 4px !important;
  margin: 0 auto !important;
}

#depositModal #depBankGrid.bank-grid.deposit-bank-rail .bank-name {
  font-size: 10px !important;
  line-height: 1.2 !important;
  color: #fff3cf !important;
  font-weight: 700 !important;
  text-align: center !important;
  word-break: break-word !important;
  white-space: normal !important;
}

#depositModal .deposit-bank-info-box {
  min-height: 340px !important;
  width: 100% !important;
  display: block !important;
}

#depositModal .deposit-bank-qr-frame {
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f3e1b8, #c9973c) !important;
  padding: 10px !important;
}

@media (max-width: 380px) {
  #depositModal .deposit-bank-rail-col,
  #depositModal #depBankGrid.bank-grid.deposit-bank-rail,
  #depositModal #depBankGrid.bank-grid.deposit-bank-rail .bank-item,
  #depositModal #depBankGrid.bank-grid.deposit-bank-rail > div[style] {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    flex-basis: 78px !important;
  }

  #depositModal #depBankGrid.bank-grid.deposit-bank-rail .bank-item {
    min-height: 98px !important;
    padding: 8px 5px !important;
  }

  #depositModal #depBankGrid.bank-grid.deposit-bank-rail .bank-icon {
    width: 36px !important;
    height: 36px !important;
  }

  #depositModal #depBankGrid.bank-grid.deposit-bank-rail .bank-name {
    font-size: 9px !important;
  }
}

@media (max-width: 380px) {
  .deposit-bank-rail-wrap {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
  }

  .bank-grid.deposit-bank-rail .bank-item {
    min-height: 98px;
    padding: 8px 6px;
  }

  .bank-grid.deposit-bank-rail .bank-icon {
    width: 38px;
    height: 38px;
  }

  .bank-grid.deposit-bank-rail .bank-name {
    font-size: 10px;
  }

  .deposit-bank-info-box {
    min-height: 320px;
  }
}

.referral-modal-shell {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}

.referral-modal-panel {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
}

.referral-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
}

.referral-modal-body > #referralContent {
  padding-bottom: 2px;
}

.referral-terms-text {
  color: #e8d7b0;
  font-size: 15px;
  line-height: 1.9;
  white-space: pre-line;
  word-break: break-word;
  margin-top: 0;
  padding-top: 0;
}

@media (min-width: 768px) {
  .referral-modal-shell {
    padding: 18px;
    align-items: center;
  }

  .referral-modal-panel {
    max-width: 960px;
    height: min(94dvh, 900px);
    max-height: min(94dvh, 900px);
    border-radius: 28px;
  }

  .referral-modal-body {
    padding: 18px 20px 20px;
  }
}

.swiper.mySwiper {
  padding-top: 4px !important;
  padding-bottom: 20px !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: transparent !important;
}

.mySwiper .swiper-wrapper {
  align-items: stretch !important;
}

.mySwiper .swiper-slide {
  width: 100% !important;
  aspect-ratio: 1920 / 800 !important;
  max-height: 800px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  padding: 0 !important;
}

.mySwiper .swiper-slide::before,
.mySwiper .swiper-slide::after {
  content: none !important;
  display: none !important;
}

.mySwiper .swiper-slide:hover {
  transform: none !important;
  box-shadow: none !important;
}

.mySwiper .swiper-slide img,
.mySwiper .main-slider-img,
#main-slider-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 14px !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mySwiper [class*='border-'] {
  border: none !important;
}

.mySwiper [class*='bg-'] {
  background: transparent !important;
  background-image: none !important;
}

@media (max-width: 767px) {
  .swiper.mySwiper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 12px !important;
  }

  .mySwiper .swiper-slide,
  .mySwiper .swiper-slide img,
  .mySwiper .main-slider-img,
  #main-slider-img {
    border-radius: 12px !important;
  }
}