:root { color-scheme: dark; }
body { background:#0A0B10; }

/* Grain overlay - fixed, pointer-events none (perf-safe) */
.grain::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

.hairline{ border-color:rgba(255,255,255,.08); }

/* Treated imagery to lock dark-tech palette */
.img-treat{ filter:grayscale(1) contrast(1.05) brightness(.85); }

.nav-link{ position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:#1A7CD9; transition:width .3s ease; }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:#fff; }

.btn-mag{ transition:transform .35s cubic-bezier(.32,.72,0,1), background .3s ease; }

/* Atmospheric grid */
.hero-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 35% 35%, #000 25%, transparent 75%);
  mask-image:radial-gradient(ellipse 75% 60% at 35% 35%, #000 25%, transparent 75%);
}

/* Kinetic gradient accent text */
.shimmer{
  background:linear-gradient(100deg,#1A7CD9 0%,#6BB2F2 42%,#1A7CD9 72%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 5.5s linear infinite;
}
@keyframes shimmer{ to{ background-position:200% center; } }

/* Mascot float */
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.float{ animation:float 5.5s ease-in-out infinite; }

/* Mascot service orbit */
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
@keyframes counterSpin{ from{ transform:translate(-50%,-50%) rotate(0); } to{ transform:translate(-50%,-50%) rotate(-360deg); } }
.orbit{ animation:orbitSpin 26s linear infinite; }
.orbit-chip{ position:absolute; transform:translate(-50%,-50%); animation:counterSpin 26s linear infinite; }
@keyframes nodePulse{ 0%,100%{ box-shadow:0 10px 30px -8px rgba(26,124,217,.55); } 50%{ box-shadow:0 12px 40px -4px rgba(26,124,217,.85); } }
.orbit-node{ animation:nodePulse 3s ease-in-out infinite; }
@keyframes spinSlow{ to{ transform:rotate(-360deg); } }
.ring-rot{ animation:spinSlow 40s linear infinite; }

/* Marquee */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; align-items:center; width:max-content; animation:marquee 30s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* Spotlight cards */
.spotlight::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(26,124,217,.18), transparent 62%);
}
.spotlight:hover::before{ opacity:1; }
.spotlight > *{ position:relative; z-index:1; }

/* Ambient glow drift */
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(4%,-6%) scale(1.1); } }
.drift{ animation:drift 15s ease-in-out infinite; }

/* Mascot aura breathe */
@keyframes breathe{ 0%,100%{ opacity:.45; transform:scale(1); } 50%{ opacity:.8; transform:scale(1.15); } }
.breathe{ animation:breathe 4.5s ease-in-out infinite; }

/* Primary CTA pulse + shine sweep */
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 8px 30px -6px rgba(26,124,217,.5); } 50%{ box-shadow:0 8px 46px 2px rgba(26,124,217,.65); } }
.pulse-glow{ animation:pulseGlow 3.2s ease-in-out infinite; }
.btn-shine{ position:relative; overflow:hidden; }
.btn-shine::after{ content:""; position:absolute; top:0; left:-160%; width:55%; height:100%; transform:skewX(-20deg); pointer-events:none; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); }
.btn-shine:hover::after{ animation:shine .85s ease forwards; }
@keyframes shine{ to{ left:160%; } }

/* Nav entrance */
@keyframes navDown{ from{ opacity:0; transform:translateY(-18px); } to{ opacity:1; transform:none; } }
.nav-enter{ animation:navDown .8s cubic-bezier(.16,1,.3,1) both; }

/* Scroll progress (CSS scroll-driven) */
#progress{ transform:scaleX(0); transform-origin:0 50%; }
@supports (animation-timeline: scroll()){
  @keyframes growX{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  #progress{ animation:growX linear both; animation-timeline:scroll(root); }
}

/* Form fields (sub-pages) */
.field{ width:100%; background:#13151C; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:.85rem 1rem; color:#f4f4f5; font-size:.95rem; transition:border-color .2s, box-shadow .2s; }
.field::placeholder{ color:#6b7280; }
.field:focus{ outline:none; border-color:#1A7CD9; box-shadow:0 0 0 3px rgba(26,124,217,.22); }
.field.invalid{ border-color:#f0506e; box-shadow:0 0 0 3px rgba(240,80,110,.18); }
.field-label{ display:block; font-size:.8rem; color:#a1a1aa; margin-bottom:.45rem; font-weight:500; }

/* FAQ accordion (native details) */
details.faq{ border-bottom:1px solid rgba(255,255,255,.08); }
details.faq summary{ list-style:none; cursor:pointer; padding:1.3rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-weight:600; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary .chev{ transition:transform .3s ease; color:#1A7CD9; flex-shrink:0; }
details.faq[open] summary .chev{ transform:rotate(45deg); }
details.faq .faq-body{ padding:0 0 1.35rem; color:#a1a1aa; line-height:1.75; max-width:70ch; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn-mag{ transition:none; }
  html{ scroll-behavior:auto; }
  .marquee-track, .shimmer, .float, .drift, .breathe, .pulse-glow, .nav-enter, #progress, .orbit, .orbit-chip, .orbit-node, .ring-rot{ animation:none !important; }
  .shimmer{ color:#1A7CD9; }
  #progress{ display:none; }
  .btn-shine::after{ display:none; }
}

/* ============================================================
   Article body typography (nội dung bài viết blog)
   Tailwind reset xoá style heading mặc định -> khai báo lại
   ============================================================ */
.article-body > *:first-child{ margin-top:0; }
.article-body h2{ font-size:clamp(1.45rem,3vw,1.75rem); line-height:1.3; font-weight:700; color:#fff; letter-spacing:-.01em; margin:2.3rem 0 .9rem; }
.article-body h3{ font-size:clamp(1.2rem,2.4vw,1.35rem); line-height:1.35; font-weight:700; color:#fff; margin:1.9rem 0 .7rem; }
.article-body h4{ font-size:1.08rem; font-weight:600; color:#f4f4f5; margin:1.5rem 0 .6rem; }
.article-body p{ margin:0 0 1.15rem; }
.article-body a{ color:#6BB2F2; text-decoration:underline; text-underline-offset:3px; }
.article-body a:hover{ color:#1A7CD9; }
.article-body strong, .article-body b{ color:#fff; font-weight:600; }
.article-body ul, .article-body ol{ margin:0 0 1.2rem 1.45rem; }
.article-body ul{ list-style:disc; }
.article-body ol{ list-style:decimal; }
.article-body li{ margin:.45rem 0; }
.article-body li::marker{ color:#1A7CD9; }
.article-body img{ max-width:100%; height:auto; border-radius:14px; margin:1.5rem 0; }
.article-body figure{ margin:1.5rem 0; }
.article-body figcaption{ font-size:.85rem; color:#a1a1aa; text-align:center; margin-top:.5rem; }
.article-body blockquote{ border-left:3px solid #1A7CD9; padding:.5rem 0 .5rem 1.2rem; margin:1.5rem 0; color:#cbd5e1; font-style:italic; }
.article-body table{ width:100%; border-collapse:collapse; margin:1.3rem 0; font-size:.96rem; }
.article-body th, .article-body td{ border:1px solid rgba(255,255,255,.12); padding:.6rem .85rem; text-align:left; }
.article-body th{ background:rgba(255,255,255,.04); color:#fff; font-weight:600; }
.article-body h2 + p, .article-body h3 + p{ margin-top:0; }