* {
    margin: 0;      /* ตั้งค่า margin เป็น 0 */
    padding: 0;    /* ตั้งค่า padding เป็น 0 */ 
    box-sizing: border-box;     /* ตั้งค่า box-sizing เป็น border-box */
}

body {
    background-image: url('../images/02.jpg'); /* กำหนดภาพพื้นหลัง */
    background-size: cover;               /* ปรับขนาดภาพให้ครอบคลุมพื้นที่ */
    background-repeat: no-repeat;         /* ไม่ให้ภาพพื้นหลังซ้ำ */
    background-attachment: fixed;        /* ภาพพื้นหลังคงที่เมื่อเลื่อนหน้า */
    background-position: center;    /* จัดตำแหน่งภาพพื้นหลังให้อยู่ตรงกลาง */
}

nav {
    display: flex;          /* ใช้ Flexbox ในการจัดเรียง */
    align-items: center;    /* จัดแนวแนวตั้งให้อยู่กลาง */
    justify-content: space-between; /* จัดเรียงเนื้อหาให้มีระยะห่างเท่าๆ กัน */
    width: 100%;         /* ความกว้างเต็มหน้าจอ */
    height: 60px;        /* ความสูงของแถบนำทาง */
    background-color: #3333338d;  /* สีพื้นหลังของแถบนำทาง */
    top: 0;                  /* ตำแหน่งด้านบน */
    left: 0;                 /* ตำแหน่งด้านซ้าย */
    position: fixed;         /* ตำแหน่งคงที่เมื่อเลื่อนหน้า */
    z-index: 1000;          /* ให้แถบนำทางอยู่ด้านบนสุด */
}

nav img {
    height: 40px;           /* ความสูงของโลโก้ */
    margin-left: 10px;      /* ระยะห่างด้านซ้ายของโลโก้ */
    background: none;       /* ไม่มีพื้นหลัง */
    cursor: pointer;      /* เปลี่ยนเคอร์เซอร์เมื่อชี้ที่โลโก้ */
    border-radius: 10px;              /* มุมโค้งของโลโก้ */
    transition: transform 0.3s; /* เพิ่มการเปลี่ยนแปลงเมื่อชี้ที่โลโก้ */
    animation: alternateGlow 3s infinite alternate; /* แอนิเมชันเรืองแสง */
}

nav img:hover {
    transform: scale(1.1); /* ขยายขนาดโลโก้เมื่อชี้ */
}
@keyframes alternateGlow {
    0% {
        box-shadow: 0 0 5px 2px rgba(229, 28, 239, 0.5);
    }
    100% {
        box-shadow: 0 0 15px 5px rgb(237, 18, 253);
    }
}

.รูปสไลด์ {
    width: 100%;                      /* ความกว้างเต็มพื้นที่ */
    height: 300px;                    /* ความสูงของส่วนรูปสไลด์ */
    overflow: hidden;                 /* ซ่อนส่วนที่เกิน */
}

.รูปสไลด์ img {
    display: block;                     /* แสดงเป็นบล็อก */
    margin: 0 auto;                    /* จัดกึ่งกลางแนวนอน */
    width: 100%;                        /* ความกว้างเต็มพื้นที่ */
    height: 100%;                       /* ความสูงเต็มพื้นที่ */
    margin-top: 70px;                  /* ระยะห่างด้านบนของภาพ */
    max-width: 380px;                 /* ความกว้างสูงสุดของภาพ */
    max-height: 200px;                /* ความสูงสูงสุดของภาพ */
    border-radius: 20px;               /* มุมโค้งของภาพ */
    border: 3px solid #dd00ff;             /* สีขอบและความกว้างของขอบ */
    box-shadow: 0 0 10px rgba(221, 0, 255, 0.5); /* เงาของภาพ */
    animation: slide-animation 5s 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%); } 
  }

