/* ===== SECTION ===== */
.ecosystem-section{
  position:relative;
  width:100%;
  max-width:1200px;
  height:620px;
  margin:0 auto;
  border-radius:22px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fff!important;
  overflow:hidden;
}

/* Aurora glow nền */
.ecosystem-section::before{
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  background:radial-gradient(circle at 50% 50%, rgba(60,200,110,.18), #fff);
  filter:blur(70px);
  animation:eco-rotateGlow 14s linear infinite;
  transform-origin:50% 50%;
  z-index:0;
}
@keyframes eco-rotateGlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ===== CENTER NODE ===== */
.ecosystem-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:170px; height:170px;
  border-radius:50%;
  background:#00b23d; color:#fff; text-align:center;
  padding-top:42px;
  box-shadow:0 0 26px rgba(0,180,70,.55);
  animation:eco-centerGlow 3s infinite alternate;
  z-index:10;
}
@keyframes eco-centerGlow{
  from{ box-shadow:0 0 22px rgba(0,200,80,.55) }
  to  { box-shadow:0 0 40px rgba(0,200,80,.80) }
}

/* ===== SERVICE TAGS ===== */
.ecosystem-item{
  position:absolute;
  padding:12px 20px;
  background:#fff;
  border:2px solid #19c46b;
  color:#0b5b2c;
  border-radius:12px;
  font-size:15px;
  box-shadow:0 0 14px rgba(20,200,100,.25);
  animation:eco-neonPulse 3s infinite ease-in-out;
  z-index:5;
}
@keyframes eco-neonPulse{
  0%{ box-shadow:0 0 8px rgba(20,200,100,.25) }
  100%{ box-shadow:0 0 18px rgba(20,200,100,.45) }
}

/* Vị trí desktop */
.item1{top:6%;  left:50%; transform:translateX(-50%)}
.item2{top:26%; right:4%}
.item3{bottom:18%; right:8%}
.item4{bottom:18%; left:8%}
.item5{top:26%; left:4%}

/* ===== LINES/RING (SVG) ===== */
.neon-lines{
  position:absolute; inset:0;
  z-index:6; /* trên nền, dưới center */
  pointer-events:none; /* không chặn hover/click */
  overflow:visible; /* tránh bị cắt drop-shadow */
}
.neon-lines svg{
  display:block; width:100%; height:100%;
}

/* Đường nối (nếu dùng <path>) */
.neon-path{
  stroke:#13b05c; stroke-width:2.8;
  stroke-dasharray:8 12;
  filter:drop-shadow(0 0 6px rgba(10,180,90,.65));
  animation:eco-dashFlow 2.8s linear infinite;
}
@keyframes eco-dashFlow{ to{ stroke-dashoffset:-80 } }

/* Vòng tròn quay */
.neon-circle{
  fill:none;
  stroke:#18c573; stroke-width:3;
  opacity:.9;
  filter:drop-shadow(0 0 10px rgba(10,200,110,.6));
  vector-effect:non-scaling-stroke;               /* stroke không bị dày mỏng khi scale */
  transform-origin:50% 50%;
  animation:eco-rotateCircle 12s linear infinite;
}
@keyframes eco-rotateCircle{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ===== MOBILE ===== */
@media (max-width:600px){
  .ecosystem-section{ height:540px!important; }

  .ecosystem-center{
    width:110px!important; height:110px!important;
    padding-top:24px!important; font-size:13px!important;
  }

  .ecosystem-item{
    width:120px!important; padding:8px 10px!important;
    font-size:12px!important; border-radius:8px!important;
    white-space:normal!important;
  }

  .item1{top:6%; left:50%; transform:translateX(-50%)}
  .item2{top:26%; right:6%}
  .item5{top:26%; left:6%}
  .item3{bottom:18%; right:6%}
  .item4{bottom:18%; left:6%}
}