#about-section-2.ve-casa {
    padding: 60px 0;
}

#about-section-2.ve-casa .bg-icon-1 {
    width: auto;
    top: 0;
    left: 0;
    z-index: -1;
}

#about-section-2.ve-casa .bg-icon-2 {

    top: 0;
    left: 40%;
    z-index: -1;
}

#about-section-2.ve-casa .bg-icon-3 {

    top: 0;
    right: 16%;
    z-index: -1;
}


#about-section-2.ve-casa .box-left .box-image,
#about-section-2.ve-casa .box-left .box-exp {
    break-inside: avoid;
}

#about-section-2.ve-casa .box-left .box-image {
    margin-bottom: 16px;
    display: block;


}

#about-section-2.ve-casa .box-left .box-image img {
    width: 100%;
    border-radius: 15px;
    display: block;
}

#about-section-2.ve-casa .box-left img.img-1 {
    aspect-ratio: 1 / 1.5;
    object-fit: cover;
}

#about-section-2.ve-casa .box-left img.img-2 {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#about-section-2.ve-casa .box-left img.img-3 {
    aspect-ratio: 1 / 1.3;
    object-fit: cover;
}

#about-section-2.ve-casa .box-left img.img-2 {
    border-radius: 50%;
}

#about-section-2.ve-casa .box-left .box-image-2 {
    border-radius: 50%;
    border: dashed 1px var(--color-9);
    padding: 10px;
}

#about-section-2.ve-casa .box-left .exp-box {
    text-align: center;
    color: #fff;
    background-color: var(--color-9);
    padding: 23px 25px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 30px;
}

#about-section-2.ve-casa .box-left .exp-box span {
    font-size: 20px;
    font-weight: 500;
}

#about-section-2.ve-casa .box-right .subtitle {
    color: var(--color-10);
}

#about-section-2.ve-casa .box-right .title {
    font-size: 40px;
}

#about-section-2.ve-casa .box-right .title-style-1 {
    padding-bottom: 0;
    margin-bottom: 14px;
}

#about-section-2.ve-casa .box-right .desc {
    font-size: 20px;
    color: var(--c-text);
}

.box-tam-nhin,
.box-su-menh {
    padding: 20px 30px;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #fff;
    gap: 16px;
}

.box-tam-nhin {
    background-color: var(--color-9);
    margin-bottom: 20px;
}

.box-su-menh {
    background-color: var(--color-3);
}

.box-tam-nhin h4 {
    margin-bottom: 0;

}

#about-section-2.ve-casa .box-tam-nhin .desc,
#about-section-2.ve-casa .box-su-menh .desc {
    font-size: 18px;
}

/* section 3 */

#about-section-3.triet-ly {
    padding: 60px 0 100px 0;
}

#about-section-3.triet-ly .bg-icon {
    bottom: 0;
    right: 0;
}

#about-section-3.triet-ly .list-trietly {
    margin-top: 46px;
}

#about-section-3.triet-ly .list-trietly .icon-box {
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
    padding: 32px 28px;
    transition: 0.3s all;
}

#about-section-3.triet-ly .list-trietly .icon-box:hover {
    background-color: var(--c-primary);

}

#about-section-3.triet-ly .list-trietly .icon-box:hover .title,
#about-section-3.triet-ly .list-trietly .icon-box:hover .desc {
    color: #fff;

}

#about-section-3.triet-ly .list-trietly .box-icon {
    margin-bottom: 16px;
}

#about-section-3.triet-ly .list-trietly .icon-box .title {
    color: var(--c-primary);
    margin-bottom: 12px;
}

#about-section-3.triet-ly .list-trietly .icon-box .desc {
    color: var(--color-5);
    margin-bottom: 12px;
}

/* Section 4 */
#about-section-4.phuong-phap {
    background-color: #EEF2FF;
    padding: 60px 0 100px 0;
    overflow: hidden;
}

#about-section-4.phuong-phap::after,
#about-section-4.phuong-phap::before {
    content: "";
    background-color: rgba(68, 105, 190, 0.05);
    width: 293px;
    height: 270px;
    position: absolute;
    border-radius: 50%;
}

#about-section-4.phuong-phap::after {
    bottom: -61px;
    right: -83px;
}

