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

   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/Site.css */
*/



.page-width-2 {


    width: 1340px;

    margin: auto;
    position: relative;
}

#headPage {


    border-bottom: solid 1px var(--cq-border);
    position: fixed;

    margin-bottom: 10px;
    text-align: center;

    top: 0px;

    left: 0px;

    background: var(--cq-surface);
    width: 100%;

    z-index: 111;
}

.menu-top {


    list-style: none;

    margin: 0px;
    padding: 0px;
    margin-top: 10px;
}

/* [2026-08-19] BO "display: inline-block" o day.
   Day la luat co tu ban goc, ap cho MOI muc trong hang phai. No manh hon luat mot
   lop cua tung module (vi co ca lop lan the), nen module bao "an nut ba gach" thi
   luat nay van ep hien -> nut dien thoai lo tren may tinh.
   Khung chi giu "position: relative" (de menu con dinh dung cho). Muc nao hien hay
   an, module cua muc do tu khai. */
.menu-top li {
        position: relative;
}

.menu-top li a {


            color: var(--cq-text);
            vertical-align: top;

            line-height: 20px;
}

.menu-top > li > a {


        font-size: 14px;

        line-height: 40px;
}

.menu-top li a span {


        margin-left: 10px;
}

.menu-top.fr li a {


        margin-left: 10px;
}

.menu-top ul {


    list-style: none;

    margin: 0px;
    padding: 0px;
    position: absolute;

    top: 100%;

    right: -10px;

    width: 180px;

    background: var(--cq-light);
    z-index: 1;

    display: none;
}

.menu-top li:hover > ul {


    display: block;
}

.menu-top ul li {


    margin: 0px;
    padding: 5px 10px;
    display: block;

    text-align: left;
}

.menu-top ul li a {


        display: block;

        margin-left: 0px;
        padding: 0px;
}

.menu-top ul li a span {


            margin-left: 0px;
}


@media (min-width: 1280px) and (max-width: 1559px) {
    /* ← Content/Styles/mobile-v2.css */
    #headPage .page-width-2 {


        grid-template-columns: auto 1fr 0 auto;
    }

}

/* ← Template/Site.master */
#headPage .page-width-2 {

            display: grid;
            width: 100vw;
            max-width: 100vw;
            margin-left: calc(50% - 50vw);
            padding-left: var(--home-content-gutter, 120px);
            padding-right: var(--home-content-gutter, 120px);
            box-sizing: border-box;
            grid-template-columns: auto 1fr clamp(280px, 24vw, 360px) auto;
            align-items: center;
            column-gap: clamp(20px, 2.4vw, 40px);
            position: relative;
            z-index: 2;
}

#headPage .page-width-2 #logo.cq-logo {

            float: none;
            margin: 0;
            width: auto;
            align-self: center;
            grid-column: 1;
            grid-row: 1;
            justify-self: start;
            position: relative;
            z-index: 3;
}

#headPage .page-width-2 .form-search.form-top {

            width: 100%;
            max-width: 360px;
            margin: 0;
            align-self: center;
            grid-column: 3;
            grid-row: 1;
            justify-self: stretch;
            position: relative;
            z-index: 3;
}

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

            float: none;
            display: flex;
            align-items: center;
            margin: 0;
            margin-top: 0;
            padding: 0;
            list-style: none;
            gap: 0;
            flex: 0 0 auto;
            margin-right: 0;
            grid-column: 4;
            grid-row: 1;
            justify-self: end;
            position: relative;
            z-index: 4;
}

/* [2026-08-19] KHUNG KHONG QUYET DINH AN/HIEN CUA CON.
   Truoc day luat nay dat display:inline-flex cho MOI muc trong hang phai, nen
   luat "an nut dien thoai" ben icons.css bi de -> nut ba gach lo ca tren may
   tinh. Nay khung chi lo canh le; muc nao hien hay an do module cua no khai. */
#headPage .page-width-2 .menu-top.fr > li {

            align-items: center;
            margin: 0;
            position: relative;
}

#headPage .page-width-2 .menu-top.fr > li > a,
        #headPage .page-width-2 .menu-top.fr > li > span {

            display: inline-flex;
            align-items: center;
            min-height: 40px;
}

#headPage .page-width-2 .clear {

            display: none;
}


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

        width: 100%;
        padding: 0 20px;
    }

}