:root { --gold: #d4af37; --gold-dark: #b0882b; }
.text-gold { color: var(--gold) !important; }
.border-gold { border-color: var(--gold) !important; }
.btn-outline-gold { border:1px solid var(--gold); color:var(--gold); }
.btn-outline-gold:hover { background:var(--gold); color:#4d4a4a; }
.sidebar { position: fixed; top: 0; left: -260px; width: 260px; height: 100%; transition: left .28s ease; z-index: 1200; background:#000; box-shadow: 6px 0 20px rgba(0,0,0,0.6);}
body.sidebar-open .sidebar { left: 0; }
.tab-card { background: rgba(255,255,255,0.04); border:1px solid rgba(212,175,55,0.12); transition:transform .18s;}
.tab-card:hover { transform:translateY(-6px);}
@keyframes beat1 {0%,100%{transform:translateY(0) scaleY(1);}25%{transform:translateY(-3px) scaleY(1.25);}50%{transform:translateY(0) scaleY(0.9);}75%{transform:translateY(2px) scaleY(1.05);}}
@keyframes beat2 {0%,100%{transform:translateY(0) scaleY(1);}20%{transform:translateY(-2px) scaleY(1.1);}50%{transform:translateY(1px) scaleY(0.95);}80%{transform:translateY(-1px) scaleY(1.05);}}
@keyframes beat3 {0%,100%{transform:translateY(0) scaleY(1);}30%{transform:translateY(-4px) scaleY(1.35);}55%{transform:translateY(1px) scaleY(0.88);}85%{transform:translateY(-2px) scaleY(1.08);}}
.x-hamburger { width:36px; height:28px; cursor:pointer; display:inline-block; position:relative;}
@media (max-width:992px){
  .x-hamburger span{display:block;width:100%;height:3px;background:var(--gold);margin-bottom:6px;border-radius:3px;box-shadow:0 0 8px rgba(212,175,55,0.85);transform-origin:center;}
  .x-hamburger span:nth-child(1){animation:beat1 1.1s ease-in-out infinite;}
  .x-hamburger span:nth-child(2){animation:beat2 1.1s ease-in-out 0.12s infinite;}
  .x-hamburger span:nth-child(3){animation:beat3 1.1s ease-in-out 0.24s infinite;}
}
.x-hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg);animation:none;}
.x-hamburger.active span:nth-child(2){opacity:0;animation:none;}
.x-hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);animation:none;}
.mobile-bottom-menu { position:fixed; bottom:0; left:0; width:100%; background:linear-gradient(180deg,#0a0a0a,#000); border-top:2px solid var(--gold); border-bottom:2px solid var(--gold); z-index:1100; padding:12px 0;}
.menu-wrapper{display:flex;justify-content:space-between;align-items:center;position:relative;}
.menu-side{display:flex;width:40%;justify-content:space-around;}
.menu-item{text-align:center;font-size:0.9rem;color:var(--gold);text-decoration:none;font-weight:600;}
.menu-item img{width:52px;height:52px;margin-bottom:4px;}
.menu-center{position:absolute;top:-34px;left:50%;transform:translateX(-50%);}
.menu-center-btn img{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,var(--gold),var(--gold-dark));padding:8px;border:2px solid var(--gold);box-shadow:0 8px 30px rgba(212,175,55,0.35);}
.-inner-wrapper{background:linear-gradient(180deg,#000,#111);color:#ccc;padding:40px 0;border-top:2px solid var(--gold);}
.-tags-wrapper a{text-decoration:none;color:var(--gold);}
body { font-family: 'Kanit', sans-serif; }

/* 🎲 ลูกเต๋าหมุนเฉพาะมือถือ */
@keyframes spin-gold {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@media (max-width:992px){
  .rotate-gold{display:inline-block;animation:spin-gold 4s linear infinite;filter:drop-shadow(0 0 12px rgba(212,175,55,0.6));transition:transform 0.3s ease-in-out;}
  .rotate-gold:hover{animation-play-state:paused;transform:scale(1.1);}
}

/* ✨ โลโก้ทองมีแสงตอน hover */
.logo-glow:hover {filter:drop-shadow(0 0 20px rgba(212,175,55,0.9)) brightness(1.3);transition:filter 0.4s ease-in-out;}
.text-gold { color: #d4af37 !important; }
.btn-outline-gold {
  border: 1px solid #d4af37;
  color: #d4af37;
}
.btn-outline-gold:hover {
  background: #d4af37;
  color: #000;
}

/* Hamburger icon */
.x-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #d4af37;
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.3s;
}

/* Sidebar animation */
.sidebar {
  position: fixed;
  top: 0; left: -250px;
  width: 250px; height: 100%;
  background: #000;
  transition: left 0.3s ease;
  z-index: 9999;
}
.sidebar.active { left: 0; }
/* ข้อความวิ่ง */
.news-ticker {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 5px rgba(212,175,55,0.6);
}
.news-ticker marquee {
  color: var(--gold);
  font-family: "Kanit", sans-serif;
}

/* 🔹 Hamburger */
.x-hamburger {
  cursor: pointer;
  width: 26px;
  height: 22px;
  position: relative;
  z-index: 1101;
}
.x-hamburger span {
  background: #d4af37;
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  transition: all 0.3s ease;
}
.x-hamburger span:nth-child(1) { top: 0; }
.x-hamburger span:nth-child(2) { top: 9px; }
.x-hamburger span:nth-child(3) { top: 18px; }

/* เมื่อเปิดเมนู */
.x-hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}
.x-hamburger.active span:nth-child(2) {
  opacity: 0;
}
.x-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}

/* 🔹 Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: -260px;
  width: 250px;
  height: 100%;
  background: #000;
  transition: left 0.3s ease;
  z-index: 1100;
}
.sidebar.active {
  left: 0;
  box-shadow: 0 0 20px rgba(212,175,55,0.4);
}

/* 🔹 Overlay */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1099;
}
.sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
}
body.no-scroll {
  overflow: hidden;
}
.sidebar-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1099;
}
.sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
}