* {
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
  font-family: 'Pacifico', cursive;
}
html, body {
width: 100%; 
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #fff0f5;
overflow: hidden;
position: relative;
font-family: Arial, sans-serif;
}


.container {
  position: relative;
  width: 15vw;
  height: 15vw;
  cursor: pointer;
}

.gift-box {
  font-size: 15vw;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: heartbeat 2s infinite;
  transition: transform 0.5s ease;
  position: relative;
  z-index: 10;
}

/* Thu nhỏ hộp quà */
.gift-box.shrink {
  animation: none;
  transform: scale(0);
  transition: transform 0.6s ease;
}

/* Các trái tim nhỏ */
.heart {
  position: absolute;
  font-size: 3vw;
  color: #ff4d6d;
  opacity: 1;
  user-select: none;
  animation: flyAway 1.5s forwards ease-out;
  pointer-events: none;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
}

@keyframes flyAway {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(0.5);
  }
}

/* Tin nhắn và hình ảnh ẩn */
.message-container {
display: none;
text-align: center;
max-width: 320px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
flex-direction: column;
align-items: center;
gap: 12px;
}


.message-container.active {
  display: flex;
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.message-text {
  font-size: 2.5rem;
  color: #c71585; /* màu hồng lãng mạn */
  min-height: 2em; /* để tránh nhảy layout khi gõ chữ */
  white-space: nowrap; /* không xuống dòng giữa chừng */
  overflow: hidden;
}

.message-gif {
  width: 350px;
  height: auto;
  border-radius: 10px;
  user-select: none;
}

#countdown{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10rem;
  color: #ff1493;
  display: none;
}

@media (max-width: 480px) {
  .message-text {
    font-size: 1rem;
  }
}

@media (min-width: 481px) and (max-width: 1024px) {
  .message-text {
    font-size: 1.5rem;
  }
}

@media (min-width: 1025px) {
  .message-text {
    font-size: 2rem;
  }
}