.สมัครสมาชิก {
    text-align: center;               /* จัดกึ่งกลางข้อความ */
}

#สมัครสมาชิก {
    display: inline-block;              /* แสดงเป็นบล็อกแบบอินไลน์ */
    width: 300px;                     /* ความกว้างของปุ่ม */
    height: 50px;                     /* ความสูงของปุ่ม */
}

.สมัครสมาชิก button {
  width: 220px;    /* ความกว้างของปุ่ม */
  height: 50px;   /* ความสูงของปุ่ม */
  border: none;    /* เอาขอบออก */
  outline: none;   /* เอาเส้นขอบเวลาโฟกัสออก */
  color: #fff;    /* สีข้อความของปุ่ม */
  background: #111;   /* สีพื้นหลังของปุ่ม */
  cursor: pointer;       /* เปลี่ยนเคอร์เซอร์เมื่อชี้ที่ปุ่ม */
  position: relative;      /* ตำแหน่งสัมพัทธ์ */
  z-index: 0;        /* เลเยอร์อยู่ด้านบน */
  border-radius: 10px;     /* มุมโค้งของปุ่ม */
  font-size: 18px;        /* ขนาดตัวอักษร */ 
  font-weight: bold;        /* ตัวหนาของข้อความ */
  text-shadow: 0 0 5px rgba(0,255,255,0.6);     /* เงาของข้อความ */
  transition: color 0.3s ease;             /* การเปลี่ยนแปลงสีข้อความ */
  box-shadow: 0 0 20px rgba(0,255,255,0.2);         /* เงาของปุ่ม */
}

/* ===== กรอบเรืองแสงต่อเนื่อง ===== */
.สมัครสมาชิก button::before {
  content: '';         /* เนื้อหาว่าง */
  position: absolute;         /* ตำแหน่งสัมพัทธ์ */
  top: -5px;                 /* ระยะห่างด้านบน */
  left: -5px;                     /* ระยะห่างด้านซ้าย */
  width: calc(100% + 10px);            /* ความกว้างเพิ่มขึ้น 10px */
  height: calc(100% + 10px);             /* ความสูงเพิ่มขึ้น 10px */
  background: linear-gradient(45deg,               /* มุมเอียง 45 องศา */
      #ff0000, #ff7300, #fffb00, #48ff00,   
      #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);  /* สีของกรอบเรืองแสง */
  background-size: 400%;            /* ขยายขนาดพื้นหลังสำหรับแอนิเมชัน */
  z-index: -1;                        /* เลเยอร์อยู่ด้านหลัง */
  filter: blur(6px);                   /* เบลอพื้นหลัง */
  border-radius: 10px;                     /* มุมโค้งของกรอบ */
  animation: glowing 10s linear infinite;         /* แอนิเมชันขอบไฟ */
  opacity: 1; /* 🔥 เปิดตลอดเวลา */
}

/* ===== พื้นหลังของปุ่ม ===== */
.สมัครสมาชิก button::after {
  content: '';
  position: absolute;   /* ตำแหน่งสัมพัทธ์ */
  width: 100%;           /* ความกว้างเต็มปุ่ม */
  height: 100%;     /* ความสูงเต็มปุ่ม */
  background: #07065d;
  left: 0;          /* ระยะห่างด้านซ้าย */ 
  top: 0;               /* ระยะห่างด้านบน */
  z-index: -1;           /* เลเยอร์อยู่ด้านหลัง */
  border-radius: 10px;        /* มุมโค้งของปุ่ม */
}

/* ===== ตอนคลิก ===== */
.สมัครสมาชิก button:active {
  color: #000;
}
.สมัครสมาชิก button:active::after {
  background: transparent;
}

/* ===== แอนิเมชันขอบไฟ ===== */
@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}


.ติดต่อเรา {
    text-align: center;               /* จัดกึ่งกลางข้อความ */
    margin: 20px 0;                   /* ระยะห่างด้านบนและล่าง */
}

