/* ===== base.css — bien mau, nen, bo cuc chung, nav ===== */
:root{
  --bg1:#1b1140; --bg2:#241659; --bg3:#0e3a5c;
  --text:#eef2ff; --sub:#9fb0c9; --card:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.12); --accent:#7c5cff; --accent2:#22d3ee;
}
body.light{
  --bg1:#eef2ff; --bg2:#dbe4ff; --bg3:#cfeeff;
  --text:#1a1f3c; --sub:#5a6a8c; --card:rgba(255,255,255,.7);
  --border:rgba(20,30,80,.12); --accent:#5b3df5; --accent2:#0aa3c4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Arial,sans-serif;color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .4s,color .4s}
#bg{position:fixed;inset:0;z-index:0;background:linear-gradient(135deg,var(--bg1),var(--bg2) 45%,var(--bg3))}
.wrap{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:22px 18px 50px}
nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.logo{font-weight:800;font-size:19px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.links{display:flex;align-items:center;gap:14px;font-size:14px}
.links a{color:var(--sub);text-decoration:none}
.links a:hover{color:var(--text)}
#themeBtn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:999px;width:38px;height:38px;font-size:17px;cursor:pointer}