/* ============================================================
   NEXI — design tokens
   ============================================================ */
:root{
  --bg-deep:#04011C;
  --bg-deep-alt:#04011E;
  --surface:#151129;
  --stroke:rgba(255,255,255,.35);
  --purple:#8980F1;
  --purple-light:#A680F1;
  --purple-vivid:#7C3AED;
  --light-start:#FDF7FD;
  --text-white:#FFFFFF;
  --text-dark:#04011C;
  --text-muted-dk:rgba(255,255,255,.72);
  --text-muted-lt:#575757;

  --display:"Space Grotesk","Segoe UI",Helvetica,Arial,sans-serif;
  --body:"DM Sans","Segoe UI",Helvetica,Arial,sans-serif;

  --container:1290px;
  --pad:15px;
  --sec-y:120px;
  --radius-card:10px;
  --radius-big:20px;
  --pill:56px;
}

/* This page is a deliberately single-theme, dark-first product site.
   Every colour is painted explicitly so it holds on any host ground. */
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--text-white);
  font-family:var(--body);
  font-size:16px;
  line-height:30px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-wrap:balance;}
:focus-visible{outline:2px solid var(--purple-light);outline-offset:3px;border-radius:4px;}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);}
.container-xl{width:100%;max-width:1720px;margin-inline:auto;padding-inline:clamp(20px,3.2vw,60px);}
.section{position:relative;padding-block:var(--sec-y);}
.dark-sec{background:var(--bg-deep);}
.center{text-align:center;}

/* ---------- typography ---------- */
.h1{font-size:80px;line-height:88px;letter-spacing:-.06em;}
.h2{font-size:48px;line-height:60px;letter-spacing:-.06em;}
.h2-cta{font-size:72px;line-height:80px;letter-spacing:-.06em;}
.card-title{font-family:var(--display);font-size:22px;line-height:34px;font-weight:500;letter-spacing:-.04em;}
.lead{font-size:18px;line-height:32px;color:var(--text-white);}
.body-dk{font-size:16px;line-height:30px;color:var(--text-muted-dk);}
.body-lt{font-size:16px;line-height:30px;color:var(--text-muted-lt);}
.grad-text{
  background:linear-gradient(90deg,#FFFFFF 35%,#8980F1 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------- eyebrow pill ---------- */
.eyebrow{
  display:inline-block;padding:10px 20px;border-radius:11px;
  border:1px solid rgba(178,150,250,.8);
  background:linear-gradient(180deg,rgba(150,124,246,.46) 0%,rgba(107,79,216,.30) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 20px 3px rgba(166,128,241,.4),
    0 10px 26px -12px rgba(137,128,241,.7);
  font-family:var(--display);font-size:15px;font-weight:500;line-height:1.2;
  letter-spacing:.01em;color:var(--text-white);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 29px;border-radius:var(--pill);
  font-family:var(--display);font-size:16px;font-weight:500;line-height:1.25;
  color:var(--text-white);
  transition:box-shadow .35s ease,transform .35s ease,background .35s ease;
  white-space:nowrap;
}
.btn .arw{transition:transform .35s ease;flex:none;}
.btn:hover .arw{transform:translateX(4px);}
/* mui ten ma tran cham (chi dung o hero) — luoi 7x7, 28 cham */
.arw-dot .d{opacity:1;transition:opacity .3s ease;}
/* hover: song sang chay tu trai sang phai roi lap lai */
.btn:hover .arw-dot .d{animation:dotWave 1.05s ease-in-out infinite;}
.btn:hover .arw-dot .c0{animation-delay:0ms;}
.btn:hover .arw-dot .c1{animation-delay:60ms;}
.btn:hover .arw-dot .c2{animation-delay:120ms;}
.btn:hover .arw-dot .c3{animation-delay:180ms;}
.btn:hover .arw-dot .c4{animation-delay:240ms;}
.btn:hover .arw-dot .c5{animation-delay:300ms;}
.btn:hover .arw-dot .c6{animation-delay:360ms;}
@keyframes dotWave{0%,70%,100%{opacity:.55;}28%{opacity:1;}}

.btn-primary{
  background:linear-gradient(90deg,#A680F1 0%,#8980F1 100%);
  border:1px solid #A680F1;
}
.btn-primary:hover{box-shadow:0 10px 30px -8px rgba(137,128,241,.75);}
.btn-ghost{
  background:transparent;border:1px solid #A680F1;
  box-shadow:inset 0 0 11px 8px rgba(166,128,241,.4);
}
.btn-ghost:hover{box-shadow:inset 0 0 22px 12px rgba(166,128,241,.55);}
.btn-solid-purple{
  background:#8B7BEE;border:1px solid #8B7BEE;color:#fff;
}
.btn-solid-purple:hover{box-shadow:0 12px 28px -10px rgba(139,123,238,.9);}

/* ============================================================
   Mau phu LIME — chi dung cho hanh dong "lien he / tu van".
   Lay mau tu nut "Purchase on Envato" cua mau: vien #ADE76F->#87E64A,
   nen toi, chu trang, icon lime. Moi hanh dong khac giu tim.
   Tuong phan: trang/#0B0A1F 19.5:1, lime/#04011C 13.1:1, #0B0A1F/lime 12.5:1.
   ============================================================ */
:root{--lime:#87E64A;--lime-2:#ADE76F;--lime-ink:#0B0A1F;}
.btn-lime{
  position:relative;color:#fff;
  background:
    radial-gradient(120% 90% at 50% 120%,rgba(135,230,74,.28),rgba(135,230,74,0) 60%),
    var(--lime-ink);
  border:1.5px solid transparent;
  background-clip:padding-box;
  /* vien sac net + anh lime BLUR VAO TRONG (inset) nhu mau, khong toa ra ngoai */
  box-shadow:
    0 0 0 1.5px var(--lime),
    inset 0 0 22px -4px rgba(135,230,74,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:box-shadow .35s ease,transform .35s ease;
}
.btn-lime .arw{color:var(--lime);}
.btn-lime:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1.5px var(--lime-2),inset 0 0 30px -2px rgba(135,230,74,.8),inset 0 1px 0 rgba(255,255,255,.1);
}
/* tren nen sang: glow giam ~40% */
.on-light.btn-lime{box-shadow:0 0 0 1.5px var(--lime),inset 0 0 16px -6px rgba(135,230,74,.45);}
.on-light.btn-lime:hover{box-shadow:0 0 0 1.5px var(--lime-2),inset 0 0 22px -4px rgba(135,230,74,.6);}

/* nut Ve chung toi: khoi toi + o lime chua mui ten toi.
   Luu y: .ab-btn khong duoc co padding-top (khe cach doan van chuyen sang .ab-lead),
   neu khong vien box-shadow se om ca phan khe va ve lech len tren. */
.ab-btn.lime{border-radius:8px;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#9AEB5E,var(--lime) 52%,#6CD22F);
  box-shadow:0 18px 40px -18px rgba(135,230,74,.75),inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 2px rgba(11,10,31,.28);
  transition:filter .3s ease,box-shadow .3s ease;}
.ab-btn.lime > span,.ab-btn.lime > i{background:transparent;box-shadow:none;}
.ab-btn.lime > i{border-left:1px solid rgba(255,255,255,.4);}
.ab-btn.lime > i > svg{background:#fff;color:#2F7F16;}
.ab-btn.lime:hover{filter:brightness(1.05);box-shadow:0 22px 44px -18px rgba(135,230,74,.9),inset 0 1px 0 rgba(255,255,255,.45);}

/* thanh doc "Tu van mien phi" */
.side-tab.lime{
  background:var(--lime-ink);color:#fff;
  box-shadow:0 0 0 1.5px var(--lime),inset 0 0 18px -4px rgba(135,230,74,.5);
  border-radius:8px 0 0 8px;
}
.side-tab.lime::before{content:"";position:absolute;left:6px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--lime);}


/* ---------- ambient art ---------- */
.amb{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.glow{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(137,128,241,.45),transparent 70%);
  filter:blur(120px);
}
.arc{
  position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}
.dot{--o:1;position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.5);}
.star{--o:.5;position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.5;}
.star.big{--o:.75;width:3px;height:3px;opacity:.75;}
/* cham lo lung: moi cham nhan bo toa do/thoi gian rieng (JS gan bien --x1..--y4, --wd, --wl, --bd, --bl)
   nen troi theo duong gap khuc khong deu, kem nhap nhay do sang; .amb/.cta overflow:hidden giu trong section */
.star.fl,.dot.fl{
  opacity:var(--o);will-change:transform,opacity;
  animation:wander var(--wd,24s) cubic-bezier(.45,.05,.55,.95) var(--wl,0s) infinite alternate,
            breathe var(--bd,6s) ease-in-out var(--bl,0s) infinite;
}
@keyframes wander{
  0%  {transform:translate3d(0,0,0);}
  22% {transform:translate3d(var(--x1),var(--y1),0);}
  47% {transform:translate3d(var(--x2),var(--y2),0);}
  71% {transform:translate3d(var(--x3),var(--y3),0);}
  100%{transform:translate3d(var(--x4),var(--y4),0);}
}
@keyframes breathe{
  0%,100%{opacity:var(--o);}
  38%    {opacity:calc(var(--o) * .35);}
  64%    {opacity:calc(var(--o) * .85);}
}
.section > .container,.section > .container-xl,
.hero > .container-xl{position:relative;z-index:1;}

/* ============================================================
   Mock screenshot component (no external images — CSS only)
   ============================================================ */
.shot{
  position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(160deg,#171233 0%,#0B0722 60%,#120B2C 100%);
  border:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;
  isolation:isolate;
}
.shot::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% -10%,rgba(137,128,241,.4),transparent 60%);
  pointer-events:none;
}
.shot.light{background:linear-gradient(160deg,#FFFFFF 0%,#F3EEFF 100%);border-color:rgba(4,1,28,.1);}
.shot.light::after{background:radial-gradient(120% 70% at 50% -10%,rgba(124,58,237,.16),transparent 60%);}
.shot-bar{
  display:flex;align-items:center;gap:5px;padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.09);flex:none;
}
.shot.light .shot-bar{border-bottom-color:rgba(4,1,28,.08);}
.shot-bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);display:block;}
.shot.light .shot-bar i{background:rgba(4,1,28,.18);}
.shot-bar u{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.09);margin-left:8px;}
.shot.light .shot-bar u{background:rgba(4,1,28,.07);}
.shot-body{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:0;}
.shot-nav{display:flex;align-items:center;gap:8px;}
.shot-nav b{width:22px;height:8px;border-radius:3px;background:linear-gradient(90deg,#A680F1,#8980F1);display:block;}
.shot-nav s{flex:1;}
.shot-nav em{width:26px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);display:block;}
.shot.light .shot-nav em{background:rgba(4,1,28,.14);}
.shot-nav span{width:40px;height:14px;border-radius:7px;background:linear-gradient(90deg,#A680F1,#8980F1);display:block;}
.line{height:8px;border-radius:4px;background:rgba(255,255,255,.5);}
.line.sm{height:5px;background:rgba(255,255,255,.22);}
.shot.light .line{background:rgba(4,1,28,.5);}
.shot.light .line.sm{background:rgba(4,1,28,.18);}
.shot-hero{display:flex;flex-direction:column;gap:7px;align-items:center;padding:10px 6px 4px;}
.shot-hero .line{width:82%;}
.shot-hero .line:nth-child(2){width:62%;}
.shot-hero .line.sm{width:52%;}
.shot-pill{width:64px;height:16px;border-radius:8px;background:linear-gradient(90deg,#A680F1,#8980F1);margin-top:4px;}
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;}
.shot-grid div{
  height:44px;border-radius:8px;
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08);
}
.shot.light .shot-grid div{background:linear-gradient(150deg,rgba(124,58,237,.16),rgba(124,58,237,.05));border-color:rgba(4,1,28,.06);}
.shot-chart{
  margin-top:auto;height:56px;border-radius:8px;
  background:
    linear-gradient(to top,rgba(137,128,241,.35),transparent),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.05) 22px 23px);
  border:1px solid rgba(255,255,255,.08);
  position:relative;overflow:hidden;
}
.shot-chart::before{
  content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;
  background:linear-gradient(90deg,#A680F1,#fff);
  clip-path:polygon(0 60%,14% 30%,28% 70%,42% 20%,58% 50%,72% 10%,86% 40%,100% 0,100% 100%,0 100%);
}

/* ============================================================
   Preloader
   ============================================================ */
#preload{
  position:fixed;inset:0;z-index:9999;background:var(--bg-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .7s ease,visibility .7s ease;
}
#preload.gone{opacity:0;visibility:hidden;}
#preload .pl-title{
  font-family:var(--display);font-size:38px;line-height:1.2;font-weight:400;
  letter-spacing:-.06em;max-width:16ch;text-align:center;
}
.pl-bar{width:180px;height:2px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden;}
.pl-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,#A680F1,#8980F1);animation:plrun 1.1s ease-in-out infinite;}
@keyframes plrun{0%{transform:translateX(-100%);}100%{transform:translateX(350%);}}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:100;height:95px;
  display:flex;align-items:center;
  transition:background .35s ease,box-shadow .35s ease;
}
.site-header.stuck{
  position:fixed;background:rgba(4,1,28,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  animation:slideDown .45s cubic-bezier(.2,.7,.3,1);
  height:78px;
}
@keyframes slideDown{from{transform:translateY(-100%);}to{transform:translateY(0);}}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,1.8vw,30px);
  width:100%;max-width:1860px;margin-inline:auto;
  padding-inline:clamp(16px,2.4vw,44px);
}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:28px;font-weight:500;letter-spacing:-.04em;color:#fff;}
.logo svg{flex:none;}

