@charset "utf-8";

/* CSS Document */
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline: none; }
img { max-width: 100%;  }
body { font-family: "Be Vietnam Pro", sans-serif; margin: 0px; padding: 0px; background: #f2f4f7; font-size: 14px; }

.ul { list-style-type: none; margin: 0px; padding: 0px; }
a { text-decoration: none; }
.pd10{ padding: 10px; }
.rows{ width: 100%; float: left; margin: 10px 0px; }
.pd-0 { padding: 0px !important }
#container { width: 100%; float: left; background: #798585; }
.container { width: 1280px; margin: auto; position: relative; }
#logo { margin: 0px 0px 0px 0px; float: left; }
#logo img, #banner img { max-width: 100%; display: block; box-shadow: 0px 0px 5px 0px #fff; border-radius: 5px; }
.mn_top{ float: left; margin: 0px 0px 0px 10px; height: 47px; background:#e12918; border-radius: 5px; padding: 0px 10px; color: #fff; cursor: pointer; font-weight: bold; line-height: 47px; transition: 0.2s;  }
.mn_top:hover{ background: #c92617; box-shadow: 0px 0px 5px #fff; }

.h_partner{ float: left; margin: 0px 0px 0px 10px; height: 47px; background:#e12918; border-radius: 5px; padding: 7px 10px 0px 30px; color: #fff; cursor: pointer; transition: 0.2s; font-size: 12px; position: relative; }
.h_partner svg{ position: absolute; top: 13px; left: 5px; }
.h_partner:hover{ background: #c92617; box-shadow: 0px 0px 5px #fff; }

.margin_auto { width: 1280px; margin: auto; position: relative; }
#timkiem{ float: left; width: 250px; margin: 0px 0px 0px 10px; position: relative; }
#timkiem input{ width: 100%; float: left; border: 1px solid #d92413; border-radius: 10px; height: 39px; line-height: 39px; padding: 0px 20px 0px 40px; margin: 3px 0px 0px 0px; }
.icon_search { position: absolute; left: 15px; top: 12px; z-index: 10; padding-top: 1px; }

#header{ width: 100%; float: left; position: fixed; top: 0px; left: 0px; background:#ff321f ; padding: 10px 0px 0px 0px; clear: both; background-size: 100%; text-align: center; height: 68px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgb(0 0 0 / 48%); font-size: 14px; z-index: 1000; }

.hotline_top { float: left; padding: 4px 10px 0px 40px; height: 47px; position: relative;  text-align: center; margin-left: 10px; border-radius: 5px;  }
.hotline_top span{float: left; height: 47px;}
.hotline_top svg{  position: absolute; top: 12px; left: 5px; }
.hotline_top a { color: #fff; font-weight: bold; font-size: 15px; }
.hotline_top b{ font-size: 16px; }

.h_shop{ float: left; margin: 5px 0px 0px 0px; position: relative; padding: 0px 0px 0px 35px; }
.h_shop a{ color: #fff; }
.h_shop svg{ position: absolute; top: 10px; left: 5px; }

.h_member{ float: right; margin: 5px 0px 0px 0px; position: relative; padding: 12px 0px 0px 30px; }
.h_member a{ color: #fff; }
.h_member svg{ position: absolute; top: 12px; left: 5px; }

.h_camnan{ float: left; margin: 0px 0px 0px 10px; height: 47px; background:#e12918; border-radius: 5px; padding: 5px 30px 0px 40px; color: #fff; cursor: pointer; transition: 0.2s; font-size: 14px; position: relative;  }
.h_camnan svg{ position: absolute; top: 10px; left: 5px; }
.h_camnan i{ position: absolute; top: 18px; right: 5px; }
.h_camnan a{ color: #fff; }
.h_camnan:hover{ background: #c92617; box-shadow: 0px 0px 5px #fff; }

.giohang_top{ float: left; margin: 5px 0px 0px 15px; position: relative; padding: 0px 10px 0px 35px; }
.giohang_top a{ color: #fff; }
.giohang_top svg{ position: absolute; top: 8px; left: 5px; }
.giohang_top span{ position: absolute; top: 15px; left: 13px; }
#main,#footer,#copy{ width: 100%; float: left; }
#main{ margin-top: 100px; }
.menu_top2{ position: absolute; display: none; }
#content{ width: 100%; float: left; }

.mainSlider{ width: 70%; float: left;  border-radius: 10px; border: 2px solid #fff; overflow: hidden; box-shadow: 0px 0px 5px #999; }
.subSlider{ width: 30%; float: left; padding-left: 20px; }
.swiper{ width: 100%; float: left; }
.sliderItem{}
.sliderItem img{ border-radius: 10px; }
.slider_right{ width: 100%; float: left; margin: 0px 0px 10px 0px; border-radius: 10px; border: 2px solid #fff; box-shadow: 0px 0px 5px #999; }
.slider_right a{ display: block; }
.slider_right img{ border-radius: 10px; display: block; }
.owl-carousel .owl-item img{ display: block; }
.mainSlider .owl-dots{ display: none !important; }
.khung{ width: 100%; float: left; background: #fff; margin: 20px 0px; padding: 10px; border-radius: 10px; box-shadow: 0px 0px 10px #ccc; }
.item_dm li{ width: calc(100% / 8); float: left; overflow: hidden; border:  1px solid #eee; padding: 10px; text-align: center; position: relative; }
.item_dm li h3{ font-size: 14px; font-weight: 300; }
.item_dm li a{ color: #000; }
.item_dm li .sale{ 
    position: absolute;
    background-color: red;
    padding: 2px 20px;
    color: #fff;
    top: 5px;
    rotate: 47deg;
    right: -22px;
    overflow: hidden;
    z-index: 1;
    border-radius: 5px;
    font-size: 11px;
}

.item_th li{ width: calc(100% / 8); float: left; padding: 10px; text-align: center; position: relative; }
.item_th li .img{ background: #F3F4F6; box-shadow: rgba(60, 64, 67, 0.1) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 10px; padding: 10px;}

.itemsp{ width: 20%; float: left; padding: 5px; position: relative; font-size: 12px; }
.itemsp .rowsp{ width: 100%; float: left; background: #fff; padding: 10px 10px 20px 10px; box-shadow: 0px 0px 5px #ccc; min-height: 500px; border-radius: 10px; }
.itemsp .giamgia{ position: absolute; width: 60px; height: 30px; background: url('/images/km.png') no-repeat; background-size: 100% 100%; z-index: 10; left: 2px; top: 5px; line-height: 25px; font-size: 12px; text-align: center; color: #fff; }
.itemsp h3{ font-weight: 500; }
.itemsp h3 a{ color: #000; }
.itemsp .price .new{ color: red; font-size: 14px; font-weight: bold; }
.itemsp .price .old{ text-decoration: line-through; color: #888; }
.itemsp .item_km{ width: 100%; float: left; text-align: center; position: relative; border: 1px solid #ff321f; border-radius: 10px; margin: 20px 0px 20px 0px; padding: 10px; }
.itemsp .item_km .title_km{ position: absolute; background: linear-gradient(135deg, #ff1800, #ef6f63); left: 20px; right: 20px; border-radius: 10px; top: -15px; color: #fff; padding: 5px; border: 3px solid #eee; text-transform: uppercase; }
.itemsp .item_km p{ margin: 5px 0px; }
.itemsp .item_km .l_km{ width: 50%; float: left; position: relative; padding: 20px 0px 0px 0px; }
.itemsp .item_km b{ font-weight: 700; }
.itemsp .item_km .l_km:after{ content: ''; border-left: 1px solid #ff321f; height: 30px; position: absolute; right: 0px; top: 20px; }
.itemsp .item_km .r_km{ width: 50%; float: left; padding: 20px 0px 0px 0px; }
.itemsp .item_km .value{ color: red; font-weight: bold; }
.itemsp .rating{ text-align: center; }
.itemsp .rating .yellow{ color: #ff962d; }
.title {
    width: 100%;
    float: left;
    padding: 0px 20px;
    text-transform: uppercase;
    color: #5a5a5a;
    position: relative;
    margin: 20px 0px;
    border-bottom: 1px solid #eee;
}
.title h2{ font-size: 16px; margin: 5px 0px; }
.title h2:after{ content: ''; border-left: 5px solid #ff321f; position: absolute; left: 0px; top: 0px; height: 100%; }
.row_home{ width: 100%; float: left; margin: 20px 0px 30px 0px; }
#logo {
    position: relative;
    overflow: hidden;
    color: white;
    float: left;
    border-radius: 8px;
}
#logo::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );
    transform: skewX(-20deg);
    animation: shine 10s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    8% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}

.box_new{ width: calc(33% - 20px); float: left; padding: 20px;  margin: 10px; text-align: center; box-shadow: 0px 0px 5px #ccc; border-radius: 10px; min-height: 380px; overflow: hidden; }
.box_new h3 a{ font-size: 14px; color: #000; }

#footer{ width: 100%; float: left; background: #fff; margin: 50px 0px 0px 0px; box-shadow: 0px 0px 5px #ccc; padding: 20px 0px 0px 0px; }
.footer{ width: 100%; float: left; padding-bottom: 20px; }
.row_footer{ width: 25%; float: left; }
.title_footer{ text-transform: uppercase; font-weight: bold; color: #333; padding-left: 10px; position: relative; }
.title_footer:before{ content: ''; position: absolute; left: 0px; top: 0px; height: 100%; border-left: 5px solid #ff321f; }
.row_footer ul li{ padding: 5px 0px 5px 10px; }
.row_footer ul li a{ font-size: 12px; color: #333; }
.showroomft{ width: 100%; float: left; background: #f1f1f1; box-shadow: 0px 0px 5px #ccc; padding: 20px 0px; }
.showroomft li{ width: calc(33% - 20px); float: left; padding: 10px; margin: 10px; background: #fff; box-shadow: 0px 0px 5px #ccc; border-radius: 10px; min-height: 500px; }
.showroomft li img{ border-radius: 10px; }
#copy{ background: #798585; text-align: center; padding: 10px; color: #fff; font-size: 12px; }