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

body {
    background-image: url('../images/01.jpg');  /* ตั้งค่าภาพพื้นหลัง */
    background-size: cover;  /* ปรับขนาดภาพให้เต็มพื้นที่ */
    background-position: center;  /* จัดตำแหน่งภาพตรงกลาง */
}

nav {
    background-color: rgba(16, 4, 158, 0.555);  /* สีพื้นหลังโปร่งแสง */
    backdrop-filter: blur(10px);  /* เบลอพื้นหลัง */
    padding: 10px 20px;  /* ระยะห่างภายใน */
    width: 100%;  /* ความกว้างเต็ม */
    height: 60px;  /* ความสูงของแถบนำทาง */
    top: 0;
    z-index: 1000;  /* วางอยู่ด้านบน */
}
nav img {
    height: 80px;  /* ความสูงของภาพ */
    width: 80px;  /* ความกว้างของภาพ */
    margin-top: -20px;  /* ระยะห่างด้านบน */
    object-fit: contain;  /* ปรับขนาดภาพให้พอดีกับกรอบ */
    border-radius: 50%;  /* ทำให้ภาพเป็นวงกลม */
    margin-right: 10px;  /* ระยะห่างขวา */
    cursor: pointer;  /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
    transition: transform 0.3s;  /* เพิ่มการเปลี่ยนแปลงเมื่อชี้ */
    animation: alternateGlow 3s infinite alternate; /* แอนิเมชันเรืองแสง */
}
nav img:hover {
    transform: scale(1.1);  /* ขยายภาพเมื่อชี้ */
}
@keyframes alternateGlow {
    0% {
        filter: drop-shadow(0 0 8px rgb(0, 204, 255));   /* เงาสีฟ้าอ่อน */
    }
    20% {
        filter: drop-shadow(0 0 8px rgb(255, 0, 0));   /* เงาสีแดง */
    }
    40% {
        filter: drop-shadow(0 0 8px rgb(0, 255, 0));   /* เงาสีเขียว */
    }
    60% {
        filter: drop-shadow(0 0 8px rgb(255, 255, 255));   /* เงาสีขาว */
    }
    80% {
        filter: drop-shadow(0 0 8px rgb(255, 0, 255));   /* เงาสีม่วง */
    }
    100% {      
        filter: drop-shadow(0 0 8px rgb(212, 255, 0));   /* เงาสีฟ้าอ่อน */
    }
}
.สไลด์โชว์, .สไลด์โชว์2 {
  margin: 0 auto; /* กึ่งกลางในแนวนอน */
  margin-top: 20px; /* ระยะห่างด้านบน */
  width: 100%; /* ความกว้างเต็มหน้าจอ */
  max-width: 450px; /* ความกว้างสูงสุด */
  height: 200px; /* ความสูงของสไลด์โชว์ */
  border-radius: 15px; /* มุมโค้งของสไลด์โชว์ */
  position: relative; /* ตำแหน่งสัมพัทธ์ */
  z-index: 1; /* ระดับซ้อน */
  overflow: hidden; /* ซ่อนส่วนที่เกิน */
}

#สไลด์โชว์ img, #สไลด์โชว์2 img {
    display: block;  /* แสดงเป็นบล็อก */
    margin: auto;  /* จัดกึ่งกลาง */
    width: 100%;  /* ความกว้างเต็ม */
    height: 100%;  /* ความสูงเต็ม */
    max-width: 380px;  /* ความกว้างสูงสุด */
    max-height: 200px;  /* ความสูงสูงสุด */
    border-radius: 15px;  /* มุมโค้งมน */
    object-fit: cover;  /* ปรับขนาดภาพให้เต็มกรอบ */
    border: 2px solid #00ff11;  /* ขอบสีเขียว */
    filter: drop-shadow(0 0 8px rgba(0, 204, 255, 0.8));  /* เงาสีฟ้าอ่อน */
    position: relative;  /* ตำแหน่งสัมพัทธ์ */
    overflow: hidden;  /* ซ่อนส่วนที่เกิน */
    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: block;  /* แสดงเป็นบล็อก */
    margin: auto;  /* จัดกึ่งกลาง */
    padding: 15px 30px;  /* ระยะห่างภายในปุ่ม */
    font-size: 18px;  /* ขนาดตัวอักษร */
    width: 300px;    /* ความกว้างปุ่ม */
    height: 50px;   /* ความสูงปุ่ม */
    border: none;   /* ไม่มีขอบ */
    outline: none;    /* ไม่มีเส้นขอบเมื่อโฟกัส */
    color: #fff;     /* สีตัวอักษร */
    background: #111111;    /* สีพื้นหลังปุ่ม */
    cursor: pointer;    /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
    position: relative;   /* ตำแหน่งสัมพัทธ์ */                  
    z-index: 0; /* ตั้งค่า z-index */
    border-radius: 10px;        /* มุมโค้งมน */
}

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

#สมัครสมาชิก:active {
    color: #000;        /* เปลี่ยนสีตัวอักษรเมื่อกด */
}