.nav{display:flex;align-items:center;gap:34px;}
.nav > li{position:relative;}
.nav > li > a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;
  padding:8px 0;border:1px solid transparent;border-radius:var(--pill);
  transition:border-color .3s ease,padding .3s ease,background .3s ease;
}
.nav > li.is-active > a,
.nav > li:hover > a{
  border-color:rgba(255,255,255,.35);padding:8px 18px;
  background:rgba(255,255,255,.04);
}
.nav .chev{transition:transform .3s ease;}
.nav > li:hover .chev{transform:rotate(180deg);}

.burger{display:none;flex-direction:column;gap:5px;padding:10px;}
.burger i{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease,opacity .3s ease;}
.mobile-nav{
  position:fixed;inset:0;z-index:200;background:rgba(4,1,28,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;
}
.mobile-nav.open{opacity:1;visibility:visible;}
.mobile-nav a{font-family:var(--display);font-size:26px;font-weight:400;letter-spacing:-.03em;text-transform:uppercase;padding:10px;}
.mobile-nav .close{position:absolute;top:24px;right:24px;font-size:30px;line-height:1;}

/* ============================================================
   S1 — Hero
   ============================================================ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:124px 0 52px;background:var(--bg-deep);overflow:hidden;
}
@supports (min-height:100svh){.hero{min-height:100svh;}}
/* hero glow — sampled from ref: peak #8E82F5 @ .85, centre 50% / 195px, r 45vw x 470px */
.hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1200px;z-index:0;pointer-events:none;
  background:radial-gradient(22vw 300px at 64% 130px,rgba(142,130,245,.30) 0%,rgba(142,130,245,.18) 40%,rgba(142,130,245,.06) 72%,rgba(142,130,245,0) 100%),radial-gradient(45vw 470px at 50% 195px,rgba(142,130,245,.85) 0%,rgba(142,130,245,.79) 16%,rgba(142,130,245,.68) 32%,rgba(142,130,245,.52) 48%,rgba(142,130,245,.33) 64%,rgba(142,130,245,.17) 78%,rgba(142,130,245,.06) 90%,rgba(142,130,245,0) 100%);
}
/* hero arcs — two circles per side, centres just outside the left/right edges */
.harc{position:absolute;width:var(--d);height:var(--d);pointer-events:none;
  top:calc(var(--cy) - var(--d)/2);}
.harc::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.42);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.86) 52%,rgba(0,0,0,.16) 84%,rgba(0,0,0,.05) 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.86) 52%,rgba(0,0,0,.16) 84%,rgba(0,0,0,.05) 100%);
}
.harc.l{left:calc(var(--cx) - var(--d)/2);}
.harc.r{right:calc(var(--cx) - var(--d)/2);}
.harc i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 0 10px 2px rgba(255,255,255,.45);}
/* nut sang tren vong cung: nam co dinh tren duong cung, chi nhap nhay do sang (khong troi ra khoi cung) */
.harc i.fl{animation:nodepulse var(--bd,6s) ease-in-out var(--bl,0s) infinite;}
@keyframes nodepulse{
  0%,100%{opacity:1;box-shadow:0 0 10px 2px rgba(255,255,255,.45);}
  42%    {opacity:.45;box-shadow:0 0 4px 1px rgba(255,255,255,.2);}
  70%    {opacity:.85;box-shadow:0 0 14px 3px rgba(255,255,255,.55);}
}
.a1{--d:clamp(520px,46.25vw,900px);--cx:-4.86vw;--cy:397px;}
.a2{--d:clamp(650px,57.60vw,1120px);--cx:-2.15vw;--cy:497px;}
.a3{--d:clamp(540px,47.85vw,930px);--cx:-3.96vw;--cy:393px;}
.a4{--d:clamp(480px,42.10vw,820px);--cx:-9.86vw;--cy:477px;}
.hero-stack{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,2.8vh,42px);text-align:center;
}
.badge{
  display:inline-flex;align-items:center;gap:12px;
  /* le 4px + bo goc 13px = 9px cua chip + 4px le  -> khung om sat chip */
  padding:4px 30px 4px 4px;border-radius:13px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04);
  font-family:var(--display);font-size:clamp(13px,1.1vw,16px);font-weight:500;color:#fff;
  position:relative;overflow:hidden;
}
.badge .chip{
  background:#fff;color:var(--text-dark);border-radius:9px;
  padding:5px 13px;font-size:clamp(11px,.92vw,13px);font-weight:500;letter-spacing:.02em;
  white-space:nowrap;flex:none;
  position:relative;z-index:2;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  will-change:transform;
}
.badge .chip:active{cursor:grabbing;}
.badge .chip.snap{transition:transform .5s cubic-bezier(.22,1.2,.36,1);}
.badge .chip.dragging{box-shadow:0 8px 22px -8px rgba(4,1,28,.65);}
/* chu bi chip "re" qua: tung ky tu nhac len theo khoang cach toi chip */
/* hai lop chu: .bt = cau CU (ben phai chip), .bt2 = cau MOI (ben trai chip).
   Dung mask thay clip-path vi mask khong cat phan chu nhac len khoi khung. */
