*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fp-font-body);color:var(--fp-color-text);line-height:1.6;background:var(--fp-color-bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--fp-font-heading);color:var(--fp-color-secondary);font-weight:700;letter-spacing:-.01em}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
.container{max-width:var(--fp-container-w);margin:0 auto;padding:0 24px}

.proto-note{background:var(--fp-color-secondary);color:#fff;font-size:12.5px;text-align:center;padding:8px 16px}
.proto-note b{color:#7fd9cd}

/* ============ Hero ============ */
.services-hero{padding:56px 0 40px;text-align:center;position:relative;overflow:hidden}
.hero-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.25;z-index:0}
.hero-blob--1{width:360px;height:360px;background:var(--fp-color-primary);top:-140px;left:-80px}
.hero-blob--2{width:300px;height:300px;background:var(--fp-color-cta);top:-60px;right:-100px}
.services-hero .container{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--fp-color-primary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fp-color-cta)}
.services-hero h1{font-size:clamp(26px,4vw,38px);max-width:680px;margin:0 auto 14px}
.services-hero p{color:var(--fp-color-text-muted);font-size:15px;max-width:560px;margin:0 auto 26px}
.hero-stats{display:flex;justify-content:center;gap:36px;flex-wrap:wrap}
.hero-stat{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fp-color-text-muted);font-weight:600}
.hero-stat .n{font-family:var(--fp-font-heading);font-weight:700;font-size:18px;color:var(--fp-color-secondary)}
.hero-stat .dot{width:8px;height:8px;border-radius:50%}

/* ============ Section shell ============ */
.eco-section{padding:36px 0}
.eco-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.eco-head h2{font-size:19px}
.status-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:999px;color:#fff}
.status-badge.available{background:var(--fp-color-cta)}
.status-badge.developing{background:var(--fp-color-warning)}
.status-badge.roadmap{background:var(--fp-color-info)}
.eco-head p{font-size:12.5px;color:var(--fp-color-text-muted);flex-basis:100%}

.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.eco-grid.roadmap-grid{grid-template-columns:repeat(4,1fr)}
.eco-card{
  background:#fff;border:1.5px solid var(--fp-color-border);border-radius:var(--fp-radius-xl);padding:22px;
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--fp-ease), transform .5s var(--fp-ease), border-color .2s ease, box-shadow .2s ease;
  will-change:transform, opacity;
}
.eco-card.is-visible{opacity:1;transform:translateY(0)}
.eco-card:hover{border-color:var(--fp-color-primary);box-shadow:0 14px 30px rgba(28,61,58,.08);transform:translateY(-2px)}
.eco-card.is-visible:hover{transform:translateY(-2px)}
.eco-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.eco-icon img{width:26px;height:26px;object-fit:contain}
.eco-card.available .eco-icon{background:rgb(13 148 136/10%);color:var(--fp-color-cta)}
.eco-card.developing .eco-icon{background:rgb(245 158 11/10%);color:var(--fp-color-warning)}
.eco-card.roadmap .eco-icon{background:rgb(37 99 235/9%);color:var(--fp-color-info)}
.eco-card h3{font-size:14.5px;margin-bottom:6px}
.eco-card p{font-size:12.5px;color:var(--fp-color-text-muted);margin-bottom:16px;min-height:36px}

.eco-card.developing{position:relative}
.eco-card.developing .eco-body{opacity:.68;transition:opacity .25s ease}
.eco-card.developing:hover .eco-body{opacity:1}
.eco-preview-tip{
  position:absolute;top:16px;right:16px;font-size:10px;font-weight:700;color:var(--fp-color-warning);
  background:rgb(245 158 11/10%);padding:4px 9px;border-radius:999px;opacity:0;transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;
}
.eco-card.developing:hover .eco-preview-tip{opacity:1;transform:translateY(0)}

.eco-card.roadmap{background:rgba(255,255,255,.6);border-style:dashed}
.roadmap-phase{font-size:10px;font-weight:700;color:var(--fp-color-info);margin-bottom:8px}

.btn-eco{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:9px 15px;border-radius:11px;transition:filter .2s ease, transform .2s ease}
.btn-eco:hover{transform:translateY(-1px)}
.btn-eco.active{background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));color:#fff}
.btn-eco.disabled{background:var(--fp-color-border);color:var(--fp-color-text-muted);pointer-events:none}
.btn-eco.roadmap-btn{background:rgb(37 99 235/8%);color:var(--fp-color-info)}

