﻿.product-header-mobile {
    width: 100%;
    float: left;
    background-image: url('../images/product/header-backgroud.png');
    background-size: 100% 100%;
    background-color: #e9e9e9;
    background-blend-mode: multiply;
    padding-top: 20px;
}

    .product-header-mobile .title-product-header-mobile {
        width: 100%;
        float: left;
        text-align: center;
    }

        .product-header-mobile .title-product-header-mobile h1 {
            font-size: 25px !important;
            font-weight: 600;
            color: black;
            margin-bottom: 0px !important;
        }

        .product-header-mobile .title-product-header-mobile span {
            font-size: 20px;
            font-weight: 600;
            color: #FF8E4F;
        }

    .product-header-mobile .box-content-product-header-mobile {
        width: 100%;
        float: left;
        margin-top: 10px;
        display: flex;
        gap: 10px;
    }

        .product-header-mobile .box-content-product-header-mobile .left-box-content-product-header-mobile {
            width: 50%;
            float: left;
        }

        .product-header-mobile .box-content-product-header-mobile .right-box-content-product-header-mobile {
            width: 50%;
            float: left;
        }

        .product-header-mobile .box-content-product-header-mobile .box-default-product-header-mobile {
            padding: 10px;
            border-radius: 8px;
            background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.2) 100%);
            box-shadow: 0px 4px 9px 0px #0000000D;
            font-size: 11px;
            font-weight: 600;
            width: 100%;
            color: black;
            margin-top: 10px;
        }

    .product-header-mobile .box-form-register-mobile {
        width: 100%;
        float: left;
        margin-top: 10px;
        margin-bottom: 20px;
        padding: 10px;
        border-radius: 8px;
        background: white;
    }

        .product-header-mobile .box-form-register-mobile .title-form-register-mobile {
            font-size: 22px;
            font-weight: 600;
            line-height: 40.48px;
            color: black;
        }

        .product-header-mobile .box-form-register-mobile .desc-form-register-mobile {
            font-size: 15px;
            font-weight: 300;
            line-height: 24px;
            color: #828282;
        }

        .product-header-mobile .box-form-register-mobile .box-form-register-loan-mobile {
            width: 100%;
            float: left;
            margin-top: 15px;
        }

            .product-header-mobile .box-form-register-mobile .box-form-register-loan-mobile .input-register-loan {
                display: block;
                width: 100%;
                padding: 0.65rem 1.25rem;
                font-size: 1rem;
                line-height: 1.25;
                color: #495057;
                background: #FFFFFF33;
                background-image: none;
                background-clip: padding-box;
                border: 0.5px solid #BDBDBD;
                border-radius: 8px;
                transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
            }

            .product-header-mobile .box-form-register-mobile .box-form-register-loan-mobile .lbl-rules {
                margin-left: 10px;
                font-size: 12px;
                font-weight: 300;
                line-height: 24px;
                text-align: left;
            }

            .product-header-mobile .box-form-register-mobile .box-form-register-loan-mobile .btn-register {
                width: 100%;
                border-radius: 40px;
                background: linear-gradient(147.63deg, #FF8E4F 0%, #EF592E 100%);
                font-size: 18px;
                font-weight: 500;
                line-height: 22.77px;
                text-align: center;
                color: #FFFFFF;
                padding: .6rem 1rem;
            }

.box-advantage-product .title-advantage-product-mobile {
    padding-top: 20px;
    text-align: center;
    color: white;
}

    .box-advantage-product .title-advantage-product-mobile h2 {
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 40.48px;
    }

.box-advantage-product .box-steps-borrow-mobile {
    width: 100%;
    float: left;
    padding: 15px;
    border-radius: 24px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(24, 20, 19, 0.1) 100%);
    text-align: center;
    height: 180px;
}

    .box-advantage-product .box-steps-borrow-mobile .text-box-steps-borrow-mobile {
        width: 100%;
        float: left;
        margin-top: 5px;
    }

        .box-advantage-product .box-steps-borrow-mobile .text-box-steps-borrow-mobile .title-text-box-steps-borrow-mobile {
            text-align: center;
            color: white;
        }

            .box-advantage-product .box-steps-borrow-mobile .text-box-steps-borrow-mobile .title-text-box-steps-borrow-mobile h3 {
                font-size: 16px !important;
                font-weight: 600 !important;
                line-height: 25.3px;
            }

        .box-advantage-product .box-steps-borrow-mobile .text-box-steps-borrow-mobile .desc-text-box-steps-borrow-mobile {
            font-size: 12px;
            font-weight: 300;
            line-height: 20px;
            text-align: center;
            color: #FFFFFFBD;
        }

