/*.min-ava-2:hover {*/
/*  filter: brightness(1) !important;*/
/*}*/

            .mini-avatar,
            .mini-glow {
                transition: filter 0.3s ease, transform 0.3s ease;
                /*filter: brightness(0.9);*/
            }

            /* Mặc định avatar sẽ không bị to ra */
            .mini-avatar {
                transform: scale(1);
                width: 77px;
            }

            /* Hover avatar 1 → sáng & scale avatar 1 và glow 1 */
            .min-ava-1:hover {
                /*filter: brightness(1.25);*/
                transform: scale(1.03);
            }
            .min-ava-1:hover + .min-gl-1 {
                /*filter: brightness(1.25);*/
                transform: scale(1.3);
            }

            /* Hover avatar 2 → sáng & scale avatar 2, glow 1, glow 2 */
            .min-ava-2:hover {
                transform: scale(1.03);
                /*filter: brightness(1.25);*/
            }
            .min-ava-2:hover + .min-gl-2,
            .min-ava-2:hover ~ .min-gl-1 {
                transform: scale(1.3);
                /*filter: brightness(1.25);*/
            }

            /* Hover avatar 3 → sáng & scale avatar 3, glow 2, glow 3 */
            .min-ava-3:hover {
                /*filter: brightness(1.25);*/
                transform: scale(1.03);
            }
            .min-ava-3:hover + .min-gl-3,
            .min-ava-3:hover ~ .min-gl-2 {
                transform: scale(1.3);
                /*filter: brightness(1.25);*/
            }

            /* Hover avatar 4 → sáng & scale avatar 4, glow 3 */
            .min-ava-4:hover {
                /*filter: brightness(1.25);*/
                transform: scale(1.03);
            }
            .min-ava-4:hover ~ .min-gl-3 {
                /*filter: brightness(1.25);*/
                transform: scale(1.3); /* cho cái light glow nó scale to hơn */
            }
            
/* --------------------------- */
/* BASE GLOW: TOP + BOTTOM     */
/* --------------------------- */
.section-6 .left-grid {
        background-image: url(https://learningchain.vn/wp-content/uploads/2025/12/glow-sss-1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    
.left-grid {
  position: relative;
  overflow: hidden;
}

/* ánh sáng phía trên + dưới */
.left-grid::before, 
.left-grid::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  filter: brightness(5);
}

/* TOP glow */
.left-grid::before {
  top: -100%; /* xuất phát từ trên */
  /*background-image: url("https://learningchain.vn/wp-content/uploads/home-page/top.png");*/
  background-image: url("https://learningchain.vn/wp-content/uploads/2025/12/a.png");
}

/* BOTTOM glow */
.left-grid::after {
  top: 100%; /* xuất phát từ dưới */
  /*background-image: url("https://learningchain.vn/wp-content/uploads/home-page/bottom.png");*/
  background-image: url("https://learningchain.vn/wp-content/uploads/2025/12/b.png");                                                                                                                                                                                                                                                                                                                                                                                                                
}

.left-grid.active-glow::before,
.left-grid.active-glow::after {
  top: 0;
  opacity: 1;
}

/* avatar nằm trên cùng */
.left-grid .big-avatar {
  position: relative;
  z-index: 3;
}

/* --------------------------- */
/* ANIMATION CHUẨN: TRÊN/XUỐNG */
/* --------------------------- */

.left-grid.animate::before {
  animation: glowTop 0.6s ease forwards;
}

.left-grid.animate::after {
  animation: glowBottom 0.6s ease forwards;
}


/* hiệu ứng xuất hiện từ TRÊN */
@keyframes glowTop {
  0% {
    opacity: 0;
    top: -100%;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

/* hiệu ứng xuất hiện từ DƯỚI */
@keyframes glowBottom {
  0% {
    opacity: 0;
    top: 100%;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}



.mini-ava-img-container {
        position: relative;
        display: inline-block;
        overflow: visible;
    }

    /* --- Overlay đen khi INACTIVE (mặc định) --- */
    .mini-ava-img-container::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -5px;
        height: 50%;
        background: linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.25) 60%,
            rgba(0, 0, 0, 0) 100%
        );
        opacity: 1;                /* luôn hiện khi chưa active */
        transform: translateY(0);
        transition: opacity 3s ease, filter 3s ease;
        z-index: 3;
        pointer-events: none;
    }

    /* --- Ảnh nằm phía trên overlay --- */
    .mini-ava-img-container img.mini-avatar {
        margin: 0 auto;
        position: relative;
        z-index: 2;
        width: 80%;
        display: block;
        top: -3px;

        opacity: 0.55;
        transition: opacity .35s ease;
    }

    /* --- Trạng thái ACTIVE: bỏ lớp phủ đen + tạo glow sáng --- */
    .mini-ava-img-container.min-ava-active::after {
        opacity: 0; /* tắt overlay đen */
    }
    /* Ảnh active fade-in sáng hơn */
    .mini-ava-img-container.min-ava-active img.mini-avatar {
        opacity: 1;
    }

    .mini-ava-img-container::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("https://learningchain.vn/wp-content/uploads/thu-vien/avatar-frame.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;

        width: 100%;
        height: 100%;
        filter: brightness(0);
        opacity: 0;
        transition: opacity 3s ease, filter 3s ease; /* hiệu ứng fade */
        pointer-events: none;
    }

    .mini-ava-img-container.min-ava-active::before {
        filter: brightness(2.5);
        opacity: 2.5;
    }

    /* Khi inactive thì glow tắt */
    .mini-ava-img-container:not(.min-ava-active)::before {
        filter: brightness(0);
        opacity: 0;
    }

    .big-avatar {
        opacity: 1;
        transition: opacity 0.15s ease; /* fade nhẹ nhàng 0.15s */
    }

    /* Trạng thái ẩn khi chuẩn bị đổi ảnh */
    .big-avatar.fade-out {
        opacity: 0;
    }