:root {

    --alBlack: #000000;

    --alBlackF: #242529;

    --kcWhite: #ffffff;

    --alBlue: #DEE8F4;

    --alBlueA: #2596cf;

    --alBlueHMb: #c6d7ec;

    --alGray: #F5F5F5;

    --alGrayListCars: #E1E1E1;

    --alGrayInfoCars: #555;

    --alBreadcrumb: #999;

    --mpRed: #f0151f;

    --alRedHover: #bd0f15;

    --alListLink: #293241;

    --kcbackground:#262626;

    --kcyellow:#ffcd00;

    --kcbghome:#f8f4da;

    --kcbgmenu:#000;

    --kccolorlink:#f0151f;

    --box-backg:#e4e1e1;

}



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: 'Mulish', sans-serif;

   

    text-decoration: none;

}

body

{

    

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

    background: #f2f2f2;

}

header

{

    background: var(--kcbgmenu);

}

h1 {

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

    font-size: 2.0rem;

    text-transform: uppercase;

    line-height: 2.4rem;

}



h2 {

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

    font-size: 2.0rem;

    text-transform: uppercase;

    line-height: 2.4rem;

}



h3 {

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

    font-size: 1.6rem;

    text-transform: uppercase;

}



h1, h2

{

    position: relative;

    display: block;

    padding-left: .9em;

}

h1:before, h2:before

{

    content: "||";

    display: inline-block;

    position: absolute;

    top: -1px;

    left: 0;

    color: var(--kccolorlink);

}

.thangtran-clear-fix {

    clear: both;

}



a {

    color: var(--kcbgmenu);

    cursor: pointer;

}



a:hover {

    color: var(--kccolorlink);

}



ul li {

    list-style: none;

}



img {

    width: 100%;

    vertical-align: middle;

    object-fit: cover;

}



select {

    height: 40px;

    border-radius: 4px;

    border: 1px solid #c7c5c5;

    

}



.thangtran-container {

    width: 1200px;

    margin: 0 auto;

}



.thangtran-loading-img {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 99999;

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

    display: none;

}



.tt-active-menu-make {

    opacity: 1 !important;

}



.thangtran-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;

}



.thangtran-car, .thangtran-new {

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

    text-transform: capitalize;

    color: var(--alBlack);

    font-weight: 700;

    height: 44px;

    font-size: 1.1em;

}

.thangtran-car

{

    font-size: 1em;

    margin-top: -5px;

}

.thangtran-price {

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

    color: var(--alWhite);

    text-transform: capitalize;

    text-align: right;

    font-weight: 700;

}

.thangtran-title {

   padding-bottom: 0.3em;
}

.title-border {

    background: var(--kccolorlink);

    height: 5px;

    width: 100px;

    border-radius: 10px;

    margin-bottom: 1.5em;

}



.year