#ติดต่อเรา {
    display: inline-block;              /* แสดงเป็นบล็อกแบบอินไลน์ */
    width: 300px;                     /* ความกว้างของปุ่ม */
    height: 50px;                     /* ความสูงของปุ่ม */
    color: #ffffff;                    /* สีข้อความของปุ่ม */
    text-decoration: none;             /* ไม่มีเส้นใต้ข้อความ */
    border: none;                     /* ไม่มีขอบ */
    font-weight: bold;                 /* ตัวหนาของข้อความ */
    transition: background-color 0.3s, transform 0.3s; /* การเปลี่ยนแปลงเมื่อโฮเวอร์ */
}

/* ===== ปุ่มติดต่อเรา แบบขอบไฟวิ่ง ===== */
.ติดต่อเรา button {
  position: relative;
  padding: 12px 40px;
  font-size: 18px;
  font-weight: 600;
  color: #00f6ff;
  background: #207909;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  letter-spacing: 2px;
  transition: color 0.3s ease;
}

/* ===== เอฟเฟกต์ขอบเรืองแสง ===== */
.ติดต่อเรา button::before {
  content: "";
  position: absolute;
  inset: 0;  
  border-radius: 10px;
  padding: 3px; 
  background: linear-gradient(140deg, 
      #7bff00, #00ff80, #ff0000, #0088ff, #00ffff , #ff00ff, #fff700 , #00ff08, #ff0000, #0088ff, #00ffff , #ff00ff);
  background-size: 300% 300%;   /* ขยายขนาดพื้นหลังสำหรับแอนิเมชัน */
  animation: borderGlow 4s linear infinite;  /* แอนิเมชันขอบเรืองแสง */
  mask: 
    linear-gradient(#fff 0 0) content-box,   /* สร้างมาสก์สำหรับขอบ */
    linear-gradient(#fff 0 0);             /* สร้างมาสก์สำหรับขอบ */
  mask-composite: exclude;               /* ตัดส่วนที่ไม่ต้องการออก */
  -webkit-mask-composite: destination-out;   /* สำหรับ Safari */
  z-index: 0;
}

/* ===== พื้นหลังปุ่ม (อยู่ชั้นใน) ===== */
.ติดต่อเรา button::after {   /* ใช้ ::after สำหรับพื้นหลังปุ่ม */
  content: "";  
  position: absolute;  
  inset: 0;  
  background: #0b0b0b;  
  border-radius: 10px;
  z-index: -1;
}

/* ===== Animation แสงวิ่งรอบขอบ ===== */
@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 50% 100%; }
  100% { background-position: 100% 50%; }
}

/* ===== ตอนคลิก ===== */
.ติดต่อเรา button:active {
  transform: scale(0.97);
  color: #fff;
}

.ติดต่อเรา button:hover {
  color: #00fffb;
  text-shadow: 0 0 8px #00ffe2;
}

.ผู้เล่น {
    display: block;               /* แสดงเป็นบล็อก */
    width: 350px;                 /* ความกว้างของกล่อง */
    height: 100px;                /* ความสูงของกล่อง */
    margin: 20px auto;            /* จัดกึ่งกลางกล่อง */
    border: 3px solid #00d9ff;    /* สีขอบและความกว้างของขอบ */
    border-radius: 15px;          /* มุมโค้งของกล่อง */
    box-shadow: 0 0 10px rgba(122, 0, 255, 0.5); /* เงาของกล่อง */
    background-color: #640dc18c;  /* สีพื้นหลัง */
}

.ผู้เล่น p {
    font-size: 24px;              /* ขนาดตัวอักษร */
    font-weight: bold;            /* ตัวหนา */
    color: #00ff1e;               /* สีตัวอักษร */
    text-align: center;           /* จัดกึ่งกลางข้อความ */
    text-shadow: 0 0 10px #000000; /* เงาของข้อความ */
    margin-top: 10px;             /* ระยะห่างด้านบน */
    margin-bottom: 10px;          /* ระยะห่างด้านล่าง */
}

#ผู้เล่น {
    font-size: 32px;              /* ขนาดตัวอักษร */
    font-weight: bold;            /* ตัวหนา */
    color: #00ff22;               /* สีตัวอักษร */
    text-align: center;           /* จัดกึ่งกลางข้อความ */
    text-shadow: 0 0 10px #bebebe; /* เงาของข้อความ */
}

