/* ลบ background ออกจาก html, body เพื่อให้เบราว์เซอร์โฟกัสการเรนเดอร์ที่จุดเดียว */
html,
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #3bc47a;
}

.body-content {
  background: linear-gradient(-45deg, #3bc47a 0%, #64d0a2 20%, #85dbe4 40%, #b6c6f6 60%, #f2c1d1 80%, #3bc47a 100%);
  background-size: 300% 300%;
  position: relative;
  min-height: calc(100vh - var(--footer-height, 0px));
  overflow-x: hidden;
  animation: moveGradient 20s ease infinite;

  transform: translateZ(0);
  will-change: background-position;
}

@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.body-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.08;
}

/* ------------------------------------------------------------------ 
   (โค้ดส่วนของ .login-page, .login-box และไอคอนต่างๆ ใช้ของเดิมที่คุณจัดตำแหน่งไว้ได้เลยครับ)
------------------------------------------------------------------ */

.login-page {
  width: 545px;
  margin: 10vh auto; /* ปรับ margin ให้ยืดหยุ่นตามความสูงของจอ */
  display: flex;
  align-items: center;
  gap: 40px;
  /* เพิ่ม position: relative เพื่อให้ไอคอนซ้ายขวาเกาะติดกับกล่องนี้ */
  position: relative;
}

#login-form {
  position: relative;
  z-index: 2;
}

.login-box {
  width: 400px;
  height: 550px;
  background: rgba(255, 255, 255, 0.397);
  padding: 51px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  box-shadow: 8px 0px 10px rgba(0, 0, 0, 0.2);
}

.login-box-footer {
  background: rgba(255, 255, 255, 0.432);
}

.left-icons,
.right-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.left-icons {
  position: absolute;
  top: 94%;
  transform: translateY(-50%);
  left: 10px;
}

.right-icons {
  position: absolute;
  top: 79%;
  transform: translateY(-50%);
}

.left-icons img {
  transition: transform 0.5s ease;
}

.left-icons img:hover {
  transform: rotate(10deg) scale(1.03);
}

/* ------------------------------------------------------------------ Animation -------------------------------------------------- */
.circle-deco {
  position: absolute;
  background: radial-gradient(circle, #f0f0f0d6, #ffffff00);
  border-radius: 50%;
  z-index: 1;
  animation: float 3s ease-in-out infinite;
}

.circle-top-left {
  width: 500px;
  height: 500px;
  top: -152px;
  left: -188px;
}

.circle-bottom-right {
  width: 400px;
  height: 400px;
  bottom: 60px;
  right: -284px;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(20px);
  }
  100% {
    transform: translatey(0px);
  }
}

/* ------------------------------------------------------------------ Animation -------------------------------------------------- */

.no-text-spinner {
  text-align: center;
  padding: 45px;
}

.circle-spin {
  width: 30px;
  height: 30px;
  /* เปลี่ยนสีขอบ Spinner เป็นสีหลัก #3bc47a */
  border: 3px solid #3bc47a;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}