* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;   /* รวมขอบและระยะห่างภายในในขนาดองค์ประกอบ */
}

body {
    background: url('../images/01.jpg') no-repeat center center fixed;
    color: #ffffff; /* สีตัวอักษรเริ่มต้น */

    background-size: cover; /* ปรับขนาดพื้นหลังให้เต็ม */
    background-attachment: fixed; /* ยึดพื้นหลังไม่ให้เลื่อน */
}

nav {
    display: flex;  /* ใช้ Flexbox สำหรับการจัดวาง */
    justify-content: space-between; /* จัดช่องว่างระหว่างไอเท็ม */
    align-items: center;  /* จัดกึ่งกลางในแนวตั้ง */
    position: fixed;  /* ตำแหน่งคงที่ */
    top: 0;   /* ตำแหน่งด้านบน */
    width: 100%;  /* ความกว้างเต็มหน้าจอ */
    height: 70px;  /* ความสูงของแถบนำทาง */
    padding: 10px 10px;  /* ระยะห่างภายใน */
    z-index: 1000;
    background: rgba(5, 5, 5, 0.546); /* พื้นหลังโปร่งใสสีดำ */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.314); /* เงาของแถบนำทาง */
}

nav img {
    height: 40px; /* ความสูงของโลโก้ */
    margin: 10px 0px; /* ระยะห่างรอบๆ โลโก้ */
    padding: 5px; /* ระยะห่างภายในโลโก้ */
    border-radius: 10px; /* มุมโค้งของโลโก้ */
    border: 2px solid #00bfff; /* สีรอบขอบโลโก้ */
    transition: transform 0.3s ease; /* เอฟเฟกต์เมื่อชี้ */
    animation: alternateGlow 2s infinite alternate; /* แอนิเมชันเรืองแสง */
}

nav img:hover {
    transform: scale(1.1); /* ขยายขนาดเมื่อชี้ */
}
@keyframes alternateGlow {
    0% {
        box-shadow: 0 0 10px #ff0000, 0 0 20px #00bfff, 0 0 30px #fbff00;
    }
    100% {
        box-shadow: 0 0 20px #4000ff, 0 0 30px #ff00ee, 0 0 40px #00ff1e;
    }
}

.สไลด์โชว์ภาพ {
  margin: 0 auto; /* กึ่งกลางในแนวนอน */
  margin-top: 100px; /* ระยะห่างด้านบน */
  width: 100%; /* ความกว้างเต็มหน้าจอ */
  max-width: 450px; /* ความกว้างสูงสุด */
  height: 200px; /* ความสูงของสไลด์โชว์ */
  border-radius: 15px; /* มุมโค้งของสไลด์โชว์ */
  position: relative; /* ตำแหน่งสัมพัทธ์ */
  z-index: 1; /* ระดับซ้อน */
  overflow: hidden; /* ซ่อนส่วนที่เกิน */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* เงาของสไลด์โชว์ */
  border: 2px solid #00bfff; /* สีรอบขอบสไลด์โชว์ */
}

#สไลด์โชว์ภาพ img {
  width: 100%; /* ความกว้างเต็มพื้นที่ */
  height: 100%; /* ความสูงเต็มพื้นที่ */
  top: 0; /* ตำแหน่งด้านบน */
  left: 0; /* ตำแหน่งด้านซ้าย */
  position: absolute; /* ตำแหน่งแบบสัมบูรณ์ */
  transform: translateX(100%);
  animation: slide-animation 5s ease-in-out infinite;
}

  /* keyframes สำหรับเอฟเฟกต์เลื่อน */
@keyframes slide-animation {
  0% { opacity: 0; transform: translateX(100%); }
  15% { opacity: 1; transform: translateX(0); }
  85% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-100%); }
}

.สมัครสมาชิก {
  display: flex; /* ใช้ Flexbox สำหรับการจัดวาง */
  justify-content: center; /* จัดกึ่งกลางในแนวนอน */
  align-items: center; /* จัดกึ่งกลางในแนวตั้ง */
  height: 100vh; /* ความสูงเต็มหน้าจอ */
  background: transparent; /* พื้นหลังโปร่งใส */
  height: 100px; /* ความสูงของพื้นที่ปุ่ม */
  margin-bottom: 1px; /* ระยะห่างด้านล่าง */
  padding: 0 40px; /* ระยะห่างภายใน */
  text-align: center; /* จัดกึ่งกลางข้อความ */
}

