* {
margin: 0; /* ลบระยะห่างรอบนอก */
padding: 0; /* ลบระยะห่างภายใน */
box-sizing: border-box;  /* รวมขนาดเส้นขอบและระยะห่างภายในในขนาดองค์ประกอบ */
}
body {
background-image: url(/images/03.jpg); /* ตั้งค่าภาพพื้นหลัง */
background-size: cover; /* ปรับขนาดภาพให้เต็มพื้นที่ */  
}

nav {
width: 100%;  /* ความกว้างเต็มหน้าจอ */
background-color: rgba(58, 56, 56, .7);  /* สีพื้นหลังแบบโปร่งแสง */
padding: 10px 20px;  /* ระยะห่างภายใน */
position: fixed;  /* ตำแหน่งคงที่ */
top: 0;  /* ตำแหน่งด้านบน */
}

.รูปภาพ {
text-align: center;  /* จัดตำแหน่งเนื้อหาภายในให้กึ่งกลาง */
margin-top: 70px;  /* ระยะห่างด้านบน */
}

/* กำหนดพื้นที่สไลด์ */
#รูปภาพ01 {
position: relative;  /* เพื่อให้รูปภาพภายในใช้ตำแหน่ง absolute */
width: 350px;    /* ความกว้างอัตโนมัติ */
height: 200px;   /* ความสูงของรูปภาพ */
overflow: hidden;   /* ซ่อนส่วนที่เกิน */
border-radius: 20px;   /* มุมโค้งมน */
margin: 50px auto;   /* กึ่งกลางและระยะห่างด้านบน */
}

/* รูปภาพทั้งหมดใช้ตำแหน่ง absolute */
#รูปภาพ01 img {
position: absolute;   /* ตำแหน่งสัมพัทธ์กับ #รูปภาพ01 */
top: 0;         /* ตำแหน่งด้านบน */
left: 0;       /* ตำแหน่งด้านซ้าย */
width: 100%;       /* ความกว้างเต็มพื้นที่ */
height: 100%;      /* ความสูงเต็มพื้นที่ */
object-fit: cover;    /* ปรับขนาดภาพให้เต็มพื้นที่โดยรักษาสัดส่วน */
opacity: 0;          /* เริ่มต้นด้วยความโปร่งใส */
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%); }
}

#รูปภาพ02 {
position: relative;  /* เพื่อให้รูปภาพภายในใช้ตำแหน่ง absolute */
width: 350px;    /* ความกว้างอัตโนมัติ */
height: 200px;   /* ความสูงของรูปภาพ */
overflow: hidden;   /* ซ่อนส่วนที่เกิน */
border-radius: 20px;   /* มุมโค้งมน */
margin: 50px auto;   /* กึ่งกลางและระยะห่างด้านบน */
}

/* รูปภาพทั้งหมดใช้ตำแหน่ง absolute */
#รูปภาพ02 img {
position: absolute;   /* ตำแหน่งสัมพัทธ์กับ #รูปภาพ02 */
top: 0;         /* ตำแหน่งด้านบน */
left: 0;       /* ตำแหน่งด้านซ้าย */
width: 100%;       /* ความกว้างเต็มพื้นที่ */
height: 100%;      /* ความสูงเต็มพื้นที่ */
object-fit: cover;    /* ปรับขนาดภาพให้เต็มพื้นที่โดยรักษาสัดส่วน */
opacity: 0;          /* เริ่มต้นด้วยความโปร่งใส */
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%); }
}
#รูปภาพ03 {
position: relative;  /* เพื่อให้รูปภาพภายในใช้ตำแหน่ง absolute */
width: 350px;    /* ความกว้างอัตโนมัติ */
height: 200px;   /* ความสูงของรูปภาพ */
overflow: hidden;   /* ซ่อนส่วนที่เกิน */
border-radius: 20px;   /* มุมโค้งมน */
margin: 50px auto;   /* กึ่งกลางและระยะห่างด้านบน */
}
/* รูปภาพทั้งหมดใช้ตำแหน่ง absolute */
#รูปภาพ03 img {
position: absolute;   /* ตำแหน่งสัมพัทธ์กับ #รูปภาพ03 */
top: 0;         /* ตำแหน่งด้านบน */
left: 0;       /* ตำแหน่งด้านซ้าย */  
width: 100%;       /* ความกว้างเต็มพื้นที่ */
height: 100%;      /* ความสูงเต็มพื้นที่ */
object-fit: cover;    /* ปรับขนาดภาพให้เต็มพื้นที่โดยรักษาสัดส่วน */
opacity: 0;          /* เริ่มต้นด้วยความโปร่งใส */
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%); }
}

