/* @import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200;300;400;500;600;700&display=swap'); */

/* @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400;500;600;700;800&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap');

/* custom.css (patch) - เน้นแก้ความเข้ากันได้โดยไม่ไปทับธีมเดิม
   Scope เฉพาะใน <main class="uf-theme"> เพื่อไม่กระทบ header/footer
*/

/* ---- Bootstrap 5 utility shims (เฉพาะที่มีใช้ในหน้า) ---- */
.uf-theme .fw-semibold {
  font-weight: 600 !important;
}

/* BS5 padding-start/end -> BS4 fallback */
.uf-theme .ps-3 {
  padding-left: 1rem !important;
}

.uf-theme .pe-3 {
  padding-right: 1rem !important;
}

/* BS5 gap utilities (ใช้กับ d-flex) */
.uf-theme .gap-2 {
  margin-right: -.5rem;
  margin-bottom: -.5rem;
}

.uf-theme .gap-2>* {
  margin-right: .5rem;
  margin-bottom: .5rem;
}

.uf-theme .gap-3 {
  margin-right: -1rem;
  margin-bottom: -1rem;
}

.uf-theme .gap-3>* {
  margin-right: 1rem;
  margin-bottom: 1rem;
}

/* BS5 gutters (g-*) -> กันเลย์เอาต์ไม่อัดแน่นบน BS4 */
.uf-theme .g-3>[class*="col-"] {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .uf-theme .g-md-4>[class*="col-"] {
    margin-bottom: 1.5rem;
  }
}

/* BS5 text-bg-* -> ไม่กำหนดสีใหม่ ให้สืบทอดจากธีมเดิม */
.uf-theme .text-bg-dark,
.uf-theme .text-bg-primary,
.uf-theme .text-bg-success,
.uf-theme .text-bg-warning,
.uf-theme .text-bg-info {
  color: inherit !important;
  background-color: transparent !important;
}

/* ---- Accordion (BS5 markup แต่ใช้ BS4 collapse) ---- */
.uf-theme .accordion {
  border-radius: 0;
}

.uf-theme .accordion .accordion-item {
  border: 0;
}

.uf-theme .accordion .accordion-header {
  margin: 0;
}

.uf-theme .accordion .accordion-button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.uf-theme .accordion .accordion-body {
  padding: 0;
}

/* Divider */
.uf-theme .uf-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin: 24px 0;
}

.text-gold {
  color: #DFC777 !important;
}

/* คลาสสำหรับเส้นขอบสีทอง (เพิ่มใหม่) */
.border-gold {
  border-color: #EAD472 !important;
}

/* เส้นแบ่งคั่นแนวตั้งสำหรับ Timeline เฉพาะหน้าจอขนาดกลางขึ้นไป */
@media (min-width: 768px) {
  .border-right-md {
    border-right: 1px solid #dee2e6;
  }
}

/* บังคับใช้ font sarabun ทั้งเว็บ */
/* body, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, span, div, li, button, input,
.navbar, .btn {
    font-family: 'Sarabun', sans-serif !important;
} */

body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p,
a,
span,
div,
li,
button,
input,
.navbar,
.btn {
  font-family: 'Kanit', sans-serif !important;
}

/* --- เปลี่ยนมาบังคับใช้ font Bai Jamjuree ทั้งเว็บ --- */
/* body, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, span, div, li, button, input,
.navbar, .btn {
    font-family: 'Bai Jamjuree', sans-serif !important;
} */

.transition-hover:hover {
  transform: translateY(-3px);
  transition: transform 0.3s ease;
}


h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-block-end: .9rem !important;
  /* หัวข้อห่างกันนิดหน่อย (8px) */
  line-height: 1 !important;
}

p,
li {
  margin-block-end: 0.4rem !important;
  /* ย่อหน้าห่างกันพอดีๆ (~13px) */
  line-height: 1.4 !important;
  /* เพิ่มความสูงบรรทัดให้อ่านง่าย */
}


/* sign-up เด้ง 3 ครั้งแล้วหยุด */
@keyframes pulse-3-times {
  0% {
    transform: scale(1);
  }

  /* 1 */
  5% {
    transform: scale(1.1);
  }

  10% {
    transform: scale(1);
  }

  /* 2 */
  15% {
    transform: scale(1.1);
  }

  20% {
    transform: scale(1);
  }

  /* 3 */
  25% {
    transform: scale(1.1);
  }

  30% {
    transform: scale(1);
  }

  /* หยุด */
  100% {
    transform: scale(1);
  }
}

.anim-signup-loop {
  animation: pulse-3-times 3s ease-in-out infinite;
}


