@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
*{font-family:Arial;}
a{text-decoration:none;color:var(--violet);}
a:active,
a:hover{color:var(--lviolet);}
body{margin:0;padding:0;}
.container{width:calc(100% - 20px);margin:auto;}
header{display:inline-block;width:100%;height:60px;background:var(--dark);}
header .menu-icon,
header .menu-change{display:inline-block;float:left;width:36px;height:38px;cursor:pointer;border:1px solid var(--white);margin:10px 0;overflow:hidden;}
header .menu-icon .inner,
header .menu-change .inner{display:inline-block;width:100%;height:100%;position:relative;top:-38px;animation:roll 18s linear infinite;}
header .menu-icon .inner:before,
header .menu-change .inner:before,
header .menu-icon .inner:after,
header .menu-change .inner:after{display:block;width:100%;height:38px;content:' ';background:url(../images/consumer.png) no-repeat center;background-size:contain;}
header .line-1,
header .line-2,
header .line-3{width:26px;height:3px;background-color:var(--white);margin:7.3px 5px;transition:0.4s;}
header .menu-change .line-1{-webkit-transform:rotate(-45deg) translate(-9px, 6px);transform:rotate(-45deg) translate(-9px, 6px);}
header .menu-change .line-2{opacity:0;}
header .menu-change .line-3{-webkit-transform:rotate(45deg) translate(-8px, -8px);transform:rotate(45deg) translate(-8px, -8px);}
header a.brand{display:inline-block;float:left;width:172px;height:40px;margin:10px 0 10px 10px;}
header a.brand{background:url(../images/logo.png) no-repeat center;background-size:contain;line-height:40px;text-indent:100%;overflow:hidden;}
header .search{display:inline-block;float:left;width:calc(100% - 500px);height:40px;margin:10px 20px;}
header .search .select{}
header .search .query{display:inline-block;float:left;width:calc(100% - 45px);height:40px;line-height:40px;text-indent:10px;}
header .search .query{border:none;outline:none;}
header .search .btn{display:inline-block;width:45px;height:40px;line-height:40px;padding:0;float:right;overflow:hidden;text-indent:100%;}
header .search .btn{border:none;outline:none;background:var(--light) url(../images/icon/search.png) no-repeat center;background-size:contain;}
header .right{display:inline-block;width:240px;height:40px;float:right;margin:10px 0;}
header .right .hotline{display:inline-block;float:left;width:73px;height:100%;border:1px solid var(--white);margin:0 7.5px 0 0;position:relative;}
header .right .user{display:inline-block;float:left;width:73px;height:100%;border:1px solid var(--white);margin:0 7.5px 0 0;position:relative;}
header .right .cart{display:inline-block;float:left;width:73px;height:100%;overflow:hidden;border:1px solid var(--white);margin:0;}
header .right .hotline,
header .right .user,
header .right .cart{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
header .right .hotline .icon-hotline,
header .right .user .icon-users,
header .right .cart .cart-detail{display:inline-block;width:100%;height:100%;}
header .right .hotline .icon-hotline{background:url(../images/icon/hotline.png) no-repeat center;background-size:contain;animation:blinker 1s linear infinite;}
header .right .user .icon-users{background:url(../images/icon/user.png) no-repeat center;background-size:contain;}
header .right .cart .cart-detail{background:url(../images/icon/cart.png) no-repeat center;background-size:contain;}
header .right .popup{display:none;padding:20px;background:var(--light);border:2px solid var(--ink);position:absolute;top:60px;right:-20px;opacity:0;transition:0.4s;z-index:998;}
header .right .hotline .popup{width:260px;background:var(--light) url(../images/call-center.png) no-repeat left top;background-size:contain;}
header .right .user .popup{width:216px;}
header .right .popup:before{display:block;content:' ';width:0;height:0;position:absolute;top:-17px;right:40px;}
header .right .popup:after{display:block;content:' ';width:0;height:0;position:absolute;top:-14px;right:40px;}
header .right .popup:before{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid var(--ink);}
header .right .popup:after{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid var(--light);}
header .right .popup.active{display:inline-block;}
header .right .overlay{display:none;position:fixed;width:100%;height:calc(100vh - 60px);left:0;top:60px;background:#000000a6;z-index:997;}
header .right .overlay.active{display:inline-block;}
header .right .hotline a{display:block;line-height:32px;font-size:15pt;font-weight:bold;text-align:right;margin:0 0 10px 0;color:var(--orange);}
header .right .hotline a span{display:block;font-size:10pt;font-weight:normal;line-height:15px;color:var(--gray);}
header .right .user h3{}
header .right .user p{margin:0 0 10px 0;}
header .right .user strong{}
header .right .user ul.user-control{list-style:none;margin:0;padding:0;}
header .right .user ul.user-control li{line-height:25px;border-bottom:1px dotted var(--gray);}
header .right .user ul.user-control li a{}
header .right .user ul.user-control li a:before{display:inline-block;float:left;content:' ';width:25px;height:25px;margin:0 5px 0 0;}
header .right .user ul.user-control li a.icon-u:before{background:url(../images/icon/account.png) no-repeat center;background-size:contain;}
header .right .user ul.user-control li a.icon-b:before{background:url(../images/icon/orders.png) no-repeat center;background-size:contain;}
header .right .user ul.user-control li a.icon-e:before{background:url(../images/icon/exit.png) no-repeat center;background-size:contain;}
@keyframes blinker{
	25%{transform:scale(0.9) rotate(5deg);}
	50%{transform:scale(1) rotate(0deg);}
	75%{transform:scale(0.9) rotate(-5deg);}
}
@keyframes roll{
	0%{top:-38px;}
	21%{top:-38px;}
	22%{top:0px;}
	43%{top:0px;}
	44%{top:-38px;}
	65%{top:-38px;}
	66%{top:-76px;}
	87%{top:-76px;}
	88%{top:-38px;}
	99%{top:-38px;}
}
.sidebar{display:none;width:100%;height:100vh;position:fixed;top:0;left:0;background:#000000a6;z-index:999;}
.sidebar .inner{position:absolute;left:-350px;top:0;padding:20px;width:310px;height:calc(100vh - 40px);background:var(--white);position:relative;}
.sidebar h2{text-transform:uppercase;font-size:10pt;font-weight:normal;margin:60px 0 10px 0;color:var(--gray);}
.sidebar .inner .welcome{display:inline-block;width:calc(100% - 40px);height:40px;position:absolute;top:0;left:0;padding:10px 20px;background:var(--ocean);color:var(--white);}
.sidebar .inner .welcome p{}
.sidebar ul{margin:0;padding:0;list-style:none;}
.sidebar ul li{line-height:32px;border-bottom:1px dotted var(--gray);}
.sidebar ul li a{display:block;text-transform:uppercase;font-size:10pt;color:var(--ocean);}
.sidebar ul li a:hover{color:var(--sky);}
.sidebar.active{display:inline-block;}
/* CATEGORY LAYOUT */
.categories{display:inline-block;width:100%;margin:20px 0;position:relative;}
nav.filter{display:inline-block;width:350px;height:calc(100% - 50px);padding:25px;position:absolute;top:0;left:0;background:var(--light);}
nav.filter .heading{font-size:10pt;text-transform:uppercase;font-weight:normal;color:var(--gray);margin:0 0 20px 0;}
nav.filter ul.category{margin:0 0 20px 0;padding:0;list-style:none;}
nav.filter ul.category li{padding:0 0 5px 0;margin:0 0 5px 0;border-bottom:1px dotted var(--gray);}
nav.filter ul.category li a{display:block;line-height:25px;color:var(--violet);}
nav.filter ul.category li a:hover,
nav.filter ul.category li.active a{color:var(--ink);}
content.list{display:inline-block;width:calc(100% - 450px);margin:0 0 0 400px;padding:0 25px;}
content.list h1.subheading{font-size:15pt;font-weight:normal;margin:0 0 5px 0;}
content.list p.subdesc{display:inline-block;width:100%;margin:0 0 10px 0;font-size:10pt;color:var(--gray);}
content.list .product-item{display:inline-block;width:100%;padding:10px 0;margin:0 0 10px 0;border-bottom:1px solid var(--light);}
content.list .product-item .product-image{display:inline-block;float:left;width:200px;margin:0 50px 0 0;}
content.list .product-item .product-image img{width:100%;}
content.list .product-item .product-name{font-size:12pt;color:var(--blue);margin:0 0 10px 0;}
content.list .product-item .product-name .hint{display:block;margin:5px 0 0 0;font-size:10pt;font-weight:normal;color:var(--gray);}
content.list .product-item .product-name .hint strong{display:inline-block;font-size:8pt;font-weight:normal;background:var(--gray);color:var(--white);padding:4px 10px;}
content.list .product-item .product-name .hint strong{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
content.list .product-item .module-price{}
content.list .product-item .module-price .price{display:inline-block;font-size:12pt;color:var(--black);}
content.list .product-item .module-price .price:after{display:inline-block;float:right;font-size:11pt;content:'₫';margin:0 0 0 5px;color:var(--gray);}
content.list .product-item .module-price .hint{}
content.list .product-item .module-price .old{}
content.list .product-item .module-promotion{display:inline-block;padding:10px 0;margin:10px 0 0 0;border-top:1px solid var(--light);}
content.list .product-item .promotion-name{padding:0;margin:0 0 10px 0;font-size:9pt;color:var(--black);}
content.list .product-item .promotion-time{font-size:8pt;color:var(--white);background:var(--green);padding:3px 10px;}
content.list .product-item .promotion-time{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
/* RATING STYLE */
.rating{display:inline-block;border:none;margin:0 0 20px 0;padding:0;text-align:right;transform:scaleX(-1);position:relative;}
.rating > input{display:none;}
.rating > label{margin:0;padding:0;cursor:pointer;}
.rating > label:before{margin:0 0 0 5px;font-size:16pt;font-family:FontAwesome;display:inline-block;content:"\f005";}
.rating > label{color:#929292;}
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label{color:#ff9f3b;}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label{color:#a5631e;}
content.list .rating{margin:0 0 10px 0;}
content.list .rating > label:before{font-size:10pt;margin:0;}
content.list .rating span{transform:scaleX(-1);font-size:8pt;text-align:left;color:var(--gray);line-height:19px;position:absolute;min-width:55px;left:-65px;}
content.list .rating span:before{display:inline-block;float:left;font-size:10pt;content:"»";transform:rotate(90deg);margin:0 5px 0 0;}
/* FILTER CHECKLIST */
.filter-category,
.price-range,
.filter-type,
.filter-uses{display:inline-block;width:100%;margin:0 0 20px 0;}
.price-range input{padding:0;margin:0;display:inline-block;float:left;width:40%;font-size:12pt;line-height:32px;text-indent:10px;border:1px solid var(--light);}
.price-range .price-split{display:inline-block;float:left;width:calc(20% - 4px);height:32px;line-height:32px;text-align:center;}
.filter-container{display:block;width:calc(50% - 5px);position:relative;text-indent:20px;margin:0 0 10px 0;cursor:pointer;font-size:9pt;height:15px;line-height:15px;overflow:hidden;}
.filter-container:nth-child(odd){float:left;}
.filter-container:nth-child(even){float:right;}
.filter-container:last-child{margin:0;}
.filter-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.filter-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0;}
.checkmark{position:absolute;top:0;left:0;height:13px;width:13px;background:var(--white);border:1px solid var(--light);}
.checkmark{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.filter-container:hover input ~ .checkmark{border:1px solid var(--sky);}
.filter-container input:checked ~ .checkmark{background:var(--ocean);border:1px solid var(--ocean);}
.checkmark:after{content:"";position:absolute;display:none;}
.container input:checked ~ .checkmark:after{display:block;}
.filter-container .checkmark:after{left:4px;top:3px;width:4px;height:4px;border:solid white;border-width:0 1px 1px 0;}
.filter-container .checkmark:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}