/* ================= v6: vai trò NTS / đối tác phân phối ================= */
.sw-role{position:relative;overflow:hidden}
.sw-role::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 360px at 50% 0,rgba(40,163,74,.08),transparent 70%)}
.sw-chain{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1.15fr) 90px minmax(0,1fr);align-items:center;max-width:1100px;margin:18px auto 0}
.sw-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 20px;border-radius:22px;background:#fff;border:1px solid var(--x-line);box-shadow:var(--x-shadow-sm)}
.sw-node small{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--x-muted)}
.sw-node strong{font-size:16px;color:var(--x-ink);line-height:1.35}
.sw-node-vendor img{height:46px;width:auto;max-width:190px;object-fit:contain;margin-bottom:6px}
.sw-node-nts{z-index:1;padding:34px 22px 28px;background:linear-gradient(160deg,#1B325D,#0f1f40);border-color:transparent;box-shadow:0 40px 80px -30px rgba(27,50,93,.8)}
.sw-node-nts img{position:relative;z-index:1;width:104px;height:104px;border-radius:50%;background:#fff;padding:6px;object-fit:contain;box-shadow:0 0 0 6px rgba(255,255,255,.08)}
.sw-node-nts strong{color:#fff;margin-top:4px}
.sw-node-nts em{position:relative;z-index:1;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.04em;padding:6px 14px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--x-accent),var(--x-accent-2));box-shadow:0 10px 24px -8px rgba(40,163,74,.9)}
.sw-node-glow{position:absolute;left:50%;top:34px;width:104px;height:104px;margin-left:-52px;border-radius:50%;border:2px solid rgba(123,219,149,.7);animation:swGlow 2.8s ease-out infinite}
.sw-node-glow::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(123,219,149,.5);animation:swGlow 2.8s ease-out 1.4s infinite}
@keyframes swGlow{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.sw-node-vn ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;width:100%}
.sw-node-vn li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--x-bg);font-weight:700;font-size:14px;color:var(--x-ink);text-align:left}
.sw-node-vn li svg{color:var(--x-accent-strong);flex:none}
.sw-link{position:relative;height:4px;margin:0 6px;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(40,163,74,.25) 0 8px,transparent 8px 14px)}
.sw-link i{position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--x-accent);box-shadow:0 0 12px rgba(40,163,74,.9);animation:swTravel 2.4s linear infinite}
.sw-link i:nth-child(2){animation-delay:.8s}.sw-link i:nth-child(3){animation-delay:1.6s}
@keyframes swTravel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}

.sw .sw-proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:36px auto 0;padding:14px 22px;max-width:820px;border-radius:18px;background:linear-gradient(135deg,rgba(40,163,74,.12),rgba(40,163,74,.04));border:1px solid rgba(40,163,74,.4);font-weight:700;color:var(--x-ink)}
.sw-proof-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--x-accent);color:#fff}
.sw-proof a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--x-line);color:var(--x-accent-strong);font-size:14px;text-decoration:none;transition:transform .25s var(--x-ease),box-shadow .25s}
.sw-proof a:hover{transform:translateY(-2px);box-shadow:var(--x-shadow-md)}

.sw-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.sw-role-card{position:relative;padding:30px 28px;border-radius:var(--x-r-lg);background:var(--x-bg);border:1px solid var(--x-line);transition:transform .35s var(--x-ease),box-shadow .35s,background .35s,border-color .35s}
.sw-role-card::after{content:"";position:absolute;left:28px;right:28px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--x-accent),var(--x-accent-2));transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--x-ease)}
.sw-role-card:hover{transform:translateY(-6px);background:#fff;box-shadow:var(--x-shadow-md);border-color:transparent}
.sw-role-card:hover::after{transform:scaleX(1)}
.sw-role-card .sw-ico{margin-bottom:18px}
.sw-role-card p{font-size:15px;color:var(--x-muted)}

.sw-benefits{display:grid;grid-template-columns:1fr 1.2fr auto;gap:28px;align-items:center;margin-top:34px;padding:34px 38px;border-radius:var(--x-r-xl);color:#fff;
  background:radial-gradient(500px 240px at 90% 0,rgba(40,163,74,.35),transparent 60%),linear-gradient(135deg,#1B325D,#0f1f40);box-shadow:var(--x-shadow-lg)}
.sw-benefits h3{color:#fff;font-size:22px;margin:0}
.sw-benefits ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.sw-benefits li{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:14.5px;line-height:1.45}
.sw-benefits li i{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--x-accent);color:#fff;font-style:normal}

@media (max-width:1024px){
  .sw-chain{grid-template-columns:1fr;gap:6px;max-width:460px}
  .sw-link{width:4px;height:48px;margin:0 auto;background:repeating-linear-gradient(180deg,rgba(40,163,74,.25) 0 8px,transparent 8px 14px)}
  .sw-link i{left:50%;top:0;margin:0 0 0 -5px;animation-name:swTravelV}
  @keyframes swTravelV{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}
  .sw-role-grid{grid-template-columns:repeat(2,1fr)}
  .sw-benefits{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sw-role-grid{grid-template-columns:1fr}
  .sw-benefits{padding:26px 22px}
  .sw-benefits ul{grid-template-columns:1fr}
  .sw-proof{border-radius:20px}
}
@media (prefers-reduced-motion:reduce){.sw-node-glow,.sw-node-glow::after,.sw-link i{animation:none}}
.sw-demo-grid>*,.sw-live-grid>*,.sw-studio,.sw-studio-canvas,.sw-studio-body>*{min-width:0;max-width:100%}
.sw-studio{width:100%}
@media (max-width:640px){
  .sw-role-card{display:grid;grid-template-columns:48px 1fr;gap:2px 14px;padding:18px 18px 20px}
  .sw-role-card .sw-ico{grid-row:span 2;margin:0}
  .sw-role-card h3{margin:0;align-self:end}
  .sw-role-grid{gap:12px;margin-top:30px}
  .sw-hot{width:24px;height:24px}
  .sw-studio-status{gap:10px;font-size:10.5px;flex-wrap:wrap}
  .sw-demo-steps li{flex-basis:84%}
}
@media (max-width:1100px){
  .sw-demo-steps{display:grid;grid-template-columns:1fr;gap:10px;overflow:visible;scroll-snap-type:none;padding:0}
  .sw-demo-steps li{flex:none;width:100%}
  .sw-demo-step{padding:14px 16px 16px;grid-template-columns:40px 1fr;gap:12px;box-shadow:0 1px 2px rgba(14,34,54,.06)}
  .sw-demo-step:hover{transform:none}
  .sw-demo-no{width:40px;height:40px}
  .sw-demo-body strong{font-size:15.5px}
  .sw-demo-step.is-on{box-shadow:0 10px 26px -14px rgba(40,163,74,.55)}
  .sw-demo-note{margin-top:16px;padding:0 4px}
}