:root {

    --Black: #000000;

    --alBlackF: #242529;

    --priceprod: #ffffff;

    --alBlue: #DEE8F4;

    --BlueA: #001659;

    --alBlueHMb: #c6d7ec;

    --alGray: #F5F5F5;

    --alGrayListCars: #E1E1E1;

    --alGrayInfoCars: #555;

    --alBreadcrumb: #999;

    --red: #ee0d09;

    --redHover: #cf2e2e;

    --main-color:#d30505;

    --color02: #f3ed7b;

    --blue: #14163c;

   --footerbg:#081336;

   --date-color:#999696;

}



html {

    font-size: 62.5%;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    line-height: 2.2rem;

    font-size: 1.4rem;

    font-family: 'Roboto', sans-serif;

    text-decoration: none;

}

body

{

    

    font-family: 'Roboto', sans-serif;

}



h1 {

    font-family: 'Roboto', sans-serif;

    font-size: 2.0rem;

    text-transform: uppercase;

    line-height: 2.4rem;

}



h2 {

    font-family: 'Roboto', sans-serif;

    font-size: 2.0rem;

    text-transform: uppercase;

    line-height: 2.4rem;

}



h3 {

    font-family: 'Roboto', sans-serif;

    font-size: 1.6rem;

    text-transform: uppercase;

}



h1, h2

{

    position: relative;

    padding-left: 1em;

}

h1:after, h2:after

{

    content: "";

    background: var(--main-color);

    height: 14px;

    width: 4px;

    position: absolute;

    left: 5px;

    top: 5px;

}

.choxenghean-clear-fix {

    clear: both;

}



a {

    color: var(--vtbghome);

    cursor: pointer;

}



a:hover {

    color: var(--vtyellow);

}



ul li {

    list-style: none;

}



img {

    width: 100%;

    vertical-align: middle;

    object-fit: cover;

}



select {

    height: 40px;

    border-radius: 4px;

    border: 1px solid #c7c5c5;

    

}



.choxenghean-container {

    width: 1200px;

    margin: 0 auto;

}



.choxenghean-loading-img {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 99999;

    background: rgba(33,33,33,.5);

    display: none;

}



.choxenghean-box-loading {

    background-repeat:no-repeat;

    background-attachment: fixed;

    background-position: center;

    width: 100%;

    height: 100%;

    z-index: 999999;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

}



.choxenghean-car, .choxenghean-new {

    font-family: 'Roboto', sans-serif;

    text-transform: capitalize;

    color: var(--alBlack);

    font-weight: 700;

    text-transform: uppercase;

}



.choxenghean-price {

    font-family: 'Roboto', sans-serif;

    color: var(--alWhite);

    text-transform: capitalize;

    text-align: right;

    font-weight: 700;

}



.choxenghean-logo

{

    text-align: left;

}



h2.news-home, .choxenghean-des p

{

    color: var(--vtbackground) !important;

}

.dangban

{

    margin-top: 2em;

}



.top-item1

{

    position: relative;

}

.da-ban

{

    background: var(--red);

    position: absolute;

    top: 10px;

    right: 10px;

    padding: 0.4em 0.7em;

    font-weight: bold;

    border-radius: 20px;

    font-size: 1em;

    color: var(--priceprod);

}

.tieu-de-xe

{

    display: block;

    margin: 0.7em 0.7em 0 0.7em;

    overflow: hidden;

    height: 46px;

}



.tieu-chi

{

    margin-left: .7em;

    margin-bottom: 1.2em;

}



/*sơ lược*/

.so_luoc

{

    width: 30%;

    padding: 1em;

    background: #DEE8F4;

}

.so_luoc h2

{

    padding-left: 0;

    margin-bottom: 1em;

    color: var(--red);

}

.so_luoc h2:after

{

    background: none;

    left: 0;

}

.so_luoc p

{

    margin-bottom: 1rem;

}

.so_luoc ul li

{

    margin-left: 2em;
    list-style-type: disc;

}

/*giá bán và trả trước*/

.price-prod

{    

    padding: 0.4em 0.6em;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    background: var(--main-color);

    margin-top: 1em;

}

.price-buy

{

    text-transform: uppercase;

    font-weight: bold;

    font-size: 1.3em;

    color: var(--priceprod);

    border-radius: 20px;  

}



.prepay-prod

{

    font-size: 0.9em;

    color: var(--priceprod);

}





/*dịch vụ*/

.dich-vu3

{

    color: var(--priceprod);

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}

.dich-vu3 li

{

    flex-basis: 32%;

    margin-bottom: 1.5em;

    text-align: center;

}

.dich-vu3 li strong

{

    text-transform: uppercase;

    font-size: 1.4em;

    color: var(--main-color);

    

}