/* 1. ปรับขนาด Logo บนมือถือไม่ให้ดัน Layout */
@media (max-width: 991.98px) {
  .logo-mobile {
    max-height: 50px;
    /* จำกัดความสูง Logo บนมือถือ */
    width: auto;
    /* ให้ความกว้างปรับตามอัตราส่วน */
  }

  /* ปรับระยะห่าง Header Top ให้พอดี */
  .header-top {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* 2. CSS สำหรับ Slide Menu (เหมือนเดิม) */
@media (max-width: 991.98px) {
  .navbar-collapse {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background-color: #0b0b0b;
    z-index: 1050;
    transition: right 0.3s ease-in-out;
    display: block !important;
    padding: 20px;
    border-left: 1px solid rgba(223, 199, 119, 0.3);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.7);
    overflow-y: auto;
  }

  .navbar-collapse.show {
    right: 0;
  }

  .navbar-collapse.collapsing {
    right: -100%;
    position: fixed;
    height: 100vh !important;
    display: block;
    transition: right 0.3s ease-in-out;
    background-color: #0b0b0b;
    z-index: 1050;
  }

  /* ปรับไอคอน Hamburger ให้เป็นสีทอง */
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(223, 199, 119, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  }
}


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



/* --- Desktop Bottom Navigation Bar Styles --- */

/* --- Mobile Bottom Navigation Bar Styles --- */

/* กำหนดให้แสดงผลและตั้งค่าความสวยงาม */
.bottom-navbar-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  /* ความสูงมาตรฐานสำหรับมือถือ */
  background: linear-gradient(to top, #000000, #1a1a1a);
  /* พื้นหลังสีดำไล่เฉด */
  border-top: 1px solid rgba(223, 199, 119, 0.3);
  /* ขอบทองจางๆ */
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
  z-index: 1040;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  /* รองรับ iPhone จอแหว่ง */
}

/* สไตล์ของปุ่มเมนู */
.bottom-navbar-mobile .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  text-decoration: none;
  font-size: 0.75rem;
  /* ขนาดตัวอักษรเล็กกว่า PC เล็กน้อย */
  width: 20%;
  /* แบ่งพื้นที่เท่าๆ กัน */
}

.bottom-navbar-mobile .nav-item i {
  font-size: 1.2rem;
  color: #DFC777;
  /* ไอคอนสีทอง */
  margin-bottom: 4px;
}

/* Active / Hover State */
.bottom-navbar-mobile .nav-item:hover,
.bottom-navbar-mobile .nav-item:active {
  color: #fff;
}

.bottom-navbar-mobile .nav-item:hover i,
.bottom-navbar-mobile .nav-item:active i {
  text-shadow: 0 0 10px rgba(223, 199, 119, 0.6);
}

/* --- ปุ่ม Play ตรงกลาง (ลอยขึ้นมา) --- */
.bottom-navbar-mobile .nav-item-center {
  position: relative;
  width: 20%;
  display: flex;
  justify-content: center;
}

.bottom-navbar-mobile .play-button {
  position: absolute;
  bottom: 15px;
  /* ดันปุ่มให้ลอยขึ้นเหนือเมนู */
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DFC777 0%, #BFA055 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(223, 199, 119, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.4);
  border: 4px solid #0b0b0b;
  /* ขอบสีเดียวกับพื้นหลังเว็บ */
  animation: pulse-gold 2s infinite;
  /* เพิ่มอนิเมชันให้ปุ่มเต้น */
}

.bottom-navbar-mobile .play-text {
  color: #000;
  font-weight: 800;
  font-size: 1rem;
}

