body { background: #f2f3f5; font-family: Arial, sans-serif; }
.main-wrapper { max-width: 520px; margin: 0 auto; padding: 15px; }

/* Banner */
.banner img { width: 100%; border-radius: 6px 6px 0 0; }
.marquee-news { background: #1c2833; padding: 6px 0; border-bottom: 3px solid #e74c3c; margin-top: -5px; }
.marquee-news span { color: white; font-size: 13px; font-weight: 500; }

/* Card & Tabs */
.card-custom { border: none; border-radius: 0 0 6px 6px; }
.tab-header { display: flex; background: #dfe4ea; }
.tab-btn { flex: 1; border: none; padding: 12px; font-size: 14px; font-weight: bold; cursor: pointer; color: #57606f; transition: 0.3s; }
.tab-btn.active { background: #dc3545; color: white; }

/* Form inputs */
.small-label { font-size: 12px; font-weight: bold; margin-bottom: 2px; color: #2f3542; }
.form-control-sm { border-radius: 4px; border: 1px solid #ced4da; height: 42px; font-size: 14px; }
.btn-submit { height: 45px; font-size: 16px; border-radius: 5px; box-shadow: 0 4px #c0392b; }
.btn-submit:active { box-shadow: 0 1px #c0392b; transform: translateY(3px); }

/* Loading */
#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; display: none; flex-direction: column; justify-content: center; align-items: center; color: white; }
.lds-ring { display: inline-block; position: relative; width: 64px; height: 64px; }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 51px; height: 51px; margin: 6px; border: 6px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent; }
@keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Table History */
.table td { padding: 10px 5px !important; vertical-align: middle; }
.badge-success { background-color: #2ecc71; padding: 5px 8px; font-size: 11px; }
/* Tạo thanh cuộn cho danh sách súng */
.gift-scroll {
    max-height: 250px; /* Chiều cao tối đa của danh sách quà */
    overflow-y: auto;  /* Hiện thanh cuộn dọc */
    border: 1px solid #eee;
    border-radius: 5px;
}

/* Tùy chỉnh icon cho súng */
.list-group-item i {
    width: 20px;
    margin-right: 10px;
}

/* Màu tím cho súng M1887 */
.text-purple {
    color: #9b59b6;
}

/* Tùy chỉnh ảnh súng trong danh sách quà */
.img-gift {
    width: 45px;          /* Độ rộng của ảnh */
    height: auto;         /* Giữ tỉ lệ ảnh */
    margin-right: 12px;   /* Khoảng cách với tên súng */
    border-radius: 4px;   /* Bo góc nhẹ cho ảnh */
    object-fit: contain;  /* Đảm bảo ảnh nằm gọn trong khung */
}

/* Căn chỉnh lại dòng trong list-group */
.list-group-item {
    transition: background 0.2s;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}
.img-gift {
    width: 50px;
    height: auto;
    margin-right: 15px;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.5)); /* Tạo hiệu ứng hào quang đỏ cho súng */
}

.gift-scroll {
    max-height: 350px;
    overflow-y: auto;
}
/* Thêm vào cuối file style.css */
.img-gift {
    width: 45px;
    height: auto;
    margin-right: 12px;
    border-radius: 4px;
    object-fit: contain;
}

.gift-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.badge-danger {
    cursor: pointer;
}
/* Làm nổi bật tiêu đề phân loại trong danh sách chọn thẻ */
optgroup {
    color: #dc3545; /* Màu đỏ thương hiệu của bạn */
    font-weight: bold;
    font-style: normal;
    background: #fff;
}

/* Giữ màu chữ các lựa chọn bên trong là màu đen bình thường */
optgroup option {
    color: #2f3542;
    font-weight: normal;
}


/* Container chính cho đối tác */
.ytb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Hiển thị 4 cột trên PC */
    gap: 10px;
    padding: 10px;
}

/* Style cho từng item */
.ytb-item {
    text-align: center;
}

.ytb-item img {
    width: 100%;
    max-width: 60px; /* Thu nhỏ ảnh đại diện */
    border-radius: 50%;
    border: 2px solid #ffd700;
}

.ytb-name {
    font-size: 11px; /* Chữ nhỏ lại */
    margin-top: 5px;
    margin-bottom: 2px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.small-text {
    font-size: 9px !important; /* Badge nhỏ lại */
    padding: 2px 5px !important;
}

/* Tối ưu riêng cho Điện thoại */
@media (max-width: 576px) {
    .img-ytb {
        width: 50px;
        height: 50px;
    }
    
    .ytb-item img {
        max-width: 50px; /* Ảnh nhỏ hơn trên mobile */
    }

    .avatar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

    /* Thu nhỏ các tag LIVE/HOT trên mobile */
    .live-tag {
        font-size: 8px;
        padding: 1px 4px;
    }
}

.border-gold-glow {
    border: 1px solid #ffeaa7;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.2) !important;
}

.img-ytb {
    width: 60px;          /* Chiều rộng cố định */
    height: 60px;         /* Chiều cao cố định bằng chiều rộng */
    object-fit: cover;    /* Cắt ảnh thông minh để không bị méo/bầu */
    border-radius: 50%;   /* Tạo hình tròn hoàn hảo */
    border: 2px solid #ffd700; 
    display: block;
    margin: 0 auto;
}
  /* /* Để thanh Marquee mượt mà hơn trên điện thoại, bạn có thể thêm CSS này */

.marquee-news {
    overflow: hidden; /* Ẩn phần dư thừa */
    background: #fffbe6;
    border-bottom: 1px solid #ffe58f;
    padding: 8px 0;
    white-space: nowrap;
    position: relative;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%; /* Đẩy nội dung bắt đầu từ ngoài màn hình */
    animation: marquee-run 180s linear infinite; /* Chạy liên tục trong 180 giây */
}

.marquee-content span {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    display: inline-block;
}

/* Định nghĩa chuyển động */
@keyframes marquee-run {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Tạm dừng khi di chuột vào (tùy chọn) */
.marquee-news:hover .marquee-content {
    animation-play-state: paused;
}

/* / bang lich su  */
#history_body tr:first-child {
    background-color: #fff9db;
    animation: highlight 2s ease-out;
}

@keyframes highlight {
    from { background-color: #ffe066; }
    to { background-color: transparent; }
}

/* Background riêng cho trang nhận KC */
/* Trang KC Free */
#free-gift-page {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/bg-free.jpg');
    background-size: cover;
    background-position: center;
    overflow-y: auto;
}

.shadow-text { text-shadow: 0 0 10px #ff0000; }
.bg-white-transparent { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); }
/* .blink-text { animation: blinker 1s linear infinite; } */
@keyframes blinker { 50% { opacity: 0; } }

/* Hiệu ứng nhấp nháy liên tục */
.blink-text {
    animation: blinker 0.8s linear infinite;
}

@keyframes blinker {
    0% { opacity: 1; }
    50% { opacity: 0.1; }
    100% { opacity: 1; }
}

/* Thêm hiệu ứng đổi màu nếu muốn nổi bật hơn nữa */
.blink-text:hover {
    color: #ffcc00 !important;
    text-decoration: none;
}


/* Giao diện thông báo nhỏ ở góc (Toast) */
.toast-notification {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 300px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-left: 6px solid #28a745 !important; /* Màu xanh lá cho thành công */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    z-index: 999999 !important;
    animation: slideInRight 0.4s ease-out !important;
}

/* Thu nhỏ Icon cho vừa với góc */
.toast-notification .swal-icon {
    transform: scale(0.5) !important;
    margin: -15px auto !important;
}

/* Chỉnh chữ nhỏ gọn */
.toast-notification .swal-title {
    font-size: 14px !important;
    margin: 0 !important;
    padding: 10px !important;
    color: #333 !important;
}

/* Hiệu ứng trượt từ phải sang */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* CSS Đẩy thông báo SweetAlert về góc màn hình */
.toast-notification {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 280px !important;
    padding: 10px !important;
    font-size: 13px !important;
    animation: slideInRight 0.4s ease-out !important;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ÉP THÔNG BÁO XUỐNG GÓC DƯỚI BÊN PHẢI */
body .swal-overlay.swal-overlay--show-modal .swal-modal.toast-notification {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 280px !important;
    margin: 0 !important;
    padding: 10px !important;
    background: #fff !important;
    border-left: 5px solid #28a745 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    animation: slideInRight 0.4s ease-out !important;
}

/* Xử lý lớp nền mờ (overlay) để không chặn click của người dùng */
body .swal-overlay.swal-overlay--show-modal {
    background-color: transparent !important;
    pointer-events: none !important; /* Cho phép click xuyên qua lớp nền */
}

.swal-modal.toast-notification {
    pointer-events: auto !important; /* Vẫn cho phép click vào thông báo */
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.rainbow-blink {
    font-weight: bold;
    animation: rainbow-animation 2s linear infinite, blink-animation 0.8s linear infinite;
}

@keyframes rainbow-animation {
    0% { color: #ff0000; }
    30% { color: #ffff00; }
    60% { color: #0000ff; }
    100% { color: #ff0000; }
}

@keyframes blink-animation {
    50% { opacity: 0.3; }
}

/* Khung chứa ảnh với viền LED nét đứt RGB */
/* Khung chứa ảnh với viền LED nét đứt RGB */
.led-box {
    position: relative;
    padding: 6px; /* Khoảng cách viền */
    display: inline-block;
    border-radius: 15px;
    
    /* Tạo viền nét đứt 7 màu */
    border: 4px dashed;
    border-image: conic-gradient(from 0deg, red, orange, yellow, green, cyan, blue, violet, red) 1;
    
    /* Hiệu ứng chạy vòng quanh */
    animation: rotate-led 1.5s linear infinite;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

/* Hiệu ứng xoay màu sắc tạo cảm giác nét đứt đang chạy */
@keyframes rotate-led {
    100% { filter: hue-rotate(360deg); }
}

.led-box img {
    display: block;
    border-radius: 8px;
    background: white;
}

/* Tùy chỉnh nút VÀO TRANG NGAY xịn hơn */
.swal-button--confirm {
    background: linear-gradient(45deg, #ff0000, #ff8800) !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4) !important;
    padding: 12px 30px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    animation: pulse-button 2s infinite !important;
}

/* Hiệu ứng di chuột vào nút */
.swal-button--confirm:hover {
    background: linear-gradient(45deg, #ff8800, #ff0000) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.6) !important;
}

/* Hiệu ứng nhịp đở (Pulse) cho nút thêm sinh động */
@keyframes pulse-button {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* Giữ nguyên viền LED nét đứt cho GIF */
.led-box {
    position: relative;
    padding: 6px;
    display: inline-block;
    border-radius: 15px;
    border: 4px dashed;
    border-image: conic-gradient(from 0deg, red, orange, yellow, green, cyan, blue, violet, red) 1;
    animation: rotate-led 1.5s linear infinite;
}

@keyframes rotate-led {
    100% { filter: hue-rotate(360deg); }
}