/* ===========================
   Cấu trúc chung
=========================== */
.home-popup {
    display: none;
}
.home-popup.active {
    display: block;
}

/* Nền mờ */
.home-popup__background {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    animation: fadeIn 0.3s ease;
}

/* Khung nội dung */
.home-popup__content {
    position: relative;
    width: 95%;
    max-width: 1200px;
    background: transparent;
}

/* Container banner */
.banner-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.banner-image-thong-bao {
    width: 100%;
    max-height: 70vh; /* Giới hạn tối đa 90% chiều cao màn hình */
    height: auto; /* Tự co chiều cao theo tỉ lệ */
    object-fit: contain; /* hoặc cover nếu muốn full */
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    animation: scaleIn 0.3s ease;
}
/* Nút đóng */
.home-popup__close-area {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgb(239, 239, 239);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.home-popup__close-area:hover {
    background: #ddd;
}
.home-popup__close-button {
    width: 16px;
    height: 16px;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2px;
}

/* ===========================
   Hiệu ứng
=========================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 768px) {
    .banner-image {
        height: auto; /* Để ảnh tự co */
    }
}
@media (max-width: 480px) {
    .banner-image {
        border-radius: 8px;
    }
}
/* Nút đóng */
.home-popup__close-area {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgb(239, 239, 239);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.home-popup__close-area:hover {
    background: #ddd;
}

.home-popup__close-button {
    width: 16px;
    height: 16px;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2px;
    transition: transform 0.3s ease; /* hiệu ứng xoay */
}

.home-popup__close-area:hover .home-popup__close-button {
    transform: rotate(180deg); /* xoay khi hover */
}