/**
 * VNPT TP.HỒ CHÍ MINH — VNPT DIGITAL ECOSYSTEM HERO (2026 EDITION)
 * Chuẩn: Modern SaaS / Premium Technology UI / Modern Corporate / Clean Minimal
 * Trung tâm: LOGO VNPT CHÍNH THỨC, THANH LỊCH (FOCAL POINT DUY NHẤT)
 * Quỹ đạo: 4 vòng Ellipse mảnh công nghệ kết hợp 14 Service Node vệ tinh quay GPU
 * Tối ưu: GPU Transform 60fps, Zero CLS, Zero Overflow, 100% Text nằm ngang
 */

/* ==========================================================================
   1. HERO SECTION CONTAINER
   ========================================================================== */
.vnpt-ecosystem-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 20%, rgba(34, 184, 255, 0.14), transparent 42%),
    radial-gradient(circle at 10% 75%, rgba(0, 104, 255, 0.06), transparent 40%),
    linear-gradient(135deg, #ffffff 0%, #f6faff 45%, #ecf4ff 100%);
  padding-block: clamp(2.5rem, 4.5vw, 4.25rem);
  min-height: clamp(640px, 46vw, 750px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 104, 255, 0.08);
}

.vnpt-ecosystem-container {
  position: relative;
  z-index: 2;
}

.vnpt-ecosystem-hero .row {
  --bs-gutter-x: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
}

/* ==========================================================================
   2. CỘT TRÁI (45–50%): VALUE PROPOSITION, HEADLINE & ACTIONS
   ========================================================================== */
.vnpt-ecosystem-content {
  position: relative;
  z-index: 4;
  max-width: 550px;
}

/* Badge thông điệp */
.vnpt-ecosystem-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 104, 255, 0.16);
  box-shadow: 0 4px 16px rgba(0, 68, 160, 0.05);
  margin-bottom: clamp(16px, 2vw, 22px);
  backdrop-filter: blur(8px);
}

.vnpt-ecosystem-badge-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0068ff;
  display: inline-block;
}

.vnpt-ecosystem-badge-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(0, 104, 255, 0.45);
  animation: vnpt-badge-pulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes vnpt-badge-pulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.vnpt-ecosystem-badge-text {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vnpt-primary-dark, #0052cc);
  text-transform: uppercase;
}

/* Tiêu đề chính */
.vnpt-ecosystem-title {
  font-family: var(--font-display, "Manrope", sans-serif);
  font-size: clamp(2.3rem, 3.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.035em;
  color: var(--vnpt-navy, #082e6b);
  margin-bottom: clamp(14px, 2vw, 20px);
}

.vnpt-ecosystem-title .vnpt-text-gradient {
  background: linear-gradient(135deg, #0068ff 0%, #0047b9 60%, #168bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

/* Mô tả ngắn */
.vnpt-ecosystem-desc {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.68;
  color: var(--vnpt-text-secondary, #334155);
  margin-bottom: clamp(22px, 3vw, 30px);
  max-width: 48ch;
}

/* Khối nút bấm CTA */
.vnpt-ecosystem-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 3.5vw, 34px);
}

.vnpt-ecosystem-actions .vnpt-btn {
  min-height: 50px;
  padding: 12px 26px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.975rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              background 0.2s ease;
}

.vnpt-ecosystem-actions .vnpt-btn--primary {
  background: linear-gradient(135deg, #168bff 0%, #0068ff 50%, #0047b9 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 24px rgba(0, 104, 255, 0.28);
}

.vnpt-ecosystem-actions .vnpt-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 104, 255, 0.38);
}

.vnpt-ecosystem-actions .vnpt-btn--secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--vnpt-navy, #082e6b) !important;
  border: 1.5px solid rgba(0, 104, 255, 0.2);
  box-shadow: 0 4px 14px rgba(0, 68, 160, 0.05);
}

.vnpt-ecosystem-actions .vnpt-btn--secondary:hover {
  background: #ffffff;
  border-color: var(--vnpt-primary, #0068ff);
  color: var(--vnpt-primary, #0068ff) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 68, 160, 0.1);
}

/* Trust Indicators */
.vnpt-ecosystem-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding-top: 18px;
  border-top: 1px solid rgba(0, 104, 255, 0.09);
}

.vnpt-ecosystem-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--vnpt-text-secondary, #334155);
}

.vnpt-ecosystem-trust-item i {
  color: #16a34a;
  font-size: 0.95rem;
}

/* ==========================================================================
   3. CỘT PHẢI (50–55%): VNPT SERVICE ECOSYSTEM ORBIT STAGE
   ========================================================================== */
.vnpt-ecosystem-visual {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 530px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: visible;
}

/* Ambient Radial Glows (Hào quang xanh/cyan cực nhẹ phía sau logo) */
.vnpt-ecosystem-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 104, 255, 0.14) 0%, rgba(34, 184, 255, 0.05) 50%, transparent 72%);
  filter: blur(38px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: vnpt-glow-breathe 8s ease-in-out infinite alternate;
}

