/*!
Pure v0.6.2
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/
/*csslint adjoining-classes: false, box-model:false*/
.pure-menu {
    box-sizing: border-box;
    background: #fff;
}

.pure-menu-fixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
}

/*
.pure-menu-item {
    position: relative
}*/
.pure-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pure-menu-item {
    padding: 0;
    margin: 0;
}

.pure-menu-link,
.pure-menu-heading {
    display: block;
    text-decoration: none;
}

.pure-menu-item-last {
    font-size: 14px !important;
}
/* HORIZONTAL MENU */
.pure-menu-horizontal {
    width: 100%;
    white-space: nowrap;
}

    .pure-menu-horizontal .pure-menu-list {
        display: inline-block;
    }

    /* Initial menus should be inline-block so that they are horizontal */
    .pure-menu-horizontal .pure-menu-item,
    .pure-menu-horizontal .pure-menu-heading,
    .pure-menu-horizontal .pure-menu-separator {
        display: inline-block;
        /*display: inline;*/
        zoom: 1;
        vertical-align: middle;
    }

/* Submenus should still be display: block; */
.pure-menu-item {
    display: block;
}

.pure-menu-children {
    display: none;
    margin: 0;
    padding: 0;
    z-index: 3;
}

    .pure-menu-children.nav3 {
        display: none;
    }

.pure-menu.menu-bottom .pure-menu-children.nav3 {
    display: block;
}

.pure-menu-children.nav3 .pure-menu-item {
    line-height: 15px;
    position: relative;
}

.pure-menu-horizontal .pure-menu-children {
    left: 0;
    top: auto;
    width: inherit;
}

.pure-menu-active > .pure-menu-children
/*.pure-menu-has-children:hover > .pure-menu-children.nav3,
.pure-menu-has-children.x-hover > .pure-menu-children.nav3*/ {
    display: block;
}

.pure-menu-allow-hover.x-hover > .pure-menu-children {
    display: block;
    position: absolute;
    top: 0px;
    width: 100%;
}

.pure-menu-link .fa-plus {
    color: #da251c;
    font-size: 11px;
    float: right;
    margin-top: 4px;
}

.pure-menu-link .fa-minus {
    color: #da251c;
    font-size: 11px;
    float: right;
    margin-top: 4px;
}
/* Horizontal Menus - show the dropdown arrow */
.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
    position: absolute;
    content: "";
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #333;
    top: 15px;
    right: 7px;
}
/* scrollable menus */
.pure-menu-scrollable {
    overflow-y: scroll;
    overflow-x: hidden;
}

    .pure-menu-scrollable .pure-menu-list {
        display: block;
    }

.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
    display: inline-block;
}

.pure-menu-horizontal.pure-menu-scrollable {
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* a little extra padding for this style to allow for scrollbars */
    padding: .5em 0;
}

    .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
        display: none;
    }

/* misc default styling */

.pure-menu-separator,
.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
    background-color: #ccc;
    height: 1px;
    margin: .3em 0;
}

.pure-menu-horizontal .pure-menu-separator {
    width: 1px;
    height: 1.3em;
    margin: 0 .3em;
}

/* Need to reset the separator since submenu is vertical */
.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
    display: block;
    width: auto;
}

.pure-menu-heading {
    text-transform: uppercase;
    color: #565d64;
}

.pure-menu-link {
    color: #333;
}

.pure-menu-children {
    background-color: #fff;
}

.pure-menu-link,
.pure-menu-disabled,
.pure-menu-heading {
    padding: 7px 10px;
}

    .pure-menu-link.navlink2 {
        padding-left: 30px;
        color: #333;
    }

    .pure-menu-link.navlink3 {
        padding-left: 54px;
    }

        .pure-menu-link.navlink3:before {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 4px;
            background-color: #aaa;
            position: absolute;
            left: 40px;
            top: 12px;
        }

.pure-menu-disabled {
    opacity: .5;
}

    .pure-menu-disabled .pure-menu-link:hover,
    .pure-menu-disabled .pure-menu-link.x-hover {
        background-color: transparent;
    }

/*.pure-menu-active > .pure-menu-link,
.pure-menu-link:hover,
.pure-menu-link:focus {
    background-color: #fff;
}*/

.pure-menu-selected .pure-menu-link,
.pure-menu-selected .pure-menu-link:visited {
    color: #000;
}

.pure-menu-link.navlink3:hover,
.pure-menu-link.navlink3.x-hover,
.pure-menu-link.navlink3:focus {
    background: none;
    color: #da251c;
}