/* อนิเมชันปุ่ม Play เต้นเบาๆ */
@keyframes pulse-gold {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(223, 199, 119, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(223, 199, 119, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(223, 199, 119, 0);
  }
}

/* เพิ่ม Padding ให้ Body เพื่อไม่ให้เนื้อหาถูกบัง */
body {
  padding-bottom: 80px;
  /* เพิ่มระยะด้านล่างเว็บ */
}

/* เพิ่มใน ufanyx/assets/css/custom.css */

body {
  background-color: #050505;
  /* พื้นหลังดำเข้ม */

  background-image:
    /* Layer 1: จุดทองขนาดกลาง (ใกล้ตา - ชัดกว่า) */
    radial-gradient(rgba(223, 199, 119, 0.2) 1.5px, transparent 1.5px),

    /* Layer 2: จุดทองขนาดเล็ก (ไกลตา - จางกว่า) */
    radial-gradient(rgba(223, 199, 119, 0.1) 1px, transparent 1px),

    /* Layer 3: แสง Glow สีทองจางๆ ตรงกลาง (ช่วยให้เว็บไม่มืดตื้อ) */
    radial-gradient(circle at center, rgba(223, 199, 119, 0.08) 0%, transparent 70%);

  /* กำหนดระยะห่างของจุด */
  background-size:
    40px 40px,
    /* ระยะห่าง Layer 1 */
    20px 20px,
    /* ระยะห่าง Layer 2 */
    100% 100%;
  /* ขนาด Glow */

  background-attachment: fixed;
  /* ล็อคพื้นหลังให้อยู่กับที่ (แต่เราจะขยับตำแหน่งด้วย Animation) */

  /* คำสั่ง Animation: ทำให้จุดลอย */
  animation: goldDustMove 40s linear infinite;
}

/* Keyframes สร้างการเคลื่อนไหวแบบ Parallax */
@keyframes goldDustMove {
  0% {
    background-position:
      0px 0px,
      /* Layer 1 เริ่มต้น */
      10px 10px,
      /* Layer 2 เริ่มต้น */
      center center;
    /* Glow อยู่ที่เดิม */
  }

  100% {
    background-position:
      0px 400px,
      /* Layer 1 ขยับลง 400px (เร็ว) */
      10px 210px,
      /* Layer 2 ขยับลง 200px (ช้ากว่า) */
      center center;
    /* Glow อยู่ที่เดิม */
  }
}

/* ซ่อนใน Desktop (กันเหนียว นอกจากใช้ class Bootstrap) */
@media (min-width: 992px) {
  .bottom-navbar-mobile {
    display: none !important;
  }

  body {
    padding-bottom: 0;
    /* เอา padding ออกเมื่อเป็น Desktop */
  }
}


/* Custom Grid System */
.game-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* มือถือ: 2 คอลัมน์ */
  gap: 15px;
  /* ระยะห่างระหว่างรูป */
  padding: 10px;
}

@media (min-width: 768px) {
  .game-grid-container {
    grid-template-columns: repeat(6, 1fr);
    /* แท็บเล็ต: 3 คอลัมน์ */
    gap: 20px;
  }
}

@media (min-width: 992px) {
  .game-grid-container {
    grid-template-columns: repeat(3, 1fr);
    /* คอมพิวเตอร์: 5 คอลัมน์ */
    gap: 25px;
  }
}

/* เอฟเฟกต์การ์ด */
.game-grid-card {
  background: transparent;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;

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

.game-grid-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;

  object-fit: contain;
}

.game-grid-card:hover {
  transform: translateY(-5px);
  /* ลอยขึ้นเมื่อเอาเมาส์ชี้ */
  box-shadow: 0 5px 15px rgba(223, 199, 119, 0.2);
  /* เงาสีทองจางๆ */
}

/* แก้ไข 26-1-2026 */


.page-banner .carousel-inner {
  max-width: 1120px;
  width: 100%;
  height: 331px;
  margin: 0 auto;
}


.page-banner .carousel-item {
  height: 100%;
}


.page-banner .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .page-banner .carousel-inner {
    height: auto;
    /* ปล่อยความสูงอิสระบนมือถือ */
    aspect-ratio: 1120/331;
    /* รักษาสัดส่วนเดิมไว้ */
  }
}

/* ปรับขนาด Logo ใน Navbar สำหรับหน้าจอ Desktop */
@media (min-width: 992px) {
  .navbar-brand img {
    max-height: 90px;
    /* กำหนดความสูงตามที่ต้องการ 75px */
    width: auto;
    /* ให้ความกว้างปรับตามสัดส่วนอัตโนมัติ */
  }
}

html {
  font-size: 18px !important;
}

/* 1. เปลี่ยน Navbar ให้เป็นแถบยาวเต็มจอสีดำ */
header .navbar {
  background-color: #232323 !important;
  /* หรือสีที่คุณต้องการ */
  padding-top: 0;
  padding-bottom: 0;
}

/* 2. ลบพื้นหลังของ Container ตรงกลางออก (เพราะเราเทสีใส่ Navbar เต็มๆ แล้ว) */
header .navbar>.container {
  background-color: transparent !important;
}

/* 3. ลบหางโบว์ซ้าย-ขวาออก */
header .navbar>.container::before,
header .navbar>.container::after {
  display: none !important;
}