#สมัครสมาชิก:active:after {
    background: transparent;        /* เปลี่ยนพื้นหลังเป็นโปร่งใสเมื่อกด */
}

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

@keyframes glowing {
    0%   { background-position: 0 0; }      /* ตำแหน่งพื้นหลังเริ่มต้น */
    50%  { background-position: 400% 0; }       /* ตำแหน่งพื้นหลังกลาง */
    100% { background-position: 0 0; }    /* ตำแหน่งพื้นหลังสิ้นสุด */
}

#แอดไลน์ {
  display: block;  /* แสดงเป็นบล็อก */
  margin: auto;  /* จัดกึ่งกลาง */
  width: 305px;   /* ความกว้างปุ่ม */
  position: relative;  /* ตำแหน่งสัมพัทธ์ */
  margin-top: 20px;  /* ระยะห่างด้านบน */
  padding: 14px 8px;   /* ระยะห่างภายในปุ่ม */
  background: linear-gradient(145deg, #0f0f0f, #1c1c1c);  /* สีพื้นหลังไล่ระดับ */
  border: 2px solid rgba(255, 255, 255, 0.2);  /* ขอบโปร่งแสง */
  border-radius: 10px;   /* มุมโค้งมน */
  color: #fff;   /* สีตัวอักษร */      
  font-size: 16px;   /* ขนาดตัวอักษร */
  letter-spacing: 0.5px;    /* ระยะห่างระหว่างตัวอักษร */
  cursor: pointer;    /* เปลี่ยนเคอร์เซอร์เมื่อชี้ */
  overflow: hidden;         /* ซ่อนส่วนที่เกิน */
  transition: all 0.4s ease-in-out;         /* การเปลี่ยนแปลงทั้งหมด */
  z-index: 1;       /* ตั้งค่า z-index */
  margin-bottom: 30px; /* ระยะห่างด้านล่าง */
}

#แอดไลน์::before { 
  content: "";      /* เนื้อหาว่าง */
  position: absolute;  /* ตำแหน่งสัมพัทธ์ */
  top: -50%;         /* ระยะห่างด้านบน */
  left: -50%;    /* ระยะห่างด้านซ้าย */
  width: 200%;        /* ความกว้างเพิ่มขึ้น */
  height: 2000%;         /* ความสูงเพิ่มขึ้น */
  background: conic-gradient(from 0deg, #00ffff, #ff0000, #ea00ff);   /* สีรุ้งแบบวงกลม */
  animation: rotate 4s linear infinite;         /* แอนิเมชันหมุน */
  z-index: -2;          /* วางไว้ด้านหลัง */
}

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

#แอดไลน์:hover {
  transform: scale(1.05);       /* ขยายปุ่มเมื่อชี้ */
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);         /* เงาเข้มขึ้นเมื่อชี้ */
}         

#แอดไลน์:hover .ลูกศร { 
  transform: translateX(6px);    /* เลื่อนลูกศรเมื่อชี้ */
}

@keyframes rotate {      /* แอนิเมชันหมุน */
  0% {
    transform: rotate(0deg);      /* หมุนเริ่มต้น */
  }
  100% {
    transform: rotate(360deg);    /* หมุนครบ 360 องศา */
  }
}

.รีวิว {
    margin: 40px auto; /* กึ่งกลางในแนวนอนและระยะห่างด้านบน */
    max-width: 380px; /* ความกว้างสูงสุด */
    background: rgba(0, 0, 0, 0.5); /* สีพื้นหลังโปร่งแสง */
    border-radius: 15px; /* มุมโค้งของกล่องรีวิว */
    overflow: hidden; /* ซ่อนส่วนที่เกิน */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* เงาของกล่องรีวิว */
    font-family: "Prompt", sans-serif; /* กำหนดฟอนต์ */
    border: 2px solid #00ff11;  /* ขอบสีเขียว */
    filter: drop-shadow(0 0 8px rgba(0, 204, 255, 0.5)); /* เงาของกล่องรีวิว */
    margin-top: 5px; /* ระยะห่างด้านบน */
    margin-bottom: 100px; /* ระยะห่างด้านล่าง */
}

.รีวิว h2 {
    margin-bottom: 10px; /* ระยะห่างด้านล่างของหัวข้อรีวิว */
    font-size: 28px; /* ขนาดตัวอักษรของหัวข้อรีวิว */
    font-weight: bold; /* ตัวหนาของหัวข้อรีวิว */
    text-align: center;  /* จัดกึ่งกลางข้อความ */
    color: #ffffff;   /* สีข้อความ */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* เงาของข้อความ */

}

.รีวิว h3 {
    margin-bottom: 15px; /* ระยะห่างด้านล่างของหัวข้อรีวิว */
    font-size: 24px; /* ขนาดตัวอักษรของหัวข้อรีวิว */
    font-weight: bold; /* ตัวหนาของหัวข้อรีวิว */
    text-align: center;  /* จัดกึ่งกลางข้อความ */
    color: #ffffff;   /* สีข้อความ */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* เงาของข้อความ */
    margin-bottom: 50px; /* ระยะห่างด้านล่างของหัวข้อรีวิว */
}