.ปุ่มสมัคร {
text-align: center;  /* จัดตำแหน่งเนื้อหาภายในให้กึ่งกลาง */
margin: 20px 0;   /* ระยะห่างด้านบนและล่าง */
}

.ปุ่มสมัคร button {
position: relative; /* เพื่อให้ ::before อยู่ภายในปุ่ม */
overflow: hidden;   /* ซ่อนส่วนที่เกิน */
width: 350px;  /* ความกว้างปุ่ม */
height: auto;  /* ความสูงปุ่ม */
background-color: #057ba9;  /* สีพื้นหลังปุ่ม */
color: #fff;  /* สีตัวอักษร */
border: none;  /* ไม่มีเส้นขอบ */
padding: 15px 30px;  /* ระยะห่างภายในปุ่ม */
font-size: 18px;  /* ขนาดตัวอักษร */
cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
border-radius: 20px; /* มุมปุ่มโค้งมน */
}

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

/* แอนิเมชันแสงเคลื่อน */
@keyframes shine {   /* กำหนดแอนิเมชัน */
0% {
left: -50%;    /* เริ่มต้นนอกปุ่มทางซ้าย */
}
100% {
left: 150%;   /* เคลื่อนที่ออกนอกปุ่มทางขวา */
}
}

.ปุ่มสมัคร button:hover {
background-color: #15e342;   /* สีพื้นหลังปุ่มเมื่อโฮเวอร์ */
transform: translateY(-2px);   /* ยกปุ่มขึ้นเล็กน้อย */
}


.แอดไลน์เลย {
text-align: center;   /* จัดตำแหน่งเนื้อหาภายในให้กึ่งกลาง */
margin: 20px 0;   /* ระยะห่างด้านบนและล่าง */
}

.แอดไลน์เลย button {
width: 350px;  /* ความกว้างปุ่ม */
height: 50px;   /* ความสูงปุ่ม */
background-color: #05a951;   /* สีพื้นหลังปุ่ม */
color: #fff;   /* สีตัวอักษร */
border: none;   /* ไม่มีเส้นขอบ */
padding: 15px 30px;   /* ระยะห่างภายในปุ่ม */
font-size: 18px;   /* ขนาดตัวอักษร */
cursor: pointer;   /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
border-radius: 20px;   /* มุมปุ่มโค้งมน */
}

@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255,165,0,0.7); }
70% { box-shadow: 0 0 0 15px rgba(255,165,0,0); }
100% { box-shadow: 0 0 0 0 rgba(255,165,0,0); }
}

.แอดไลน์เลย button {
background-color: #ff9900;
animation: pulse 2s infinite;
}

.แอดไลน์เลย button:hover {
background-color: #1500ff;  /* สีพื้นหลังปุ่มเมื่อโฮเวอร์ */
transition: background-color .3s;   /* การเปลี่ยนสีพื้นหลังอย่างนุ่มนวล */
transform: translateY(-2px);  /* ยกปุ่มขึ้นเล็กน้อย */
}

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

.คาสิโน img {
width: 350px;   /* ความกว้างของรูปภาพ */
height: auto;   /* ความสูงอัตโนมัติเพื่อรักษาสัดส่วน */
border-radius: 20px;   /* มุมโค้งมน */
height: 200px;   /* ความสูงของรูปภาพ */
box-shadow: 0 4px 8px rgba(0, 0, 0, .2);   /* เงารอบรูปภาพ */
}

