﻿.c-home-product {
    padding-top: 54px;
    padding-bottom: 55px;
    position: relative;
}

    .c-home-product:before {
        content: "";
        position: absolute;
        background: url(/Design/img/NamTrungBo/Product/la.png) no-repeat;
        background-size: cover;
        left: 0;
        top: -149px;
        width: 250px;
        height: 540px;
    }

img.decor-pro-home-b {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.link-pro-home .p-btn-link {
    text-align: center;
    margin: auto;
    margin-top: 41px;
}

.title-t-home-product h3 {
    margin: 0;
    text-transform: capitalize;
    font-family: 'BeVietnamPro-Medium';
    font-size: 34px;
    font-style: normal;
    font-weight: 500;
    line-height: normal; /* 120.238% */
    background: linear-gradient(180deg, #18BFF0 0%, #1C3984 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-tab-menu-home-product {
    display: flex;
    justify-content: center;
    margin-bottom: 17px;
}

li.item-menu-pro-home {
    list-style: none;
    margin-left: 9px;
}

ul.list-tab-home-product {
    display: flex;
    align-items: center;
}

li.item-menu-pro-home a {
    display: flex;
    height: 55px;
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
    color: #5A5A5A;
    font-family: 'Kanit-Regular';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 100% */
    text-transform: capitalize;
    border-radius: 10px;
    border: 1px solid #628DFB;
    background: #FFF;
    transition: all .3s;
}

.icon-send-price-service img {
    filter: invert(24%) sepia(76%) saturate(830%) hue-rotate(95deg) brightness(91%) contrast(98%);
}

.c-home-product .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #18B6E9;
    border-radius: 56px;
    top: 50%;
    right: -60px;
    z-index: 0;
    font-size: 20px;
}

.c-home-product .swiper-button-prev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #18B6E9;
    border-radius: 56px;
    top: 50%;
    left: -60px;
    z-index: 0;
    font-size: 20px;
}

.top-home-product section {
    width: 950px;
    text-transform: capitalize;
    color: #6C6C6C;
    font-family: 'Inter-Medium';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 23px; /* 143.75% */
    text-align: center;
    margin: auto;
}

.c-home-product .grid.wide {
    padding: 0;
    position: relative;
    z-index: 1;
}

.title-t-home-product {
    position: relative;
}

li.item-menu-pro-home a:hover {
    background: #212F81;
    border: 1px solid #212F81;
    color: #fff;
}

.top-home-product {
    margin-bottom: 40px;
}

li.item-c-home-product {
    list-style: none;
    border-radius: 10px;
    transition: all .3s;
    padding: 14px;
    position: relative;
    background: #fff;
    border: 1px solid transparent;
}

.top-img-home-product:before {
    content: "";
    position: absolute;
    background: rgba(var(--villoz-white-rgb, 255, 255, 255), 0.4);
    bottom: 0;
    left: 50%;
    right: 50%;
    top: 0;
    opacity: 1;
    z-index: 3;
    pointer-events: none;
    transition: all 600ms linear;
}

.img-service-sendd-cc img {
    border-radius: 8px;
    display: block;
    width: 100%;
    height: 253px;
}

.content-send-price-service {
    position: relative;
}

.img-service-sendd-cc {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 22px;
    width: 100%;
    height: 100%;
}

.c-send-price-service {
    position: relative;
    text-align: center;
    padding: 29px 18px;
    margin-top: 27px;
}

    .c-send-price-service p {
        font-family: 'AVERTASTDCY-EXTRABOLD';
        color: #34c7ff;
        font-size: 21px;
        margin: 0;
        position: relative;
        z-index: 1;
        font-style: italic;
    }

    .c-send-price-service section {
        font-size: 20px;
        color: #ffffff;
        font-family: 'AvertaStdCY-Regular';
        margin-bottom: 6px;
    }

.btn-fill-project-hh {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-table-send-price-service.phone-btn-send a {
    background: #273c76;
}

.price-table-send-price-service a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #02a5e3;
    width: max-content;
    padding: 8px 45px;
    border-radius: 50px 0;
    border: 2px solid #fff;
    height: 65px;
    margin: auto;
    padding-left: 24px;
}

.price-table-send-price-service:nth-child(2) a:hover {
    background: #274080;
}

    .price-table-send-price-service:nth-child(2) a:hover .icon-send-price-service img {
        filter: invert(24%) sepia(52%) saturate(908%) hue-rotate(188deg) brightness(91%) contrast(98%);
    }

.price-table-send-price-service:nth-child(3) a:hover {
    background: #02a5e3;
}

    .price-table-send-price-service:nth-child(3) a:hover .icon-send-price-service img {
        filter: invert(50%) sepia(69%) saturate(3628%) hue-rotate(167deg) brightness(100%) contrast(98%);
    }

.price-table-send-price-service a span {
    font-size: 22px;
    color: #ffffff;
    font-family: 'Inter_24pt-Medium';
    margin-left: 9px;
}

