/* =========================================================
   GIỮ NGUYÊN CSS CŨ + BỔ SUNG HOVER EFFECT
========================================================= */

.home-picture-item.swiper.mySwiperImgH .img {
    background: #022E42;
    padding: 9px;
    height: 360px;
}

.home-cef-list .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #035B8F;
}

.home-cef-list .swiper-pagination-bullet {
    border: 1px solid #035B8F;
    background: #fff;
    opacity: 1;
    width: 12px;
    height: 12px;
}

.pagi-cef-h.swiper-pagination-cef {
    text-align: center;
    margin-top: 28px;
}

.home-cef {
    padding: 70px 0;
}

.top-cef-home h2 {
    margin: 0;
    font-family: AvertaStdCY-Extrabold;
    color: var(--default-color-1);
    text-transform: uppercase;
    font-size: 35px;
    line-height: 138.7%;
}

.top-cef-home h3 {
    margin: 0;
    font-family: AvertaStdCY-Extrabold;
    color: var(--default-color-1);
    text-transform: capitalize;
    font-size: 35px;
    line-height: 138.7%;
}

.top-cef-home {
    text-align: left;
    margin-right: 55px;
    position: relative;
    margin-bottom: 0;
}

.svg-decor-cer {
    position: absolute;
    right: -56px;
    top: -53px;
    bottom: 0;
    margin: auto;
    z-index: -1;
    pointer-events: none;
}

.home-picture-item {
    display: grid;
    grid-auto-rows: minmax(min-content, max-content);
    column-gap: 22px;
    row-gap: 22px;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    margin-top: 35px;
}

    .home-picture-item .img {
        width: 100%;
        height: 225px;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        transition: all .45s ease;
    }

        .home-picture-item .img a {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            border-radius: 20px;
        }

            .home-picture-item .img a img {
                border-radius: 20px;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform .8s cubic-bezier(.2,.65,.25,1), filter .4s ease;
            }

        /* =========================================================
   OVERLAY BLUE
========================================================= */

        .home-picture-item .img:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(3,91,143,.72), rgba(3,91,143,.18), rgba(3,91,143,0));
            opacity: 0;
            visibility: hidden;
            z-index: 2;
            transition: all .4s ease;
            border-radius: 20px;
            pointer-events: none;
        }

        /* =========================================================
   ICON VIEW
========================================================= */

        .home-picture-item .img:after {
            content: "+";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%) scale(.7);
            width: 62px;
            height: 62px;
            border-radius: 50%;
            background: rgba(255,255,255,.15);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,.2);
            color: #fff;
            font-size: 38px;
            font-family: 'Montserrat-Bold';
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            z-index: 3;
            transition: all .35s ease;
            pointer-events: none;
        }

        /* =========================================================
   HOVER EFFECT
========================================================= */

        .home-picture-item .img:hover {
            transform: translateY(-10px);
            box-shadow: 0 22px 45px rgba(0,0,0,.16);
        }

            .home-picture-item .img:hover a img {
                transform: scale(1.08);
                filter: brightness(.88);
            }

            .home-picture-item .img:hover:before {
                opacity: 1;
                visibility: visible;
            }

            .home-picture-item .img:hover:after {
                opacity: 1;
                visibility: visible;
                transform: translate(-50%,-50%) scale(1);
            }

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1023px) {
    .home-picture-item.swiper.mySwiperImgH .img {
        background: #022E42;
        padding: 6px;
        height: 210px;
    }

    .home-picture-item {
        display: grid;
        grid-auto-rows: minmax(min-content, max-content);
        column-gap: 15px;
        row-gap: 15px;
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        margin-top: 0;
    }

        .home-picture-item .img {
            width: 100%;
            height: 130px;
        }

            .home-picture-item .img a img {
                border-radius: 12px;
            }

    .home-cef {
        margin-top: 0;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .top-cef-home h2 {
        font-size: 20px;
    }

    .svg-decor-cer svg {
        width: 108px;
        height: auto;
    }

    .top-cef-home h3 {
        font-size: 20px;
    }

    .svg-decor-cer {
        right: -18px;
        top: -29px;
    }

    .top-cef-home {
        margin-right: 15px;
        margin-bottom: 20px;
        margin-left: 0;
    }

    .home-picture-item .img:hover {
        transform: none;
    }

    .home-picture-item .img:after {
        width: 44px;
        height: 44px;
        font-size: 28px;
    }
}

@media(min-width:740px) and (max-width:1023px) {
    .home-picture-item.swiper.mySwiperImgH .img {
        background: #022E42;
        padding: 6px;
        height: 500px;
    }
}