.pure-menu-link.suplink {
    padding-left: 30px;
}

li.pure-menu-item-last {
    display: none;
}

.pure-menu-item.second {
    padding: 7px 10px;
}

a.group-hang-item {
    width: 49%;
    display: inline-block;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

    a.group-hang-item.left {
        border-bottom: 2px solid #4d74fd;
        margin-right: 5px;
    }

    a.group-hang-item.smap {
        text-align: center;
        line-height: 22px;
    }

.menu-bottom .pure-menu-children {
    background: #eee;
}

.key-item img, .alpha-key-item img {
    vertical-align: middle;
}

li.alpha-key-item.group-form {
    position: relative;
}

    li.alpha-key-item.group-form.level-2 img {
        display: none;
    }

    li.alpha-key-item.group-form.level-3 img {
        display: none;
    }

    li.alpha-key-item.group-form.level-4 img {
        display: none;
    }

    li.alpha-key-item.group-form.level-2:before {
        width: 4px;
        height: 4px;
        line-height: 4px;
        content: "";
        border-radius: 4px;
        position: absolute;
        background-color: #808080;
        top: 10px;
        left: -5px;
    }

    li.alpha-key-item.group-form.level-2 {
        margin-left: 35px;
    }

    li.alpha-key-item.group-form.level-3:before {
        width: 4px;
        height: 4px;
        line-height: 4px;
        content: "";
        border-radius: 4px;
        position: absolute;
        background-color: #9a9a9a;
        top: 10px;
        left: -5px;
    }

    li.alpha-key-item.group-form.level-3 {
        margin-left: 45px;
    }

    li.alpha-key-item.group-form.level-4:before {
        width: 4px;
        height: 4px;
        line-height: 4px;
        content: "";
        border-radius: 4px;
        position: absolute;
        background-color: #9a9a9a;
        top: 10px;
        left: -5px;
    }

    li.alpha-key-item.group-form.level-4 {
        margin-left: 55px;
    }

li.pure-menu-item-last:hover a {
    color: #da251c;
}

@media screen and (min-width: 1200px) {

    .pure-menu-item.first, .pure-menu.menu-bottom {
        display: none;
    }

    .pure-menu-link {
        padding: 7.6px 15px !important;
        font-size: 14.5px;
    }

        .pure-menu-link.navlink2 {
            padding: 4px 15px !important;
        }

        .pure-menu-link.navlink3 {
            padding: 6px 0px 6px 25px !important;
        }

    .pure-menu-item.all {
        display: none;
    }

    .pure-menu-allow-hover.x-hover > .pure-menu-children {
        width: 989px;
        left: 245px;
        border-left: 1px solid #eee;
        /*         border-top: 1px solid #eee; */
        font-size: 14px;
        height: calc(100% - 2px);
        -webkit-column-width: 190px;
        -webkit-column-gap: 0;
        -moz-column-width: 190px;
        -moz-column-gap: 0;
        column-width: 190px;
        column-gap: 0;
        column-fill: auto;
        overflow: scroll;
        overflow-y: hidden;
        overflow-x: auto;
    }

    .pure-menu-children.parent-level2::-webkit-scrollbar {
        height: 10px;
    }

    .pure-menu-children.parent-level2::-webkit-scrollbar-track {
        background-color: #fafafa;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .pure-menu-children.parent-level2::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #ddd;
        border: 1px solid #ddd;
    }

        .pure-menu-children.parent-level2::-webkit-scrollbar-thumb:active {
            background: #ccc;
        }

    .pure-menu-allow-hover:hover .pure-menu-link.one,
    .pure-menu-allow-hover.x-hover .pure-menu-link.one {
        color: #fff !important;
        background-color: #da251c;
    }

        .pure-menu-allow-hover:hover .pure-menu-link.one:before,
        .pure-menu-allow-hover.x-hover .pure-menu-link.one:before {
            background: url(../images/arrow-right-white.png)no-repeat;
            width: 16px;
            height: 16px;
            position: absolute;
            content: "";
            right: 0;
            background-size: 12px;
            background-position-y: 3px;
        }

    .pure-menu-allow-hover:hover .icon-menu-item img,
    .pure-menu-allow-hover.x-hover .icon-menu-item img {
        -moz-filter: brightness(0) invert(1);
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
    }
    .icon-menu-item img.menu-icon-lvl2{
        margin-right: 5px;
        margin-left: -17px;
        width: 20px;
    }
    .pure-menu-allow-hover:hover .icon-menu-item img.menu-icon-lvl2,
    .pure-menu-allow-hover.x-hover .icon-menu-item img.menu-icon-lvl2{
        -moz-filter:unset;
        -webkit-filter: unset;
        filter: unset;
    }

    .pure-menu-children.nav3 {
        display: block;
    }

    .pure-menu-link .fa-plus, .pure-menu-link .fa-minus {
        display: none;
    }

    .pure-menu-link.navlink2 {
        font-weight: 500;
        font-size: 14px;
    }

        .pure-menu-link.navlink2 .icon-menu-item img {
            display: none;
        }
        .pure-menu-link.navlink2 .icon-menu-item img.menu-icon-lvl2{
            display: inline-block;
        }

    .pure-menu-link.navlink3 {
        font-size: 14px;
    }

        .pure-menu-link.navlink3.all {
            display: none;
        }

        .pure-menu-link.navlink3:before {
            left: 15px;
        }

    a[data-id="290"] ~ .pure-menu-children {
        background: #fff url(../images/bg-yte.png) no-repeat right bottom;
    }

    a[data-id="514"] ~ .pure-menu-children {
        background: #fff url(../images/bg-vanphong.png) no-repeat right bottom;
    }

    a[data-id="906"] ~ .pure-menu-children {
        background: #fff url(../images/bg-lamdep.png) no-repeat right bottom;
    }

    a[data-id="229"] ~ .pure-menu-children {
        background: #fff url(../images/bg-mebe.png) no-repeat right bottom;
    }

    a[data-id="3267"] ~ .pure-menu-children {
        background: #fff url(../images/bg-tpcn.png) no-repeat right bottom;
    }

    a[data-id="3320"] ~ .pure-menu-children {
        background: #fff url(../images/bg-dulich.png) no-repeat right bottom;
    }

    a[data-id="1238"] ~ .pure-menu-children {
        background: #fff url(../images/bg-bach-hoa.png) no-repeat right bottom;
    }

    a[data-id="3584"] ~ .pure-menu-children {
        background: #fff url(https://meta.vn/Data/image/2022/05/11/gb-thietbi-cong-nghiep.png) no-repeat right bottom;
    }

    a[data-id="3434"] ~ .pure-menu-children {
        background: #fff url(https://meta.vn/Data/image/2023/06/02/bg-phukienxehoi.png) no-repeat right bottom;
    }

    .hot-trend .pure-menu-link.navlink2:before {
        background: url(https://meta.vn/Data/image/2021/01/13/hot-category.png) no-repeat;
        content: "";
        background-size: 20px;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 3px;
        left: -6px;
    }

    .hot-trend .pure-menu-link.navlink2 {
        margin-left: 9px;
        position: relative;
        color: #da251c;
    }

    .item-trend .pure-menu-link.navlink3:before {
        background: url(https://meta.vn/Data/image/2021/01/13/hot-category.png) no-repeat;
        content: "";
        background-size: 20px;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 3px;
        left: 5px;
    }

    li.pure-menu-item-last {
        display: block;
    }

    li.pure-menu-item.second {
        display: none;
    }

    .key-item.group-form {
        padding: 7px 5px 3px 10px;
    }

    li.alpha-key-item.group-form {
        margin: 8px 0;
    }

        li.alpha-key-item.group-form.level-2 img {
            display: inline-block;
        }

        li.alpha-key-item.group-form.level-3 img {
            display: inline-block;
        }

        li.alpha-key-item.group-form.level-4 img {
            display: inline-block;
        }

        li.alpha-key-item.group-form.level-2:before {
            display: none;
        }

        li.alpha-key-item.group-form.level-3:before {
            display: none;
        }

        li.alpha-key-item.group-form.level-4:before {
            display: none;
        }

        li.alpha-key-item.group-form.level-2 {
            margin-left: 0;
        }

        li.alpha-key-item.group-form.level-3 {
            margin-left: 0;
        }

        li.alpha-key-item.group-form.level-4 {
            margin-left: 0;
        }
}

@media screen and (min-width: 980px) and (max-width: 1199px) {
    .pure-menu-item.first, .pure-menu.menu-bottom {
        display: none;
    }

    .pure-menu-link {
        padding: 8.05px 15px !important;
        font-size: 14.5px;
    }

        .pure-menu-link.navlink2 {
            padding: 4px 15px !important;
        }

        .pure-menu-link.navlink3 {
            padding: 6px 0px 6px 25px !important;
        }

    .pure-menu-item.all {
        display: none;
    }

    .pure-menu-allow-hover.x-hover > .pure-menu-children {
        top: -1px;
        width: 757px;
        left: 245px;
        border: 1px solid #eee;
        font-size: 14px;
        height: calc(100% - 2px);
        -webkit-column-width: 190px;
        -webkit-column-gap: 0;
        -moz-column-width: 190px;
        -moz-column-gap: 0;
        column-width: 190px;
        column-gap: 0;
        column-fill: auto;
        overflow: scroll;
        overflow-y: hidden;
        overflow-x: auto;
    }

    .pure-menu-children.parent-level2::-webkit-scrollbar {
        height: 10px;
    }

    .pure-menu-children.parent-level2::-webkit-scrollbar-track {
        background-color: #fafafa;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .pure-menu-children.parent-level2::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #ddd;
        border: 1px solid #ddd;
    }

        .pure-menu-children.parent-level2::-webkit-scrollbar-thumb:active {
            background: #ccc;
        }

    .pure-menu-allow-hover:hover .pure-menu-link.one,
    .pure-menu-allow-hover.x-hover .pure-menu-link.one {
        color: #fff !important;
        background-color: #da251c
    }

        .pure-menu-allow-hover:hover .pure-menu-link.one:before,
        .pure-menu-allow-hover.x-hover .pure-menu-link.one:before {
            background: url(../images/arrow-right.png)no-repeat;
            width: 16px;
            height: 16px;
            position: absolute;
            content: "";
            right: 0;
            background-size: 12px;
            background-position-y: 3px;
        }

    .pure-menu-allow-hover:hover .icon-menu-item img,
    .pure-menu-allow-hover.x-hover .icon-menu-item img {
        -moz-filter: brightness(0) invert(1);
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
    }
    .icon-menu-item img.menu-icon-lvl2{
        margin-right: 5px;
        margin-left: -17px;
        width: 20px;
    }
    .pure-menu-allow-hover:hover .icon-menu-item img.menu-icon-lvl2,
    .pure-menu-allow-hover.x-hover .icon-menu-item img.menu-icon-lvl2{
        -moz-filter:unset;
        -webkit-filter: unset;
        filter: unset;
    }

    .pure-menu-children.nav3 {
        display: block;
    }

    .pure-menu-link .fa-plus, .pure-menu-link .fa-minus {
        display: none;
    }

    .pure-menu-link.navlink2 {
        font-weight: 500;
        font-size: 14px;
    }

        .pure-menu-link.navlink2 .icon-menu-item img {
            display: none;
        }
        .pure-menu-link.navlink2 .icon-menu-item img.menu-icon-lvl2{
            display: inline-block;
        }

    .pure-menu-link.navlink3 {
        font-size: 14px;
    }

        .pure-menu-link.navlink3.all {
            display: none;
        }

        .pure-menu-link.navlink3:before {
            left: 16px;
        }

    .hot-trend .pure-menu-link.navlink2:before {
        background: url(https://meta.vn/Data/image/2021/01/13/hot-category.png) no-repeat;
        content: "";
        background-size: 20px;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 3px;
        left: -6px;
    }

    .hot-trend .pure-menu-link.navlink2 {
        margin-left: 9px;
        position: relative;
        color: #da251c;
    }

    .item-trend .pure-menu-link.navlink3:before {
        background: url(https://meta.vn/Data/image/2021/01/13/hot-category.png) no-repeat;
        content: "";
        background-size: 20px;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 3px;
        left: 5px;
    }

    li.pure-menu-item-last {
        display: block;
    }

    li.pure-menu-item.second {
        display: none;
    }

    .key-item.group-form {
        padding: 7px 5px 3px 10px;
    }

    li.alpha-key-item.group-form {
        margin: 8px 0;
    }

        li.alpha-key-item.group-form.level-2 img {
            display: inline-block;
        }

        li.alpha-key-item.group-form.level-3 img {
            display: inline-block;
        }

        li.alpha-key-item.group-form.level-4 img {
            display: inline-block;
        }

        li.alpha-key-item.group-form.level-2:before {
            display: none;
        }

        li.alpha-key-item.group-form.level-3:before {
            display: none;
        }

        li.alpha-key-item.group-form.level-4:before {
            display: none;
        }

        li.alpha-key-item.group-form.level-2 {
            margin-left: 0;
        }

        li.alpha-key-item.group-form.level-3 {
            margin-left: 0;
        }

        li.alpha-key-item.group-form.level-4 {
            margin-left: 0;
        }
}

@media screen and (min-width: 980px) {
}

@media screen and (max-width: 979px) {
}