{

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    padding: 0.7em;

    margin-top: .5em;

    

    background: linear-gradient(#de1010,#ba0808);

    border-radius: 0 0 4px 4px;

}

.year span, .year-old span

{

    flex-basis: 49%;

   

}

.year-old

{

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    padding: 0.7em;

    margin-top: .5em;

    background: #333;

    border-radius: 0 0 4px 4px;

    text-decoration: line-through;

}

.gia-ban

{

    font-weight: bold;

    font-size: 1.2em;

    color: #fff;

}

.tratruoc

{

    text-align: right;

    color: #fff;

}

.img-nocolor

{

    filter: grayscale(100%);

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

}

.al-item p

{

    border-radius: 0 0 4px 4px;

    padding: .5em;

    height: 56px;

    overflow: hidden;

    

}

.al-item p a

{

    color: #000;

}

.al-item a:hover

{

    color: var(--kccolorlink) !important;

   

}

.quang-cao

{

    margin-top: 1em;

}

.quang-cao img

{

    border-radius: 4px;

}





/*dịch vụ*/

.service {

    background: aliceblue;

    padding: 3rem 0;

}



.service h2 {

    text-align: left;

    margin-bottom: 3rem;

}



.service .tab {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

}



.service .tab .item {

    font-size: 1.8rem;

    flex-basis: 20%;

    background: var(--Gray);

    text-align: center;

    padding: 1.5rem 0;

    text-transform: capitalize;

    cursor: pointer;

    border-right: 1px solid #ccc;

   

}



.service .tab .item:last-child {

    border-right: none;

}



.service .tab .item:hover {

    background: var(--kccolorlink) !important;

    border-radius: 4px;

    border: none;

}



.active-tab {

    background: var(--kccolorlink) !important;

    border-radius: 4px;

    border-right: none;

}



.service .content {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

    margin-top: 3rem;

}



.service .content .img, .service .content .box {

    flex-basis: 48%;

}

.service .content .img img

{

    height: 360px;

}

.service .content p {

    margin: 1.5rem 0;

}



.service h3 {

    font-size: 2rem;

    text-transform: uppercase;

}



.service .check-content {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

}



.service .check-content .item {

    flex-basis: 48%;

    margin-bottom: 1rem;

}



.service .check-content .item i {

    color: var(--bcRed);

    margin-right: 0.5rem;

}



.content2, .content3, .content4, .content5 {

    display: none !important;

}



/*video youtube*/

.video

{

    margin: 0;

    padding: 1em 0;

    color: #fff;

    background: aliceblue;

}

.video-container

{

    width: 1200px;

    margin: 0 auto;



}



.al-box {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

    color: #fff;

}



.al-box .al-item {

    flex-basis: 24%;

    background: #e8e7e7;

    border-radius: 5px;

}



.al-box .al-item h3

{

    padding: .5em .5em 0 .5em;

    color: red;

    height: 52px;

    overflow: hidden;

}



.video h2

{

    color: #000 !important;

}

.al-box .al-item img

{

    border-radius: 4px 4px 0 0;

    height: 240px;

}



.hang-xe

{

    padding: .5em .5em 0 .8em;

    text-transform: uppercase;

}



/*fix màu header youtube & tiktok*/

.fix-hd h2

{

    margin-bottom: 1em;

}



.dangban

{

    margin-top: 2em;

}



/*manager*/

.manager {

    padding: 3rem 0;

}



.manager h2 {

    text-align: center;
}



.manager h2:before

{

    background: none;

    display: none;

}



.slick-track {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

}



.manager-slider {

    margin-right: -10px;

    margin-left: -10px;

}



.manager-slider .box .item {

    display: inline-block;

    width: 100%;

    padding: 1rem 1rem;

}



.manager-slider .box img {

    height: 300px;

    border-radius: 5px 5px 5px 5px;

}



.manager-slider .box h3 {

    font-size: 1.8rem;

    line-height: 2.4rem;

    background: #dfdada;

    color: var(--bcWhite);

    text-transform: capitalize;

    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1.5rem;

    text-align: center;

    border-radius: 0 0 5px 5px;

}



.manager .slick-prev {

    left: 15px !important;

    z-index: 10;

}



.manager .slick-next {

    right: 15px !important;

    z-index: 10;

}



.manager .slick-prev, .slick-next {

    width: 30px !important;

    height: 30px !important;

}



.manager .slick-prev:before, .manager .slick-next:before {

    font-size: 30px !important;

}



/*container chung*/

.container

{

    width: 1200px;

    margin: 0 auto;

}



/*phân trang*/



.thangtran-pagination ul {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    margin-bottom: 2.5rem;

}



.thangtran-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;

}



.thangtran-pagination ul li a:hover {

    background: var(--alRed) !important;

    color: var(--alWhite);

}



.thangtran-active-pag {

    background: var(--alRed) !important;

    color: var(--alWhite) !important;

    font-weight: 700;

}

.sub

{

    color: var(--kcWhite);

}



/*breadcrumb*/

.thangtran-breadcrumb {

    padding: 1.5rem 0 0.5rem;

    text-transform: capitalize;

  
}



.thangtran-breadcrumb .fa-angle-right {

    margin: 0 3px;

    color: var(--alBreadcrumb);

}


.thangtran-breadcrumb a:hover

