body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Chiều cao toàn màn hình */
    margin: 0;

}

.background-container {
    display: none; /* Ẩn background container ban đầu */
    justify-content: center;
    align-items: center;
    background-image: url("—Pngtree—note calendar hand painted frame_3852728.png");
    flex-direction: column; /* Đặt hướng dọc nếu cần */
    width: 100%; /* Đảm bảo chiếm toàn bộ chiều rộng */
    height: 100vh; /* Full viewport height */
    background-size: contain; /* Đảm bảo ảnh nền nằm gọn trong phần tử */
    background-repeat: no-repeat; /* Ngăn ảnh nền bị lặp lại */
    background-position: center; /* Căn giữa ảnh nền */
}

#calendar {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Bố cục 7 cột */
    gap: 4px 2px;
    padding: 4px; /* Cách đều bên trong */
    border-radius: 15px; /* Bo góc */
    max-width: 90%;
    width: 600px;
    margin-top: 14%;
    margin-left: 30%;
    justify-items: center; /* Cn giữa các phần tử con trong grid */
    align-items: center;
}
.background-image{
    justify-content: center;
    align-items: center;
}

.day {
    padding: 15px; /* Giảm kích thước vùng nhấn */
    font-size: 20px; /* Giảm kích thước chữ */
    font-weight: bold; /* Tăng độ đậm của chữ */
    text-align: center;
    cursor: pointer;
    border-radius: 10px; /* Bo góc lớn hơn */
    transition: transform 0.2s ease, background-color 0.2s ease; /* Hiệu ứng chuyển đổi khi di chuột */
    color: #091057;
    display: flex; /* Sử dụng flexbox để căn giữa nội dung */
    height: 30px;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
}

.day:hover {
    background-color: #cce5ff; /* Màu nền khi di chuột */
    transform: scale(1.1); /* Tăng kích thước khi di chuột */
}

#image-display {
    transform: translate(-50%, -50%); /* Căn chỉnh hoàn toàn ở giữa */
    border: 5px solid #333; /* Đường viền quanh hình ảnh hiển thị */
    border-radius: 15px; /* Bo góc lớn hơn */
    background-color: white; /* Nền màu trắng */
    padding: 0; /* Không padding */
    z-index: 1000; /* Ưu tiên hiển thị */
    width: 70%; /* Chiều rộng tối đa của phần hiển thị */
    max-width: 450px; /* Giới hạn chiều rộng trên màn hình lớn */
    height: auto; /* Chiều cao tự động *
    opacity: 0; /* Bắt đầu ở trạng thái ẩn */
    transform: scale(0.8); /* Bắt đầu nhỏ hơn một chút */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Hiệu ứng mượt khi chuyển đổi */
    display: flex; /* Căn giữa nội dung */
    justify-content: center;
    align-items: center;
}

#day-image {
    max-width: 100%; /* Chiều rộng tối đa của hình ảnh */
    max-height: 100%; /* Chiều cao tối đa */
    object-fit: contain; /* Giữ tỉ lệ gốc của hình ảnh */
    border-radius: 10px; /* Bo góc hình ảnh */
    transform: scale(1); /* Giữ kích thước ban đầu */
    transition: transform 0.5s ease; /* Hiệu ứng mượt khi thu phóng */
}

#image-display.show {
    display: flex; /* Hiển thị khi được kích hoạt */
    opacity: 1; /* Hiển thị với độ trong suốt hoàn toàn */
    transform: scale(1); /* Kích thước ban đầu */
}

.hidden {
    display: none; /* Ẩn phần tử */
}
.container {
    width: min(1000px, 100%);
    margin: 0 auto;
  }

  .gift-box { margin-top: 2em; }
  .gift-box__emoji { font-size: 10em; }
  .gift-box__btn { font-size: 2em; }
  .gift-box__emoji--claimed {
    transition: transform 500ms ease;
    transform: scale(1.5) rotate(12deg);
  }

  .gift-box__message {
    margin-top: 4.5em;
    font-size: 2em;
    transition: all 500ms ease;
  }
  .gift-box__message--hidden {
    opacity: 0;
    transform: scale(0.95);
  }

  @keyframes joggle {
    0%, 33%, 100% { transform: rotate(0deg); }
    3.33% { transform: rotate(-10deg); }
    6.67% { transform: rotate(12deg); }
    10% { transform: rotate(-10deg); }
    13.33% { transform: rotate(9deg); }
    16.67% { transform: rotate(0deg); }
  }

  .fade-out {
    opacity: 1;
    transition: opacity 0.5s ease-in;
  }

  .fade-out.hide {
    opacity: 0;
  }

  .zoom-in {
    transform: scale(0);
    transition: transform 0.5s ease-in, opacity 0.5s ease-in;
    opacity: 0;
  }

  .zoom-in.show {
    transform: scale(1);
    opacity: 1;
  }