/* ============ Membership section ============ */
.membership-section{padding:50px 0 70px;background:#fff;border-top:1px solid var(--fp-color-border)}
.membership-head{text-align:center;max-width:600px;margin:0 auto 30px}
.membership-head h2{font-size:24px;margin-bottom:10px}
.membership-head p{color:var(--fp-color-text-muted);font-size:14px}

.billing-toggle{display:flex;justify-content:center;margin:24px 0 38px}
.billing-toggle-inner{position:relative;display:flex;background:rgba(28,61,58,.06);border-radius:999px;padding:4px;width:290px}
.billing-toggle-inner button{flex:1;position:relative;z-index:1;padding:10px 0;font-size:13px;font-weight:700;color:var(--fp-color-text-muted);border-radius:999px;transition:color .3s ease}
.billing-toggle-inner button.is-active{color:#fff}
.billing-thumb{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));border-radius:999px;transition:transform .35s var(--fp-spring)}
.billing-toggle-inner[data-active="annual"] .billing-thumb{transform:translateX(100%)}
.save-chip{font-size:10px;font-weight:700;color:var(--fp-color-success);background:rgb(34 197 94/12%);padding:2px 7px;border-radius:999px;margin-left:5px}

.tier-group{margin-bottom:40px}
.tier-group-label{font-size:12px;font-weight:700;color:var(--fp-color-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.tier-group-label::after{content:"";flex:1;height:1px;background:var(--fp-color-border)}

.pricing-grid{display:grid;gap:2rem}
.pricing-grid.citizen{grid-template-columns:repeat(2,1fr)}
.pricing-grid.partner{grid-template-columns:repeat(3,1fr)}

.pricing-card{
  border:1.5px solid var(--fp-color-border);border-radius:var(--fp-radius-xl);padding:24px;display:flex;flex-direction:column;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--fp-ease), transform .4s var(--fp-ease), border-color .2s ease, box-shadow .4s var(--fp-ease);
}
.pricing-card.is-visible{opacity:1;transform:translateY(0)}
.pricing-card.is-visible:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.pricing-card.featured{border-color:var(--fp-color-primary);background:rgb(61 139 130/4%);position:relative;box-shadow:0 10px 26px rgba(13,148,136,.12)}
.pricing-card.featured.is-visible:hover{box-shadow:0 24px 48px rgba(13,148,136,.2)}
.pricing-card.featured::before{content:"Phổ biến nhất";position:absolute;top:-11px;left:24px;background:var(--fp-color-cta);color:#fff;font-size:10px;font-weight:700;padding:4px 11px;border-radius:999px}
.pricing-card.enterprise{background:linear-gradient(160deg,var(--fp-color-secondary),#0f2b28);border-color:transparent;color:#fff;box-shadow:0 12px 32px rgba(15,43,40,.28)}
.pricing-card.enterprise.is-visible:hover{box-shadow:0 24px 48px rgba(15,43,40,.36)}
.pricing-card.enterprise h3,.pricing-card.enterprise .p-desc{color:#fff}
.pricing-card.enterprise .p-desc{color:rgba(255,255,255,.65)}
.pricing-card.enterprise li{color:rgba(255,255,255,.85)}

.p-badge{font-size:10px;font-weight:700;color:var(--fp-color-primary);background:rgb(61 139 130/10%);padding:3px 9px;border-radius:999px;align-self:flex-start;margin-bottom:12px}
.pricing-card h3{font-size:16px;margin-bottom:4px}
.p-desc{font-size:12px;color:var(--fp-color-text-muted);margin-bottom:16px}
.p-price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;min-height:38px}
.p-price{font-family:var(--fp-font-heading);font-weight:700;font-size:26px;transition:opacity .2s ease}
.p-price-old{font-size:13px;color:var(--fp-color-text-muted);text-decoration:line-through}
.p-price-unit{font-size:12px;color:var(--fp-color-text-muted);font-weight:500}
.pricing-card.enterprise .p-price-unit{color:rgba(255,255,255,.6)}
.p-features{list-style:none;margin:16px 0 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.p-features li{font-size:12.5px;display:flex;gap:8px;color:var(--fp-color-text)}
.p-features li::before{content:"✓";color:var(--fp-color-success);font-weight:700;flex-shrink:0}
.p-cta{padding:11px;border-radius:var(--fp-radius-md);font-size:13px;font-weight:700;text-align:center;transition:filter .2s var(--fp-ease), transform .2s var(--fp-ease)}
.p-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.p-cta.primary{background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));color:#fff;box-shadow:var(--fp-glow-primary)}
.p-cta.ghost{background:rgba(255,255,255,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);color:var(--fp-color-primary)}
.pricing-card.enterprise .p-cta{background:#fff;color:var(--fp-color-secondary);box-shadow:none}

@media (max-width:980px){
  .eco-grid{grid-template-columns:repeat(2,1fr)}
  .eco-grid.roadmap-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid.partner{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .eco-grid,.eco-grid.roadmap-grid{grid-template-columns:1fr}
  .pricing-grid.citizen,.pricing-grid.partner{grid-template-columns:1fr}
  .hero-stats{gap:20px}
}