{

    color: red;

}

/*tin tức trang chủ*/

.news-col

{

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

}



.list-news

{

    flex-basis: 49%;

    padding-bottom: 0.9em;

    margin-bottom: 1.5em;

    border-radius: 4px;

    padding: .5em;

    background: var(--box-backg);

}



.list-news h3

{

    margin-bottom: 1em;

    margin-top: 0.5em;

    height: 44px;

    overflow: hidden;

    padding-left: 0.5em;

    padding-right: 0.5em;

}

.photo

{

    position: relative;

    display: block;

    overflow: hidden;

}

.photo img

{

    opacity: 1;

    height: 176px;

    transform: scale(1);

    transition: .3s ease;

    overflow: hidden;

}

.photo img:hover

{

    transform: scale(1.1);

}

.time-news

{

   position: relative;

   display: block;

    color: red;

    margin-bottom: .5em;

    margin-left: .6em;

    padding-left: .5em;

    

}

.time-news::after

{

    content: "|";

    position: absolute;

    left: 0;

    top: 0;

    

}

.list-news p

{

    padding-left: 0.5em;

    padding-right: 0.5em;

    min-height: 88px;

    height: 88px;

    overflow: hidden;

}

.news-home

{

    margin-bottom: 1em;

}

.tiktok-embed

{

    margin-top: 0 !important;

}



.box-tiktiok blockquote

{

    width: 100%;

}

.css-wa4z0i

{

    width: 100% !important;

    flex-basis: 100% !important;

    background: red;

}

.box-tiktiok

{

    width: 1200px;

    margin: 0 auto;

}

.tiktok-embed

{

    width: 100%;

}



.photo

{

    flex-basis: 33%;

}

.content-news1

{

    flex-basis: 65%;

}

span.car-sold

{

    background: var(--mpRed);

    position: absolute;

    top: 25px;

    left: -57px;

    text-align: center;

    padding: 0.5em 1em;

    text-transform: uppercase;

    color: #fff;

    width: 200px;

    transform: rotate(-45deg);

    z-index: 9;

}





/*giao xe cho khách*/

.giao-xe

{

    display: flex;

    height: 200px;

    overflow: hidden;

    justify-content: space-between;

}

.giao-xe img

{

    object-fit: cover;

    vertical-align: middle;

    margin: 1em;

    width: 95%;

    height: 250px !important;

    overflow: hidden;

    border-radius: 4px;

}





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

.contact-box {

    position: fixed;

    display: flex;

    bottom: 10px;

    z-index: 100;

    left: 0;

   

}



@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;

}

.contact-box {
    position: fixed;
    display: flex;
    bottom: 0px;
    z-index: 100;
    left: 50%;
    transform: translate(-50%, -50%);
   
}
 .kh-fbm .phone-box {
    box-shadow: 0 0 0 0 #f00044;
    background-color: rgba(240,0,68,.9);
}

.kh-fbm .img-phone {
    background-color: #f00044;
}

.kh-fbm .img-phone img {
    max-height: 30px;
    max-width: 30px;
}

/*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;

}


/*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: #fff;

    width: 40px;

    height: 40px;

    cursor: pointer;

    padding: 8px;

    text-align: center;

    border-radius: 50%;

}

  



#myBtn:hover

{

    background-color: rgb(250, 115, 115);

}



#myBtn span

{

    color: red;

    

}





/*giao diện cho mobile*/

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

    .thangtran-container {

        width: 100%;

    }

    .container

    {

        width: 100%;

        padding: 1em;

    }

    /*breadcrumb*/

    .thangtran-breadcrumb {

        padding: 1.5rem 1.5rem 0.5rem;

    }

    .video-container

    {

        padding-left: 0.8em;

        padding-right: 0.8em;

        width: 100%;

    }

}

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

{

    .year span, .year-old span

    {

        flex-basis: 100%;

        text-align: left;

    }

    .tratruoc

    {

        margin-top: .5em;

    }

}

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

