.warpper { color: #000;}
.font-medium { font-weight: 500;}
.font-bold { font-weight: 700;}

.p-3 { padding: 1rem;}
.p-4 { padding: 1.5rem;}
.pt-4 { padding-top: 1.5rem;}
.pb-4 { padding-bottom: 1.5rem;}

.mt-3 { margin-top: 1rem;}
.mt-4 { margin-top: 1.5rem;}
.mr-3 { margin-right: 1rem;}

.font-12 { font-size: 12px;}
.font-13 { font-size: 13px;}
.font-15 { font-size: 15px;}
.font-20 { font-size: 20px;}

.color-white { color: #fff;}
.color-pink { color: #ff57aa;}

.bg-patten-gray { background: url(../images/bg.jpg);}
.bg-white { background: #fff;}

.d-block { display: block;}
.d-inline-block { display: inline-block;}

.text-center { text-align: center;}
.text-right { text-align: right;}


.img-fluid { max-width: 100%;}


/* FILTER */
.filter { display: flex; flex-wrap: wrap; width: 100%; align-items: flex-start;}
.filter .purpose { width: 50%;}
.filter .use-car { width: 50%;}

.check-purpose li { display: inline-block;}
.check-purpose .fillter-purpose{ background-color: #f1f1f1; display: inline-block; border-radius: 4rem; vertical-align : middle; padding: 0.25rem 0.8rem; margin: 2px; cursor: pointer;}
.check-purpose input[type=radio]{ display:none }
.check-purpose input[type=radio]:checked + .fillter-purpose { background-color:#f7ff25;}
.check-purpose .fillter-purpose:hover { background-color:#f7ff25;}

.filter-dropdown { display: flex; flex-wrap: wrap; width: 65%;}
.dropdown { display: block; width: 33.33%;}
.dropdown select{ border: 1px solid #ccc; text-align: center; padding: 1rem; display: block; width: 100%; -webkit-appearance:none; -moz-appearance:none;}
.dropdown select::-ms-expand{ display: none;}
.dropdown select.style-select{  background: url(../images/icon-arrow-down.png) no-repeat right center #fff; }

.position-btn { display:flex; flex-wrap: wrap; justify-content: flex-end; width: 35%;}
.btn-search { background: #000; padding: 1rem 2.5rem; color: #fff; border: 0; cursor: pointer; margin-right: 1rem; transition: all 0.5s;}
.btn-search:hover { box-shadow: 0px 0px 12px #666;}
.btn-clear { background: #ababab; padding: 1rem 1.5rem; color: #fff; border: 0; cursor: pointer; transition: all 0.5s;}
.btn-clear:hover { box-shadow: 0px 0px 12px #999;}


/* pagination */
.pagination{ float: right; display: inline-block;}
.page{float: right;padding: 5px 20px;background:  #f1f1f1;border-radius: 7px;}
.page a{ padding: 0px 11px;display: inline-block;font-size: 14px; border-left:  1px solid #9e9e9e;line-height: 14px;}
.page a:last-child { border-right: 1px solid #9e9e9e; }
.page a.active { font-weight:  bold; color:  #fa2020; }
.page a:hover{ color: #fa2020;}
.page-active{font-weight:  bold; color:  #fa2020;}

/* ITEMS CUSTOMER */
.items-coustomer {display: flex;flex-wrap: wrap;justify-content: start;width: 100%;}
.items-coustomer li {width: calc(100% / 3 - 0.4rem);margin-top: 1rem;border: 2px solid #ccc;background: #fff;transition: all 0.5s;position: relative;margin-right: 0.5rem;}
.items-coustomer li:hover { border: 2px solid #f7ff25; box-shadow: 0px 0px 12px #eeeeee;}
.items-coustomer li .modal_open { display: flex; flex-wrap: wrap; cursor: pointer;}

.images-customer { display: block; width: 45%;}
.content-customer { display: block; width: 55%; padding: 0.25rem 0.25rem 2.2rem 0.25rem;}
.tag span { background-color: #f1f1f1; display: inline-block; border-radius: 4rem; vertical-align : middle; padding: 0.25rem 0.8rem; margin: 2px 2px 2px 0; font-size: 13px;}
.date { display: inline-block; background: #000; padding: 0.25rem 1rem 0.25rem 2.5rem; position: absolute; right: -4px; bottom: 8px;}
.date::before { content: ''; position: absolute; bottom: 0; left: 0;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 26px 26px 0 0;
    border-color: #fff transparent transparent transparent;
}

.modal {position: fixed;top: 0;left: 0;/* width: 100%; *//* height: 100vh; */z-index: 3;/* padding: 1rem; *//* display: flex; *//* flex-wrap: wrap; *//* align-items: center; *//* justify-content: center; */top: 50%;left: 50%;transform: translate(-50%, -50%);/* padding: 0 20px; */}
.overlay-modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); z-index: 2;}
.content-modal {background: #fff;max-width: 980px;width: 100%;padding: 1rem 4rem 1.5rem;}
.btn-close {cursor: pointer;padding: 5px 0;}

@media(min-width:992px) { 
    .items-coustomer li:nth-child(3n){margin-right: 0rem;}

}

@media(max-width:991px) { 
    /* ITEMS CUSTOMER */
    .items-coustomer li { width: calc(100% / 2 - 0.4rem);}
    .items-coustomer li:nth-child(2n){margin-right: 0rem;}

    /* FILTER */
    .filter-dropdown { width: 60%;}
    .position-btn { width: 40%;}
}

@media(max-width:767px) {
     /* FILTER */
     .filter .purpose { width: 100%;}
     .filter .use-car { width: 100%;}
    .filter-dropdown { width: 100%;}
    .position-btn { width: 100%; justify-content: center;}

}

@media(max-width:620px) { 
    /* ITEMS CUSTOMER */
    .images-customer { display: block; width: 100%; text-align: center;}
    .content-customer { display: block; width: 100%;}
}

@media(max-width:420px) { 
    /* ITEMS CUSTOMER */
    .items-coustomer li { width: 100%;}

    .color-pink.font-20 { font-size: 14px;}
}