body

{

    color: var(--White);

}

nav {

    position: relative;

    border-bottom: 2px solid #ccc;

}



.auto8x-title {

    padding: .8rem 0;

}



.auto8x-wrapper {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

}



.auto8x-wrapper .auto8x-col-l {

    flex-basis: 70%;

    color: var(--White);

}



.auto8x-wrapper .auto8x-col-r {

    flex-basis: 28%;

}



.auto8x-wrapper .auto8x-col-l .auto8x-title-car {

    

    margin: 1.5rem 0;

}



.auto8x-box-car-detail {

    

    border-radius: 4px;

}



/*danh sách ảnh xe*/

.auto8x-box-img {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

    flex-direction: row-reverse;

}



#auto8x-main-photo {

    flex-basis: 70%;

}



#auto8x-main-photo img {

    height: 420px;

    border-radius: 4px;

}



.auto8x-box-img .auto8x-list-img {

    flex-basis: 29%;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

}



.auto8x-box-img .auto8x-list-img:after {

    content: '';

    flex-basis: 24%;

}



.auto8x-list-img .auto8x-item {

    flex-basis: 49%;

    margin-bottom: 0.5rem;

}



.auto8x-list-img .auto8x-item:last-child {

    margin-bottom: 0;

}



.auto8x-list-img .auto8x-item:nth-child(2) img {

    border-top-right-radius: 4px;

}



.auto8x-list-img .auto8x-item .auto8x-photo-list img {

    height: 80px;

    border-radius: 4px;

}



.auto8x-box-info-salon

{

    padding: 1em;

    border: 1px dotted #6b6b69;

    padding-left: 0;

    border-radius: 4px;

}

.tt-vt

{

    

    

    padding-top: 2em;

}

.active-btn

{

    background:var(--vtcolorlink);

}

.w3-black

{

    border-radius: 4px;

}



.auto8x-car

{

    display: inline-block;

    width: 100%;

}

.auto8x-car b {

    color: var(--vtbgmenu);

        

}

.auto8x-item .auto8x-car b:hover

{

    color: var(--main-bg) !important;

}

.price-ok

{

    background: #000;

    padding: 0.6em;

    border-radius: 0 0 4px 4px;

    font-size: 1.3em;

    font-weight: 700;

    color: var(--red);

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}



.price-ok span

{

    flex-basis: 49%;

}

.tra-truoc-01

{

    text-align: end;

}



.auto8x-item-info span {

    color: var(--red);

    margin-right: 0.2rem;

    font-size: 1.2em;

}

.ten-hang-xe

{

    padding: .5rem 0 0 1rem;

    text-transform: uppercase;

}

.xe-da-ban

{

    background: var(--vtcolorlink);

    color: red;

    text-transform: uppercase;

    padding: 0.5em 1em;

    border-radius: 4px;

    font-weight: bold;

}



.car-name-nsg
{
    height: 44px;
    overflow: hidden;
    margin-top: .8em;
    margin-bottom: .8em;
}

/*begin lớp background trên ảnh sản phẩm*/

.anh-sp
{
    position: relative;
}

.anh-sp:hover .overlay {

    width: 100%;

  }

.overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    cursor: pointer;

    background: var(--vtcolorlink);

    overflow: hidden;

    width: 0;

    height: 100%;

    transition: .5s ease;

    opacity: 0.6;

}

.text {

    

    font-size: 20px;

    position: absolute;

    top: 50%;

    left: 50%;

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

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

    opacity: 0;

  }

  .image {

    display: block;

    width: 100%;

    height: auto;

  }

/*end lớp background trên ảnh sản phẩm*/



/*thông tin xe*/

.auto8x-box-info {

    margin-top: -0.5rem;

}



.auto8x-box-info .auto8x-price-car {

    padding: 2rem 0;

    background: var(--vtbgmenu);

    font-size: 2.6rem;

    font-weight: bold;

    color: var(--vtyellow);

    text-align: center;

    border-radius: 0 0 4px 4px;

}



.auto8x-box-info .auto8x-info-car {

    

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

    padding: 1.5rem;

    padding-left: 0;

}



