/* ==========================================================================
   Header · icons — BẢN DÙNG CHUNG (cả máy tính lẫn điện thoại)

   Cụm icon: chế độ tối · ngôn ngữ (kèm bảng xổ) · tìm kiếm · ba gạch.

   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/HeaderIcons/header-icons.css */
/* ============================================================================
   HeaderIcons — CỤM ICON TRÊN THANH ĐẦU TRANG
   (tìm kiếm · chế độ tối · ngôn ngữ · menu) + bảng xổ chọn ngôn ngữ.

   [2026-08-19] GOM VỀ MỘT MỐI. Trước đây kiểu dáng nằm ở hai nơi: mobile-v2.css
   giữ 9 quy tắc với selector rất dài (#headPage .page-width-2 .menu-top.fr …),
   nên mọi sửa ở file khác đều bị đè và phải viết selector dài hơn nữa để chống
   lại — tức là VÁ. Nay tất cả ở đúng file này, selector ngắn, sửa là ăn.

   Mọi số đo của cụm khai ở :root ngay dưới — đừng set lại ở trang nào khác.
   Nạp sau Theme.css, trước mobile-v2.css.
   ============================================================================ */

:root {

    --cq-icon-btn-w: 36px;      /* ô vuông của MỖI nút — khoá cứng để đổi icon
                                   (mặt trăng ↔ mặt trời) không xê cả hàng */
    --cq-icon-size: 16px;       /* cỡ icon + cỡ chữ mã ngôn ngữ */
    --cq-lang-menu-w: 190px;    /* bề ngang bảng xổ ngôn ngữ */
}

/* --------------------------------------------------------------------------
   1. Ô NÚT — cả bốn nút cùng một khuôn
   -------------------------------------------------------------------------- */
.cq-icon-btn {

    position: relative;
}

.cq-icon-btn > 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);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--cq-text);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

/* Icon và chữ "VI" nằm trong CÙNG một ô: ba thứ này rộng khác nhau, không đóng
   khung thì đổi cái nào là lệch cái đó.
   ⚠ position/top phải trả về mặc định: Reponsive.css có
   ".menu-top li a i {
 position: relative; top: 5px
}

" đẩy icon tụt 5px.
   vertical-align phải về 0: bộ icon SVG (.cq-ico) đặt -.2em làm icon tụt thêm. */
.cq-icon-btn > a > i,
.cq-icon-btn > a > span {

    display: block;
    width: var(--cq-icon-btn-w);
    height: var(--cq-icon-btn-w);
    font-size: var(--cq-icon-size);
    line-height: var(--cq-icon-btn-w);
    text-align: center;
    position: static;
    top: auto;
    vertical-align: 0;
}

.cq-icon-btn > a:hover {

    color: var(--cq-green);
}

/* --------------------------------------------------------------------------
   2. NÚT CHẾ ĐỘ TỐI — hai icon nằm sẵn, CSS chọn cái nào hiện
   Sáng → mặt trăng (bấm để sang tối). Tối → mặt trời (bấm để về sáng).
   Không đổi class bằng JS: bộ icon SVG vẽ theo class, đổi là icon lệch/mất.
   -------------------------------------------------------------------------- */
.cq-icon-btn--theme > a > .cq-theme-ico--sun {

    display: none;
}

html.cq-dark .cq-icon-btn--theme > a > .cq-theme-ico--sun {

    display: block;
}

html.cq-dark .cq-icon-btn--theme > a > .cq-theme-ico--moon {

    display: none;
}

/* --------------------------------------------------------------------------
   3. NÚT NGÔN NGỮ — mã ngôn ngữ (VI/EN/JA/ZH) thay cho icon
   -------------------------------------------------------------------------- */
.cq-icon-btn--lang > a > .cq-lang-code {

    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   4. BẢNG XỔ CHỌN NGÔN 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: var(--cq-shadow-pop);
    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);
}

/* 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,
.cq-langmenu__item.is-current .cq-langmenu__code {

    color: var(--cq-green);
}

/* --------------------------------------------------------------------------
   5. HIỆN Ở KHỔ NÀO
   Nút chế độ tối + ngôn ngữ: MỌI khổ màn hình.
   Nút tìm kiếm + ba gạch: chỉ điện thoại — luật ẩn/hiện của hai nút đó nằm ở
   Content/Styles/mobile-v2.css (file lo giao diện điện thoại), không đặt ở đây.
   -------------------------------------------------------------------------- */
.cq-icon-btn--theme,
.cq-icon-btn--lang {
    display: inline-flex;
    align-items: center;
}

/* Hai nút này chỉ dùng ở khổ hẹp — ẩn mặc định (chuyển từ mobile-v2.css) */
.cq-icon-btn--search,
.cq-icon-btn--menu {
    display: none;
}