* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: url('../images/02.jpg') no-repeat center center fixed;  
    background-size: cover;   /*คือการปรับขนาดภาพให้เต็มหน้าจอ*/
    font-family: 'Kanit', sans-serif; /*การเรียกใช้ฟอนต์จาก Google Fonts */
}

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

nav img {
    height: 50px;  /*กำหนดความสูงของโลโก้ในเมนู*/
    margin: 10px 20px;  /*กำหนดระยะห่างรอบๆ โลโก้*/
}

.รูปสไลด์โชว์1 {
    display: block; /*การแสดงผลแบบบล็อก*/
    width: 350px; /*กำหนดความกว้างของสไลด์โชว์*/
    height: 200px; /*กำหนดความสูงของสไลด์โชว์*/
    margin: 80px auto; /*จัดกึ่งกลางสไลด์โชว์*/
    background-size: cover; /*ปรับขนาดภาพให้เต็มพื้นที่*/
    margin-top: 90px;  /*ระยะห่างด้านบนของสไลด์โชว์*/
    border-radius: 30px; /*มุมโค้งของสไลด์โชว์*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*เงาของสไลด์โชว์*/
    overflow: hidden; /*ซ่อนส่วนที่เกินของสไลด์โชว์*/
}

#รูปสไลด์โชว์1 {
    width: 100%; /*กำหนดความกว้างของภาพสไลด์โชว์*/
    height: 100%; /*กำหนดความสูงของภาพสไลด์โชว์*/
    background-size: cover; /*ปรับขนาดภาพให้เต็มพื้นที่*/
    border-radius: 30px; /*มุมโค้งของภาพสไลด์โชว์*/
    border: 5px solid #fff; /*เส้นขอบรอบสไลด์โชว์*/
    background-position: center; /*จัดตำแหน่งภาพให้อยู่ตรงกลาง*/
    animation: slide-animation 5s ease-in-out infinite; /*การเคลื่อนไหวภาพสไลด์โชว์*/
}
  @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; /*การจัดวางแบบยืดหยุ่น*/
    flex-direction: column; /*จัดวางในแนวตั้ง*/
    align-items: center; /*จัดกึ่งกลางในแนวตั้ง*/
    position: relative; /*กำหนดตำแหน่งสัมพัทธ์*/
    color: #fff; /*สีตัวอักษร*/
    font-size: 20px; /*ขนาดตัวอักษร*/
    font-weight: bold; /*ความหนาของตัวอักษร*/
    line-height: 50px; /*จัดกึ่งกลางข้อความในแนวตั้ง*/
    margin: 20px auto; /*จัดกึ่งกลางและระยะห่างรอบๆ*/
    margin-top:-50px; /*ระยะห่างด้านบนของปุ่ม*/
    width: 300px; /*กำหนดความกว้างของกล่อง*/
    height: 50px; /*กำหนดความสูงของกล่อง*/
    background-color: rgba(0, 64, 255, 0.8); /*พื้นหลังกล่องแบบโปร่งแสง*/
    border-radius: 10px; /*มุมโค้งของกล่อง*/
    box-shadow: 0 4px 8px rgba(0, 42, 252, 0.1); /*เงาของกล่อง*/
}

#สมัครสมาชิก::before {
  content: "";    /* ขอบแสงวิ่ง */
  position: absolute;  /* กำหนดตำแหน่งสัมพัทธ์ */
  inset: -5px;  /* ขยายขอบออกนอกกล่อง */
  background: linear-gradient(   /* สีสันของขอบแสงวิ่ง */
    120deg,
    #00ffff,
    #ff00ff,
    #ffff00,
    #00ffff
  );
  background-size: 300% 300%;  /* ขนาดพื้นหลังสำหรับแอนิเมชัน */
  z-index: -1; /* วางขอบแสงไว้ด้านหลัง */
  border-radius: 10px;  /* มุมโค้งของขอบแสง */
  filter: blur(3px);  /* ทำให้ขอบแสงเบลอ */
  animation: borderRun 3s linear infinite;  /* เรียกใช้แอนิเมชันขอบแสงวิ่ง */
} 