.badge{--cut:0px;--cut2:0px;}
.badge .bt,.badge .bt2{white-space:pre;z-index:1;}
.badge .bt{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 var(--cut2),#000 var(--cut2));
          mask-image:linear-gradient(90deg,transparent 0 var(--cut2),#000 var(--cut2));}
.badge .bt2{
  position:absolute;left:17px;top:50%;transform:translateY(-50%);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0 var(--cut),transparent var(--cut));
          mask-image:linear-gradient(90deg,#000 0 var(--cut),transparent var(--cut));}
.badge .bt i,.badge .bt2 i{display:inline-block;font-style:normal;will-change:transform;}
.hero h1{
  max-width:none;
  font-size:clamp(34px,6vw,96px);
  line-height:1.08;
  letter-spacing:-.05em;
}
.hero .lead{
  font-size:clamp(16px,1.35vw,20px);line-height:1.75;max-width:76ch;
}
.btn-row{display:flex;flex-wrap:wrap;gap:clamp(14px,1.7vw,26px);justify-content:center;}
.hero .btn{padding:18px 38px;font-size:clamp(15px,1.2vw,17px);}

/* ============================================================
   S2 — Bento grid
   ============================================================ */
.bento{display:grid;gap:clamp(26px,2.1vw,32px);}
.bento-row1{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:clamp(26px,2.1vw,32px);}
.bento-row2{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(26px,2.1vw,32px);}
.bento-card{
  /* two frames: the card's own 1px border, a dark gap, then an outer hairline ring */
  --ring:
    inset 0 0 0 1px rgba(255,255,255,.055),
    0 0 0 5px rgba(4,1,28,.92),
    0 0 0 6px rgba(255,255,255,.10);
  position:relative;border-radius:var(--radius-big);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--ring);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.bento-card:hover{
  transform:translateY(-6px);border-color:rgba(255,255,255,.6);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 0 0 5px rgba(4,1,28,.92),
    0 0 0 6px rgba(255,255,255,.26),
    0 24px 60px -26px rgba(137,128,241,.85);
}

.card-a{
  background:radial-gradient(120% 92% at 50% 104%,#1B1240 0%,#100B26 52%,#0A0718 100%);
  padding:clamp(28px,2.4vw,38px) clamp(26px,2.4vw,38px) 0;
  min-height:clamp(342px,28vw,418px);
  display:flex;flex-direction:column;gap:clamp(10px,.9vw,14px);
}
.card-a h3{
  position:relative;z-index:2;
  font-size:clamp(23px,1.95vw,30px);line-height:1.26;letter-spacing:-.04em;
  color:#fff;max-width:24ch;
}
.card-a p{
  position:relative;z-index:2;
  font-size:clamp(14.5px,1.06vw,16px);line-height:1.78;max-width:46ch;
}
/* rotating protective dome */
.dome{
  position:absolute;left:0;right:0;bottom:-7%;
  height:clamp(205px,19vw,300px);z-index:1;pointer-events:none;
}
.dome canvas{display:block;width:100%;height:100%;}
.card-b{
  background:linear-gradient(180deg,
    #877DED 0%,
    #7972D9 10%,
    #615AB0 30%,
    #474087 50%,
    #2E2A5F 70%,
    #151136 90%,
    #080522 100%);
  color:#fff;padding:clamp(26px,2.2vw,34px) clamp(20px,1.8vw,28px) 0;
  text-align:center;display:flex;flex-direction:column;align-items:center;
  min-height:clamp(342px,28vw,418px);
}
.card-b h3{position:relative;z-index:2;font-size:clamp(22px,1.85vw,29px);line-height:1.26;letter-spacing:-.04em;color:#fff;}
/* Card B: anh that cua san pham — bo h3 va phone mock CSS.
   cover de anh phu KIN khung, khong chua khoang trong.
   Anh da duoc cat bo vien den ngoai cua chinh no (32px trai / 7px phai —
   khong can xung) nen tam panel cham dung 4 goc khung.
   An toan: tieu de nam trong 11.1%-86.9% ngang, bat dau tu 7.5% doc;
   cat toi da cua cover (1200-1920px) la ~4.9%/canh -> khong cham vao chu. */
.card-shot{padding:0;display:block;position:relative;background:var(--bg-deep);}
/* Kho >=1200px: card B cao bang card A/C (luoi 3 cot), phan du tren-duoi
   toi da 16px va cung mau nen nen khong nhin thay.
   Kho <1200px: card ngang ra va thap di -> cho card chay theo ti le anh. */
@media (max-width:1199px){
  .card-shot{aspect-ratio:900/931;min-height:0;min-width:0;}
}
.card-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}

/* ---- realistic phone mock ---- */
.phone{
  position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);
  width:clamp(190px,66%,262px);
  padding:7px 7px 0;border-radius:clamp(24px,2.2vw,32px) clamp(24px,2.2vw,32px) 0 0;
  background:linear-gradient(158deg,#F2F0F8 0%,#D3CFE2 38%,#AFAAC4 100%);
  box-shadow:
    0 -4px 18px rgba(4,1,28,.22),
    0 22px 50px -16px rgba(4,1,28,.55),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.phone-screen{
  position:relative;overflow:hidden;background:#FBFAFE;
  border-radius:clamp(22px,2.1vw,31px) clamp(22px,2.1vw,31px) 0 0;
  height:clamp(176px,18vw,250px);
  display:flex;flex-direction:column;
}
.ph-status{
  flex:none;position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:7px 13px 3px;
  font-family:var(--display);font-size:9.5px;font-weight:500;color:#0F0B22;
  font-variant-numeric:tabular-nums;
}
.ph-island{
  position:absolute;left:50%;top:5px;transform:translateX(-50%);
  width:36px;height:11px;border-radius:7px;background:#0A0616;
}
.ph-ind{display:flex;align-items:center;gap:3px;color:#0F0B22;}
.ph-body{
  flex:1;min-height:0;position:relative;z-index:1;
  padding:5px 11px 0;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.ph-pill{
  border:1px solid rgba(15,11,34,.2);border-radius:20px;padding:2.5px 8px;
  font-family:var(--display);font-size:6.5px;font-weight:500;color:#3B3554;white-space:nowrap;
}
.ph-h{
  font-family:var(--display);font-size:12.5px;line-height:1.22;font-weight:500;
  letter-spacing:-.03em;color:#0F0B22;
}
.ph-h em{font-style:normal;background:#DBD1FB;border-radius:4px;padding:0 4px;color:#4B2FA8;}
.ph-cta{display:flex;align-items:center;gap:7px;}
.ph-btn{
  display:inline-flex;align-items:center;gap:3px;
  background:linear-gradient(90deg,#A88FF6,#8B7BEE);color:#fff;
  border-radius:20px;padding:3.5px 8px;
  font-family:var(--display);font-size:7px;font-weight:500;white-space:nowrap;
}
.ph-link{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--display);font-size:7px;font-weight:500;color:#0F0B22;white-space:nowrap;
}
.ph-blob{
  position:absolute;left:4%;bottom:-6px;width:56%;height:74px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#C4B2FA 0%,#8E77EF 55%,#6B50DE 100%);
  filter:blur(1px);z-index:0;
}
.ph-dash{
  margin-top:auto;width:100%;display:grid;grid-template-columns:1.55fr 1fr;
  gap:5px;position:relative;z-index:1;
}
.ph-tile{
  background:#fff;border:1px solid rgba(15,11,34,.07);
  border-radius:7px 7px 0 0;box-shadow:0 -2px 12px rgba(15,11,34,.09);
  padding:6px;display:flex;flex-direction:column;gap:4px;min-height:62px;
}
.ph-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.ph-kpi{display:flex;flex-direction:column;gap:2px;}
.ph-kpi b{font-family:var(--display);font-size:7.5px;font-weight:500;color:#0F0B22;}
.ph-kpi i{display:block;height:2px;border-radius:2px;background:#DBD1FB;}
.ph-spark{
  position:relative;overflow:hidden;height:15px;border-radius:3px;
  background:linear-gradient(to top,rgba(139,123,238,.2),transparent);
}
.ph-spark::before{
  content:"";position:absolute;left:0;right:0;bottom:3px;height:1.6px;background:#8B7BEE;
  clip-path:polygon(0 60%,17% 28%,34% 70%,51% 18%,68% 54%,85% 14%,100% 42%,100% 100%,0 100%);
}
.ph-av{width:13px;height:13px;border-radius:50%;background:linear-gradient(150deg,#C7B8FA,#8B7BEE);flex:none;}
.ph-row{display:flex;align-items:center;gap:4px;}
.ph-line{height:2.5px;border-radius:2px;background:rgba(15,11,34,.13);flex:1;}
.ph-line.s{width:58%;flex:none;}

/* floating device chips */
.chip-float{
  position:absolute;width:clamp(42px,12.5%,58px);aspect-ratio:1/1;
  border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(155deg,#FFFFFF,#EDE7FE);
  border:1px solid rgba(255,255,255,.85);color:#5B34D6;
  box-shadow:0 16px 32px -12px rgba(4,1,28,.55);
  animation:bob 4.5s ease-in-out infinite;z-index:3;
}
.chip-float.l{left:5%;top:60%;}
.chip-float.r{right:5%;top:42%;animation-delay:-2.2s;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

.card-c{
  background:#0C0820;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(342px,28vw,418px);
}
.tile-grid{
  position:absolute;inset:0;padding:16px 14px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px;align-content:start;
  animation:drift 30s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translateY(0);}to{transform:translateY(-34%);}}
.mini-tile{
  border:1px solid rgba(255,255,255,.13);border-radius:12px;
  background:rgba(255,255,255,.035);
  padding:13px 8px 12px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  color:rgba(255,255,255,.88);
}
.mini-tile svg{opacity:.82;flex:none;}
.mini-tile span{
  font-family:var(--display);font-size:11.5px;line-height:1.32;font-weight:500;
  color:rgba(255,255,255,.85);
}
/* gradient sampled from the reference: #A780F1 fading in downward,
   solid from 74% of the wash height to the card bottom */
.card-c-wash{
  position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;pointer-events:none;
  /* Huong anh sang: nguon sang o goc PHAI-DUOI, mau tham dan ve goc TRAI-DUOI
     — noi dat tieu de — nen chu trang noi han len.
     Lop 1: quang sang. Lop 2: truong mau cheo 118deg (tim tham -> tim sang). */
  background:
    radial-gradient(74% 118% at 97% 114%,
      rgba(238,226,255,.95)  0%,
      rgba(205,178,249,.74) 20%,
      rgba(170,132,242,.40) 44%,
      rgba(167,128,241,.12) 64%,
      rgba(167,128,241,0)   78%),
    linear-gradient(118deg,
      #2B1768   0%,
      #3E2286  18%,
      #5735B4  38%,
      #7551D6  57%,
      #9670EC  76%,
      #B28BF4  92%,
      #C6A4F8 100%);
  /* tan dan len tren de cac o ben tren khong bi cat ngang mot duong cung */
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 11%,rgba(0,0,0,.58) 22%,
    rgba(0,0,0,.86) 32%,#000 42%,#000 100%);
          mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 11%,rgba(0,0,0,.58) 22%,
    rgba(0,0,0,.86) 32%,#000 42%,#000 100%);
}
.card-c-foot{
  position:relative;z-index:2;background:transparent;
  padding:clamp(46px,4.5vw,66px) clamp(22px,2vw,30px) clamp(24px,2.2vw,32px);
}
.card-c-foot h3{
  font-size:clamp(20px,1.6vw,25px);line-height:1.3;
  letter-spacing:-.04em;color:#fff;
}
/* dong hai cua tieu de chuyen sac trang -> tim nhat, an theo huong anh sang */
.card-c-foot .cc-em{
  background:linear-gradient(96deg,#FFFFFF 0%,#F4ECFF 30%,#DCCBFC 66%,#C3A9F7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.card-tags{
  /* no frame: the wordmark itself is the card */
  position:relative;overflow:hidden;
  background:transparent;border:0;box-shadow:none;
  min-height:clamp(232px,19vw,290px);
  display:grid;place-items:center;
  padding:clamp(6px,.7vw,16px);
}
.card-tags:hover{transform:none;box-shadow:none;border-color:transparent;}
.tag-mark{
  position:relative;z-index:1;
  font-family:var(--display);font-weight:500;
  font-size:clamp(56px,12.8vw,200px);line-height:.92;letter-spacing:-.06em;
  background:linear-gradient(96deg,#FFFFFF 6%,#E4DCFC 38%,#A996F6 74%,#7C63E8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;user-select:none;
}
.tag-layer{position:absolute;inset:0;z-index:2;pointer-events:none;}
.tag{
  position:absolute;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(var(--sc,1));
  padding:clamp(6px,.65vw,11px) clamp(13px,1.25vw,22px);
  border-radius:999px;
  background:#0A0616;border:1px solid rgba(166,128,241,.85);
  font-family:var(--display);font-size:clamp(11px,1.05vw,16px);font-weight:500;
  color:#fff;white-space:nowrap;
  box-shadow:0 10px 26px -10px rgba(4,1,28,.95);
  transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.tag.out{opacity:0;--sc:.7;}
.card-seo{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 6%,#191139 0%,#0C0722 60%,#08051A 100%);
  padding:clamp(22px,1.8vw,32px);
  display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);
}
.seo-copy{
  flex:1;min-width:0;position:relative;z-index:1;
  display:flex;flex-direction:column;gap:clamp(9px,.8vw,13px);
}
.card-seo h3{
  font-size:clamp(20px,1.6vw,25px);line-height:1.3;
  letter-spacing:-.035em;color:#fff;
}
.card-seo p{font-size:clamp(14.5px,1.06vw,16px);line-height:1.78;}

/* mini search-results panel */
.serp{position:relative;flex:none;z-index:1;width:clamp(114px,33%,180px);}
.serp-panel{
  background:#F8F6FF;border-radius:10px;border:1px solid rgba(255,255,255,.55);
  box-shadow:0 22px 42px -16px rgba(4,1,28,.9);
  padding:7px;display:flex;flex-direction:column;gap:4px;
}
.serp-bar{display:flex;align-items:center;gap:4px;background:#EBE5FB;border-radius:20px;padding:3px 6px;}
.serp-bar svg{flex:none;color:#6D28D9;}
.serp-q{flex:1;height:3px;border-radius:2px;background:rgba(15,11,34,.22);}
.serp-row{border-radius:6px;padding:5px;display:flex;flex-direction:column;gap:3px;}
.serp-row.top{
  background:linear-gradient(120deg,#E8DFFD,#D7CAFB);
  animation:serpGlow 2.8s ease-in-out infinite;
}
@keyframes serpGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(109,40,217,.22),0 6px 14px -6px rgba(76,29,149,.35);}
  50%    {box-shadow:0 0 0 1px rgba(109,40,217,.5), 0 9px 20px -6px rgba(76,29,149,.8);}
}
.serp-row i{display:block;border-radius:2px;}
.serp-row i.u{height:2.5px;width:46%;background:#7C3AED;}
.serp-row i.t{height:4px;width:84%;background:rgba(15,11,34,.6);}
.serp-row i.b{height:2.5px;width:100%;background:rgba(15,11,34,.2);}
.serp-row i.b.s{width:62%;}
.serp-lens{
  position:absolute;right:-11%;bottom:-13%;
  width:clamp(36px,32%,56px);aspect-ratio:1/1;border-radius:50%;
  background:linear-gradient(150deg,#BBA9FB,#6B4FD8);
  border:1px solid rgba(255,255,255,.45);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 16px 32px -10px rgba(4,1,28,.9);
  animation:bob 4.8s ease-in-out infinite;
}
@media (max-width:767px){
  .card-seo{flex-direction:column;align-items:flex-start;gap:18px;}
  .seo-copy{flex:none;width:100%;}
  .serp{width:min(72%,230px);align-self:center;}
}

/* ============================================================
   S3 — Demos
   ============================================================ */
.sec-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:62px;}
.sec-head p{max-width:64ch;}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.2vw,34px);}
.demo{margin:0;}   /* <figure> keeps a 40px UA side margin otherwise */
.demo-frame{
  position:relative;border-radius:var(--radius-big);overflow:hidden;
  border:1px solid rgba(255,255,255,.15);background:#0B0722;
  aspect-ratio:375/288;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.demo:hover .demo-frame{transform:translateY(-6px);border-color:rgba(255,255,255,.6);box-shadow:0 26px 60px -26px rgba(137,128,241,.8);}
.demo-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:rgba(4,1,28,.58);opacity:0;transition:opacity .35s ease;
}
.demo:hover .demo-frame::after{opacity:1;}
.demo-scroll{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.demo:hover .demo-scroll{transform:scale(1.04);}
.demo-scroll .shot{height:100%;border-radius:0;border:0;}
.demo-view{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  opacity:0;transition:opacity .35s ease,transform .35s ease;z-index:3;
}
.demo:hover .demo-view{opacity:1;transform:translate(-50%,-50%) scale(1);}
.demo figcaption{margin-top:clamp(18px,1.6vw,26px);display:flex;flex-direction:column;gap:clamp(8px,.8vw,11px);}
.demo figcaption h3{font-family:var(--display);font-size:clamp(20px,1.62vw,27px);line-height:1.32;font-weight:500;letter-spacing:-.035em;color:#fff;}
.demo figcaption p{font-size:clamp(14.5px,1.08vw,16.5px);line-height:1.78;color:var(--text-muted-dk);}


/* ---------- S6 Linh vuc: luoi 3x2 khong vien, gradient tim cheo ----------
   Mau gradient + do mo duong ke lay tu anh mau:
   goc trai #837AE8 -> goc phai #161239 (ramp tuyen tinh), duong ke trang 20%.  */
#demos{
  background:
    linear-gradient(101deg,#6C64C0 0%,#58529E 26%,#443F7E 51%,#2C275C 77%,#161239 100%);
}
#demos .amb{display:none;}          /* gradient da lam nen, 2 glow cu se lam duc */
#demos .sec-head p{color:rgba(255,255,255,.92);}
/* .grad-text dung cho nen toi: dau gradient la tim dam -> tang tren nen tim
   se mat chu. Trong section nay dung trang dac. */
#demos .grad-text{background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:#fff;color:#fff;}
.dom-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.dom{
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(14px,1.3vw,20px);
  padding:clamp(34px,3.2vw,54px) clamp(24px,2.4vw,42px);
  transition:background .35s ease;
}
.dom:hover{background:rgba(255,255,255,.05);}
/* duong ke doc: moi o tru o cuoi hang */
.dom:not(:nth-child(3n))::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:1px;
  background:rgba(255,255,255,.20);
}
/* duong ke ngang: chi hang dau */
.dom:nth-child(-n+3)::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(255,255,255,.20);
}
.dom-ico{
  width:clamp(52px,4.3vw,62px);aspect-ratio:1;flex:none;
  display:grid;place-items:center;border-radius:13px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);
  color:#fff;
  transition:background .35s ease,border-color .35s ease,transform .35s ease,box-shadow .35s ease;
}
.dom-ico svg{width:56%;height:auto;display:block;}
.dom:hover .dom-ico{
  background:linear-gradient(150deg,#A680F1,#7C3AED);
  border-color:transparent;transform:translateY(-3px);
  box-shadow:0 14px 30px -12px rgba(124,58,237,.95);
}
.dom h3{
  font-family:var(--display);font-size:clamp(19px,1.5vw,25px);line-height:1.3;
  font-weight:500;letter-spacing:-.035em;color:#fff;text-wrap:balance;
}
.dom p{
  font-size:clamp(14.5px,1.05vw,16px);line-height:1.75;
  color:rgba(255,255,255,.92);max-width:30ch;
}

/* ---------- domain mockups (S3) ---------- */
.mk{gap:9px;}
.mk-row{display:flex;gap:9px;flex:1;min-height:0;}
.mk-col{display:flex;flex-direction:column;gap:8px;}
.mk-pos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;align-content:start;}
.mk-tile{border-radius:8px;height:38px;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.08);}
.mk-cart{width:76px;flex:none;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);padding:9px;display:flex;flex-direction:column;gap:7px;}
.mk-total{margin-top:auto;height:15px;border-radius:8px;background:linear-gradient(90deg,#A680F1,#8980F1);}
.mk-tbl{display:flex;flex-direction:column;gap:7px;flex:1;align-content:start;}
.mk-tr{display:flex;align-items:center;gap:9px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.08);}
.mk-tr .line{flex:1;}
.mk-chip{width:32px;height:11px;border-radius:6px;flex:none;background:rgba(137,128,241,.6);}
.mk-chip.ok{background:rgba(173,230,111,.55);}
.mk-chip.warn{background:rgba(242,65,92,.5);}
.mk-course{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:1;align-content:start;}
.mk-card{border-radius:8px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);padding:8px;display:flex;flex-direction:column;gap:6px;}
.mk-thumb{height:24px;border-radius:5px;background:linear-gradient(150deg,#8980F1,#3A2A7E);}
.mk-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;}
.mk-bar i{display:block;height:100%;background:linear-gradient(90deg,#A680F1,#8980F1);}
.mk-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mk-kpi > div{border-radius:8px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);padding:9px;display:flex;flex-direction:column;gap:6px;}
.mk-gauge{display:flex;align-items:center;gap:8px;}
.mk-gauge .line{flex:1;}
.mk-int{position:relative;flex:1;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;}
.mk-node{
  border-radius:8px;border:1px solid rgba(255,255,255,.22);
  background:rgba(11,7,34,.9);height:32px;display:grid;place-items:center;
  position:relative;z-index:1;
}
.mk-hub{
  width:36px;height:36px;border-radius:50%;position:relative;z-index:1;
  background:linear-gradient(150deg,#A680F1,#6B4FD8);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 0 0 6px rgba(137,128,241,.14);
}
.mk-hub::before,.mk-hub::after{
  content:"";position:absolute;top:50%;width:16px;
  border-top:1px dashed rgba(255,255,255,.5);
}
.mk-hub::before{right:100%;}
.mk-hub::after{left:100%;}

/* ============================================================
   S4 / S6 — light sections
   ============================================================ */
.light-sec{color:var(--text-dark);overflow:hidden;}
.light-sec .h2{color:var(--text-dark);}
.sec-elementor{background:linear-gradient(90deg,#FDF7FD 0%,#EFDFFA 45%,#7C3AED 100%);}
.sec-woo{background:linear-gradient(90deg,#FDF7FD 0%,#EDDCFB 42%,#8B3FF5 100%);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.split-woo{grid-template-columns:1fr 1.2fr;}
.split-text{display:flex;flex-direction:column;gap:22px;align-items:flex-start;}
.chip-list{display:flex;flex-wrap:wrap;gap:12px;max-width:520px;}
.chip-out{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(4,1,28,.35);border-radius:var(--pill);
  padding:10px 18px;font-family:var(--display);font-size:15px;font-weight:500;color:var(--text-dark);
  background:rgba(255,255,255,.35);
  transition:background .3s ease,transform .3s ease;
}
.chip-out:hover{background:rgba(255,255,255,.7);transform:translateY(-2px);}
.chip-out .tick{
  width:18px;height:18px;border-radius:50%;background:var(--text-dark);
  display:grid;place-items:center;flex:none;
}
.brandmark{display:flex;align-items:center;gap:10px;}


/* ============================================================
   S7 Cong nghe — so do bang mach (PCB), tai hien tu anh mau
   Anh mau nen kem #FAF2E0 + vien do #AE5251; o day chuyen sang
   he tim cua Base Tech. Toa do trong khong gian viewBox 1440x880.
   ============================================================ */
#tech{background:linear-gradient(180deg,#FCF9FE 0%,#F6F0FD 52%,#F1E9FB 100%);}
#tech .split{display:block;}
.pcb-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:clamp(26px,3vw,52px);}
.pcb-head .h2{font-size:clamp(27px,3.1vw,44px);line-height:1.2;letter-spacing:-.045em;color:var(--text-dark);}
.pcb-head p{max-width:70ch;color:var(--text-muted-lt);}

.pcb{position:relative;width:100%;max-width:1440px;margin-inline:auto;aspect-ratio:1440/760;}
.pcb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}

/* --- duong mach --- */
.tr{fill:none;stroke:rgba(124,58,237,.55);stroke-width:1.9;stroke-linecap:round;}
.tr-dot{fill:#2A1B6B;}
/* ve mach khi cuon toi */
.pcb.in .tr{stroke-dasharray:100;stroke-dashoffset:100;animation:trDraw 1.15s ease-out forwards;}
@keyframes trDraw{to{stroke-dashoffset:0;}}
.pcb.in .tr-dot{opacity:0;animation:dotPop .4s ease-out forwards;}
@keyframes dotPop{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:scale(1);}}
/* xung sang chay tu chip ra tung khoi */
.pulse{fill:none;stroke:#8B5CF6;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:7 93;stroke-dashoffset:100;opacity:0;
  filter:drop-shadow(0 0 5px rgba(139,92,246,.95));}
.pcb.lit .pulse{opacity:1;animation:trPulse 3.4s linear infinite;}
@keyframes trPulse{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}

/* --- chip trung tam --- */
.pcb-chip{
  position:absolute;left:41.32%;top:42.76%;width:17.36%;height:14.47%;
  border-radius:12px;display:grid;place-items:center;gap:6px;
  background:linear-gradient(150deg,#141036 0%,#0A0722 55%,#120D30 100%);
  border:2px solid rgba(166,128,241,.85);
  box-shadow:0 0 0 6px rgba(124,58,237,.10),0 22px 50px -18px rgba(42,27,107,.6),
             inset 0 1px 0 rgba(255,255,255,.14);
  z-index:3;
}
.pcb-chip::before,.pcb-chip::after{  /* chan chip hai ben */
  content:"";position:absolute;top:14%;bottom:14%;width:7px;border-radius:2px;
  background:repeating-linear-gradient(180deg,rgba(166,128,241,.9) 0 9px,transparent 9px 20px);
}
.pcb-chip::before{left:-7px;}
.pcb-chip::after{right:-7px;}
.pcb-chip .cn{
  font-family:var(--display);font-weight:500;color:#fff;
  font-size:clamp(15px,1.72vw,27px);letter-spacing:.10em;line-height:1;
}
.pcb-chip .cs{
  font-family:var(--display);font-size:clamp(7.5px,.72vw,11px);font-weight:500;
  letter-spacing:.20em;line-height:1;
  background:linear-gradient(90deg,#A680F1,#63D7F5 45%,#A5F3B0 78%,#F5D06A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pcb-chip .halo{
  position:absolute;inset:-34%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(124,58,237,.26) 0%,rgba(124,58,237,0) 68%);
  animation:chipBreath 4.2s ease-in-out infinite;
}
@keyframes chipBreath{0%,100%{opacity:.55;transform:scale(.94);}50%{opacity:1;transform:scale(1.06);}}

/* --- khoi nhom --- */
.pcb-box{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  background:#FFFFFF;
  border:1px solid rgba(124,58,237,.40);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%);
  z-index:2;opacity:0;transform:translateY(10px);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.pcb.in .pcb-box{animation:boxIn .55s cubic-bezier(.2,.7,.3,1) var(--bd,0ms) forwards;}
@keyframes boxIn{to{opacity:1;transform:translateY(0);}}
.pcb-box:hover{border-color:rgba(124,58,237,.85);box-shadow:0 16px 38px -18px rgba(84,44,180,.5);}
.pcb-box > b{
  display:block;padding:7px 12px;
  border-bottom:1px solid rgba(124,58,237,.22);
  font-family:var(--display);font-size:clamp(9px,.86vw,13px);font-weight:500;
  letter-spacing:.13em;color:#4A2C9B;
}
.pcb-cells{display:grid;grid-template-columns:repeat(var(--c),1fr);}
.pcb-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:clamp(8px,.85vw,14px) 4px;position:relative;
  transition:background .28s ease;
}
.pcb-cell + .pcb-cell{border-left:1px solid rgba(124,58,237,.20);}
.pcb-cells.two-row .pcb-cell:nth-child(n+3){border-top:1px solid rgba(124,58,237,.20);}
.pcb-cells.two-row .pcb-cell:nth-child(3){border-left:0;}
/* luoi 4 cot x 2 hang (DEVOPS) */
.pcb-cells.rows2c4 .pcb-cell:nth-child(n+5){border-top:1px solid rgba(124,58,237,.20);}
.pcb-cells.rows2c4 .pcb-cell:nth-child(5){border-left:0;}
.pcb-cell:hover{background:rgba(124,58,237,.055);}
.pcb-cell svg{width:clamp(20px,2.15vw,34px);height:auto;display:block;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.pcb-cell:hover svg{transform:translateY(-3px) scale(1.1);}
.pcb-cell span{
  font-family:var(--display);font-size:clamp(8px,.78vw,12.5px);font-weight:500;
  line-height:1.25;text-align:center;color:#2C1C63;letter-spacing:-.01em;
}

@media (max-width:991px){
  /* so do PCB khong doc duoc o kho hep -> chuyen thanh luoi thuong */
  .pcb{aspect-ratio:auto !important;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px;}
  .pcb-svg{display:none;}
  .pcb-chip{position:static;left:auto;top:auto;width:auto;height:auto;
    grid-column:1 / -1;padding:20px 16px;min-height:96px;}
  .pcb-chip .halo{display:none;}
  /* chan chip la position:absolute -> khi chip thanh static no se neo vao .pcb
     va keo dai suot hai canh luoi. Phai an di. */
  .pcb-chip::before,.pcb-chip::after{display:none;}
  .pcb-box{position:static;left:auto;top:auto;width:auto;opacity:1;transform:none;}
  .pcb.in .pcb-box{animation:none;}
}
@media (max-width:520px){
  .pcb{grid-template-columns:1fr;}
}

/* ---------- S4: tech stack — orbiting sphere ---------- */
.tech-title{font-size:clamp(28px,3.2vw,42px);line-height:1.22;letter-spacing:-.045em;}
.chip-out b{color:#6D28D9;font-weight:500;}

.orb{
  position:relative;width:100%;max-width:560px;aspect-ratio:1/1;
  margin-inline:auto;
}
.orb-ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(60,20,130,.3);
}
.orb-ring.r1{width:70%;height:70%;}
.orb-ring.r2{width:90%;height:90%;border-color:rgba(60,20,130,.2);}

/* glass bubble: colour gathers at the rim, clears toward the centre */
.orb-ball{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52%;height:52%;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(196,181,253,0)   0%,
      rgba(166,128,241,.04) 40%,
      rgba(137,128,241,.16) 62%,
      rgba(109,40,217,.40)  82%,
      rgba(80,26,168,.62)   94%,
      rgba(70,22,150,.72)   99%,
      rgba(70,22,150,.24)  100%),
    radial-gradient(circle at 76% 78%,
      rgba(124,58,237,.34) 0%, rgba(124,58,237,0) 58%);
  -webkit-backdrop-filter:blur(1px) saturate(1.22);
  backdrop-filter:blur(1px) saturate(1.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.62),
    inset 0 1px 3px rgba(255,255,255,.5),
    inset -12px -16px 40px rgba(70,22,150,.26),
    0 34px 80px -34px rgba(76,29,149,.55),
    0 0 60px 4px rgba(166,128,241,.22);
}
/* soft specular sweep, upper left */
.orb-ball::before{
  content:"";position:absolute;left:13%;top:11%;width:44%;height:30%;
  border-radius:50%;transform:rotate(-20deg);filter:blur(5px);
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);
}
/* small crisp glint, lower right */
.orb-ball::after{
  content:"";position:absolute;right:17%;bottom:15%;width:14%;height:10%;
  border-radius:50%;filter:blur(2px);
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.65),rgba(255,255,255,0) 72%);
}
.orb-logo{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:clamp(14px,2.1vw,20px);font-weight:500;
  letter-spacing:-.03em;color:var(--text-dark);
  text-shadow:0 1px 14px rgba(255,255,255,.7);
}
.orb-badge{
  position:absolute;width:15%;aspect-ratio:1/1;border-radius:50%;
  display:grid;place-items:center;background:#FFFFFF;
  box-shadow:0 16px 34px -12px rgba(46,16,110,.45),0 2px 6px rgba(46,16,110,.12);
  animation:bob 5.6s ease-in-out infinite;
}
.orb-badge .lbl{
  font-family:var(--display);font-size:clamp(9px,1.15vw,13px);font-weight:500;
  letter-spacing:-.02em;color:#512BD4;
}

/* ---------- S6: About — team photo frame ---------- */
.lbl-purple{
  font-family:var(--display);font-size:14px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:#6D28D9;
}
.team{position:relative;width:100%;max-width:620px;margin-inline:auto;}
.team-echo{
  position:absolute;inset:0;border-radius:34px;
  border:1.5px solid rgba(76,29,149,.34);
  transform:translate(20px,20px);pointer-events:none;
}
.team-frame{
  position:relative;aspect-ratio:4/3;padding:10px;
  border-radius:34px;background:#fff;
  box-shadow:0 44px 92px -38px rgba(46,16,110,.55),0 2px 8px rgba(46,16,110,.1);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease;
}
.team:hover .team-frame{transform:translate(-4px,-4px);box-shadow:0 52px 100px -34px rgba(46,16,110,.6);}
.team-frame > img,.team-ph{
  width:100%;height:100%;border-radius:26px;display:block;
}
.team-frame > img{object-fit:cover;}
.team-ph{
  background:
    radial-gradient(circle at 26% 22%,rgba(255,255,255,.75),transparent 52%),
    linear-gradient(150deg,#EFE9FC 0%,#D9C9F8 52%,#B7A0F1 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:#4B2E9E;text-align:center;padding:24px;
}
.team-ph span{
  font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:.04em;
  color:#4B2E9E;opacity:.85;
}

.tag-float{
  position:absolute;background:#fff;border-radius:10px;padding:8px 14px;
  font-family:var(--display);font-size:12px;font-weight:500;color:var(--text-dark);
  box-shadow:0 16px 36px -14px rgba(4,1,28,.45),0 1px 4px rgba(4,1,28,.1);
  z-index:3;
}

/* ============================================================
   S5 — inner pages
   ============================================================ */

.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.frow-card{
  position:relative;border-radius:var(--radius-big);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);padding:30px 28px;min-height:400px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.frow-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.6);box-shadow:0 24px 60px -26px rgba(137,128,241,.8);}
.frow-card h3{font-size:24px;line-height:34px;letter-spacing:-.04em;color:#fff;}
.frow-card.purple{background:linear-gradient(160deg,#8B7BEE,#5B41CE);}
.frow-card.purple p{color:rgba(255,255,255,.86);}
.frow-card.dark{background:#0E0A20;}
.frow-link{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:14px;font-weight:500;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px;
  transition:border-color .3s ease,gap .3s ease;
}
.frow-link:hover{border-color:#fff;gap:13px;}
.frow-card{gap:13px;}
.frow-media{position:relative;margin-top:auto;height:170px;}
.frow-media .shot{position:absolute;left:8%;right:-6%;bottom:-30px;height:180px;box-shadow:0 26px 54px -22px rgba(0,0,0,.8);}
.starfield{position:absolute;inset:0;pointer-events:none;}

/* ---------- S5: horizontal pinned project gallery ---------- */
.hgal{position:relative;}
.hgal-vp{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;gap:22px;
  padding:112px 0 clamp(40px,6vh,72px);
}
.hgal-bar{
  flex:none;display:flex;align-items:center;gap:20px;
  padding-inline:clamp(20px,3.2vw,60px);
}
.hgal-count{
  flex:none;font-family:var(--display);font-size:13px;font-weight:500;
  letter-spacing:.1em;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;
}
.hgal-prog{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;}
.hgal-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#A680F1,#8980F1);}
.hgal-track{
  flex:1;min-height:0;display:flex;gap:30px;align-items:stretch;
  padding-inline:clamp(20px,3.2vw,60px);will-change:transform;
}
.hp{flex:none;width:min(62vw,880px);display:flex;flex-direction:column;justify-content:center;gap:18px;}
.hp-media{
  /* Khung chay dung ti le anh that (2534x1524) va khong vuot qua chieu cao
     panel. O man det (1366x768) chieu cao bi chan nen khung det hon anh —
     luc do background-size:cover tu phong to anh cho lap kin, chi an vao
     phan le gradient quanh tablet. */
  flex:0 1 auto;aspect-ratio:2534/1524;width:100%;height:auto;max-height:100%;
  min-height:0;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 34px 74px -32px rgba(0,0,0,.85);
}
.hp-media .shot{height:100%;border:0;border-radius:0;}
/* ============================================================
   Khung TABLET ve bang CSS — man hinh fill anh chup that cua san pham.
   Uu diem so voi anh mockup dung san: ba (bon) slide dung chung mot khung,
   doi anh chi can doi mot data URI, va khung luon net o moi do phan giai.
   Ti le: man hinh 1901x912 (2.084) + vien 2.4% moi canh -> khung 1000/505.
   ============================================================ */
.hp-media.hp-dev{
  border:0;box-shadow:none;background:transparent;overflow:visible;
  display:grid;place-items:center;
}
/* quang sang hat duoi may, tao chieu sau tren nen toi */
.hp-dev::after{
  content:"";position:absolute;left:6%;right:6%;bottom:2%;height:22%;z-index:0;
  pointer-events:none;
  background:radial-gradient(58% 100% at 50% 60%,rgba(137,128,241,.38),rgba(137,128,241,0) 72%);
  filter:blur(30px);
}
.tab{
  /* max-height de o man det khung tablet tu thu nho lai cho vua, khong tran ra ngoai */
  /* chieu CAO lam goc, chieu rong suy ra tu ti le va bi chan boi max-width:
     o man det khung tu thu nho, o man cao khung khong phinh qua be ngang panel */
  /* Khong mot to hop CSS nao vua duoc CA hai truong hop, nen tach lam hai:
     - khung CAO hon ti le tablet (man hinh cao) -> chieu RONG la rang buoc;
     - khung DET hon ti le tablet (man hinh thap) -> chieu CAO la rang buoc,
       xu ly o media query (max-height:820px) ben duoi. */
  position:relative;z-index:1;width:100%;height:auto;max-height:100%;min-width:0;
  aspect-ratio:1000/505;
  padding:2.4%;border-radius:clamp(13px,1.6vw,26px);
  background:linear-gradient(155deg,#37324F 0%,#1D1936 34%,#0D0A1E 70%,#191531 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 2px 0 rgba(0,0,0,.5),
    0 40px 80px -32px rgba(0,0,0,.95);
}
.tab-scr{
  display:block;width:100%;height:100%;
  border-radius:clamp(5px,.7vw,12px);
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55);
}
/* camera giua vien tren: top = 1.2% chieu RONG -> quy ra % chieu CAO */
.tab-cam{
  position:absolute;left:50%;top:2.38%;transform:translate(-50%,-50%);
  width:.62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#5B5480,#0A0817 72%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
@media (max-height:820px){
  /* panel thap: khung anh det hon ti le tablet -> lay chieu cao lam goc */
  .tab{width:auto;height:100%;max-width:100%;max-height:none;}
}
@media (max-width:767px){
  .hp-dev::after{display:none;}
}
/* Anh chup that cua du an — nhung o do phan giai goc 2534x1524 (WebP q84)
   de khong vo net tren man Retina. Khung da dung dung ti le anh nen cover
   khong cat gi; neu khung bi chan chieu rong thi anh tu phong to cho vua. */
.hp-media{position:relative;}
.hp-shot{background-repeat:no-repeat;background-image:url("elearning-shot.webp");}
.hp-shot2{background-repeat:no-repeat;background-image:url("hokinhdoanh-danakid-shot.webp");}
.hp-shot3{background-repeat:no-repeat;background-image:url("sportal-shot.webp");}
.hp-shot6{background-repeat:no-repeat;background-image:url("vinacms-shot.webp");}
.hp-shot5{background-repeat:no-repeat;background-image:url("daklaoruco-shot.webp");}
.hp-shot4{background-image:url("marquee-tablet-mq1.webp");}
.mq1{--ar:1901/912;}
.mq2{--ar:1901/912;background-image:url("marquee-tablet-mq2.webp");}
.mq3{--ar:1901/920;background-image:url("marquee-tablet-mq3.webp");}
.mq4{--ar:813/842;background-image:url("marquee-tablet-mq4.webp");}
.mq5{--ar:2648/1586;background-image:url("marquee-tablet-mq5.webp");}
.mq6{--ar:2880/1624;background-image:url("marquee-tablet-mq6.webp");}
.mq7{--ar:2880/1624;background-image:url("marquee-tablet-mq7.webp");}
.mq8{--ar:2880/1624;background-image:url("marquee-tablet-mq8.webp");}
.mq9{--ar:2880/1624;background-image:url("marquee-tablet-mq9.webp");}
.mq10{--ar:2880/1624;background-image:url("marquee-tablet-mq10.webp");}
.mq11{--ar:2880/1624;background-image:url("marquee-tablet-mq11.webp");}
.hp-media .hp-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.hp-foot{flex:none;display:flex;align-items:flex-start;gap:24px;}
.hp-tag{
  display:inline-block;margin-bottom:9px;padding:4px 11px;border-radius:6px;
  background:rgba(137,128,241,.18);border:1px solid rgba(137,128,241,.45);
  font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:#C4B5FD;
}
.hp-title{font-family:var(--display);font-size:clamp(18px,1.55vw,24px);line-height:1.3;font-weight:500;letter-spacing:-.035em;color:#fff;}
/* chua 3 dong: giu chieu cao chan panel bang nhau o ca 3 du an, nho vay
   ba khung anh luon cao bang nhau khi cuon ngang (truoc day panel sPortal
   co mo ta 3 dong nen khung anh bi ep thap hon 22px o man <=900px). */
.hp-desc{font-size:14px;line-height:24px;color:var(--text-muted-dk);margin-top:7px;max-width:70ch;min-height:72px;}
.hp-link{
  flex:none;align-self:flex-end;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:14px;font-weight:500;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px;
  transition:border-color .3s ease,gap .3s ease;
}
.hp-link:hover{border-color:#fff;gap:13px;}

@media (max-width:991px){
  .hgal{height:auto !important;}
  .hgal-vp{position:static;height:auto;padding:0;overflow:visible;}
  .hgal-track{
    transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:10px;gap:18px;
  }
  .hp{width:min(84vw,620px);scroll-snap-align:center;}
  .hp-media{aspect-ratio:2534/1524;flex:none;height:auto;width:100%;max-height:none;}
  .hp-foot{flex-direction:column;gap:12px;}
  .hp-link{align-self:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  .hgal{height:auto !important;}
  .hgal-vp{position:static;height:auto;padding:0;overflow:visible;}
  .hgal-track{transform:none !important;overflow-x:auto;}
}

/* ---------- S5: screenshot marquee (swap in real images here) ---------- */
.marquee-wrap{display:flex;flex-direction:column;gap:22px;overflow:hidden;}
.marquee{display:flex;gap:22px;width:max-content;}
.marquee.a{animation:mq-left 46s linear infinite;}
.marquee.b{animation:mq-right 52s linear infinite;}
.marquee-wrap:hover .marquee{animation-play-state:paused;}
@keyframes mq-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes mq-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
/* moi o cua bang chay la MOT khung tablet nho, man hinh la anh chup that.
   Chieu cao co dinh, chieu rong suy ra tu ti le tung anh (--ar) nen anh
   khong bi cat: o ngang thi rong, o dung thi hep. */
.marquee .mqt{
  --h:210px;
  flex:none;height:var(--h);padding:5px;border-radius:12px;position:relative;
  background:linear-gradient(155deg,#37324F 0%,#1D1936 34%,#0D0A1E 70%,#191531 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 18px 34px -18px rgba(0,0,0,.9);
}
.marquee .mqt > i{
  display:block;height:100%;aspect-ratio:var(--ar);border-radius:7px;
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.marquee .mqt::before{            /* cham camera */
  content:"";position:absolute;left:50%;top:2.5px;transform:translate(-50%,-50%);
  width:2.5px;height:2.5px;border-radius:50%;background:#5B5480;
}
@media (max-width:767px){
  .marquee .mqt{--h:150px;padding:4px;border-radius:9px;}
  .marquee .mqt > i{border-radius:5px;}
}

/* ---------- S7: How-We-Work panel ---------- */

.hw-steps{
  /* 1fr tracks inside a max-content grid all equalise to the widest pill */
  display:grid;width:max-content;max-width:100%;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;gap:12px;margin:0 auto 52px;
}
.hw-pill{
  text-align:center;
  border:1px solid rgba(255,255,255,.18);border-radius:12px;
  background:rgba(255,255,255,.03);padding:13px 24px;
  font-family:var(--display);font-size:15px;font-weight:500;
  color:rgba(255,255,255,.82);line-height:1.25;
  transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.hw-link{flex:none;display:flex;align-items:center;color:rgba(255,255,255,.55);transition:color .3s ease;}
.hw-pill.is-on + .hw-link{color:var(--purple-light);}
.hw-pill:hover{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06);}
.hw-pill.is-on{
  background:linear-gradient(90deg,#A680F1 0%,#8980F1 100%);
  border-color:#A680F1;color:#fff;
  box-shadow:0 12px 32px -12px rgba(137,128,241,.85);
}

.hw-panel{
  border:1px solid rgba(255,255,255,.12);border-radius:28px;
  background:rgba(255,255,255,.025);padding:clamp(16px,1.6vw,28px);
}
.hw-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.2vw,20px);}
.hw-card{
  position:relative;display:flex;flex-direction:column;min-height:352px;
  border:1px solid rgba(255,255,255,.1);border-radius:18px;
  background:#0C0824;padding:clamp(24px,1.9vw,32px) clamp(20px,1.7vw,30px) clamp(26px,2vw,34px);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
/* .is-hot = the tuong ung khi hover TAB o tren: dung hieu ung nhu hover truc tiep vao the */
.hw-card:hover,.hw-card.is-hot{transform:translateY(-5px);border-color:rgba(255,255,255,.34);}
/* purple wash grows in from the bottom-right corner on hover */
.hw-card > *{position:relative;z-index:1;}
.hw-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  pointer-events:none;
  background:radial-gradient(132% 132% at 100% 100%,
    rgba(180,156,248,.92) 0%,
    rgba(142,121,238,.62) 32%,
    rgba(91,65,206,.26) 60%,
    rgba(12,8,36,0)     84%);
  opacity:0;transform:scale(.5);transform-origin:100% 100%;
  transition:opacity .5s ease,transform .65s cubic-bezier(.2,.7,.3,1);
}
.hw-card:hover::after,.hw-card.is-hot::after{opacity:1;transform:scale(1);}
/* icon tile fills with the brand gradient at the same time
   (written at .is-on specificity because hovering a card also selects it) */
.hw-card:hover .hw-ico,
.hw-card.is-on:hover .hw-ico,
.hw-card.is-hot .hw-ico,
.hw-card.is-on.is-hot .hw-ico{
  background:linear-gradient(145deg,#BCA6FA 0%,#8E79EE 46%,#6B4FD8 100%);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 12px 26px -10px rgba(56,28,142,.8);
}
.hw-card.is-on{
  border-color:transparent;
  background:
    linear-gradient(#0C0824,#0C0824) padding-box,
    linear-gradient(155deg,#A680F1 0%,#8980F1 45%,#3E2FA0 100%) border-box;
  box-shadow:0 18px 48px -20px rgba(137,128,241,.8);
}
.hw-ico{
  width:64px;height:64px;border-radius:50%;flex:none;
  border:1px solid rgba(166,128,241,.5);background:rgba(137,128,241,.12);
  display:grid;place-items:center;color:#fff;
  transition:border-color .35s ease,background .35s ease,box-shadow .35s ease;
}
.hw-card.is-on .hw-ico{
  border-color:#A680F1;background:rgba(166,128,241,.22);
  box-shadow:0 0 0 6px rgba(137,128,241,.12);
}
.hw-card h3{
  font-family:var(--display);font-size:clamp(19px,1.35vw,22px);line-height:1.36;font-weight:500;
  letter-spacing:-.035em;color:#fff;margin-top:36px;text-wrap:balance;
}
.hw-card p{font-size:clamp(14px,1vw,15.5px);line-height:1.78;color:var(--text-muted-dk);margin-top:13px;}

@media (max-width:1199px){
  .hw-grid5{grid-template-columns:repeat(3,1fr);}
  .hw-link{display:none;}
  .hw-steps{grid-template-columns:repeat(3,1fr);width:100%;}
}
@media (max-width:991px){
  .hw-grid5{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .hw-grid5{grid-template-columns:1fr;gap:14px;}
  .hw-card{min-height:0;padding:24px 20px;}
  .hw-ico{width:52px;height:52px;}
  .hw-card h3{margin-top:18px;}
  .hw-panel{padding:14px;border-radius:20px;}
  .hw-steps{display:flex;flex-wrap:nowrap;width:auto;overflow-x:auto;justify-content:flex-start;padding-bottom:8px;margin-bottom:34px;}
  .hw-pill{white-space:nowrap;flex:none;padding:11px 18px;font-size:14px;}
}

/* ============================================================
   S8 — final CTA
   ============================================================ */
.cta{
  --sph:clamp(520px,62.5vw,1150px);
  --sph-top:150px;
  position:relative;min-height:880px;display:flex;align-items:flex-start;justify-content:center;
  overflow:hidden;background:var(--bg-deep);
  padding:calc(var(--sph-top) + var(--sph) * .182) 0 0;
}
/* backlit sphere — rim lit, dark core (colours sampled from ref) */
.sphere{
  position:absolute;left:50%;top:var(--sph-top);transform:translateX(-50%);
  width:var(--sph);height:var(--sph);border-radius:50%;z-index:1;
  background:
    linear-gradient(180deg,
      rgba(6,2,72,0) 0%,rgba(6,2,72,.30) 25%,rgba(6,2,72,.66) 44%,
      rgba(5,1,50,.90) 58%,rgba(4,1,28,1) 70%,rgba(4,1,28,1) 100%),
    radial-gradient(circle closest-side at 50% 50%,
      #04011C 0%,#04011C 57%,#0B052C 63%,#150C46 68%,#20135C 73%,
      #2F1C80 79%,#422BAB 84%,#5A40C8 89%,#7E68DC 95%,#A294E6 98%,#D6CDF5 100%);
}
/* orbit rings — concentric with the sphere, 1.30x / 1.90x its diameter */
.orbit{
  position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;
  width:var(--od);height:var(--od);pointer-events:none;
  top:calc(var(--sph-top) + var(--sph)/2 - var(--od)/2);
}
.orbit.o1{--od:calc(var(--sph) * 1.30);border:1px solid rgba(255,255,255,.30);}
.orbit.o2{--od:calc(var(--sph) * 1.90);border:1px solid rgba(255,255,255,.19);}
.cta-stack{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:30px;text-align:center;
}
.cta-stack .logo{font-size:30px;}
.cta-stack h2{max-width:15ch;color:#fff;}
.nb{white-space:nowrap;}
.cta-stack .btn{margin-top:6px;padding:17px 34px;font-size:17px;}
/* Quy trinh -> CTA: bo khoang trong giua hai phan, vong cung cua qua cau bat dau ngay duoi cac the */
#features{padding-bottom:32px;}

/* ============================================================
   Footer — recreated from ref (colours sampled from the shot)
   ============================================================ */
.ft{
  position:relative;
  background:linear-gradient(180deg,#1A1534 0%,#150F2F 25%,#100927 52%,#0C0724 80%,#090522 100%);
}
.ft-body{position:relative;padding:120px 0 128px;overflow:hidden;}
.ft-body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(36% 82% at 50.7% -4%,
    rgba(155,123,232,.52) 0%,rgba(155,123,232,.35) 22%,
    rgba(155,123,232,.19) 45%,rgba(155,123,232,.08) 68%,
    rgba(155,123,232,.02) 86%,rgba(155,123,232,0) 100%);
}
.ft-grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  gap:40px;
}
.ft-brand .logo{font-size:30px;}
.ft-tag{
  margin-top:28px;max-width:520px;
  font-family:var(--display);font-weight:400;font-size:32px;line-height:44px;
  letter-spacing:-.03em;color:#fff;
}
.ft-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;}
.ft-pill{
  display:inline-flex;align-items:center;height:36px;padding:0 18px;
  border-radius:999px;border:1px solid rgba(255,255,255,.38);
  font-family:var(--display);font-size:15px;font-weight:500;color:#fff;
  transition:background .3s ease,border-color .3s ease;
}
.ft-pill:hover{background:rgba(255,255,255,.10);border-color:#fff;}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;}
.ft-col h3{
  font-family:var(--display);font-weight:500;font-size:23px;line-height:1.2;
  letter-spacing:-.03em;color:#fff;margin-bottom:27px;
}
.ft-col a{
  font-size:16px;line-height:24px;color:rgba(255,255,255,.80);
  padding-block:6px;transition:color .3s ease;
}
.ft-col a:hover{color:#fff;}
.ft-bar{position:relative;background:#03011B;padding:33px 0;}
.ft-bar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.70) 50%,rgba(255,255,255,.04) 100%);
}
.ft-bar-grid{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  gap:40px;align-items:center;
}
.ft-bar-grid p,.ft-bar-grid a{font-size:16px;line-height:24px;color:rgba(255,255,255,.62);}
.ft-bar-grid a{transition:color .3s ease;}
.ft-bar-grid a:hover{color:#fff;}

/* ============================================================
   Fixed UI
   ============================================================ */
.to-top{
  position:fixed;right:26px;bottom:26px;z-index:150;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(150deg,#A680F1,#6B4FD8);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 14px 34px -12px rgba(137,128,241,.9);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s ease,visibility .35s ease,transform .35s ease;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.side-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:140;
  background:linear-gradient(180deg,#A680F1,#6B4FD8);color:#fff;
  border-radius:8px 0 0 8px;padding:16px 8px;
  font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.06em;
  writing-mode:vertical-rl;
}

/* ============================================================
   S2b — "Our Services" (RTL light section, recreated from ref)
   ============================================================ */
.svc{
  --svc-accent:#7C3AED;
  --svc-ink:var(--text-dark);
  --svc-body:var(--text-muted-lt);
  --svc-card:#F4F1FB;
  --svc-card-hover:#EEE9F9;
  position:relative;background:#FFFFFF;color:var(--svc-ink);
  font-family:var(--body);
  /* overflow:clip cat duoc blob NHUNG khong pha position:sticky cua .svc-left.
     overflow:hidden se lam sticky ngung hoat dong -> dung doi lai. */
  overflow:hidden;overflow:clip;
  padding-block:110px;
}
.svc h2,.svc h3,.svc .svc-eyebrow,.svc .svc-cta{font-family:var(--display);}
.svc-blob{position:absolute;left:-190px;bottom:-150px;width:min(760px,52vw);z-index:0;pointer-events:none;}
.svc-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.28fr;gap:clamp(36px,3.6vw,64px);align-items:start;}

/* --- left column --- */
.svc-left{
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
  align-self:start;position:sticky;top:clamp(104px,11vh,132px);
}
.svc-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--svc-accent);font-size:16px;font-weight:500;line-height:1;letter-spacing:.01em;}
.svc-title{
  font-size:clamp(26px,3.5vw,50px);line-height:1.18;font-weight:400;
  letter-spacing:-.04em;color:var(--svc-ink);
  margin:0;text-wrap:initial;
}
.svc-grad{
  background:linear-gradient(90deg,#8980F1 0%,#7C3AED 42%,#2A1B6B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-lead{font-size:clamp(16px,1.2vw,18px);line-height:1.85;color:var(--svc-body);max-width:56ch;}
.svc-cta{
  display:inline-flex;align-items:center;gap:14px;
  width:max-content;flex:none;white-space:nowrap;
  background:#fff;border:1px solid rgba(4,1,28,.22);border-radius:var(--pill);
  padding:11px 32px 11px 11px;margin-top:20px;
  font-size:clamp(16px,1.15vw,17px);font-weight:500;color:var(--svc-ink);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.svc-cta:hover{border-color:var(--purple);box-shadow:0 12px 28px -14px rgba(124,58,237,.6);transform:translateY(-2px);}
.svc-cta .lbl{flex:none;}
.svc-cta .svc-badge{
  position:static;width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;box-shadow:none;
  background:linear-gradient(135deg,#A680F1 0%,#7C3AED 100%);color:#fff;
}
.svc-cta .svc-badge svg{transition:transform .3s ease;}
.svc-cta:hover .svc-badge svg{transform:translate(2px,-2px);}

/* --- right column: 3 card ngang xep doc, watermark icon, vach accent --- */
.svc-cards{display:grid;gap:clamp(18px,1.6vw,24px);}
.svc-card{
  position:relative;overflow:hidden;
  background:var(--svc-card);border-radius:22px;
  padding:clamp(30px,2.4vw,42px) clamp(28px,2.6vw,46px);
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
/* vach accent 3px, mau rieng tung card (--acc), nhat dan sang phai */
.svc-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--acc) 0%,var(--acc) 26%,rgba(124,58,237,0) 100%);
}
.svc-card:hover{background:var(--svc-card-hover);transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(75,51,168,.55);}
/* watermark: chinh icon cua card, phong to, tran ra mep phai */
.svc-mark{
  position:absolute;top:50%;right:clamp(-30px,-1.7vw,-12px);
  width:clamp(148px,14vw,208px);transform:translateY(-50%);
  opacity:.14;pointer-events:none;z-index:0;
  transition:opacity .35s ease,transform .35s ease;
}
.svc-mark svg{display:block;width:100%;height:auto;}
.svc-card:hover .svc-mark{opacity:.22;transform:translateY(-50%) scale(1.05);}

/* --- watermark icon: tu ve tung chi tiet khi cuon toi --- */
/* Trang thai GOC = da ve xong, opacity .14. Animation chi chay tu chua-ve -> da-ve,
   nen khi prefers-reduced-motion tat animation thi icon van hien day du. */
@keyframes svcMarkIn{
  0%{opacity:0;} 45%{opacity:.24;} 100%{opacity:.14;}
}
@keyframes svcDraw{
  0%  {opacity:0;stroke-dasharray:320;stroke-dashoffset:320;}
  30% {opacity:1;}
  100%{opacity:1;stroke-dasharray:320;stroke-dashoffset:0;}
}
.svc-mark svg > *:nth-child(1){--d:0ms;}
.svc-mark svg > *:nth-child(2){--d:30ms;}
.svc-mark svg > *:nth-child(3){--d:60ms;}
.svc-mark svg > *:nth-child(4){--d:90ms;}
.svc-mark svg > *:nth-child(5){--d:120ms;}
.svc-mark svg > *:nth-child(6){--d:150ms;}
.svc-mark svg > *:nth-child(7){--d:180ms;}
.svc-mark svg > *:nth-child(8){--d:210ms;}
.svc-mark svg > *:nth-child(9){--d:240ms;}
.svc-mark svg > *:nth-child(10){--d:270ms;}
.svc-mark svg > *:nth-child(11){--d:300ms;}
.svc-mark svg > *:nth-child(12){--d:330ms;}
.svc-mark svg > *:nth-child(13){--d:360ms;}
.svc-mark svg > *:nth-child(14){--d:390ms;}
.svc-mark svg > *:nth-child(15){--d:420ms;}
.svc-mark svg > *:nth-child(16){--d:450ms;}
.svc-mark svg > *:nth-child(17){--d:480ms;}
.svc-mark svg > *:nth-child(18){--d:510ms;}
.svc-mark svg > *:nth-child(19){--d:540ms;}
.svc-mark svg > *:nth-child(20){--d:570ms;}
.svc-mark svg > *:nth-child(21){--d:600ms;}
.svc-mark svg > *:nth-child(22){--d:630ms;}
.svc-mark svg > *:nth-child(23){--d:660ms;}
.svc-mark svg > *:nth-child(24){--d:690ms;}
.svc-mark svg > *:nth-child(25){--d:720ms;}
.svc-mark svg > *:nth-child(26){--d:750ms;}
.svc-mark svg > *:nth-child(27){--d:780ms;}
.svc-mark svg > *:nth-child(28){--d:810ms;}
.svc-mark svg > *:nth-child(29){--d:840ms;}
.svc-mark svg > *:nth-child(30){--d:870ms;}
.svc-mark svg > *:nth-child(31){--d:900ms;}
.svc-mark svg > *:nth-child(32){--d:930ms;}
.svc-mark svg > *:nth-child(33){--d:960ms;}
.svc-mark svg > *:nth-child(34){--d:990ms;}
.svc-mark svg > *:nth-child(35){--d:1020ms;}
.svc-mark svg > *:nth-child(36){--d:1050ms;}
.svc-mark svg > *:nth-child(37){--d:1080ms;}
.svc-mark svg > *:nth-child(38){--d:1110ms;}
.svc-card.in .svc-mark{animation:svcMarkIn 2.05s ease-out both;}
.svc-card.in .svc-mark svg > *{animation:svcDraw .70s ease-out var(--d,0ms) both;}
/* sau khi ve xong, JS gan .drawn -> tat animation de hover co the phat lai sach se */
.svc-card.drawn .svc-mark,
.svc-card.drawn .svc-mark svg > *{animation:none;}
.svc-card.drawn:hover .svc-mark svg > *{animation:svcDraw .58s ease-out var(--d,0ms) both;}
/* chu "AI" trong icon card 3 khong ve duoc -> chi mo dan */
.svc-mark svg > text{stroke:none;}

.svc-copy{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;
  padding-right:clamp(116px,12.5vw,182px);
}
.svc-card h3{
  font-size:clamp(21px,1.72vw,28px);line-height:1.28;font-weight:500;
  color:var(--svc-ink);letter-spacing:-.038em;text-wrap:balance;
}
.svc-card p{font-size:clamp(14.5px,1.06vw,16px);line-height:1.8;color:var(--svc-body);}

@media (max-width:1199px){
  .svc-inner{grid-template-columns:1fr;gap:44px;}
  .svc-lead{max-width:52ch;}
  .svc-left{align-self:start;position:static;}
  /* card rong full container -> noi rong le phai de chu khong sat watermark */
  .svc-copy{padding-right:clamp(150px,20vw,240px);}
}
@media (max-width:767px){
  .svc{padding-block:70px;}
  .svc-card{padding:26px 24px;}
  .svc-copy{padding-right:0;}
  .svc-mark{width:132px;right:-24px;top:auto;bottom:-18px;transform:none;opacity:.10;}
  .svc-card:hover .svc-mark{transform:none;}
  .svc-blob{width:460px;left:-160px;}
}

/* ============================================================
   S5 Ve chung toi — do tu anh mau (viewport 2000px), quy ra vw:
     container 97..1905  -> le 4.85vw, rong 90.4vw
     cot trai 1138 : khe 70 : cot phai 600  -> 1.9fr / 3.5vw / 1fr
     pill h40 (2vw) -> 32 -> tieu de 88px x2 dong (4.4vw) -> 40 -> anh
     the: 390x330 (19.5vw x 16.5vw), top = tieu de top + 13, phai = mep anh
     anh: 1138 x ~690, bo 36;  "25+": cao 260 -> font ~16vw
     cot phai bat dau ngang dinh anh, nut ket thuc ngang day anh.
   ============================================================ */
#about{background:#FFFFFF;padding:clamp(22px,2vw,40px) 0 clamp(40px,3vw,60px);}
/* noi dung 97..1905 @2000 -> le 4.85vw, khong gioi han them max-width ben trong */
#about .container-xl{max-width:2002px;padding-inline:clamp(20px,4.85vw,97px);}
.ab{display:grid;grid-template-columns:1.9fr 1fr;gap:clamp(28px,3.5vw,70px);align-items:stretch;}
.ab-l{position:relative;min-width:0;}
.ab-r{
  position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  /* bat dau ngang dinh anh (tru 1.5vw nhu mau): pill 2 + khe 1.6 + tieu de 8.8 + khe 2 - 1.5 */
  padding-top:clamp(0px,11.9vw,238px);
}

.ab-pill{
  display:inline-flex;align-items:center;gap:.5vw;
  height:clamp(30px,2vw,40px);padding:0 clamp(12px,.95vw,19px) 0 clamp(10px,.8vw,16px);
  border-radius:999px;background:#fff;border:1px solid rgba(4,1,28,.10);
  box-shadow:0 6px 18px -10px rgba(46,16,110,.28);
  font-family:var(--display);font-size:clamp(13px,1vw,20px);font-weight:500;color:var(--text-dark);
}
.ab-pill::before{content:"";width:clamp(6px,.5vw,10px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(135deg,#A680F1,#7C3AED);flex:none;}

.ab-title{
  margin:clamp(14px,1.6vw,32px) 0 0;
  font-family:var(--display);font-weight:400;
  /* mau 88px nhung font mau hep hon Space Grotesk; 3.9vw de dong 2 (18 ky tu) van vua cot */
  font-size:clamp(32px,3.9vw,78px);line-height:1;letter-spacing:-.05em;
  color:var(--text-dark);text-wrap:balance;
  /* khong chay xuong duoi the: chua cho rong the + khe */
  max-width:calc(100% - clamp(240px,19.5vw,390px) - 2vw);
}
.ab-title em{
  font-style:italic;font-weight:400;
  font-family:Georgia,"Times New Roman",serif;letter-spacing:-.02em;
  background:linear-gradient(92deg,#7C3AED 0%,#8980F1 58%,#A680F1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- anh lon: JS khoet goc phai-tren theo the --- */
.ab-media{position:relative;margin-top:clamp(18px,2vw,40px);}
.ab-photo{
  position:relative;border-radius:clamp(18px,1.8vw,36px);overflow:hidden;
  aspect-ratio:1138/690;background:#EFE9FC;
}
.ab-photo > img{width:100%;height:100%;object-fit:cover;display:block;}
/* anh doi ngu: MOT data URI dung chung cho o anh lon va phan long trong so "10+" */
.ab-team{background-image:url("about-team.webp");background-size:cover;background-repeat:no-repeat;}
.ab-photo > .ab-team{display:block;width:100%;height:100%;background-position:center;}
.ab-ph{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;color:#4B2E9E;
  background:
    radial-gradient(circle at 26% 22%,rgba(255,255,255,.75),transparent 52%),
    linear-gradient(150deg,#EFE9FC 0%,#D9C9F8 52%,#B7A0F1 100%);
}
.ab-ph b{font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.03em;}
.ab-ph small{font-size:12.5px;line-height:1.6;max-width:34ch;color:#5B3FA8;}

/* --- the gio lam viec: neo vao cot trai, top = dinh tieu de + 13px (.65vw) --- */
.ab-hours{
  --py:clamp(9px,1vw,20px);            /* dem doc moi hang — dung chung de moi khoang cach bang nhau */
  --pad:clamp(22px,2.2vw,44px);        /* le the: 4 canh bang nhau */
  position:absolute;right:0;top:calc(clamp(30px,2vw,40px) + clamp(14px,1.6vw,32px) + .65vw);z-index:2;
  width:clamp(240px,19.5vw,390px);
  padding:var(--pad);
  border-radius:clamp(20px,2vw,40px);
  background:linear-gradient(158deg,#8E6BF3 0%,#7C3AED 46%,#5B34D6 100%);
  box-shadow:0 26px 54px -22px rgba(76,29,149,.6),inset 0 1px 0 rgba(255,255,255,.26);
  color:#fff;
}
.ab-hours h3{font-family:var(--display);font-size:clamp(17px,1.6vw,32px);font-weight:500;
  letter-spacing:-.02em;line-height:1.15;color:#fff;margin:0 0 var(--py);}
.ab-hours dl{display:grid;grid-template-columns:1fr auto;margin:0;}
.ab-hours dt,.ab-hours dd{
  font-size:clamp(12.5px,1.05vw,21px);line-height:1.5;margin:0;
  padding:var(--py) 0;border-top:1px solid rgba(255,255,255,.24);
}
.ab-hours dt{color:rgba(255,255,255,.9);white-space:nowrap;}
.ab-hours dd{font-family:var(--display);font-weight:500;color:#fff;text-align:right;padding-left:14px;}
/* hang cuoi khong dem duoi -> le duoi the = le tren the */
.ab-hours dl > dd:last-of-type,.ab-hours dl > dt:last-of-type{padding-bottom:0;}

/* --- so lon long anh (cao ~260px @2000 -> 16vw) --- */
.ab-num{
  display:block;
  font-family:var(--display);font-weight:500;line-height:.8;letter-spacing:-.055em;
  font-size:clamp(88px,16vw,330px);
  background-size:cover;background-position:center 34%;   /* canh vao vung khuon mat */
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 26px rgba(46,16,110,.18));
  margin-left:-.03em;
}

/* --- hang dau nguoi + nhan (cach so 65px = 3.25vw) --- */
.ab-who{display:flex;align-items:center;gap:clamp(12px,1.5vw,30px);margin-top:clamp(22px,3.25vw,65px);}
.ab-faces{display:flex;flex:none;}
.ab-faces span{
  width:clamp(40px,3.5vw,70px);height:clamp(40px,3.5vw,70px);border-radius:50%;
  border:3px solid #fff;background:#EFE9FC;overflow:hidden;
  box-shadow:0 8px 18px -8px rgba(46,16,110,.45);
  display:grid;place-items:center;color:#5B34D6;
}
.ab-faces span + span{margin-left:calc(-1 * clamp(10px,1vw,20px));}
.ab-faces svg{width:34%;height:34%;}
.ab-faces img{width:100%;height:100%;object-fit:cover;display:block;}
.ab-who b{
  font-family:var(--display);font-size:clamp(13px,1.1vw,22px);font-weight:500;
  line-height:1.5;letter-spacing:.01em;text-transform:uppercase;color:var(--text-dark);max-width:30ch;
}
.ab-lead{
  margin-top:clamp(16px,1.75vw,35px);
  padding-bottom:clamp(18px,2.15vw,43px);   /* khe toi thieu toi nut ben duoi */
  font-size:clamp(14.5px,1.1vw,22px);line-height:1.6;color:#4B4B5A;max-width:none;
}

/* --- nut: khoi tim + o trang vuong chua mui ten; day nut ngang day anh --- */
.ab-btn{
  margin-top:auto;                                          /* day xuong day cot */
  display:inline-flex;align-items:stretch;
  font-family:var(--display);font-size:clamp(15px,1.1vw,22px);font-weight:500;color:#fff;
  text-decoration:none;
}
.ab-btn > span,.ab-btn > i{
  height:clamp(50px,3.85vw,77px);
}
.ab-btn > span{
  display:flex;align-items:center;padding:0 clamp(16px,1.4vw,28px);
  background:linear-gradient(135deg,#8E6BF3,#7C3AED 60%,#5B34D6);
  border-radius:8px 0 0 8px;
  box-shadow:0 18px 40px -18px rgba(76,29,149,.7);
  transition:transform .3s ease;
}
.ab-btn > i{
  display:grid;place-items:center;
  width:clamp(50px,3.85vw,77px);
  background:linear-gradient(135deg,#8E6BF3,#7C3AED 60%,#5B34D6);
  border-radius:0 8px 8px 0;
  padding:clamp(4px,.35vw,7px);
}
.ab-btn > i > svg{
  width:100%;height:100%;padding:28%;box-sizing:border-box;
  background:#fff;color:#5B34D6;border-radius:6px;
  transition:transform .3s ease;
}
.ab-btn:hover > i > svg{transform:translateX(3px);}

@media (max-width:991px){
  .ab{grid-template-columns:1fr;gap:34px;}
  .ab-r{padding-top:0;}
  .ab-title{max-width:none;}
  .ab-media{margin-top:22px;}
  .ab-hours{position:static;width:100%;margin-top:18px;}
  .ab-who{margin-top:26px;}
  .ab-btn{margin-top:28px;}
}

/* ============================================================
   Reveal
   ============================================================ */
.rv{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1;transform:none;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1199px){
  :root{--sec-y:80px;}
  .h1{font-size:60px;line-height:66px;}
  .h2{font-size:38px;line-height:48px;}
  .h2-cta{font-size:54px;line-height:60px;}
  .nav{gap:22px;}
  .bento-row1{grid-template-columns:1fr 1fr;}
  .bento-row2{grid-template-columns:1fr;}
  .demo-grid,.feature-row{grid-template-columns:repeat(2,1fr);}
  .dom-grid{grid-template-columns:repeat(2,1fr);}
  .dom:not(:nth-child(3n))::after{display:none;}
  .dom:not(:nth-child(2n))::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:rgba(255,255,255,.20);}
  .dom:nth-child(-n+4)::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.20);}
}
@media (max-width:991px){
  .h1{font-size:48px;line-height:56px;}
  .h2{font-size:32px;line-height:42px;}
  .h2-cta{font-size:42px;line-height:50px;}
  .nav,.header-inner > .btn{display:none;}
  .burger{display:flex;}
  .split,.split-woo{grid-template-columns:1fr;gap:40px;}
  .hero{padding:108px 0 56px;}
  .ft-grid,.ft-bar-grid{grid-template-columns:1fr 1fr;gap:48px 40px;}
  .ft-brand{grid-column:1 / -1;}
  .ft-bar-grid p{grid-column:1 / -1;}
  .ft-tag{font-size:28px;line-height:38px;}
}
@media (max-width:767px){
  :root{--sec-y:60px;}
  .h1{font-size:36px;line-height:1.15;}
  .h2{font-size:28px;line-height:36px;}
  .h2-cta{font-size:32px;line-height:40px;}
  .bento-row1,.demo-grid,.feature-row{grid-template-columns:1fr;}
  .dom-grid{grid-template-columns:1fr;}
  .dom{padding:30px 6px;}
  .dom::after,.dom:not(:nth-child(2n))::after{display:none !important;}
  .dom:not(:last-child)::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.20);}
  .dom:nth-child(-n+4)::before{left:0;right:0;}
  .cta{--sph:460px;--sph-top:90px;min-height:600px;}
  .card-a{padding:26px 24px 0;}
  .side-tab{display:none;}
  .a1{--d:420px;--cy:280px;}
  .a2{--d:520px;--cy:340px;}
  .a3{--d:440px;--cy:280px;}
  .a4{--d:380px;--cy:330px;}
  .hero::before{background:radial-gradient(78vw 380px at 50% 150px,rgba(142,130,245,.80) 0%,rgba(142,130,245,.52) 42%,rgba(142,130,245,.20) 72%,rgba(142,130,245,0) 100%);}
  .ft-body{padding:72px 0 76px;}
  .ft-grid,.ft-bar-grid{grid-template-columns:1fr;gap:40px;}
  .ft-tag{font-size:24px;line-height:34px;}
  .ft-col h3{font-size:20px;margin-bottom:18px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .rv{opacity:1;transform:none;}
  .demo-scroll{transform:none !important;}
}