/* styles.css */


.notification-container {
    background-color: rgb(255, 255, 255); /* Giảm độ mờ của nền để hiệu ứng blur rõ hơn */
    border: 1px solid rgba(0, 0, 0, 0.08); /* Viền mỏng hơn, tinh tế hơn */
    padding: 20px;
    border-radius: 16px; /* Bo tròn góc phổ biến trên macOS */
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0,0,0,0.05); /* Đổ bóng mềm mại và có chiều sâu hơn */
    max-width: 320px; /* Tăng nhẹ max-width nếu cần */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1002;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    /* Hỗ trợ Safari */
}

.notification-image {
    width: 275px;
    height: auto;
    border-radius: 12px; /* Bo tròn nhẹ nhàng hơn cho ảnh nếu nó không phải hình tròn */
    /* Nếu muốn ảnh hình tròn, giữ lại border-radius: 50%; */
    display: block;
    margin: 0 auto 15px auto; /* Tăng nhẹ margin bottom */
    z-index: 1002; /* z-index này có thể không cần thiết nếu nó nằm trong .notification-container đã có z-index cao */
}

.support-text {
    font-size: 15px;
    color: #333; /* Màu chữ tối hơn một chút để dễ đọc hơn trên nền sáng */
    margin-bottom: 15px;
}

#lucky-envelope {
    position: absolute;
    margin-left: 15%;
    top: 10%;
    width: 145px;
  
    background-color: transparent;
    border-radius: 10px; /* Giữ nguyên hoặc điều chỉnh cho phù hợp */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Cao hơn notification-container nếu nó cần nổi lên trên */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Sử dụng cubic-bezier cho chuyển động mượt hơn */
}

#lucky-envelope:hover {
    transform: scale(1.1);
}

#lucky-envelope img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px; /* Đồng bộ với #lucky-envelope */
}

#hidden-content {
   background-color: rgb(255, 255, 255); /* Giảm độ mờ của nền để hiệu ứng blur rõ hơn */
    border: 1px solid rgba(0, 0, 0, 0.08); /* Viền mỏng hơn, tinh tế hơn */
    padding: 20px;
    border-radius: 16px; /* Bo tròn góc phổ biến trên macOS */
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0,0,0,0.05); /* Đổ bóng mềm mại và có chiều sâu hơn */
    max-width: 320px; /* Tăng nhẹ max-width nếu cần */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1002;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    /* Hỗ trợ Safari */

    /* Kiểu cho hiệu ứng xuất hiện */
    opacity: 0;
    transform: translateY(10px) scale(0.98); /* Xuất hiện từ dưới lên và phóng to nhẹ */
    visibility: hidden; /* Ẩn ban đầu */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.25s; /* visibility thay đổi sau khi opacity hoàn tất */
}

#hidden-content.visible { /* Lớp để kích hoạt hiệu ứng xuất hiện */
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    transition-delay: 0s, 0s, 0s; /* Reset delay khi hiển thị */
}