.footer-frame {
  border: 2px solid #DFC777;
  /* เส้นขอบสีทอง */
  border-radius: 15px;
  padding: 25px;
  background-color: rgba(223, 199, 119, 0.05);
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991.98px) {

  /* สั่งลบ Border และ Padding ด้านซ้าย ของหัวข้อ h5 ใน Footer */
  footer h5.border-left {
    border-left: none !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 991.98px) {

  /* ปรับขนาดตัวอักษรพื้นฐานใน Footer ให้ใหญ่ขึ้น */
  footer p,
  footer a,
  footer span,
  footer li,
  footer small,
  footer div {
    /* ปกติเราตั้งไว้ 14px (จาก html) + 4px = 18px */
    font-size: 18px !important;
  }

  /* สำหรับหัวข้อ (h1-h6) ให้บวกเพิ่มจากขนาดเดิมของมันไปอีก 4px */
  footer h1,
  footer h2,
  footer h3,
  footer h4,
  footer h5,
  footer h6 {
    font-size: calc(100% + 4px) !important;
  }

  /* แก้ไขไอคอนให้ใหญ่ขึ้นด้วยเพื่อให้สมดุลกับตัวหนังสือ */
  footer i {
    font-size: 18px !important;
  }
}

/* เพิ่มลงใน ufanyx/assets/css/custom.css */

/* --- CSS สำหรับส่วนกิจกรรม (Activity Marquee) --- */

.activity-marquee-container {
  overflow: hidden;
  /* ซ่อนส่วนที่เกินขอบ */
  position: relative;
  width: 100%;
  padding: 10px 0;
  /* เว้นระยะบนล่างนิดหน่อย */
}

.activity-marquee-track {
  display: flex;
  width: max-content;
  /* ให้ความกว้างยืดตามจำนวนรูป */
  gap: 20px;
  /* ระยะห่างระหว่างรูป */

  /* --- แก้ไขจุดที่ 1: เปลี่ยนชื่อ Animation เป็น scrollRightToLeft --- */
  animation: scrollRightToLeft 30s linear infinite;
}

.activity-item {
  flex: 0 0 auto;
  /* ไม่ให้รูปย่อขยายเอง */
  width: 330px;
  /* กำหนดความกว้าง */
  aspect-ratio: 1 / 1;
  /* บังคับสัดส่วน 1:1 */
  border-radius: 15px;
  /* มุมโค้ง */
  overflow: hidden;
  background-color: #000;
  border: 2px solid #DFC777;
  /* เปลี่ยนขอบเป็นสีทอง (รหัสเดียวกับธีมเว็บ) */
  box-shadow: 0 0 15px rgba(223, 199, 119, 0.4);
  /* เพิ่มเงาฟุ้งสีทอง */

  transition: all 0.3s ease;
  /* เพิ่ม Transition ให้ขยับนุ่มๆ เวลาเมาส์ชี้ */
}

.activity-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- แก้ไขจุดที่ 2: เปลี่ยน Logic Keyframes สำหรับ ขวา -> ซ้าย --- */
@keyframes scrollRightToLeft {
  0% {
    transform: translateX(0%);
    /* เริ่มต้นที่ตำแหน่งปกติ (แสดงชุดแรก) */
  }

  100% {
    transform: translateX(-50%);
    /* เลื่อนไปทางซ้ายครึ่งหนึ่ง (จนจบชุดแรก/เริ่มชุดสอง) */
  }
}

/* --- เพิ่มใหม่: Keyframes สำหรับ ซ้าย -> ขวา --- */
@keyframes scrollLeftToRight {
  0% {
    transform: translateX(-50%);
    /* เริ่มต้นที่ -50% (ชุดที่ 2) */
  }

  100% {
    transform: translateX(0%);
    /* เลื่อนไปทางขวาจนถึง 0% (ชุดที่ 1) */
  }
}

/* --- Game Marquee Styles --- */
.game-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 20px;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.game-marquee-track {
  display: flex;
  width: max-content;
  gap: 20px;
}

.scroll-right-to-left {
  animation: scrollRightToLeft 40s linear infinite;
}

.scroll-left-to-right {
  animation: scrollLeftToRight 40s linear infinite;
}

.game-marquee-card {
  flex: 0 0 auto;
  width: 180px;
  height: 120px;
  /* Fix height */
  /* ปรับขนาดตามต้องการ */
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  /* พื้นหลังจางๆ */
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
}

.game-marquee-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  /* filter: grayscale(100%);  Removed to keep original colors */
  transition: transform 0.3s ease;
}

.game-marquee-card:hover img {
  transform: scale(1.1);
  /* Optional: add slight zoom on hover instead */
}

@media (min-width: 768px) {
  .game-marquee-card {
    width: 220px;
  }
}

/* ปรับขนาดบนมือถือ */
@media (max-width: 768px) {
  .activity-item {
    width: 180px;
  }
}

/* --- Blog Section Styles (Responsive 1 Col Layout) --- */

