/* ============================================================
   HERO AI-HUB VISUAL  (hero-hub.css)
   Logo Zework ở tâm + các thẻ tính năng trôi quanh + thanh
   quảng cáo tính năng. Toàn bộ dựng bằng code (không video).
   Base font: html=10px → 1rem = 10px.
   ============================================================ */
.hero-hub{
  position:relative; width:100%; max-width:124rem;
  margin:1.5rem auto 0; height:66rem; z-index:2;
}
/* connection lines */
.hh-lines{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.hh-lines path{stroke:rgba(100,116,139,.30); stroke-width:1; fill:none; stroke-dasharray:5 6; animation:hhDash 3s linear infinite}
@keyframes hhDash{to{stroke-dashoffset:-22}}

/* center hub = Zework logo */
.hh-hub{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:3; display:grid; place-items:center}
.hh-halo{position:absolute; width:24rem; height:24rem; border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.28),transparent 62%); filter:blur(.8rem); animation:hhBreathe 4s ease-in-out infinite}
.hh-logo{width:10.6rem; height:10.6rem; border-radius:2.7rem; position:relative; z-index:1;
  box-shadow:0 2.2rem 4.6rem rgba(2,32,71,.20),0 .3rem 1rem rgba(2,32,71,.10),0 0 0 .1rem rgba(15,23,42,.05);
  animation:hhHover 6s ease-in-out infinite}
@keyframes hhBreathe{50%{transform:scale(1.12);opacity:.7}}
@keyframes hhHover{50%{transform:translateY(-.8rem)}}

/* feature pill (typed) */
.hh-pill{position:absolute; left:50%; top:12%; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:.9rem; max-width:92%;
  padding:1rem 1.6rem; border-radius:1.6rem;
  background:rgba(255,255,255,.92); backdrop-filter:blur(1.4rem);
  border:.1rem solid rgba(29,78,216,.22);
  box-shadow:0 2rem 5rem rgba(2,32,71,.12),0 0 0 .4rem rgba(59,130,246,.05),0 0 3.4rem rgba(59,130,246,.12);
}
.hh-pill .hh-spark{width:2.4rem; height:2.4rem; flex:0 0 auto; color:#1D4ED8}
.hh-pill .hh-txt{font-size:1.75rem; font-weight:600; color:#1E293B; white-space:nowrap; overflow:hidden}
.hh-cursor{display:inline-block; width:.2rem; height:1.2em; background:#1D4ED8; vertical-align:-.3rem; margin-left:.2rem; animation:hhBlink 1s steps(1) infinite}
@keyframes hhBlink{50%{opacity:0}}
.hh-type{display:inline-block; overflow:hidden; white-space:nowrap; width:0; animation:hhType 3.6s steps(54) .6s forwards}
@keyframes hhType{to{width:28em}}

/* floating cards */
.hh-card{position:absolute; z-index:2; width:var(--w,24rem);
  background:#fff; border:.1rem solid rgba(15,23,42,.08); border-radius:1.6rem; padding:1.4rem 1.5rem;
  box-shadow:0 1.8rem 4rem rgba(2,32,71,.09),0 .2rem .6rem rgba(2,32,71,.05);
  opacity:0; transform:translateY(1.4rem);
  animation:hhIn .7s cubic-bezier(.2,.7,.2,1) forwards var(--delay,0s), hhFloat var(--fl,7s) ease-in-out infinite var(--delay,0s)}
@keyframes hhIn{to{opacity:1;transform:translateY(0)}}
@keyframes hhFloat{50%{transform:translateY(-.9rem)}}
.hh-ct{display:flex; align-items:center; gap:.5rem; font-size:1.3rem; font-weight:600; color:#334155; margin-bottom:.8rem}
.hh-ct .hh-ic{width:2.2rem; height:2.2rem; border-radius:.7rem; background:rgba(29,78,216,.10); display:grid; place-items:center; color:#1D4ED8; flex:0 0 auto}
.hh-ct .hh-ic svg{width:1.3rem; height:1.3rem}
.hh-row{display:flex; align-items:center; gap:.6rem; margin:.55rem 0}
.hh-av{width:2.4rem; height:2.4rem; border-radius:50%; background:#64748B; flex:0 0 auto; display:grid; place-items:center; font-size:1rem; font-weight:700; color:#fff}
.hh-av.b{background:#1D4ED8}
.hh-ln{height:.8rem; border-radius:.5rem; background:rgba(15,23,42,.10)}
.hh-ln.s{width:64%}.hh-ln.m{width:80%}.hh-ln.l{width:92%}
.hh-chip{display:inline-block; font-size:1rem; font-weight:600; padding:.2rem .6rem; border-radius:.6rem; margin:.2rem .25rem 0 0}
.hh-chip.b{background:rgba(29,78,216,.10); color:#1D4ED8}
.hh-chip.g{background:rgba(34,197,94,.12); color:#15803D}
.hh-stat{font-size:2.4rem; font-weight:800; letter-spacing:-.02em; color:#0B1220}
.hh-up{font-size:1.15rem; font-weight:700; color:#16a34a; margin-left:.4rem}
.hh-bars{display:flex; align-items:flex-end; gap:.5rem; height:3.8rem; margin-top:.7rem}
.hh-bars i{flex:1; background:linear-gradient(180deg,#5B9BFF,#1D4ED8); border-radius:.3rem}
.hh-prog{height:.7rem; border-radius:.5rem; background:rgba(15,23,42,.08); overflow:hidden; margin-top:.4rem}
.hh-prog b{display:block; height:100%; background:linear-gradient(90deg,#3B82F6,#1D4ED8); border-radius:.5rem}
.hh-sub{font-size:1.15rem; color:#64748B; margin-top:.2rem}

/* positions — lưới 3 hàng × 2 bên, giãn đều quanh hub */
#hh1{top:6%;  left:0;   --w:25rem; --delay:.15s; --fl:7.5s}  /* trên-trái */
#hh2{top:4%;  right:0;  --w:25rem; --delay:.35s; --fl:8s}    /* trên-phải */
#hh6{top:41%; left:0;   --w:23rem; --delay:.3s;  --fl:7.2s}  /* giữa-trái */
#hh3{top:41%; right:0;  --w:23rem; --delay:.55s; --fl:7s}    /* giữa-phải */
#hh5{top:75%; left:3%;  --w:24rem; --delay:.5s;  --fl:7.8s}  /* dưới-trái */
#hh4{top:75%; right:3%; --w:24rem; --delay:.75s; --fl:8.5s}  /* dưới-phải */

/* tablet */
@media (max-width:1100px){
  .hero-hub{height:60rem; max-width:96rem}
  .hh-card{--w:21rem !important}
}
/* mobile: chỉ giữ logo hub + thanh tính năng, ẩn thẻ */
@media (max-width:768px){
  .hero-hub{height:26rem; margin-top:1rem}
  .hh-card,.hh-lines{display:none}
  .hh-hub{top:62%}
  .hh-pill{top:10%; padding:.9rem 1.3rem}
  .hh-pill .hh-txt{font-size:1.6rem; white-space:normal}
  .hh-type{white-space:normal; width:auto !important; animation:none}
  .hh-cursor{display:none}
  .hh-logo{width:9rem; height:9rem; border-radius:2.3rem}
}