/*!
 * base.css — hệ nền + hiệu ứng dùng chung cho TOÀN BỘ trang (trừ index.html).
 *
 * Nguồn chân lý thiết kế là <style> inline trong index.html — file này SAO CHÉP
 * giá trị từ đó (không refactor index để khỏi phải re-prerender file 265KB).
 * ⚠ Sửa màu/animation ở đây thì phải sửa cả index.html cho khớp.
 *
 * Khác biệt có chủ đích so với index: ambient dùng position:fixed (index dùng
 * absolute) vì dc.js ép body{height:100%} nên absolute sẽ neo sai.
 */

/* ═══════════ 1. Design tokens (đồng bộ index.html:34-40) ═══════════ */
:root {
  --page:#030712; --text1:#EAF1F8; --text2:#C2D0E0; --text3:#9FB0C2; --text4:#6E8298;
  --card:rgba(255,255,255,.03); --card2:rgba(255,255,255,.05);
  --bd:rgba(255,255,255,.07); --bd1:rgba(255,255,255,.1); --bd2:rgba(255,255,255,.14);
  --navbg:rgba(3,7,18,.55); --menubg:rgba(3,7,18,.92); --footbg:rgba(8,17,30,.5);
  --green:#4ADE80; --cyan:#22D3EE; --violet:#8B5CF6; --amber:#FBBF24;
}

/* ═══════════ 2. Ambient 4 quầng — do js/ambient.js chèn vào đầu <body> ═══════════ */
.ss-ambient { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.ss-ambient > i { position:absolute; display:block; border-radius:50%; filter:blur(20px); }
.ss-ambient .ab1 { top:-280px; left:-200px; width:900px; height:900px;
  background:radial-gradient(circle, rgba(46,125,255,.20), transparent 62%); }
.ss-ambient .ab2 { top:22%; right:-260px; width:820px; height:820px;
  background:radial-gradient(circle, rgba(74,222,128,.14), transparent 62%); }
.ss-ambient .ab3 { bottom:-220px; left:-160px; width:760px; height:760px;
  background:radial-gradient(circle, rgba(139,92,246,.14), transparent 64%); }
.ss-ambient .ab4 { bottom:8%; right:-120px; width:760px; height:760px;
  background:radial-gradient(circle, rgba(34,211,238,.12), transparent 64%); }

/* canvas hạt sáng — dưới nội dung (nội dung dùng z-index:2) */
canvas.ss-particles { position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:.6; }

/* trang dc.js có wrapper nền đục #030712 che mất ambient → cho trong suốt */
#dc-root > div[style*="background:var(--page)"],
#dc-root > div[style*="background:#030712"] { background:transparent !important; }

/* .bg-glow (2 quầng bản cũ) đã được .ss-ambient thay thế */
.bg-glow { display:none !important; }

/* ═══════════ 3. Viền phát sáng (index.html:75-79) ═══════════ */
@keyframes ssGlowRing { 0%,100% { opacity:.75; } 50% { opacity:1; } }
.ss-glow { position:relative; border-color:transparent !important;
  box-shadow:0 0 24px -8px rgba(34,211,238,.45), 0 0 60px -28px rgba(74,222,128,.4); }
.ss-glow::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.3px;
  background:linear-gradient(140deg, rgba(34,211,238,.85), rgba(74,222,128,.5) 38%, rgba(139,92,246,.45) 72%, rgba(34,211,238,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:5; animation:ssGlowRing 4s ease-in-out infinite; }
.ss-glow::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:2.4px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), #ffffff, #6FF0FF 30%, rgba(74,222,128,.7) 55%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:6; opacity:0; transition:opacity .35s ease;
  filter:drop-shadow(0 0 6px rgba(110,240,255,.9)); }
.ss-glow:hover::after { opacity:1; }
.ss-glow:hover { box-shadow:0 0 40px -4px rgba(34,211,238,.7), 0 0 100px -28px rgba(74,222,128,.6); }

/* ═══════════ 4. Viền chạy conic (index.html:80-87) ═══════════ */
.ss-beam-wrap { position:absolute; inset:0; border-radius:inherit; z-index:7;
  pointer-events:none; padding:2px; overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.ss-beam { position:absolute; top:50%; left:50%; width:150%; aspect-ratio:1;
  background:conic-gradient(transparent 0deg, transparent 232deg, rgba(34,211,238,.22) 286deg, #7BE5FF 332deg, #EAFEFF 350deg, #4ADE80 360deg);
  filter:drop-shadow(0 0 5px rgba(123,229,255,.85)); animation:ssBeamSpin 5s linear infinite; }
.ss-flow-ccw .ss-beam { animation-direction:reverse; }
@keyframes ssBeamSpin { from { transform:translate(-50%,-50%) rotate(0deg); }
                        to   { transform:translate(-50%,-50%) rotate(360deg); } }

/* ═══════════ 5. Reveal on scroll + nav underline (index.html:141-149) ═══════════ */
[data-reveal] { opacity:1; transform:none;
  transition:opacity .85s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1); }
[data-reveal].ss-pre { opacity:0; transform:translateY(36px); }
.ss-card-hover { transition:transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .5s ease, border-color .5s ease; }
.nav-links a { position:relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0;
  background:linear-gradient(90deg,#22D3EE,#4ADE80); transition:width .3s ease; }
.nav-links a:hover::after { width:100%; }

/* ═══════════ 6. Tôn trọng prefers-reduced-motion ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .ss-beam, .ss-glow::before { animation:none !important; }
  canvas.ss-particles { display:none; }
  [data-reveal], [data-reveal].ss-pre { opacity:1 !important; transform:none !important; transition:none; }
}