.blog-card {
  background-color: rgba(255, 255, 255, 0.05);
  /* พื้นหลังโปร่งแสง */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  border-color: #DFC777;
  /* เปลี่ยนขอบเป็นสีทองเมื่อเอาเมาส์ชี้ */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* เงาฟุ้งๆ */
}

/* ส่วนรูปภาพ */
.blog-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  /* ความสูงรูปบน PC */
  overflow: hidden;
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* บังคับรูปให้เต็มกรอบเสมอ */
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-thumb img {
  transform: scale(1.1);
  /* ซูมภาพเข้าเล็กน้อย */
}

/* ป้ายหมวดหมู่ */
.blog-cat {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ส่วนเนื้อหา */
.blog-body {
  padding: 25px;
}

.blog-title a {
  text-decoration: none;
  transition: color 0.3s;
  /* ตัดคำหากยาวเกิน 2 บรรทัด */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-title a:hover {
  color: #DFC777 !important;
}

.blog-excerpt {
  line-height: 1.6;
  font-size: 0.95rem;
  /* ตัดคำหากยาวเกิน 3 บรรทัด */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ปุ่ม Outline สีทอง */
.btn-outline-gold {
  color: #DFC777;
  border: 1px solid #DFC777;
  background: transparent;
  transition: all 0.3s;
}

.btn-outline-gold:hover {
  background: #DFC777;
  color: #000;
}

/* --- Responsive (ปรับขนาดตามหน้าจอ) --- */

/* สำหรับมือถือ (หน้าจอเล็กกว่า 768px) */
@media (max-width: 767.98px) {
  .blog-thumb {
    min-height: 200px;
    /* ลดความสูงรูปลง */
    height: 200px;
  }

  .blog-body {
    padding: 20px;
    /* ลด Padding */
  }

  .blog-title {
    font-size: 1.2rem;
    /* ปรับขนาดฟอนต์หัวข้อ */
  }

  /* ระบบ Grid ของ Bootstrap จะจัดการให้คอลัมน์เรียงเป็นแนวตั้งเองโดยอัตโนมัติ */
}


/* --- Full Width Page Banner Styles (Responsive Fix) --- */

.page-banner-fullwidth {
  width: 100%;
  position: relative;
  display: block;

  /* ลบการกำหนดความสูงตายตัวออก (เพื่อให้สูงตามรูปจริง) */
  height: auto !important;
  min-height: auto !important;

  /* ลบพื้นหลังออก (เพราะเราใช้ <img> แทนแล้ว) */
  background: none !important;

  margin-bottom: 3rem;
  border-bottom: 2px solid #DFC777;
  /* คงเส้นขอบทองไว้ */
  line-height: 0;
  /* แก้บั๊กขอบขาวใต้รูปภาพ */
}

/* ปรับแต่งตัวรูปภาพ */
.page-banner-fullwidth img {
  width: 100%;
  /* บังคับกว้างเต็มจอ */
  height: auto;
  /* สูงตามสัดส่วนจริง (ไม่เบี้ยว ไม่โดนตัด) */
  object-fit: contain;
  /* มั่นใจว่ารูปจะโชว์ครบแน่นอน */
  display: block;
}

/* (ลบ Media Query เดิมที่กำหนด height 250px ออกได้เลยครับ เพราะรูปจะย่อเองตามสัดส่วน) */


/* --- Feature Card Styles --- */

.feature-section {
  background-color: transparent;
  /* หรือใส่สีพื้นหลังตามต้องการ */
}

.feature-card {
  background: linear-gradient(160deg, #1a1a1a 0%, #000000 100%);
  /* พื้นหลังดำไล่เฉด */
  border: 1px solid rgba(223, 199, 119, 0.3);
  /* เส้นขอบทองจางๆ */
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  /* เงานุ่ม */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Effect เมื่อเอาเมาส์ชี้ (Hover) */
.feature-card:hover {
  transform: translateY(-10px);
  /* ลอยขึ้น */
  border-color: #DFC777;
  /* ขอบทองเข้มขึ้น */
  box-shadow: 0 0 25px rgba(223, 199, 119, 0.2), inset 0 0 10px rgba(223, 199, 119, 0.05);
  /* เรืองแสง */
}

/* ส่วนไอคอน */
.card-icon-wrapper {
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.card-icon-wrapper img {
  width: 80px;
  /* ขนาดไอคอน */
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(223, 199, 119, 0.6));
  /* ไอคอนเรืองแสงสีทอง */
  transition: transform 0.3s ease;
}

.feature-card:hover .card-icon-wrapper img {
  transform: scale(1.1) rotate(5deg);
  /* ขยับไอคอนเล็กน้อยเมื่อ hover */
}

/* ส่วนเนื้อหา */
.card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

/* หัวข้อหลัก */
.card-title {
  color: #DFC777;
  /* สีทอง */
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* รายละเอียด */
.card-desc {
  color: #cccccc;
  /* สีเทาอ่อน */
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
  font-weight: 300;
}

/* หมวดหมู่ด้านล่าง */
.card-category {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 5px 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
  /* ดันลงล่างสุดเสมอ */
}

/* --- Banner Item Styles --- */
.banner-item {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(223, 199, 119, 0.2);
  transition: all 0.3s ease;
}

.banner-item img {
  transition: transform 0.5s ease;
  display: block;
}

.banner-item:hover {
  border-color: #DFC777;
  box-shadow: 0 5px 15px rgba(223, 199, 119, 0.3);
  transform: translateY(-5px);
}

.banner-item:hover img {
  transform: scale(1.01);
}


/* --- Sport Provider Card Styles (หน้าเดิมพันกีฬา) --- */
.sport-provider-card {
  transition: all 0.3s ease;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  position: relative;
  background-color: transparent;
  text-decoration: none !important;
  /* ป้องกันเส้นขีดใต้เวลาเป็นลิงก์ */
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้ (Hover) */
.sport-provider-card:hover {
  transform: translateY(-7px);
  border-color: #DFC777;
  box-shadow: 0 10px 20px rgba(223, 199, 119, 0.3);
  cursor: pointer;
  z-index: 2;
}

/* ทำให้รูปภาพขยายเมื่อ Hover (แบบใหญ่พิเศษ 1.2 เท่า) */
.sport-provider-card img {
  transition: transform 0.5s ease;
}

.sport-provider-card:hover img {
  transform: scale(1.1);
  /* ขยายใหญ่ขึ้นชัดเจน */
}


/* --- Banner Item Card Styles --- */
.banner-item-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-decoration: none !important;
  /* ป้องกันเส้นใต้ */
}

.banner-item-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Hover Effects */
.banner-item-card:hover {
  transform: translateY(-5px);
  border-color: #DFC777;
  box-shadow: 0 15px 30px rgba(223, 199, 119, 0.15);
  /* เงาทองฟุ้งๆ */
  z-index: 2;
}

.banner-item-card:hover img {
  transform: scale(1.03);
  /* ขยายภาพเล็กน้อยให้ดูมีมิติ */
}



/* --- Fixed Navbar Styles --- */

/* Class ที่จะถูกเติมเมื่อเลื่อนลงมา */
.navbar-fixed {
  position: fixed !important;
  /* บังคับให้ติดขอบจอ */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1040;
  /* อยู่ชั้นบนสุด */

  background-color: #0b0b0b;
  /* พื้นหลังดำ */
  border-bottom: 1px solid #DFC777;
  /* เส้นขอบทอง */
  box-shadow: 0 4px 15px rgba(223, 199, 119, 0.3);
  /* เงาสีทองฟุ้งๆ */

  animation: slideDown 0.3s ease-out;
  /* เลื่อนลงมานิ่มๆ */
}

/* Animation ให้เมนูลอยลงมา */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}


/* --- Mobile Sticky Header --- */
@media (max-width: 991.98px) {

  /* บนมือถือ: สั่งให้ Header ทั้งก้อนติดขอบบนทันที */
  #main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1040;
    background-color: #0b0b0b;
    border-bottom: 1px solid #DFC777;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  }

  /* ซ่อนแถบ Navbar (ตัวเมนูยาวๆ) ไม่ให้โผล่มาซ้อน เพราะเราใช้ Hamburger Menu */
  #main-header .navbar {
    background: transparent !important;
    /* หรือสีเดียวกับ Header */
    box-shadow: none !important;
    border: none !important;
  }
}

/* --- Footer Logo Slider Styles (Auto-Scale Version) --- */

.footer-slider-wrapper {
  width: 100%;
  height: 60px;
  /* <--- กำหนดความสูงที่ต้องการตรงนี้ (รูปจะขยายตามค่านี้) */
  background: #0b0b0b;
  overflow: hidden;

  /* เส้นขอบและเงา */
  border-top: 1px solid rgba(223, 199, 119, 0.5);
  border-bottom: 1px solid rgba(223, 199, 119, 0.5);
  box-shadow: 0 0 10px rgba(223, 199, 119, 0.2);

  display: flex;
  align-items: center;
}

.footer-slider-track {
  display: flex;
  width: max-content;
  /* ให้ความกว้างยืดตามไส้ใน */

  /* Animation เลื่อนซ้าย */
  animation: smoothMarquee 20s linear infinite;
  will-change: transform;
}

.footer-slider-track img {
  height: 100%;
  /* <--- แก้เป็น 100% เพื่อให้สูงเต็มกรอบ wrapper เสมอ */
  width: auto;
  /* <--- แก้เป็น auto เพื่อให้สัดส่วนยืด-หดตามความสูง */
  max-width: none;
  /* ป้องกันรูปถูกบีบ */
  flex-shrink: 0;
  display: block;
}

/* Keyframes แบบใช้ % (รองรับทุกขนาดรูป) */
@keyframes smoothMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    /* เลื่อนไป -25% (เพราะเรามีรูปซ้ำ 4 รูป การเลื่อน 25% คือเลื่อนไป 1 รูปพอดีเป๊ะ) */
    transform: translateX(-25%);
  }
}


/* --- Game List Styling (หน้า Casino) --- */

/* กำหนดขนาดรูปไอคอนเกม */
.game-icon-badge {
  width: 60px;
  height: 60px;
  object-fit: cover;
  /* บังคับให้รูปเต็มกรอบโดยไม่เบี้ยว */
  border: 1px solid rgba(223, 199, 119, 0.3);
  /* ขอบทองจางๆ */
  background-color: #000;
}

/* เอฟเฟกต์การ์ดเมื่อเอาเมาส์ชี้ */
.hover-card {
  transition: all 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-5px);
  border-color: #DFC777 !important;
  /* เปลี่ยนขอบการ์ดเป็นสีทอง */
  box-shadow: 0 5px 15px rgba(223, 199, 119, 0.15) !important;
  /* เงาทองฟุ้งๆ */
}

/* เอฟเฟกต์รูปภาพเมื่อเอาเมาส์ชี้การ์ด */
.hover-card:hover .game-icon-badge {
  border-color: #DFC777;
  transform: scale(1.1);
  /* ขยายรูปนิดนึง */
  transition: transform 0.3s ease;
}

/* --- Footer Link Animation --- */
.footer-link {
  transition: all 0.3s ease;
  display: block;
}

.footer-link:hover {
  color: #ffffff !important;
  transform: translateX(10px);
  text-decoration: none;
}

/* --- SBOBET Banner Grid Cards --- */
.banner-sbobet-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(223, 199, 119, 0.2);
  transition: all 0.3s ease;
}

