/* ============================================================
   SAVINA · GIAO DIỆN CHỌN NGÔN NGỮ + HỖ TRỢ ĐỌC PHẢI SANG TRÁI
   ============================================================ */

#savinaLangPicker { position: relative; z-index: 400; font-family: Roboto, system-ui, sans-serif; }
#savinaLangPicker.in-nav { margin-inline-start: 12px; display: inline-flex; align-items: center; }
#savinaLangPicker.floating { position: fixed; top: 14px; inset-inline-end: 14px; z-index: 9998; }

#savinaLangBtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 11px;
  border: 1px solid rgba(24, 61, 47, .22); border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #183526;
  font: 800 11px/1 Roboto, system-ui, sans-serif; letter-spacing: .03em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease;
}
#savinaLangBtn:hover { background: #fff; border-color: rgba(24, 61, 47, .4); }
#savinaLangBtn:focus-visible { outline: 2px solid #b88945; outline-offset: 2px; }
.savina-lang-flag { font-size: 15px; line-height: 1; }
.savina-lang-code { font-weight: 800; }

#savinaLangMenu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: #fffdf8; border: 1px solid #ded7ca; border-radius: 16px;
  box-shadow: 0 18px 46px rgba(20, 35, 27, .18);
}
#savinaLangMenu[hidden] { display: none; }
#savinaLangMenu li { margin: 0; }
#savinaLangMenu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 11px;
  color: #173426; text-decoration: none;
  font: 600 13px/1.2 Roboto, system-ui, sans-serif;
}
#savinaLangMenu a:hover { background: #eef2ec; }
#savinaLangMenu a.is-active { background: #17382a; color: #fff; }
.savina-lang-name { flex: 1; }
.savina-lang-tag {
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; background: #b88945; color: #fff;
}
#savinaLangMenu a.is-active .savina-lang-tag { background: rgba(255, 255, 255, .25); }

/* Dải thông báo trạng thái dịch */
#savinaI18nBanner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9997;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #17382a; color: #e8efe9;
  font: 600 12px/1.45 Roboto, system-ui, sans-serif; text-align: center;
}
#savinaI18nBanner[data-kind="warn"] { background: #8a3b2c; }
#savinaI18nBanner[data-kind="note"] { background: rgba(23, 56, 42, .9); }

/* ------------------------------------------------------------
   TIẾNG Ả RẬP — đọc từ phải sang trái.
   Chỉ lật chiều đọc của chữ và bố cục dòng; KHÔNG lật bản đồ,
   biểu đồ hay ảnh vì lật chúng sẽ sai nội dung.
   ------------------------------------------------------------ */
html.savina-rtl body { direction: rtl; text-align: right; }
html.savina-rtl .vn-map-wrap,
html.savina-rtl svg,
html.savina-rtl canvas,
html.savina-rtl table,
html.savina-rtl .chart,
html.savina-rtl [data-no-translate] { direction: ltr; }
html.savina-rtl table { text-align: start; }
html.savina-rtl .bottom,
html.savina-rtl .mobile-bottom-nav,
html.savina-rtl .savina-support-nav { direction: ltr; }
/* Font Ả Rập dễ đọc hơn font Latin mặc định */
html.savina-rtl body,
html.savina-rtl h1, html.savina-rtl h2, html.savina-rtl h3,
html.savina-rtl p, html.savina-rtl li, html.savina-rtl a {
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  line-height: 1.85;
}

/* Trên màn hình hẹp, nút ngôn ngữ thu gọn còn lá cờ */
@media (max-width: 480px) {
  #savinaLangBtn { height: 32px; padding: 0 9px; }
  .savina-lang-code { display: none; }
}