#about-section-4.phuong-phap::before {
    top: -61px;
    left: -83px;
}

#about-section-4.phuong-phap .bg-icon {
    bottom: 7%;
    right: 6%;
}

.list-phuong-phap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 36px;
}

.list-phuong-phap .pp-item {
    border-radius: 16px;
    background: #FFF;
    overflow: hidden;
    z-index: 2;
    position: relative;
}

.list-phuong-phap .pp-item .thumb img {
    width: 100%;
    aspect-ratio: 1 / 0.6;
    object-fit: cover;
}

.list-phuong-phap .pp-item .content {
    padding: 20px;
}

.list-phuong-phap .pp-item .content .title {
    font-size: 18px;
    color: var(--c-primary);
}

.list-phuong-phap .pp-item .content .desc {
    color: var(--color-5);
}

/* Section 5 */

#about-section-5.quy-trinh {
    padding: 60px 0;
}

.list-quytrinh {
    display: flex;
    justify-content: space-between;
    justify-items: center;
    text-align: center;
    flex-wrap: wrap;
    position: relative;
}

.list-quytrinh::before {
    content: "";
    width: 90%;
    height: 1px;
    background-color: #8698D9;
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.list-quytrinh .stt {
    height: 96px;
    width: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--c-primary);
    -webkit-text-stroke: 1px #fff;
    font-size: 36px;
    font-weight: 600;
    background-image: url(./images/quy-trinh-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: auto;
    flex: 1;
    margin-bottom: 12px;

}

.list-quytrinh .title {
    font-weight: 600;
    color: var(--c-primary);
}

@media screen and (min-width:1440px) {
    #about-section-2.ve-casa .bg-icon-1 {
        top: -125px;
        width: 24%;
    }
}

@media screen and (min-width:769px) {
    #about-section-2.ve-casa .box-left {
        column-count: 2;
        /* số cột */
        column-gap: 16px;
        /* khoảng cách giữa các cột */
    }
}

@media screen and (max-width:768px) {
    #about-section-2.ve-casa .bg-icon-1 {
        top: -60px
    }

    #about-section-3.triet-ly .list-trietly .icon-box {
        margin-bottom: 25px;
    }

    .list-phuong-phap {

        grid-template-columns: repeat(2, 1fr);
    }

    .list-quytrinh {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .list-quytrinh::before {
        display: none;
    }


}

@media screen and (max-width:425px) {
    #about-section-2.ve-casa {
        overflow: hidden;
    }

    #about-section-2.ve-casa .box-left {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        grid-template-areas:
            "box-image-1  box-image-2"
            "exp-box  box-image-3";
        align-items: center
    }

    #about-section-2.ve-casa .box-left .exp-box {
        padding: 23px 4px;
    }

    #about-section-2.ve-casa .box-left>div:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    #about-section-2.ve-casa .box-left>div:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        height: 110px;
    }

    #about-section-2.ve-casa .box-left>div:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        max-width: 180px;
    }

    #about-section-2.ve-casa .box-left>div:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        margin-top: calc(-46% + 5%);
    }

    #about-section-2.ve-casa .bg-icon-1 {
        left: -30px;
        top: -53px;
    }

    #about-section-2.ve-casa .bg-icon-2 {
        display: none;
    }

    #about-section-2.ve-casa .bg-icon-3 {
        right: 0;
    }

    #about-section-2.ve-casa .box-left .exp-box span {
        font-size: 16px;
    }

    #about-section-3.triet-ly .bg-icon {
        display: none;
    }

    .list-phuong-phap {

        grid-template-columns: repeat(1, 1fr);
    }

    .list-quytrinh {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media screen and (max-width:320px) {
    #about-section-2.ve-casa .box-left .exp-box{
        border-radius: 12px;
    }
    #about-section-2.ve-casa .box-left>div:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    #about-section-2.ve-casa .box-left>div:nth-child(2) {
        grid-column: 2;
        grid-row: 2;
        height: 110px;
    }

    #about-section-2.ve-casa .box-left>div:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        max-width: 180px;
    }

    #about-section-2.ve-casa .box-left>div:nth-child(4) {
        grid-column: 1 / 3;
        grid-row: 4;
        margin-top: 0;
    }
    
}