.banner-sbobet-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.banner-sbobet-card:hover {
  border-color: #DFC777;
  box-shadow: 0 5px 20px rgba(223, 199, 119, 0.3);
}

.banner-sbobet-card:hover img {
  transform: scale(1.05);
}

.banner-sbobet-label {
  text-align: center;
  padding: 8px 6px 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #DFC777;
  letter-spacing: 0.05em;
  background-color: rgba(0, 0, 0, 0.5);
}

/* ===== Animated Casino Banner ===== */
.live-banner-section {
  background: transparent;
}

.live-banner-section .row {
  justify-content: center;
}

/* Hot badge — top-right corner */
.lb-hot-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: auto;
  z-index: 10;
  pointer-events: none;
}

.live-banner-wrapper {
  display: block;
  text-decoration: none;
  position: relative;
  width: 100%;
  /* height driven by model image aspect ratio */
  aspect-ratio: 1 / 1.15;
  overflow: visible;
  cursor: pointer;
  user-select: none;
}

/* Shared layer base */
.lb-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  pointer-events: none;
}

/* --- Layer 1: Rainbow (back-most) --- */
.lb-rainbow {
  width: 100%;
  z-index: 1;
  animation: lb-spin-cw 8s linear infinite;
  animation-play-state: paused;
  transform-origin: center center;
  /* override base transform for rotation anchor */
  top: 0;
  left: 0;
  transform: none;
}

