/* Đảm bảo trang web hiển thị đúng trên mọi màn hình */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  width: 100%;
}

body {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: url('../picture/hinhnen.png');
  background-size: cover; /* Đảm bảo ảnh nền bao phủ toàn bộ màn hình */
  background-attachment: fixed; /* Giữ ảnh nền cố định khi cuộn */
  background-position: center;
  overflow-x: auto;
  /* border: 10px solid #921111;
  border-radius: 40px;
  box-shadow: 0 0 0 20px #921111; */
}

/* Container bao quanh các nút */
.button-container-cu {
  position: relative;
  display: flex;
  flex-direction: column; /* Đặt nút theo chiều dọc */
  justify-content: center;
  align-items: center;
  width: 100%;
  top: 275px;
}

.button-container {
  position: fixed; /* Đặt container cố định so với cửa sổ trình duyệt */
  bottom: 30px; /* Cố định ở dưới cùng màn hình */
  left: 0; /* Căng ra toàn bộ chiều ngang màn hình */
  width: 100%; /* Đặt chiều rộng bằng chiều rộng màn hình */
  display: grid; /* Sử dụng flexbox để căn giữa các nút */
  flex-direction: row; /* Đặt nút theo chiều ngang */
  justify-content: center; /* Căn giữa các nút theo chiều ngang */
  align-items: center; /* Căn giữa các nút theo chiều dọc */
  background-color: #fff0f; /* Màu nền để các nút dễ nhìn hơn */
  padding: 0px; /* Khoảng cách bên trong container */
  /* Tạo bóng cho container */
  /* box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);  */
  z-index: 1000; /* Đảm bảo container nằm trên các phần tử khác */
}


/* Styling cho các nút */
.floating-button {
  padding: 10px 20px;
  font-size: 17px;
  color: #dbff5b;
  background-color: #0a6f0aba;
  border: none;
  border-radius: 35px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 10px 0; /* Thêm khoảng cách giữa các nút */
}

/* Thay đổi màu nền khi hover */
.floating-button:hover {
  background-color: #2b5c91;
}


/* hiệu ứng tuyết rơi trên web */

#heart-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.heart {
  width: 15px;
  height: 15px;
  position: absolute;
  background-color: red;
  transform: rotate(45deg);
  animation: fall linear infinite;
}

.heart:before,
.heart:after {
  content: "";
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
}

.heart:before {
  top: -7.5px;
  left: 0;
}

.heart:after {
  left: 7.5px;
  top: 0;
}

@keyframes fall {
  0% {
      top: -10%;
      opacity: 1;
  }
  100% {
      top: 110%;
      opacity: 0;
  }
}


@keyframes sparkle {
            0% {
                text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 20px #ff0, 0 0 40px #ff0, 0 0 80px #ff0;
                color: #fff;
            }
            25% {
                text-shadow: 0 0 5px #fff, 0 0 10px rgb(91, 202, 97), 0 0 20px rgb(71, 206, 41), 0 0 40px rgb(24, 204, 39), 0 0 80px rgb(27, 217, 2);
                color: #00a516;
            }
            50% {
                text-shadow: 0 0 5px #fff, 0 0 10px #f0f, 0 0 20px #f0f, 0 0 40px #f0f, 0 0 80px #f0f;
                color: #f0f;
            }
            75% {
                text-shadow: 0 0 5px #fff, 0 0 10px rgb(158, 66, 170), 0 0 20px rgb(175, 36, 164), 0 0 40px rgb(151, 28, 192), 0 0 80px rgb(152, 11, 208);
                color: rgb(124, 0, 152);
            }
            100% {
                text-shadow: 0 0 5px #fff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff, 0 0 80px #0ff;
                color: #0ff;
            }
        }

.sparkle-text {
            font-weight: bold; /* Độ đậm của chữ */
            /* animation: sparkle 2s infinite;       Áp dụng hiệu ứng lấp lánh */
            text-shadow: 0 0 40px #f0f;
        }
        
.swala2-popup {
           height: 550px;
        }