/* ===========================================
   HERO GREEN PREMIUM – TOP ONE
   (Tách riêng file – không ảnh hưởng layout)
=========================================== */

/* COLOR SYSTEM */
:root {
  --green-main: #00c853;
  --green-light: #00e676;
  --green-neon: #00ff95;
  --dark-1: #020b0a; 
  --dark-2: #041f1b; 
  --white: #ffffff;
}

/* SECTION WRAPPER */
.hero-green-premium {
  padding: 120px 20px;
  display: flex;
  justify-content: center;
  background: linear-gradient(135deg, var(--dark-1), var(--dark-2));
  position: relative;
  color: var(--white);
  overflow: hidden;
}

/* NEON BACKGLOW RIGHT */
.hero-green-premium::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0,255,110,0.25), transparent 70%);
  top: -80px;
  right: -80px;
  filter: blur(80px);
}

/* NEON BACKGLOW LEFT */
.hero-green-premium::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(0,255,110,0.18), transparent 80%);
  bottom: -60px;
  left: -70px;
  filter: blur(100px);
}

/* INNER GLASS CARD */
.hero-green-inner {
  max-width: 900px;
  padding: 55px 40px;
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.05);
  border-radius: 30px;
  border: 1px solid rgba(0,255,120,0.15);
  box-shadow: 0 0 35px rgba(0,255,120,0.22);
  text-align: center;
}

/* HEADLINE */
.hero-green-title {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--white);
  text-shadow: 0 0 12px rgba(0,255,130,0.25);
}

/* SUBHEADLINE */
.hero-green-sub {
  font-size: 18px;
  opacity: 0.92;
  margin-bottom: 35px;
}

/* BENEFIT LIST */
.hero-green-benefits {
  list-style: none;
  padding: 0;
  margin: 0 auto 35px;
  display: inline-block;
  text-align: left;
}

.hero-green-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 17px;
}

.hero-green-benefits svg {
  width: 22px;
  height: 22px;
  stroke: var(--green-main);
  stroke-width: 2.5;
  fill: none;
}

/* CTA PRIMARY */
.cta-green-primary {
  padding: 16px 34px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--green-main), var(--green-light));
  box-shadow: 0 0 25px rgba(0,255,110,0.4);
  transition: 0.25s;
}

.cta-green-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 40px rgba(0,255,110,0.6);
}

/* CTA SECONDARY */
.cta-green-secondary {
  padding: 16px 28px;
  font-size: 17px;
  margin-left: 12px;
  font-weight: 600;
  color: var(--green-light);
  border: 2px solid rgba(0,255,110,0.4);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  transition: 0.25s;
}

.cta-green-secondary:hover {
  background: rgba(0,255,110,0.15);
}

/* CTA WRAPPER – CHỐNG CHỒNG NÚT */
.hero-green-cta {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 25px;
}

/* CTA FIX */
.cta-green-primary,
.cta-green-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  text-align: center;
  white-space: nowrap;
}

/* MOBILE – CTA FULL WIDTH */
@media (max-width: 600px) {
  .hero-green-cta {
    gap: 14px;
    flex-direction: column;
  }

  .cta-green-primary,
  .cta-green-secondary {
    width: 100%;
    max-width: 320px;
    padding: 15px 28px;
  }
}

/* PULSE NEON EFFECT */
.pulse-green {
  animation: pulseGreen 2.2s infinite;
}

@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0 rgba(0,255,110,0.35); }
  50%  { box-shadow: 0 0 24px rgba(0,255,110,0.75); }
  100% { box-shadow: 0 0 0 rgba(0,255,110,0.35); }
}

/* FADE UP */
.fade-up {
  opacity: 0;
  animation: fadeUp 0.85s ease-out forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* MOBILE OPTIMIZED */
@media (max-width: 600px) {
  .hero-green-title { font-size: 28px; }
  .hero-green-sub { font-size: 16px; }
  .hero-green-inner { padding: 35px 20px; }
}