/* Bo chon ngon ngu trong header. Cung co va mau voi nut tim kiem ngay canh. */
.wata-lang { position:relative; display:flex; align-items:center; flex:none; }
.wata-lang-toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:#102a43; font:inherit; font-size:15px; line-height:1; cursor:pointer; white-space:nowrap; }
.wata-lang-toggle:hover,
.wata-lang-toggle[aria-expanded=true] { background:#edf3ff; color:#175cff; }
.wata-lang-toggle:focus-visible { outline:2px solid #175cff; outline-offset:2px; }
.wata-lang-flag { display:block; width:20px; height:20px; flex:none; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(16,42,67,.12); }
.wata-lang-caret { flex:none; transition:transform .15s ease; }
.wata-lang.is-open .wata-lang-caret { transform:rotate(180deg); }

.wata-lang-list { position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:190px; margin:0; padding:8px; list-style:none; border-radius:12px; background:#fff; box-shadow:0 12px 32px rgba(16,42,67,.14), 0 0 0 1px rgba(16,42,67,.06); }
.wata-lang-list[hidden] { display:none; }
.wata-lang-list li { margin:0; }
.wata-lang-list a { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:8px; color:#175cff; font-size:15px; text-decoration:none; }
.wata-lang-list a:hover,
.wata-lang-list a:focus-visible { background:#edf3ff; outline:none; }
.wata-lang-list a[aria-current=true] { color:#102a43; font-weight:600; }

/* Duoi 1024px header chat: chi con co va mui ten, ten ngon ngu van day du trong danh sach. */
@media (max-width:1023px) {
  .wata-lang-toggle { gap:4px; padding:0 6px; }
  .wata-lang-name { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
}

/* GTranslate. Plugin chen CSS rieng luc chay, SAU stylesheet nay, voi bo chon dang
   .gt_container-<ma ngau nhien> .gt_switcher ... Vi vay moi quy tac duoi day them .wata-lang
   de uu tien cao hon mot bac. Ba cho phai sua: khung rong co dinh 173px, font Arial, va danh
   sach nam trong dong chay (position:relative) nen mo ra se day header dai xuong. */
/* HTML ban dau chi co khung rong; dwf.js dung nut sau khi trang da hien. Giu san cho bang be rong
   nut "Tieng Viet" de menu khong bi day sang trai luc tai trang. */
.wata-lang.wata-lang--gt { position:relative; min-height:44px; min-width:143px; justify-content:flex-end; }
.wata-lang.wata-lang--gt .gtranslate_wrapper { display:flex; align-items:center; }
.wata-lang.wata-lang--gt .gt_switcher { position:relative; width:auto; overflow:visible; font-family:inherit; font-size:15px; line-height:1; }
.wata-lang.wata-lang--gt .gt_switcher a { font-size:15px; }
.wata-lang.wata-lang--gt .gt_switcher a img { width:20px; height:20px; flex:none; opacity:1; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(16,42,67,.12); }

/* Nut dang chon: co, ten, mui ten sat nhau; cao 44px bang nut tim kiem. */
.wata-lang.wata-lang--gt .gt_switcher .gt_selected { background:transparent; }
.wata-lang.wata-lang--gt .gt_switcher .gt_selected a { position:relative; display:inline-flex; align-items:center; gap:8px; width:auto; min-height:44px; padding:0 30px 0 10px; border:0; border-radius:6px; color:#102a43; box-sizing:border-box; white-space:nowrap; }
.wata-lang.wata-lang--gt .gt_switcher .gt_selected a:after { top:50%; right:10px; width:12px; height:12px; margin-top:-6px; background-size:10px; }
.wata-lang.wata-lang--gt .gt_switcher .gt_selected a:hover,
.wata-lang.wata-lang--gt .gt_switcher .gt_selected a.open { background:#edf3ff; color:#175cff; }
.wata-lang.wata-lang--gt .gt_switcher .gt_selected a:focus-visible { outline:2px solid #175cff; outline-offset:2px; }

/* Danh sach noi len tren noi dung, can phai voi nut. */
.wata-lang.wata-lang--gt .gt_switcher .gt_option { position:absolute; top:calc(100% + 8px); right:0; width:auto; min-width:190px; max-height:none; padding:0; border:0; border-radius:12px; background:#fff; box-shadow:0 12px 32px rgba(16,42,67,.14), 0 0 0 1px rgba(16,42,67,.06); box-sizing:border-box; }
.wata-lang.wata-lang--gt .gt_switcher .gt_option a { display:flex; align-items:center; gap:12px; min-height:44px; margin:0 8px; padding:0 12px; border-radius:8px; color:#175cff; white-space:nowrap; }
.wata-lang.wata-lang--gt .gt_switcher .gt_option a:first-child { margin-top:8px; }
.wata-lang.wata-lang--gt .gt_switcher .gt_option a:last-child { margin-bottom:8px; }
.wata-lang.wata-lang--gt .gt_switcher .gt_option a:hover,
.wata-lang.wata-lang--gt .gt_switcher .gt_option a:focus-visible { background:#edf3ff; outline:none; }
/* Plugin dat chieu cao inline tinh theo dong 24px cua no (91px), cat mat dong 44px cua ta. */
.wata-lang.wata-lang--gt .gt_switcher .gt_option[style*="block"] { height:auto !important; }
/* Thiet ke liet ke ca ngon ngu dang dung; plugin mac dinh an muc nay. */
.wata-lang.wata-lang--gt .gt_switcher .gt_option a.gt_current { display:flex; color:#102a43; font-weight:600; }

/* Duoi 1024px header chat: con co va mui ten. Chu van nam trong DOM cho trinh doc man hinh. */
@media (max-width:1023px) {
  .wata-lang.wata-lang--gt { min-width:44px; }
  .wata-lang.wata-lang--gt .gt_switcher .gt_selected a { gap:0; padding:0 22px 0 6px; font-size:0; }
  .wata-lang.wata-lang--gt .gt_switcher .gt_selected a:after { right:6px; width:10px; background-size:9px; }
}
/* 375px: logo 160 + Menu + tim kiem + bo chon + khoang cach vuot 335px nen header rot dong.
   Thu logo cho vua mot hang. */
@media (max-width:399px) {
  .wata-header__brand img { width:132px; }
}

@media (prefers-reduced-motion:reduce) {
  .wata-lang-caret { transition:none; }
}