/* LOL RUN — style dùng chung cho index.html và policy.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #05070f;
  --bg2:     #0a1020;
  --panel:   rgba(255,255,255,.045);
  --line:    rgba(255,255,255,.09);
  --text:    #eaf0ff;
  --muted:   #97a6c8;
  --gold:    #f5c04a;
  --gold-hi: #ffe9a8;
  --gold-lo: #c98a1a;
  --blue:    #2f7bff;
  --cyan:    #3ee6ff;
}

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }

/* ───── Thanh điều hướng ───── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,7,15,.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .6px; font-style: italic; }
.brand img { width: 38px; height: 38px; border-radius: 9px; mix-blend-mode: screen; }
.nav-r { display: flex; align-items: center; gap: 22px; }
.nav ul { display: flex; gap: 26px; list-style: none; font-size: .92rem; color: var(--muted); font-weight: 600; }
.nav ul a:hover { color: var(--gold); }
@media (max-width: 720px) { .nav ul li:not(.keep) { display: none; } }

/* ───── Ô chọn ngôn ngữ ───── */
.langsel { position: relative; display: inline-flex; align-items: center; }
.langsel select {
  appearance: none; -webkit-appearance: none;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 30px 8px 12px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: border-color .2s;
}
.langsel select:hover { border-color: var(--gold); }
.langsel select option { background: #0a1020; color: #eaf0ff; }
.langsel::after { content: "▾"; position: absolute; right: 11px; pointer-events: none; color: var(--muted); font-size: .8rem; }

/* Chờ áp ngôn ngữ xong mới hiện trang, tránh nháy tiếng Việt rồi mới đổi. Lớp này do JS thêm,
   và có đồng hồ dự phòng gỡ ra, nên tắt JS hoặc lỗi tải thì trang vẫn hiện. */
html.i18n-pending body { visibility: hidden; }

/* Tiếng Hàn / Trung: chữ nghiêng in hoa và giãn chữ âm chỉ hợp chữ Latin, với CJK sẽ bị méo */
html:lang(ko) h1, html:lang(zh) h1,
html:lang(ko) .sec h2, html:lang(zh) .sec h2,
html:lang(ko) .band h2, html:lang(zh) .band h2,
html:lang(ko) .ticker span, html:lang(zh) .ticker span,
html:lang(ko) .doc h1, html:lang(zh) .doc h1 { font-style: normal; letter-spacing: 0; }
html:lang(ko) body { word-break: keep-all; }
html:lang(zh) body { line-break: strict; }

/* ───── Nút ───── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 14px;
  font-weight: 800; font-size: 1rem; letter-spacing: .3px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .2s, filter .2s, border-color .2s, color .2s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo));
  color: #2a1a00;
  box-shadow: 0 8px 28px rgba(245,192,74,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(245,192,74,.42), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-ghost { background: var(--panel); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn[aria-disabled="true"] { opacity: .6; pointer-events: none; filter: grayscale(.25); }

/* ───── Chân trang ───── */
.foot { border-top: 1px solid var(--line); background: #04060c; padding: 44px 0 30px; color: var(--muted); font-size: .9rem; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
.foot .brand { color: var(--text); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 600; }
.foot nav a:hover { color: var(--gold); }
.foot small { display: block; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .78rem; line-height: 1.7; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}