.vnpt-ecosystem-glow-cyan {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(34, 184, 255, 0.22) 0%, rgba(0, 104, 255, 0.04) 55%, transparent 75%);
  filter: blur(24px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

@keyframes vnpt-glow-breathe {
  0% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

/* ==========================================================================
   4. TÂM HỆ SINH THÁI: LOGO VNPT CHÍNH THỨC (FOCAL POINT DUY NHẤT)
   ========================================================================== */
.vnpt-ecosystem-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.vnpt-ecosystem-logo-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 84px;
  padding: 16px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 104, 255, 0.16);
  box-shadow:
    0 12px 32px rgba(0, 68, 160, 0.08),
    0 0 20px rgba(34, 184, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  animation: vnpt-logo-subtle-float 6s ease-in-out infinite;
}

.vnpt-ecosystem-logo {
  width: 100%;
  max-width: 132px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 75, 180, 0.12));
}

@keyframes vnpt-logo-subtle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ==========================================================================
   5. CẤU TRÚC 4 QUỸ ĐẠO ELLIPSE & GPU KEYFRAME ROTATION
   ========================================================================== */
.vnpt-ecosystem-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Track tròn xoay bên trong quỹ đạo ellipse */
.vnpt-ecosystem-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Keyframes xoay track (CW & CCW) */
@keyframes vnpt-rotate-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes vnpt-rotate-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Keyframes triệt tiêu góc xoay (Counter-rotation để chữ luôn nằm ngang) */
@keyframes vnpt-counter-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes vnpt-counter-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- ORBIT 01 (Vòng trong: 3 nodes, nghiêng -12deg, aspect 0.54, CW 36s) --- */
.vnpt-ecosystem-orbit--1 {
  width: 310px;
  height: 310px;
  transform: translate(-50%, -50%) rotate(-12deg) scale(1, 0.54);
  border: 1px dashed rgba(0, 104, 255, 0.22);
}

.vnpt-ecosystem-orbit--1 .vnpt-ecosystem-track--cw {
  animation: vnpt-rotate-cw 36s linear infinite;
}

.vnpt-ecosystem-orbit--1 .vnpt-ecosystem-slot {
  transform: rotate(var(--slot-angle)) translate(155px) rotate(calc(-1 * var(--slot-angle)));
}

.vnpt-ecosystem-orbit--1 .vnpt-ecosystem-node-unscale {
  animation: vnpt-counter-cw 36s linear infinite;
}

.vnpt-ecosystem-orbit--1 .vnpt-ecosystem-node {
  transform: translate(-50%, -50%) scale(1, 1.8518) rotate(12deg);
}

/* --- ORBIT 02 (Vòng giữa trong: 4 nodes, nghiêng +15deg, aspect 0.56, CCW 48s) --- */
.vnpt-ecosystem-orbit--2 {
  width: 425px;
  height: 425px;
  transform: translate(-50%, -50%) rotate(15deg) scale(1, 0.56);
  border: 1px solid rgba(22, 139, 255, 0.20);
}