.icon-send-price-service {
    position: relative;
    top: -10px;
    width: 68px;
    height: 68px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-table-send-price-service {
    margin-top: 25px;
}

    .price-table-send-price-service:nth-child(3) a {
        background: #274080
    }

li.item-c-home-product:hover .top-img-home-product:before {
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 600ms linear;
}

ul.list-item-home-product {
}

.bottom-home-product {
    overflow: hidden;
}

.t-home-product h3 {
    margin: 0;
    font-family: 'Inter_24pt-SemiBold';
    text-align: left;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    background: linear-gradient(115deg, #81BB3F 8.51%, #238E44 91.49%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.cate-title-home-product h6 {
    margin: 0;
    color: #1C1D28;
    font-family: 'Inter_24pt-Medium';
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    line-height: 151.023%; /* 18.123px */
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

li.item-c-home-product:hover .cate-title-home-product h6 {
}

.cate-title-home-product section {
    color: #464646;
    text-align: center;
    font-family: 'Inter-Regular';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 151.023%; /* 18.123px */
    text-transform: capitalize;
    margin-top: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

li.item-c-home-product:hover .cate-title-home-product section {
    color: #fff;
}

li.item-c-home-product:hover:before {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    opacity: 1;
}

.top-b-pro-home-item {
    border-radius: 10px;
}

li.item-c-home-product:hover .top-b-pro-home-item {
    border-color: transparent;
}

.item-cate-pro-cc {
    display: flex;
    align-items: center;
}

    .item-cate-pro-cc a {
        font-size: 14px;
        font-family: 'AvertaStdCY-Regular';
        color: #7e7e7e;
        padding: 4px 0px;
        text-transform: uppercase;
    }

        .item-cate-pro-cc a:hover {
            color: #00acfa;
        }

        .item-cate-pro-cc a:nth-child(1) {
            border-right: 1px solid #adadad;
            padding-right: 10px;
            margin-right: 10px;
        }

        .item-cate-pro-cc a:nth-child(2) {
            border-right: 1px solid #adadad;
            padding-right: 10px;
            margin-right: 10px;
        }

.top-img-home-product img {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    margin: auto;
}

.link-view-pro-homee a:hover {
    background: linear-gradient(-14deg, #209cff 0%, #68e0cf 100%);
    border-color: snow;
    color: #fff;
}

.link-view-pro-homee a {
    font-size: 15px;
    font-family: 'AVERTASTDCY-REGULAR';
    color: #02a5e3;
    text-transform: uppercase;
    width: 147px;
    height: 42px;
    border-radius: 50px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    transition: all linear .3s;
}

.link-view-pro-homee {
    margin-top: 40px;
}

li.item-c-home-product:hover span.detail-link-pro-home svg path {
    stroke: #000;
}

span.detail-link-pro-home svg {
    margin-left: 6px;
}

li.item-c-home-product:hover {
    border-color: #0f994f;
}

    li.item-c-home-product:hover .cate-title-home-product {
        background: transparent;
    }

.top-img-home-product span {
    display: none;
    position: absolute;
    width: max-content;
    height: max-content;
    left: 0;
    top: 50px;
    bottom: 0;
    right: 0;
    margin: auto;
    padding: 10px 13px;
    border-radius: 7px;
    border: 1px solid #00acfa;
    background: #00acfa;
    color: #FFF;
    font-family: 'AvertaStdCY-Regular';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    opacity: 0;
    visibility: hidden;
    transition: all ease .4s;
}

li.item-c-home-product:hover span.detail-link-pro-home {
    color: #000;
}

li.item-c-home-product:hover .top-img-home-product span {
    opacity: 1;
    visibility: visible;
    top: 0;
}

.t-home-product {
    text-align: center;
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 9px;
    padding-top: 7px;
}

span.price-pro-home {
    display: block;
    text-align: center;
    color: #FFF;
    font-family: 'BeVietnamPro-Medium';
    font-size: 15px;
    padding: 5px 0;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
    border-radius: 0px 0px 10px 10px;
    background: linear-gradient(180deg, #18BFF0 0%, #1C3984 100%);
}

li.item-menu-pro-home a h5 {
    margin: 0;
}

span.price-pro-home strong {
    color: #FFF;
    font-family: 'BeVietnamPro-Medium';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.cate-title-home-product {
    transition: 0.5s;
    padding-top: 10px;
}

.top-img-home-product {
    overflow: hidden;
    transition: 0.5s;
    position: relative;
}

li.item-c-home-product:before {
    /* position: absolute; */
    left: 20%;
    right: 20%;
    bottom: 20%;
    top: 20%;
    content: "";
    background: linear-gradient(-14deg, #209cff 0%, #68e0cf 100%);
    z-index: 0;
    transition: 0.5s;
    opacity: 0;
    border-radius: 10px;
}

li.item-c-home-product a {
    position: relative;
    border-radius: 10px;
}

li.item-c-home-product:hover .cate-title-home-product h3 {
}

li.item-c-home-product:hover .t-home-product {
}

li.item-c-home-product:hover span.price-pro-home {
    border-radius: 0px 0px 10px 10px;
    background: #d11627;
}

li.item-c-home-product:hover .top-img-home-product {
    background: transparent;
}

ul.l-cate-lease-product {
}

.home-content-lease-pro {
    background: #ebf6fc;
    padding-bottom: 83px;
    padding-top: 26px;
    position: relative;
}

    .home-content-lease-pro .grid.wide {
        padding: 0;
    }

    .home-content-lease-pro:before {
        content: "";
        position: absolute;
        left: 0;
        top: -145px;
        background: url(/Design/img/SaoPhuongBac/service/3.png) no-repeat;
        background-size: cover;
        width: 601px;
        height: 459px;
        pointer-events: none;
    }

span.detail-link-pro-home {
    display: block;
    color: #a3a3a3;
    font-size: 15px;
    font-family: 'AvertaStdCY-Regular';
    width: 100%;
    padding-top: 8px;
}

.list-cate-lease-pro {
    background: #ebf6fc;
    padding-left: 23px;
    padding-top: 23px;
    border-radius: 25px 25px 0 0;
    overflow: hidden;
}
/*RS*/

@media (min-width: 1390px) {
    .home-content-lease-pro:before {
        content: "";
        position: absolute;
        left: 0;
        top: -308px;
        background: url(/Design/img/SaoPhuongBac/service/3.png) no-repeat;
        background-size: cover;
        width: 831px;
        height: 624px;
        pointer-events: none;
    }
}

@media (max-width: 1150px) {
    .title-t-home-product h3 {
        font-size: 30px;
    }

    .link-view-pro-homee a {
        width: 119px;
        height: 35px;
        font-size: 13px;
    }

    li.item-menu-pro-home a {
        height: 46px;
        padding: 10px 10px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }

    .c-home-product .grid.wide {
        padding: 0 10px;
    }

    .top-home-product section {
        font-size: 14px;
        width: 100%;
    }

    ul.list-item-home-product {
    }
}

@media (max-width: 1023px) {
    .c-home-product:before {
        width: 87px;
        height: 190px;
        top: -122px;
    }

    .home-content-lease-pro .item-cate-pro-cc a {
        font-size: 11px;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
    }

    .item-cate-pro-cc a:hover {
        color: #273c76;
    }

    .item-cate-pro-cc a:nth-child(1) {
        padding-right: 6px;
        margin-right: 6px;
        border: unset;
        position: relative;
    }

    .item-cate-pro-cc a:nth-child(2) {
        padding-right: 6px;
        margin-right: 6px;
        border: unset;
        position: relative;
    }

    .item-cate-pro-cc {
        margin-bottom: 10px;
    }

        .item-cate-pro-cc a:nth-child(1):before {
            content: "";
            position: absolute;
            right: 0;
            top: 10px;
            width: 1px;
            height: 21px;
            background: #fff;
        }

        .item-cate-pro-cc a:nth-child(2):before {
            content: "";
            position: absolute;
            right: 0;
            top: 10px;
            width: 1px;
            height: 21px;
            background: #fff;
        }

    .home-content-lease-pro .grid.wide {
        padding: 0 10px;
    }

    .list-cate-lease-pro {
        padding: 10px;
    }

    li.item-c-home-product {
        padding: 5px;
    }

    .title-tab-menu-home-product {
        display: block;
        margin-bottom: 15px;
        text-align: center;
    }

    .title-t-home-product h3 {
        font-size: 24px;
        line-height: normal;
    }

    .c-home-product .swiper-button-next {
        right: 1px;
        z-index: 1;
        width: 40px;
        height: 40px;
        font-size: 14px;
        top: 57%;
    }

    .c-home-product .swiper-button-prev {
        left: 1px;
        z-index: 1;
        width: 40px;
        height: 40px;
        font-size: 14px;
        top: 57%;
    }

    ul.list-tab-home-product {
        display: inline-block;
    }

    li.item-menu-pro-home {
        display: inline-block;
        margin: 0;
        margin-bottom: 5px;
    }

    .c-home-product {
        padding-top: 0;
        padding-bottom: 49px;
    }

    .title-t-home-product {
        margin-bottom: 0;
    }

    .top-img-home-product img {
    }

    .t-home-product h3 {
        font-size: 14px;
        -webkit-line-clamp: 2;
    }

    .t-home-product {
        padding-top: 0;
    }

    span.detail-link-pro-home {
        color: #a3a3a3;
        font-size: 13px;
        font-family: 'AvertaStdCY-Regular';
        width: 100%;
        padding-top: 5px;
    }

    .cate-title-home-product {
    }

    span.price-pro-home strong {
        font-size: 13px;
    }

    .cate-title-home-product h6 {
        font-size: 11px;
        margin-bottom: 5px;
        text-transform: capitalize;
    }

    img.decor-pro-home-b {
        height: auto;
    }
}