* {
    margin: 0; /*ลบระยะห่างรอบๆทุกองค์ประกอบ*/
    padding: 0; /*ลบระยะห่างภายในทุกองค์ประกอบ*/
    box-sizing: border-box; /*รวมขอบและระยะห่างภายในองค์ประกอบในขนาดทั้งหมด*/
}
body {
    font-family: Arial, sans-serif; /*ตั้งค่าฟอนต์สำหรับทั้งหน้า*/
    background: url(img/01.jpg) no-repeat center center fixed; /*ตั้งค่าพื้นหลังเป็นรูปภาพและให้คงที่*/
    background-size: cover; /*ปรับขนาดพื้นหลังให้เต็มพื้นที่*/
    color: #fff; /*ตั้งค่าสีตัวอักษรเป็นสีขาว*/
}
main {
  padding: 10px;  /* กำหนด padding ให้กับ main */
}

.รูปที่1 {
    max-width: 100%,1200px; /*จำกัดความกว้างสูงสุดของคอนเทนเนอร์*/
    max-width: 500px;   /* กำหนดความกว้างสูงสุดของกล่อง */
    margin: 0 auto; /*จัดกึ่งกลางคอนเทนเนอร์*/
}

.รูปที่1 img {
    width: 100%; /*ให้รูปภาพเต็มความกว้างของคอนเทนเนอร์*/
    height: auto; /*ให้ความสูงปรับตามอัตราส่วนของรูปภาพ*/
    display: block; /*ลบช่องว่างด้านล่างของรูปภาพ*/
    border-radius: 10px; /*เพิ่มมุมโค้งให้กับรูปภาพ*/
}


.ปุ่ม {
  text-align: center;
  margin-top: 20px;
}

#ปุ่ม1 {
  width: 100%; /* ให้ปุ่มเต็มความกว้างของคอนเทนเนอร์ */
  max-width: 500px; /* กำหนดความกว้างสูงสุดของปุ่ม */
  height: 80px; /* กำหนดความสูงของปุ่ม */
  display: inline-flex; /* ใช้ flexbox เพื่อจัดเรียงเนื้อหาภายในปุ่ม */
  align-items: center; /* จัดแนวเนื้อหาให้อยู่ตรงกลางแนวตั้ง */
  gap: 10px;  /* เพิ่มช่องว่างระหว่างไอคอนและข้อความ */
  padding: 12px 20px; /* เพิ่ม padding ให้กับปุ่ม */
  font-size: 25px; /* เพิ่มขนาดตัวอักษร */
  font-weight: bold; /* ทำให้ตัวอักษรหนา */
  color: #fff;  /* สีตัวอักษรเป็นสีขาว */
  background: linear-gradient(45deg, #ff7a00, #ffb300); /* ใช้ gradient สำหรับพื้นหลังของปุ่ม */
  border: none;  /* ลบเส้นขอบของปุ่ม */
  border-radius: 10px; /* เพิ่มมุมโค้งให้กับปุ่ม */
  cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ไปที่ปุ่ม */
  box-shadow: 0 6px 0 #cc5f00; /* เพิ่มเงาให้กับปุ่ม */
  animation: press 0.8s infinite; /* เพิ่มแอนิเมชันให้กับปุ่ม */
  justify-content: center; /* จัดกึ่งกลางข้อความในปุ่ม */
}

#ปุ่ม1 img {
  width: 48px;  /* กำหนดความกว้างของไอคอน */
  height: 48px; /* กำหนดความสูงของไอคอน */
}

#ปุ่ม1 span{
  text-align: center; /* จัดกึ่งกลางข้อความในปุ่ม */
  width: 100%;  /* ให้ข้อความเต็มความกว้างของปุ่ม */
}

@keyframes press {
  0% {
    transform: translateY(0);
    box-shadow: 0 6px 0 #cc5f00;
  }
  50% {
    transform: translateY(6px);
    box-shadow: 0 0 0 #cc5f00;
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 6px 0 #cc5f00;
  }
}



.สมัครสมาชิกรับทันที200{
  text-align: center;
  margin: 20px 0;
}

.สมัครสมาชิกรับทันที200 h1{
    width: 100%; /* ให้คอนเทนเนอร์เต็มความกว้างของหน้า */
    max-width: 500px; /* กำหนดความกว้างสูงสุดของคอนเทนเนอร์ */
  display: inline-block;
  padding: 12px 25px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg,#ff7a00,#ffb300);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.รองรับทุกระบบครบจบที่นี้{
  text-align: center;
  margin: 70px 0;
}

.รองรับทุกระบบครบจบที่นี้ h1{
    width: 100%; /* ให้คอนเทนเนอร์เต็มความกว้างของหน้า */
    max-width: 500px; /* กำหนดความกว้างสูงสุดของคอนเทนเนอร์ */
  display: inline-block;
  padding: 12px 25px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg,#007bff,#00c6ff);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  animation: blueGlow 1.5s infinite alternate;
}

@keyframes blueGlow{
  from{
    box-shadow: 0 0 10px #007bff, 0 0 20px #00c6ff;
  }
  to{
    box-shadow: 0 0 20px #007bff, 0 0 40px #00c6ff;
  }
}

.รูปที่2 {
    max-width: 100%,1200px; /*จำกัดความกว้างสูงสุดของคอนเทนเนอร์*/
    max-width: 500px;   /* กำหนดความกว้างสูงสุดของกล่อง */
    margin: 0 auto; /*จัดกึ่งกลางคอนเทนเนอร์*/
    margin-top: 30px; /*เพิ่มระยะห่างด้านบนของคอนเทนเนอร์*/
}