.detail-step-borrow-mobile {
    width: 100%;
    float: left;
    padding-bottom: 20px;
}

    .detail-step-borrow-mobile .title-detail-step-borrow-mobile {
        width: 100%;
        float: left;
        text-align: center;
        padding-bottom: 20px;
    }

        .detail-step-borrow-mobile .title-detail-step-borrow-mobile h2 {
            font-size: 20px !important;
            font-weight: 600 !important;
            line-height: 40.48px !important;
            color: white;
        }

        .detail-step-borrow-mobile .content-detail-step-borrow-mobile {
            width: 100%;
            float: left;
        }

        .detail-step-borrow-mobile .content-detail-step-borrow-mobile .left-content-detail-step-borrow-mobile {
            width: 60%;
            float: left;
        }

            .detail-step-borrow-mobile .content-detail-step-borrow-mobile .left-content-detail-step-borrow-mobile .icon-left-content-detail-step-borrow-mobile {
                width: 20%;
                float: left;
            }

                .detail-step-borrow-mobile .content-detail-step-borrow-mobile .left-content-detail-step-borrow-mobile .icon-left-content-detail-step-borrow-mobile img {
                    width: 20px;
                }

            .detail-step-borrow-mobile .content-detail-step-borrow-mobile .left-content-detail-step-borrow-mobile .text-left-content-detail-step-borrow-mobile {
                width: 80%;
                float: left;
            }

                .detail-step-borrow-mobile .content-detail-step-borrow-mobile .left-content-detail-step-borrow-mobile .text-left-content-detail-step-borrow-mobile h3 {
                    width: 100%;
                    font-size: 12px;
                    font-weight: 600;
                    color: gray;
                }

                .detail-step-borrow-mobile .content-detail-step-borrow-mobile .left-content-detail-step-borrow-mobile .text-left-content-detail-step-borrow-mobile p {
                    width: 80%;
                    text-align: justify;
                    margin-top: 5px;
                    font-size: 10px;
                    color: gray;
                    margin-bottom: 0px;
                }

        .detail-step-borrow-mobile .content-detail-step-borrow-mobile .right-content-detail-step-borrow-mobile {
            width: 40%;
            float: left;
            margin-top: 80px;
        }

            .detail-step-borrow-mobile .content-detail-step-borrow-mobile .right-content-detail-step-borrow-mobile img {
                width: 100%;
            }

.title-install-mytima-product-mobile {
    width: 100%;
    float: left;
    color: black;
}

    .title-install-mytima-product-mobile h2 {
        font-size: 18px !important;
        font-weight: 600 !important;
    }

.content-install-mytima-product-mobile {
    width: 100%;
    float: left;
    padding-top: 20px;
    display: flex;
    align-items: center;
}

    .content-install-mytima-product-mobile .icon-content-install-mytima-product-mobile {
        width: 20%;
        float: left;
    }

        .content-install-mytima-product-mobile .icon-content-install-mytima-product-mobile img {
            width: 48px;
        }

    .content-install-mytima-product-mobile .text-content-install-mytima-product-mobile {
        width: 80%;
        float: left;
    }

        .content-install-mytima-product-mobile .text-content-install-mytima-product-mobile h3 {
            font-size: 14px;
            font-weight: 600;
            text-align: left;
            width: 100%;
            float: left;
        }

        .content-install-mytima-product-mobile .text-content-install-mytima-product-mobile p {
            font-size: 12px;
            font-weight: 300;
            text-align: left;
            color: #999999;
        }

.product-footer-mobile {
    width: 100%;
    float: left;
    background-color: #f7f7f9;
    padding-top: 20px;
    padding-bottom: 20px;
}

    .product-footer-mobile #textContainer.collapsed {
        max-height: 200px;
        overflow: hidden;
        position: relative;
    }

        .product-footer-mobile #textContainer.collapsed::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background: linear-gradient(to bottom, transparent, white);
        }

    .product-footer-mobile #toggleSeeMore {
        font-size: 16px;
        color: #F7753F;
        font-weight: 600;
    }