.dich-vu3 .material-icons-outlined

{

    font-size: 5.4em !important;

    color: #000;

}

/*thông tin phụ*/

.thong-tin-phu

{

    display: block;

    margin-top: 1.2em;

}

.thong-tin-phu li

{

    line-height: 0.8em;

    align-items: center;

    display: flex;

    justify-content: center;

    color: #000;

}

.thong-tin-phu li span.material-icons-outlined

{

    font-size: 1.1em !important;

}



/*phân trang*/



.choxenghean-pagination ul {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin-bottom: 2.5rem;

}



.choxenghean-pagination ul li a {

    display: inline-block;

    text-align: center;

    color: var(--alBlack);

    width: 3.5rem;

    line-height: 3.5rem;

    margin: 0 0.5rem 0 0;

    background: var(--alGrayListCars);

    border-radius: 4px;

}



.choxenghean-pagination ul li a:hover {

    background: var(--alRed) !important;

    color: var(--alWhite);

}



.choxenghean-active-pag {

    background: var(--alRed) !important;

    color: var(--alWhite) !important;

    font-weight: 700;

}



/*breadcrumb*/

.choxenghean-breadcrumb {

    padding: 1.5rem 0 0.5rem;

    text-transform: capitalize;

}



.choxenghean-breadcrumb .fa-angle-right {

    margin: 0 3px;

    color: var(--alBreadcrumb);

}

.choxenghean-breadcrumb span

{

    color: var(--vtWhite);

}



.lien-ket

{

    display: block;

    margin-top: 1.2em;

}

/*hình ảnh*/
.giao-xe
{
    padding: 1em;
    margin-top: 2em;
    background: url(../images/back-giao-xe.jpg);
    z-index: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.giao-xe-tieu-de
{
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    margin-bottom: 1em;
}

.giao-xe section
{
    width: 1200px;
    margin: 0 auto;
    
}
.giao-xe section .box img
{
    width: 95%;
    height: 330px;
    border-radius: 4px;
}

/*nút gọi điện*/

.contact-box {

    position: fixed;

    bottom: 5px;

    z-index: 100;

}



@keyframes img-phone {

    0% {

        transform: rotate(0) scale(1) skew(1deg);

    }

    10% {

        transform: rotate(-25deg) scale(1) skew(1deg);

    }

    20% {

        transform: rotate(25deg) scale(1) skew(1deg);

    }

    30% {

        transform: rotate(-25deg) scale(1) skew(1deg);

    }

    40% {

        transform: rotate(25deg) scale(1) skew(1deg);

    }

    50% {

        transform: rotate(0) scale(1) skew(1deg);

    }

    100% {

        transform: rotate(0) scale(1) skew(1deg);

    }

}



.kh-phone {

    position: relative;

    visibility: visible;

    background-color: transparent;

    width: 90px;

    height: 90px;

    cursor: pointer;

    z-index: 11;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translateZ(0);

    transition: visibility .5s;

    left: 0;

    bottom: 0;

    display: block;

}



@keyframes zoomEffect {

    0% {

        transform: scale(.9)

    }

    70% {

        transform: scale(1);

        box-shadow: 0 0 0 15px transparent

    }

    100% {

        transform: scale(.9);

        box-shadow: 0 0 0 0 transparent

    }

}



.phone-box {

    width: 65px;

    height: 65px;

    top: 12px;

    left: 12px;

    position: absolute;

    background-color: rgba(255,0,0, .9);

    border-radius: 50%;

    border: 2px solid transparent;

    transition: all .5s;

    -webkit-transform-origin: 50% 50%;

    -ms-transform-origin: 50% 50%;

    transform-origin: 50% 50%;

    -webkit-animation: zoomEffect 1.3s infinite;

    animation: zoomEffect 1.3s infinite;

    opacity: .7;

    box-shadow: 0 0 0 0 red;

}



.img-phone {

    background-color: red;

    width: 40px;

    height: 40px;

    line-height: 40px;

    top: 25px;

    left: 25px;

    position: absolute;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    -webkit-animation: img-phone 1s infinite ease-in-out;

    animation: img-phone 1s infinite ease-in-out;

}



.img-phone a {

    display: block;

    line-height: 37px;

}



.img-phone img {

    max-height: 25px;

    max-width: 27px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

}



/*chat zalo*/

.kh-zalo {

    position: relative;

    visibility: visible;

    background-color: transparent;

    width: 90px;

    height: 90px;

    cursor: pointer;

    z-index: 11;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translateZ(0);

    transition: visibility .5s;

    left: 0;

    bottom: 0;

    display: block;

}



.kh-zalo .phone-box {

    box-shadow: 0 0 0 0 #0091ff;

    background-color: rgba(0,145,255,.9);

}



.kh-zalo .img-phone {

    background-color: #0091ff;

}



/*chat messenger fb*/

.kh-fbm {

    position: relative;

    visibility: visible;

    background-color: transparent;

    width: 90px;

    height: 90px;

    cursor: pointer;

    z-index: 11;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translateZ(0);

    transition: visibility .5s;

    left: 0;

    bottom: 0;

    display: block;

}



.kh-fbm .phone-box {

    box-shadow: 0 0 0 0 #126bd1;

    background-color: rgba(18,107,209,.9);

}



.kh-fbm .img-phone {

    background-color: #126bd1;

}



.kh-fbm .img-phone img {

    max-height: 45px;

    max-width: 40px;

}



/*nút lên đầu trangr*/

#myBtn {

    display: none;

    position: fixed;

    bottom: 20px;

    right: 30px;

    z-index: 99;

    font-size: 14px;

    border: none;

    outline: none;

    background-color: var(--main-color);

    cursor: pointer;

    padding-left: .5em;

    padding-right: .5em;

    padding-top: .4em;

    border-radius: 5px;

}

