/* ===== BOTTOM BANNER - GAMING NEON ===== */
.bottom-banner{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;

    background: rgba(15, 15, 25, 0.88);
    border-top: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);

    z-index: 9999;
    overflow: hidden;
}

/* neon line */
.bottom-banner::before{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    top:-1px;
    height:2px;
    background:linear-gradient(90deg, transparent, #00ffff, #ff00cc, transparent);
    opacity:.9;
}

/* glow 2 bên */
.bottom-banner::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background: radial-gradient(circle at left, rgba(0,255,255,.10), transparent 40%),
                radial-gradient(circle at right, rgba(255,0,200,.10), transparent 40%);
}

/* TRACK SCROLL */
.banner-track{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    height:100%;
    gap:12px;
    padding: 0 12px;

    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
}

.banner-track::-webkit-scrollbar{
    display:none;
}

/* ITEM */
.banner-item{
    flex:0 0 auto;
    height:40px;
    width:40px;
    border-radius:12px;
    overflow:hidden;

    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);

    box-shadow: 0 8px 18px rgba(0,0,0,.45);
    transition: .22s ease;
}

/* IMG */
.banner-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* hover đẹp hơn */
.banner-item:hover{
    transform: translateY(-2px) scale(1.08);
    border-color: rgba(0,255,255,0.35);
    box-shadow: 0 14px 26px rgba(0,0,0,.6);
}

/* click */
.banner-item:active{
    transform: scale(0.96);
}

/* ===== ĐẨY NỘI DUNG LÊN (QUAN TRỌNG) ===== */
body{
    padding-bottom: 56px;
}