/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
.bl-super-contact{
    position: fixed;
    z-index: 2;
    right : 10px;
    bottom: 10%;
}

.bl-super-contact-icon{
    margin-bottom: 20px;
    transition: all 500ms ease;
}

.bl-super-contact-icon.hide{
    opacity: 0;
}

.bl-super-contact-icon-wrap{
    position: relative;
    width: 40px;
    height: 40px;
    
}

.bl-super-contact-icon-button{
    padding: 7px;
    border-radius: 50%;
}
.bl-super-contact-icon-button a{
    position: relative;
    z-index: 1;
    display: block;
}


.bl-super-contact-close{
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #dc3545;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 5px;

}
.bl-super-contact-close:hover{
    cursor: pointer;
}
.bl-super-contact-close.close{
    background-color: #333;
    
}

.bl-super-contact-close .close-icon{
    
}


.bl-super-contact-icon-wrap.is-buble .bl-contact-text{
    background-color: #FFF;
    width: 200px;
    border-radius: 10px;
    padding: 10px;
    display: block;
    color: #000;
    bottom: calc( 100% + 20px );
    top: auto;
    right: 0;
    min-height: 50px;
    display: flex;
    justify-content: center;

}




.bl-super-contact-icon-wrap.is-buble .bl-contact-text::before{
    border-bottom: 8px solid #FFF;
    right: 10px;
    top: auto;
    bottom: -8px;
    transform: rotate(180deg);

}


.bl-contact-text{
    
    position: absolute;
    right: calc( 100% + 5px);
    top: 50%;
    background-color: #c10404;
    color: #FFF;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 12px;
    margin-top: -10px;
    display: none;
    max-width: 200px;
    box-shadow: 1px 1px 15px -5px #a7a7a7;
   

}
.bl-contact-text::before{
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #c10404;
    position: absolute;
    right: -6px;
    transform: rotate(90deg);
    top: 5px;
}



.bl-super-contact.left .bl-contact-text{
    left: 45px;
    right: auto;
}
.bl-super-contact.left .bl-contact-text::before{
    left: -9px;
    right: auto;
    transform: rotate(-90deg);
}
.bl-super-contact.left .bl-super-contact-icon-wrap.is-buble .bl-contact-text{
    left: 0;
    right: auto;
}



.bl-super-contact.left .bl-super-contact-icon-wrap.is-buble .bl-contact-text::before{
    left: 11px;
    right: auto;
    transform: rotate(180deg);
}

.show-text-display.bl-contact-text{
    display: block;
}

.bl-contact-text .bl-contact-text-display{
    text-wrap: nowrap;
}


.bl-super-contact-icon-wrap.is-buble .bl-contact-text .bl-contact-text-display{
    text-wrap: wrap;
}


.bl-contact-text.hidden{
    display: none;
    visibility: hidden;
}

.bl-super-contact-icon:hover .bl-contact-text{
    display: flex;
}


.bl-super-contact-close.close .open-icon{
    display: none;
}


.bl-super-contact .typing-indicator {
    display: flex;
    align-items: center;
}

.bl-super-contact .dot {
    width: 10px;
    height: 10px;
    margin: 0 3px;
    background-color: #d1d1d1;
    border-radius: 50%;
    opacity: 0.5;
    animation: blink 1.4s infinite both;
}

.bl-super-contact .dot:nth-child(1) {
    animation-delay: 0s;
}
.bl-super-contact .dot:nth-child(2) {
    animation-delay: 0.2s;
}
.bl-super-contact  .dot:nth-child(3) {
    animation-delay: 0.4s;
}

.bl-contact-text .close-text {
    position: absolute;
    right: -10px;
    top: -10px;
    padding: 0;
    margin: 0;
    border: 0 none;
    line-height: 1;
    width: 26px;
    height: 26px;
    cursor: pointer;
    background: #787878;
    border-radius: 50%;
    text-align: center;
    background-color: #407BFF;
    color: #FFFFFF;
    line-height: 30px;
}

