.bg-pattern-green{ background: url(../images/bg-pattern-green.png); padding: 18px; text-align: center; }
.text-header{font-size: 24px; color: #00834a; font-weight: bold; position: relative;}
.bg-dot-green{ background: url(../images/bg-dot-green.png); padding: 18px; text-align: center; }
.text-header-white{font-size: 24px; color: #fff; font-weight: bold; position: relative;}
.topic-text{ text-align: center; font-size: 16px;}


.header-bear{ background: #fff;  text-align: center; display: block; margin: 18px auto;}
.header-bear .line-green{border-bottom: 4px solid #019a61; display: inline-block; padding-bottom: 12px;}
.header-bear .line-green img{ max-width: 100%; }

.rentcar{ background: #fdffcd; margin: 30px auto 22px;}
.rentcar .text-cheaper{ background: #019a61; font-size: 18px; color: #fff; text-align: center; font-weight: normal; position: absolute; right: 30px; top: -30px; padding: 2px 18px;}
.rentcar .text-cheaper::before{ content: url(../images/arrow-green.png); position: absolute; left: 52px; top: 26px;}

.show-car{ display: table; width: 100%;}
.show-car .images-car,
.show-car .detail-car{ display: table-cell; width: 50%; padding: 22px;}
.show-car .images-car{ text-align: center;}
.show-car .images-car .name-car{ font-size: 35px; font-weight: bold; display: block; color: #000; width: 100%; text-align: left;}
.show-car .images-car .name-car small{ font-size: 22px; font-weight: 300; display: block;}
.show-car .images-car img{ max-width: 100%; margin: auto;}
.show-car .detail-car .title-car{ border-bottom: 4px solid #48ca90; font-size: 24px; text-align: center; padding: 4px;}

.general-car{ background: #fff; margin: 14px auto;}
.general-car .title-blue{ font-size: 22px; background: #64a5cf; text-align: center; padding: 4px; color: #fff;}
.general-car .title-green{ font-size: 22px; background: #019a61; text-align: center; padding: 4px; color: #fff;}
.general-car .general-content{ padding: 12px 28px; font-size: 20px; color: #363535;  font-weight: bold; position: relative;}
.general-car .general-content .text-blue{ font-size: 36px; color: #0e5f93;}
.general-car .general-content .text-red{ font-size: 41px; color: #e90000;}
.general-car .general-content .text-red small{ font-size: 24px;}
.general-car .general-content .hight{ position: absolute; top: 12px; right: 22px;}
.general-car .general-content .text-black{ color: #000; font-size: 13px; font-weight: normal;}
.general-car .general-content .text-green{ color: #019a61; font-size: 13px; display: inline-block; float: right; margin-top: 16px; width: 70px;}

.maintenance-costs{ background: #fff; margin: 22px auto;}
.purchase-plan{ font-size: 19px; color: #02622d; font-weight: bold; padding: 4px 12px; display: block; width: 100%; background: #ffeb00; margin: 12px auto;}

.images-plan{ display: table; width: 100%; margin: 38px auto;}
.images-plan .plan-left,
.images-plan .plan-right{ display: table-cell; width: 50%;}
.images-plan .plan-left img,
.images-plan .plan-right img{ width: 100%;}

.detail-plan{ border: 2px solid #5ebb2b; display: table; width: 100%;}
.detail-plan .dark-green{ background: #5ebb2b; display: table-cell; width: 24%; text-align: left; color: #fff; font-weight: bold; font-size: 22px; vertical-align: middle;     padding: 8px;}
.detail-plan .light-green{ background: #fdffcd; display: table-cell; width: 76%; padding: 12px 0; font-size: 16px; color: #603c18; font-weight: bold;}
.detail-plan .light-green h3{ font-size: 18px; color: #5ebb2b; font-weight: bold;}
.detail-plan .green-left,
.detail-plan .green-right{ display: inline-block; width: 49%; padding: 8px 18px; vertical-align: top;}
.detail-plan .green-right{ border-left: 2px solid #5ebb2b;}

.inspection-plan{ margin: 22px auto;}
.images-inspection{ display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
.images-inspection img{ max-width: 100%; margin: 12px;}

.green-list-plan{ background: #d9fda7; position: relative;}
.green-list-plan::before{content: ''; width: 0; height: 0; border-style: solid; border-width: 0 12px 25px 12px; border-color: transparent transparent #d9fda7 transparent; position: absolute; top: -25px; left: 50%;}
.green-list-plan .bear{ position: absolute; right: 0; top: -91px;}
.green-list-plan ul{ display: flex; flex-wrap: wrap; width: 100%; padding: 12px;}
.green-list-plan ul li{ width: 23%; padding: 12px; margin: 8px 1%; background: #fff; border-radius: 8px; text-align: center; color: #633e1b;}
.green-list-plan ul li h3{ font-size: 20px; font-weight: bold;}

.payment{ margin: 22px auto;}
.payment .list-payment{ margin: 30px auto; display: table; width: 100%;}
.payment .list-payment img{ max-width: 100%;}
.list-payment .green-list{ display: table-cell; width: 60%;  vertical-align: middle;}
.list-payment .green-list img{ margin: 4px;}
.list-payment .car-bear{ display: table-cell; width: 40%;  vertical-align: middle;}

.expires{ margin: 22px auto;}
.detail-expires ul{ display: flex; flex-wrap: wrap; width: 100%; margin: 30px auto;}
.detail-expires ul li{ display: block; width: 25%; color:#633e1b; border-left: 1px dashed #be9f81; padding: 4px 12px;}
.detail-expires ul li:first-child{ border-left: 0;}
.detail-expires ul li .title-expires{ display: table; width: 100%;}
.detail-expires ul li .title-expires span{ display: table-cell; padding: 4px; color: #009b36; font-size: 18px; font-weight: bold; vertical-align: middle; line-height: 1.2;}
.detail-expires ul li .title-expires span.number{width: 42px;}
.detail-expires ul li .title-expires span.number img{ margin: 0; max-width: 100%;}
.detail-expires ul li img { margin: 12px auto; max-width: 100%; display: block;}
.detail-expires ul li small{color:#633e1b;; font-size: 12px;}

.list-service{ margin: 28px auto}
.list-service ul{ display: flex; flex-wrap: wrap;}
.list-service ul li{ width: 33.33%; display: table; padding: 2px 8px; font-size: 14px;}
.list-service ul li::before{ content:'●'; color: #5ebb2b; font-size: 8px; display: table-cell; width: 18px; vertical-align: middle;}

.step-contract{ margin: 25px auto;}
.step-contract ul{ display: table; width: 100%;}
.step-contract ul li{ display: table-row;}
.step-contract ul li div{ display: table-cell; font-size: 16px; color: #633e1b; border-bottom: 1px dashed #be9f81; padding: 18px; vertical-align: top;}
.step-contract ul li div h3{font-size: 22px; font-weight: bold; color: #009b36;}

.lease{ margin: 25px auto; display: table; width: 100%;}
.lease .lease-text{ display: table-cell; width: 40%; vertical-align: middle; padding: 28px;line-height: 1.8;}
.lease .lease-images{ display: table-cell; width: 60%; vertical-align: middle; text-align: center;}
.lease .lease-images img{ max-width: 100%; }

.lease-rental{ margin: 25px auto;}
.lease-rental .table-rental{ margin: 25px auto;}
.lease-rental .table-rental table{ width: 100%; border-collapse: collapse;}
.lease-rental .table-rental table tr th{ text-align: center; font-size: 20px; border: 2px solid #c9c9c9; padding: 8px;}
.lease-rental .table-rental table tr th.bg-white{ color: #e3062b; background: #fff4fd;}
.lease-rental .table-rental table tr th.bg-green{ color: #096228; background: #dff6d0;}
.lease-rental .table-rental table tr th.bg-yellow{ color: #ff4e00; background:#fbf5c9;}
.lease-rental .table-rental table tr td{border: 2px solid #c9c9c9; padding: 8px 22px; vertical-align: top; font-weight: 500; color: #603c18;}
.lease-rental .table-rental table tr td:nth-child(1){ background: #fff4fd;}
.lease-rental .table-rental table tr td:nth-child(2){ background: #dff6d0;}
.lease-rental .table-rental table tr td:nth-child(3){ background: #fbf5c9;}

.lease-rental .residual{ margin: 25px auto;}
.lease-rental .residual table{ width: 100%; border-collapse: collapse;}
.lease-rental .residual table tr th{ text-align: center; font-size: 20px; border: 2px solid #c9c9c9; padding: 8px; color: #d40202; background: #fff4fd;}
.lease-rental .residual table tr td{border: 2px solid #c9c9c9; padding: 8px 22px; vertical-align: top; color: #603c18; font-weight: 500;}
.lease-rental .residual table tr td:first-child{ width: 30%;}
.lease-rental .residual table tr td:last-child{ width: 70%;}
.lease-rental .residual .text-center{ text-align: center; vertical-align: middle;}

@media(max-width:950px){
    .green-list-plan{ margin-top: 91px;}
    .images-inspection .car,
    .images-inspection .plus,
    .images-inspection .tool{ margin: auto;}
}

@media(max-width:850px){
    .general-car .general-content .text-green{ float: none; width: 100%; text-align: right;}

    .detail-expires ul li{ display: block; width: 48%; border-left: 0; border-bottom: 1px dashed #be9f81; margin: 0 auto;}
}

@media(max-width:768px){
    .rentcar .text-cheaper::before{ display: none;}

    .show-car{ display: block;}
    .show-car .images-car,
    .show-car .detail-car,
    .detail-plan .green-left,
    .detail-plan .green-right{ display: block; width: 100%;}
    .detail-plan .green-right{ border-left: 0;}

    .detail-expires ul li .title-expires span br{ display: none;}

    .images-inspection .car,
    .images-inspection .plus,
    .images-inspection .tool{ display: block; width: 100%; text-align: center;}

    .list-service ul li{ width: 50%;}
    
}

@media(max-width:680px){
    .detail-plan{ display: block;}
    .detail-plan .dark-green,
    .detail-plan .light-green{ display: block; width: 100%;}

    .images-plan{ display: block;}
    .images-plan .plan-left,
    .images-plan .plan-right{ display: block; width: 100%; margin: 18px auto;}

    .green-list-plan ul li{ width: 31%;}

    .lease{ display: block;}
    .lease .lease-text,
    .lease .lease-images{ display: block; width: 100%; padding: 18px;}
}

@media(max-width:580px){
    .list-payment .green-list,
    .list-payment .car-bear{ display: table-cell; width: 50%;}
    .list-payment .green-list img{ width: 72px;}

    .detail-expires ul li{ width: 100%;}

    .lease-rental .table-rental table tr th{ font-size: 16px;}
    .lease-rental .table-rental table tr td{ padding: 8px; font-size: 12px; font-weight: normal;}
    .lease-rental .residual table tr th{ font-size: 16px;}
    .lease-rental .residual table tr td{ padding: 8px; font-size: 12px; font-weight: normal;}

    .bg-pattern-green{ padding: 10px 0px; }
    .text-header{font-size: 20px; }
    .bg-dot-green{padding: 10px 0px;}
    .text-header-white{font-size: 20px; }
}

@media(max-width:480px){
    .green-list-plan ul li{ width: 100%;}

    .list-service ul li{ width: 100%;}

    .step-contract ul li div{ padding: 18px 8px;}
    
}

@media(max-width:380px){
    .rentcar .text-cheaper{ right: 0; left: 0;}
    .rentcar .text-header{ font-size: 22px;}

    .general-car .general-content{ padding: 12px;}
    .general-car .general-content .text-blue{ font-size: 30px;}
    .general-car .general-content .text-red{ font-size: 35px;}
    .general-car .general-content .hight{ position: relative; right: 0; left: 0; margin: 12px auto; display: inherit;}

    .list-payment .green-list img{ width: 65px;}
}