/* --- Layer 2: Round BG --- */
.lb-round {
  width: 85%;
  z-index: 2;
  animation: lb-spin-ccw 6s linear infinite;
  animation-play-state: paused;
  transform-origin: center center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- Layer 3: Rings (particles) --- */
.lb-ring {
  z-index: 3;
  animation: lb-float 3s ease-in-out infinite;
  animation-play-state: paused;
}

.lb-ring-1 {
  width: 18%;
  top: 20%;
  left: 15%;
  animation-delay: 0s;
  animation-duration: 2.8s;
}

.lb-ring-2 {
  width: 12%;
  top: 55%;
  left: 80%;
  animation-delay: 0.6s;
  animation-duration: 3.2s;
}

.lb-ring-3 {
  width: 10%;
  top: 30%;
  left: 75%;
  animation-delay: 1.2s;
  animation-duration: 2.5s;
}

/* --- Layer 4: Model --- */
.lb-model {
  width: 80%;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.35s ease;
}

.live-banner-wrapper:hover .lb-model {
  transform: translate(-50%, -50%) scale(1.1);
}

/* --- Layer 5: Logo (bottom centre) --- */
.lb-logo {
  width: 70%;
  z-index: 99;
  top: auto;
  bottom: 8%;
  /* raised higher than before */
  left: 50%;
  transform: translateX(-50%) translateY(0);
  transition: transform 0.35s ease;
}

.live-banner-wrapper:hover .lb-logo {
  transform: translateX(-50%) translateY(10px);
  /* slides down on hover */
}

/* ---- Keyframes ---- */
@keyframes lb-spin-cw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes lb-spin-ccw {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes lb-float {

  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-14px);
  }
}

