/* Ô chọn ngôn ngữ (header + phần tử trong trình dựng). TÁCH RA tệp riêng, nạp bất cứ khi nào site có từ 2 ngôn ngữ:
   ub.css chỉ được nạp khi trang CÓ nội dung dựng, mà ô ngôn ngữ nằm ở HEADER — trang thường không có ub.css nên
   ô mất hết định dạng (cờ phình to cỡ gốc, danh sách xổ xuống hiện sẵn). Mọi biến màu có giá trị dự phòng vì
   `--ink`/`--muted`/`--card` cũng do ub.css/style-customizer khai và có thể chưa có ở trang thường. */
.ub-lang{display:flex;align-items:center;gap:7px;flex:none}
.ub-lang-i{flex:none;opacity:.9}
.ub-lang-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.ub-lang-a{
  display:block;padding:4px 8px;border-radius:7px;
  font-size:14px;font-weight:500;color:var(--muted,#6b7280);white-space:nowrap
}
.ub-lang-a:hover{color:var(--ink,#161310);background:var(--card,#f4f1ea)}
.ub-lang-a.is-on{color:var(--ink,#161310);font-weight:700}


/* Chọn ngôn ngữ — thẻ thả xuống kiểu Flatsome (cờ + tên + mũi tên). Chỉ CSS: mở bằng :hover (chuột),
   :focus-within (Tab và chạm trên điện thoại — vùng bọc có tabindex nên chạm là nhận focus).
   Cầu nối `::before` lấp khe giữa nút và thẻ để rê chuột xuống không làm thẻ tắt (cùng bài học menu). */
.ub-lang-flag{display:inline-flex;align-items:center;flex:none;line-height:0;width:18px}
.ub-lang-flag img{width:18px!important;height:auto!important;max-width:none;display:block;border-radius:2px}
.ub-lang--card{position:relative}
.ub-lang-dd{position:relative;outline:none}
.ub-lang-cur{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink,#161310);white-space:nowrap}
.ub-lang-dd:hover .ub-lang-cur,.ub-lang-dd:focus-within .ub-lang-cur{background:var(--card,#f4f1ea)}
.ub-lang-caret{flex:none;opacity:.7;transition:transform .15s}
.ub-lang-dd:hover .ub-lang-caret,.ub-lang-dd:focus-within .ub-lang-caret{transform:rotate(180deg)}
.ub-lang-menu{
  position:absolute;top:100%;right:0;z-index:70;min-width:170px;margin:6px 0 0;padding:6px;list-style:none;
  background:#fff;border-radius:10px;box-shadow:0 16px 32px -12px rgba(15,15,15,.22),0 0 0 1px rgba(15,15,15,.06);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility 0s linear .22s
}
.ub-lang-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.ub-lang-dd:hover .ub-lang-menu,.ub-lang-dd:focus-within .ub-lang-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ub-lang--card .ub-lang-a{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:7px;font-size:14px;font-weight:500;color:#1f2937}
.ub-lang--card .ub-lang-a:hover{background:#f9f5ec;color:var(--ink,#161310)}
.ub-lang--card .ub-lang-a.is-on{font-weight:700}


/* Màu chữ ô chọn ngôn ngữ: biến `--ub-lang-c` (nhãn hiện tại) và `--ub-lang-mc` (danh sách xổ xuống) chỉ có khi người dùng
   đặt màu. Nhãn mặc định KẾ THỪA màu vùng chứa (thanh trên xanh có chữ sáng thì ô ngôn ngữ sáng theo) thay vì cố định
   màu đậm — trước đây chữ đậm nằm trên nền xanh khó đọc và không đổi được. Nền khi rê chuột dùng màu trong suốt để hợp mọi nền. */
.ub-lang--card .ub-lang-cur{color:var(--ub-lang-c,inherit)}
.ub-lang-dd:hover .ub-lang-cur,.ub-lang-dd:focus-within .ub-lang-cur{background:rgba(127,127,127,.18)}
.ub-lang--card .ub-lang-a{color:var(--ub-lang-mc,#1f2937)}
.ub-lang--card .ub-lang-a:hover{color:var(--ub-lang-mc,var(--ink,#161310))}
.ub-lang:not(.ub-lang--card) .ub-lang-a{color:var(--ub-lang-c,var(--muted))}
.ub-lang:not(.ub-lang--card) .ub-lang-a:hover,.ub-lang:not(.ub-lang--card) .ub-lang-a.is-on{color:var(--ub-lang-c,var(--ink,#161310))}
.ub-lang:not(.ub-lang--card) .ub-lang-i{color:var(--ub-lang-c,currentColor)}