/* =============================================================================
   Chọn ngôn ngữ cho trang đăng nhập / đăng ký
   -----------------------------------------------------------------------------
   Cùng giao diện + logic với dropdown ngôn ngữ ở topbar trang trong: UI tự dựng,
   điều khiển Google Translate ngầm qua .goog-te-combo + cookie googtrans.
   Thay cho <select> mặc định của Google (xấu và thừa hàng trăm ngôn ngữ) —
   danh sách rút gọn đúng bằng danh sách của topbar.

   Menu được JS chuyển ra <body> và định vị position:fixed: các form auth nằm
   trong container overflow:hidden (.wrap-login100, .card…) nên để menu tại chỗ
   sẽ bị cắt mất.
   ============================================================================= */

/* Google Translate: ẩn thanh banner + không đẩy body xuống khi đang dịch */
.skiptranslate iframe { display: none !important; }
.translated-ltr body { top: 0 !important; }

.lang-picker,
.lp-menu {
    --lp-bg: #fff;
    --lp-border: #e3e8f0;
    --lp-ink: #2a3145;
    --lp-ink-2: #4b5468;
    --lp-muted: #8b94a9;
    --lp-hover: #f2f5f9;
    --lp-primary: #5145e5;
    --lp-primary-soft: rgba(81, 69, 229, .1);
    font-family: inherit;
}

/* hàng chứa picker — thay chỗ .translate-wrapper cũ */
.lang-picker-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
}

.lang-picker { position: relative; display: inline-flex; }

/* nút pill: cờ + tên ngôn ngữ + caret */
.lang-picker .lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    background: var(--lp-bg);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    color: var(--lp-ink-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.lang-picker .lp-btn:hover { background: var(--lp-hover); }
.lang-picker .lp-flag { font-size: 17px; line-height: 1; }
.lang-picker .lp-name {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lang-picker .lp-caret {
    width: 11px;
    height: 11px;
    color: var(--lp-muted);
    transition: transform .2s;
}
.lang-picker.is-open .lp-caret { transform: rotate(180deg); }

/* host ẩn của Google Translate — chỉ giữ .goog-te-combo để điều khiển ngầm */
.lang-picker #button_translate {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* menu — JS đưa ra <body>, toạ độ do JS tính theo vị trí nút */
.lp-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    display: none;
    flex-direction: column;
    max-height: 360px;
    padding: 7px;
    background: var(--lp-bg);
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(20, 28, 55, .17);
    text-align: left;
}
.lp-menu.is-open { display: flex; animation: lpFadeIn .14s ease; }
@keyframes lpFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.lp-menu .lp-search {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 10px;
    margin: -7px -7px 5px;
    background: var(--lp-bg);
    border-bottom: 1px solid var(--lp-border);
    border-radius: 14px 14px 0 0;
}
.lp-menu .lp-search svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--lp-muted); }
.lp-menu .lp-search input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--lp-ink);
}
.lp-menu .lp-search input::placeholder { color: var(--lp-muted); }

.lp-menu .lp-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.lp-menu .lp-opt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-ink-2);
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.lp-menu .lp-opt .flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
.lp-menu .lp-opt:hover { background: var(--lp-hover); color: var(--lp-ink); }
.lp-menu .lp-opt.is-active {
    background: var(--lp-primary-soft);
    color: var(--lp-primary);
    font-weight: 700;
}
.lp-menu .lp-empty {
    display: none;
    padding: 12px 11px;
    font-size: 12.5px;
    color: var(--lp-muted);
    text-align: center;
}

/* dark mode (trang có bật .dark_mode trên body) */
body.dark_mode .lang-picker,
body.dark_mode .lp-menu {
    --lp-bg: #162236;
    --lp-border: rgba(255, 255, 255, .08);
    --lp-ink: #c3ccdb;
    --lp-ink-2: #a9b0c0;
    --lp-muted: #8b94a9;
    --lp-hover: #0c1322;
    --lp-primary: #60a5fa;
    --lp-primary-soft: rgba(96, 165, 250, .16);
}

@media (max-width: 480px) {
    .lang-picker .lp-name { max-width: 96px; }
}