.auto8x-box-info .auto8x-info-car .auto8x-item {

    flex-basis: 49%;

    display: flex;

    align-items: flex-start;

    flex-wrap: wrap;

    margin-bottom: 1.5rem;

}



.auto8x-box-info .auto8x-info-car .auto8x-item label {

    flex-basis: 35%;

}



.gia-ban

{

    font-size: 1.3em;

    font-weight: 700;

    color: var(--White);

}



/*vay trả góp*/

.box-installment {

    margin-top: 20px;

    

    border-radius: 4px;

}



.installment {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

}



.installment .item {

    flex-basis: 49%;

    margin-bottom: 10px;

}



.installment .item:last-child {

    margin-bottom: 0;

}



.installment .item label {

    margin-bottom: 5px;

    display: inline-block;

}



.installment .item  input,  .installment .item  select {

    width: 100%;

    height: 35px;

    border: 1px solid #bcb8b8;

    outline: none;

    padding-left: 10px;

    background: var(--gray4);

    border-radius: 4px;

   color: var(--White);

}



.installment .item .icon {

    color: var(--main-bg);

    font-weight: bold;

}



.installment .item .car-price {

    cursor: no-drop;

}



.installment .btn-send {

    text-align: left;

    flex-basis: auto;

    margin-top: 5px;

}



.installment input[type="text"][disabled] {

    font-weight: bold;

}



.installment .btn-send a {

    display: inline-block;

    text-transform: uppercase;

    color: var(--white);

    background: var(--main-bg);

    font-weight: bold;

    padding: 6px 30px;

    border-radius: 4px;

}



.installment .btn-send a:hover {

    background: var(--main-bgHover);

}



.rs-installment {

    background: #121212;

    border-radius: 4px;

    padding: 5px 15px;

    border: 1px solid #404040;

    margin: 15px 0 0;

}



.rs-installment .item {

    padding: 10px 0;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    border-bottom: 1px dotted var(--gray);

    

}



.rs-installment .item:last-child {

    border-bottom: none;

}



.rs-installment .item label {

    margin-bottom: 5px;

    font-weight: bold;

}



.rs-installment .item span {

    color: var(--red);

    font-weight: bold;

}





/*thông tin salon*/

.auto8x-box-info-salon ul {

    padding: 0 1.5rem;

}



.auto8x-box-info-salon p {

    margin-top: 1rem;

}



.auto8x-box-info-salon .auto8x-info-hotline {

    background: var(--alRed);

    color: var(--alWhite);

    padding: 1.5rem 0;

    font-size: 2.1rem;

    text-align: center;

}



.auto8x-info-hotline b {

    color: var(--alWhite);

    -webkit-text-fill-color: var(--alWhite);

    font-size: 2.6rem;

}



/*nội dung tin xe*/

.auto8x-car-description {

    padding: 1.5rem;

    padding-left: 0;

}



.auto8x-car-description p {

    display: block;

    margin-top: 1rem;

    width: 100%;

}



.auto8x-box-info

{

    padding: 0 1em;

    margin-top: 1em;

    border-radius: 5px;

    border: 1px solid #555;

}



/*tính phí sang tên*/

.auto8x-box-name-transfer-fee {

    margin-top: 1rem;

}



.auto8x-name-transfer-fee {

    padding: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    border-radius: 4px;

    background: #121212;

}



.auto8x-name-transfer-fee .auto8x-box {

    flex-basis: 100%;

}



.auto8x-name-transfer-fee .auto8x-box-img {

    flex-basis: 49%;

}



.auto8x-name-transfer-fee .auto8x-item {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

    margin-bottom: 2rem;

}



.auto8x-name-transfer-fee .auto8x-item:last-child {

    margin-bottom: 0;

}



.auto8x-name-transfer-fee .auto8x-row {

    flex-basis: 58%;

}

.auto8x-row span, .auto8x-row label, .font-fix

{

    font-size: 0.9em !important;

}

.auto8x-name-transfer-fee .auto8x-pdb .auto8x-row {

    display: flex;

    align-items: flex-start;

    flex-direction: column;

}



.auto8x-name-transfer-fee .auto8x-row input {

    margin-right: 0.5rem;

    position: relative;

    top: 1px;

}