#สมัครสมาชิก {
  width: 300px; /* ความกว้างของพื้นที่ปุ่ม */
  height: 50px; /* ความสูงของพื้นที่ปุ่ม */
  position: relative; /* ตำแหน่งสัมพัทธ์สำหรับการจัดวางเอฟเฟกต์ */
  padding: 0 48px; /* ระยะห่างภายในปุ่ม */
  font-size: 1.0rem; /* ขนาดตัวอักษร */
  color: #fff; /* สีตัวอักษร */
  background: #001f6f; /* สีพื้นหลังปุ่ม */
  border: none; /* ไม่มีขอบ */
  cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
  border-radius: 15px; /* มุมโค้งของปุ่ม */
  overflow: hidden; /* ซ่อนส่วนที่เกิน */
  z-index: 0; /* ระดับซ้อน */
  letter-spacing: 1px; /* ระยะห่างระหว่างตัวอักษร */
  transition: color 0.3s ease; /* การเปลี่ยนแปลงสีตัวอักษรเมื่อชี้ */
  box-shadow: 0 4px 15px rgba(0, 16, 111, 0.4); /* เงาของปุ่ม */
  border: 2px solid #00bbff; /* สีรอบขอบปุ่ม */
}

/* สร้างเอฟเฟกต์ไฟวิ่ง */
#สมัครสมาชิก::before {
  content: ""; /* สร้างเนื้อหาว่าง */
  position: absolute; /* ตำแหน่งแบบสัมบูรณ์ */
  top: -2px; /* ตำแหน่งด้านบน */
  left: -2px; /* ตำแหน่งด้านซ้าย */
  right: -2px; /* ตำแหน่งด้านขวา */
  bottom: -2px; /* ตำแหน่งด้านล่าง */
  border-radius: 10px; /* มุมโค้งของเอฟเฟกต์ */
  background: conic-gradient(
    /* กำหนดสีแบบกราเดียนต์วงกลม */ from 0deg,
    #ff00cc,
    #3333ff,
    #00ffcc,
    #ffcc00,
    #ff0066,
    #ff00cc
  );
  z-index: -1;
  animation: spin 3s linear infinite; /* แอนิเมชันหมุน */
}

/* ชั้นมืดทับด้านใน เพื่อให้วงไฟอยู่รอบๆ */
#สมัครสมาชิก::after {
  content: ""; /* สร้างเนื้อหาว่าง */
  position: absolute; /* ตำแหน่งแบบสัมบูรณ์ */
  top: 3px; /* ตำแหน่งด้านบน */
  left: 3px; /* ตำแหน่งด้านซ้าย */
  right: 3px; /* ตำแหน่งด้านขวา */
  bottom: 3px; /* ตำแหน่งด้านล่าง */
  background: #00106a; /* สีพื้นหลังชั้นมืด */
  border-radius: 10px; /* มุมโค้งของชั้นมืด */
  z-index: -1; /* ระดับซ้อน */
}

/* แอนิเมชันหมุน */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้ */
#สมัครสมาชิก:hover {
  color: #00bbff; /* เปลี่ยนสีตัวอักษร */
  text-shadow: 0 0 8px #00bbff; /* เงาของตัวอักษร */
}
#สมัครสมาชิก:active {
  transform: scale(0.96); /* ย่อขนาดปุ่มเมื่อคลิก */
}

.แอดไลน์ {
  display: flex; /* ใช้ Flexbox สำหรับการจัดวาง */
  justify-content: center; /* จัดกึ่งกลางในแนวนอน */
  align-items: center; /* จัดกึ่งกลางในแนวตั้ง */
  height: 20px; /* ความสูงเต็มหน้าจอ */
}

#แอดไลน์ {
  width: 300px; /* ความกว้างของปุ่ม */
  height: 50px; /* ความสูงของปุ่ม */
  margin-top: 10px; /* ระยะห่างด้านบน */
  position: relative; /* ตำแหน่งสัมพัทธ์สำหรับการจัดวางเอฟเฟกต์ */
  font-size: 1.0rem; /* ขนาดตัวอักษร */
  font-weight: 100; /* ความหนาตัวอักษร */
  color: #fff; /* สีตัวอักษร */
  background: linear-gradient(
    135deg,
    #046104,
    #0eba67
  ); /* สีพื้นหลังแบบกราเดียนต์ */
  border: none; /* ไม่มีขอบ */
  border-radius: 15px; /* มุมโค้งของปุ่ม */
  cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
  overflow: hidden; /* ซ่อนส่วนที่เกิน */
  letter-spacing: 1px; /* ระยะห่างระหว่างตัวอักษร */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* การเปลี่ยนแปลงเมื่อชี้ */
  box-shadow: 0 4px 15px rgba(8, 67, 8, 0.4); /* เงาของปุ่ม */
  border: 2px solid #00ff99; /* สีรอบขอบปุ่ม */
}