/* ---- Activate on hover ---- */
.live-banner-wrapper:hover .lb-rainbow {
  animation-play-state: running;
}

.live-banner-wrapper:hover .lb-round {
  animation-play-state: running;
}

.live-banner-wrapper:hover .lb-ring {
  animation-play-state: running;
}

/* --- Vignette Overlay (color-per-card via CSS vars) ---
   Override on each .live-banner-wrapper:
     style="--lb-r:240; --lb-g:186; --lb-b:38;"
   Defaults to gold (240,186,38) */
.lb-orange-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: 10px;
  background: linear-gradient(to top,
      rgba(var(--lb-r, 240), var(--lb-g, 186), var(--lb-b, 38), 0.96) 0%,
      rgba(var(--lb-r, 240), var(--lb-g, 186), var(--lb-b, 38), 0.80) 15%,
      rgba(var(--lb-r, 240), var(--lb-g, 186), var(--lb-b, 38), 0.45) 40%,
      rgba(var(--lb-r, 240), var(--lb-g, 186), var(--lb-b, 38), 0.12) 68%,
      transparent 80%);
  opacity: 1;
  transition: opacity 0.4s ease;
}

.live-banner-wrapper:hover .lb-orange-overlay {
  opacity: 0.3;
}

/* ===== Game Banner Carousel ===== */
.game-banner-carousel-section {
  background: transparent;
}

.gbc-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Clip window — shows exactly 4 cards */
.gbc-track-outer {
  flex: 1;
  overflow: hidden;
}

.gbc-track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}

/* Each card = 25% wide of the outer */
.gbc-card {
  flex: 0 0 25%;
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 10px;
  padding: 0 6px;
  box-sizing: border-box;
}

.gbc-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.35s ease;
}

.gbc-card:hover img {
  transform: scale(1.04);
}

/* Label — shown by default, anchored to bottom with fade-up shadow */
.gbc-label {
  position: absolute;
  bottom: 0;
  left: 6px;
  right: 6px;
  text-align: left;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  padding: 60px 16px 30px;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.55) 30%,
      rgba(0, 0, 0, 0.25) 60%,
      rgba(0, 0, 0, 0.06) 85%,
      transparent 100%);
  border-radius: 0 0 8px 8px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* Play button — hidden by default */
.gbc-play {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  white-space: nowrap;
  background: linear-gradient(135deg, #f5d060 0%, #d4a017 60%, #a07010 100%);
  color: #1a0a00;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  box-shadow: 0 3px 14px rgba(200, 140, 0, 0.55);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* Hover: hide label, show play button */
.gbc-card:hover .gbc-label {
  opacity: 0;
  transform: translateY(6px);
}

.gbc-card:hover .gbc-play {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Nav buttons */
.gbc-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #f5d060, #a07010);
  color: #1a0a00;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(200, 140, 0, 0.4);
}

.gbc-btn:hover {
  box-shadow: 0 4px 14px rgba(200, 140, 0, 0.65);
}

.gbc-btn:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

/* Responsive: 2 cards on tablet */
@media (max-width: 768px) {
  .gbc-card {
    flex: 0 0 50%;
  }
}

/* Responsive: 1 card on small mobile */
@media (max-width: 480px) {
  .gbc-card {
    flex: 0 0 100%;
  }
}

/* ===== Floating Phone Effect ===== */
.floating-phone {
  animation: phone-float 3s ease-in-out infinite;
}

@keyframes phone-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

/* ===== Banner Item Hover Effect ===== */
.banner-item {
  overflow: hidden;
  border-radius: 8px;
}

.banner-item img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.banner-item:hover img {
  transform: scale(1.03);
  filter: brightness(1.1);
}

/* ===== Typography Utilities ===== */
.lh-18 {
  line-height: 1.8 !important;
}

/* ===== Contact Box Link (contact.html) ===== */
.contact-box-link {
  text-decoration: none !important;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  display: block;
  background-color: rgba(255, 255, 255, 0.03);
}

.contact-box-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}