.auto8x-name-transfer-fee .auto8x-choose {

    flex-basis: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.auto8x-name-transfer-fee .auto8x-choose select {

    height: 30px;

    width: 100px;

    padding-left: 10px;

    font-size: 0.9em;

}



.auto8x-name-transfer-fee .auto8x-cacu {

    border-top: 1px solid #fff;

    padding-top: 1.5rem;

}



.auto8x-name-transfer-fee .auto8x-cacu label {

    font-weight: bold;

}



.auto8x-name-transfer-fee .auto8x-cacu span {

    font-weight: bold;

    

    font-size: 0.9em;

}



/*xe cùng khoảng giá - xem thêm*/

.auto8x-box-other-car

{

    width: 100%;

    padding-bottom: 2em;

}

.auto8x-other-car {

    --spaceing: 10px;

    display: flex;

    align-items:stretch;

    justify-content:flex-start;

    flex-wrap: wrap;

    margin: 0 calc(var(--spaceing) * (-1));

}



.auto8x-other-car .auto8x-item {

    margin: 0 var(--spaceing);

    width: calc(33.33% - var(--spaceing) * 2);

    border-bottom-left-radius: 4px;

    border-bottom-right-radius: 4px;

    background: #202020;

}



.auto8x-other-car .auto8x-item a {

    display: inline-block;

    width: 100%;

    font-size: 1.2em;

}



.auto8x-other-car .auto8x-item a .auto8x-img-car {

    border-top-left-radius: 4px;

    border-top-right-radius: 4px;

    height: 250px;

}



.auto8x-other-car .auto8x-car {

    padding: 1rem 1rem 0;

    font-weight: 800;

    padding-top: 0;

}



.auto8x-other-car .auto8x-box-price {

    

    margin: 1rem;

}



.auto8x-other-car .auto8x-price {

    display: inline-block;

    clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%);

    background: #1f1f1f;

    background-image: linear-gradient(to right, black , #1f1f1f);

    padding: 0.4rem 1.6rem;

    color: var(--vtyellow);

}



.auto8x-other-car .auto8x-info-car {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    padding: 0.5rem 1rem 0;

}



.auto8x-other-car .auto8x-info-car .auto8x-item-info {

    flex-basis: 49%;

    color: var(--alGrayInfoCars);

    margin-bottom: 1rem;

    font-size: 0.9em;

    display: flex;

    align-items: center;

}



.auto8x-other-car .auto8x-info-car .auto8x-item-info i {

    color: var(--alGrayInfoCars);

    margin-right: 0.2rem;

}



.auto8x-item-info img {

    width: 13px;

    height: 13px;

    object-fit: cover;

    vertical-align: middle;

    margin-top: -3px;

}



/*chỉ cần trả trước*/

.auto8x-box-price

{

    text-align: center;

    padding-bottom: 1em;

}



/*tin tức*/

.auto8x-wrapper .auto8x-col-r .auto8x-box-news {

    margin-bottom: 1rem;

}



.auto8x-col-r .auto8x-news {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

}



.auto8x-news .auto8x-item {

    flex-basis: 100%;

    border-bottom: 1px solid var(--alGray);

    padding: 1.5rem 0;

    color: var(--alBlack);

}



.auto8x-news .auto8x-item:last-child {

    border-bottom: none;

}



.auto8x-box-news .auto8x-item a {

    color: var(--alBlack);

    font-weight: 600;

}



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

    .auto8x-wrapper {

        padding: 0 1.5rem 1.5rem;

        margin-bottom: 0;

    }



    /*thông tin xe*/

    .auto8x-box-info .auto8x-price-car {

        font-size: 2.1rem;

        padding: 1.5rem 0;

    }



    .auto8x-box-info .auto8x-info-car .auto8x-item label {

        flex-basis: 40%;

    }



    /*thông tin salon*/

    .auto8x-box-info-salon .auto8x-info-hotline {

        font-size: 1.8rem;

    }



    .auto8x-info-hotline b {

        font-size: 2.1rem;

    }



    /*phí sang tên*/

    



    .auto8x-name-transfer-fee .auto8x-choose {

        flex-basis: 85%;

    }



    .auto8x-name-transfer-fee .auto8x-item {

        justify-content: space-between;

    }



    .auto8x-name-transfer-fee .auto8x-choose {

        flex-basis: 100%;

    }

}



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

