#page-commercial-solutions {
    .family-solution {
        background: url(../images/bg-linh-vu.png) no-repeat center center/cover;
        padding-top: 201px;
        padding-bottom: 80px;
    }

    .choose-the-best {
        padding-bottom: 40px;

        @media (max-width: 992px) {
            padding-bottom: 0;
        }
    }

    .solar-power {
        margin-bottom: 80px;
    }

    .project-highlights {
        .common-title {
            max-width: 600px;
        }
    }

    .question-answer {
        padding-top: 0;
    }

    .commercial-column {
        >.row {
            gap: 8px 0;
            --gutter: 4px;
        }
    }

    .certifications {
        @media (min-width: 1200px) {
            padding-bottom: 130px;
        }
    }

    @media (max-width: 767px) {
        .commercial-about {
            padding-top: 0;
        }

        .solar-power {
            margin-bottom: 30px;
        }
    }
}

.commercial-about {
    padding: 81px 0 27px;

    .common-title {
        margin-bottom: 3px;
        text-align: justify;
    }

    .commercial-block__desc {
        text-align: justify;
    }
}

.commercial-about__img {
    margin-left: calc((1311px - 100vw) / 2);
    border-radius: 20px;
    overflow: hidden;
    margin-top: 9px;

    img {
        display: block;
    }
}

.commercial-column {
    >.row {
        gap: 20px 0;
        --gutter: 4px;
    }

    padding-top: 19px;

    .usage-item.style-2 {
        min-height: 275px;
        line-height: 1;

        .usage-item__icon {
            margin-bottom: 67px;

            @media (max-width: 767px) {
                margin-bottom: 20px;
            }
        }

    }
}

/* page enterprise-solutions */
.section-commercial-column {
    position: relative;
    z-index: 1;
    padding: 287px 0 84px;

    @media (max-width: 992px) {
        padding: 50px 0;
    }

    .usage-item {
        background: rgba(255, 255, 255, 0.9);
    }
}

.section-commercial-column__bg {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    /* width: 100%; */
    height: 100%;
    z-index: -1;

    @media (max-width: 992px) {
        left: 0;
        right: 0;
        width: 100%;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }
}

.solar-power.reason {
    padding-top: 10px;
    overflow: hidden;

    .common-title {
        max-width: 50%;
        margin-left: auto;
        position: relative;
        z-index: 1;
        color: var(--color-2);
        background: white;
        padding-left: 20px;
        padding-bottom: 20px;
        border-radius: 0 0 0 20px;
        margin-right: 0;
        margin-top: -1px;
        margin-bottom: 406px;

        @media (max-width: 992px) {
            margin-bottom: 10px;
        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: calc(100% - 20px);
            width: 100vw;
            height: 100%;
            background: white;
            z-index: -1;
            display: block;
        }

        .lead {
            color: var(--color-2);
        }

        .title {
            color: var(--color-2);
        }
    }
}

#page-enterprise-solutions {
    .choose-the-best {
        padding-bottom: 30px;
    }

    .family-solution {
        background: url(../images/bg-linh-vu.png) no-repeat center center/cover;
        padding-top: 180px;
        padding-bottom: 0;
        background-position: top center;
    }

    .solar-power-bg {
        bottom: 80px;

        &::after {
            display: none;
        }
    }

    .solar-power {
        margin-bottom: 0;
        position: relative;
        z-index: 2;

    }

    .project-highlights {
        position: relative;
        z-index: 2;

        .common-title {
            max-width: 600px;
        }
    }

    .commercial-column {
        >.row {
            gap: 20px 0;
            --gutter: 4px;
        }

        .usage-item.style-2 {
            border: 0;

            .usage-item__icon {
                margin-bottom: 40px;
                padding: 10px;

                @media (max-width: 767px) {
                    margin-bottom: 20px;
                }
            }

            min-height: auto;
            padding-bottom: 17px;
        }
    }

    @media (max-width: 992px) {
        .commercial-about {
            padding-top: 0;
        }

        .question-answer {
            padding-top: 0;
        }

        .family-solution {
            padding: 150px 0 0;
        }
    }
}

.box-number {
    padding: 100px 0;
    position: relative;
    z-index: 1;

    @media (max-width: 992px) {
        padding: 50px 0;
    }

    .box-number__bg {
        top: -23%;
        left: 10px;
        right: 10px;
        height: 150%;
        z-index: -1;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
        }
    }
}