.สล็อต {
text-align: center;   /* จัดตำแหน่งเนื้อหาภายในให้กึ่งกลาง */
margin: 20px 0;   /* ระยะห่างด้านบนและล่าง */
}

.สล็อต img {
width: 350px;   /* ความกว้างของรูปภาพ */
height: auto;   /* ความสูงอัตโนมัติเพื่อรักษาสัดส่วน */
border-radius: 20px;   /* มุมโค้งมน */
height: 200px;   /* ความสูงของรูปภาพ */
box-shadow: 0 4px 8px rgba(0, 0, 0, .2);   /* เงารอบรูปภาพ */
}

.กล่องรีวิว {
width: 350px;   /* ความกว้างของกล่องรีวิว */
height: auto;   /* ความสูงอัตโนมัติเพื่อรักษาสัดส่วน */
margin: 20px auto;   /* ระยะห่างด้านบนและล่าง และกึ่งกลาง */
padding: 15px;   /* ระยะห่างภายใน */
border-radius: 20px;   /* มุมโค้งมน */
background-color: rgba(239, 0, 0, 0.6);   /* สีพื้นหลังแบบโปร่งแสง */
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);   /* เงารอบกล่องรีวิว */
position: relative;   /* ตำแหน่งสัมพัทธ์ */
}

.กล่องรีวิว h2 {
text-align: center;   /* จัดตำแหน่งเนื้อหาภายในให้กึ่งกลาง */
color: #ffffff;   /* สีตัวอักษร */
margin-bottom: 15px;   /* ระยะห่างด้านล่าง */
}

.รีวิวเดี่ยว {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
animation: fade 0.3s ease-in-out;
}

.รีวิวเดี่ยว img {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}

.ข้อความ {
max-width: 220px;       /* ความกว้างสูงสุดของฟองแชท */
padding: 10px 15px;        /* ระยะห่างภายในฟองแชท */
border-radius: 15px;       /* มุมโค้งมนของฟองแชท */
margin-left: 10px;            /* ระยะห่างด้านซ้ายของฟองแชท */
background-color: #e4f1fe;       /* สีพื้นหลังของฟองแชท */
color: #333;
position: relative;        /* เพื่อให้ ::before อยู่ภายในฟองแชท */
}

/* “หาง” ของฟองแชท */
.ข้อความ::before {
content: "";           /* เนื้อหาว่าง */
position: absolute;     /* ตำแหน่งสัมพัทธ์กับฟองแชท */
top: 10px;          /* ตำแหน่งด้านบนของ “หาง” */
left: -8px;           /* ตำแหน่ง “หาง” ทางซ้าย */
width: 0;         /* ไม่มีขนาด */
height: 0;         /* ไม่มีขนาด */
border-top: 8px solid transparent;        /* สีของ “หาง” ของฟองแชท */
border-right: 8px solid #e4f1fe;      /* สีของ “หาง” ของฟองแชท */
border-bottom: 8px solid transparent;          /* สีของ “หาง” ของฟองแชท */
}

/* ข้อความฝั่งขวา (รีวิวอีกคน) */
.รีวิวเดี่ยว.ขวา {
flex-direction: row-reverse;         /* สลับตำแหน่งรูปภาพและข้อความ */
}

.รีวิวเดี่ยว.ขวา .ข้อความ {
margin-left: 0;            /* ลบการตั้งค่าระยะห่างด้านซ้าย */
margin-right: 10px;         /* ระยะห่างด้านขวา */
background-color: #cce5ff;     /* สีพื้นหลังของฟองแชทฝั่งขวา */
}

.รีวิวเดี่ยว.ขวา .ข้อความ::before {
left: auto;         /* ลบการตั้งค่าตำแหน่งซ้าย */
right: -8px;        /* ปรับตำแหน่ง “หาง” ไปทางขวา */
border-right: none;          /* ลบเส้นขอบด้านขวา */
border-left: 8px solid #cce5ff;       /* สีของ “หาง” ของฟองแชท */
}

