body {
  background-color: #fff4eb;
}

.container .box-main {
  background-color: rgba(255, 255, 255, 0.75); /* พื้นหลังขาวโปร่งแสง 20% */
  backdrop-filter: blur(5px); /* เบลอพื้นหลังด้านหลัง container */
  -webkit-backdrop-filter: blur(5px); /* Safari */
  border-radius: 12px; /* มุมโค้งเล็กน้อย */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* เงานุ่ม ๆ */
}

.floating-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.bubble {
  --size: clamp(10px, 2.5vw, 22px);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--orange, #e03131); /* fallback เป็นแดงกลาง */
  opacity: 0.7;
  animation: move-x var(--durX, 10s) linear var(--delay, 0s) infinite alternate,
    move-y var(--durY, 12s) linear var(--delay, 0s) infinite alternate;
}

/* 10 เฉด "แดง → ขาว" ไล่ซ้ำทุก 10 วง */
.bubble:nth-child(10n + 1)  { --orange: #c92a2a; } /* แดงเข้ม */
.bubble:nth-child(10n + 2)  { --orange: #e03131; }
.bubble:nth-child(10n + 3)  { --orange: #f03e3e; }
.bubble:nth-child(10n + 4)  { --orange: #fa5252; }
.bubble:nth-child(10n + 5)  { --orange: #ff6b6b; }
.bubble:nth-child(10n + 6)  { --orange: #ff8787; }
.bubble:nth-child(10n + 7)  { --orange: #ffa8a8; }
.bubble:nth-child(10n + 8)  { --orange: #ffc9c9; }
.bubble:nth-child(10n + 9)  { --orange: #ffe3e3; }
.bubble:nth-child(10n + 10) { --orange: #fff5f5; } /* เกือบขาว */

/* เคลื่อนไหว */
@keyframes move-x {
  to {
    transform: translateX(calc(95vw - var(--size)));
  }
}

@keyframes move-y {
  to {
    transform: translateY(calc(90vh - var(--size)));
  }
}

/* ความเร็วสุ่มและขนาด */
.bubble:nth-child(odd) {
  --durX: 7s;
  --durY: 9s;
}
.bubble:nth-child(even) {
  --durX: 12s;
  --durY: 14s;
}
.bubble:nth-child(3n) {
  --delay: -2s;
}
.bubble:nth-child(4n) {
  --size: clamp(14px, 3vw, 28px);
}

@media (prefers-reduced-motion: reduce) {
  .bubble {
    animation: none;
  }
}