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

   Logo (nut that SVG) + ten web + khau hieu duoi logo.

   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 .page-width-2 #logo.cq-logo {


    order: 1;

    display: flex;

    align-items: center;

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

    margin: 0;
    margin-right: auto;
    float: none;
}

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


    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    min-height: 0;

    gap: 1px;
    text-align: left;
}

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


    display: none;
}

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


    display: block;

    margin: 0;
    color: var(--cq-text);
    font-family: 'Montserrat', sans-serif;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: .02em;

    text-transform: uppercase;
}

#headPage .page-width-2 #logo.cq-logo .cq-logo__l1,

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


    display: block;

    text-align: left;

    white-space: nowrap;
}

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


    width: 34px;

    height: 34px;
}


@media (max-width: 767px) {
    /* ← Template/HeaderBrand.ascx */
    #logo.cq-logo {

            gap: 10px;
    }

    #logo.cq-logo img,
        #logo.cq-logo .cq-knot {

            width: 46px;
            height: 46px;
    }

    #logo.cq-logo .cq-logo__text {

            min-height: 46px;
    }

    #logo.cq-logo .text {

            font-size: 16px;
            letter-spacing: 0.04em;
    }

    #logo.cq-logo .cq-logo__tagline {

            margin-top: var(--cq-1);
            font-size: 12px;
    }

}

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

        text-align: center;
        display: block;
        width: 200px;
        margin: var(--cq-1) 0px;
    }

    #logo span {

            font-size: 11px;
    }

    #logo span.text {

                font-size: 15px;
    }

    #logo img {

            margin: auto;
            width: 46px;
    }

}