/* ============================================
   Design Tokens — XN Website
   ============================================ */
:root {
  --brand: #2563eb; --brand-hover: #1d4ed8;
  --brand-soft: rgba(37, 99, 235, 0.12); --brand-glow: rgba(37, 99, 235, 0.35);
  --bg: #f1f5f9; --bg-alt: #f8fafc; --card: #ffffff;
  --text: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-inverse: #ffffff;
  --border: #e2e8f0; --border-hover: #cbd5e1; --border-focus: #2563eb;
  --success: #16a34a; --success-soft: rgba(22,163,74,0.12);
  --warning: #f59e0b; --warning-soft: rgba(245,158,11,0.12);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,0.12);
  --info: #0ea5e9; --info-soft: rgba(14,165,233,0.12);
  --facebook: #1877f2; --tiktok: #000000; --shopee: #ee4d2d;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
  --font: 'Be Vietnam Pro', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --transition-fast: 150ms var(--ease-out);
  --container-max: 1200px; --container-padding: 20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:var(--font);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:var(--brand);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--brand-hover)}
img,svg{display:block;max-width:100%}
input,select,textarea,button{font-family:inherit;font-size:inherit}
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:4px}
::selection{background:var(--brand-soft);color:var(--text)}