/* ============================================================================
   LangMenu — nút Ngôn ngữ + nút Chế độ tối trên thanh đầu trang.

   [2026-08-19] Bóc khỏi mobile-v2.css: kiểu dáng cũ chỉ phủ tới 1559px, màn hình
   rộng hơn bấm không ra menu. File này dùng cho MỌI khổ màn hình — mọi con số của
   hai nút này chỉ nằm ở đây, đừng set lại ở trang khác (quy ước "thông số 1 chỗ").

   Cấu trúc:  <li class="cq-icon-btn cq-icon-btn--theme"> ... </li>
              <li class="cq-icon-btn cq-icon-btn--lang" id="cqLangBtn"> ... </li>
   ============================================================================ */

:root {
    --cq-lang-menu-w: 190px;    /* bề ngang bảng xổ */
    --cq-lang-code-size: 12px;  /* cỡ chữ mã ngôn ngữ (VI/EN/JA/ZH) */
    --cq-icon-btn-w: 36px;      /* Ô CỐ ĐỊNH cho 2 nút — mặt trăng và mặt trời rộng
                                   khác nhau, không khoá ô là bấm xong cả hàng xê chỗ */
}

/* --- Hai nút icon (chế độ tối + ngôn ngữ) ---
   ⚠ Phải viết ĐÚNG mức ưu tiên như luật cũ trong mobile-v2.css, nếu không luật kia
   đè lại và nút cao 40px thay vì 36px → bấm đổi icon là cả hàng xê chỗ.
   KHÔNG có nền phía sau: hai nút này chỉ là chữ/icon trần. */
.cq-icon-btn--theme > a,
.cq-icon-btn--lang > a,
#headPage .page-width-2 .menu-top.fr .cq-icon-btn--theme > a,
#headPage .page-width-2 .menu-top.fr .cq-icon-btn--lang > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cq-icon-btn-w);
    min-width: var(--cq-icon-btn-w);
    height: var(--cq-icon-btn-w);
    min-height: var(--cq-icon-btn-w);
    padding: 0;
    background: none;
    border-radius: 0;
    color: var(--cq-text);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

/* Icon và chữ mã ngôn ngữ NẰM TRONG CÙNG MỘT Ô — mặt trăng, mặt trời và chữ "VI"
   rộng khác nhau, không đóng khung thì đổi cái nào là xê cái đó. */
.cq-icon-btn--theme > a > i,
.cq-icon-btn--lang > a > span,
#headPage .page-width-2 .menu-top.fr .cq-icon-btn--theme > a > i,
#headPage .page-width-2 .menu-top.fr .cq-icon-btn--lang > a > span {
    display: block;
    width: var(--cq-icon-btn-w);
    height: var(--cq-icon-btn-w);
    line-height: var(--cq-icon-btn-w);
    text-align: center;
    font-size: 16px;
}

/* Rê chuột: chỉ sáng chữ lên, KHÔNG đổ nền */
.cq-icon-btn--theme > a:hover,
.cq-icon-btn--lang > a:hover {
    color: var(--cq-green);
}

/* --- nút: mã ngôn ngữ hiện thay cho icon --- */
.cq-icon-btn--lang > a > .cq-lang-code,
#headPage .page-width-2 .menu-top.fr .cq-icon-btn--lang > a > .cq-lang-code {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--cq-lang-code-size);
    font-weight: 700;
    letter-spacing: .02em;
}

/* hai nút này luôn hiện, mọi khổ màn hình */
#headPage .page-width-2 .menu-top.fr .cq-icon-btn--lang,
#headPage .page-width-2 .menu-top.fr .cq-icon-btn--theme {
    display: inline-flex !important;
}

/* --- bảng xổ xuống --- */
.cq-langmenu {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1300;
    min-width: var(--cq-lang-menu-w);
    padding: var(--cq-1) 0;
    border: 1px solid var(--cq-hairline-strong);
    border-radius: var(--cq-3);
    background: var(--cq-surface);
    box-shadow: 0 10px 28px rgba(18, 56, 91, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.cq-icon-btn--lang.is-open .cq-langmenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cq-langmenu__item {
    display: flex;
    align-items: center;
    gap: var(--cq-3);
    padding: var(--cq-3) var(--cq-4);
    color: var(--cq-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.cq-langmenu__item:hover {
    background: var(--cq-surface-2, rgba(18, 56, 91, .05));
}

/* mã ngôn ngữ đứng đầu mỗi dòng — rộng cố định để tên tiếng thẳng cột */
.cq-langmenu__code {
    width: 26px;
    color: var(--cq-text-2);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* dòng đang dùng */
.cq-langmenu__item.is-current {
    color: var(--cq-green);
}

.cq-langmenu__item.is-current .cq-langmenu__code {
    color: var(--cq-green);
}