body {
  background-color: #ffe6eb;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
  display: flex;
  justify-content: center;
}

button {
  padding: 15px 30px;
  font-size: 18px;
  background-color: #ff7aa8;
  justify-content: center;
  display: flex;
  border: none;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

button:hover {
  background-color: #ff4d88;
}

.hidden {
  display: none;
}

#countdown {
  font-size: 40px;
  margin-top: 20px;
  color: #ff3366;
}

#hearts {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.heart {
  position: absolute;
  color: #ff3366;
  font-size: 24px;
  animation: float 4s linear infinite;
}

@keyframes float {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-400px) scale(0.5); opacity: 0; }
}

/* Thư */
.envelope {
  background: #fff;
  border: 2px solid #ff7aa8;
  border-radius: 10px;
  width: 300px;
  margin: 0 auto;
  position: relative;
  padding: 20px;
  animation: openLetter 1.5s ease forwards;
}

.flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background-color: #ffb6c1;
  border-radius: 10px 10px 0 0;
}

.letter-content {
  position: relative;
  margin-top: 60px;
  color: #333;
}

@keyframes openLetter {
  0% { transform: rotateX(90deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
#secondLetter {
  text-align: center;
  animation: auto;
  margin-top: 40px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.heart-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto; /* Căn giữa container */
  display: flex;
  justify-content: center;
  align-items: center;
}


.big-heart {
  font-size: 80px;
  position: absolute;
  z-index: 2;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.small-heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 -90px; /* <-- CỰC QUAN TRỌNG: đây là tâm quay thật */
  color: #ff4d88;
  font-size: 22px;
  animation: orbit 4s linear infinite;
}
@keyframes orbit {
  0%   { transform: rotate(0deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
@keyframes orbit {
  0%   { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(360deg) translateY(0); }
}
/* Nút mở thư tiếp theo */
#nextLetterBtn {
  display: inline-block;       /* để nó căn giữa dễ hơn */
  margin: 20px auto 0;         /* căn giữa và cách trên 20px */
  background-color: #ff80b0;
  border: none;
  padding: 10px 25px;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
   opacity: 1;
  transition: all 0.5s ease;
}
#nextLetterBtn:hover {
  background-color: #ff4d88;
  transform: translateY(-2px);
   opacity: 1;
}