/* แสงวิ้งที่วิ่งข้ามปุ่ม */
#แอดไลน์::before {
  content: ""; /* สร้างเนื้อหาว่าง */
  position: absolute; /* ตำแหน่งแบบสัมบูรณ์ */
  top: 0; /* ตำแหน่งด้านบน */
  left: -75%; /* ตำแหน่งด้านซ้าย */
  width: 50%; /* ความกว้างของแสงวิ้ง */
  height: 100%; /* ความสูงเต็มปุ่ม */
  background: linear-gradient(
    /* กำหนดสีแบบกราเดียนต์เชิงเส้น */ 120deg,
    rgba(255, 255, 255, 0) 0%,
    /* สีโปร่งใสที่จุดเริ่มต้น */ rgba(239, 235, 235, 0.5) 50%,
    /* สีขาวกึ่งโปร่งใสที่กลาง */ rgba(255, 255, 255, 0) 100%
      /* สีโปร่งใสที่จุดสิ้นสุด */
  );
  transform: skewX(-20deg); /* เอียงแสงวิ้ง */
  animation: shine 2.5s infinite; /* แอนิเมชันวิ้ง */
}

/* แอนิเมชันวิ้ง */
@keyframes shine {
  0% {
    left: -75%;
  }
  50% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}

/* เอฟเฟกต์ hover */
#แอดไลน์:hover {
  transform: translateY(-3px); /* ยกปุ่มขึ้นเล็กน้อย */
  box-shadow: 0 6px 25px rgba(0, 255, 100, 0.6); /* เพิ่มเงาของปุ่ม */
}

#แอดไลน์:active {
  transform: scale(0.96); /* ย่อขนาดปุ่มเมื่อคลิก */
}

.จำนวนสมาชิก {
  margin: 50px auto; /* ระยะห่างด้านบนและกึ่งกลางในแนวนอน */
  width: 350px; /* ความกว้างของพื้นที่ */
  height: 100px; /* ความสูงของพื้นที่ */
  margin-top: 40px; /* ระยะห่างด้านบน */
  background-color: rgba(9, 9, 9, 0.764); /* พื้นหลังโปร่งใสสีดำ */
  border-radius: 15px; /* มุมโค้งของพื้นที่ */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* เงาของพื้นที่ */
  margin-bottom: 20px; /* ระยะห่างด้านล่าง */
  border: 2px solid #00bfff; /* สีรอบขอบพื้นที่ */
}
.จำนวนสมาชิก h3 {
  padding: 10px 20px; /* ระยะห่างภายใน */
  font-size: 1.5rem; /* ขนาดตัวอักษร */
  color: #00ff99; /* สีตัวอักษร */
  text-shadow: 0 0 8px #00ff99; /* เงาของตัวอักษร */
  text-align: center; /* จัดกึ่งกลางข้อความ */
}

#จำนวนสมาชิก {
  padding: 0 20px; /* ระยะห่างภายใน */
  font-size: 1.2rem; /* ขนาดตัวอักษร */
  color: #ffffff; /* สีตัวอักษร */
  text-align: center; /* จัดกึ่งกลางข้อความ */
  text-shadow: 0 0 8px #ffffff; /* เงาของตัวอักษร */
  position: relative; /* ตำแหน่งสัมพัทธ์ */
}
.รายการถอนเงิน {
  margin: 100px auto; /* ระยะห่างด้านบนและกึ่งกลางในแนวนอน */
  width: 350px; /* ความกว้างของพื้นที่ */
  height: 250px; /* ความสูงของพื้นที่ */
  margin-top: 10px; /* ระยะห่างด้านบน */
  background-color: rgba(0, 0, 0, 0.764); /* พื้นหลังโปร่งใสสีดำ */
  border-radius: 15px; /* มุมโค้งของพื้นที่ */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* เงาของพื้นที่ */
  margin-bottom: 20px; /* ระยะห่างด้านล่าง */
  border: 2px solid #ffe100; /* สีรอบขอบพื้นที่ */
}
.รายการถอนเงิน h3 {
  padding: 10px 20px; /* ระยะห่างภายใน */
  font-size: 1.5rem; /* ขนาดตัวอักษร */
  color: #00ff99; /* สีตัวอักษร */
  text-shadow: 0 0 8px #00ff99; /* เงาของตัวอักษร */
  text-align: center; /* จัดกึ่งกลางข้อความ */
}
#รายการถอนเงิน {
  padding: 5px 35px; /* ระยะห่างภายใน */
  font-size: 1.0rem; /* ขนาดตัวอักษร */
  color: #ffffff; /* สีตัวอักษร */
  text-align: left; /* จัดชิดซ้ายข้อความ */
}