/* พื้นหลังปุ่ม */
#สมัครสมาชิก::after {
  content: "";
  position: absolute;  /* กำหนดตำแหน่งสัมพัทธ์ */
  inset: 0;   /* ครอบคลุมทั้งกล่อง */
  background: #002435;  /* สีพื้นหลังของปุ่ม */
  border-radius: 8px;   /* มุมโค้งของพื้นหลังปุ่ม */
  z-index: -1;   /* วางพื้นหลังไว้ด้านหลัง */
}

/* แอนิเมชันขอบแสงวิ่ง */
@keyframes borderRun {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#สมัครสมาชิก:hover {
  color: #00ffff;   /* สีตัวอักษรเมื่อเลื่อนเมาส์ */
  transform: scale(1.05);   /* ขยายขนาดกล่องเมื่อเลื่อนเมาส์ */
  transition: 0.3s;   /* ความเร็วในการเปลี่ยนแปลง */
}

#ติดต่อเรา {
    display: flex; /*การจัดวางแบบยืดหยุ่น*/
    flex-direction: column; /*จัดวางในแนวตั้ง*/
    align-items: center; /*จัดกึ่งกลางในแนวตั้ง*/
    position: relative; /*กำหนดตำแหน่งสัมพัทธ์*/
    color: #fff; /*สีตัวอักษร*/
    font-size: 20px; /*ขนาดตัวอักษร*/
    font-weight: bold; /*ความหนาของตัวอักษร*/
    line-height: 50px; /*จัดกึ่งกลางข้อความในแนวตั้ง*/
    margin: 20px auto; /*จัดกึ่งกลางและระยะห่างรอบๆ*/
    margin-top:30px; /*ระยะห่างด้านบนของปุ่ม*/
    width: 300px; /*กำหนดความกว้างของกล่อง*/
    height: 50px; /*กำหนดความสูงของกล่อง*/
    background-color: rgba(3, 168, 25, 0.8); /*พื้นหลังกล่องแบบโปร่งแสง*/
    border-radius: 10px; /*มุมโค้งของกล่อง*/
}

/* สร้างขอบเรืองแสงแบบ gradient */
#ติดต่อเรา::before {
  content: "";
  position: absolute;
  inset: -5px;
  background: linear-gradient(
    120deg,
    #ff00cc,
    #3333ff,
    #00ffff,
    #ff00cc
  );
  background-size: 300% 300%;
  border-radius: 12px;
  z-index: -1;
  animation: glowBorder 3s linear infinite;
}

/* สร้างพื้นหลังด้านใน (เพื่อให้ขอบชัดขึ้น) */
#ติดต่อเรา::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #111;
  border-radius: 10px;
  z-index: -1;
}

/* แอนิเมชันแสงวิ่ง */
@keyframes glowBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* เอฟเฟกต์เวลา hover */
#ติดต่อเรา:hover {
  color: #00ffff;
  box-shadow: 0 0 20px #00ffff44;
  transform: scale(1.05);
}

.ผู้เล่นกำลังออนไลน์ {
    display: block; /*การแสดงผลแบบบล็อก*/
    width: 350px; /*กำหนดความกว้างของกล่อง*/
    height: 100px; /*กำหนดความสูงของกล่อง*/
    margin: 20px auto; /*จัดกึ่งกลางกล่อง*/
    background-color: rgba(0, 0, 0, 0.544); /*พื้นหลังกล่องแบบโปร่งแสง*/
    border-radius: 20px; /*มุมโค้งของกล่อง*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*เงาของกล่อง*/
    color: #3cff00; /*สีตัวอักษร*/
    border: 3px solid #00ffff; /*เส้นขอบกล่อง*/
    font-size: 24px; /*ขนาดตัวอักษร*/
    font-weight: bold; /*ความหนาของตัวอักษร*/
    line-height: 40px; /*จัดกึ่งกลางข้อความในแนวตั้ง*/
    text-align: center; /*จัดกึ่งกลางข้อความในแนวนอน*/
}

