/* ============================================================================
   Header · menu — BẢN MÁY TÍNH

   Menu chính: TẠP CHÍ · CỘNG ĐỒNG · CỐ VẤN · DẤU ẤN.

   Quy ước: số đo dùng thang --cq-1..6, màu dùng token (Theme.css). Bản web và bản
   điện thoại TÁCH HẲN — không file nào set đè file kia.
   ============================================================================ */

/* ← Content/Styles/Site.css */
#mainMenu .menu-home  {
    padding-left: 0px;

    background: none;
}

.main-menu  {
    float: left;
}

.main-menu, .main-menu ul  {
        list-style: none;

        margin: 0px;

        padding: 0px;
}

.main-menu > li > ul  {
            width: 100%;

            padding: 20px 0;
}

.main-menu > li  {
            display: inline-block;

            vertical-align: top;
}

.main-menu a:before  {
            display: none;
}

.main-menu > li > a  {
            color: var(--cq-text);

            text-transform: uppercase;

            font-size: 16px;

            display: block;

            line-height: 40px;

            position: relative;

            padding: 10px 15px;
}

.main-menu a  {
            position: relative;

            top: 0px;
}

.main-menu a.glyphicon:before  {
                position: absolute;

                right: 20px;
}

.main-menu ul  {
    position: absolute;

    top: 100%;

    left: 0px;

    width: 100%;

    background: var(--cq-surface);

    display: none;
}

.main-menu ul ul  {
        top: 0px;

        left: 0px;

        height: 100%;

        position: relative;

        display: block;
}

.main-menu ul ul ul  {
            display: none;
}

.main-menu ul a  {
        display: block;

        padding: 5px 10px;

        font-size: 15px;

        line-height: 18px;

        font-weight: bold;
}

.main-menu ul ul a  {
        font-weight: normal;

        font-size: 13px;
}

.main-menu ul li:hover > a  {
        padding-right: 1px;

        margin-right: -1px;

        z-index: 1;
}

.main-menu li:hover > ul  {
    display: block;
}

.main-menu ul ul a  {
    margin: 0px;
}

.main-menu ul ul a.glyphicon:before  {
        display: none;
}

.main-menu > li:hover > a span, .main-menu > li > a.select span  {
    border-bottom: solid 2px var(--cq-green);
}

.main-menu > li > ul > li  {
    display: inline-block;

    width: 200px;

    vertical-align: top;

    border-right: solid 1px var(--cq-border);

    text-align: left;
}

/* ← Template/Site.master */
#headPage .page-width-2 #mainMenu {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            min-width: 0;
            grid-column: 2;
            grid-row: 1;
            justify-self: stretch;
            justify-content: center;
            position: relative;
            z-index: 3;
            pointer-events: auto;
}

#mainMenu {
            list-style: none;
            padding-left: 0;
}

#mainMenu > li {
            margin-right: 0;
            flex: 0 0 auto;
            width: auto;
}

#mainMenu > li:last-child > a {
            margin-right: 0;
}

#mainMenu > li > a {
            position: relative;
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 0 0 2px;
            margin-right: clamp(18px, 1.8vw, 30px);
            width: auto;
            flex: 0 0 auto;
            color: var(--cq-text);
            font-family: 'Montserrat', 'Muli', sans-serif;
            font-weight: 600;
            font-size: 16px;
            line-height: 1;
            text-decoration: none;
            transition: color .2s ease;
            border-bottom: 0;
            box-shadow: none;
            background-image: none;
}

#mainMenu > li > a span {
            border-bottom: 0;
            box-shadow: none;
            background-image: none;
            text-decoration: none;
            position: relative;
            z-index: 1;
}

#mainMenu > li > a:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -14px;
            height: 2px;
            border-radius: 999px;
            background: var(--cq-green);
            opacity: 0;
            transform: scaleX(.92);
            transition: opacity .2s ease, transform .2s ease;
}

#mainMenu > li > a:hover,
        #mainMenu > li > a:focus {
            color: var(--cq-text);
            text-decoration: none;
            outline: none;
            border-bottom: 0;
            box-shadow: none;
}

#mainMenu > li > a.is-current:after {
            opacity: 1;
            transform: scaleX(1);
}

#mainMenu > li > a.is-current {
            color: var(--cq-text);
            font-weight: 600;
}