/* ==========================================================================
   01-nen NỀN & BIẾN TOÀN CỤC
   Tách từ index.html: <style> dòng 12–57 (giữ nguyên 100% nội dung).
   Reset, :root (bảng màu gold + nền), kiểu body/scrollbar.
   ========================================================================== */
:root {
  --bg: #0a0a0a;
  --bg-elev: #0f0f0f;
  --bg-card: #111111;
  --border: #1c1c1c;
  --border-strong: #2a2a2a;
  --text: #f5f5f5;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --text-4: #52525b;
  --navy: #1e3a8a;
  --navy-bright: #2563eb;
  --navy-text: #4f8ef7;
  --navy-dim: #1e2f5c;
  --gold: #d4af37;
  --gold-dim: #a8842a;
  --gold-bright: #e8c86a;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#scene {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 1; display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}
#scene.active { opacity: 1; }
#scene.globe-interactive { pointer-events: auto; cursor: grab; touch-action: none; }
#scene.globe-interactive.dragging { cursor: grabbing; }
@media (hover: none), (pointer: coarse) {
  #scene.globe-interactive { touch-action: pan-y; }
}