@import url('reset.css');
@import url('font-awesome.min.css');
@import url('fonts.css');
@import url('animate.css');

.icon-cart{background: #fff; color: red; top: -12px; position: relative; height: 30px; width: 30px; display: inline-block; border-radius: 36px; line-height: 30px}
#cart-info{position: absolute; top: -4px; color: #fff; right: -4px; background: #000; display: inline-block; font-size: 11px; border-radius: 15px; width: 15px; height: 15px; line-height: initial;}
.inputpay{margin-bottom: 15px;}
.sidebar{position:fixed; height:100%; z-index:10; top:0}
.sidebar-content{width:230px;  position:relative; height:100%; min-height:100%; }
.col-box-top{background:#c23022; width:100%; display:block; padding:0 15px;}
.logo{text-align:center; padding-top:5px;}
.logo img{max-width:100%; display:inline-block; margin-bottom:-5px}
.lang {text-align:center; }
.lang img{transition:all 0.3s ease-out; display: inline-block;}
.lang img:hover{transition:all 0.3s ease-out; opacity:0.5}
.col-box-center{}
.category li{background:url(../images/bgr-nav.png) repeat-x; margin-top:1px; padding:6px 15px; text-align:center; transition:all 0.3s ease-out;z-index:1; position: relative; outline: none;}
.category li a{color:#fff; text-transform:capitalize; display:block; text-align:center; font-size:16px}
.category li:after{background:url(../images/hv-nav.png) repeat; width: 0%;height: 100%;top: 0;left: 0; content: ''; position: absolute;z-index: -1;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.category li:hover:after, .category li:active:after {width: 100%;}

.category li ul{display:none}
.category li:hover ul{display:block;}
.category li ul{ position:absolute; left:100%; width:400px; z-index:10; top:-1px;}
.category li ul li{display:inline-block; text-align:left; float:left; width: 100%; max-width: 240px;  background:url(../images/bgr-sub-nav.png) repeat; }
.category li ul li a{text-align:left; text-transform:uppercase}
.category li ul li:after{ display:block; position:relative}
.arow{background: url(../images/row-nav.png) center center; display: block; height: 36px; position: absolute; right: -38px; top: 0; width: 38px;}
.category li ul li a:hover{color:#ccc}

.col-box-buttom{background:#c23022; position:absolute; height:100%; width:100%; padding:0px 10px; color:#fff; margin-top:1px;}
.col-box-buttom .hotline{margin-bottom:10px; margin-top:10px}
.col-box-buttom .hotline strong{position:relative; margin-left:10px; top:-6px; font-weight:normal; font-size:20px}
.col-box-buttom .icon-hotline{background:url(../images/icon-hotline.png) center center no-repeat; width:30px; height:30px; display:inline-block}
.col-box-buttom .icon-mail{background:url(../images/icon-mail.png) center center no-repeat; width:24px; height:14px; display:inline-block}
.col-box-buttom .mail{font-size:13px}
.col-box-buttom .mail span{position:relative; top:-3px}
.col-box-buttom .mail span a{color:#fff}
.col-box-buttom .mail span a:hover{color:#ccc}
.box-buttom{position:fixed; bottom:0; width:210px;}
.statis{ margin-top:10px;}
.statis h2{text-align:center; text-transform:uppercase; font-size:14px; margin-bottom:10px; font-weight:bold}
.statis .bgr-statis{background:#fff; color:#333; padding:8px 0px; font-size:13px; margin-bottom:20px;}
.statis p{margin-bottom:5px; position:relative}
.statis p span{right:10px; position:absolute}
.statis .online{background:url(../images/online.jpg) 5px no-repeat; padding-left:28px}
.statis .to-day-online{background:url(../images/to-day.jpg) 5px no-repeat; padding-left:28px}
.statis .total-statis{background:url(../images/all-satic.jpg) 5px 6px no-repeat; padding-left:28px; border-top:1px solid #c23022; padding-top:6px; margin-top:6px}
.social{text-align:center; margin-top:10px;}
.social img:hover{opacity:0.5; transition:all 0.3s ease-out}

@media(max-width:1366px){
	.statis{display:none}
	.col-box-buttom .hotline{margin-bottom:5px}
	.counter{display:block !important}	
}
@media(min-width:768px){
	.counter, .nav_pro{display:none}	
}
.counter{text-align:center; font-size:13px}


.content-right{ max-width:1170px; margin:auto; margin-left:280px;}
.page-content{max-width:800px; width:800px; float:right; margin-right:30px; background:#fff; margin-top:30px;}
.page-title{background:#eee; padding:10px 15px; text-transform:uppercase; border-top:3px solid #C23022}
.article{padding:15px;}
.title-page{margin-bottom:15px; font-size:20px}
.intro-text{margin-bottom:10px;}
.article p{margin-bottom:15px;}
.article img{max-width:100%; height:auto; text-align:center; display:inline-block}
.breadcrumb{font-size:13px}
.product{margin-bottom:30px; }
.product img{width:100%; transition:ease-in-out}
.product h2{margin:8px 0; font-size:16px; height:28px; overflow:hidden}
.product p strong{color:#F00}
.product img:hover{opacity:0.5; transition:all 0.3s ease-out}
.read-more{background:#c23022; padding:8px 15px; color:#fff; display:inline-block; text-transform:uppercase; font-size:12px; position:relative; z-index:1}
.read-more:after{background:#222; width: 0%;height: 100%;top: 0;left: 0; content: ''; position: absolute;z-index: -1;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.read-more:hover:after, .read-more:active:after {width: 100%; }
.read-more:hover{color:#fff}

.document{margin-bottom:15px; border-bottom:1px dotted #ddd; padding-bottom:15px}
.document h2{font-size:18px; color:#09C; margin-bottom:6px;}
.btn-download{background:#F00; padding:0px 0px 0 20px; color:#fff; margin:5px 0; display:inline-block; text-transform:uppercase; font-size:12px; text-align:right}
.btn-download i{font-size:14px; background:#222; display:inline-block; padding:10px 15px; margin-left:20px}
.btn-download:hover{color:#ccc; background:#930}

.detail-left{}
.detail-left img{width:100%}
.detail-right h2{font-size:18px; margin-bottom:10px}

.info-contact p{margin-bottom:10px}
.info-contact h2{text-transform:uppercase; margin-bottom:10px; font-weight:bold}
.inputcontact{margin-bottom:10px;}
.btn-contact{background:#C23022; color:#fff}
.btn-contact:hover{color:#ccc}

.blog{margin-bottom:30px; border-bottom:1px solid #ddd; padding-bottom:30px}
.blog .img{position:relative; overflow:hidden}
.blog .img img{width:100%; display:block}
.blog h2.name{text-transform:uppercase; color:#1470B7; font-size:18px; font-weight:bold}
.blog .time-view{margin-top:15px; margin-bottom:15px; color:#666}
.blog .time-view span{margin-right:15px;}
.blog .time-view span i{margin-right:5px;}
.blog .description{margin-top:15px;}
.blog .more{text-transform:uppercase; font-size:14px;}
.blog .ovl{background:rgba(255,255,255,0.5); width:100%; height:100%; position:absolute; top:0; transition:all 0.3s ease-out; left:-900px}
.blog .ovl i {background:#1470B7; width:50px; height:40px; text-align:center; color:#fff; line-height:40px; font-size:16px; margin:-25px 0 0 -25px; left:50%; position:relative; top:50%; transition:all 0.3s linear}
.blog .ovl i:hover{background:#06C; transition:all 0.3s linear}
.blog:hover .ovl{left:0; transition:all 0.3s ease-out;}

.gallery{margin-top:15px; margin-bottom:15px; position:relative; overflow:hidden}
.gallery img{width:100%; display:block; transition:all 0.3s ease-in-out}
.gallery h2{position:absolute; bottom:0; background:rgba(0,0,0,0.5); width:100%; color:#fff; padding:5px 10px;}
.gallery img:hover{opacity:0.5; transition:all 0.3s ease-out}


.fanpage{position:fixed; right:-243px; top:35%; z-index:10; transition:all 0.3s ease-in-out; background:#fff; height:239px}
.title-fan{ background: rgba(255,0,0,0.6); color: #fff; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); text-align: center; margin: 0px; position: absolute; width: auto;padding: 10px 20px;text-transform: uppercase; height: 40px; left: -78px; top: 39px;}
.fanpage:hover{right:0 !important; transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out}

.footer{position:fixed; z-index:1000; color:#ccc; font-size:12px; bottom:0; width:100%; display:none}
.footer-content{background:#C23022; padding:7px 15px 2px 15px; clear:both; float:left; width:100%}
.footer .social{margin:0;}
.footer .counter-f{margin-top:6px;}
.support-f{ background:rgba(0,0,0,0.6); padding:7px 10px; font-size:13px; font-weight:bold; color:#fff; display:none}
.support-f i{color:#ccc; position:relative; top:1px; margin-right:4px;}

.page{ clear:both; position:relative; bottom:-10px; width:100%; padding-left:15px; padding-right:15px; margin-top:15px; margin-bottom:60px; text-align:center}
.page a{border:1px solid #ddd; padding:6px 15px; color:#333}
.page a#dangxem{background:#222; color:#fff; border-color: #222}
.page a:hover,.page a#dangxem:hover{background:#1470b7; color:#fff}

.modal-body ul li{padding:6px 0}
.modal-body ul li a{text-transform:uppercase; }
.modal-body ul li a i{margin-right:6px;}
.modal-footer{border-top:0}
.modal-title{font-weight:bold}

.fixed-support {
    position: fixed;
    right: 0;
    bottom: 20%;
    transition: .3s ease-in-out;
}
.fixed-support li.call a {
    background: #c23022;
}
.fixed-support li a {
    display: block;
    padding: 5px 5px;
    background: #fff;
    margin-bottom: 6px;
    border-radius: 6px 0 0 6px;
    color: #fff;
    transition: .3s ease-in-out;
    position: relative;
}

.fixed-support li a i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    text-align: center;
}