/* ==========================================================================
   PLAYRADARX — 6-LANGUAGE FONT SYNCHRONIZATION & SWITCHER SYSTEM
   Đồng bộ hóa Font chữ chuẩn cho 6 ngôn ngữ (1 Chính: VI + 5 Phụ: EN, ZH, JA, KO, RU)
   ========================================================================== */

:root {
  /* Stack Font đa ngôn ngữ hợp nhất (Hỗ trợ đầy đủ Tiếng Việt, Latin, Cyrillic, CJK Trung - Nhật - Hàn) */
  --prx-font-vi: 'Be Vietnam Pro', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --prx-font-en: 'Roboto', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --prx-font-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', 'Roboto', sans-serif;
  --prx-font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Roboto', sans-serif;
  --prx-font-ko: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Roboto', sans-serif;
  --prx-font-ru: 'Roboto', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --prx-heading-latin: 'Oswald', 'Be Vietnam Pro', 'Roboto', sans-serif;
  --prx-heading-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --prx-heading-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --prx-heading-ko: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;

  /* Mặc định: Ngôn ngữ chính Tiếng Việt (vi) */
  --font-main: var(--prx-font-vi);
  --font-heading: var(--prx-heading-latin);
}

/* 1. Ngôn ngữ chính: Tiếng Việt (VI) */
html[lang="vi"],
body[data-lang="vi"] {
  --font-main: var(--prx-font-vi);
  --font-heading: var(--prx-heading-latin);
}

/* 2. Ngôn ngữ phụ 1: Tiếng Anh (EN) */
html[lang="en"],
body[data-lang="en"] {
  --font-main: var(--prx-font-en);
  --font-heading: var(--prx-heading-latin);
}

/* 3. Ngôn ngữ phụ 2: Tiếng Trung Giản Thể (ZH) */
html[lang="zh"],
body[data-lang="zh"] {
  --font-main: var(--prx-font-zh);
  --font-heading: var(--prx-heading-zh);
  letter-spacing: 0.01em;
}

/* 4. Ngôn ngữ phụ 3: Tiếng Nhật (JA) */
html[lang="ja"],
body[data-lang="ja"] {
  --font-main: var(--prx-font-ja);
  --font-heading: var(--prx-heading-ja);
  letter-spacing: 0.01em;
}

/* 5. Ngôn ngữ phụ 4: Tiếng Hàn (KO) */
html[lang="ko"],
body[data-lang="ko"] {
  --font-main: var(--prx-font-ko);
  --font-heading: var(--prx-heading-ko);
  word-break: keep-all;
}

/* 6. Ngôn ngữ phụ 5: Tiếng Nga (RU - Cyrillic) */
html[lang="ru"],
body[data-lang="ru"] {
  --font-main: var(--prx-font-ru);
  --font-heading: var(--prx-heading-latin);
}

/* Đồng hóa toàn bộ phần tử văn bản & tiêu đề theo biến Font ngôn ngữ hiện hành */
html body {
  font-family: var(--font-main) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html body input,
html body button,
html body select,
html body textarea {
  font-family: var(--font-main) !important;
}

html body h1,
html body h2,
html body h3,
html body .section-title,
html body .logo-main,
html body .page-title,
html body .sidebar-widget-title,
html body .footer-col h4 {
  font-family: var(--font-heading) !important;
}

/* ==========================================================================
   MULTI-LANGUAGE SWITCHER DROPDOWN STYLES
   ========================================================================== */

.header-lang-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.btn-header-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  background: #141722;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  user-select: none;
}

.btn-header-lang:hover,
.header-lang-wrap.open .btn-header-lang {
  background: #1e2330;
  border-color: #8B19FF;
  color: #8B19FF;
}

.btn-header-lang .lang-flag {
  font-size: 15px;
  line-height: 1;
}

.btn-header-lang .lang-code {
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.btn-header-lang .lang-caret {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.header-lang-wrap.open .btn-header-lang .lang-caret {
  transform: rotate(180deg);
  color: #8B19FF;
}

/* Dropdown Menu Ngôn Ngữ */
.header-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 175px;
  background: #161a26;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 16px rgba(139, 25, 255, 0.08);
  padding: 6px;
  z-index: 10000;
  display: none;
  flex-direction: column;
  gap: 3px;
  animation: prxLangFadeIn 0.2s ease-out forwards;
}

.header-lang-wrap.open .header-lang-menu {
  display: flex;
}

@keyframes prxLangFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lang-item:hover {
  background: rgba(139, 25, 255, 0.12);
  color: #8B19FF;
}

.lang-item.active {
  background: rgba(139, 25, 255, 0.18);
  color: #8B19FF;
  font-weight: 700;
}

.lang-item .lang-item-flag {
  font-size: 16px;
  line-height: 1;
}

.lang-item .lang-item-name {
  flex: 1;
}

.lang-item .lang-check {
  font-size: 11px;
  color: #8B19FF;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.lang-item.active .lang-check {
  opacity: 1;
}

/* Ẩn hoàn toàn thanh công cụ và banner của Google Translate để giữ trọn vẹn giao diện PlayRadarX */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

body {
  top: 0px !important;
  position: static !important;
}

#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

font {
  background: transparent !important;
  box-shadow: none !important;
}

iframe.skiptranslate,
.goog-te-banner-frame.skiptranslate,
body>.skiptranslate {
  display: none !important;
}