.ข้อความ h3 {
font-size: 0.95rem;     /* ขนาดตัวอักษรของชื่อผู้รีวิว */
margin: 0 0 4px;      /* ระยะห่างด้านล่าง */
color: #0066cc;    /* สีตัวอักษรของชื่อผู้รีวิว */
}

.ข้อความ p {
margin: 0;    /* ลบระยะห่างรอบนอก */
font-size: 0.9rem;   /* ขนาดตัวอักษรของข้อความรีวิว */
color: #444;     /* สีตัวอักษรของข้อความรีวิว */
}

@keyframes fade {    /* กำหนดแอนิเมชัน */
from { opacity: 0; transform: translateY(5px); }  /* เริ่มต้นด้วยความโปร่งใสและเลื่อนขึ้นเล็กน้อย */
to { opacity: 1; transform: translateY(0); }  /* เพิ่มแอนิเมชันเล็กน้อยเมื่อรีวิวปรากฏขึ้น */
}

.โบนัส {
width: 350px;   /* ความกว้างของกล่องรีวิว */
height: auto;   /* ความสูงอัตโนมัติเพื่อรักษาสัดส่วน */
margin: 20px auto;   /* ระยะห่างด้านบนและล่าง และกึ่งกลาง */
padding: 15px;   /* ระยะห่างภายใน */
border-radius: 20px;   /* มุมโค้งมน */
background-color: rgba(15, 242, 7, 0.6);   /* สีพื้นหลังแบบโปร่งแสง */
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);   /* เงารอบกล่องรีวิว */
position: relative;   /* ตำแหน่งสัมพัทธ์ */
}

.โบนัส h2 {
text-align: center;   /* จัดตำแหน่งเนื้อหาภายในให้กึ่งกลาง */
color: #ffffff;   /* สีตัวอักษร */
margin-bottom: 15px;   /* ระยะห่างด้านล่าง */
}

.โบนัสเดี่ยว {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #007bff, #5ab0ff);
color: #ffffff;
margin-bottom: 15px;
padding: 12px 16px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
animation: fade 0.5s ease-in-out;
}

.โบนัสเดี่ยว h3 {
text-align: center;
font-size: 1.50rem;
margin: 0 0 6px;
font-weight: 600;
}

.โบนัสเดี่ยว::after {
content: "";  /* เนื้อหาว่าง */
position: absolute; /* ตำแหน่งสัมพัทธ์กับปุ่ม */
top: 0;  /* ตำแหน่งด้านบน */
left: -50%;   /* เริ่มต้นนอกปุ่มทางซ้าย */
width: 50%;   /* ความกว้างของแสง */
height: 100%;  /* ความสูงเต็มปุ่ม */
background: linear-gradient(120deg,transparent,rgba(0, 255, 217, 0.6),transparent); /* สีแสงแบบไล่ระดับ */
transform: skewX(-20deg);  /* เอียงแสง */
animation: โบนัสเดี่ยว 2s linear infinite;  /* เรียกใช้แอนิเมชัน */
}
@keyframes โบนัสเดี่ยว {   /* กำหนดแอนิเมชัน */
0% {
left: -50%;    /* เริ่มต้นนอกปุ่มทางซ้าย */
}
100% {
left: 100%;   /* เคลื่อนที่ออกนอกปุ่มทางขวา */
}
}

.โบนัสเดี่ยว:hover {
background: linear-gradient(135deg, #0056b3, #3399ff);
transition: background .3s;
}

@keyframes fade {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes เด้งขึ้น {
0% { transform: translateY(20px); opacity: 0; }
50% { transform: translateY(-5px); opacity: 1; }
100% { transform: translateY(0); }
}

.โบนัสเดี่ยว p {
font-family: ""Prompt"", sans-serif;
background: linear-gradient(135deg, #ffb347, #ffcc33);
padding: 10px 20px;
border-radius: 10px;
font-weight: bold;
color: #000000;
animation: เด้งขึ้น 0.8s ease-out;
}