/* กล่องรีวิวรวม */
#รีวิวข้อความ {
  display: flex;    /* ใช้ Flexbox สำหรับจัดวางรายการรีวิว */
  flex-direction: column;   /* จัดเรียงรายการรีวิวในแนวตั้ง */
  gap: 14px;    /* ระยะห่างระหว่างรายการรีวิว */
  padding: 20px;       /* ระยะห่างภายในกล่องรีวิวรวม */
  border-radius: 10px;      /* มุมโค้งของกล่องรีวิวรวม */
  max-width: 380px;         /* ความกว้างสูงสุดของกล่องรีวิวรวม */
  margin: 0 auto;           /* จัดกึ่งกลางกล่องรีวิวรวม */
  font-family: "Prompt", sans-serif;        /* กำหนดฟอนต์ */
}

/* รายการรีวิวแต่ละอัน */
.รีวิว-item {     /* รายการรีวิวแต่ละอัน */
  display: flex;    /* ใช้ Flexbox สำหรับจัดวางเนื้อหา */
  align-items: flex-start;  /* จัดชิดด้านบน */ 
  gap: 10px;        /* ระยะห่างระหว่างรูปกับข้อความ */
  position: relative;       /* ตั้งตำแหน่งแบบสัมพัทธ์ */
}

/* รูปโปรไฟล์ */
.รีวิว-item img {         /* รูปโปรไฟล์ */
  width: 46px;              /* ขนาดรูปโปรไฟล์ */
  height: 46px;     /* ขนาดรูปโปรไฟล์ */
  border-radius: 50%;           /* ทำให้รูปเป็นวงกลม */
  object-fit: cover;        /* ครอบตัดรูปให้พอดี */
  flex-shrink: 0;       /* ไม่ย่อขนาดรูปโปรไฟล์ */
  border: 2px solid #00ff11;  /* ขอบสีเขียว */
  filter: drop-shadow(0 0 8px rgba(0, 204, 255, 0.5)); /* เงาของรูปโปรไฟล์ */
}

/* กล่องข้อความรีวิว */
.รีวิว-content {
  background: #ffffff;  /* สีครีมอ่อนตามภาพตัวอย่าง */
  color: #044fff;           /* สีข้อความ */
  padding: 10px 14px;       /* ระยะห่างภายในกล่องข้อความรีวิว */
  border-radius: 18px;          /* มุมโค้งของกล่องข้อความรีวิว */
  max-width: 75%;               /* กำหนดความกว้างสูงสุด */
  position: relative;           /* ตั้งตำแหน่งแบบสัมพัทธ์ */
}

/* ลูกศรชี้ไปทางรูป (ทางซ้าย) */
.รีวิว-content::before {          /* สร้างลูกศร */
  content: "";          /* เนื้อหาว่าง */
  position: absolute;    /* ตั้งตำแหน่งแบบสัมพัทธ์ */
  left: -8px;    /* ตำแหน่งด้านซ้ายของลูกศร */
  top: 16px;   /* ตำแหน่งด้านบนของลูกศร */
  width: 0;    /* ไม่กำหนดขนาด */
  height: 0;    /* ไม่กำหนดขนาด */
  border-top: 7px solid transparent;   /* ความกว้างของลูกศร */
  border-bottom: 7px solid transparent;  /* ความสูงของลูกศร */
  border-right: 8px solid #fdebd0; /* สีเดียวกับกล่องรีวิว */
}

/* เว้นฝั่งขวาสำหรับรีวิวที่สลับข้าง */
.รีวิว-item:nth-child(even) {    /* รายการรีวิวที่ 2, 4, 6,... */
  flex-direction: row-reverse;   /* สลับตำแหน่งรูปกับข้อความ */
}

.รีวิว-item:nth-child(even) .รีวิว-content {   /* กล่องข้อความรีวิวฝั่งขวา */
  background: #dcfce7;  /* สีฟ้าอ่อนตามภาพตัวอย่าง */
}

.รีวิว-item:nth-child(even) .รีวิว-content::before {
  left: auto;   /* ยกเลิกการตั้งค่าตำแหน่งซ้าย */
  right: -8px;   /* เปลี่ยนตำแหน่งลูกศรไปทางขวา */
  border-right: none;   /* ลบขอบขวา */
  border-left: 8px solid #ffffff; /* สีเดียวกับบับเบิลฝั่งขวา */
}

/* ชื่อกับข้อความ */
.รีวิว-content h4 {
  margin: 0;   /* ลบระยะห่างรอบหัวข้อ */
  font-size: 14px;    /* ขนาดตัวอักษรหัวข้อ */
  font-weight: 600;  /* ความหนาของตัวอักษรหัวข้อ */
}

.รีวิว-content p {
  margin: 3px 0 0;   /* ระยะห่างด้านบนของย่อหน้าข้อความ */
  font-size: 13px;    /* ขนาดตัวอักษรข้อความ */
  line-height: 1.4;   /* ระยะห่างระหว่างบรรทัดข้อความ */
}