/* Trang nội dung tĩnh + landing trang chủ — nền tối #1E1F22, accent xanh dương */

:root{
  --font-ui:"Outfit",gg sans,system-ui,sans-serif;
  --font-display:"Fraunces",Georgia,serif;
}

body.doc{
  font-family:var(--font-ui);
  margin:0;
  padding-bottom:72px;
  color:#dbdee1;
  min-height:100vh;
  background:var(--um-bg, #1e1f22);
}
body.doc.has-scene,
body.doc:not(.has-scene){
  background:
    radial-gradient(1000px 520px at var(--scene-glow-x, 12%) var(--scene-glow-y, -8%), rgba(58,160,239,.18), transparent 55%),
    radial-gradient(800px 420px at var(--scene-glow2-x, 88%) var(--scene-glow2-y, 0%), rgba(110,190,255,.12), transparent 50%),
    #1e1f22;
}

.doc-wrap{max-width:820px;margin:0 auto;padding:40px 24px 0}

.doc-head{margin-bottom:34px;padding-bottom:22px;border-bottom:1px solid #3f4147}
.doc-head h1{font-family:var(--font-display);font-size:2rem;margin:0 0 10px;color:#e8f4ff}
.doc-sub{margin:0;color:#949ba4;font-size:1rem;line-height:1.6}
.doc-updated{margin:12px 0 0;color:#6d7278;font-size:.82rem}
.doc-raw{margin:10px 0 0;font-size:.82rem;color:#6d7278}
.doc-raw a{color:#6ec1ff}

.doc-section{margin-bottom:32px}
.doc-section h2{font-size:1.2rem;margin:0 0 12px;color:#c8e7ff}
.doc-section h3{font-size:1rem;margin:0 0 8px;color:#b7d9f5}
.doc-section p{margin:0 0 12px;font-size:.94rem;line-height:1.75;color:#b5bac1}
.doc-section ul{margin:0 0 12px;padding-left:22px}
.doc-section li{font-size:.94rem;line-height:1.75;margin-bottom:6px;color:#b5bac1}
.doc-section a{color:#6ec1ff}
.doc-section code{
  background:#2b2d31cc;border:1px solid #3f4147;border-radius:5px;
  padding:1px 6px;font-size:.87em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#dbdee1;
}

.doc-code{
  background:#2b2d31cc;border:1px solid #3f4147;border-radius:9px;
  padding:12px 14px;margin:0 0 14px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;color:#dbdee1;
}

.doc-note,.doc-warn{
  border-left:3px solid #3aa0ef;
  background:rgba(43,45,49,.8);border-radius:0 9px 9px 0;
  padding:12px 14px;font-size:.9rem;
}
.doc-warn{border-left-color:#e36b6b}

.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.doc-card{
  background:#2b2d31cc;border:1px solid #3f4147;
  border-radius:14px;padding:16px;
}
.doc-card p{margin:0;font-size:.9rem}

.doc-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:12px}
.doc-table th,.doc-table td{
  text-align:left;vertical-align:top;padding:10px 12px;
  border-bottom:1px solid #3f4147;line-height:1.65;
}
.doc-table th{color:#949ba4;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.doc-table td:first-child{white-space:nowrap;color:#c8e7ff}

/* ── Landing ─────────────────────────────────────────────────────────────── */

body.landing{padding-bottom:0;overflow-x:hidden}

.land{position:relative;isolation:isolate}
.land-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{
  position:absolute;border-radius:50%;filter:blur(48px);
  animation:floaty 12s ease-in-out infinite;
}
.orb-a{width:420px;height:420px;left:-80px;top:40px;background:rgba(58,160,239,.22)}
.orb-b{width:360px;height:360px;right:-60px;top:120px;background:rgba(110,190,255,.16);animation-delay:-4s}
.orb-c{width:280px;height:280px;left:35%;bottom:8%;background:rgba(47,146,224,.12);animation-delay:-7s}
.grid-fade{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(110,190,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,190,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
}

@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

.land-hero,.land-features,.land-band,.land-legal{
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;padding:0 24px;
}

.land-hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  min-height:calc(100vh - 56px);padding-top:32px;padding-bottom:48px;
}

.land-brand{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem, 5.5vw, 4rem);line-height:1.12;margin:0 0 18px;
  color:#eaf6ff;
}
.land-lead{
  margin:0 0 28px;max-width:34rem;font-size:1.08rem;line-height:1.7;color:#a7b0bb;
}
.land-cta{display:flex;flex-wrap:wrap;gap:12px}

.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border-radius:999px;font-weight:700;font-size:.95rem;
  text-decoration:none;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary{
  color:#fff;background:linear-gradient(135deg,#3aa0ef,#1d7fd4);
  box-shadow:0 12px 28px rgba(40,140,220,.28);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(40,140,220,.36)}
.btn-ghost{
  color:#c8e7ff;background:rgba(255,255,255,.04);
  border:1px solid #3f4147;
}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}

.land-hero-visual{display:flex;justify-content:center}
.bot-stage{position:relative;width:min(360px,80vw);aspect-ratio:1;display:grid;place-items:center}
.bot-avatar{
  width:58%;height:58%;border-radius:50%;object-fit:cover;z-index:2;
  box-shadow:0 24px 50px rgba(40,120,200,.28);
  border:5px solid rgba(200,231,255,.35);
  animation:pulseSoft 4.5s ease-in-out infinite;
}
.bot-ring{
  position:absolute;inset:8%;border-radius:50%;
  border:2px solid rgba(80,170,240,.35);
  animation:spinSlow 18s linear infinite;
}
.bot-ring.delay{inset:0;border-style:dashed;animation-direction:reverse;animation-duration:26s;opacity:.7}

@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes pulseSoft{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.03)}
}

.land-features{padding:24px 24px 72px}
.land-features h2,.land-band h2{
  font-family:var(--font-display);font-size:clamp(1.6rem, 3vw, 2rem);margin:0 0 10px;color:#eaf6ff;
}
.land-features-lead{
  margin:0 0 28px;max-width:36rem;color:#a7b0bb;font-size:1.02rem;line-height:1.65;
}
.land-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 32px}
.land-feature{padding:0;background:transparent;border:0;box-shadow:none}
.land-feature h3{
  margin:0 0 8px;font-size:1.08rem;color:#c8e7ff;
  padding-top:14px;border-top:2px solid rgba(58,160,239,.45);
}
.land-feature p{margin:0;font-size:.92rem;line-height:1.65;color:#a7b0bb}

.land-band{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin:0 auto 48px;padding:28px 28px;
  background:linear-gradient(135deg, rgba(43,45,49,.8), rgba(35,55,75,.85));
  border:1px solid #3f4147;border-radius:22px;
}
.land-band p{margin:0;max-width:42rem;color:#a7b0bb;line-height:1.7}
.land-band code{
  background:#1e1f22;border:1px solid #3f4147;border-radius:6px;padding:1px 6px;
}

.land-legal{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  padding:8px 24px 48px;
}
.land-legal a{color:#949ba4;text-decoration:none;font-size:.9rem}
.land-legal a:hover{color:#6ec1ff}

@media (max-width:900px){
  .land-hero{grid-template-columns:1fr;min-height:auto;padding-top:28px;text-align:center}
  .land-lead{margin-left:auto;margin-right:auto}
  .land-cta{justify-content:center}
  .land-grid{grid-template-columns:1fr 1fr}
  .land-band{flex-direction:column;text-align:center}
}
@media (max-width:640px){
  .doc-wrap{padding:28px 18px 0}
  .doc-head h1{font-size:1.6rem}
  .doc-table td:first-child{white-space:normal}
  .land-grid{grid-template-columns:1fr}
  .land-brand{font-size:2.2rem}
}