/* ==========================================================================
   Header · shell — BẢN ĐIỆN THOẠI

   Khung thanh dau trang: luoi bo cuc, dinh tren cuon, chieu cao, nen, duong ke.

   Số đo dùng thang --cq-1..6, màu dùng token (Theme.css).
   Bản máy tính và bản điện thoại TÁCH HẲN — không bản nào đè bản nào.
   Dòng "← file cũ" cho biết luật đó gom về từ đâu.
   ========================================================================== */


/* ← Content/Styles/mobile-v2.css */
#headPage {


    background: var(--cq-surface);
    border-bottom: 1px solid var(--cq-hairline);
}

#headPage #mainMenu {


    display: none;
}

#headPage .page-width-2 .menu-top.fr {


    order: 3;

    display: flex;

    align-items: center;

    gap: var(--cq-1);
    flex: 0 0 auto;

    margin: 0;
    padding: 0;
    float: none;

    list-style: none;
}


@media (max-width: 767px) {
    /* ← Template/Site.master */
    .page-width-2.header-guest {

                display: flex;
                align-items: center;
                gap: var(--cq-2);
                flex-wrap: nowrap;
                text-align: left;
                min-height: 52px;
                padding-top: 6px;
                padding-bottom: 6px;
    }

    .page-width-2.header-guest #logo.cq-logo {

                order: 1;
                float: none;
                margin: 0;
                flex: 0 0 auto;
                justify-content: flex-start;
                width: auto;
                padding: 0;
    }

    .page-width-2.header-guest #logo.cq-logo img {

                width: 34px;
                height: 34px;
                margin-right: 0;
    }

    .page-width-2.header-guest #logo.cq-logo .cq-logo__text {

                display: none;
    }

}

@media screen and (max-width: 1024px) {
    /* ← Content/Styles/Reponsive.css */
    .page-width, .page-width-2 {

        padding: 0 10px;
    }

}

@media screen and (max-width: 500px) {
    /* ← Content/Styles/Reponsive.css */
    .menu-top li a i {

        float: right;
        position: relative;
        top: 5px;
    }

}

@media screen and (max-width: 560px) {
    /* ← Content/Styles/Reponsive.css */
    #headPage .a-center {

        text-align: left;
    }

}

@media screen and (max-width: 680px) {
    /* ← Content/Styles/Reponsive.css */
    #headPage {

        position: -webkit-sticky;
        position: -moz-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        position: sticky;
        margin-bottom: 0px;
    }

    .menu-top .glyphicon-triangle-bottom:before {

        content: "\e236";
        font-size: 21px;
    }

    .menu-top ul li.hide-on-desk {

        display: block;
    }

    .menu-top ul li {

        border-bottom: solid 1px var(--cq-surface);
        padding: 0px;
    }

    .menu-top ul li a {

            padding: 10px;
    }

}

@media screen and (max-width: 820px) {
    /* ← Content/Styles/Reponsive.css
       [2026-08-19] Luat goc an MOI the span trong hang nut -> nuot luon chu ma
       ngon ngu (VI/EN/JA/ZH), nut ngon ngu thanh o trong, nguoi dung tuong mat nut.
       Nay chi an dung chu cua nut dang nhap - dung y ban dau cua luat nay. */
    .menu-top > li > a .auth-text {
        display: none;
    }

    .menu-top ul li a {

        font-size: 14px;
    }

    .menu-top ul {

        left: auto;
    }

    .menu-top li a {

        font-size: 18px;
    }

}

/* Khung header ở khổ hẹp (chuyển từ mobile-v2.css) */
#headPage .page-width-2 {
    display: flex;
    align-items: center;
    gap: var(--cq-2);
    flex-wrap: nowrap;
    width: auto;
    max-width: none;
    min-height: var(--cq-navbar-h);
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--cq-3);
    padding-right: var(--cq-3);
    grid-template-columns: none;
    column-gap: 0;
}