
.notification-box {
  background: linear-gradient(135deg, #007bff, #f000);
  color: white;
  padding: 7px 7px; /* ลดขนาด padding ลง 3 เท่า */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* จัดเรียงให้อยู่ทางซ้าย */
  opacity: 100%;
  animation: slideIn 2s forwards;
  font-size: 6px; /* ลดขนาด font-size ลง 3 เท่า */
}

/* โลโก้ */
.notification-box i {
  font-size: 10px;
  margin-right: 0px; /* เพิ่มระยะห่างจากข้อความ */
}

/* สไตล์ข้อความที่สไลด์ */
.notification-message {
  color: while;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  margin-left: 0px; /* ให้ข้อความเริ่มจากข้างๆ โลโก้ */
  animation: slideText 37s linear infinite;
}

/* การแอนิเมชันสำหรับกล่องแจ้งเตือน */
@keyframes slideIn {
from {
  transform: translateX(-100%);
}
to {
  transform: translateX(0);
}
}

/* การแอนิเมชันสำหรับข้อความที่สไลด์ */
@keyframes slideText {
  0% {
      transform: translateX(100%); /* เริ่มจากขวา */
  }
  100% {
      transform: translateX(-100%); /* เลื่อนไปซ้ายสุด */
  }
}


.container-lucky {
  margin-top: 10px;

}

/* Optional: Style for the contents inside the container */
.container-lucky h2 {
  color: #ffab0f; /* Heading color */
  margin-bottom: 15px; /* Space below the heading */
}

/* Optional: Style for the contents inside the container */
.container-lucky h2 {
  color: #ffab0f; /* Heading color */
  margin-bottom: 15px; /* Space below the heading */
}

.container-lucky p {
  color: #ffffff; /* Text color */
  font-size: 16px; /* Font size for paragraphs */
}

/* Adjustments for any buttons inside the container */
.container-lucky button {
  background-color: #ffab0f; /* Button color */
  color: #fff; /* White text */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  padding: 5px 5px; /* Padding inside the button */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.container-lucky button:hover {
  background-color: #e09e0f; /* Darker shade on hover */
}

