*{
    margin: 0; /*คือการตั้งค่าระยะห่างรอบนอกขององค์ประกอบทั้งหมดเป็น 0 */
    padding: 0; /*คือการตั้งค่าระยะห่างภายในขององค์ประกอบทั้งหมดเป็น 0 */
    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(10, 250, 50, 0.5);
    }
    100% {
        box-shadow: 0 0 15px 5px rgb(18, 253, 61);
    }
}

.รูป1 {
     margin: 0 auto; /* จัดกึ่งกลางแนวนอน */
     margin-top: 90px; /* ระยะห่างด้านบน */
     width: 100%; /* ความกว้างเต็ม */
     max-width: 450px; /* ความกว้างสูงสุด */
     height: 200px; /* ความสูงของกล่อง */
     border-radius: 20px; /* มุมโค้งของขอบ */
     position: relative; /* กำหนดตำแหน่งสัมพัทธ์ */
     z-index: 1; /* กำหนดลำดับชั้นขององค์ประกอบ */
     overflow: hidden; /* ซ่อนส่วนที่เกินออกจากกล่อง */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* เงาของกล่อง */
     border: 2px solid #00ff33; /* ขอบของกล่อง */
}

.รูป1 img {
    width: 100%; /* ความกว้างเต็ม */
    height: 100%; /* ความสูงเต็ม */
    border-radius: 10px; /* มุมโค้งของขอบ */
}

.สมัครสมาชิก {
  display: flex; /* ใช้ Flexbox ในการจัดเรียง */
  justify-content: center; /* จัดกึ่งกลางแนวนอน */
  margin: 40px 0; /* ระยะห่างด้านบนและด้านล่าง */
}

#สมัครสมาชิก {
  position: relative; /* กำหนดตำแหน่งสัมพัทธ์ */
  isolation: isolate; /* แยกบริเวณขององค์ประกอบออกจากกัน */
  padding: 15px 120px; /* ระยะห่างภายในของปุ่ม */
  border: 0; /* ไม่มีขอบ */
  border-radius: 999px; /* มุมโค้งของปุ่ม */
  background: #101018; /* สีพื้นหลังของปุ่ม */
  color: #ffffff; /* สีตัวอักษรของปุ่ม */
  font: 700 18px/1.2 inherit; /* กำหนดฟอนต์ของปุ่ม */
  cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ที่ปุ่ม */
  overflow: hidden; /* ซ่อนส่วนที่เกินออกจากปุ่ม */
  transition: transform 0.25s ease, box-shadow 0.25s ease; /* เพิ่มการเปลี่ยนแปลงเมื่อชี้ที่ปุ่ม */
}

/* แสงวิ่งรอบขอบแบบใหม่ */
#สมัครสมาชิก::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -80%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 70deg,
    #00e5ff 100deg,
    #ffffff 120deg,
    #ff38bd 140deg,
    transparent 170deg 360deg
  );
  animation: border-light 1.8s linear infinite;
}

/* พื้นด้านในของปุ่ม */
#สมัครสมาชิก::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #151526, #08080e);
}

@keyframes border-light {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.แอดไลน์ {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  font-size: 18px; /* ขนาดตัวอักษร */
}

#แอดไลน์ {
  position: relative; /* กำหนดตำแหน่งสัมพัทธ์ */
  isolation: isolate; /* แยกบริเวณขององค์ประกอบออกจากกัน */
  padding: 15px 130px; /* ระยะห่างภายในของปุ่ม */
  border: none; /* ไม่มีขอบ */
  border-radius: 999px; /* มุมโค้งของปุ่ม */
  background: #0b0f0c; /* สีพื้นหลังของปุ่ม */
  color: #fff; /* สีตัวอักษรของปุ่ม */
  font: 700 18px/1.2 inherit; /* กำหนดฟอนต์ของปุ่ม */
  cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อชี้ที่ปุ่ม */
  overflow: hidden; /* ซ่อนส่วนที่เกินออกจากปุ่ม */
  transition: 0.3s ease; /* เพิ่มการเปลี่ยนแปลงเมื่อชี้ที่ปุ่ม */
}

/* ขอบแสงวิ่งรอบปุ่ม */
#แอดไลน์::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -90%;
  background: conic-gradient(
    transparent 0deg 90deg,
    #00ff66 120deg,
    #ffffff 145deg,
    #06c755 165deg,
    transparent 195deg 360deg
  );
  animation: line-border-run 2s linear infinite;
}

/* พื้นในปุ่ม + แสงวิ่งผ่านด้านในตลอด */
#แอดไลน์::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px;
  border-radius: inherit;
  background:
    linear-gradient(
      110deg,
      #07150b 0%,
      #102d19 38%,
      #39ff88 50%,
      #102d19 62%,
      #07150b 100%
    );
  background-size: 250% 100%;
  animation: light-inside-run 2.2s linear infinite;
}

#แอดไลน์:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 16px rgba(0, 255, 102, 0.75),
    0 0 35px rgba(6, 199, 85, 0.45);
}

@keyframes line-border-run {
  to {
    transform: rotate(360deg);
  }
}

@keyframes light-inside-run {
  from {
    background-position: 200% center;
  }
  to {
    background-position: -100% center;
  }
}