.โบนัส {
    display: block;               /* แสดงเป็นบล็อก */
    width: 350px;                 /* ความกว้างของกล่อง */
    height: 200px;                /* ความสูงของกล่อง */
    margin: 20px auto;            /* จัดกึ่งกลางกล่อง */
    border: 3px solid #ffea00;    /* สีขอบและความกว้างของขอบ */
    border-radius: 15px;          /* มุมโค้งของกล่อง */
    box-shadow: 0 0 10px rgba(255, 0, 200, 0.5); /* เงาของกล่อง */
    background-color: #7e176794;  /* สีพื้นหลัง */
}

#โบนัส {
    text-align: center;           /* จัดกึ่งกลางข้อความ */
    position: relative;           /* ตำแหน่งสัมพัทธ์ */
}
.โบนัส p {
    font-size: 24px;              /* ขนาดตัวอักษร */
    text-align: center;           /* จัดกึ่งกลางข้อความ */
    font-weight: bold;            /* ตัวหนา */
    color: #ffff00;               /* สีตัวอักษร */
    text-shadow: 0 0 10px #000000; /* เงาของข้อความ */
    margin-top: 10px;             /* ระยะห่างด้านบน */
}

.โบนัส div {
    margin-top: 15px;             /* ระยะห่างด้านบน */
    font-size: 25px;              /* ขนาดตัวอักษร */
    font-weight: bold;            /* ตัวหนา */
    color: #ffff00;               /* สีตัวอักษร */
    text-shadow: 0 0 8px #000000; /* เงาของข้อความ */
}

.ผู้ที่รับรางวัล {
    display: block;               /* แสดงเป็นบล็อก */
    width: 350px;                 /* ความกว้างของกล่อง */
    height: 250px;                /* ความสูงของกล่อง */
    margin: 20px auto;            /* จัดกึ่งกลางกล่อง */
    border: 3px solid #00ff15;    /* สีขอบและความกว้างของขอบ */
    border-radius: 15px;          /* มุมโค้งของกล่อง */
    box-shadow: 0 0 10px rgba(0, 255, 106, 0.5); /* เงาของกล่อง */
    background-color: #0a361c56;  /* สีพื้นหลัง */
    margin-bottom: 50px;          /* ระยะห่างด้านล่าง */
}

.ผู้ที่รับรางวัล p {
    font-size: 27px;              /* ขนาดตัวอักษร */
    text-align: center;           /* จัดกึ่งกลางข้อความ */
    font-weight: bold;            /* ตัวหนา */
    color: #ffffff;               /* สีตัวอักษร */
    text-shadow: 0 0 10px #000000; /* เงาของข้อความ */
    margin-top: 10px;             /* ระยะห่างด้านบน */
}

#ผู้ที่รับรางวัล {
    text-align: center;           /* จัดกึ่งกลางข้อความ */
    position: relative;           /* ตำแหน่งสัมพัทธ์ */
    z-index: 1;                  /* เลเยอร์อยู่ด้านบน */
}

.ผู้ที่รับรางวัล div {
    margin-top: 10px;             /* ระยะห่างด้านบน */
    font-size: 25px;              /* ขนาดตัวอักษร */
    font-weight: bold;            /* ตัวหนา */
    color: #ffffff;               /* สีตัวอักษร */
    text-shadow: 0 0 8px #000000; /* เงาของข้อความ */
}