:root {
  --bg-0: #04070c;
  --bg-1: #08111a;
  --bg-2: #0b1622;
  --text-0: #ecf3ff;
  --text-1: #c5d4e8;
  --text-2: #8ea4bf;
  --line: rgba(255,255,255,.08);
  --glass: rgba(255,255,255,.05);
  --glass-strong: rgba(255,255,255,.07);
  --glow: rgba(79,255,176,.2);
  --glow-2: rgba(56,178,255,.12);
  --accent: #4fffb0;
  --accent-2: #38b2ff;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 22px;
  --radius-sm: 16px;
  --max: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text-0);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(900px 520px at 14% 18%, rgba(79,255,176,.08), transparent 60%),
    radial-gradient(720px 520px at 82% 20%, rgba(56,178,255,.07), transparent 65%),
    radial-gradient(900px 700px at 56% 84%, rgba(38,100,255,.06), transparent 65%),
    linear-gradient(180deg,var(--bg-0) 0%, var(--bg-1) 40%, var(--bg-0) 100%);
  min-height:100vh;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

.container{
  width:min(var(--max), calc(100% - 28px));
  margin:0 auto;
}

.bg-orb{
  position:fixed;
  pointer-events:none;
  z-index:0;
  filter:blur(18px);
  opacity:.8;
}
.orb-1 {
  background: radial-gradient(circle, rgba(79,255,176,.22), transparent 68%);
}
.orb-2 {
  background: radial-gradient(circle, rgba(56,178,255,.14), transparent 68%);
}
.orb-3 {
  background: radial-gradient(circle, rgba(79,255,176,.1), transparent 68%);
}

.site-shell{position:relative;z-index:1}
.page{padding:22px 0 56px}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

@media (max-width:860px){
  .container{width:min(var(--max), calc(100% - 22px));}
}

@media (max-width:520px){
  .container{width:calc(100% - 16px);}
}
/* ================================================================
   FONT UPDATE — thay thế phần body{} và thêm heading style
   Tìm dòng   font-family:Inter,system-ui,...   trong main.css
   Thay bằng đoạn bên dưới
   ================================================================ */

/* 1. Tìm dòng này trong main.css: */
/*    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; */

/* 2. Thay bằng: */
/*    font-family:'DM Sans',system-ui,-apple-system,sans-serif; */


/* 3. Thêm đoạn này vào cuối main.css (sau phần media queries) */

/* ── TYPOGRAPHY ───────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Syne', system-ui, sans-serif;
  letter-spacing: -.02em;
}

.brand-mark {
  font-family: 'Syne', system-ui, sans-serif;
}

.btn-primary,
.btn {
  font-family: 'Syne', system-ui, sans-serif;
}
html {
  font-size: 17px;
}