@keyframes blink {
    0%, 80%, 100% {
        opacity: 0.5;
    }
    40% {
        opacity: 1;
    }
}


.ring{
    border-radius: 50%;
    background-color: #FFF;

    position: relative;
    animation: ring 1s linear infinite;
    border-radius: 50%;
}
@keyframes ring {
    0% {
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}



.pulse {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.pulse::before {
    content: "";
    position: absolute;
    border: 1px solid orange;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 50%;
    animation: pulse 1s linear infinite
}

.pulse::after {
    content: "";
    position: absolute;
    border: 1px solid ORANGE;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 50%;
    animation: pulse 1s linear infinite;
    animation-delay: 0.3s
}



@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 0
    }

    50% {
        transform: scale(1);
        opacity: 1
    }

    100% {
        transform: scale(1.1);
        opacity: 0
    }
}
/*************** ADD CUSTOM CSS HERE.   ***************/
.header-cart-link{font-weight:bold !important;color:#000 !important;}
.product-small .product-small{border-right:1px solid #ccc;padding: 10px;}
.product-small .product-small:hover{background:#ccc !important;}
.badge-container {
  right: 0;
  left: auto;
}
.badge {
  height: 20px;
}
.badge-inner{border-radius:2px !important;}
.onsale{height:20px !important;line-height: 20px !important;}
.quantity input[type="number"] {

}
a:hover{color:#D9222A}
#wrapper, #main {
  background-color: #F9F9F9;
}
.flatsome_recent_posts ul{margin: 0;
  background: #fff;
  padding: 0 10px;}
.psy-pane {
    position: fixed;
    z-index: 9;
    left: 0;
    top: 50%;
    background: #eaebeb;
    border-radius: 0 5px 5px 0;
    margin-top: -137px;
    display: none;
    .smooth {
        display: block;
        height: 55px;
        width: 55px;
        position: relative;
        text-align: center;
        line-height: 55px;
        &:after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 8px;
            right: 8px;
            height: 1px;
            background: rgba(255, 255, 255, 0.8);
        }
        &:hover {
            &.sale_prd {
                span {
                    min-width: 250px;
                }
            }
            &.gara_prd {
                span {
                    min-width: 250px;
                }
            }
            &.hands_prd {
                span {
                    min-width: 200px;
                }
            }
            &.indus_prd {
                span {
                    min-width: 300px;
                }
            }
            .fa, img {
                -webkit-filter: none;
                filter: none;
                opacity: 1;
            }
            span {
                margin-left: -10px;
                visibility: visible;
            }
        }
        &.active {
            .fa, img {
                -webkit-filter: none;
                filter: none;
                opacity: 1;
            }
        }
        .fa, img {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            opacity: 0.7;
            max-width: 35px;
            padding-top: 10px;
            font-size: 35px;
            color: #d9222a;
        }
        span {
            white-space: nowrap;
            position: absolute;
            left: 100%;
            top: 0;
            bottom: 0;
            background: #eaebeb;
            line-height: 55px;
            margin-left: -30px;
            padding: 0 25px 0 35px;
            color: #d9222a;
            font-size: 18px;
            border-radius: 0 5px 5px 0;
            visibility: hidden;
        }
    }
}

.social-right {
    //display: block;
    position: fixed;
    z-index: 9;
    right: 0;
    top: 50%;
    background: #d9222a;
    border-radius: 5px 0 0 5px;
    margin-top: -90px;
    overflow: hidden;
    display: none;
    .smooth {
        display: block;
        font-size: 30px;
        height: 55px;
        line-height: 58px;
        width: 55px;
        text-align: center;
        color: #fff;
        position: relative;
        padding: 10px 0px;
        &:after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 8px;
            right: 8px;
            height: 1px;
            background: rgba(255, 255, 255, 0.3);
        }
        &.ic-fb:hover {
            background: #3b5998;
        }
        &.ic-yt:hover {
            background: #f00000;
        }
        .fa {

        }
    }
    .ic-zalo {
        height: auto;
        padding: 7px 6px 10px;
    }
}
#mega-menu-wrap {
  background: #D9222A !important;
}
.post-title{color:#000;}
.widget .menu-menusp-container{background:#fff;padding:0 10px;}
.menudm ul img{vertical-align:middle;}
.menudm ul li{font-weight:bold;}
.menudm ul li:hover{background:#196737;color:#fff;}
.menudm ul li:hover a{color:#fff !important;}
.nav > li > a {

  font-weight: bold;

}
.header-search-form .search-field{border: 2px solid #D9222A;}
/*#menu-menusp .menu-item-has-children{position:relative}
#menu-menusp .menu-item-has-children .sub-menu{position:absolute}
#menu-menusp .menu-item-has-children:hover .sub-menu{ display:block;}*/
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}



.menudm ul{padding-left: 0;
border: 1px solid #ddd;
margin: 0;}
.menudm ul li{ list-style: none;
border-bottom: 1px solid #eee;
margin: 0;
padding: 10px;padding: 5px 10px;}

.menudm ul li a{padding: 3px 0;}

#wide-nav > .flex-row > .flex-left {
    width: 25%;
    min-width: 285px;
    margin-right: 15px;
}
.rowmenu1{padding-right:0;}
.rowmenu2{padding-left: 0;
padding-top: 0;
padding-bottom: 0;}
.badge-container{
	margin: 0;
}
.onsale{
border-radius: 50%;
width: 40px;
height: 40px;
display: block;
text-align: center;
line-height: 40px;
color: #fff;font-size: 14px;}
.absolute-footer{padding:0;}
.footer-primary{padding:10px;}

body{font-family:'Arial', sans-serif !important}
.nav > li > a {
font-family: "arial", sans-serif !important;
	padding:10px 15px;
}
#mega_menu > li > a {
    font-size: 18px;
}
.autocomplete-suggestion {
    background: #fff !important;
    color: #333;
    font-size: 16px;
}

.autocomplete-suggestion span.amount {
    color: #D9222A;
}
.policy_intuitive {
    margin: 10px 0;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, del, em, img, strong, sub, sup, b, u, i, center, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, nav, section, summary, mark, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

.section-title b {
   margin-top: 31px;

opacity: 1;
}
.section-title-main{color:#fff;}
.section-title-center b {
    margin-top: 30px;

    opacity: 1;
}
.section-title-bold span{border-radius: 5px 5px 0 0;}
.section-title-center span{margin: 0 15px;
color: #fff !important;
border-radius: 5px 5px 0 0;
padding: 0 15px;margin: 0;}
.section-title-normal span {

    margin-right: 10px;
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: white !important;
    padding: 10px;
}
.section-title-normal {

    background: none;
}
.section-title-normal b {
    display: none;
}

span.quangphu-show-cats {
background: none;
width: 800px;
margin: 0;
height: 44px;
padding: 0 15px;
}
span.quangphu-show-cats li {
	display: block;
	width: auto;
	margin: 0;
	width: 100%;
}
span.quangphu-show-cats li a {
    background: none;
    font-size: 15px;
    text-transform: none;
    text-align: center;
    font-weight: 400;
    color: #333;
    margin-right: 0 !important;
    padding-left: 10px;
    position: relative;
    padding: 0px 8px;
    margin: 0 3px 0 0;
        margin-right: 3px;
	height:44px;
	line-height:44px;
}
span.quangphu-show-cats .owl-nav{position:absolute; top:0; color:#000; width:100%;}
span.quangphu-show-cats .owl-prev{position: absolute;
left: -16px;
margin: 0;
height: 30px;
top: 0;
background: #f4f4f4 !important;
width: 40px;border-radius: 50%;}
span.quangphu-show-cats .owl-next{position: absolute;
right: -16px;
margin: 0;
padding: ;
padding: ;
height: 30px;
top: 0;
background: #f4f4f4 !important;
width: 40px;border-radius: 50%;}
span.quangphu-show-cats .owl-item{text-align:center}
#mega-menu-wrap-max_mega_menu_1 {
  
    
}
h1, h2, h3, h4, h5, h6 {

}
ins span.amount{}
span.widget-title {
    font-size: 1em;
    font-weight: 600;

}
.is-divider {

    background-color: #F60;

}
.chuthich .icon-box{background:#fff; padding: 5px; margin: 15px;}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item {
 
    border-bottom: 1px solid #05560A;
}
.bgsale{
	    border: 2px dashed #F60;
    border-radius: 20px;
}

.bgsale .section-title-main{
	background: #FF6600;
}
.bgsale .section-title-center b {

    background-color: #FF6600;

}
.bgsale .badge-inner.on-sale{background:red}
.maxlead {
    width: 60px;
    text-align: center;
    padding: 5px 0;
    line-height: 18px;
    position: fixed;
    bottom: 60px;
    right: 0;
    z-index: 999;
}
.maxlead a {
    display: block;
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}
.maxlead a img {
    width: 36px;
}
.hotrokhachhang{background:url('images/footer-bg.jpg') no-repeat scroll 0 0;}
.c-title_box{padding: 0px 0;
  color: #fff;
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: bold;}
.c-title_box img{vertical-align: middle;}
.hotrokhachhang .col{padding-bottom:0 !important;}
.hotrokhachhang .col-inner{padding:5px 0;}
.button{border-radius:0 !important;}
.bgwhite{padding:10px 0; background:rgb(255,255,255,0.5)}
.chinhsachfooter .col,.logofooter .col{padding-bottom:0 !important}
.footer-form .wpcf7-text{background-color:#fff !important;border-radius:0;
	height:40px;border-radius: 0 !important;}
.footer-form .col {
  padding: 15px;
  vertical-align: middle;
  color: #000;
}
.footer-form .fa-facebook{color:#3B579D;font-size:30px;}
.footer-form .fa-youtube{color:#FF0000;font-size:30px;}
.search-field,.search_categories{background:#fff;}
.box-blog-post .box-text{vertical-align: top;}
.header-main{background:url(images/bg_head1.jpg) repeat scroll 0 0;}
.menudm ul {

  height: 360px;
  overflow-y: scroll;box-shadow: 1px 1px 6px 1px #ccc;
}
.entry-header-text {
  padding: 1.5em 0 0;
    
}
.header-bottom {
  background-color: #fff !important;
  border-bottom: 1px solid #ccc;
}
.woocommerce-loop-product__title{font-size: 16px;
  font-weight: bold;
  color: #000;}
.slider-nav-reveal{overflow:visible;}
.slider-nav-reveal .flickity-prev-next-button.previous{
	bottom: -79px;
  position: absolute;
  top: auto;
  height: 30px;
  z-index: 999999;
  color: #000;
  background: #ccc;
  opacity: 1;
  right: 200px !important;
  left: auto !important;
  box-shadow: none;
}
.slider-nav-reveal .flickity-prev-next-button.next{
	bottom: -79px;
  position: absolute;
  top: auto;
  height: 30px;
  z-index: 999999;
  color: #000;
  background: #ccc;
  opacity: 1;
  right: 170px !important;
  left: auto !important;
  box-shadow: none;
}

.slider-nav-push.slider-nav-reveal .flickity-prev-next-button svg {
  margin-top: 0;
}
span.amount {
  white-space: nowrap;
  color: #D9222A;
  font-weight: 700;
}
#mega-menu-max_mega_menu_1 .mega-menu-item{position:relative !important;width: 100% !important;padding: 5px !important;}
#mega-menu-max_mega_menu_1 ul.mega-sub-menu {
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
}
#mega-menu-max_mega_menu_1 .mega-menu-item .mega-indicator{float:right !important;}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after {
    content: '\f139' !important;
    
}
.khuyenmai{position: absolute;
top: -35px;
color: #fff;
padding: 5px 10px;
border-radius: 0;}
.select_option span, .select_option img {
  width: 100%;
}
.c-side {
  border: 1px solid #e1e1e1;
  margin-bottom: 15px;
  padding: 5px 20px;
  background: #fff;
}
.c-side li {
  border-bottom: 1px solid #e1e1e1;
  display: block;
  grid-template-columns: 40px 1fr;
  align-items: center;
  padding: 10px 0px;
}
.c-side .c-title {
  text-transform: uppercase;
  font-family: OpenSans-Bold;
  padding: 10px 0 15px;
  border-bottom: 1px solid #e1e1e1;
}
.btgrid .col{
	padding: 0 15px 0px !important;
}
.widget .is-divider{display:none !important}
.widget .widget-title{background: #196737;
  width: 100%;
  height: 40px;
  display: block;
  line-height: 40px;
  padding-left: 10px;
  color: #fff;}
#main .cart-container .woocommerce{padding:20px 0;}
.menucon{background: #ccc;
    width: 300px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0; display:none;}
.menuchon{overflow:visible;}
.menuchon .menu-item-has-children:hover .sub-menu{display:block; position:absolute; top:0;left:260px;z-index:10000;background:#ccc;}
.menuchon .menu-item-has-children:hover .sub-menu a{color:#000;}
.menuchon .menu-item-has-children .sub-menu li:hover a{color:#fff;}
.menuchon .menu-item-has-children .sub-menu li{border-bottom:1px solid #eee;}

/*
#menu-menusp{overflow:visible;}
#menu-menusp .menu-item-has-children{position:relative}
#menu-menusp .menu-item-has-children:hover .sub-menu{display:block; position:absolute; top:0;left:260px;z-index:10000;background:#fff;}
#menu-menusp .menu-item-has-children:hover .sub-menu a{color:#000;padding-left:10px;}
#menu-menusp .menu-item-has-children .sub-menu li{border-bottom:1px solid #eee;}
#menu-menusp .menu-item-has-children .sub-menu li:hover{background:#196737}
#menu-menusp .menu-item-has-children .sub-menu li:hover a{color:#fff; }
*/

#menu-menusp {
    height: 340px;
    overflow-y: scroll;
}


#mega_menu li:hover a{background:#196737 !important}
#mega_menu li:hover a{color:#fff !important;}
#mega_menu li ul.sub-menu{background:#ccc;}
#mega_menu li ul.sub-menu li a{background:#ccc !important;color:#000 !important}
#mega_menu li ul.sub-menu li:hover a{background:#DA222A !important;color:#fff !important}
#menu-menusp img,#mega_menu img,.sidebar-menu img{height:20px; width:20px;border-radius:100%;margin-right: 5px;}
#menu-menusp li a,#mega_menu li a,.sidebar-menu li a{font-size:14px;color:#000;}
#mega-menu-title {
   
    text-transform: uppercase;
}
.idsanpham{display:none;}
@media only screen and (max-width: 1024px) {
	span.quangphu-show-cats {
    background: none;
    width: 600px;
    margin: 0;
    height: 44px;
    padding: 0 15px;
}
}
@media only screen and (max-width: 768px) {
	span.quangphu-show-cats {
    background: none;
    width: 500px;
    margin: 0;
    height: 44px;
    padding: 0 15px;
}
}
@media only screen and (max-width: 480px) {
	.psy-pane{display:none !important}
	span.quangphu-show-cats {
    background: none;
    width: 100%;
    margin: 0;
    height: 44px;
    padding: 0 15px;
}

}