.vnpt-ecosystem-orbit--2 .vnpt-ecosystem-track--ccw {
  animation: vnpt-rotate-ccw 48s linear infinite;
}

.vnpt-ecosystem-orbit--2 .vnpt-ecosystem-slot {
  transform: rotate(var(--slot-angle)) translate(212px) rotate(calc(-1 * var(--slot-angle)));
}

.vnpt-ecosystem-orbit--2 .vnpt-ecosystem-node-unscale {
  animation: vnpt-counter-ccw 48s linear infinite;
}

.vnpt-ecosystem-orbit--2 .vnpt-ecosystem-node {
  transform: translate(-50%, -50%) scale(1, 1.7857) rotate(-15deg);
}

/* --- ORBIT 03 (Vòng giữa ngoài: 4 nodes, nghiêng -18deg, aspect 0.52, CW 60s) --- */
.vnpt-ecosystem-orbit--3 {
  width: 535px;
  height: 535px;
  transform: translate(-50%, -50%) rotate(-18deg) scale(1, 0.52);
  border: 1px dashed rgba(0, 82, 204, 0.18);
}

.vnpt-ecosystem-orbit--3 .vnpt-ecosystem-track--cw {
  animation: vnpt-rotate-cw 60s linear infinite;
}

.vnpt-ecosystem-orbit--3 .vnpt-ecosystem-slot {
  transform: rotate(var(--slot-angle)) translate(267px) rotate(calc(-1 * var(--slot-angle)));
}

.vnpt-ecosystem-orbit--3 .vnpt-ecosystem-node-unscale {
  animation: vnpt-counter-cw 60s linear infinite;
}

.vnpt-ecosystem-orbit--3 .vnpt-ecosystem-node {
  transform: translate(-50%, -50%) scale(1, 1.9231) rotate(18deg);
}

/* --- ORBIT 04 (Vòng ngoài cùng: 3 nodes, nghiêng +22deg, aspect 0.54, CCW 72s) --- */
.vnpt-ecosystem-orbit--4 {
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%) rotate(22deg) scale(1, 0.54);
  border: 1px solid rgba(34, 184, 255, 0.18);
}

.vnpt-ecosystem-orbit--4 .vnpt-ecosystem-track--ccw {
  animation: vnpt-rotate-ccw 72s linear infinite;
}

.vnpt-ecosystem-orbit--4 .vnpt-ecosystem-slot {
  transform: rotate(var(--slot-angle)) translate(320px) rotate(calc(-1 * var(--slot-angle)));
}

.vnpt-ecosystem-orbit--4 .vnpt-ecosystem-node-unscale {
  animation: vnpt-counter-ccw 72s linear infinite;
}

.vnpt-ecosystem-orbit--4 .vnpt-ecosystem-node {
  transform: translate(-50%, -50%) scale(1, 1.8518) rotate(-22deg);
}

/* ==========================================================================
   6. SLOTS & SERVICE NODES (GLASS/WHITE PILL — DOM 100% THỰC TẾ)
   ========================================================================== */
.vnpt-ecosystem-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: auto;
}

.vnpt-ecosystem-node-unscale {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: auto;
  will-change: transform;
}

/* Node dạng viên nang kính/trắng (Glass/White Pill) */
.vnpt-ecosystem-node {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 6px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 102, 255, 0.15);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 68, 160, 0.07),
              0 0 12px rgba(34, 184, 255, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--vnpt-navy, #082e6b);
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  will-change: transform, box-shadow;
  transition: box-shadow 0.25s ease,
              border-color 0.2s ease,
              background 0.2s ease;
}

