/*============HEADER V1 ==================*/


//** simple and lightweight mixin library for Sass **
//-- url : http://bourbon.io/docs ---
@import 'bourbon/bourbon';

//** Mixins for Rem Font Sizing **
//-- url : http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/
@import 'utilities/rem';

//** Variables for responsive design in bootstrap with sass **
//-- url : https://gist.github.com/webinfinita/11407836
@import 'utilities/bootstrap_breakpoints';

//** Makes supporting both left-to-right (LTR) and right-to-left (RTL) easy.**
//-- url : https://github.com/tysonmatanich/directional-scss
@import 'utilities/directional';

//Mixins utilities
@import 'utilities/theme_variables';
@import 'utilities/utilities';

/*===============================================
[SASS DIRECTORY ]
    
[1] BLOCK HEADER
[2] BLOCK FOOTER
    
==============================================*/

.typeheader-3{
    .header-top{
        background-color: #fff;
        .header-top-left{
            width: 82.9%;
            float: left;
            .megamenu-style-dev{
                ul.megamenu{
                    > li {
                        &.active > a{
                            color: #fff;
                            background-color: $xanh2;
                        }
                        &.menu-home > a{
                            background-color: $xanh2;
                            color: #fff;
                        }
                        > a{
                            color: #444444;
                            font-weight: 700;
                            padding: 13px 20px 11px 21px;
                            height: 50px;
                            position: relative;
                            &:hover{
                                background-color: $xanh2;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
        .header-top-right{
            width: 17.1%;
            padding-left: 30px;
            text-align: center;
            float: left;
            ul{
                font-size: 0;
                li{
                    display: inline-block;
                    margin: 0 10px;
                    a{
                        font-size: 14px;
                        color: #888888;
                        display: inline-block;
                        line-height: 50px;
                        &:hover{
                            color: $xanh2;
                        }
                    }
                }
            }
        }
    }


 // HEADER CEBTER
 .header-center{
    border-bottom: 1px solid #dddddd;
    background-color: #eeeeee;
    .header-user{
        text-align: right;
        .dropdown-menu{
         left: 0 !important;
         right: auto;
     }
     > ul{
        font-size: 0;
        > li{
            display: inline-block;
            position: relative;
            margin-right: 25px;
            &:last-child{
                margin-right: 0;
            }
            > .lang-img{
                margin: 0 3px 8px 0;
                max-width: 16px;
            }
            > a{
                font-size: 12px;
                padding-top: 9px;
                display: inline-block;
                .dropdown-icon{
                    margin-left: 5px;
                }
            }
            ul{
                li{
                    a{
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
.header-hotline{
    padding: 7px 0;
    .item{
        display: inline-block;
        padding-left: 25px;
        p{
            margin: 0;
        }
        a span{
            font-weight: 700;
        }
        &:first-child{
            background: url(../image/catalog/demo/header/talk-header.png) no-repeat left 0 top 3px;
        }
        &:last-child{
            margin-left: 35px;
            background: url(../image/catalog/demo/header/phone.png)  no-repeat left 0 top -30px;
        }
    }
}
}
        // HEADER CENTER

    // HEADER BOTTOM
    .header-bottom{
        font-size: 0;
        .logo{
            width: 25.6%;
            float: left;
            display: inline-block;
            padding: 37px 0;
        }
        .search-form{
            width: 57.3%;
            display: inline-block;
            float: left;
            padding: 37px 0px 37px 50px;
            .search-form-btn{
                display: none;
            }
            form{
               position: relative;
               font-size: 0;
               .icon{
                   display: inline-block;
                   padding-right: 10px;
                   position: relative;
                   line-height: 40px;
                   padding-left: 15px;
                   border: 1px solid $xanh2;
                   font-size: 14px;
                   border-right: none;
                   background-color: #fff;
                   color: #999999;
                   &:after{
                    content: '';
                    position: absolute;
                    right: 0px;
                    width: 1px;
                    background: #dddddd;
                    top: 20%;
                    height: 60%;
                }
            }
            input{
                font-size: 12px;
                border: none;
                height: 42px;
                width: calc(100% - 92px - 39px);
                border-top: 1px solid $xanh2;
                border-bottom: 1px solid $xanh2;
                vertical-align: top;
                padding: 0 10px;
                border-radius: 0;
                -webkit-appearance: none;
                -moz-appearance: none;
                &:focus{
                    outline: none;
                }
            }
            button[type='submit']{
                font-size: 12px;
                font-weight: 700;
                height: 42px;
                min-width: 92px;
                background-color: $xanh2;
                border: none;
                color: #fff;
                vertical-align: top;
            }
        }
    }
    .cart{
        width: calc(100% - 57.3% - 25.6%);
        display: inline-block;
        float: left;
        padding-left: 30px;
        .cart-box{
            display: block;
            padding-top: 15px;
            background-color: $xanh2;
            text-align: center;
            color: #fff;
            font-size: 14px;
            padding-bottom: 17px;
            .quantity{
                margin-top: 10px;
            }
            .cart-title{
                font-weight: 700;
            }
        }
        .mobile-cart{
            display: none;
        }
    }
        // HEADER BOTTOM

    }
}