.รูปที่2 img {
    width: 100%; /*ให้รูปภาพเต็มความกว้างของคอนเทนเนอร์*/
    margin-top: -50px; /*เพิ่มระยะห่างด้านบนของคอนเทนเนอร์*/
    height: auto; /*ให้ความสูงปรับตามอัตราส่วนของรูปภาพ*/
    display: block; /*ลบช่องว่างด้านล่างของรูปภาพ*/
    border-radius: 10px; /*เพิ่มมุมโค้งให้กับรูปภาพ*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*เพิ่มเงาให้กับรูปภาพ*/
}

.แตกจริงจ่ายจริงไม่มีปัญหา{
  text-align: center;
  margin: 20px 0;
}

.แตกจริงจ่ายจริงไม่มีปัญหา h1{
    width: 100%; /* ให้คอนเทนเนอร์เต็มความกว้างของหน้า */
    max-width: 500px; /* กำหนดความกว้างสูงสุดของคอนเทนเนอร์ */
  display: inline-block;
  padding: 12px 25px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg,#b8860b,#ffd700,#ffcc33);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  animation: goldGlow 1.5s infinite alternate;
}

@keyframes goldGlow{
  from{
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ffcc33;
  }
  to{
    box-shadow: 0 0 20px #ffd700, 0 0 40px #ffcc33;
  }
}

.รูปที่3 {
    max-width: 100%,1200px; /*จำกัดความกว้างสูงสุดของคอนเทนเนอร์*/
    max-width: 500px;   /* กำหนดความกว้างสูงสุดของกล่อง */
    margin: 0 auto; /*จัดกึ่งกลางคอนเทนเนอร์*/
    margin-top: 70px; /*เพิ่มระยะห่างด้านบนของคอนเทนเนอร์*/
}

.รูปที่3 img {
    width: 100%; /*ให้รูปภาพเต็มความกว้างของคอนเทนเนอร์*/
    margin-top: -50px; /*เพิ่มระยะห่างด้านบนของคอนเทนเนอร์*/
    height: auto; /*ให้ความสูงปรับตามอัตราส่วนของรูปภาพ*/
    display: block; /*ลบช่องว่างด้านล่างของรูปภาพ*/
    border-radius: 10px; /*เพิ่มมุมโค้งให้กับรูปภาพ*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*เพิ่มเงาให้กับรูปภาพ*/
}

.🚀รวดเร็วฉับไวไว้ใจได้{
  text-align: center;
  margin: 20px 0;
}

.🚀รวดเร็วฉับไวไว้ใจได้ h1{
  width: 100%; /* ให้คอนเทนเนอร์เต็มความกว้างของหน้า */
  max-width: 500px; /* กำหนดความกว้างสูงสุดของคอนเทนเนอร์ */
  display: inline-block;
  padding: 12px 25px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg,#00c853,#69f0ae);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  animation: greenGlow 1.5s infinite alternate;
}

@keyframes greenGlow{
  from{
    box-shadow: 0 0 10px #00e676, 0 0 20px #69f0ae;
  }
  to{
    box-shadow: 0 0 20px #00e676, 0 0 40px #69f0ae;
  }
}

.รายการถอนเงิน {
  margin: 100px auto; /* ระยะห่างด้านบนและกึ่งกลางในแนวนอน */
  width: 100%; /* ความกว้างของพื้นที่ */
  max-width: 500px; /* กำหนดความกว้างสูงสุดของพื้นที่ */
  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; /* การเปลี่ยนแปลงพื้นหลังเมื่อชี้ */
}

.รูปที่4 {
    max-width: 100%,1200px; /*จำกัดความกว้างสูงสุดของคอนเทนเนอร์*/
    max-width: 500px;   /* กำหนดความกว้างสูงสุดของกล่อง */
    margin: 0 auto; /*จัดกึ่งกลางคอนเทนเนอร์*/
    margin-top: 70px; /*เพิ่มระยะห่างด้านบนของคอนเทนเนอร์*/
}

.รูปที่4 img {
    width: 100%; /*ให้รูปภาพเต็มความกว้างของคอนเทนเนอร์*/
    margin-top: -50px; /*เพิ่มระยะห่างด้านบนของคอนเทนเนอร์*/
    height: auto; /*ให้ความสูงปรับตามอัตราส่วนของรูปภาพ*/
    display: block; /*ลบช่องว่างด้านล่างของรูปภาพ*/
    border-radius: 10px; /*เพิ่มมุมโค้งให้กับรูปภาพ*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*เพิ่มเงาให้กับรูปภาพ*/
}

.รูปที่5 {
    max-width: 100%,1200px; /*จำกัดความกว้างสูงสุดของคอนเทนเนอร์*/
    max-width: 500px;   /* กำหนดความกว้างสูงสุดของกล่อง */
    margin: 0 auto; /*จัดกึ่งกลางคอนเทนเนอร์*/
    margin-top: 70px; /*เพิ่มระยะห่างด้านบนของคอนเทนเนอร์*/
}

.รูปที่5 img {
    width: 100%; /*ให้รูปภาพเต็มความกว้างของคอนเทนเนอร์*/
    margin-top: -50px; /*เพิ่มระยะห่างด้านบนของคอนเทนเนอร์*/
    height: auto; /*ให้ความสูงปรับตามอัตราส่วนของรูปภาพ*/
    display: block; /*ลบช่องว่างด้านล่างของรูปภาพ*/
    border-radius: 10px; /*เพิ่มมุมโค้งให้กับรูปภาพ*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*เพิ่มเงาให้กับรูปภาพ*/
}

.ปุ่ม2{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

#ปุ่ม2{
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 50%;
  background: #25d366;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

#ปุ่ม2 img{
  width: 35px;
  height: 35px;
}

#ปุ่ม2:hover{
  transform: scale(1.1);
}