
.bg-filter { background: url(../images/bg-filter.png); }

.pd20TB { padding: 20px 0; }
a.anchor {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

/*------------- item car -------------*/
.item-car { display: block; }
.item-car ul { display: flex; flex-wrap: wrap; margin: 0 -2% 0 0; }
.item-car ul li { position: relative; display: block; width: 23%; margin: 0 2% 18px 0; border: 2px solid #ccc; padding: 4px; font-size: 12px; transition: all 0.3s; }
.item-car ul li:hover { border: 2px solid #f7ff25; }
.images-car img { width: 100%; }
.data-car { padding: 4px; margin-bottom: 28px; }
.name-car { font-weight: bold; }
.name-car strong { font-size: 15px; margin-left: 8px; }
.detail-car { display: block; height: 36px; overflow: hidden; }
.info-car { display: block; margin-top: 8px; }
.price-car { display: block; font-weight: bold; text-align: right; position: absolute; bottom: 0px; right: 8px; }
.price-car span { font-size: 22px; color: #fb0000; }


/*-------------- filter --------------*/
.filter { display: flex; flex-wrap: wrap; margin: 10px auto; }
.filter-shape { display: block; width: 50%; padding-right: 2%; }
.filter-model { display: block; width: 50%; padding-left: 2%; }
.filter .title-filter {margin: 10px 0 5px 2px;width: 100%;}
.filter p{font-size: 14px;}
.select-radios {display: flex;flex-wrap: wrap;/* justify-content: space-between; */}
.select-radios .radio{background-color: #fff;display: inline-block;width: 32%;height: 44px;border: 1px solid #999;padding: 12px 5px 10px 3px;margin: 0 3px 16px;cursor: pointer;color: #000;font-size: 13px;position: relative;line-height: 1.2em;}
.select-radios input[type=radio]{ display:none }
.select-radios input[type=radio]:checked + .radio{  border: 2px solid #FBF162;}
.select-radios .radio img {float: right;/* margin-top: -3px; */position: absolute;right: 5px;bottom: 5px;}
.l2{padding: 6px 5px 10px 3px !important;}
.filter-price .select-radios .radio { width: 73%; text-align: center;  }

.dropdown-select { display: flex; flex-wrap: wrap; justify-content: space-between; }
.dropdown-select span{position: relative; top:10px;}
.dropdown-select select { border: 1px solid #999; width: 47%; height: 44px; padding: 2px 4px 3px 18px; -webkit-appearance:none; -moz-appearance:none; }
.dropdown-select select::-ms-expand, .dropdown-select2 select::-ms-expand{ display: none;}
.dropdown-select select.style-select {  background: url(../images/arrow-select.jpg) no-repeat right center #fff; background-position: 97% 18px}
.dropdown-select2 select.style-select{  background: url(../images/arrow-select.jpg) no-repeat right center #fff; background-position: 104px 18px}
.dropdown-select .text-search, .dropdown-select2 .text-search { width: 100%; padding: 2px 4px 3px 18px; border: 1px solid #999; margin-top: 12px; height: 44px; }

.result { color: #919191; padding: 0 10px; font-size: 12px; font-weight: normal; }
.result strong { color: #000; font-size: 24px; }

.searchcar2 { display: block; width: 100%; margin-top: 30px;}
.searchcar2 .search-select2 { display: inline-block; margin-right: 4%; }
.dropdown-select2 select{ border: 1px solid #999; width: 125px; height: 44px; padding: 2px 4px 3px 18px; -webkit-appearance:none; -moz-appearance:none; }


.search-color{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 18px; width: 100%; margin-top: 50px; }
.search-color .select-color{ display: block; text-align:left; width: 62%;}
.search-color .select-color .fillter-color{ width: 25px; height: 25px; margin:0; display: inline-block; border: 2px solid #eee; }
.search-color .select-color .fillter-color.color0{ background: #fff; }
.search-color .select-color .fillter-color.color1{ background: #000;}
.search-color .select-color .fillter-color.color2{ background: #ea0300;}
.search-color .select-color .fillter-color.color3{ background: #033ba1;}
.search-color .select-color .fillter-color.color4{ background: #fffc00;}
.search-color .select-color .fillter-color.color5{ background: #32c000;}
.search-color .select-color .fillter-color.color6{ background: #531800;}
.search-color .select-color .fillter-color.color7{ background: #97803b;}
.search-color .select-color .fillter-color.color8{ background: #adadad;}
.search-color .select-color .fillter-color.color9{ background: #7f7f7f;}
.search-color .select-color .fillter-color.color10{ background: #fba400;}
.search-color .select-color .fillter-color.color11{ background: #6c00ba;}
.search-color .select-color .fillter-color.color12{ background: #ed00ff;}
.search-color .select-color .fillter-color.color13{ background: #ffdc99;}
.search-color .select-color .fillter-color.color14{ background: #f5ecc0;}
.search-color .select-color .fillter-color.color15{ background: #4e5366;}
.search-color .select-color .fillter-color.color16{ background: #153a75;}
.search-color .select-color .fillter-color.color17{ 
    background-color: #151516;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #7d7d7d), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #7d7d7d),color-stop(.75, #7d7d7d), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 7px 7px;

    background-color: #151516;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #7d7d7d), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #7d7d7d),color-stop(.75, #7d7d7d), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 7px 7px;}
.search-color .select-color input[type=checkbox]{ display:none }
.search-color .select-color input[type=checkbox]:checked + .fillter-color{ border: 2px solid #FBF162; }

.position-search { display:flex; flex-wrap: wrap; justify-content: space-between; text-align: center; width: 38%; }
.position-search .btn-search { background: #000; color: #fff;  display: block; width: 61%; padding: 12px 4px; border-bottom: 3px solid #999; transition: all 0.3s; font-family: 'mplus-2p-light'; }
.position-search .btn-search:hover { background: #666; }
.position-search .btn-clear { background: #ababab; color: #fff;  display: block; width: 36%; padding: 14px 4px; border-bottom: 3px solid #999; transition: all 0.3s; font-family: 'mplus-2p-light'; font-size:13px; }
.position-search .btn-clear:hover { background: #b7b7b7;}

/*---------------Filter---------------*/
.filter-search{font-size: 12px; color:#919191; padding: 18px 0 10px; position: relative; text-align: center; border-bottom: 1px dashed #666; margin-bottom: 14px; }
.filter-search span{display: inline-block; border-right: 1px solid #e2e2e2; padding: 10px;}
.filter-search span:last-child{border: 0;}
.filter-search button{border: 1px solid #919191; width: 25px; height: 22px; position: relative; top:3px; color: #919191; padding: 0 3px; margin: 0 3px; cursor: pointer; font-size:16px; line-height: 12pt; background: #FFF;}
.filter-search button:hover{border: 1px solid #FBF162; color: #000;}
.sort-active{border: 2px solid #FBF162 !important; color: #000 !important;}


/*--------------- Page ---------------*/
/* .page-right { float: right; margin: 4px 0; }
.page-number{background: #f1f1f1; text-align: right; padding: 5px 10px; border-radius: 18px; display: table; }
.page-number a{display: table-cell; font-size: 14px; padding:0 12px; color:#000; border-right: 1px solid #9e9e9e;  }
.page-number a:last-child { border-right: 0; }
.page-number a:hover{color:#999 !important;}
.page-number a.btn-prev,
.page-number a.btn-next{ color:#666;}
.page-active{color:#fa2020 !important; font-weight: bold;}  */
.page{float: right;padding: 5px 20px;background:  #f1f1f1;border-radius: 7px; margin: 4px 0;}
.page a{/* border-bottom:3px solid #FFF; */padding: 0px 11px;display: inline-block;font-size: 14px;/* font-weight: bold; */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;}


p.zero {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border: 3px solid #000;
    padding: 50px 0;
}

@media(max-width:980px) {
    .detail-car { height: auto; margin-top: 8px; }
    
    .filter-search { background: #f1f1f1; }
    .filter-search span { width: 140px; border-right: 0; }
}

@media(max-width:720px) {
    .filter-shape { width: 100%; padding: 8px 0; }
    .filter-model {width: 100%;padding: 0px 0;}
}

@media(max-width:680px) {
    .pd20TB.bg-filter { padding: 10px 0; }
    .filter {margin: 0px auto 0px;}
    .filter-shape { width: 100%; padding: 0px 0; }
     .filter-model {padding: 0px 0;}
    .filter .title-filter {margin: 5px 0 2px 2px;font-weight: bold;}
    .select-radios .radio {
        width: 32%;
        margin: 0 1% 10px 0;
    }
    .dropdown-select select { height: 34px; }
    .dropdown-select .text-search, .dropdown-select2 .text-search {height: 34px;margin-top: 3px;}

    .searchcar2 {margin-top: 5px;}
    .dropdown-select2 select{height: 34px;width: 45%;}
    .searchcar2 .search-select2 {display: block;margin-right: 0;}
    .dropdown-select2 select.style-select {
        background-position: 97% 18px;
    }
    .search-color{  margin-top: 10px; }


    .name-car strong { line-height:1em;}
    .detail-car { height: auto; margin-top: 3px; }
    .info-car {block;margin-top: 3px;}
    .item-car ul li { width: 48%; }
    

    .search-color .select-color { width: 100%; }
    .position-search { width: 250px; margin: 8px auto; }
}

@media(max-width:380px) {
    .page-number a { padding: 0 8px; }
}