/* ===================================
   MAIN BANNER
=================================== */

.main-container{
    display:flex;
    gap:20px;
    align-items:stretch;
    margin-bottom:25px;
    position:relative;
    z-index:1;
}
.img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
    background:#fff;
}
/* ===================================
   LEFT SLIDE
=================================== */

.left-slide{
    flex:1.4;
    overflow:hidden;
    border-radius:20px;
    background:#fff;
    position:relative;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.swiper{
    width:100%;
    height:100%;
}

.swiper-slide{
    width:100%;
    height:100%;
}

.swiper-slide img{
    width:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.left-slide:hover img{
    transform:scale(1.03);
}

/* ===================================
   RIGHT GRID
=================================== */

.right-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.grid-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.grid-item img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.grid-item:hover img{
    transform:scale(1.05);
}

/* ===================================
   BORDER EFFECT
=================================== */

.image-frame{
    position:relative;
    cursor:pointer;
}

.image-frame::before,
.image-frame::after,
.image-frame span::before,
.image-frame span::after{
    content:'';
    position:absolute;
    background:#fff;
    transition:all .4s ease;
    z-index:2;
}

.image-frame::before{
    height:1px;
    width:0;
    top:10px;
    left:10px;
}

.image-frame::after{
    width:1px;
    height:0;
    top:10px;
    right:10px;
}

.image-frame span::before{
    height:1px;
    width:0;
    bottom:10px;
    left:10px;
}

.image-frame span::after{
    width:1px;
    height:0;
    bottom:10px;
    left:10px;
}

.image-frame:hover::before,
.image-frame:hover span::before{
    width:calc(100% - 20px);
}

.image-frame:hover::after,
.image-frame:hover span::after{
    height:calc(100% - 20px);
}

/* ===================================
   MOBILE
=================================== */
@media(max-width:768px){

    .main-container{
        display:block;
        padding:0;
        margin-top:12px;
        overflow:hidden;
    }

    .left-slide{
        width:100%;
        border-radius:14px;
        overflow:hidden;
        position:relative;
        z-index:1;
    }

    .swiper-slide img{
        width:100%;
       margin-top:20px;
        object-fit:cover;
        display:block;
    }

    .right-grid{
        margin-top:14px;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .grid-item{
        border-radius:14px;
        overflow:hidden;
    }

    .grid-item img{
        width:100%;
        aspect-ratio:1/1;
        object-fit:cover;
        display:block;
    }

}

/* ===================================
   MOBILE NHỎ
=================================== */

@media(max-width:480px){

@media(max-width:768px){

    .main-container{
        display:block;
        padding:0;
        margin-top:12px;
        overflow:hidden;
    }

    .left-slide{
        width:100%;
        border-radius:14px;
        overflow:hidden;
        position:relative;
        z-index:1;
    }

    .swiper-slide img{
        width:100%;
    
        object-fit:cover;
        display:block;
		margin-top:27px;
    }

    .right-grid{
        margin-top:14px;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .grid-item{
        border-radius:14px;
        overflow:hidden;
    }

    .grid-item img{
        width:100%;
        aspect-ratio:1/1;
        object-fit:cover;
        display:block;
    }

}