.eco { position:relative; overflow:hidden; padding:56px 64px 62px; background:#141417;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px; animation: gridDrift 9s linear infinite; }
@keyframes gridDrift { from{background-position:0 0} to{background-position:24px 24px} }
.eco::before { content:''; position:absolute; top:6%; left:50%; transform:translateX(-50%); width:820px; height:560px;
  background:radial-gradient(closest-side, rgba(209,32,38,.30), transparent); filter:blur(18px); z-index:0; animation: ecoPulse 6s ease-in-out infinite; }
@keyframes ecoPulse { 0%,100%{opacity:.55} 50%{opacity:.85} }
.eco::after { content:''; position:absolute; left:0; right:0; height:1px; top:42%; z-index:0;
  background:linear-gradient(90deg, transparent, rgba(255,204,0,.5), transparent); animation: scan 7s linear infinite; opacity:.6; }
@keyframes scan { 0%{transform:translateY(-120px); opacity:0} 50%{opacity:.7} 100%{transform:translateY(160px); opacity:0} }
.eco-in { position:relative; z-index:1; max-width:1200px; margin:0 auto; }

.eco-head { text-align:center; margin-bottom:30px; }
.eco-head .eyebrow { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:13px; }
.eco-head h2 { font-size:clamp(25px, 3.4vw, 36px); font-weight:800; letter-spacing:-.02em; line-height:1.15; color:#fff; max-width:720px; margin:0 auto; }
.eco-head p { font-size:14.5px; color:rgba(255,255,255,.62); margin:13px auto 0; max-width:none; line-height:1.6; }  /* #44(V2): none để 1 dòng desktop font thật (mobile hẹp → tự wrap) */
/* CTA cụm 2 nút trên nền tối — cùng chiều cao, cùng bo góc, cùng padding */
.eco-ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* Base (chung cho cả primary + ghost) — đảm bảo cùng chiều cao */
.eco-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 14px 24px;     /* cùng padding dọc 14px → cùng chiều cao */
  border-radius: 99px;
  border: 1px solid transparent;
  transition: transform .2s, background .2s, border-color .2s, color .2s;
  white-space: nowrap;
  text-decoration: none;
}
.eco-cta i { font-size: 18px; line-height: 1; }

/* Primary — đỏ #D12026, giảm glow/đổ bóng (chủ project yêu cầu) */
.eco-cta-primary {
  background: #D12026;
  color: #fff;
  box-shadow: 0 4px 12px rgba(209,32,38,.20);  /* trước: --sh-red dày hơn */
}
.eco-cta-primary:hover {
  background: #A8181D;
  color: #fff;
  transform: translateY(-1px);
}

/* Secondary ghost — hợp nền tối: viền trắng-mờ + chữ trắng (WCAG AA on dark) */
.eco-cta-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.30);
}
.eco-cta-ghost:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.55);
  color: #fff;
  transform: translateY(-1px);
}

/* App store badges (optional) */
.eco-store-badges {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.eco-store-badges a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: #000;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--ff);
  transition: transform .15s, background .15s;
}
.eco-store-badges a:hover { background: #222; transform: translateY(-1px); }
.eco-store-badges a i { font-size: 22px; line-height: 1; }
.eco-store-badges a .sm { display: block; font-size: 9.5px; line-height: 1; opacity: .75; }
.eco-store-badges a .lg { display: block; font-size: 14px; line-height: 1.1; font-weight: 700; margin-top: 2px; }

.eco-stage { display:flex; align-items:center; justify-content:center; margin:6px 0 0; }
.eco-stage .pw { position:relative; z-index:2; overflow:visible; -webkit-mask:none; mask:none; }
.eco-stage .pw.left  { margin-right:-46px; transform:rotate(-4deg) translateY(-6px); }
.eco-stage .pw.right { margin-left:-46px;  transform:rotate(4deg)  translateY(-6px); }
.eco-stage .badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:5; background:var(--red); color:#fff;
  font-size:10.5px; font-weight:700; padding:5px 12px; border-radius:99px; box-shadow:var(--sh-red); white-space:nowrap; }
.eco-stage .phone { width:166px; border-radius:26px; overflow:hidden; border:6px solid #2c2c31; background:#2c2c31; box-shadow:0 26px 55px rgba(0,0,0,.6); }
.eco-stage .phone img { width:100%; display:block; }

.eco-stage .laptop { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.eco-stage .laptop .lid { width:452px; border:9px solid #2c2c31; border-radius:16px; overflow:hidden; background:#2c2c31; box-shadow:0 30px 60px rgba(0,0,0,.6); }
.eco-stage .laptop .lid img { width:100%; display:block; }
.eco-stage .laptop .base { width:560px; height:14px; background:linear-gradient(#3c3c44,#1c1c20); border-radius:0 0 16px 16px; position:relative; box-shadow:0 12px 22px rgba(0,0,0,.5); }
.eco-stage .laptop .base::after { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:96px; height:6px; background:#141417; border-radius:0 0 9px 9px; }

.eco-labels { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:820px; margin:28px auto 0; }
.eco-lab { text-align:center; }
.eco-lab b { display:block; color:#fff; font-size:14.5px; font-weight:700; }
.eco-lab span { display:block; color:rgba(255,255,255,.55); font-size:12px; margin-top:4px; }

.eco-feats { display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin-top:36px; }
.eco-feat { display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); color:#fff; font-size:13px; font-weight:600; padding:10px 17px; border-radius:99px; }
.eco-feat i { color:var(--gold); font-size:17px; }

@media (max-width:920px){
  /* Section gọn lại trên mobile (15/06): bớt padding dọc + bớt margin giữa các khối
     (head→ctas→badges→stage→labels→feats) cho liền mạch, bớt lướt. */
  /* Giảm padding section + margin các khối cho gọn hơn (15/06 v2) */
  .eco { padding:30px 18px 36px; }
  .eco-head { margin-bottom:18px; }
  .eco-ctas { margin-top:14px; gap:10px; }
  .eco-store-badges { margin-top:12px; }

  /* M4 mobile: chỉ HIỂN THỊ 1 ảnh điện thoại (.pw.left); ẨN laptop + phone phụ.
     Cap chiều cao mockup để không chiếm gần cả màn (≤340px). */
  .eco-stage { flex-direction:column; align-items:center; gap:0; margin:0; max-height:340px; }
  .eco-stage .laptop, .eco-stage .pw.right { display:none; }
  .eco-stage .pw.left { margin:0; transform:none; max-height:340px; }
  .eco-stage .pw.left .phone {
    width:clamp(180px, 50vw, 240px);
    max-height:340px;
    object-fit:contain;
  }
  .eco-stage .pw.left .phone img { object-fit:contain; max-height:328px; }

  /* 3 mô tả app — 2 cột mobile, ô thứ 3 span 2 cột cho cân */
  .eco-labels {
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:20px auto 0;
  }
  .eco-labels > .eco-lab:nth-child(3) { grid-column: 1 / -1; }
  .eco-lab b { font-size:13.5px; }
  .eco-lab span { font-size:11.5px; }

  /* 4 chip lợi ích — lưới 2×2 thay vì flex wrap 1 chip/hàng */
  .eco-feats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:22px;
    justify-content:initial;
  }
  .eco-feat {
    justify-content:flex-start;
    font-size:12.5px; padding:9px 12px; gap:7px;
  }
  .eco-feat i { font-size:15px; }
}