{

    .auto8x-other-car .auto8x-info-car .auto8x-item-info

    {

        flex-basis: 50%;

    }

}

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

    .auto8x-wrapper .auto8x-col-l {

        flex-basis: 100%;

    }



    .auto8x-wrapper .auto8x-col-r {

        margin-top: 1rem;

        flex-basis: 100%;

        

        align-items: flex-start;

        justify-content: space-between;

        flex-wrap: wrap;

    }



    .auto8x-wrapper .auto8x-col-r .auto8x-box-news {

        flex-basis: 48%;

    }

    .auto8x-wrapper .auto8x-col-r .auto8x-qc {
       flex-basis: 100%;
    }

    /*xe cùng khoảng giá*/
    .auto8x-other-car .auto8x-item a .auto8x-img-car {

        height: 212px;

    }

}

@media only screen and (max-width: 991px)
{
    .price-ok span {
        flex-basis: 100%;
    }
    .tra-truoc-01 {
        text-align: start;
    }
    .car-name-nsg
    {
        height: 52px;
        margin-top: 0;
    }
}   


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

{

    .auto8x-other-car .auto8x-item a {

        /* display: inline-block; */

        width: 100%;

        display: table;

        height: 54px;

    }

}



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

    .auto8x-wrapper {

        padding: 0 1rem 1.5rem;

    }



    /*danh sách ảnh xe*/

    #auto8x-main-photo img {

        height: 348px;

    }



    .auto8x-list-img .auto8x-item .auto8x-photo-list img {

        height: 66px;

    }



    /*thông tin xe*/

    .auto8x-box-info .auto8x-info-car .auto8x-item label {

        flex-basis: 50%;

    }



    /*phí sang tên*/

    .auto8x-box-name-transfer-fee {

        margin-top: 0;

    }



    .auto8x-name-transfer-fee .auto8x-box-img {

        display: none;

    }



    .auto8x-name-transfer-fee .auto8x-box {

        flex-basis: 100%;

    }



    /*xe cùng khoảng giá*/

    .auto8x-box-other-car {

        margin-top: 0;

    }



    .auto8x-other-car .auto8x-item a .auto8x-img-car {

        height: 200px;

    }



    /*tin tức*/

    .auto8x-news .auto8x-item {

        padding: 1rem 0;

    }

    .auto8x-other-car .auto8x-info-car .auto8x-item-info

    {

        font-size: 0.9em;

    }

    .price-ok span

    {
        flex-basis: 100%;
    }

    .tra-truoc-01

    {
        text-align: left;
    }

    .auto8x-other-car .auto8x-item {
        margin: 0 var(--spaceing);
        width: calc(49% - var(--spaceing) * 2);
 
    }
    .auto8x-other-car .auto8x-item:last-child
    {   
        display: none;
    }

}



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

    /*danh sách ảnh xe*/

    #auto8x-main-photo img {

        height: 289px;

    }



    .auto8x-list-img .auto8x-item .auto8x-photo-list img {

        height: 54px;

    }



    /*xe cùng khoảng giá*/

    .auto8x-other-car .auto8x-item a .auto8x-img-car {

        height: 190px;

    }

   

}





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

    /*danh sách ảnh xe*/

    .auto8x-box-img {

        display: flex;

        align-items: flex-start;

        justify-content: space-between;

        flex-wrap: wrap;

    }



    #auto8x-main-photo {

        flex-basis: 100%;

        margin-bottom: 1rem;

    }



    #auto8x-main-photo img {

        height: 370px;

        border-top-left-radius: 0;

    }



    .auto8x-list-img .auto8x-item .auto8x-photo-list img {

        height: 89px;

    }



    .auto8x-list-img .auto8x-item:nth-child(2) img {

        border-top-right-radius: 0;

    }



    .auto8x-box-img .auto8x-list-img {

        flex-basis: 100%;

    }



    .auto8x-list-img .auto8x-item {

        flex-basis: 24%;

    }



    /*thông tin xe*/

    .auto8x-box-info {

        margin-top: 0;

    }



    .auto8x-box-info .auto8x-info-car .auto8x-item {

        flex-basis: 100%;

    }



    /*xe cùng khoảng giá*/

    .auto8x-other-car .auto8x-item:last-child {

        margin-bottom: 0;

    }



    .auto8x-other-car .auto8x-item a .auto8x-img-car {

        height: 181px;

    }

    .auto8x-other-car .auto8x-info-car .auto8x-item-info

    {

        flex-basis: 49%;

    }

}



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

    .auto8x-wrapper .auto8x-col-r {

        margin-top: 0;

    }



    /*danh sách ảnh xe*/

    #auto8x-main-photo img {

        height: 306px;

    }



    .auto8x-list-img .auto8x-item .auto8x-photo-list img {

        height: 74px;

    }



    /*xe cùng khoảng giá*/

    .auto8x-other-car .auto8x-item a .auto8x-img-car {

        height: 150px;

    }



    /*tin tức*/

    .auto8x-wrapper .auto8x-col-r .auto8x-box-news {

        flex-basis: 100%;

        margin-bottom: 0;

    }

}



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

    /*danh sách ảnh xe*/

    #auto8x-main-photo img {

        height: 266px;

    }



    .auto8x-list-img .auto8x-item .auto8x-photo-list img {

        height: 64px;

    }



    /*thông tin salon*/

    .auto8x-box-info-salon .auto8x-info-hotline {

        font-size: 1.6rem;

    }



    .auto8x-info-hotline b {

        font-size: 1.8rem;

    }



    /*xe cùng khoảng giá*/

    .auto8x-other-car .auto8x-item a .auto8x-img-car {

        height: 240px;

    }



    .auto8x-other-car .auto8x-car {

        padding: 0.5rem 0.5rem 0;

    }



    .auto8x-other-car .auto8x-box-price {

        margin: 0.5rem;

    }



    .auto8x-other-car .auto8x-info-car {

        padding: 0.5rem 0.5rem 0;

    }



    .auto8x-other-car .auto8x-info-car .auto8x-item-info {

        line-height: 2.0rem;

        font-size: 1.3rem;

    }



    .auto8x-other-car .auto8x-info-car .auto8x-item-info i {

        line-height: 2.0rem;

        font-size: 1.3rem;

        margin-right: 0.1rem;

    }

    .tinh

    {

        width: 100%;

    }

    .auto8x-other-car .auto8x-item

    {

        flex-basis: 100%;

        margin-bottom: 2rem;

    }

    .auto8x-other-car .auto8x-info-car .auto8x-item-info

    {

        flex-basis: 25%;

    }

    /*hiện xe số 3*/
    .auto8x-other-car .auto8x-item:last-child
    {   
        display: block;
    }
    
}



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

{

    .auto8x-other-car .auto8x-item

    {

        flex-basis: 100%;

    }

    .auto8x-other-car .auto8x-item a .auto8x-img-car

    {

        height: 200px;

    }

}



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

    /*danh sách ảnh xe*/

    #auto8x-main-photo img {

        height: 237px;

    }



    .auto8x-list-img .auto8x-item .auto8x-photo-list img {

        height: 57px;

    }



    /*xe cùng khoảng giá*/

    

}



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

    /*thông tin xe*/

    .auto8x-info-hotline b {

        font-size: 1.6rem;

    }



    /*phí trước bạ*/

    .auto8x-name-transfer-fee {

        padding: 1.5rem 0.5rem;

    }



    /*danh sách xe đang bán*/

    .auto8x-other-car .auto8x-info-car .auto8x-item-info i {

        line-height: 1.8rem;

        font-size: 1.2rem;

        margin-right: 0.1rem;

    }



    .auto8x-other-car .auto8x-info-car .auto8x-item-info {

        line-height: 1.8rem;

        font-size: 1.2rem;

    }

}

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

{

    .auto8x-other-car .auto8x-info-car .auto8x-item-info

    {

        flex-basis: 50%;

    }

}