{

    .service .tab {

        display: flex;

        align-items: baseline;

        justify-content: space-between;

        flex-wrap: nowrap;

        overflow-x: auto;

       

    }

    .service .tab .item {

        flex: 0 0 auto;

        padding: 1rem 2.5rem;

        font-size: 1em;

    }

}

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

{

    

}

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

    /*breadcrumb*/

    .thangtran-breadcrumb {

        padding: 1.5rem 1rem 0;

    }

    .year span, .year-old span

    {

        flex-basis: 49%;

    }

    .tratruoc

    {

        margin-top: 0;

        text-align: right !important;

    }



    h1 {

        font-size: 1.8rem;

    }



    h2 {

        font-size: 1.8rem;

        line-height: 2.4rem;

    }



    .thangtran-title h2 {

        font-size: 1.8rem;

        line-height: 2.4rem;

    }



    .thangtran-title {

        padding: 1.5rem 0;

        padding-bottom: 0;

    }



    select {

        height: 35px;

    }

    header

    {

        display: none;

    }

    .list-news

    {

        flex-basis: 49%;

    }

    .list-fix

    {

        display: none;

    }

    

    .fix-video

    {

        display: none;

    }

    .al-box .al-item

    {

        flex-basis: 49%;

        padding-bottom: 1em;

        margin-bottom: 1em;

    }

    .video

    {

        padding: 0;

    }

    .dangban

    {

        margin-top: 0;

    }

    /*ẩn xe số 3*/

    .xe-so-3

    {

        display: none;

    }

    

}



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

{

    .year span, .year-old span

    {

        flex-basis: 100% !important;

        text-align: left !important;

    }

    .tratruoc

    {

        margin-top: .5em;

    }

}



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

{

    .thangtran-box-price

    {

        font-size: 0.9em;

    }

   

}



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

{

    h1

    {

        font-size: 1.6rem;

    }

    .list-news

    {

        flex-basis: 100%;

    }

    .list-fix

    {

        flex-grow: 0;

    }



    /*khối tin xuống dòng*/

    .flex-box

    {

        display: block !important;

    }

    .photo img

    {

        height: 200px;

    }

    .list-news p, .list-news h3

    {

        min-height: auto;

        height: auto;

        padding: 0;

    }

    

    .list-news h3 a

    {

        font-size: 1.1em;

    }

    .thangtran-box-price

    {

        min-height: 44px;

    }

    .thangtran-car b

    {

        font-size: 1.1em;

    }

    .fix-video

    {

        display: block;

    }

    .al-box .al-item

    {

        flex-basis: 100%;

        margin-bottom: 2em;

    }

    .service .content .img, .service .content .box

    {

        flex-basis: 100%;

    }

    .box

    {

        margin-top: 1em;

    }

    .time-news

    {

        margin-left: 0;

        margin-top: .5em;

        

    }

}



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

{

    .thangtran-list-cars .thangtran-item

    {

        flex-basis: 100% !important;

    }

    

    .thangtran-list-cars .thangtran-info-car .thangtran-item-info

    {

        flex-basis: 32% !important;

    }

    .year span, .year-old span

    {

        flex-basis: 49% !important;

        

    }

    .tratruoc

    {

        margin-top: 0 !important;

        text-align: right !important;

    }

    /*hiện xe số 3*/

    .xe-so-3

    {

        display: block;

    }

    .service .content .img img

    {

        height: 260px;

    }

    .al-box .al-item h3, .al-item p

    {

        height: auto;

    }

}



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

{

    .thangtran-list-cars .thangtran-box-price

    {

        font-size: 1em;

        min-height: auto;



    }

    .thangtran-list-cars .thangtran-car

    {

        height: 26px !important;

    }

    .thangtran-list-cars .thangtran-item a

    {

        height: auto !important;

    }

    .al-box .al-item img

    {

        height: 190px;

    }

}

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

{

    .year span, .year-old span

    {

        flex-basis: 100% !important;

        text-align: left ;

        

    }

    .tratruoc

    {

        margin-top: .5em !important;

       

    }

    .al-box .al-item img

    {

        height: 170px;

    }

    .service .content .img img

    {

        height: 200px;

    }

}