:root {
  --theme: #77C33E;
  --theme1: #CD0015;
}
html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    /*margin: 0;
    padding: 0;*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    /* vertical-align: baseline; */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
@font-face {
    font-family:robotocondensed-bold;
    src:url('../font/robotocondensed-bold.ttf') ;
}

@font-face {
    font-family:robotocondensed-regular;
    src:url('../font/robotocondensed-regular.ttf') ;
}

.heading{overflow:hidden; height: 0px; visibility: hidden;}
body {
    font-size:16px;
    font-family:robotocondensed-regular,Arial;
    color:#000;
    background:#fff;
}


a{text-decoration:none;}
img{border:0;}

.clear{clear:both;}
/*new css*/
header{width:100%;margin:0 auto}
.container{width:1349px;margin:0px auto 0px auto;transition: all 1s}
.banner{width:100%;float:left}
.box_content{background: #fff;}

.titleleft{float:left;width:100%;border-bottom:1px solid #e4e4e4;padding-bottom:10px}
.titleleft p{color:#bf1157;font-size:18px;text-transform: uppercase;float:left;font-weight: bold}
.titleleft a{color:#bf1157;font-size:18px}

.titleindex{float:left;width:100%;}
.titleindex p{text-transform:uppercase;float:left;font-weight: bold}
.titleindex a{color:#454545;font-size:25px}
.linetitle{width:47px;float:left;background:#1a9a2f;height:3px;margin-top:12px;}

.titlebreak{float:left;width:100%;padding-bottom:15px}
.titlebreak p{color:#434343;font-size:14px;float:left}


.content100{width:100%;float:left}
.khungsp{width:100%;float:left;margin-top:20px}
.khungsp1{width:100%;float:left;margin-top:20px}

.newcon2{width:268px;float:left;margin-left:16px;transition: all 0.6s;;margin-bottom:20px}
.newcon3{margin-left:0px;}
.baoanhnew2{width:258px;height:160px;border: 1px solid #e4e4e4;padding: 5px}
/*.baoanhnew2 img{//width:100%;//height:160px;}*/
.newsname{width:100%;float:left;height:44px;overflow: hidden}
.newsname p{line-height:22px}
.newsname a{color:#3f3f3f;font-size:14px}



.productcon{width:218px;float:left;transition: all 0.6s;background: white;margin-left: 25px;margin-bottom:20px;position: relative;overflow: hidden}
.productcon1{margin-left:0px;}
.baoanhsp{width:216px;height:255px;transition: all 0.5s;overflow: hidden;position: relative;border:1px solid #e4e4e4;}
.anhsp12
{   width:100%;
    height:auto;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.anhsp12:hover
{
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}


.sale{width: 52px;text-align: center;background: #f6b71f;position: absolute;top:10px;right:66px;z-index: 10}
.hot{width: 52px;text-align: center;background: #d43e64;position: absolute;top:10px;right:10px;z-index: 10}
.new{width: 52px;text-align: center;background: #488629;position: absolute;top:10px;right:10px;z-index: 10}
.iconsp p{color:white;font-weight: bold;font-size:14px;line-height: 25px;text-transform: uppercase;}




#map_canvas {    
    height: 450px;
    width: 100%;
    margin:10px auto;
}
#map_canvas1 {
    height: 175px;
    width: 100%;
    /* margin: 30px 0px; */
}
.map_description {
    color: #000000;
    overflow: auto;
    width: 275px;
}
.map_description .default {
    color: #FF0000;
}
.map_description div {
    line-height: 18px;
    margin: 3px;
}
.map_list_address {
    float: left;
    height: 500px;
    overflow: hidden;
    width: 250px;
}
.map_list_address .list {
    line-height: 18px;
    margin-bottom: 5px;
}
.map_list_address span {
    color: #FCFF46;
}
.map_title {
    color: #30A602;
    font-weight: bold;
}


/**************** end heading ********************/

/* --------------------- Phan trang ------------------*/
.phantrang{
    text-align:center;
    margin: auto;
}
.phantrang a {
    color: #636363;
    cursor: pointer;
    font-size: 14px;
    margin: 5px 0 5px 4px;
    padding: 8px 15px;
    border:1px solid #ddd;
    border-radius: 5px;
    display: inline-block;
}
.phantrang span{ background: #09669C; padding: 7px 10px; color: #fff;display: inline-block;}
.phantrang a:hover {
    background: none repeat scroll 0 0 #f0f0f0; 
    box-shadow: none;
    color: #515151;
    text-decoration: none;
}
.phantrang .paginate_button_disabled, .phantrang .paginate_button_disabled:hover {
    /* background: linear-gradient(to bottom, #F8F8F8 0%, #EAEAEA 100%) repeat scroll 0 0 transparent; */
    /* border: 1px solid #D2D2D2 !important; */
    color: #ADADAD !important;
    cursor: default;
    opacity: 0.7;
    display: inline-block;
}
.phantrang .paginate_active, .phantrang .paginate_active:hover {
    background: none repeat scroll 0 0 #f0f0f0;   
    box-shadow: none;
    color: #515151;
}/*----------------------------------------------------*/
.giaban{font-family:roboto-regular;color:#7ac226;font-size: 16px;}
.giagoc{color:#d92238;text-decoration: line-through;font-size: 16px;}
footer{width:100%;background:#fff;margin-top: 30px;}
.container_mid{width:1200px;margin:0 auto;margin-top: 30px;min-height: 750px}
.leftmid{width:270px;float:right;}
.rightmid{width:910px;float:left;}
.title{padding:0px 10px;border-top: 3px solid #e69124;padding: 10px;text-align: center;background: #45a0db;}
.title p{color:#7ac226;font-size:20px;text-transform: uppercase;color:#fff;}
.col-sp-5p{width:19.9%;float: left;}
.col-sp-3{width:25%;float: left;}
.col-tt-3{width:25%;float: left;}
.col-sp-4{width:33.33%;float: left;margin-bottom: 20px;}
.col-tt-4{width:33.33%;float: left;}
.col-sp-6{width:50%;float: left;}
.col-tt-6{width:50%;float: left;}
.col-nd-6{width:50%;float: left;}
.col-cot-9{width:75%;float: left;}
.col-cot-3{width:25%;float: left;}
.content_tc{width: 1200px;margin:0 auto;}
.col-content{padding: 0px 10px;}
.tensp:hover{color:#f4f4f4 !important;}
.salepro{position: absolute;top:10px;left: 10px;z-index: 99;background: #f80202;padding:5px 8px;color:#fff;border-radius: 25px;-moz-border-radius: 25px;-webkit-border-radius: 25px;font-size: 14px;}

.imgbox{width: 100%;height: auto;overflow: hidden;}
.imgbox img{width: 100%;height: auto;transition: .3s all;}
.imgbox:hover img{transform: scale(1.1);}

input.form-control{padding: 10px;width:100%;margin-bottom: 15px;box-sizing: border-box;}

/*----------------------------------------------------*/
.bg_top{padding:5px 10px;margin-top: 10px;}
.bg_dk{background: url('../../images/bg3.png') no-repeat;padding:20px;min-height: 20px;overflow: hidden;}
.btn:hover{background: #1e8dfd !important;}

.boxproduct{display: grid;grid-template-columns: repeat(3,1fr);grid-row-gap: 20px;grid-column-gap: 20px;}
.boxproduct1{display: grid;grid-template-columns: repeat(2,1fr);grid-row-gap: 20px;grid-column-gap: 20px;}

.colxleft{float: left;width: 48%}
.colxright{float: right;width: 48%}

.imghoverx2{overflow: hidden;position: relative;text-align: center;}
.imghoverx2 img{max-width: 100%;max-height: 200px;transition: all .3s;}
.imghoverx2:hover img{transform: scale(1.1);opacity: .8;}

.imghoverx1{overflow: hidden;position: relative;text-align: center;}
.imghoverx1 img{max-width: 100%;max-height: 300px;transition: all .3s;}
.imghoverx1:hover img{transform: scale(1.1);opacity: .8;}

.imghoverx{overflow: hidden;position: relative;}
.imghoverx img{width: 100%;height: auto;transition: all .3s;}
.imghoverx:hover img{transform: scale(1.1);opacity: .8;}
.textpro{font-family:robotocondensed-bold;line-height:24px;color:#333;display:block;font-size: 16px;overflow: hidden;
-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;display: -moz-box;-moz-line-clamp: 2;-moz-box-orient: vertical;}
.addpro{display:block;margin-top: 10px;margin-bottom: 10px;color:#777;overflow: hidden;
-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;display: -moz-box;-moz-line-clamp: 2;-moz-box-orient: vertical;}
.imghoverx_left{width: 30%;float: left;}
.imghoverx_left img{width: 100%;height: auto;transition: all .3s}
.imghoverx_left:hover img{transform: scale(1.1);}
.imghoverx_right{width: 68%;float: right;}

.viewall {display: inline-block;padding:10px 20px;background:#0097FA;color:#fff;font-size: 14px;transition: all .3s;border-radius: 5px;}
.viewall:hover{background: #0073C0;color:#fff;}

.icons{position: absolute;right: 3px;top:3px;display: inline-block;padding: 3px 5px;border-radius: 3px;background: #ff0000;font-size: 12px;color:#fff;text-transform: uppercase;}

.colx{width: 100%;float: left;border:1px solid #ddd;background:#f5f5f5;}

@media (max-width: 1200px){
    .left_w,.right_w{display: none !important;}
    .content_w{width: 100% !important;}
}

@media (max-width: 770px){
    .headmobile{display: block !important;}
    .boxproduct{grid-template-columns: repeat(2,1fr);grid-row-gap: 20px;grid-column-gap: 20px;}
    .boxproduct1{grid-template-columns: repeat(1,1fr);grid-row-gap: 20px;grid-column-gap: 20px;}
}

@media (max-width: 415px){
    .boxproduct{grid-template-columns: repeat(1,1fr);grid-row-gap: 20px;grid-column-gap: 10px;}
    .boxproduct1{grid-template-columns: repeat(1,1fr);grid-row-gap:20px;grid-column-gap: 10px;}
}