/* --- THIẾT LẬP KHUNG CHỨA --- */
.section-2-perks .relative-container {
    position: relative;
    width: 100%;
}

.section-2-perks .main-bg {
    width: 100%;
    height: auto;
    display: block;
}

/* --- STYLE BIỂU TƯỢNG 25% OFF --- */
.badge-25-off {
    position: absolute;
    display: block;
    z-index: 10;
}

.badge-25-off img {
    width: 100%;
    height: auto;
    /* Đổ bóng giúp biểu tượng nổi bật hẳn khỏi ảnh nền */
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4));
}

/* --- HIỆU ỨNG NHẢY (PULSE & FLOAT) --- */
@keyframes float-badge {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-12px) scale(1.05);
    }

    /* Nhảy lên và to ra nhẹ */
    100% {
        transform: translateY(0) scale(1);
    }
}

.badge-25-off {
    animation: float-badge 2.5s infinite ease-in-out;
}

.badge-25-off:hover {
    transform: scale(1.1);
    animation-play-state: paused;
    /* Dừng nhảy khi đưa chuột vào */
}

.badge-pc {
    width: 22%;
    top: 42%;
    /* Giảm từ 55% xuống khoảng 42% để đẩy lên cao */
    right: 11%;
    /* Căn giữa nhẹ lại cho khớp với QR */
}

/* --- ĐỊNH VỊ MOBILE --- */
/* --- ĐỊNH VỊ MOBILE --- */
.badge-mobile {
    width: 19%;
    /* Có thể thu nhỏ lại một chút (từ 32% xuống 28%) để không bị lẹm viền */
    top: 76%;
    /* Tăng vọt con số này lên để đẩy biểu tượng chìm sâu xuống vùng nền đen dưới cùng */
    right: 25%;
    /* Căn lề phải. Tăng lên 10% hoặc 15% nếu bạn muốn nó nhích gần sát vào mã QR hơn */
}