.banner-intro-widget {
    display: flex;
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;

    /* Mặc định banner trượt xuống 30px và mờ */
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.9s ease, opacity 0.9s ease;
}

.banner-intro-widget.active {
    transform: translateY(0);
    opacity: 1;
}

/* Khung mô tả chữ nhật + gradient viền */
.banner-intro-left-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.banner-intro-left {
    position: relative;
    max-width: 90%;
    padding: 15px 15px;
    border: 1px solid #fff;
    border-radius: 10px;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    color: #fff;
    overflow: hidden;
    z-index: 2;
}

.banner-intro-left::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background:
        linear-gradient(90deg, transparent 45%, #00ffff 50%, transparent 55%) 0 0,
        linear-gradient(90deg, transparent 45%, #ff00ff 50%, transparent 55%) 0 100%,
        linear-gradient(0deg,  transparent 45%, #ffff00 50%, transparent 55%) 0 0,
        linear-gradient(0deg,  transparent 45%, #00ff00 50%, transparent 55%) 100% 0;
    background-repeat: no-repeat;
    background-size: 200% 2px, 200% 2px, 2px 200%, 2px 200%;
    animation: borderMove 4s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes borderMove {
    0% { background-position: 0 0, 200% 100%, 0 0, 100% 200%; }
    25% { background-position: 100% 0, 100% 100%, 0 100%, 100% 200%; }
    50% { background-position: 200% 0, 0 100%, 0 200%, 100% 100%; }
    75% { background-position: 100% 0, 100% 100%, 0 0, 100% 0; }
    100% { background-position: 0 0, 200% 100%, 0 0, 100% 200%; }
}

/* Hình tròn danh mục */
.banner-intro-right {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.banner-intro-cat {
    margin: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.3s;
}

.banner-intro-cat img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* Hover phóng to */
.banner-intro-cat img:hover {
    transform: scale(1.2);
}

/* Responsive */
@media (max-width:1024px){
    .banner-intro-widget { flex-direction: column; height:auto; }
    .banner-intro-left-wrapper, .banner-intro-right { width:100%; }
    .banner-intro-cat { width:80px; height:80px; }
}

@media (max-width:600px){
    .banner-intro-cat { width:60px; height:60px; }
}