ul {margin:0; padding:0; list-style:none}
.no_padding {padding-left:0 !important; padding-right:0 !important}
@font-face {
	font-family:'roboto';
	src: url(../fonts/RobotoCondensed-Regular.ttf) format('truetype'); 
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family:'robotobold';
	src: url(../fonts/RobotoCondensed-Bold.ttf) format('truetype'); 
	font-weight: normal;
	font-style: normal;
}


@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
#product-tab {margin-top:20px}
#logo {padding:20px 0;}
#logo2 {float:left; width:100%; padding-top:60px; background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('../images/bg.jpg'); background-size:cover; background-position: center}
.logo2 {float:left; width:100%}
.logo2 .img {width:100%; height:60px; text-align:center}
.logo2 img {height:60px;}
.logo2 h3 {float:left; width:100%; margin-top:20px; color:#333; font-family: robotobold}

.responsivGallery-link {position:relative; height:0; padding-bottom:90%; width:90% !important; margin-left:5%; box-shadow: none !important;border-top-left-radius: 50%; border-bottom-right-radius: 50%; background:white; overflow:hidden}
.responsivGallery-link:before {content:"";position: absolute;left:0; top:0; bottom:0; width:100%; border-top-left-radius: 50%; border-bottom-right-radius: 50%}
.responsivGallery-pic {height:100% !important; position:absolute; height:100%; width:100%; border:5px solid transparent; padding:40px;}
.w-responsivGallery-info a {color:white}
.w-responsivGallery-info a:hover {color:#f9b240}
.responsiveGallery-btn {height:80% !important}

.nsx {float:left; width:100%}
.nsx .img {width:100%; float:left; text-align:center;}
.nsx .img .icon {height:60px; width:60px; display:table; text-align: center; margin:auto; background:white; padding:10px; border-top-left-radius: 50%; border-bottom-right-radius: 50%;}
.nsx .img .icon .cell {display:table-cell; height:60px;vertical-align:middle; }
.nsx .img .icon .cell img {max-height:60px; font-size:60px; line-height: 60px; max-width: 60px}
.nsx h3 {float:left; width:100%; margin-top:20px; color:white; font-family: robotobold}
#home {background:white !important}
body {
    color: #455a64;
    font-size: 14px;
    font-family:roboto !important;
    overflow-x:hidden;
    position:relative;
}
a:hover {
    text-decoration: none;
}
.list-style-buttons {float:right;margin-top:-60px;z-index: 99999;
    position: relative; }
.list-style-buttons a {float:left; padding: 5px 10px;float: left;margin-left: 5px;display: block; border: 1px solid #ddd;}
.list-style-buttons .active {background:#f9b240; border-color:#f9b240; color:white}

.sort-pro {float:left; border:1px solid #ddd; background:white; padding:5px}

.service_ctn {float:left; width:100%;border:2px solid #eee; margin:50px 0 30px 0}
.service {float:left;border-left:1px solid #eee; height:50px; width:100%; vertical-align: middle; display:table}
.service .divlogo {display:table-cell; color:#f9b240; vertical-align: middle; text-align:center;padding:10px; font-size:50px; width:50px;}
.service .divtext {display:table-cell; padding:15px;}
.service .divtext h5 {float:left; width:100%; font-size:14px; font-family:robotobold;text-transform: uppercase}
.service .divtext p {font-size:14px;}

.box {border-bottom:1px solid #eee; padding:30px 0; margin-bottom:30px}

button:focus {outline:none}


#wrapper {
    float:left; width:100%; height:auto;
}

.main {max-width:1150px; height:auto; margin:auto; position:relative}
.white {background:white}
.width100 {float:left; width:100%; height:auto}
.width50 {float:left; width:50%; height:auto}
.f7 {background:#f7f7f7}
.slide {width:100%; float:left; height:auto; margin-bottom:10px}

.slide_khuyenmai {float:left; margin-top:30px; width:100%; height: 0; margin-bottom:30px; padding-bottom:30%; position:relative; overflow:hidden}
.slide_khuyenmai .jcarousel-wrapper {margin-top:0}
.slide_khuyenmai .jcarousel-pagination {bottom:10px}
.slide_khuyenmai ul li {overflow: hidden}

.product_slide {float:left; width:100%; position:relative}
.product_slide h3 {position:absolute; left:20px; top:10px; font-size:18px}
.product_slide a {color:#f9b240;}
.slide_khuyenmai li:hover img {opacity: .5}

/*---Product---*/
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {border:none !important}
#product-tab {text-align: center !important}
#product-tab li {float:none !important; display:inline-block}
#product-tab a {color:#333 !important}
#product-tab .active a {border-bottom:1px solid #f9b240 !important; color:#f9b240 !important}
#product_info p {margin:10px 0}
#leftpanel .module:first-child {margin-top:0}
.module {float:left; width:100%; margin-top:10px;}

.heading {position:relative;float:left; width:100%; color:#333; padding-bottom:10px; border-bottom:1px solid #eee; margin:20px 0; font-size:25px !important; text-transform: uppercase; font-family: robotobold }
h3.heading {border-bottom:none; margin-bottom:30px}
h3.heading:after {content:""; height:3px; top:40px; left:0; position:absolute;width:50px; background:#f9b240; }
.heading-small, .module-heading {float:left; font-size:20px; text-transform: uppercase; width:100%; padding:10px 0; color:#f9b240; margin:3px 0}



.heading-home {
  position: relative;
  text-align: center;
  margin-bottom:50px;
  margin-top:50px;
  width:100%;
}

.heading-home * {
  background: #fff;
  padding: 0 15px;
  position: relative;
  z-index: 1;
  color:#333;
  font-size:25px;
  text-transform: uppercase;
  font-family:robotobold;
}

.heading-home:before {
  background: #eee;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
    top: 50%;
    left: 0px;
  width: 100%;
}

.productcat-heading {float:left; width:100%; padding-bottom:10px; border-bottom:1px solid #eee; margin-bottom:20px}
.productcat-heading a {color:#333; text-transform: uppercase; font-family: robotobold; font-size:22px}

.product {transition:all .5s; text-align:center; width:100%; float:left; background:white;margin-bottom: 20px; overflow: hidden; padding-bottom:20px;border:1px solid #eee}
.product:hover {box-shadow: 0 0 20px rgba(0,0,0,.2); transition: all .5s}
.product:hover a {color:#f9b240; transition:all .3s}
.productpic img:hover {transition:all .5s; transform:rotate(-7deg) scale(1.3,1.3)}
.productpic {text-align:center; width:100%;float:left; height:0; padding-bottom:120%; overflow: hidden; position: relative;}
.productpic img {transition:all .5s;object-fit: cover; height:80%; width:80%;position:absolute; top:10%; left:10%}
.product .title {font-size:14px; line-height:20px; margin-top:10px; margin-bottom:2px;  float:left; font-family:roboto; color:black; width:100%;}
.product a {text-decoration:none; color:#f9b240}
.product .status {color:#f7bb2b; float:left; width:100%; padding:5px; font-family:robotobold}
.product .sale {background:#f7bb2d; color:white; padding:5px; border-top-left-radius:5px; font-size:14px; position:absolute; bottom:0; right:0}

.product .them {position:absolute; text-align:center;transform:scale(.1,.1); transition:all .5s; bottom:60%; left:0; width:100%; opacity:0}
.product:hover .them {z-index:2; opacity:1;transform:scale(1,1); transition:all .5s}
.them .button-mini {width:40px; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px; height:40px; text-align:center; background:white; color:#999; font-size:20px; border:none; border-radius:3px}
.them .button-mini2 {}
.them .button-mini:hover {background:#f9b240; color:white;}


.old_price {text-decoration:line-through; font-size:14px; color:#ccc}
.hot_stick {height:40px; width:40px; font-size:13px;color:white; background:#f0503f; text-align: center; border-radius:50%; padding-top:12px;text-transform: uppercase
;position:absolute; top:20px; right:20px; z-index:9}
.sale_stick {height:40px; width:40px; font-size:13px;color:white; background:#f9b240; text-align: center; border-radius:50%; padding-top:12px;text-transform: uppercase
;position:absolute; top:20px; left:20px; z-index:9}

.pages {
    float: left;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    width: 100%;
}
.pages .pagebar-mainbody>a {
    background: #fff;
    padding: 5px 10px;
    margin-top: 5px;
    color: #555;
    border: solid 1px #eee;
    display: inline-block;
    min-width: 13px;
    border-radius: 2px;
}
.pages .pagebar-selections>span.current{
    background: #f9b240;
    color: #fff;
    padding: 5px 10px;
    margin-top: 5px;
    font-weight: bold;
    color: #555;
    display: inline-block;
    color:#FFF;
    min-width: 13px;
    border-radius: 2px;
}

#mainpanel {border-left:1px solid #eee}

.product_small {float:left; width:100%; margin-bottom:20px}
.product_small .img {float:left; overflow:hidden; width:35%; height:0;padding-bottom:35%; position:relative; border:1px solid #eee}
.product_small .img img {position:absolute; left:10%; top:10%; width:80%; height:80%; object-fit: cover}
.product_small .info {float:left; padding-left:10px; width:65%; height:0; padding-bottom:30%;}
.product_small h3 {font-size:14px; font-family:robotobold}
.product_small a {color:#333}
.product_small .status {color:#f7bb2b; float:left; width:100%; font-family:robotobold}
.product_small .price {color:#f9b240}

.owl-item {float:left}
.owl-nav {position:absolute; top:0; right:20px}
.owl-prev {border-right:1px solid #eee !important}
.owl-prev, .owl-next {border:none; background:transparent; font-size:17px}

.category {float:left; text-transform: uppercase; width:100%; background:#f7f7f7; padding:20px;font-size:15px;}
.category {float:left; width:100%; margin:0}
.category a {display:block;color:#333; padding:10px 0;}
.category>li>a:before {font-size: 14px;text-align: right;padding-right: 12px;color: #ccc;font-family: FontAwesome; content: "\f105";display: inline-block;}
.category .open {margin-top:-38px; margin-right:0 !important; display:none; color:#333}
.category .exit {margin-top:-46px !important; margin-right:0 !important; display:block; color:#333}

.subcate {list-style:none}

.subcate a {color:#666;margin-left:22px }
.category a.active {color:#f9b240}
.category a:hover {color:#f9b240; text-decoration:none}

/*------Box-----*/


/*------Box Product-----*/

.orderItem{
    width: 100%;
    margin: 5px 0;
}


/* --- order product  */


.orderItem>input {
    width: 50px;
    height:40px;
    outline: none;border:1px solid #eee;
    text-align: center;
}
.orderItem a.add-to-card{color: #fff !important; text-decoration: none}
.orderItem>a>button, .btnDathang, .btnCapnhat, .btnSubmit {
    outline: none;
    background: #f9b240;

    border:none;
    color: #fff;
    height:40px;
    padding: 10px;
}

.orderItem>a>button:hover,.btnDathang:hover, .btnCapnhat:hover, .btnSubmit:hover{
    background: #3d2314;
}

.khachhangthanhtoan{
    display: none;
    width: 100%;
}

.khachhangthanhtoan h3.title {
    font-size: 20px;
    padding-bottom: 5px;
    border-bottom: #455a64 solid 1px;
    margin-bottom: 20px;
    color: #455a64;
}

.error {
    color: red;
    padding-top: 5px;
}
.slide_img_product img {max-width:100% !important}
.show_error {
    background: none repeat scroll 0 0 #FDD0D0;
    border: 1px solid #FA789A;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px #CCCCCC;
    margin: 10px 0;
    padding: 5px;
    color: red;
    float:left;
    text-align: center;
}
.show_success, .show_notice {
    background: none repeat scroll 0 0 #E7FDD0;
    border: 1px solid #B9FA78;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px #CCCCCC;
    margin: 10px 0;
    padding: 5px;
    float:left;
    text-align: center;
}

.lSSlideOuter{border: #e0e0e0 solid 1px; }
.lslide{text-align: center; vertical-align: middle}

.lSSlideOuter .lSPager.lSGallery img {
    height: 38px !important;
    margin-bottom: 5px;
    width: 100%;
}

.lSSlideOuter .lSPager.lSGallery img:hover{
    border: #ccc solid 1px;
    border-radius: 0 !important;
}

.news_ctn {float:left; width:100%; background:#f7f7f7; padding:50px 0}
.heading2, .news_ctn .heading {float:left; width:100%; padding-bottom:10px; padding-top:0; padding-right:50px; border-bottom:1px solid #eee; margin-bottom:20px}
.heading2 span, .news_ctn .heading a {color:#333; font-size:30px;font-family:robotobold; text-transform: uppercase }
.news {position:relative; width:100%; float:left; margin-bottom: 15px; overflow: hidden;}
.newspic {width:100%;float:left; height:0; position: relative; padding-bottom:60%; overflow: hidden; position: relative;}
.newspic img {width:100%; float:left; position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; transition:all .3s}
.newspic img:hover {transition:all .5s; transform:rotate(7deg) scale(1.3,1.3)}
.news .title {font-family:robotobold; letter-spacing:1px; font-size:18px; line-height:24px; height:50px; overflow:hidden;  float:left; width:100%;  margin:10px 0; padding-bottom:10px; padding-top:5px}
.news a {color:#333;}
.news .infonews {float:left; position:relative}
.news .date {float:left; width:100%; margin:20px 0 0 0}
.news .date i {color:#f9b240; margin-right:10px}
.news .des {color:#999; float:left; text-align: justify; padding-bottom:10px; line-height:20px; height:40px; overflow:hidden}
.news .readmore {float:left; color:#f9b240; font-weight: bold; width:100%}
.other_news h1{
    color: #097EAF;
    font-size: 16px;
    font-weight: bold;
}

.other_news>ul{
    margin: 10px 0;
}

.other_news>ul>li{
    list-style-type: circle;
    margin-left: 30px;
    padding: 2px 0;
}

.pagebar-mainbody{
    display: block;
    text-align: center;
    width: 100%;
}
.pagebar-mainbody span.pagebar-selections{
    padding: 2px 3px;
    color: #ff2439;
    font-weight: bold;
}

.pagebar-mainbody a {
    padding: 0 5px;
}

/* modal css */

    .close{
        color: #455a64;
        opacity: 1; 
        padding: 3px;
        position: absolute;
        right: -10px;
        top: -11px;
        z-index: 999;
        background: rgb(255, 255, 255) !important;
        border-radius: 50%;
        padding: 3px 5px !important;
    }
    
    .close>i{
        font-size: 30px;
    }
    
    .popup_qc .boxItem-body{
        border: none;
        padding: 0px;
        margin: 0px;
		
    }
    
    #breadcrumbs{
        float:left;
        display: block;
        background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('../images/bg.jpg') !important;
        background-size:cover !important;
        background-position: center center !important;
        padding: 100px 0;
        margin-bottom:20px;
        width:100%;
    }
    #breadcrumbs .heading {text-align: center; color:white; border:none; margin-bottom:0; padding-bottom:0 }
    
    #breadcrumbs a {color:white}
    #breadcrumbs a:hover {color:#f9b240}
    .breadcrumb{
        background: none !important;
        padding: 0;
        margin: 0;
        margin:auto; max-width:1100px;
        text-align:center;
        padding:5px;
        clear:both;

    }
    
    .breadcrumb>li+li:before{
        content: "›" !important;
        font-size: 22px;
    }
   .contact {float:left; width:100%}
.contact .form-group {float:left; width:100%}
.contact .form-control {float:left; width:100%; padding:20px; border:none; background:#f5f5f5; border-radius:30px !important}

.row_contact {margin-top:20px; float:left; width:100%}
.row_contact .heading {font-size:20px !important}
.row_contact ul {float:left; width:100%; color:#999; font-family: robotobold}
.row_contact ul li {padding:5px 0; font-size:15px; }
.row_contact ul i {width:35px; color:#f9b240}

.filters {width:100%; text-align:center; float:left;}

.filters button {border:1px solid #ddd; margin-bottom:10px; color:#333; background:white; border-radius:20px; text-align:center; padding:10px 15px}
.filters button:focus, .filters button:hover {background:#f9b240; border:1px solid #f9b240; color:white; outline:none }

.grid {width:100%; float:left; height:auto}
.isotope:after {
  content: '';
  display: block;
  clear: both;
}
.element-item {
  position: relative;
  float: left;
  width:25%;
  padding:10px;
}

@media screen and (min-width: 992px) {
    .width20 {width:20%}
}
	
@media screen and (max-width: 992px) {
    .element-item {width:25%;}
}

@media screen and (max-width: 768px) {
    .element-item {width:50%}
    #mainpanel {border:none}
    .cart_mobile{
        display: block;
    }
    
    .td_hide{
        display: none;
    }

    
    .info_form{
        margin-top: 20px;
    }
}

@media screen and (max-width: 480px) {
    .col-xs-6 {width:100% !important}
}