File: /home/hanode/public_html/wp-content/themes/kingstore/assets/less/app/content_default.less
.resp-tab {
.top-tab-slider {
.title-sytle1; text-align: center; border-bottom: 1px @border-color solid; margin-bottom: 30px;
.box-title{
margin-bottom: 0;
h3{
margin: 0;
}
}
.nav.nav-tabs {
margin: 10px auto; display: inline-block; vertical-align: top; border-bottom: none;
li {
margin: 0 10px;
a {
padding: 0 10px; height: 50px; line-height: 50px;
overflow: hidden; font-size: 16px;
text-transform: capitalize;
color: @body-color; font-weight: 500;
margin: 0; border: none;
background-color: #fff;
.transition(all 0.3s);
}
&.active, &:hover {
a {
color: @color;.transition(all 0.3s);
}
}
}
}
}
.tab-pane{
display: block;
height: 0;
overflow: hidden;
&.active {
height: auto;
overflow: visible;
}
}
}
/* ================================================================== */
/* ================================================================== */
.item {
.item-wrap {
background-color: #fff;
text-align: center;
padding:0;
.item-detail {
position: relative;
.products-thumb{
position:relative; border-radius: 4px 4px 0 0; overflow: hidden;
.onsale {
display: none;
}
a .product-thumb-hover{
padding: 5px;
img{
margin: 0 auto; width: 100%;
}
}
>a img{
width: 100%;
}
.top-item{
position: absolute; top: 50%; left: 0; right: 0; margin-top: -20px; text-align: center; z-index: 9;
.clear{
display: none;
}
a.fancybox{
text-align:center;
color: @color;
font-weight: 500;
height: 40px;
line-height: 40px;
padding: 0;
background-color: @a-color;
display: inline-block;
vertical-align: top;
font-size: 0;
opacity:0;
min-width: 40px;
.translateY(-40px);
.border-radius(50%);
.transition(all .5s);
z-index: 9;
&:before {
font-family: fontawesome;
font-size: 12px;
content:'\f002';
}
&:hover {
background-color: @color; color: #fff;
}
}
}
a{
display: block;
}
}
.item-content,
.item-img {
padding: 0;
vertical-align: top;
h4 {
margin: 10px 0;
a {
font-size: 16px; font-weight: 400;
color: @body-color;
position: relative;
z-index: 2;
.transition(all .3s);
&:hover{
color: @color; .transition(all .3s);
}
}
}
.item-price {
font-size: 18px;
float: none;
position: relative;
z-index: 2;
.transition(all .3s);
display:inline-block;
vertical-align:top;
margin-bottom: 11px;
del{
font-size:14px;
}
}
.reviews-content {
line-height: 12px; margin-bottom: 7px;
position: relative;
z-index: 2;
}
.item-bottom {
font-size: 12px;
z-index: 2;
.clear {
display: none;
}
.button,
.add_to_cart_button,
.product_type_external,
.product_type_grouped{
.transition(all .3s);
height:40px; overflow: hidden;
line-height:40px;
font-size:12px;
color:@color;
padding:0 40px 0 20px;
display: inline-block;
text-transform:uppercase;
font-weight: 600;
background: #fff;
.border-radius(30px); position: relative;
border: 1px @border-color solid;
&.loading {
background-color: @a-color;
.opacity(0.75); color:@color;
&:before {
text-align: center;
left: 0;
background-color: @a-color;
border-radius:16px;
}
}
&.added {
background-color: @a-color;
}
&:after{
content: ""; position: absolute; right: 0; top: 0;
text-align: center; height:40px; width: 40px; border-radius: 50%;
background: url(../assets/img/icon-cart-m3.png) 9px 10px no-repeat;
}
}
}
}
}
&:hover {
.item-detail {
.products-thumb{
.top-item{
a.fancybox{
opacity:1;
.translateY(0);
}
}
}
.item-content {
.item-bottom {
.button,
.add_to_cart_button,
.product_type_external,
.product_type_grouped{
background: @a-color; color: #fff; border: 1px @a-color solid; color:@color;
}
}
}
}
}
}
}
/* ================================================================== */
/* ================================================================== */
.responsive-post-slider {
margin-bottom: 30px; position: relative;
.title-sytle1;
.box-title{
margin-bottom: 6px;
}
.resp-slider-container .slider {
margin:0 -15px;
.item{
padding:0 15px;
.item-detail{
.img_over{
position:relative; overflow: hidden;
img{
.transition(all 0.3s); width: 100%;
}
a{
&:hover{
img{
.scale(1.06); .transition(all 0.3s);
}
}
}
}
.entry-content{
h4{
margin:15px 0 4px 0; line-height: 22px;
a{
color: @body-color;
font-weight: 600; font-size:14px;
text-transform:capitalize;
display:block; .transition(all 0.3s);
&:hover{
color:@color; .transition(all 0.3s);
}
}
}
.entry-date{
font-size: 12px; color: #999; margin: 10px 0;
}
.description{
font-size: 13px; margin-bottom: 16px; line-height: 23px;
}
}
}
}
.slick-dots{
text-align: center;margin: 0;position: absolute;bottom: -6px;left: 0;right: 0; padding: 0 15px;
li{
list-style: none; display: inline-block; vertical-align: top; margin: 0 3px;
button{
font-size: 0; width: 8px; height: 8px; .border-radius(10px); background: #999; border: none; padding: 0;
}
&:hover{
button{
background: @a-color; border: none;
}
}
&.slick-active{
button{
background: @a-color; width: 30px; border: none;
}
}
}
}
}
&.style1{
margin-top: 17px; margin-bottom: 34px;
.box-title{
text-align: left;
h3{
font-size: 26px;
}
}
}
&.style2{
.resp-slider-container{
.slider {
.slick-list{
overflow: inherit;
}
}
}
.resp-slider-container .slider .item {
.item-inner{
border-bottom: 1px @border-color solid; padding-bottom: 15px; margin-bottom: 20px;
.item-detail .entry-content{
h4{
margin: 0 0 5px 0; position: relative; display: inline-block; vertical-align: top; padding-top: 20px;
a{
font-size: 16px;
}
.entry-meta-link{
position: absolute; right: -33px; top: 0;
a{
font-size: 10px; font-weight: normal; background: #ff2d46; text-transform: uppercase; color: #fff; border-radius: 8px 0; padding: 0 5px;
}
}
}
.description{
margin-bottom: 20px;
}
}
&:last-child{
border-bottom: none;
}
}
}
.entry-date, .entry-date2{
font-style: italic; margin: 10px 0; display: inline-block; vertical-align: top; font-size: 12px; color: #999;
i{
color: @a-color; padding-right: 5px;
}
}
.entry-date{
margin-right: 10px !important;
}
}
}
.responsive-post-slider2{
background: #fff;
.resp-slider-container{
.title{
h3{
background: @color; color: #fff; font-size: 18px; padding: 15px; font-weight: 600; margin-bottom: 20px;
}
}
.slider{
.item{
overflow: hidden; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px #ddd solid;
.item-detail{
.img_over{
width: 90px; float: left; margin-right: 10px;
}
.entry-content{
overflow: hidden;
h4{
a{
font-size: 13px; color: @body-color; font-weight: 600; .transition(all 0.3s);
&:hover{
color: @color; .transition(all 0.3s);
}
}
}
.entry-date{
font-size: 12px; color: #999; padding-left: 1px;
}
}
}
&:last-child{
border-bottom: none;
}
}
}
}
}
.responsive-post-slider3{
background: #fff;
.title-sytle1; margin-top: 17px; margin-bottom: 50px;
.box-title{
text-align: left; margin-bottom: 6px;
h3{
font-size: 26px;
}
}
.resp-slider-container{
.slider{
.item{
overflow: hidden; margin-bottom: 20px;
.item-detail{
.img_over{
width: 130px; float: left; margin-right: 10px; overflow: hidden;
img{
.transition(all 0.3s);
}
&:hover{
img{
.scale(1.05); .transition(all 0.3s);
}
}
}
.entry-content{
overflow: hidden;
h4{
a{
font-size: 13px; color: @body-color; font-weight: 600; .transition(all 0.3s);
&:hover{
color: @color; .transition(all 0.3s);
}
}
}
.entry-date{
font-size: 12px; color: #999; padding-left: 1px;
}
}
}
&:last-child{
border-bottom: none;
}
}
}
}
}
.responsive-post-slider4{
background: #fff;
.resp-slider-container{
.title{
h3{
background: @color; color: #fff; font-size: 18px; padding: 15px; font-weight: 600; margin-bottom: 20px;
}
}
.slider{
.item{
overflow: hidden; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px #ddd solid;
.item-detail{
.entry-content{
h4{
a{
font-size: 14px; color: @body-color; font-weight: 600; .transition(all 0.3s);
&:hover{
color: @color; .transition(all 0.3s);
}
}
}
.entry-date{
font-size: 12px; color: #999; padding-left: 1px;
i{
color: @a-color;
}
}
}
}
&:last-child{
border-bottom: none;
}
}
}
}
}
.kingstore-text-block{
margin-bottom: 22px;
.image{
display: block;
img{
margin-bottom: 24px;
}
}
.content-info{
text-align: center; padding: 0 14%;
h3{
font-size: 16px; color: #fff; margin-bottom: 13px; text-transform: uppercase;
}
p{
font-size: 13px; color: #fff;
}
}
}
.banner-single{
overflow: hidden; border-radius: 4px;
.vc_figure {
width: 100%;
a{
width: 100%;
img{
.transition(all 0.5s); width: 100%;
&:hover{
opacity: (1); .scale(1.02); .transition(all 0.5s);
}
}
}
}
}
.block-contact{
background: url(../assets/img/bg-contact.jpg) center center no-repeat; padding: 27px 50px 9px 50px; border-radius: 4px; margin-top: -80px;
.block-info{
float: left;
h3{
font-size: 16px; font-weight: bold; color: @color; text-transform: uppercase; margin-bottom: 2px;
}
p{
font-size: 14px; color: #444;
}
}
a{
float: right; border-radius: 20px; color: #fff; background: @color; font-size: 13px; text-transform: uppercase;
font-weight: bold; padding: 10px 30px;
&:hover{
background: #fff;
}
}
}
.home-main{
overflow: inherit !important;
}
.style-block{
padding: 0 15px; margin-bottom: 42px;
.style-block-info{
>.vc_column-inner {
padding: 0;
}
}
}
.box-title1{
margin-bottom:30px; text-align: center;
h3{
padding:14px 0; position:relative; margin-bottom: 4px;
font-size:20px; color:#fff; text-transform:uppercase;
font-weight: 600; display: inline-block; vertical-align: top;
&:before{
content: ""; width: 52px; height: 35px; position: absolute; left: -80px; top: 7px;
background: url(../assets/img/promotion.png) -19px -31px no-repeat;
}
&:after{
content: ""; width: 52px; height: 35px; position: absolute; right: -80px; top: 7px;
background: url(../assets/img/promotion.png) -19px 8px no-repeat;
}
}
p{
font-size: 14px; color: #fff;
}
&.style2{
h3{
color: @color; font-size: 18px;
}
p{
color: #444;
}
}
}
.testimonial-slider {
margin-bottom: 48px; text-align: center; background: url(../assets/img/bg-test.jpg) no-repeat; padding-top: 55px;
.block-title{
h2{
color: #fff; font-size: 24px; text-transform: uppercase;
}
}
.carousel-inner{
.client-say-info {
.image-client {
width: 100%;
float:none;
img {
display: table;
margin: 0 auto;
box-shadow: 0px 3px 7px 0px #ddd;
border-radius: 50%;
width: 80px; border: 3px @a-color solid;
&:hover {
opacity: 0.8;
}
}
}
.name-client {
margin-bottom: 4px; margin-top: 20px;
h2 {
margin-bottom: 6px; font-weight: 600; font-size: 14px; color:@color; text-transform: uppercase;
}
.info-client{
font-size: 12px; color: #666;
}
}
}
.client-comment {
font-style: normal; font-size: 13px; padding: 18px 20%; color: #444; line-height: 26px; margin-bottom: 97px; position: relative;
&:before{
content: '\f10d'; font-family: fontawesome; position: absolute; left: 15%; top: 7px; font-size: 40px; color: @color;
}
&:after{
content: '\f10e'; font-family: fontawesome; position: absolute; right: 15%; bottom: 20px; font-size: 40px; color: @color;
}
}
}
.carousel-indicators {
margin: 0px;
text-align: center;
left: 0; right: 0; width: 100%;
bottom:65px;
position: absolute;
li {
background-color:#888; margin: 0 3px;
width: 8px; height: 8px; .transition(all 0.3s);
border-radius: 6px; border: none;
&.active, &:hover {
background-color: @color; border: none; width: 25px; .transition(all 0.3s);
}
}
}
}
.promotion{
padding: 30px 13px 15px 13px; min-height: 185px;
.image{
float: left; width: 60px; height: 67px; background: url(../assets/img/icon-promotion.png) 0px 0px no-repeat; font-size: 0;
}
.conten{
overflow: hidden; padding-left: 10px;
h3{
font-size: 15px; color: #fff; font-weight: bold; line-height: 20px;
}
p{
color: #fff; font-size: 13px; line-height: 20px;
}
}
&.item1{
background: #2c2f32;
.image{
background-position: -17px -279px;
}
}
&.item2{
background: #1d478f;
.image{
background-position: -17px -50px;
}
}
&.item3{
background: #6289cb;
.image{
background-position: -17px -123px;
}
}
&.item4{
background: #c8dcff;
.image{
background-position: -17px -198px;
}
.conten{
h3{
color: #222;
}
p{
color: #222;
}
}
}
}
#metaslider_4472{
margin: 0;
.flex-control-nav{
bottom: 20px;
li{
a{
background: rgba(255,255,255,0.5); margin: 0 5px;
&.flex-active{
background: #fff;
}
}
}
}
}
#metaslider_4463{
max-width: 970px; margin: 0 auto;
&:hover {
.flex-prev{
left: -40px;
}
.flex-next{
right: -40px;
}
}
}
.metaslider #metaslider_4548{
margin: 0 auto;
.flex-direction-nav {
li {
a{
margin: -13px 0 0;
}
}
}
&:hover {
.flex-prev{
left: 0px;
}
.flex-next{
right: 0px;
}
}
}
.title1{
font-size: 22px; color: @body-color; text-align: center; font-style: italic; font-weight: 600;
position: relative; padding: 62px 0 50px 0; line-height: 30px;
&:before{
position: absolute; content:""; width: 120px; height: 40px; bottom:0; left: 50%; margin-left: -60px;
background: url(../assets/img/icon-promotion.png) -13px 3px no-repeat;
}
}
.description1{
font-size: 14px; padding: 0 12%; text-align: center; line-height: 24px;
}
.title-read{
text-align: center; font-size: 21px; color: #fff; text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2); padding: 3px 0;
a{
font-size: 14px; padding: 15px 50px; border-radius: 30px; background: #f9f9f9; color: @body-color; margin-left: 90px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.2); text-shadow: none; .transition(all 0.3s);
&:hover{
color: @color; .transition(all 0.3s);
}
}
}
.vc_custom_1528681980949{
background-position: center center;
}
.bg-style1{
background: url(../assets/img/bg-foot.jpg) center center no-repeat; padding: 80px 0;
}
.title2{
font-size: 22px; color: #fff; text-align: center; line-height: 30px; font-weight: 600; margin-bottom: 18px;
}
.description2{
font-size: 16px; padding: 0 12%; text-align: center; line-height: 26px; color: #fff;
}
.title3{
font-size: 26px; color: @body-color; text-align: center; font-weight: bold;
}
.heading-style1{
background: #efefef; font-size: 18px; color: @body-color; font-weight: bold; display: block; padding: 15px 20px; margin-bottom: 40px;
}
.tam-nhin-su-menh{
h4{
font-weight:bold; color:@body-color; font-size: 16px;
}
}
.vanhoa{
padding-bottom: 45px; position: relative;
&:before{
content: ""; width: 2px; height: 275px; background: #efefef; position: absolute; left: 48px; top: 0;
}
.vh-left{
float: left; width: 15%; margin-top: 62px; position: relative; z-index: 9;
h3{
background: @a-color; color: #fff; font-size: 14px; text-transform: uppercase; font-weight: bold; line-height: 22px;
width: 100px; height: 100px; text-align: center; border-radius: 50%; align-items: center; display: flex; padding: 0 25px;
}
}
.vh-content{
float: left; width: 85%; background: #e1e1e1; padding: 30px; .transition(all 0.3s); color: #222;
img{
float: left; margin-right: 40px;
}
.vh-info{
overflow: hidden; padding-top:20px;
}
&:hover{
box-shadow: 0px 2px 4px 2px #ccc; cursor: pointer; .transition(all 0.3s);
}
}
}
.vanhoa-bot{
text-align: center; padding: 30px 30px 20px 30px;
h3{
font-size: 18px; color: #fff; font-weight: bold; margin-bottom: 5px;
}
p{
color: #fff;
}
}
.sodo{
margin-bottom: 50px;
.col-md-3{
padding: 0 10px;
}
.item{
background: #efefef; padding:15px; border-radius:4px; min-height: 310px;
h3{
font-size: 16px; color:@body-color;font-weight:bold; line-height: 26px; min-height: 50px;
}
ul{
margin:0; list-style:none;
li{
display:block; color: @body-color; font-size:13px; line-height:24px; position:relative; padding-left:10px;
&:before{
content:"\f111"; position: absolute; left:0; top:0; font-family:fontawesome; color:@color; font-size:6px;
}
}
}
}
}
.wpb_raw_code.vc_custom_1527180878676{
text-align:center;
}
.sd-title{
text-transform:uppercase; font-weight:bold; font-size:18px; padding: 15px 45px; background: @a-color; display:inline-block; vertical-align:top; color:#fff;
}
.sd-content{
text-align: center;
h3{
font-size: 14px; color: @color; font-weight: bold; text-transform: uppercase;
}
p{
font-size: 13px;
}
.first{
color: @body-color; margin-bottom: 5px; font-size: 14px;
}
&.style2{
p{
font-style: italic; font-size: 14px; text-align: left;
}
}
}
.tuyendung-banner{
.wpb_raw_code{
margin: 0;
.title-td{
font-size: 18px; color: #fff; font-weight: bold; margin-top: -84px; padding-bottom: 28px; padding-left: 15px; padding-right: 15px;
}
}
}
.homepage {
.news-marquee {
margin-top: 30px;
margin-bottom: 40px;
position: relative;
height: 46px;
z-index: 1;
.arrow-news {
position: absolute;
z-index: 2000;
height: 100%;
.img-text {
background-color: #1E2D6E;
padding: 0 30px;
height: 46px;
line-height: 46px;
max-width: 140px;
color: #fff;
font-size: 18px;
font-weight: bold;
font-family: OpenSans-Regular;
text-transform: uppercase;
&:after {
border-left: 24px solid #1E2D6E;
border-bottom: 22px solid transparent;
border-top: 24px solid transparent;
content: "";
position: absolute;
top: 0;
left: 100%;
}
}
}
.show-news {
height: 100%;
border: 1px solid #959595;
marquee {
width: 100%;
overflow: hidden;
line-height: 45px;
}
div span {
display: inline-block;
/* float: left; */
margin-right: 20px;
margin-left: 10px;
> i {
margin-right: 5px;
}
}
}
}
}
.category-product {
.title-container {
margin-bottom: 15px;
}
.title-content {
border-bottom: 2px solid #1E2D6E;
.title-home {
background-color: #1E2D6E;
padding: 5px 0 5px 30px;
max-width: 210px;
color: #fff;
font-size: 18px;
font-weight: bold;
font-family: OpenSans-Regular;
text-transform: uppercase;
h2 {
margin-top: 10px;
margin-bottom: 10px;
font-size: 18px;
}
&:after {
border-left: 20px solid #1E2D6E;
border-bottom: 50px solid transparent;
content: "";
position: absolute;
top: 0;
left: 225px;
}
}
}
.show-category {
.item-category {
position: relative;
padding: 0;
.detail-category {
height: 250px;
overflow: hidden;
.img-container {
position: relative;
background-color: #fff;
padding: 15px;
img {
max-width: 100%;
overflow: hidden;
margin-left: auto;
display: block;
width: 300px;
height: 240px;
}
&:hover {
.layout {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.6;
top: 0;
}
.hover-category {
display: block;
.fa:hover {
color: #ffff00;
border: 3px solid #ffff00;
}
}
}
.hover-category {
display: none;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
i.fa {
display: block;
text-align: center;
font-size: 37px;
color: #fff;
border: 3px solid #fff;
border-radius: 50%;
height: 60px;
width: 60px;
line-height: 54px;
margin: 0 auto;
}
.more-category {
margin-top: 20px;
font-size: 14px;
color: #fff;
font-weight: bold;
&:hover {
color: #ffff00;
}
}
}
}
.name-category {
position: absolute;
z-index: 9;
padding: 0;
max-width: 270px;
margin: 30px 20px;
h3 {
font-size: inherit;
}
}
}
&.style2 {
.detail-category {
.img-container {
background-color: #f6f6f6;
}
}
}
}
}
}
.aboutus-home {
.title-container {
margin-bottom: 10px;
}
.title-content {
.titlte-home {
padding: 30px 0 5px 0px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
h2 {
margin-top: 10px;
margin-bottom: 10px;
font-size: 22px;
color: #24272a;
font-weight: 500;
}
&:after {
content: "";
position: absolute;
width: 100px;
height: 2px;
background-color: @color;
}
}
}
.about-content {
padding-top: 10px;
.content {
font-size: 16px;
text-align: justify;
line-height: 24px;
}
.btn-more {
margin-top: 15px;
background-color: #1E2D6E;
border-radius: unset;
color: #fff;
font-size: 18px;
&:hover {
color: #ffff00;
}
}
}
.info-address {
margin-top: 30px;
.info-email {
padding-left: 47px;
padding-right: 30px;
margin-right: 30px;
border-right: 1px solid rgba(34,34,34,.4);
&:before {
background-image: url(../assets/img/icon-mail.png);
width: 34px;
height: 31px;
}
}
.info-local {
padding-left: 40px;
&:before {
background-image: url(../assets/img/icon-local.png);
width: 26px;
height: 34px;
}
}
.info-email, .info-local {
display: inline-block;
position: relative;
text-align: left;
font-weight: 500;
line-height: 22px;
&:before {
background-repeat: no-repeat;
background-position: center center;
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
display: inline-block;
}
}
}
.btn-container {
margin-top: 40px;
a {
display: inline-block;
background-color: #43b6e3;
border: 1px solid #43b6e3;
padding: 12px 35px;
border-radius: 25px;
color: #fff;
&:hover {
background-color: #186cb1;
border: 1px solid #186cb1;
}
span {
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
text-align: center;
border: 1px solid #fff;
border-radius: 50%;
}
}
}
}
.section-sanpham {
background-image: url(../assets/img/bg-sp.jpg);
background-repeat: repeat;
padding: 30px 0;
.heading-title {
h2 {
font-size: 22px;
text-transform: uppercase;
color: #fff;
line-height: 24px;
position: relative;
padding: 0 0 10px;
margin: 0;
display: inline-block;
&:before {
content: "";
position: absolute;
bottom: 0;
width: 100px;
height: 2px;
background-color: #fff;
}
}
.view-all {
float: right;
a {
color: #fff;
span {
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
text-align: center;
border: 1px solid #fff;
border-radius: 50%;
margin-right: 5px;
}
}
}
}
}
.section-brands {
.wpb_content_element {
margin-bottom: 0;
}
padding: 30px 0 0;
.brand-home {
.title-container {
margin-bottom: 15px;
}
.title-content {
.titlte-home {
margin-bottom: 10px;
h2 {
margin: 0;
font-size: 22px;
color: #24272a;
font-weight: 500;
padding: 0 0 10px;
text-transform: uppercase;
}
&:after {
content: "";
position: absolute;
width: 100px;
height: 2px;
background-color: @color;
}
}
}
img {
margin-bottom: 0;
}
}
}
.section-maps {
.wpb_content_element {
margin-bottom: 0;
}
}