/* Icon tròn bên trong Node */
.vnpt-ecosystem-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eaf4ff 0%, #f0f7ff 100%);
  color: var(--vnpt-primary, #0068ff);
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Tên dịch vụ */
.vnpt-ecosystem-node-text {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: #14325a;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

/* ==========================================================================
   7. HOVER NODE & QUỸ ĐẠO TƯƠNG ỨNG TĂNG OPACITY & PAUSE
   ========================================================================== */
/* Tạm dừng chuyển động khi rê chuột vào node để khách hàng bấm thuận tiện */
.vnpt-ecosystem-orbit:has(.vnpt-ecosystem-node:hover) .vnpt-ecosystem-track,
.vnpt-ecosystem-orbit:has(.vnpt-ecosystem-node:hover) .vnpt-ecosystem-node-unscale {
  animation-play-state: paused !important;
}

/* Quỹ đạo liên quan sáng và tăng độ nổi bật */
.vnpt-ecosystem-orbit:has(.vnpt-ecosystem-node:hover) {
  border-color: rgba(0, 104, 255, 0.55) !important;
  box-shadow: 0 0 14px rgba(34, 184, 255, 0.3) !important;
}

/* Hover node: sáng nhẹ, scale 1.04, viền xanh VNPT */
.vnpt-ecosystem-node:hover,
.vnpt-ecosystem-node:focus-visible {
  z-index: 25;
  background: #ffffff;
  border-color: var(--vnpt-primary, #0068ff);
  box-shadow: 0 8px 24px rgba(0, 104, 255, 0.22),
              0 0 14px rgba(34, 184, 255, 0.3);
  color: var(--vnpt-primary, #0068ff);
}

.vnpt-ecosystem-orbit--1 .vnpt-ecosystem-node:hover {
  transform: translate(-50%, -50%) scale(1.04, calc(1.04 * 1.8518)) rotate(12deg) !important;
}

.vnpt-ecosystem-orbit--2 .vnpt-ecosystem-node:hover {
  transform: translate(-50%, -50%) scale(1.04, calc(1.04 * 1.7857)) rotate(-15deg) !important;
}

.vnpt-ecosystem-orbit--3 .vnpt-ecosystem-node:hover {
  transform: translate(-50%, -50%) scale(1.04, calc(1.04 * 1.9231)) rotate(18deg) !important;
}

.vnpt-ecosystem-orbit--4 .vnpt-ecosystem-node:hover {
  transform: translate(-50%, -50%) scale(1.04, calc(1.04 * 1.8518)) rotate(-22deg) !important;
}

.vnpt-ecosystem-node:hover .vnpt-ecosystem-node-icon,
.vnpt-ecosystem-node:focus-visible .vnpt-ecosystem-node-icon {
  background: linear-gradient(135deg, #168bff 0%, #0068ff 100%);
  color: #ffffff;
}

.vnpt-ecosystem-node:hover .vnpt-ecosystem-node-text,
.vnpt-ecosystem-node:focus-visible .vnpt-ecosystem-node-text {
  color: var(--vnpt-primary, #0068ff);
}

.vnpt-ecosystem-node:focus-visible {
  outline: 2px solid var(--vnpt-primary, #0068ff);
  outline-offset: 2px;
}

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS (1920px -> 360px)
   ========================================================================== */

/* Màn hình lớn (≥1440px) */
@media (min-width: 1440px) {
  .vnpt-ecosystem-hero {
    min-height: 720px;
  }
  .vnpt-ecosystem-visual {
    max-width: 710px;
    height: 550px;
  }
  .vnpt-ecosystem-orbit--1 { width: 320px; height: 320px; }
  .vnpt-ecosystem-orbit--1 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(160px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-orbit--2 { width: 440px; height: 440px; }
  .vnpt-ecosystem-orbit--2 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(220px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-orbit--3 { width: 550px; height: 550px; }
  .vnpt-ecosystem-orbit--3 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(275px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-orbit--4 { width: 660px; height: 660px; }
  .vnpt-ecosystem-orbit--4 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(330px) rotate(calc(-1 * var(--slot-angle))); }
}

/* Laptop / Desktop nhỏ (992px - 1199.98px) */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .vnpt-ecosystem-hero {
    min-height: 640px;
    padding-block: 2.75rem;
  }
  .vnpt-ecosystem-visual {
    max-width: 530px;
    height: 460px;
  }
  .vnpt-ecosystem-logo-surface {
    width: 150px;
    height: 74px;
    border-radius: 17px;
  }
  .vnpt-ecosystem-logo {
    max-width: 115px;
  }

  .vnpt-ecosystem-orbit--1 { width: 250px; height: 250px; }
  .vnpt-ecosystem-orbit--1 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(125px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-orbit--2 { width: 345px; height: 345px; }
  .vnpt-ecosystem-orbit--2 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(172px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-orbit--3 { width: 440px; height: 440px; }
  .vnpt-ecosystem-orbit--3 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(220px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-orbit--4 { width: 525px; height: 525px; }
  .vnpt-ecosystem-orbit--4 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(262px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-node {
    padding: 4px 10px 4px 5px;
  }
  .vnpt-ecosystem-node-text {
    font-size: 0.76rem;
  }
}

/* Tablet ngang (769px - 991.98px) */
@media (max-width: 991.98px) and (min-width: 768.02px) {
  .vnpt-ecosystem-hero {
    min-height: auto;
    padding-block: 3rem 2.5rem;
  }
  .vnpt-ecosystem-content {
    max-width: 100%;
    margin-bottom: 2rem;
    text-align: center;
  }
  .vnpt-ecosystem-desc {
    margin-inline: auto;
  }
  .vnpt-ecosystem-actions {
    justify-content: center;
  }
  .vnpt-ecosystem-trust {
    justify-content: center;
  }
  .vnpt-ecosystem-visual {
    max-width: 530px;
    height: 460px;
  }
  .vnpt-ecosystem-logo-surface {
    width: 150px;
    height: 74px;
  }
  .vnpt-ecosystem-logo {
    max-width: 115px;
  }

  .vnpt-ecosystem-orbit--1 { width: 250px; height: 250px; }
  .vnpt-ecosystem-orbit--1 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(125px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-orbit--2 { width: 345px; height: 345px; }
  .vnpt-ecosystem-orbit--2 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(172px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-orbit--3 { width: 440px; height: 440px; }
  .vnpt-ecosystem-orbit--3 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(220px) rotate(calc(-1 * var(--slot-angle))); }

  .vnpt-ecosystem-orbit--4 { width: 525px; height: 525px; }
  .vnpt-ecosystem-orbit--4 .vnpt-ecosystem-slot { transform: rotate(var(--slot-angle)) translate(262px) rotate(calc(-1 * var(--slot-angle))); }
}

/* ==========================================================================
   MÀN HÌNH ≤768px: MOBILE & TABLET DỌC
   (Chuyển sang 1 cột, 2 orbit, 6 node chủ lực, 0 overflow, touch ≥44px)
   ========================================================================== */
@media (max-width: 768px) {
  .vnpt-ecosystem-hero {
    padding-block: 2rem 2.25rem;
    min-height: auto;
    overflow-x: hidden;
  }

  .vnpt-ecosystem-content {
    text-align: left;
    margin-bottom: 1.75rem;
    max-width: 100%;
  }

  .vnpt-ecosystem-title {
    font-size: clamp(1.85rem, 7.5vw, 2.35rem);
    line-height: 1.18;
  }

  .vnpt-ecosystem-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.35rem;
  }

  .vnpt-ecosystem-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    margin-bottom: 1.5rem;
  }

  .vnpt-ecosystem-actions .vnpt-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 0.92rem;
    justify-content: center;
  }

  .vnpt-ecosystem-trust {
    gap: 8px 14px;
    padding-top: 14px;
  }

  .vnpt-ecosystem-trust-item {
    font-size: 0.78rem;
  }

  /* Visual stage trên Mobile */
  .vnpt-ecosystem-visual {
    max-width: 350px;
    height: 310px;
    margin-inline: auto;
    overflow: visible;
  }

  .vnpt-ecosystem-glow {
    width: 220px;
    height: 220px;
  }

  .vnpt-ecosystem-logo-surface {
    width: 124px;
    height: 62px;
    padding: 10px 12px;
    border-radius: 15px;
  }

  .vnpt-ecosystem-logo {
    max-width: 96px;
  }

  /* ẨN 8 node desktop-only */
  .vnpt-ecosystem-slot--desktop-only {
    display: none !important;
  }

  /* ẨN Orbit 3 & 4 trên mobile */
  .vnpt-ecosystem-orbit--3,
  .vnpt-ecosystem-orbit--4 {
    display: none !important;
  }

  /* Orbit 1 Mobile: 2 nodes (SmartCA, AI) */
  .vnpt-ecosystem-orbit--1 {
    width: 170px;
    height: 170px;
    transform: translate(-50%, -50%) rotate(-10deg) scale(1, 0.58);
  }

  .vnpt-ecosystem-orbit--1 .vnpt-ecosystem-slot {
    transform: rotate(var(--slot-angle-mobile, 0deg)) translate(85px) rotate(calc(-1 * var(--slot-angle-mobile, 0deg)));
  }

  .vnpt-ecosystem-orbit--1 .vnpt-ecosystem-node {
    transform: translate(-50%, -50%) scale(1, 1.724) rotate(10deg);
  }

  /* Orbit 2 Mobile: 4 nodes (VNPT Cloud, eContract, Internet VNPT, Hóa đơn điện tử) */
  .vnpt-ecosystem-orbit--2 {
    width: 250px;
    height: 250px;
    transform: translate(-50%, -50%) rotate(14deg) scale(1, 0.58);
  }

  .vnpt-ecosystem-orbit--2 .vnpt-ecosystem-slot {
    transform: rotate(var(--slot-angle-mobile, 0deg)) translate(125px) rotate(calc(-1 * var(--slot-angle-mobile, 0deg)));
  }

  .vnpt-ecosystem-orbit--2 .vnpt-ecosystem-node {
    transform: translate(-50%, -50%) scale(1, 1.724) rotate(-14deg);
  }

  .vnpt-ecosystem-node {
    padding: 3px 8px 3px 5px;
    gap: 4px;
    min-height: 28px;
  }

  .vnpt-ecosystem-node-icon {
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
  }

  .vnpt-ecosystem-node-text {
    font-size: 0.70rem;
  }
}

/* Màn hình điện thoại (≤430px) */
@media (max-width: 430px) {
  .vnpt-ecosystem-actions {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .vnpt-ecosystem-actions .vnpt-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 0.90rem;
  }

  .vnpt-ecosystem-visual {
    max-width: 300px;
    height: 280px;
  }

  .vnpt-ecosystem-logo-surface {
    width: 116px;
    height: 58px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .vnpt-ecosystem-logo {
    max-width: 88px;
  }

  .vnpt-ecosystem-orbit--1 {
    width: 155px;
    height: 155px;
  }

  .vnpt-ecosystem-orbit--1 .vnpt-ecosystem-slot {
    transform: rotate(var(--slot-angle-mobile, 0deg)) translate(77px) rotate(calc(-1 * var(--slot-angle-mobile, 0deg)));
  }

  .vnpt-ecosystem-orbit--2 {
    width: 228px;
    height: 228px;
  }

  .vnpt-ecosystem-orbit--2 .vnpt-ecosystem-slot {
    transform: rotate(var(--slot-angle-mobile, 0deg)) translate(114px) rotate(calc(-1 * var(--slot-angle-mobile, 0deg)));
  }

  .vnpt-ecosystem-node-text {
    font-size: 0.67rem;
  }
}

/* ==========================================================================
   9. HỖ TRỢ PREFERS-REDUCED-MOTION (WCAG 2.2 AA)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vnpt-ecosystem-track,
  .vnpt-ecosystem-node-unscale,
  .vnpt-ecosystem-glow,
  .vnpt-ecosystem-logo-surface,
  .vnpt-ecosystem-badge-pulse::after {
    animation: none !important;
    transition: none !important;
  }
}