.รายการถอนเงิน-รายการ {
  border-bottom: 2px solid #444; /* เส้นแบ่งรายการ */
  margin-bottom: 15px; /* ระยะห่างด้านล่างของแต่ละรายการ */
  padding-bottom: 10px; /* ระยะห่างภายในด้านล่างของแต่ละรายการ */
}
.รายการถอนเงิน-รายการ img {
  width: 40px; /* ความกว้างของไอคอน */
  height: 40px; /* ความสูงของไอคอน */
  vertical-align: middle; /* จัดกึ่งกลางในแนวตั้ง */
  margin-right: 10px; /* ระยะห่างด้านขวาของไอคอน */
  border-radius: 5px; /* มุมโค้งของไอคอน */
  object-fit: cover; /* ปรับขนาดภาพให้เต็มพื้นที่โดยไม่เสียสัดส่วน */
}
.รายการถอนเงิน-รายการ span {
  font-weight: bold; /* ตัวอักษรหนา */
  color: #ffffff; /* สีตัวอักษร */
  text-shadow: 0 0 8px #000000; /* เงาของตัวอักษร */
}
.รายการถอนเงิน-รายการ .จำนวนเงิน {
  color: #ff4444; /* สีตัวอักษรจำนวนเงิน */
}
.รายการถอนเงิน-รายการ .วันที่ {
  color: #888; /* สีตัวอักษรวันที่ */
  font-size: 0.9rem; /* ขนาดตัวอักษรวันที่ */
}
.รายการถอนเงิน-รายการ:hover {
  background-color: rgba(255, 255, 255, 0.1); /* พื้นหลังเมื่อชี้ */
  border-radius: 10px; /* มุมโค้งเมื่อชี้ */
  transition: background-color 0.3s; /* การเปลี่ยนแปลงพื้นหลังเมื่อชี้ */
}
.เกมสล็อตยอดนิยม {
  margin: 50px auto; /* ระยะห่างด้านบนและกึ่งกลางในแนวนอน */
  overflow: hidden; /* ซ่อนส่วนที่เกิน */
  width: 350px; /* ความกว้างของพื้นที่ */
  height: auto; /* ความสูงของพื้นที่ */
  margin-top: 10px; /* ระยะห่างด้านบน */
  background-color: rgba(16, 4, 17, 0.764); /* พื้นหลังโปร่งใสสีดำ */
  border-radius: 15px; /* มุมโค้งของพื้นที่ */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* เงาของพื้นที่ */
  border: 2px solid #00ff99; /* สีรอบขอบพื้นที่ */
  margin-bottom: 20px; /* ระยะห่างด้านล่าง */
}
.เกมสล็อตยอดนิยม h3 {
  padding: 10px 20px; /* ระยะห่างภายใน */
  font-size: 1.5rem; /* ขนาดตัวอักษร */
  color: #00ff99; /* สีตัวอักษร */
  text-shadow: 0 0 8px #00ff99; /* เงาของตัวอักษร */
  text-align: center; /* จัดกึ่งกลางข้อความ */
}

#พื้นที่แสดงเกม {
  display: flex; /* ใช้ Flexbox สำหรับการจัดวาง */
  flex-wrap: wrap; /* ให้บรรจุหลายบรรทัดถ้าจำเป็น */
  justify-content: center; /* จัดกึ่งกลางในแนวนอน */
  gap: 50px; /* ระยะห่างระหว่างเกม */
  padding: 30px; /* ระยะห่างภายใน */
}
#พื้นที่แสดงเกม img {
  width: 100px; /* ความกว้างของภาพเกม */
  height: 100px; /* ความสูงของภาพเกม */
  object-fit: cover; /* ปรับขนาดภาพให้เต็มพื้นที่โดยไม่เสียสัดส่วน */
  border: 2px solid #00e5ff; /* ขอบของภาพเกม */
  border-radius: 25px; /* มุมโค้งของภาพเกม */
  transition: transform 0.3s, box-shadow 0.3s; /* การเปลี่ยนแปลงเมื่อชี้ */
}
#พื้นที่แสดงเกม img:hover {
  transform: scale(1.1); /* ขยายขนาดภาพเกมเมื่อชี้ */
  box-shadow: 0 0 15px #00ff99; /* เงาของภาพเกมเมื่อชี้ */
}
#เวลา {
  text-align: center; /* จัดกึ่งกลางข้อความ */
  font-size: 1.9rem; /* ขนาดตัวอักษร */
  color: #ffffff; /* สีตัวอักษร */
  text-shadow: 0 0 8px #ffffff; /* เงาของตัวอักษร */
  margin-bottom: 1px; /* ระยะห่างด้านล่าง */
}
#เวลา span {
  font-weight: bold; /* ตัวอักษรหนา */
}
#เวลา span.ชั่วโมง {
  color: #ff4444; /* สีตัวอักษรชั่วโมง */
}
#เวลา span.นาที {
  color: #44ff44; /* สีตัวอักษรนาที */
}
#เวลา span.วินาที {
  color: #4444ff; /* สีตัวอักษรวินาที */
}