﻿.reward-popup {
    position: fixed;
    bottom: 95px; /* Né tawk.to */
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Căn giữa linh hoạt */
    left: 50%;
    transform: translate(-50%, 20px);
    width: max-content; /* Chỉ rộng bằng đúng nội dung */
    max-width: 95%; /* Không bao giờ vượt quá chiều ngang màn hình */
}

.reward-popup.show {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.reward-body {
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 202, 40, 0.5);
    display: flex;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    font-family: Arial, sans-serif;
}

.reward-icon {
    margin-right: 8px;
    font-size: 14px;
    flex-shrink: 0; /* Không cho icon bị bóp méo */
}

#reward-text {
    font-size: 12.5px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis; /* Nếu dài quá thì hiện dấu ... */
}

    #reward-text b {
        color: #ffca28;
        white-space: nowrap;
    }

/* PC: Đẩy về góc trái */
@media (min-width: 768px) {
    .reward-popup {
        left: 20px;
        transform: translateX(-110%);
        margin: 0;
    }

        .reward-popup.show {
            transform: translateX(0);
        }
}
