<style type="text/css">
  .row.car-row .car-card .car-header {
    position: absolute;
    left: 36px;
    z-index: 99;
    top: 28px;
}
#pjWrapperCarRental_theme2 .car-row .car-card:hover {
transform: unset ;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    border-color: #d7e3ff;
}
.row.car-row .car-card .car-header:after {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #2563EB;
    left: 13px;
    top: 8px;
    border: 3px solid #E5E7EB;
}
.row.car-row .car-card{
    position: relative;    
}

.row.car-row .car-card .car-header {
    padding: 6px 22px 6px 30px !important;
    font-weight: 700 !important;
}
.owl-carousel .owl-stage-outer img {
    border-radius: 15px;
}
.row.car-row .fleet_not_available .car-header {
    background: #F3F4F6 !important;
    color: #6B7280 !important;
    padding: 6px 22px!important;
}
.row.car-row .fleet_not_available .car-header:after{
  content: unset;
}
.row.car-row .car-card .car-price h2 {
    color: #1F2937;
    font-size: 18px;
    text-align: left;
    font-weight: 700;
    float: left;
    margin: 0;
}
.row.car-row .car-card .car-price p.money {
    float: right;
    color: #1F2937 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    margin: 0 !important;
}
a.btn.btn-primary.btn-block.btn-book.pjCrBtntDefault {
    float: left;
    width: 100%;
    text-transform: uppercase;
    margin: 15px 0;
}
a.btn.btn-primary.btn-block.btn-book.pjFleetUnavailable {
    float: left;
    width: 100%;
    text-transform: uppercase;
    margin: 15px 0;
    background-color: #D7D7D7;
    border-color: #E5E7EB;
}
.row.car-row .car-card .car-price {
  
    width: 100%;
    float: left;
}
.row.car-row .car-card .car-stats .row {
 

}
.row.car-row .car-card .car-stats .row p {
    font-size: 14px;
    margin: 0;
}
.col-xs-12.car-description {
    margin: 15px 0;
    line-height: 32px;
    color: #4B5563;
}
.row.car-row .car-card {
    border-radius: 15px !important;
    float: left;
    width: 100%;
}
.fleet_not_available {
    opacity: 0.7 !important;
}
.fleet_not_available .col-xs-3.car-stat img {
  
    filter: grayscale(100%);
}
.col-xs-3.car-stat {
    background: #fafafb !important;
}

#pjWrapperCarRental_theme2 .pjCrContainer .pjFleetUnavailable {
    border-color: #d0391c;
    color: #fff;
    float: left;
    width: 100%;
    text-transform: uppercase;
    margin: 15px 0;
    background: linear-gradient(to bottom, rgba(243, 76, 42, 1) 0%, rgba(231, 62, 29, 1) 95%, rgba(235, 61, 27, 1) 97%, rgba(232, 62, 27, 1) 100%);
}
</style>
<div class="container-fluid pjCrContainer">

    <?php

    if (count($tpl['arr']) > 0)

    { 

    	$type_transmissions = __('type_transmissions', true);

    	?>

    	<div class="row car-row"><!-- giữ class car-row để auto-center 1–2 box -->

    		<?php

			foreach ($tpl['arr'] as $type)

			{

				?>

				<div class="col-xs-12 col-sm-4 <?php if ($type['cnt_available'] > 0 && $type['total_price'] > 0)  echo 'fleet_available'; else echo 'fleet_not_available'; ?>">

                  <div class="car-card">

                    <div class="car-header"><?php if ($type['cnt_available'] > 0 && $type['total_price'] > 0)  echo __('front_available', true, false); else echo __('front_not_available', true, false) ; ?> </div>

                    <?php if (isset($type['images']) && $type['images']) { ?>

                    	<!-- Owl gallery -->

                        <div class="car-gallery owl-carousel owl-theme">

                        	<?php foreach ($type['images'] as $image) { ?>

                          		<div class="item"><img src="<?php echo PJ_INSTALL_URL . $image['medium_path'];?>" alt="<?php echo pjSanitize::html($image['title']);?>"></div>

                          	<?php } ?>

                        </div>

                    <?php } ?>

                    <div class="car-price">

                    	<?php 
                    	//if ($type['cnt_available'] > 0 && $type['total_price'] > 0) { ?>

                          <!---<p class="label"><?php __('front_price_from');?>:</p>--->
                          <h2><?php echo pjSanitize::html($type['name']);?></h2>

                          <p class="money"><?php echo pjCurrency::formatPrice($type['total_price']); ?></p>

                        <?php //}else { ?>

                        	<!--<p><span class="text-danger"><?php echo __('front_not_available', true, false);?></span></p>-->

                        <?php //}
                        ?>

                    </div>
                      <div class="car-stats">

                      <div class="row">

                        <div class="col-xs-3 car-stat"><img src="<?php echo PJ_UPLOAD_PATH;?>fleets/icon-1.png"><p><?php echo $type['passengers']; ?></p>
                        </div>
                        <div class="col-xs-3 car-stat"><img src="<?php echo PJ_UPLOAD_PATH;?>fleets/icon-2.png"><p> <?php echo $type['luggages']; ?></p></div>

                        <div class="col-xs-3 car-stat"><img src="<?php echo PJ_UPLOAD_PATH;?>fleets/icon-3.png"><p> <?php echo $type['doors']; ?></p></div>

                        <div class="col-xs-3 car-stat"><img src="<?php echo PJ_UPLOAD_PATH;?>fleets/icon-4.png"><p> <?php echo !empty($type['transmission']) ? substr($type_transmissions[$type['transmission']], 0, 1) : ''; ?></p></div>

                      </div>

                    </div>
                    <div class="row">

                      <div class="col-xs-12 car-description">

                        <?php echo !empty($type['description']) ? stripslashes(nl2br($type['description'])) : ''; ?>

                      </div>

                    </div>
                    <?php 
                    if ($type['cnt_available'] > 0 && $type['total_price'] > 0) { ?>

                    	<a href="<?php echo $tpl['main_booking_page'].'&tid='.$type['id']; ?>" class="btn btn-primary btn-block btn-book pjCrBtntDefault" target="_blank"><?php __('front_btn_book_now');?></a>

            		<?php  } else{ ?>
            		    <a href="javascript:void(0)" class="btn btn-primary btn-block btn-book pjFleetUnavailable"><?php __('front_btn_book_now');?></a>
            		<?php } ?>

                   

            

                    

                  </div>

                </div>

				<?php 

			} ?>

      	</div>

    	<?php

    }else{ 

    	__('front_2_empty');

    } 

    ?>

</div>