/* ==========================================================================
   Header · shell — BẢN DÙNG CHUNG (cả máy tính lẫ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/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;
}

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

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

}

/* [2026-08-19] Tra ve DUNG CHUNG: chieu cao 40px cua cac muc trong hang nut, dien thoai cung can (boc nham sang ban may tinh lam nut tut con 30px). */
#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;
}