/* =============================================================
   Talent Gate — nút chuyển ngôn ngữ VI / EN (module Client).
   Dùng chung cho: shell đăng nhập (_Topbar), Landing page và trang Đăng nhập.
   Tách file riêng để không phải sửa app-shell.css / landing.css / dang-nhap.css.
   Biến màu (--line, --muted, --ink, --orange...) lấy từ theme; có giá trị dự phòng
   cho trang public không nạp app-shell.css.
   ============================================================= */
.tg-lang {
    display: inline-flex;
    align-items: center;
    flex: none;
    border: 1px solid var(--line, #ECEDF1);
    background: #fff;
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}

.tg-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--muted, #838a96);
    text-decoration: none;
    transition: .2s var(--ease, cubic-bezier(.22,.61,.36,1));
}

.tg-lang-btn:hover {
    color: var(--ink, #1E2330);
    background: var(--bg, #F6F7F9);
    text-decoration: none;
}

/* Ngôn ngữ đang dùng */
.tg-lang-btn.on,
.tg-lang-btn.on:hover {
    background: var(--orange, #F15A22);
    color: #fff;
}

/* Trên nền tối (header landing khi cuộn / panel thương hiệu trang đăng nhập) */
.tg-lang.on-dark {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.28);
}

.tg-lang.on-dark .tg-lang-btn {
    color: rgba(255,255,255,.82);
}

.tg-lang.on-dark .tg-lang-btn:hover {
    background: rgba(255,255,255,.16);
    color: #fff;
}

@media (max-width: 520px) {
    .tg-lang-btn {
        min-width: 30px;
        height: 27px;
        padding: 0 6px;
        font-size: 11px;
    }
}