@charset "UTF-8";
/* MONA Multilingual — switcher (frontend). Tông trắng MONA, chạy trên mọi theme.
   Cam #F79009 nhấn ngôn ngữ đang chọn · ink #1B1F2A · viền #e6e8ef. Style scope trong .mml-switcher. */
.mml-switcher{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;line-height:1.4;
  font-family:inherit;vertical-align:middle;}
.mml-switcher *{box-sizing:border-box;}
.mml-switcher__list{display:inline-flex;align-items:center;gap:5px;margin:0;padding:0;list-style:none;}
.mml-switcher__item{margin:0;padding:0;list-style:none;}
.mml-switcher__item a,
.mml-switcher__item span[aria-current]{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;line-height:1.2;
  text-decoration:none;color:#1B1F2A;border:1px solid #e6e8ef;background:#fff;
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;}
.mml-switcher__item a:hover{border-color:#F79009;background:#fff9f0;color:#1B1F2A;box-shadow:0 1px 2px rgba(20,24,40,.05);}
/* CHỮ TRẮNG TRÊN NỀN CAM — quy tắc thương hiệu, rules/brand-ui.md, và là chỗ nó bị làm sai
   nhiều lần nhất.

   Đo thật, để người sau khỏi "sửa lại cho đúng chuẩn": trắng trên #F79009 là 2,35:1, ink
   #1B1F2A là 7,01:1. Tức xét riêng con số thì ink THẮNG, và WCAG AA đòi 4,5:1 nên trắng
   không đạt. Đây vẫn là màu đã chốt vì nó là cặp màu của thương hiệu và ink trên nền cam bão
   hoà đọc ra xỉn dù tỉ số cao. Muốn vừa đúng thương hiệu vừa đạt AA thì phải làm TỐI NỀN CAM
   ở riêng chỗ này, không phải đổi chữ sang đen. */
.mml-switcher__item.is-active span[aria-current]{
  background:#F79009;border-color:#F79009;color:#fff;font-weight:700;cursor:default;}
/* A language with no version of THIS page. It stays clickable — the engine points it at that
   language's home — and is only dimmed, so the reader knows in advance they will not land on
   the same page. Dimmed rather than removed on purpose: a site translated only in part would
   otherwise offer no way at all into its other language. */
.mml-switcher__item.is-untranslated a{opacity:.55;border-style:dashed;}
.mml-switcher__item.is-untranslated a:hover{opacity:1;}
.mml-switcher__flag{width:20px;height:20px;border-radius:50%;object-fit:cover;display:inline-block;
  vertical-align:middle;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.mml-switcher__name{font-weight:600;white-space:nowrap;}

/* biến thể dọc (dropdown-ish) */
.mml-switcher--dropdown{padding:6px;border:1px solid #e6e8ef;border-radius:12px;background:#fff;
  box-shadow:0 2px 8px rgba(20,24,40,.06);align-items:stretch;}
.mml-switcher--dropdown .mml-switcher__list{flex-direction:column;align-items:stretch;gap:2px;width:100%;}
.mml-switcher--dropdown .mml-switcher__item a,
.mml-switcher--dropdown .mml-switcher__item span[aria-current]{border-color:transparent;border-radius:8px;justify-content:flex-start;}
.mml-switcher--dropdown .mml-switcher__item a:hover{background:#f5f6fa;box-shadow:none;}

/* ── the <select> variant ── */
.mml-switcher--select{display:inline-block;}

/* .mml-sel defaults to width:100% because it was written for admin forms. In a header it
   must hug its content instead — the label here is a short code (VI, EN), so a full-width
   control would be mostly empty space. */
.mml-switcher--select .mml-sel{width:auto;min-width:0;max-width:none;}

/* THE CONTROL CARRIES NO FRAME OF ITS OWN OUT HERE. Do not give it a resting border again.
   select.css draws the enhanced control as an admin form field — paper fill, 1px line, 9px
   radius, blue focus ring — which is right inside wp-admin and wrong on a visitor's page: it
   is a wp-admin widget standing in somebody's header. Worse, a theme that already wraps the
   switcher in its own container then shows TWO frames, and they do not even agree on shape.
   Measured on a live install: the theme's wrapper was a 999px pill and our box a 9px rectangle
   sitting inside it, which reads as a duplicated border rather than as one control.
   So: flag, code and caret at rest, and a pill only on hover/focus, where the visitor has to
   be told the thing is interactive. Whatever the theme put around it stays the only frame.
   Specificity is deliberate — every rule here outranks its counterpart in select.css, so the
   load order of the two stylesheets cannot decide the outcome. */
.mml-switcher--select .mml-sel__ctl{white-space:nowrap;min-height:0;
  padding:5px 27px 5px 11px;border:1px solid transparent;border-radius:999px;
  background:transparent;box-shadow:none;font-weight:600;}
.mml-switcher--select .mml-sel__ctl:hover,
.mml-switcher--select .mml-sel.is-focus .mml-sel__ctl,
.mml-switcher--select .mml-sel.is-open .mml-sel__ctl{
  border-color:transparent;background:rgba(20,24,40,.05);box-shadow:none;}

/* The bare <select>, i.e. before select.js has decorated it and on any page where the script
   never runs. `:not(.mml-sel__native)` stands down the moment the script takes over: the class
   below is more specific than select.css's visually-hidden rule, so without the exclusion this
   block would keep re-dressing an element that is supposed to have stopped existing visually.
   Height is declared because a theme's own select rules are what make one stand 58px tall next
   to a 40px menu. */
select.mml-switcher__select:not(.mml-sel__native),
.mml-switcher__select:not(.mml-sel__native){
  appearance:none;-webkit-appearance:none;
  padding:6px 30px 6px 13px;border:1px solid #e6e8ef;border-radius:999px;background-color:#fff;
  color:#1B1F2A;font:inherit;font-weight:600;line-height:1.2;height:auto;min-height:34px;
  box-sizing:border-box;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235b6472' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color .15s ease,box-shadow .15s ease;}
select.mml-switcher__select:not(.mml-sel__native):hover{border-color:#F79009;}
select.mml-switcher__select:not(.mml-sel__native):focus{outline:0;border-color:#F79009;
  box-shadow:0 0 0 3px rgba(247,144,9,.18);}
/* Danh sách dự phòng của <noscript> vẫn phải trông ra hồn, không phải bullet trần. */
.mml-switcher--select .mml-switcher__list{display:flex;gap:8px;margin:0;padding:0;flex-wrap:wrap;}