/* ONMATE inner pages — "Nebula" colour family shared with the home page.
   1. page canvas + sky (indigo/violet nebula, three star layers)   2. glass-like surfaces   3. space scenes (one per page group, built by /nebula.js)
   Home (body.pw-home) and the 3D journey (body.pw-journey) keep their own sky and are excluded. */

/* ---------- 1. canvas + sky ---------- */
body:not(.pw-home):not(.pw-journey){--bg-night:#050819;--bg:#070b2c;--bg-alt:#0b0f38;--section-veil:#0b0f38;--nb-veil:rgb(8 10 42/.46);--nb-veil-2:rgb(18 14 70/.46)}
html:has(body:not(.pw-home):not(.pw-journey)){background:#050819}
body.pw:not(.pw-home):not(.pw-journey),body.ga-lp,body.service-page{background-color:#050819}

.nb-sky,.pw-sky,.ga-sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#050819 0%,#0a1038 40%,#140f46 74%,#0b0a2c 100%)}
/* before nebula.js runs (or with scripts off) the page's own sky element still gets the nebula colours */
.pw-sky,.ga-sky{background:radial-gradient(52% 42% at 82% 12%,rgb(124 92 255/.3),transparent 70%),radial-gradient(42% 38% at 6% 36%,rgb(60 200 255/.14),transparent 72%),radial-gradient(48% 40% at 72% 84%,rgb(255 99 180/.16),transparent 72%),linear-gradient(180deg,#050819 0%,#0a1038 40%,#140f46 74%,#0b0a2c 100%)}
html.nb-on .pw-sky,html.nb-on .ga-sky{display:none}

.nb-neb{position:absolute;inset:0;background:
  radial-gradient(52% 42% at var(--n1x,82%) var(--n1y,12%),rgb(124 92 255/.3),transparent 70%),
  radial-gradient(42% 38% at var(--n2x,6%) var(--n2y,36%),rgb(60 200 255/.14),transparent 72%),
  radial-gradient(48% 40% at var(--n3x,72%) var(--n3y,84%),rgb(255 99 180/.16),transparent 72%),
  radial-gradient(36% 30% at var(--n4x,22%) var(--n4y,94%),rgb(124 92 255/.2),transparent 72%)}
.nb-st{position:absolute;inset:-14vh 0;background-repeat:repeat;transform:translate3d(0,calc(var(--nb-sy,0) * var(--p) * -1px),0)}
.nb-st.s1{--p:.015;opacity:.9;background-size:720px 560px;background-image:
  radial-gradient(1px 1px at 7% 12%,#fff,#0000),radial-gradient(1px 1px at 19% 63%,#cfe0ff,#0000),radial-gradient(1.2px 1.2px at 31% 31%,#fff,#0000),radial-gradient(1px 1px at 43% 82%,#fff,#0000),
  radial-gradient(1px 1px at 56% 17%,#bcd0ff,#0000),radial-gradient(1px 1px at 68% 52%,#fff,#0000),radial-gradient(1.2px 1.2px at 79% 88%,#fff,#0000),radial-gradient(1px 1px at 91% 26%,#d6e2ff,#0000),
  radial-gradient(1px 1px at 13% 91%,#fff,#0000),radial-gradient(1px 1px at 87% 71%,#fff,#0000),radial-gradient(1px 1px at 50% 46%,#e6eeff,#0000),radial-gradient(1px 1px at 25% 8%,#fff,#0000),
  radial-gradient(1px 1px at 37% 55%,#fff,#0000),radial-gradient(1px 1px at 73% 7%,#cfe0ff,#0000),radial-gradient(1px 1px at 96% 58%,#fff,#0000),radial-gradient(1px 1px at 3% 47%,#fff,#0000)}
.nb-st.s2{--p:.035;opacity:.85;background-size:980px 800px;background-image:
  radial-gradient(1.6px 1.6px at 11% 38%,#ffe6c4,#0000),radial-gradient(1.8px 1.8px at 38% 72%,#fff,#0000),radial-gradient(1.5px 1.5px at 62% 9%,#cdbdff,#0000),radial-gradient(1.8px 1.8px at 84% 44%,#fff,#0000),
  radial-gradient(1.5px 1.5px at 72% 93%,#a8e8ff,#0000),radial-gradient(1.6px 1.6px at 24% 22%,#ffd0e6,#0000),radial-gradient(1.5px 1.5px at 51% 61%,#fff,#0000),radial-gradient(1.5px 1.5px at 93% 82%,#ffe6c4,#0000)}
.nb-st.s3{--p:.06;background-size:1240px 960px;animation:nb-twinkle 6s ease-in-out infinite alternate;background-image:
  radial-gradient(2.4px 2.4px at 17% 28%,#fff,#fff0 70%),radial-gradient(2.2px 2.2px at 47% 14%,#ffe2b8,#fff0 70%),radial-gradient(2.4px 2.4px at 76% 36%,#fff,#fff0 70%),radial-gradient(2.2px 2.2px at 33% 80%,#bfeaff,#fff0 70%),radial-gradient(2.4px 2.4px at 88% 90%,#ffd0e6,#fff0 70%)}
@keyframes nb-twinkle{from{opacity:.25}to{opacity:1}}

/* per-scene nebula composition (same colours, different placement) */
.nb-sky[data-scene=orbits]{--n1x:78%;--n1y:30%;--n3x:90%;--n3y:70%}
.nb-sky[data-scene=constellation]{--n1x:70%;--n1y:20%;--n2x:30%;--n2y:70%}
.nb-sky[data-scene=comets]{--n1x:20%;--n1y:10%;--n3x:84%;--n3y:76%}
.nb-sky[data-scene=signal]{--n1x:80%;--n1y:40%;--n3x:20%;--n3y:80%}
.nb-sky[data-scene=stream]{--n1x:60%;--n1y:50%;--n2x:92%;--n2y:20%}
.nb-sky[data-scene=starmap]{--n1x:76%;--n1y:40%;--n3x:50%;--n3y:90%}
.nb-sky[data-scene=ads]{--n1x:80%;--n1y:38%;--n3x:90%;--n3y:84%}
.nb-sky[data-scene=web]{--n1x:70%;--n1y:30%;--n2x:96%;--n2y:60%}
.nb-sky[data-scene=seo]{--n2x:84%;--n2y:94%;--n1x:60%;--n1y:20%}
.nb-sky[data-scene=social]{--n3x:50%;--n3y:60%;--n1x:20%;--n1y:20%}
.nb-sky[data-scene=ai]{--n1x:78%;--n1y:44%;--n2x:10%;--n2y:70%}
.nb-sky[data-scene=data]{--n1x:78%;--n1y:46%;--n2x:12%;--n2y:30%}
.nb-sky[data-scene=strategy]{--n1x:84%;--n1y:30%;--n3x:60%;--n3y:80%}
.nb-sky[data-scene=training]{--n1x:70%;--n1y:60%;--n3x:90%;--n3y:20%}
.nb-sky[data-scene=crm]{--n1x:78%;--n1y:42%;--n3x:16%;--n3y:86%}
.nb-sky[data-scene=commerce]{--n1x:82%;--n1y:50%;--n3x:24%;--n3y:90%}

/* ---------- 2. surfaces: sections and header let the sky show through ---------- */
/* the prefix beats the page sheets (their rules are nested inside .ga-lp{…}) */
html body:not(.pw-home):not(.pw-journey) .pow-header{background:linear-gradient(#050819f4,#050819e8 78%,#050819cc);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);box-shadow:inset 0 -1px 0 #9bb4ff1c}html body:not(.pw-home):not(.pw-journey) .lp-section{background:radial-gradient(circle 400px at var(--gx,84%) var(--gy,26%),var(--accent-glow),#0000 72%),radial-gradient(circle 330px at var(--gx2,6%) var(--gy2,82%),color-mix(in srgb,var(--accent) 18%,#0000),#0000 72%),var(--nb-veil)}
html body:not(.pw-home):not(.pw-journey) .lp-section.veiled{background:radial-gradient(circle 400px at var(--gx) var(--gy,26%),var(--accent-glow),#0000 72%),radial-gradient(circle 330px at var(--gx2) var(--gy2,82%),color-mix(in srgb,var(--accent) 18%,#0000),#0000 72%),var(--nb-veil-2)}
html body:not(.pw-home):not(.pw-journey) .ga-hero{background:var(--bg-hero),linear-gradient(#0000 72%,var(--nb-veil-2))}
/* the hero ends in the colour of the section under it, and that section's first glow starts clear of the hero edge (no cut line) */
html body:not(.pw-home):not(.pw-journey) .ga-hero:has(+ .lp-section:not(.veiled)){background:var(--bg-hero),linear-gradient(#0000 72%,var(--nb-veil))}
html body:not(.pw-home):not(.pw-journey) .ga-hero + .lp-section{--gy:max(26%,300px)}
/* the footer's gradient starts from the colour of the last section above it */
html body:not(.pw-home):not(.pw-journey):has(main > .lp-section:last-child) .site-footer{--sf-from:var(--nb-veil)}
html body:not(.pw-home):not(.pw-journey):has(main > .lp-section.veiled:last-child) .site-footer{--sf-from:var(--nb-veil-2)}
/* the last section's lower glow ends inside the section, so it is not cut by the footer edge */
html body:not(.pw-home):not(.pw-journey) main > .lp-section:last-child{--gy2:max(34%,calc(100% - 250px))}
/* page-frame bands: the near-black navy of the old sheets (sticky chapter bar, "Đọc thêm" box, /gioi-thieu/ bar) takes the section veil, so they read as part of the indigo sky; the sticky ones stack the veil three times (about 0.84 opaque) and blur, so text passing under stays quiet */
html body:not(.pw-home):not(.pw-journey) nav.panel-toc{background:linear-gradient(var(--nb-veil-2),var(--nb-veil-2)),linear-gradient(var(--nb-veil-2),var(--nb-veil-2)),linear-gradient(var(--nb-veil-2),var(--nb-veil-2));-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 10px 26px rgb(18 14 70/.38)}
html body:not(.pw-home):not(.pw-journey) nav.ab-nav{background:linear-gradient(var(--nb-veil-2),var(--nb-veil-2)),linear-gradient(var(--nb-veil-2),var(--nb-veil-2)),linear-gradient(var(--nb-veil-2),var(--nb-veil-2))}
html body:not(.pw-home):not(.pw-journey) details.v-more{background:var(--nb-veil-2)}
html body:not(.pw-home):not(.pw-journey) .steps-nav{background:linear-gradient(#0000 46px,var(--nb-veil) 46px)}

/* ---------- 3. scenes ---------- */
.nb-scene{position:absolute;inset:0;transform:translate3d(0,calc(var(--nb-sy,0) * -.02px),0)}
.nb-scene svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nb-a{position:absolute;display:block;margin:0;padding:0;border:0;font-style:normal}
.k-v{color:#8f7bff}.k-c{color:#3cc8ff}.k-m{color:#ff63b4}.k-w{color:#dfe8ff}.k-a{color:#ffd28a}

.nb-glow{width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;background:radial-gradient(circle,currentColor 0,#0000 68%);opacity:var(--o,.3)}
.nb-dot{width:var(--s,4px);height:var(--s,4px);margin:calc(var(--s,4px) / -2) 0 0 calc(var(--s,4px) / -2);border-radius:50%;background:currentColor;box-shadow:0 0 calc(var(--s,4px) * 3) currentColor;animation:nb-tw var(--t,5s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes nb-tw{from{opacity:.35}to{opacity:1}}
.nb-ring{width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border:1px solid currentColor;border-radius:50%;opacity:var(--o,.22)}
.nb-ring.dash{border-style:dashed}
.nb-planet{width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff9,#fff0 34%),radial-gradient(circle at 38% 34%,currentColor,#140f46 86%);box-shadow:0 0 calc(var(--d) * .5) calc(var(--d) * -.1) currentColor}

/* orbit = a wrapper that rotates; satellites ride its rim */
.nb-tilt,.nb-spin{position:absolute;left:0;top:0;width:0;height:0}
.nb-spin{animation:nb-spin var(--t,60s) linear infinite;animation-direction:var(--dir,normal);will-change:transform}
.nb-tilt{transform:rotate(var(--tilt,0deg)) scaleY(var(--sq,1))}
.nb-sat{position:absolute;left:0;top:0;width:var(--s,10px);height:var(--s,10px);margin:calc(var(--s,10px) / -2);border-radius:50%;background:currentColor;box-shadow:0 0 calc(var(--s,10px) * 2.4) currentColor;transform:rotate(var(--ang,0deg)) translateX(calc(var(--d) / 2))}
.nb-sat.planet{background:radial-gradient(circle at 34% 30%,#fffc,#fff0 38%),currentColor}
.nb-sat.crate{border-radius:3px;box-shadow:0 0 calc(var(--s,10px) * 1.6) currentColor,inset 0 0 0 1px #ffffff66}
@keyframes nb-spin{to{transform:rotate(360deg)}}

/* comets / sparks travel along a straight line */
.nb-comet{width:var(--len,220px);height:2px;margin-top:-1px;transform-origin:left center;background:linear-gradient(90deg,#0000,currentColor);opacity:.0;border-radius:2px;animation:nb-comet var(--t,9s) linear var(--dl,0s) infinite}
.nb-comet:after{content:'';position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px currentColor}
@keyframes nb-comet{0%{transform:rotate(var(--a,24deg)) translateX(0);opacity:0}8%{opacity:.95}78%{opacity:.95}100%{transform:rotate(var(--a,24deg)) translateX(var(--go,1400px));opacity:0}}
.nb-spark{width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px currentColor;opacity:0;animation:nb-spark var(--t,5s) ease-in-out var(--dl,0s) infinite}
@keyframes nb-spark{0%{transform:translate(0,0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}

/* signal rings */
.nb-pulse{width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border:1.5px solid currentColor;border-radius:50%;opacity:0;animation:nb-pulse var(--t,6s) cubic-bezier(.2,.6,.3,1) var(--dl,0s) infinite}
@keyframes nb-pulse{0%{transform:scale(.06);opacity:.75}100%{transform:scale(1);opacity:0}}
.nb-hit{animation-name:nb-hit}
@keyframes nb-hit{0%,76%{transform:scale(.05);opacity:0}77%{transform:scale(.05);opacity:.9}100%{transform:scale(1);opacity:0}}
.nb-shot{animation-name:nb-shot}
@keyframes nb-shot{0%{transform:rotate(var(--a)) translateX(0);opacity:0}6%{opacity:.95}76%{transform:rotate(var(--a)) translateX(var(--go));opacity:.95}79%,100%{transform:rotate(var(--a)) translateX(var(--go));opacity:0}}

/* data stream columns */
.nb-stream{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000 22%,#000 62%);mask-image:linear-gradient(90deg,#0000 22%,#000 62%)}
.nb-col{top:-120px;width:2px;height:calc(100% + 120px);background:repeating-linear-gradient(180deg,currentColor 0 16px,#0000 16px 44px,currentColor 44px 50px,#0000 50px 120px);opacity:var(--o,.3);border-radius:2px;animation:nb-fall var(--t,12s) linear infinite}
@keyframes nb-fall{to{transform:translateY(120px)}}

/* orbs (bubbles) */
.nb-rise{animation:nb-rise var(--t,30s) linear var(--dl,0s) infinite;will-change:transform}
.nb-orb{width:var(--d);height:var(--d);margin:calc(var(--d) / -2);border-radius:50%;background:radial-gradient(circle at 30% 28%,#ffffff80,#fff0 38%),radial-gradient(circle,currentColor 0,#0000 72%);opacity:var(--o,.4);animation:nb-sway var(--ts,7s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes nb-rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-100vh - 240px),0)}}
@keyframes nb-sway{from{transform:translateX(calc(var(--sw,30px) * -1))}to{transform:translateX(var(--sw,30px))}}

/* grids, scans, sweeps */
.nb-grid{inset:0;color:#8f7bff;opacity:.09;background:linear-gradient(currentColor 1px,#0000 1px) 0 0/64px 64px,linear-gradient(90deg,currentColor 1px,#0000 1px) 0 0/64px 64px;-webkit-mask-image:radial-gradient(60% 70% at var(--gx,78%) var(--gy,46%),#000,#0000);mask-image:radial-gradient(60% 70% at var(--gx,78%) var(--gy,46%),#000,#0000)}
.nb-scan{left:0;right:0;top:-160px;height:160px;background:linear-gradient(#0000,currentColor 55%,#0000);opacity:.11;animation:nb-scan 11s linear infinite}
@keyframes nb-scan{to{transform:translateY(calc(100vh + 160px))}}
.nb-sweep{width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;background:conic-gradient(from 0deg,#0000 0 290deg,currentColor 360deg);opacity:.2;animation:nb-spin 9s linear infinite;will-change:transform}
.nb-float{animation:nb-bob var(--t,14s) ease-in-out infinite alternate}
@keyframes nb-bob{from{transform:translateY(0)}to{transform:translateY(-22px)}}
.nb-drift{animation:nb-drift 46s ease-in-out infinite alternate}
@keyframes nb-drift{from{transform:translate(-8px,6px)}to{transform:translate(12px,-10px)}}

/* spokes of the service map */
.nb-spoke{width:var(--len);height:1px;transform-origin:0 50%;transform:rotate(var(--ang));background:linear-gradient(90deg,currentColor,#0000);opacity:.3}
.nb-spoke:after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.nb-compass{border-radius:50%;background:repeating-conic-gradient(from 0deg,currentColor 0 .5deg,#0000 .5deg 10deg);-webkit-mask-image:radial-gradient(circle,#0000 66%,#000 67%,#000 69%,#0000 70%);mask-image:radial-gradient(circle,#0000 66%,#000 67%,#000 69%,#0000 70%);opacity:.3;animation:nb-spin 240s linear infinite}

/* website scene: wireframe pieces that "build" one after another */
.nb-box{border:1px solid currentColor;border-radius:6px;opacity:.0;animation:nb-build 14s ease-in-out var(--dl,0s) infinite}
@keyframes nb-build{0%{opacity:0;transform:translateY(8px)}10%,70%{opacity:.34;transform:none}86%,100%{opacity:0}}
.nb-step{animation:nb-stepglow 12s ease-in-out var(--dl,0s) infinite}
@keyframes nb-stepglow{0%,100%{transform:scale(1);opacity:.5}8%{transform:scale(1.9);opacity:1}18%{transform:scale(1);opacity:.7}}
.nb-offset{offset-rotate:0deg;animation:nb-route var(--t,16s) linear infinite}
@keyframes nb-route{from{offset-distance:0%}to{offset-distance:100%}}

@media (max-width:700px){.nb-scene{opacity:.8}.nb-col{width:1.5px}}
@media (prefers-reduced-motion:reduce){
  .nb-sky *,.nb-sky *:before,.nb-sky *:after{animation:none!important}
  .nb-comet{opacity:.55}.nb-box{opacity:.3}.nb-pulse{opacity:.3;transform:scale(.6)}.nb-spark{opacity:.8}
}

/* hub heroes: blurred glows may run past the bottom edge instead of being cut into a hard line */
html body:not(.pw-home):not(.pw-journey) .film-hero{overflow:clip visible}
html body:not(.pw-home):not(.pw-journey) .bm-top{background:radial-gradient(56% 70% at 86% 30%,var(--accent-glow),#0000 72%),radial-gradient(40% 50% at 0 66%,color-mix(in srgb,var(--cyan) 10%,#0000),#0000 74%)}

/* projects hero: the logo wall sits on the shared sky instead of a flat fill */
html body:not(.pw-home):not(.pw-journey) .pj-hero{background:transparent}
/* ...and its veil fades into the colour of the section below (--bg is a touch darker than the veiled sky) */
html body:not(.pw-home):not(.pw-journey) .pj-veil{--pj-bg:color-mix(in srgb,var(--bg) 97.5%,var(--accent));background:
  radial-gradient(64% 58% at 46% 74%,color-mix(in srgb,var(--pj-bg) 92%,#0000) 30%,#0000 100%),
  linear-gradient(90deg,var(--pj-bg) 2%,color-mix(in srgb,var(--pj-bg) 78%,#0000) 34%,color-mix(in srgb,var(--pj-bg) 24%,#0000) 74%,color-mix(in srgb,var(--pj-bg) 48%,#0000)),
  linear-gradient(#0000 38%,var(--pj-bg) 96%),
  linear-gradient(var(--pj-bg),#0000 22%),
  radial-gradient(54% 50% at 78% 24%,var(--accent-glow),#0000 74%)}

/* ONMATE brand lock-up: ring mark + drawn wordmark (markup from scripts/brand/logo.mjs) */
.brand{display:inline-flex;align-items:center;gap:12px;line-height:1;letter-spacing:0;text-decoration:none}
.brand .om-mark{display:block;width:42px;height:42px;flex:none;filter:drop-shadow(0 5px 14px #6a3dff55)}
.brand .om-txt{display:grid;gap:8px;min-width:0}
.brand .om-word{display:block;height:17px;width:auto;overflow:visible}
.brand small{margin:0;font-size:8.5px;letter-spacing:2.2px;white-space:nowrap}
.brand-mini{display:inline-flex;align-items:center;gap:10px;line-height:1;letter-spacing:0}
.brand-mini .om-mark{display:block;width:30px;height:30px;flex:none}
.brand-mini .om-word{display:block;height:14px;width:auto;overflow:visible}
@media (max-width:1300px) and (min-width:1101px){.brand .om-mark{width:38px;height:38px}.brand .om-word{height:15px}.brand small{font-size:7.5px;letter-spacing:1.6px}}
@media (max-width:600px){.brand{gap:9px}.brand .om-mark{width:34px;height:34px}.brand .om-word{height:14px}.brand .om-txt{gap:6px}.brand small{font-size:6.5px;letter-spacing:1.3px}}
/* phones: drop the tagline (<=430px) and the CTA arrow (<=380px) so logo + switcher + CTA + menu button fit in one row */
@media (max-width:430px){.brand small{display:none}}
@media (max-width:380px){.brand{gap:8px}.brand .om-mark{width:32px;height:32px}.brand .om-word{height:15px}.pow-header .contact span{display:none}.pow-header .contact{padding-left:10px;padding-right:10px}}
@media (max-width:340px){.pow-header{gap:8px;padding-left:12px;padding-right:12px}.brand{gap:7px}.brand .om-mark{width:30px;height:30px}.brand .om-word{height:13px}.pow-header .contact{padding-left:8px;padding-right:8px}}