.header-product-car-mobile {
    background-image: url('../images/product/vayoto/banner-mobile.jpeg');
    width: 100%;
    float: left;
    padding-bottom: 15px;
}

    .header-product-car-mobile .logo-header-product-car-mobile {
        width: 100%;
        float: left;
        padding-top: 20px;
    }

    .header-product-car-mobile .title-header-product-car-mobile {
        width: 100%;
        float: left;
        padding-top: 15px;
        text-align: center;
    }

        .header-product-car-mobile .title-header-product-car-mobile h1 {
            font-size: 25px !important;
            font-weight: 700;
            color: white;
        }

        .header-product-car-mobile .title-header-product-car-mobile img {
            width: 70%;
        }

    .header-product-car-mobile .desc-header-product-car-mobile {
        margin-top: 20px;
        width: 100%;
        float: left;
        padding: 12px;
        border-radius: 8px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.0074) 0%, rgba(255, 255, 255, 0.0063) 100%);
        border: 1px solid white;
        box-shadow: 0px 4px 10px 0px #0000001A;
        text-align: center;
    }

        .header-product-car-mobile .desc-header-product-car-mobile .left {
            width: 30%;
            float: left;
        }

        .header-product-car-mobile .desc-header-product-car-mobile .center {
            width: 30%;
            float: left;
            margin-left: 10px;
            margin-right: 10px;
        }

        .header-product-car-mobile .desc-header-product-car-mobile .right {
            width: 30%;
            float: left;
        }

        .header-product-car-mobile .desc-header-product-car-mobile .lblButton {
            padding: 7px 10px 7px 10px;
            border-radius: 100px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.222) 0%, rgba(255, 255, 255, 0.189) 100%);
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            color: white;
        }

        .header-product-car-mobile .desc-header-product-car-mobile .top {
            font-size: 24px;
            font-weight: 600;
            text-align: center;
            color: white;
        }

        .header-product-car-mobile .desc-header-product-car-mobile .bottom {
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            color: white;
        }

    .header-product-car-mobile .show-detail-header-product-car-mobile {
        width: 100%;
        float: left;
        padding-top: 20px;
    }

        .header-product-car-mobile .show-detail-header-product-car-mobile .btn-detail {
            padding: 10px 39px 10px 39px;
            border-radius: 100px;
            background: linear-gradient(147.63deg, #FF8E4F 0%, #EF592E 100%);
            font-size: 16px;
            font-weight: 400;
            line-height: 26px;
            text-align: center;
            color: white;
            width: 100%;
        }

.content-product-car-mobile {
    width: 100%;
    float: left;
    padding-bottom: 20px;
    padding-top: 20px;
    background: gainsboro;
}

    .content-product-car-mobile .title-content-product-car-mobile {
        text-align: center;
    }

        .content-product-car-mobile .title-content-product-car-mobile h2 {
            font-size: 24px !important;
            font-weight: 600;
        }

    .content-product-car-mobile .desc-content-product-car-mobile {
        font-size: 14px;
        font-weight: 300;
        text-align: center;
        color: #828282;
        padding-bottom: 20px;
    }

    .content-product-car-mobile .swiper-product-car-mobile {
        width: 100%;
        float: left;
    }

.swiper-product-car-mobile .box-default {
}

    .swiper-product-car-mobile .box-default .item-box-default {
        width: 100%;
        float: left;
        background: white;
        padding: 12px;
        border-radius: 16px 16px 0px 0px;
        box-shadow: 0px 4px 10px 0px #0000001A;
        text-align: center;
        color: black;
    }

    .swiper-product-car-mobile .box-default .active {
        background: linear-gradient(180deg, #FDF5EC 0%, #FFFFFF 100%) !important;
        border-top: 1px solid #EF592E;
        color: #EF592E;
    }

    .swiper-product-car-mobile .box-default .item-box-default .icon img {
        width: 50px;
    }

    .swiper-product-car-mobile .box-default .item-box-default .text .top {
        font-size: 14px;
        font-weight: 400;
        line-height: 17.71px;
        text-align: center;
        width: 100%;
        float: left;
        color: gray;
    }

    .swiper-product-car-mobile .box-default .item-box-default .text .bottom {
        font-size: 16px;
        font-weight: 600;
        line-height: 22.77px;
        text-align: center;
    }

.swiper-product-car-mobile .content-swiper-product-car-mobile {
    background: white;
    padding: 20px;
    position: relative;
    top: -5px;
    z-index: 1;
    border-radius: 0px 0px 16px 16px;
}

    .swiper-product-car-mobile .content-swiper-product-car-mobile .img-swiper-product-car-mobile {
        padding-bottom: 20px;
    }

    .swiper-product-car-mobile .content-swiper-product-car-mobile .text-swiper-product-car-mobile {
    }

    .swiper-product-car-mobile .content-swiper-product-car-mobile .box-button {
        padding-top: 15px;
    }

        .swiper-product-car-mobile .content-swiper-product-car-mobile .box-button .btn-register {
            width: 100%;
            padding: 10px 39px 10px 39px;
            border-radius: 100px;
            background: linear-gradient(147.63deg, #FF8E4F 0%, #EF592E 100%);
            color: white;
        }
