:root{
  /* ===== Newater Logo Palette ===== */
  --nw-blue:   #22537A;
  --nw-green:  #79B43D;
  --nw-teal:   #779EAA;
  --nw-gold:   #D7CA62;

  /* system */
  --nw-primary: var(--nw-blue);
  --nw-success: var(--nw-green);
  --nw-dark:    #0B1320;
  --nw-soft:    #F6F9F7;
  --nw-border:  #DDE7E1;

  --nw-text:    #0B1320;
}

/* ===== HERO IOT ===== */
.hero-iot{
  color:#fff;
  padding: 28px 0 18px;

  background:
    radial-gradient(900px 520px at 18% 10%, rgba(121,180,61,.22), transparent 60%),
    radial-gradient(780px 460px at 82% 18%, rgba(34,83,122,.28), transparent 56%),
    linear-gradient(180deg, #09121E 0%, #0B1320 100%);
}

/* Badge trên hero */
.badge-soft{
  display:inline-flex;
  gap:.4rem;
  align-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:.78rem;
  line-height:1.2;
}

/* Card trong hero (desktop + mobile) */
.hero-card{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1.25rem;
  box-shadow: 0 22px 90px rgba(0,0,0,.35);
}

/* KPI */
.kpi{
  border: 1px dashed rgba(255,255,255,.24);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: .9rem 1rem;
  min-height: 92px;
}
.kpi .sub{ opacity:.86; }

/* ===== Buttons: đồng bộ màu logo ===== */
.btn-primary{
  background: var(--nw-blue) !important;
  border-color: var(--nw-blue) !important;
  color:#fff !important;
  font-weight:700;
}
.btn-primary:hover{
  background:#1C4666 !important;
  border-color:#1C4666 !important;
}
.btn-primary:focus{
  box-shadow: 0 0 0 .25rem rgba(34,83,122,.25) !important;
}

/* Nút light trong hero: nâng cấp nhìn “premium” */
.btn-light{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: var(--nw-blue) !important;
  font-weight:700;
}
.btn-light:hover{
  background:#fff !important;
  color: var(--nw-blue) !important;
}

/* Outline dark -> đổi sang outline theo nw-blue cho đồng bộ */
.btn-outline-dark{
  border-color: var(--nw-blue) !important;
  color: var(--nw-blue) !important;
  font-weight:700;
}
.btn-outline-dark:hover{
  background: rgba(34,83,122,.08) !important;
  color: var(--nw-blue) !important;
}

/* ===== Sections & Cards ===== */
.section{ padding: 4rem 0; }
.section.bg-soft{ background: var(--nw-soft); }

.card{
  border: 1px solid var(--nw-border);
  border-radius: 1.25rem;
  box-shadow: 0 10px 34px rgba(15,23,42,.06);
}

/* Icon pill: xanh dương + nhấn viền xanh lá */
.icon-pill{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;

  background: rgba(34,83,122,.10);
  border: 1px solid rgba(121,180,61,.25);
  color: var(--nw-blue);
  flex:0 0 auto;
}

/* Divider */
.divider{ height:1px; background: var(--nw-border); }

/* CTA block: gradient theo logo */
.cta{
  background: linear-gradient(
    135deg,
    rgba(34,83,122,.08),
    rgba(121,180,61,.10)
  );
  border: 1px solid var(--nw-border);
  border-radius: 1.5rem;
  padding: 2rem;
}

/* Shadow helper */
.shadow-soft{ box-shadow: 0 18px 70px rgba(2,6,23,.10); }

/* text muted */
.small-muted{ color:#64748b; }

/* ===== Architecture ===== */
.arch-box{
  border:1px solid var(--nw-border);
  border-radius:1.25rem;
  background:#fff;
  padding:1rem;
}
.arch-node{
  border:1px solid var(--nw-border);
  border-radius:1rem;
  padding:.9rem 1rem;
  background:#fff;
}
.arch-arrow{ color:#94a3b8; font-size:1.2rem; }

/* ===== Links/underline headings ===== */
.text-decoration-underline{
  text-decoration-color: rgba(121,180,61,.65) !important; /* underline xanh lá */
  text-underline-offset: 4px;
}

/* ===== Breakpoints ===== */
@media (min-width: 992px){
  .hero-iot{ padding: 5.2rem 0 2.5rem; }
  .badge-soft{ font-size:.85rem; }
  .kpi{ min-height: 102px; }
}