#myBtn span

{

    font-size: 1.2em;

    color: #fff;

}

#myBtn:hover {

    background-color: #e5c231;

}





/*giao diện cho mobile*/

@media only screen and (max-width: 1230px) {

    .choxenghean-container {

        width: 100%;

        padding-top: 1em;

        padding-bottom: 1em;

    }



    /*breadcrumb*/

    .choxenghean-breadcrumb {

        padding: 1.5rem 1.5rem 0.5rem;

    }
    .giao-xe-tieu-de, .giao-xe section
    {
        max-width: 100%;
        width: 100%;
    }
}

@media only screen and (max-width: 1200px)

{

    .choxenghean-list-cars .choxenghean-info-car .choxenghean-item-info

    {

        flex-basis: 49% !important;

    }

    .so_luoc

    {

        width: 50%;

    

    }

}

/*fix giá xe và trả trước*/

@media only screen and (max-width: 1110px)

{

    .prepay-prod

    {

        flex-basis: 100%;

    }

    .prepay-prod

    {

        margin-top: 0.5em;

    }

}



@media only screen and (max-width: 821px)

{

    .price-buy, .prepay-prod

    {

        flex-basis: 100%;

        

    }

    .prepay-prod

    {

        margin-top: 0.5em;

        

    }

}



@media only screen and (max-width: 768px) {

    /*breadcrumb*/

    .choxenghean-breadcrumb {

        padding: 1.5rem 1rem 0;

    }



    h1 {

        font-size: 1.7rem;

    }



    h2 {

        font-size: 1.7rem;

        line-height: 2.4rem;

    }



    .choxenghean-title h2 {

        font-size: 1.7rem;

        line-height: 2.4rem;

    }



    .choxenghean-title {

        padding: 1.5rem 0;

    }



    select {

        height: 35px;

    }

    header

    {

        display: none;

    }

    .dangban

    {

        margin-top: 0;

    }

    .choxenghean-list-news

    {

        margin-top: 0.4em !important;

    }

     /*cắt tiêu đề tin tức*/

    .choxenghean-car, .choxenghean-new

    {

        overflow: hidden;

        text-overflow: ellipsis;

        -webkit-line-clamp: 2;

        display: -webkit-box;

        -webkit-box-orient: vertical;

    }

    .so_luoc
    {
        width: 70%;
    }
    
}

@media only screen and (max-width: 576px)

{

    .xe-so-3

    {

        display: none;

    }

}

@media only screen and (max-width: 420px)

{

    .dich-vu3 .materipd-icons-outlined

    {

        font-size: 3em !important;

    }

    .dich-vu3 li strong

    {

        font-size: 1em;

    }

    /*cắt mô tả tin tức*/

    .choxenghean-des p

    {

        overflow: hidden;

        text-overflow: ellipsis;

        -webkit-line-clamp: 2;

        display: -webkit-box;

        -webkit-box-orient: vertical;

    }

    .so_luoc

    {

        width: 100%;

    }

}

@media only screen and (max-width: 375px)

{

    .price-buy, .prepay-prod

    {

        flex-basis: 49%;

    }

    .prepay-prod

    {

        margin-top: 0;

        text-align: end;

    }

    .tieu-de-xe

    {

        height: auto;

        display: grid;

    }

    .choxenghean-list-cars .choxenghean-info-car

    {

        margin-left: 0.4em !important;

    }

    .choxenghean-list-cars .choxenghean-info-car .choxenghean-item-info {

       

        font-size: 1.4rem;

    }

    .xe-so-3

    {

        display: block;

    }

}