.เกมยอดนิยมขนาดนี้ {
    display: block; /*การแสดงผลแบบบล็อก*/
    width: 350px; /*กำหนดความกว้างของกล่อง*/
    height: 160px; /*กำหนดความสูงของกล่อง*/
    margin: 20px auto; /*จัดกึ่งกลางกล่อง*/
    background-color: rgba(0, 0, 0, 0.544); /*พื้นหลังกล่องแบบโปร่งแสง*/
    border-radius: 20px; /*มุมโค้งของกล่อง*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*เงาของกล่อง*/
    color: #1aff00; /*สีตัวอักษร*/
    border: 3px solid #e1ff00; /*เส้นขอบกล่อง*/
    font-size: 24px; /*ขนาดตัวอักษร*/
    font-weight: bold; /*ความหนาของตัวอักษร*/
    line-height: 50px; /*จัดกึ่งกลางข้อความในแนวตั้ง*/
    text-align: center; /*จัดกึ่งกลางข้อความในแนวนอน*/
}

.รูปภาพ1 img{
    display: block; /*การแสดงผลแบบบล็อก*/
    width: 350px; /*กำหนดความกว้างของภาพ*/
    height: 200px; /*กำหนดความสูงของภาพ*/
    margin: 20px auto; /*จัดกึ่งกลางภาพ*/
    background-size: cover; /*ปรับขนาดภาพให้เต็มพื้นที่*/
    border: 3px solid #ffffff; /*เส้นขอบรอบภาพ*/
    border-radius: 30px; /*มุมโค้งของภาพ*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*เงาของภาพ*/
    overflow: hidden; /*ซ่อนส่วนที่เกินของภาพ*/
}

.รูปภาพ2 img{
    display: block; /*การแสดงผลแบบบล็อก*/
    width: 350px; /*กำหนดความกว้างของภาพ*/
    height: 200px; /*กำหนดความสูงของภาพ*/
    margin: 20px auto; /*จัดกึ่งกลางภาพ*/
    background-size: cover; /*ปรับขนาดภาพให้เต็มพื้นที่*/
    border-radius: 30px; /*มุมโค้งของภาพ*/
    border: 3px solid #ffffff; /*เส้นขอบรอบภาพ*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*เงาของภาพ*/
    overflow: hidden; /*ซ่อนส่วนที่เกินของภาพ*/
}

.รูปภาพ3 img{
    display: block; /*การแสดงผลแบบบล็อก*/
    width: 350px; /*กำหนดความกว้างของภาพ*/
    height: 200px; /*กำหนดความสูงของภาพ*/
    margin: 20px auto; /*จัดกึ่งกลางภาพ*/
    border: 3px solid #ffffff; /*เส้นขอบรอบภาพ*/
    background-size: cover; /*ปรับขนาดภาพให้เต็มพื้นที่*/
    border-radius: 30px; /*มุมโค้งของภาพ*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*เงาของภาพ*/
    overflow: hidden; /*ซ่อนส่วนที่เกินของภาพ*/
}

.รูปภาพ4 img{
    display: block; /*การแสดงผลแบบบล็อก*/
    width: 350px; /*กำหนดความกว้างของภาพ*/
    height: 200px; /*กำหนดความสูงของภาพ*/
    margin: 20px auto; /*จัดกึ่งกลางภาพ*/
    border: 3px solid #ffffff; /*เส้นขอบรอบภาพ*/
    background-size: cover; /*ปรับขนาดภาพให้เต็มพื้นที่*/
    border-radius: 30px; /*มุมโค้งของภาพ*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*เงาของภาพ*/
    overflow: hidden; /*ซ่อนส่วนที่เกินของภาพ*/
}