/* =========================================================
   SP365 Procurement — Landing page
   Design system kế thừa từ SP365 Document Suite (cùng product family SPS)
   ========================================================= */

:root{
  /* Brand */
  --orange:#F86818;
  --orange-deep:#C24E0E;          /* orange đậm cho text nhỏ trên nền sáng */
  --red:#D82828;
  --orange-tint:#FCE8DD;
  --gradient:linear-gradient(90deg, var(--orange), var(--red));
  --gradient-v:linear-gradient(180deg, var(--orange), var(--red));

  /* Surfaces */
  --dark:#1F1A1A;
  --dark-2:#2A2424;
  --dark-3:#352C2C;
  --offwhite:#F5F2EE;
  --alt-row:#EEEBE7;
  --white:#FFFFFF;

  /* Text */
  --text-dark:#2C2828;
  --text-body:#3A3636;
  --text-muted:#6B6A70;
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:#C8C4BE;

  /* Lines */
  --line:#DDD8D0;
  --line-dark:rgba(255,255,255,0.10);

  /* Radius */
  --radius-xl:24px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:10px;
  --radius-pill:100px;

  /* Spacing */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --section-y:112px;

  /* Layout */
  --container-max:1200px;
  --gutter:32px;
  --header-h:72px;

  --shadow-card:0 20px 40px -20px rgba(44,40,40,0.18);
  --shadow-float:0 24px 48px -16px rgba(44,40,40,0.18);
  --ease:cubic-bezier(.65,0,.35,1);
}

/* ---------- Base ---------- */
*, *::before, *::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color:var(--text-dark);
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto;}
a{color:inherit; text-decoration:none;}
ul, ol{list-style:none;}
button{font:inherit; color:inherit;}
section[id]{scroll-margin-top:var(--header-h);}

.sprite{position:absolute; width:0; height:0; overflow:hidden;}
.icon{
  width:1em; height:1em;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  flex-shrink:0;
}

.container{
  width:100%;
  max-width:calc(var(--container-max) + var(--gutter) * 2);
  margin:0 auto;
  padding:0 var(--gutter);
}

.skip-link{
  position:absolute; left:-9999px; top:12px; z-index:300;
  background:var(--dark); color:var(--white);
  padding:10px 16px; border-radius:var(--radius-sm); font-weight:700; font-size:14px;
}
.skip-link:focus{left:16px;}

:focus-visible{outline:3px solid rgba(248,104,24,0.55); outline-offset:3px; border-radius:6px;}

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-block;
  font-size:13px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--orange-deep);
  margin-bottom:var(--space-4);
}
.bg-dark .eyebrow{color:var(--orange);}
h1, h2, h3{font-weight:800; line-height:1.18; letter-spacing:-0.02em; text-wrap:balance;}
h2{font-size:40px;}
h3{font-size:19px;}
.hl{
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.t-orange{color:var(--orange);}
.nw{white-space:nowrap;}

.section-pad{padding:var(--section-y) 0;}
.bg-off{background:var(--offwhite);}
.bg-dark{background:var(--dark); color:var(--text-on-dark); position:relative; overflow:hidden;}

.section-head{max-width:800px; margin-bottom:56px;}
.section-head.center{max-width:880px;}
.section-head.center p:not(.eyebrow){max-width:720px; margin-left:auto; margin-right:auto;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head p:not(.eyebrow){font-size:18px; color:var(--text-body); margin-top:var(--space-4); line-height:1.6;}
.bg-dark .section-head h2{color:var(--white);}
.bg-dark .section-head p:not(.eyebrow){color:var(--text-on-dark-muted);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px;
  border-radius:var(--radius-pill);
  font-weight:700; font-size:15px; line-height:1.2;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--gradient); color:var(--white);
  box-shadow:0 8px 24px -8px rgba(248,104,24,0.55);
}
.btn-primary:hover{box-shadow:0 12px 28px -6px rgba(248,104,24,0.65);}
.btn-outline{background:transparent; border-color:var(--text-dark); color:var(--text-dark);}
.btn-outline:hover{border-color:var(--orange); color:var(--orange-deep);}
.btn-sm{padding:11px 22px; font-size:14px;}
.btn .icon{width:18px; height:18px; stroke-width:2.2;}
.btn-arrow{transition:transform .18s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}

.chip{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.chip-amber{background:#FFF4E5; color:#9A5B00;}
.chip-orange{background:var(--orange-tint); color:var(--orange-deep);}

.icon-tile{
  width:48px; height:48px;
  border-radius:14px;
  background:var(--orange-tint);
  color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.icon-tile .icon{width:24px; height:24px;}

.check-list{display:flex; flex-direction:column; gap:12px;}
.check-list li{display:flex; gap:10px; font-size:14.5px; line-height:1.5; color:var(--text-dark);}
.check-list .icon{width:18px; height:18px; color:var(--orange); stroke-width:2.4; margin-top:2px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:100;
  background:rgba(255,255,255,0.97);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,0.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -18px rgba(31,26,26,0.35);
}
.scroll-rail{position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none;}
.scroll-rail-fill{
  display:block; height:100%;
  background:var(--gradient);
  transform-origin:left center;
  transform:scaleX(0);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  height:var(--header-h);
}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand-logo{height:34px; width:auto;}
.brand-divider{width:1px; height:22px; background:var(--line);}
.brand-product{font-size:14px; font-weight:700; color:var(--text-dark); letter-spacing:-0.01em; white-space:nowrap;}

.main-nav{display:flex; align-items:center;}
.nav-links{display:flex; gap:30px;}
.nav-links a{
  position:relative;
  font-size:14.5px; font-weight:600; color:var(--text-body);
  padding:6px 0;
  transition:color .15s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--gradient); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-links a:hover, .nav-links a.is-active{color:var(--orange-deep);}
.nav-links a.is-active::after{transform:scaleX(1);}
.nav-cta-mobile{display:none;}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:12px; border:1px solid var(--line);
  background:var(--white);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle .icon{width:22px; height:22px;}

/* ---------- Hero ---------- */
.hero{
  padding:80px 0 88px;
  background:
    radial-gradient(ellipse 900px 520px at 88% -12%, var(--orange-tint) 0%, transparent 62%),
    var(--white);
  overflow:hidden;
}
.hero-copy{max-width:1080px;}
.hero h1{font-size:clamp(32px, 4.4vw, 54px); margin-bottom:var(--space-5); line-height:1.14; text-wrap:initial;}
@media (min-width:769px){ .hero h1 .hl{white-space:nowrap;} }
.hero-sub{font-size:18.5px; color:var(--text-body); max-width:700px; line-height:1.65; margin-bottom:36px; text-wrap:pretty;}
.hero .hero-mob{display:none;}
.only-mob{display:none;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px;}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.hero-tags li{
  font-size:13px; font-weight:600; color:var(--text-body);
  background:var(--alt-row);
  padding:8px 16px; border-radius:var(--radius-pill);
}

/* Hero procurement flow */
.hero-flow-scroller{margin-top:64px; outline-offset:6px;}
.hero-flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px;
}
.hero-flow-rail{
  position:absolute;
  top:17px; left:10%; right:10%;
  height:2px;
  background:var(--gradient);
  border-radius:2px;
}
.hero-flow-rail::before{ /* soft track glow */
  content:''; position:absolute; inset:-3px 0;
  background:linear-gradient(90deg, rgba(248,104,24,0.18), rgba(216,40,40,0.18));
  border-radius:4px; filter:blur(3px);
}
.hero-flow-pulse{
  position:absolute; top:50%; left:0;
  width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%;
  background:var(--white);
  border:3px solid var(--orange);
  box-shadow:0 0 0 6px rgba(248,104,24,0.18);
  animation:railPulse 6s linear infinite;
}
@keyframes railPulse{
  0%{left:0; opacity:0;}
  4%{opacity:1;}
  80%{left:100%; opacity:1;}
  86%,100%{left:100%; opacity:0;}
}
.hf-step{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
}
.hf-node{
  position:relative; z-index:1;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--orange);
  color:var(--orange-deep);
  font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  animation:nodeActive 6s var(--ease) infinite;
  animation-delay:calc(var(--i) * 1.2s);
}
.hf-step::after{ /* stub from node to card */
  content:''; width:2px; height:18px;
  background:linear-gradient(180deg, var(--orange), rgba(248,104,24,0.15));
}
.hf-card{
  width:100%;
  min-height:156px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-float);
  padding:16px 16px 14px;
  order:3;
  animation:cardActive 6s var(--ease) infinite;
  animation-delay:calc(var(--i) * 1.2s);
}
@keyframes nodeActive{
  0%,16%{background:var(--orange); color:var(--white); box-shadow:0 0 0 6px rgba(248,104,24,0.15);}
  26%,100%{background:var(--white); color:var(--orange-deep); box-shadow:none;}
}
@keyframes cardActive{
  0%,16%{border-color:rgba(248,104,24,0.7); transform:translateY(-4px);}
  26%,100%{border-color:var(--line); transform:none;}
}
.hf-label{
  font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:10px;
}
.hf-row{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:11.5px; color:var(--text-muted); padding:3px 0;}
.hf-row strong{font-size:12.5px; font-weight:800; color:var(--text-dark); white-space:nowrap;}
.hf-row strong.t-orange{color:var(--orange-deep);}
.hf-bar{height:6px; border-radius:6px; background:var(--alt-row); margin-top:10px; overflow:hidden;}
.hf-bar span{display:block; height:100%; background:var(--gradient); border-radius:6px;}
.hf-code{font-size:19px; font-weight:800; color:var(--text-dark); margin-bottom:8px; letter-spacing:-0.01em;}
.hf-note{display:flex; align-items:center; gap:6px; margin-top:10px; font-size:11.5px; font-weight:600; color:#1E8A50;}
.hf-note .icon{width:13px; height:13px; stroke-width:2.6;}
.hf-note.plain{color:var(--text-muted); font-weight:500;}
.hf-suppliers{display:flex;}
.hf-suppliers span{
  width:28px; height:28px; border-radius:50%;
  background:var(--orange-tint); color:var(--orange-deep);
  border:2px solid var(--white);
  font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-left:-6px;
}
.hf-suppliers span:first-child{margin-left:0;}

/* ---------- Social proof ---------- */
.proof{padding:56px 0 60px; border-bottom:1px solid var(--line); text-align:center;}
.proof-title{
  font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:14px;
}
.proof-stat{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 14px; margin-bottom:36px;}
.proof-stat strong{
  font-size:34px; font-weight:800;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.proof-stat span{font-size:15px; font-weight:600; color:var(--text-body);}
/* Dải logo khách hàng: 1 hàng chạy chậm, grayscale, hover hiện màu */
.logo-marquee{display:block;}
.logo-row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-track{
  --logo-gap:56px;
  display:flex; align-items:center; gap:var(--logo-gap);
  width:max-content; padding-right:var(--logo-gap);
  animation:logoLeft 80s linear infinite;
}
.logo-row:hover .logo-track{animation-play-state:paused;}
.logo-cell{display:flex; align-items:center; justify-content:center; width:150px; height:64px; flex-shrink:0;}
.logo-cell img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  filter:grayscale(100%) opacity(0.55);
  transition:filter .25s ease, transform .25s ease;
}
.logo-cell:hover img{filter:none; transform:scale(1.06);}
@keyframes logoLeft{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Pain ---------- */
.pain-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.pain-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px 22px 30px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pain-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:#E9CDBB;}
.pain-card .icon-tile{margin-bottom:20px;}
.card-num{position:absolute; top:28px; right:22px; font-size:14px; font-weight:800; color:#BDB7B0;}
.pain-card h3{font-size:17.5px; margin-bottom:10px; text-wrap:pretty;}
.pain-card p{font-size:14.5px; color:var(--text-body); line-height:1.6; text-wrap:pretty;}

/* ---------- Root problem (dark) ---------- */
.root::before{
  content:''; position:absolute;
  width:640px; height:640px; left:50%; top:-260px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(248,104,24,0.14) 0%, transparent 70%);
  pointer-events:none;
}
.root .container{position:relative; z-index:1;}
.root{padding:88px 0;}
.root-head{max-width:820px; margin:0 auto; text-align:center;}
.root-head h2{font-size:38px; line-height:1.25; color:var(--white);}

.root-sub{font-size:17px; color:var(--text-on-dark-muted); max-width:680px; margin:18px auto 0; line-height:1.65;}

/* ---------- Root problem: TRƯỚC → SPS → SAU ----------
   Trạng thái mặc định là trạng thái cuối (đầy đủ, hiển thị sẵn).
   .cmp-prep = trạng thái đầu của hiệu ứng; .cmp-run = đang chạy 4 giai đoạn. */
.root .container{max-width:calc(1320px + var(--gutter) * 2);}
.cmp{position:relative; margin-top:48px;}
.cmp-viewport{position:relative;}
.cmp-track{display:grid; grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr); align-items:stretch;}
.cmp-bridge{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1;}

.cmp-panel{position:relative; display:flex; flex-direction:column; min-width:0;}
.cmp-before, .cmp-after{
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), var(--dark-2);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-xl);
  padding:26px 28px 24px;
}
.cmp-after{
  border-color:rgba(248,104,24,0.38);
  background:radial-gradient(ellipse 520px 260px at 0% 50%, rgba(248,104,24,0.10), transparent 70%), var(--dark-2);
}
.cmp-head{display:flex; align-items:center; gap:12px; position:relative; z-index:2;}
.cmp-head h3{font-size:17px; color:var(--white); font-weight:700; line-height:1.35;}
.cmp-tag{
  flex-shrink:0;
  font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  padding:6px 13px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.08); color:var(--text-on-dark-muted);
}
.cmp-tag.is-orange{background:var(--gradient); color:var(--white);}
.cmp-hub-tag{display:none;}

/* TRƯỚC: công cụ rời rạc */
.cmp-tools{position:relative; height:300px; margin:22px 0 20px;}
.cmp-tangle{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; transition:opacity .6s ease .35s;}
.cmp-tangle path{fill:none; stroke:rgba(255,255,255,0.26); stroke-width:1.3; stroke-dasharray:3 6; stroke-linecap:round;}
.cmp-tangle circle{fill:var(--orange); opacity:0.85;}
.cmp-tool{
  --tw:104px;
  position:absolute; left:min(var(--x), calc(100% - var(--tw))); top:var(--y); z-index:2;
  width:var(--tw); min-height:90px; padding:14px 8px 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  text-align:center; font-size:12.5px; font-weight:700; line-height:1.25; color:var(--white);
  background:linear-gradient(180deg, #342C2C, #2A2323);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  box-shadow:0 14px 28px -14px rgba(0,0,0,0.7);
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:calc(var(--i) * 90ms);
}
.cmp-tool-ico{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--tint); background:rgba(255,255,255,0.06); background:color-mix(in srgb, var(--tint) 14%, transparent);}
.cmp-tool-ico .icon{width:20px; height:20px;}

/* Chips */
.cmp-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line-dark); position:relative; z-index:2; transition:opacity .5s ease;}
.cmp-chips li{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--text-on-dark-muted);
  padding:7px 12px 7px 8px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10);
}
.cmp-chip-ico{width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); flex-shrink:0;}
.cmp-chip-ico .icon{width:11px; height:11px; stroke-width:3;}
.cmp-chips.is-bad .cmp-chip-ico{background:#D9463B;}
.cmp-chips.is-good .cmp-chip-ico{background:var(--gradient);}
.cmp-chips.is-bad{transition-delay:.9s;}

/* SPS hub */
.cmp-hub-panel{align-items:center; justify-content:center; z-index:2;}
.cmp-hub{
  position:relative;
  width:196px; height:196px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:radial-gradient(circle at 50% 40%, #3A2420 0%, #1F1717 70%);
  border:2px solid var(--orange);
  box-shadow:0 0 0 10px rgba(248,104,24,0.06), 0 0 70px 8px rgba(248,104,24,0.42), inset 0 0 36px rgba(248,104,24,0.28);
  transition:opacity .6s ease, box-shadow .6s ease, filter .6s ease;
}
.cmp-hub::before, .cmp-hub::after{content:''; position:absolute; border-radius:50%; pointer-events:none;}
.cmp-hub::before{inset:-26px; border:1px solid rgba(248,104,24,0.22);}
.cmp-hub::after{inset:-56px; border:1px solid rgba(248,104,24,0.10); animation:hubBreath 4.8s ease-in-out infinite;}
@keyframes hubBreath{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.04); opacity:0.55;}}
.cmp-hub-mark{width:66px; height:auto;}
.cmp-hub-word{width:88px; height:auto;}
/* vòng dữ liệu hội tụ về hub (mobile/tablet, khi không có đường nối) */
.cmp-hub-in{display:none; position:absolute; inset:-84px; border-radius:50%; border:1px solid rgba(248,104,24,0.42); pointer-events:none; opacity:0; animation:hubIn 4s cubic-bezier(.4,0,.6,1) infinite;}
.cmp-hub-in + .cmp-hub-in{animation-delay:2s;}
@keyframes hubIn{0%{transform:scale(1.08); opacity:0;} 30%{opacity:0.7;} 100%{transform:scale(0.58); opacity:0;}}

/* SAU: một chuỗi dữ liệu */
.cmp-flow{position:relative; z-index:2; flex:1; display:flex; align-items:center; padding:28px 0;}
.cmp-steps{position:relative; z-index:1; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); width:100%;}
.cmp-step{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; font-size:13px; font-weight:700; color:var(--white); line-height:1.3; white-space:nowrap;}
.cmp-step-ico{
  position:relative;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#2B1E1B;
  border:2px solid var(--orange); color:var(--orange);
  box-shadow:0 0 18px rgba(248,104,24,0.35);
  transition:border-color .4s ease, color .4s ease, box-shadow .4s ease, background-color .4s ease;
  transition-delay:calc(var(--sd, 0s) + var(--i) * 0.22s);
}
.cmp-step-ico .icon{width:22px; height:22px;}
.cmp-step-ico::after{content:''; position:absolute; inset:-7px; border-radius:50%; border:2px solid rgba(248,104,24,0.55); opacity:0; animation:stepPing 5s ease-out infinite; animation-delay:calc(var(--i) * 0.9s);}
@keyframes stepPing{0%{opacity:0.9; transform:scale(0.9);} 18%{opacity:0; transform:scale(1.25);} 100%{opacity:0;}}
.cmp-rail{position:absolute; left:10%; right:10%; top:calc(50% - 14px); height:3px; transform:translateY(-50%); background:rgba(255,255,255,0.10); border-radius:3px;}
.cmp-rail-fill{position:absolute; inset:0; border-radius:3px; background:var(--gradient); box-shadow:0 0 14px rgba(248,104,24,0.55); transform-origin:left center; transition:transform 1.2s cubic-bezier(.65,0,.35,1) var(--rd, 0s);}
.cmp-rail-dot{position:absolute; top:50%; left:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--white); box-shadow:0 0 12px 3px rgba(255,190,140,0.9); animation:railRun 4.5s linear infinite; transition:opacity .4s ease;}
@keyframes railRun{0%{left:0; opacity:0;} 6%{opacity:1;} 90%{opacity:1;} 100%{left:100%; opacity:0;}}
.cmp-chips.is-good{transition-delay:3s;}

/* Đường nối (desktop) */
.cmp-links path{fill:none; stroke:url(#cmpGrad); stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(248,104,24,0.7)); transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1);}
.cmp-waves path{fill:none; stroke:rgba(248,104,24,0.22); stroke-width:1.2; stroke-dasharray:2 9; animation:waveFlow 3.2s linear infinite; transition:opacity 1s ease;}
.cmp-waves path:nth-child(even){stroke:rgba(255,255,255,0.10); animation-duration:4.4s;}
@keyframes waveFlow{to{stroke-dashoffset:-44;}}
.cmp-pulses circle{fill:#FFD2B0; filter:drop-shadow(0 0 5px rgba(255,140,60,0.95)); transition:opacity .5s ease;}

/* Trạng thái đầu của hiệu ứng */
.cmp-prep .cmp-tool{opacity:0; transform:scale(0.92); transition:none;}
.cmp-prep .cmp-tangle, .cmp-prep .cmp-chips, .cmp-prep .cmp-waves path{opacity:0; transition:none;}
.cmp-prep .cmp-links path{stroke-dashoffset:var(--len); transition:none;}
.cmp-prep .cmp-hub{opacity:0.45; filter:saturate(0.3); box-shadow:none; transition:none;}
.cmp-prep .cmp-rail-fill{transform:scaleX(0); transition:none;}
.cmp-prep .cmp-step-ico{border-color:rgba(255,255,255,0.18); color:var(--text-on-dark-muted); box-shadow:none; transition:none;}
.cmp-prep .cmp-pulses circle, .cmp-run .cmp-pulses circle{opacity:0;}
.cmp-prep .cmp-rail-dot, .cmp-run .cmp-rail-dot{animation:none; opacity:0;}
/* 4 giai đoạn: công cụ → dữ liệu chạy về hub → hub sáng → luồng SAU sáng lần lượt */
.cmp-run .cmp-links path{transition-delay:calc(0.6s + var(--li, 0) * 0.15s);}
.cmp-run .cmp-links path.to-after{transition-delay:1.9s;}
.cmp-run .cmp-hub{transition-delay:1.5s;}
.cmp-run .cmp-waves path{transition-delay:2s;}
.cmp-run{--rd:2.1s; --sd:2.1s;}

.cmp-nav{display:none;}

/* ---------- Solution ---------- */
.pillars{position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;}
.pillars-rail{
  position:absolute; top:60px; left:10%; right:10%; height:2px;
  background:var(--gradient); opacity:0.45;
}
.pillar{
  position:relative; z-index:1;
  padding:32px 30px 34px;
  border-radius:var(--radius-xl);
  background:var(--offwhite);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pillar:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.pillar-num{position:absolute; top:28px; right:30px; font-size:15px; font-weight:800; color:#BDB7B0;}
.pillar-icon{
  width:56px; height:56px; border-radius:16px;
  background:var(--gradient); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.pillar-icon .icon{width:28px; height:28px;}
.pillar h3{font-size:24px; margin-bottom:8px;}
.pillar p{font-size:16px; color:var(--text-body); line-height:1.55; text-wrap:balance;}

/* ---------- Journey ---------- */
.journey-wrap{position:relative;}
.journey-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.journey-path-bg{fill:none; stroke:var(--line); stroke-width:2;}
.journey-path{fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.9;}
.journey-dot{fill:var(--orange); filter:drop-shadow(0 0 6px rgba(248,104,24,0.8));}
.journey-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3, 1fr);
  column-gap:40px; row-gap:80px;
}
.j-step{display:flex; flex-direction:column; align-items:center; text-align:center;}
.j-node{
  width:56px; height:56px; border-radius:50%;
  background:var(--white);
  border:2px solid var(--orange);
  color:var(--orange-deep);
  font-size:16px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  box-shadow:0 0 0 6px var(--offwhite);
}
.j-body h3{font-size:17.5px; margin-bottom:8px;}
.j-body p{font-size:14.5px; color:var(--text-body); line-height:1.6; max-width:320px; margin:0 auto;}

.journey-strip{
  margin-top:72px;
  display:flex; align-items:center; gap:20px;
  background:var(--dark);
  border-radius:var(--radius-lg);
  padding:26px 32px;
  position:relative; overflow:hidden;
}
.journey-strip::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gradient-v);
}
.journey-strip-icon{
  width:48px; height:48px; border-radius:14px;
  background:var(--gradient); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.journey-strip-icon .icon{width:24px; height:24px;}
.journey-strip-title{font-size:18px; font-weight:800; color:var(--white); letter-spacing:-0.01em;}
.journey-strip-sub{font-size:14.5px; color:var(--text-on-dark-muted); margin-top:4px;}

/* ---------- Budget ---------- */
.budget-layout{display:grid; grid-template-columns:0.86fr 1.14fr; gap:44px; align-items:center;}
.metric-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.metric{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px;
}
.metric-icon{
  width:40px; height:40px; border-radius:12px;
  background:var(--orange-tint); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
}
.metric-icon .icon{width:20px; height:20px;}
.metric-label{font-size:13px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; margin:14px 0 6px;}
.metric p{font-size:14px; color:var(--text-body); line-height:1.55;}
.metric-key{border:1.5px solid var(--orange); background:linear-gradient(180deg, #FFF8F3, var(--white));}
.metric-key .metric-icon{background:var(--gradient); color:var(--white);}

.formula{
  margin-top:16px;
  background:var(--dark);
  border-radius:var(--radius-md);
  padding:22px 24px;
  color:var(--white);
}
.formula-eq{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.f-lhs, .f-rhs{display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap;}
.f-term{font-size:14px; font-weight:700; padding:7px 12px; border-radius:8px; background:rgba(255,255,255,0.08);}
.f-key{background:var(--gradient);}
.f-op{font-size:18px; font-weight:700; color:var(--text-on-dark-muted);}
.formula-bar{display:flex; height:32px; border-radius:8px; overflow:hidden; margin-top:18px; font-size:11px; font-weight:700;}
.formula-bar span{display:flex; align-items:center; justify-content:center; padding:0 6px; white-space:nowrap; overflow:hidden;}
.fb-used{flex:5; background:var(--dark-3); color:var(--text-on-dark-muted);}
.fb-held{flex:2; color:var(--white); background:repeating-linear-gradient(135deg, rgba(248,104,24,0.55) 0 6px, rgba(248,104,24,0.3) 6px 12px);}
.fb-avail{flex:3; background:var(--gradient); color:var(--white);}
.formula-caption{font-size:11px; color:var(--text-on-dark-muted); opacity:0.75; margin-top:10px;}

/* ---------- Screenshot placeholders ---------- */
.shot{margin:0;}
.shot-frame{
  background:var(--dark);
  border-radius:var(--radius-lg);
  padding:12px;
  box-shadow:0 32px 64px -20px rgba(31,26,26,0.35);
}
.shot-topbar{display:flex; gap:6px; padding:4px 6px 12px;}
.shot-topbar i{width:9px; height:9px; border-radius:50%; background:#5E5858;}
.shot-ph{
  aspect-ratio:16/10;
  border-radius:10px;
  background:repeating-linear-gradient(135deg, #F8F5F1 0 12px, #F1ECE6 12px 24px);
  border:1.5px dashed #D6CDC2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:20px; text-align:center;
  color:var(--text-muted);
}

.shot-ph .icon{width:36px; height:36px; color:var(--orange); opacity:0.75;}
.shot-ph strong{font-size:12.5px; font-weight:800; letter-spacing:0.06em; color:var(--text-dark);}
.shot-ph span{font-size:13.5px; font-weight:600;}

/* Ảnh sản phẩm thật + phóng to */
.shot-zoom{
  display:block; width:100%; position:relative;
  border:0; text-align:left; font:inherit; color:inherit;
  cursor:zoom-in;
}
.shot-zoom:focus-visible{outline:3px solid rgba(248,104,24,0.6); outline-offset:4px;}
.shot-img{display:block; width:100%; height:auto; border-radius:10px; background:var(--white);}
.shot-zoom-hint{
  position:absolute; right:22px; bottom:22px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--white);
  background:rgba(31,26,26,0.78);
  padding:6px 12px; border-radius:var(--radius-pill);
  opacity:0; transform:translateY(4px);
  transition:opacity .2s ease, transform .2s ease;
}
.shot-zoom-hint .icon{width:14px; height:14px; stroke-width:2.2;}
.shot-zoom:hover .shot-zoom-hint, .shot-zoom:focus-visible .shot-zoom-hint{opacity:1; transform:none;}
@media (hover:none){ .shot-zoom-hint{opacity:1; transform:none;} }

.lightbox{
  position:fixed; inset:0; z-index:1100;
  background:rgba(20,16,16,0.95);
  display:flex; align-items:center; justify-content:center;
  padding:56px 24px 24px;
}
.lightbox[hidden]{display:none;}
.lightbox-stage{max-width:100%; max-height:100%; overflow:auto; border-radius:12px;}
.lightbox-stage img{display:block; max-width:min(1530px, 100%); max-height:calc(100vh - 96px); width:auto; height:auto; border-radius:12px; background:var(--white);}
.lightbox-close{
  position:absolute; top:14px; right:14px;
  width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(255,255,255,0.12); color:var(--white);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,0.22);}
.lightbox-close .icon{width:20px; height:20px;}

/* ---------- Experience tabs ---------- */
.tab-list-wrap{position:relative; display:flex; justify-content:center;}
.tab-list{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:980px;}
.tab{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700;
  padding:11px 18px;
  border-radius:var(--radius-pill);
  border:1.5px solid var(--line);
  background:var(--white);
  color:var(--text-body);
  cursor:pointer; white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.tab:hover{border-color:var(--orange);}
.tab-num{font-size:11px; font-weight:800; color:var(--orange-deep);}
.tab[aria-selected="true"]{background:var(--dark); border-color:var(--dark); color:var(--white);}
.tab[aria-selected="true"] .tab-num{color:var(--orange);}
.tab-stage{max-width:980px; margin:36px auto 0;}
.tab-panel{animation:panelIn .4s ease;}
.tab-panel[hidden]{display:none;}
@keyframes panelIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.tab-panel .shot-ph{aspect-ratio:1598/942;}
.tab-panel .shot-img{aspect-ratio:1598/942; object-fit:contain; object-position:center top; background:var(--white);} /* mọi ảnh trong Trải nghiệm bám mép trên; ảnh dẹt để trống màu trắng phía dưới */ /* cùng tỷ lệ ảnh thật để khung không nhảy khi đổi tab */
.tab-caption{text-align:center; margin-top:24px;}
.tab-caption h3{font-size:20px; margin-bottom:6px;}
.tab-caption p{font-size:15.5px; color:var(--text-body); text-wrap:balance;}
.tab-controls{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:24px;}
.round-btn{
  width:48px; height:48px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .2s ease, transform .15s ease;
}
.round-btn:hover{border-color:var(--orange); transform:scale(1.05);}
.round-btn .icon{width:20px; height:20px;}
.tab-count{font-size:13px; font-weight:700; letter-spacing:0.06em; color:var(--text-muted); min-width:64px; text-align:center;}
.tab-count span{color:var(--orange-deep);}

/* ---------- Integration (dark) ---------- */

/* ---------- Why ---------- */

/* ---------- Case studies ---------- */

/* ---------- Tại sao SP365 (dark, 4 cards) ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.why-card{
  display:flex; flex-direction:column;
  background:var(--dark-2);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  padding:30px 26px;
  transition:transform .2s ease, border-color .2s ease;
}
.why-card:hover{transform:translateY(-4px); border-color:rgba(248,104,24,0.4);}
.why-icon{
  width:48px; height:48px; border-radius:14px;
  background:var(--gradient); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.why-icon .icon{width:24px; height:24px;}
.why-card h3{font-size:18px; color:var(--white); margin:22px 0 10px;}
.why-card p{font-size:14.5px; color:var(--text-on-dark-muted); line-height:1.6; text-wrap:pretty;}
@media (min-width:1240px){ .why-card h3{min-height:2.36em;} } /* 4 cột: chừa đủ 2 dòng tiêu đề để mô tả bắt đầu cùng một hàng */
.why-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:18px;}
.why-tags li{
  font-size:11.5px; font-weight:700; color:var(--white);
  padding:4px 10px; border-radius:var(--radius-pill);
  border:1px solid rgba(248,104,24,0.45);
  background:rgba(248,104,24,0.08);
}
.why::before{
  content:''; position:absolute; width:720px; height:720px;
  right:-260px; top:-260px;
  background:radial-gradient(circle, rgba(248,104,24,0.12) 0%, transparent 70%);
  pointer-events:none;
}
.why .container{position:relative; z-index:1;}

/* ---------- Deployment scope ---------- */
.scope-rail{position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-bottom:20px;}
.scope-rail span{position:absolute; top:7px; left:16.66%; right:16.66%; height:2px; background:var(--gradient);}
.scope-rail i{justify-self:center; position:relative; width:16px; height:16px; border-radius:50%; background:var(--gradient); box-shadow:0 0 0 5px var(--offwhite);}
.scope-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.scope-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:34px 30px;
  display:flex; flex-direction:column;
}
.scope-eyebrow{align-self:flex-start; font-size:12px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--orange-deep); background:var(--orange-tint); padding:5px 12px; border-radius:var(--radius-pill);}
.scope-card h3{font-size:21px; margin:14px 0 22px;}
.scope-card .check-list{flex:1;}
.scope-foot{margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--text-body); line-height:1.55;}
.snap-nav{display:none;}
.snap-count{font-size:12.5px; font-weight:700; letter-spacing:0.06em; color:var(--text-muted); min-width:34px;}
.snap-count span{color:var(--orange-deep);}
.snap-dots{display:flex; gap:8px;}
.snap-dot{width:8px; height:8px; padding:0; border:0; border-radius:5px; background:#D3CCC4; cursor:pointer; transition:width .25s ease, background .25s ease;}
.snap-dot[aria-current="true"]{width:26px; background:var(--gradient);}
.callout{
  margin-top:32px;
  display:flex; align-items:center; gap:18px;
  background:var(--white);
  border:1px dashed #D6CDC2;
  border-radius:var(--radius-md);
  padding:22px 28px;
}
.callout p{flex:1; font-size:15px; font-weight:600; color:var(--text-dark); line-height:1.55;}

/* ---------- Implementation timeline ---------- */
.timeline{position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:20px;}
.timeline::before{
  content:''; position:absolute; top:27px; left:10%; right:10%; height:2px;
  background:var(--gradient);
}
.tl-step{position:relative; text-align:center;}
.tl-node{
  position:relative; z-index:1;
  width:56px; height:56px; border-radius:50%;
  background:var(--white); border:2px solid var(--orange);
  color:var(--orange-deep); font-size:15px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
  box-shadow:0 0 0 6px var(--white);
}
.tl-step h3{font-size:16px; margin-bottom:8px;}
.tl-step p{font-size:13.5px; color:var(--text-body); line-height:1.6; padding:0 4px;}

/* ---------- Final CTA + form ---------- */
.final-cta::before{
  content:''; position:absolute; width:720px; height:720px;
  bottom:-320px; right:-120px;
  background:radial-gradient(circle, rgba(248,104,24,0.16) 0%, transparent 70%);
  pointer-events:none;
}
.fc-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.fc-left{padding-top:12px;}
.fc-left h2{font-size:38px; color:var(--white); margin-bottom:20px;}
.fc-desc{font-size:16.5px; color:var(--text-on-dark-muted); line-height:1.7;}
.fc-rail{position:relative; display:grid; grid-template-columns:repeat(5, 1fr); margin-top:40px;}
.fc-rail::before{content:''; position:absolute; top:5px; left:10%; right:10%; height:2px; background:var(--gradient);}
.fc-rail li{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:12px; font-weight:700; color:var(--text-on-dark-muted); text-align:center;
}
.fc-rail li::before{content:''; width:12px; height:12px; border-radius:50%; background:var(--gradient); box-shadow:0 0 0 4px var(--dark);}

.fc-form{
  background:var(--white);
  color:var(--text-dark);
  border-radius:var(--radius-xl);
  padding:30px 32px 26px;
  box-shadow:0 32px 64px -20px rgba(0,0,0,0.45);
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.fc-form h3{font-size:19px; margin-bottom:18px;}
/* Form gọn: 4 ô bắt buộc + 2 ô tùy chọn; desktop 3 hàng × 2 cột */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px;}
.form-grid .form-row{margin-bottom:0; min-width:0;}
.form-row{margin-bottom:16px;}
.form-row-group{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
.form-row-group .form-row{margin-bottom:0;}
.form-row label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px;}
.req{color:var(--orange-deep);}
.optional-tag{font-weight:500; color:var(--text-muted);}
.form-row input, .form-row select, .form-row textarea{
  width:100%;
  padding:11px 14px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  font-family:inherit; font-size:14.5px;
  color:var(--text-dark);
  background:var(--offwhite);
  transition:border-color .15s ease, background .15s ease;
}
.form-row input, .form-row select{height:44px;}
.form-row textarea{resize:vertical; min-height:88px;}
.form-row select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, #6B6A70 50%), linear-gradient(135deg, #6B6A70 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px;}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:none; border-color:var(--orange); background-color:var(--white);}
.form-row .field-error, .form-row .field-error:focus{border-color:#D93A2B; background-color:#FDF2F1;}
.form-row-errmsg{display:none; font-size:12px; font-weight:600; color:#C0392B; margin-top:6px;}
.form-row-errmsg.show{display:block;}
.fc-form .btn{width:100%; margin-top:0;}
.form-privacy{font-size:11.5px; color:var(--text-muted); text-align:center; margin-top:10px; line-height:1.45;}

/* ---------- FAQ ---------- */
.faq-list{max-width:840px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-h{font-size:inherit; font-weight:inherit; letter-spacing:normal; line-height:inherit;}
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px;
  background:none; border:none; text-align:left; cursor:pointer;
  font-size:17px; font-weight:700; color:var(--text-dark); line-height:1.45;
}
.faq-q:hover{color:var(--orange-deep);}
.faq-icon{
  width:30px; height:30px; border-radius:50%;
  background:var(--orange-tint); color:var(--orange);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .25s ease, background .25s ease;
}
.faq-icon .icon{width:15px; height:15px; stroke-width:2.4;}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg); background:var(--gradient); color:var(--white);}
.faq-a{overflow:hidden; height:0; transition:height .3s ease;}
.no-js .faq-a{height:auto;}
.faq-a p{font-size:15px; color:var(--text-body); line-height:1.7; padding:0 4px 24px; max-width:720px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark); color:var(--text-on-dark-muted); padding:64px 0 28px; border-top:1px solid var(--line-dark);}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:48px; margin-bottom:40px;}
.footer-brand{max-width:360px;}
.footer-brand img{height:30px; width:auto; margin-bottom:14px;}
.footer-desc{font-size:14px; color:var(--text-on-dark-muted); line-height:1.6; margin-bottom:10px;}
.footer-dev{font-size:12.5px; font-weight:600; color:#8C8790;}
.footer-contact{display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
.footer-h{font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--white);}
.footer-contact-info{display:flex; flex-direction:column; gap:6px;}
.footer-contact-info a{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--text-on-dark-muted); transition:color .15s ease;}
.footer-contact-info a:hover{color:var(--orange);}
.footer-contact-info .icon{width:15px; height:15px; color:var(--orange);}
.footer-badges{display:flex; flex-wrap:wrap; gap:8px;}
.footer-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--text-on-dark-muted);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  padding:5px 11px; border-radius:var(--radius-pill);
}
.footer-badge .icon{width:12px; height:12px; color:#4CAF50; stroke-width:2.5;}
.footer-bottom{padding-top:22px; border-top:1px solid var(--line-dark); font-size:13px; color:#8C8790;}

/* ---------- Success popup ---------- */
.success-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(31,26,26,0.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.success-overlay.show{opacity:1; visibility:visible;}
.success-modal{
  position:relative;
  width:100%; max-width:420px;
  background:var(--white);
  border-radius:var(--radius-xl);
  padding:44px 40px 36px;
  text-align:center;
  box-shadow:0 32px 64px -16px rgba(31,26,26,0.35);
  transform:scale(0.92) translateY(12px);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.success-overlay.show .success-modal{transform:none;}
.success-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  background:var(--offwhite); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.success-close:hover{background:var(--line);}
.success-close .icon{width:16px; height:16px;}
.success-icon{
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg, #E8F8EE, #D4F3E0); color:#1E9E5A;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.success-icon .icon{width:30px; height:30px; stroke-width:2.6;}
.success-modal h3{font-size:21px; margin-bottom:10px;}
.success-modal p{font-size:14.5px; color:var(--text-body); line-height:1.6; margin-bottom:24px;}
.success-modal .btn{width:100%;}

/* ---------- Reveal on scroll ----------
   Nội dung luôn hiển thị ở trạng thái nghỉ; chỉ phần tử cuộn tới sau khi tải trang mới chạy hiệu ứng. */
.js .reveal.animate-in{animation:revealIn .6s ease both; animation-delay:var(--d, 0ms);}
@keyframes revealIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1239px){
  .pain-grid{grid-template-columns:repeat(2, 1fr);}
  .why-grid{grid-template-columns:repeat(2, 1fr);}
}
/* Laptop nhỏ (1001–1239px): giữ bố cục 3 cột TRƯỚC → SPS → SAU nhưng thu gọn hub để luồng SAU đủ chỗ */
@media (min-width:1001px) and (max-width:1239px){
  .cmp-track{grid-template-columns:minmax(0,1fr) 184px minmax(0,1fr);}
  .cmp-before, .cmp-after{padding:24px 22px 22px;}
  .cmp-hub{width:156px; height:156px; gap:10px;}
  .cmp-hub::before{inset:-18px;} .cmp-hub::after{inset:-36px;}
  .cmp-hub-mark{width:54px;} .cmp-hub-word{width:74px;}
  .cmp-tool{--tw:94px; font-size:12px;}
  .cmp-step{font-size:11.5px; white-space:normal; padding:0 2px;}
  .cmp-step-ico{width:48px; height:48px;}
  .cmp-step-ico .icon{width:20px; height:20px;}
}

@media (max-width:1120px){
  .nav-links{gap:22px;}
  .nav-links a{font-size:14px;}
}

@media (max-width:1040px){
  :root{--section-y:96px;}
  /* Collapsed navigation */
  .nav-toggle{display:inline-flex;}
  .main-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--white);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px -24px rgba(31,26,26,0.35);
    padding:8px var(--gutter) 24px;
    flex-direction:column; align-items:stretch;
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .main-nav.open{display:flex;}
  .nav-links{flex-direction:column; gap:0;}
  .nav-links a{display:block; padding:14px 0; font-size:16px; border-bottom:1px solid var(--alt-row);}
  .nav-links a::after{display:none;}
  .nav-cta-mobile{display:inline-flex; margin-top:18px;}

  
  .hero-flow{gap:14px;}
  .hf-card{padding:14px 12px 12px;}
  .hf-row{flex-direction:column; gap:0;}
}

@media (max-width:1000px){
  /* Root problem → carousel 3 trạng thái: cuộn ngang có snap, hé card kế tiếp */
  .cmp{margin-top:28px;}
  .cmp-bridge{display:none;}
  .cmp-viewport{margin:0 calc(var(--gutter) * -1);}
  .cmp-track{
    display:flex; gap:12px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter);
    padding:4px var(--gutter) 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .cmp-track::-webkit-scrollbar{display:none;}
  .cmp-panel{flex:0 0 min(calc(100% - 28px), 600px); scroll-snap-align:start; scroll-snap-stop:always; transition:opacity .35s ease;}
  .cmp-panel:not(.is-active){opacity:0.5;}
  .cmp-hub-panel{
    background:radial-gradient(circle at 50% 56%, rgba(248,104,24,0.18), transparent 62%), var(--dark-2);
    border:1px solid rgba(248,104,24,0.3); border-radius:var(--radius-xl);
    padding:22px 20px; justify-content:flex-start; overflow:hidden;
  }
  .cmp-hub-tag{display:inline-flex; align-self:flex-start;}
  .cmp-hub{margin:auto 0; width:200px; height:200px;}
  .cmp-hub-mark{width:70px;} .cmp-hub-word{width:100px;}
  .cmp-hub-in{display:block;}
  .cmp-panel:not(.is-active) .cmp-rail-fill{transform:scaleX(0);}
  .cmp-panel:not(.is-active) .cmp-step-ico{border-color:rgba(255,255,255,0.18); color:var(--text-on-dark-muted); box-shadow:none;}
  .cmp-after.is-active{--rd:.25s; --sd:.35s;}
  .cmp-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px;}
  .cmp-count{font-size:12.5px; font-weight:700; letter-spacing:0.06em; color:var(--text-on-dark-muted); min-width:34px;}
  .cmp-count span{color:var(--orange);}
  .cmp-dots{display:flex; gap:8px;}
  .cmp-dot{width:8px; height:8px; padding:0; border:0; border-radius:5px; background:rgba(255,255,255,0.25); cursor:pointer; transition:width .25s ease, background .25s ease;}
  .cmp-dot[aria-current="true"]{width:26px; background:var(--gradient);}
}

@media (max-width:900px){
  h2{font-size:34px;}
  .budget-layout, .fc-grid{grid-template-columns:1fr; gap:40px;}
  
  .scope-rail{display:none;}
  /* Scope → vuốt ngang 3 nhóm (Bắt đầu → Mở rộng → Kết nối), hé card kế tiếp */
  .scope-grid{
    display:flex; gap:12px; max-width:none;
    margin:0 calc(var(--gutter) * -1); padding:2px var(--gutter) 6px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .scope-grid::-webkit-scrollbar{display:none;}
  .scope-card{flex:0 0 min(calc(100% - 28px), 420px); scroll-snap-align:start; padding:22px 20px;}
  .scope-card h3{font-size:18px; margin:12px 0 16px;}
  .scope-card .check-list{gap:9px;}
  .scope-card .check-list li{font-size:14px;}
  .scope-foot{margin-top:18px; padding-top:14px; font-size:13px;}
  .snap-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px;}
  .js .scope-card.reveal.animate-in{animation:none;} /* không trượt lên khi vuốt ngang */

  
  
  
  .pillars{grid-template-columns:1fr; gap:12px; max-width:620px; margin:0 auto;}
  .pillars-rail{top:40px; bottom:40px; left:43px; right:auto; width:2px; height:auto;}
  .pillar{display:grid; grid-template-columns:48px 1fr; column-gap:16px; align-items:center; padding:18px 20px;}
  .pillar:hover{transform:none;}
  .pillar-icon{width:48px; height:48px; border-radius:14px; margin-bottom:0;}
  .pillar-icon .icon{width:24px; height:24px;}
  .pillar-num{top:18px; right:20px; font-size:13px;}
  .pillar h3{font-size:18px; margin-bottom:2px;}
  .pillar p{font-size:14.5px; padding-right:12px;}
  .fc-left{padding-top:0;}
}

@media (max-width:768px){
  :root{--section-y:64px; --gutter:24px; --header-h:64px;}
  h2{font-size:30px;}
  .section-head{margin-bottom:32px;}
  .section-head p:not(.eyebrow){font-size:16px; margin-top:12px;}
  .eyebrow{font-size:12px; margin-bottom:12px;}

  /* Header mobile: chỉ logo + menu, thấp hơn ~12% (64 → 56px) */
  :root{--header-h:56px;}
  .brand-logo{height:28px;}
  .brand-divider, .brand-product{display:none;}
  .nav-toggle{width:42px; height:42px;}

  /* Mobile hero: Eyebrow → Flow → Headline → Mô tả → 1 CTA → khoảng trắng → section tiếp theo */
  .hero{padding:36px 0 64px;}
  .hero .hero-desk{display:none;}
  .only-desk{display:none;}
  .only-mob{display:inline;}
  .hero .hero-mob{display:inline;}
  .hero-copy{display:contents;}
  .hero .eyebrow{order:1; margin-bottom:20px; font-size:12px; letter-spacing:0.12em;}
  .hero-flow-scroller{order:2;}
  .hero h1{order:4; font-size:clamp(27px, 7.8vw, 34px); line-height:1.2; margin-bottom:22px; text-wrap:balance;}
  .hero h1 br{display:none;}
  .hero-sub{order:5; font-size:16px; line-height:1.65; color:var(--text-muted); margin-bottom:30px; text-wrap:pretty;}
  .hero-ctas{order:6;}
  .hero-tags{order:7; display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
  .hero-tags li{font-size:12.5px; padding:7px 14px; background:rgba(255,255,255,0.7); border:1px solid #EFE7E0;}
  .hero-ctas .btn-outline{display:none;}
  .hero-ctas .btn-primary{width:100%; padding:16px 24px; font-size:15.5px;}
  /* Nền hero liền một dải: cam rất nhạt ở trên, mờ dần về trắng ở cuối hero; lớp chấm cam phía sau eyebrow + luồng thẻ tan dần ở đáy */
  .hero{position:relative; background:linear-gradient(180deg, #FCEDE3 0%, #FEF5EF 34%, #FFFBF8 62%, #FFFFFF 100%);}
  .hero::before{content:''; position:absolute; left:0; right:0; top:0; height:380px; -webkit-mask-image:linear-gradient(180deg, #000 45%, transparent 100%); mask-image:linear-gradient(180deg, #000 45%, transparent 100%); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 330' fill='%23F86818'%3E%3Ccircle cx='387.0' cy='10.9' r='1.75' fill-opacity='0.308'/%3E%3Ccircle cx='382.4' cy='22.1' r='1.73' fill-opacity='0.293'/%3E%3Ccircle cx='377.1' cy='32.9' r='1.71' fill-opacity='0.278'/%3E%3Ccircle cx='371.2' cy='43.5' r='1.68' fill-opacity='0.262'/%3E%3Ccircle cx='364.6' cy='53.6' r='1.66' fill-opacity='0.246'/%3E%3Ccircle cx='357.4' cy='63.3' r='1.63' fill-opacity='0.230'/%3E%3Ccircle cx='349.7' cy='72.6' r='1.60' fill-opacity='0.214'/%3E%3Ccircle cx='341.4' cy='81.4' r='1.57' fill-opacity='0.197'/%3E%3Ccircle cx='332.6' cy='89.7' r='1.53' fill-opacity='0.181'/%3E%3Ccircle cx='323.3' cy='97.4' r='1.49' fill-opacity='0.165'/%3E%3Ccircle cx='313.6' cy='104.6' r='1.45' fill-opacity='0.150'/%3E%3Ccircle cx='303.5' cy='111.2' r='1.41' fill-opacity='0.135'/%3E%3Ccircle cx='292.9' cy='117.1' r='1.37' fill-opacity='0.121'/%3E%3Ccircle cx='282.1' cy='122.4' r='1.33' fill-opacity='0.107'/%3E%3Ccircle cx='270.9' cy='127.0' r='1.28' fill-opacity='0.094'/%3E%3Ccircle cx='259.5' cy='130.9' r='1.24' fill-opacity='0.082'/%3E%3Ccircle cx='247.9' cy='134.2' r='1.19' fill-opacity='0.071'/%3E%3Ccircle cx='236.1' cy='136.7' r='1.14' fill-opacity='0.060'/%3E%3Ccircle cx='163.9' cy='136.7' r='1.14' fill-opacity='0.060'/%3E%3Ccircle cx='152.1' cy='134.2' r='1.19' fill-opacity='0.071'/%3E%3Ccircle cx='140.5' cy='130.9' r='1.24' fill-opacity='0.082'/%3E%3Ccircle cx='129.1' cy='127.0' r='1.28' fill-opacity='0.094'/%3E%3Ccircle cx='117.9' cy='122.4' r='1.33' fill-opacity='0.107'/%3E%3Ccircle cx='107.1' cy='117.1' r='1.37' fill-opacity='0.121'/%3E%3Ccircle cx='96.5' cy='111.2' r='1.41' fill-opacity='0.135'/%3E%3Ccircle cx='86.4' cy='104.6' r='1.45' fill-opacity='0.150'/%3E%3Ccircle cx='76.7' cy='97.4' r='1.49' fill-opacity='0.165'/%3E%3Ccircle cx='67.4' cy='89.7' r='1.53' fill-opacity='0.181'/%3E%3Ccircle cx='58.6' cy='81.4' r='1.57' fill-opacity='0.197'/%3E%3Ccircle cx='50.3' cy='72.6' r='1.60' fill-opacity='0.214'/%3E%3Ccircle cx='42.6' cy='63.3' r='1.63' fill-opacity='0.230'/%3E%3Ccircle cx='35.4' cy='53.6' r='1.66' fill-opacity='0.246'/%3E%3Ccircle cx='28.8' cy='43.5' r='1.68' fill-opacity='0.262'/%3E%3Ccircle cx='22.9' cy='32.9' r='1.71' fill-opacity='0.278'/%3E%3Ccircle cx='17.6' cy='22.1' r='1.73' fill-opacity='0.293'/%3E%3Ccircle cx='13.0' cy='10.9' r='1.75' fill-opacity='0.308'/%3E%3Ccircle cx='399.7' cy='11.2' r='1.80' fill-opacity='0.315'/%3E%3Ccircle cx='395.3' cy='22.5' r='1.78' fill-opacity='0.301'/%3E%3Ccircle cx='390.2' cy='33.5' r='1.76' fill-opacity='0.286'/%3E%3Ccircle cx='384.6' cy='44.2' r='1.74' fill-opacity='0.271'/%3E%3Ccircle cx='378.3' cy='54.6' r='1.71' fill-opacity='0.256'/%3E%3Ccircle cx='371.5' cy='64.6' r='1.69' fill-opacity='0.240'/%3E%3Ccircle cx='364.1' cy='74.2' r='1.66' fill-opacity='0.224'/%3E%3Ccircle cx='356.2' cy='83.3' r='1.62' fill-opacity='0.209'/%3E%3Ccircle cx='347.8' cy='92.0' r='1.59' fill-opacity='0.193'/%3E%3Ccircle cx='338.8' cy='100.2' r='1.56' fill-opacity='0.178'/%3E%3Ccircle cx='329.5' cy='107.9' r='1.52' fill-opacity='0.163'/%3E%3Ccircle cx='319.7' cy='115.0' r='1.48' fill-opacity='0.148'/%3E%3Ccircle cx='309.5' cy='121.5' r='1.44' fill-opacity='0.134'/%3E%3Ccircle cx='298.9' cy='127.5' r='1.40' fill-opacity='0.121'/%3E%3Ccircle cx='288.1' cy='132.8' r='1.35' fill-opacity='0.108'/%3E%3Ccircle cx='276.9' cy='137.6' r='1.31' fill-opacity='0.095'/%3E%3Ccircle cx='265.5' cy='141.6' r='1.26' fill-opacity='0.084'/%3E%3Ccircle cx='253.9' cy='145.0' r='1.22' fill-opacity='0.073'/%3E%3Ccircle cx='242.1' cy='147.8' r='1.17' fill-opacity='0.063'/%3E%3Ccircle cx='157.9' cy='147.8' r='1.17' fill-opacity='0.063'/%3E%3Ccircle cx='146.1' cy='145.0' r='1.22' fill-opacity='0.073'/%3E%3Ccircle cx='134.5' cy='141.6' r='1.26' fill-opacity='0.084'/%3E%3Ccircle cx='123.1' cy='137.6' r='1.31' fill-opacity='0.095'/%3E%3Ccircle cx='111.9' cy='132.8' r='1.35' fill-opacity='0.108'/%3E%3Ccircle cx='101.1' cy='127.5' r='1.40' fill-opacity='0.121'/%3E%3Ccircle cx='90.5' cy='121.5' r='1.44' fill-opacity='0.134'/%3E%3Ccircle cx='80.3' cy='115.0' r='1.48' fill-opacity='0.148'/%3E%3Ccircle cx='70.5' cy='107.9' r='1.52' fill-opacity='0.163'/%3E%3Ccircle cx='61.2' cy='100.2' r='1.56' fill-opacity='0.178'/%3E%3Ccircle cx='52.2' cy='92.0' r='1.59' fill-opacity='0.193'/%3E%3Ccircle cx='43.8' cy='83.3' r='1.62' fill-opacity='0.209'/%3E%3Ccircle cx='35.9' cy='74.2' r='1.66' fill-opacity='0.224'/%3E%3Ccircle cx='28.5' cy='64.6' r='1.69' fill-opacity='0.240'/%3E%3Ccircle cx='21.7' cy='54.6' r='1.71' fill-opacity='0.256'/%3E%3Ccircle cx='15.4' cy='44.2' r='1.74' fill-opacity='0.271'/%3E%3Ccircle cx='9.8' cy='33.5' r='1.76' fill-opacity='0.286'/%3E%3Ccircle cx='4.7' cy='22.5' r='1.78' fill-opacity='0.301'/%3E%3Ccircle cx='0.3' cy='11.2' r='1.80' fill-opacity='0.315'/%3E%3Ccircle cx='403.3' cy='34.1' r='1.81' fill-opacity='0.292'/%3E%3Ccircle cx='397.9' cy='44.9' r='1.79' fill-opacity='0.278'/%3E%3Ccircle cx='391.9' cy='55.5' r='1.77' fill-opacity='0.263'/%3E%3Ccircle cx='385.4' cy='65.7' r='1.74' fill-opacity='0.248'/%3E%3Ccircle cx='378.3' cy='75.6' r='1.71' fill-opacity='0.233'/%3E%3Ccircle cx='370.7' cy='85.0' r='1.68' fill-opacity='0.218'/%3E%3Ccircle cx='362.6' cy='94.0' r='1.65' fill-opacity='0.203'/%3E%3Ccircle cx='354.0' cy='102.6' r='1.62' fill-opacity='0.188'/%3E%3Ccircle cx='345.0' cy='110.7' r='1.58' fill-opacity='0.174'/%3E%3Ccircle cx='335.6' cy='118.3' r='1.54' fill-opacity='0.160'/%3E%3Ccircle cx='325.7' cy='125.4' r='1.50' fill-opacity='0.146'/%3E%3Ccircle cx='315.5' cy='131.9' r='1.46' fill-opacity='0.132'/%3E%3Ccircle cx='304.9' cy='137.9' r='1.42' fill-opacity='0.120'/%3E%3Ccircle cx='294.1' cy='143.3' r='1.38' fill-opacity='0.108'/%3E%3Ccircle cx='282.9' cy='148.1' r='1.33' fill-opacity='0.096'/%3E%3Ccircle cx='271.5' cy='152.3' r='1.29' fill-opacity='0.085'/%3E%3Ccircle cx='259.9' cy='155.8' r='1.24' fill-opacity='0.075'/%3E%3Ccircle cx='248.2' cy='158.8' r='1.19' fill-opacity='0.065'/%3E%3Ccircle cx='151.8' cy='158.8' r='1.19' fill-opacity='0.065'/%3E%3Ccircle cx='140.1' cy='155.8' r='1.24' fill-opacity='0.075'/%3E%3Ccircle cx='128.5' cy='152.3' r='1.29' fill-opacity='0.085'/%3E%3Ccircle cx='117.1' cy='148.1' r='1.33' fill-opacity='0.096'/%3E%3Ccircle cx='105.9' cy='143.3' r='1.38' fill-opacity='0.108'/%3E%3Ccircle cx='95.1' cy='137.9' r='1.42' fill-opacity='0.120'/%3E%3Ccircle cx='84.5' cy='131.9' r='1.46' fill-opacity='0.132'/%3E%3Ccircle cx='74.3' cy='125.4' r='1.50' fill-opacity='0.146'/%3E%3Ccircle cx='64.4' cy='118.3' r='1.54' fill-opacity='0.160'/%3E%3Ccircle cx='55.0' cy='110.7' r='1.58' fill-opacity='0.174'/%3E%3Ccircle cx='46.0' cy='102.6' r='1.62' fill-opacity='0.188'/%3E%3Ccircle cx='37.4' cy='94.0' r='1.65' fill-opacity='0.203'/%3E%3Ccircle cx='29.3' cy='85.0' r='1.68' fill-opacity='0.218'/%3E%3Ccircle cx='21.7' cy='75.6' r='1.71' fill-opacity='0.233'/%3E%3Ccircle cx='14.6' cy='65.7' r='1.74' fill-opacity='0.248'/%3E%3Ccircle cx='8.1' cy='55.5' r='1.77' fill-opacity='0.263'/%3E%3Ccircle cx='2.1' cy='44.9' r='1.79' fill-opacity='0.278'/%3E%3Ccircle cx='-3.3' cy='34.1' r='1.81' fill-opacity='0.292'/%3E%3Ccircle cx='399.1' cy='66.7' r='1.80' fill-opacity='0.253'/%3E%3Ccircle cx='392.3' cy='76.7' r='1.77' fill-opacity='0.239'/%3E%3Ccircle cx='385.1' cy='86.5' r='1.74' fill-opacity='0.224'/%3E%3Ccircle cx='377.3' cy='95.8' r='1.71' fill-opacity='0.210'/%3E%3Ccircle cx='369.0' cy='104.7' r='1.68' fill-opacity='0.196'/%3E%3Ccircle cx='360.3' cy='113.2' r='1.64' fill-opacity='0.182'/%3E%3Ccircle cx='351.2' cy='121.2' r='1.60' fill-opacity='0.168'/%3E%3Ccircle cx='341.7' cy='128.8' r='1.57' fill-opacity='0.155'/%3E%3Ccircle cx='331.7' cy='135.8' r='1.53' fill-opacity='0.142'/%3E%3Ccircle cx='321.5' cy='142.3' r='1.49' fill-opacity='0.130'/%3E%3Ccircle cx='310.9' cy='148.3' r='1.44' fill-opacity='0.118'/%3E%3Ccircle cx='300.0' cy='153.7' r='1.40' fill-opacity='0.107'/%3E%3Ccircle cx='288.9' cy='158.6' r='1.36' fill-opacity='0.096'/%3E%3Ccircle cx='277.5' cy='162.9' r='1.31' fill-opacity='0.086'/%3E%3Ccircle cx='266.0' cy='166.6' r='1.26' fill-opacity='0.076'/%3E%3Ccircle cx='254.2' cy='169.7' r='1.22' fill-opacity='0.067'/%3E%3Ccircle cx='145.8' cy='169.7' r='1.22' fill-opacity='0.067'/%3E%3Ccircle cx='134.0' cy='166.6' r='1.26' fill-opacity='0.076'/%3E%3Ccircle cx='122.5' cy='162.9' r='1.31' fill-opacity='0.086'/%3E%3Ccircle cx='111.1' cy='158.6' r='1.36' fill-opacity='0.096'/%3E%3Ccircle cx='100.0' cy='153.7' r='1.40' fill-opacity='0.107'/%3E%3Ccircle cx='89.1' cy='148.3' r='1.44' fill-opacity='0.118'/%3E%3Ccircle cx='78.5' cy='142.3' r='1.49' fill-opacity='0.130'/%3E%3Ccircle cx='68.3' cy='135.8' r='1.53' fill-opacity='0.142'/%3E%3Ccircle cx='58.3' cy='128.8' r='1.57' fill-opacity='0.155'/%3E%3Ccircle cx='48.8' cy='121.2' r='1.60' fill-opacity='0.168'/%3E%3Ccircle cx='39.7' cy='113.2' r='1.64' fill-opacity='0.182'/%3E%3Ccircle cx='31.0' cy='104.7' r='1.68' fill-opacity='0.196'/%3E%3Ccircle cx='22.7' cy='95.8' r='1.71' fill-opacity='0.210'/%3E%3Ccircle cx='14.9' cy='86.5' r='1.74' fill-opacity='0.224'/%3E%3Ccircle cx='7.7' cy='76.7' r='1.77' fill-opacity='0.239'/%3E%3Ccircle cx='0.9' cy='66.7' r='1.80' fill-opacity='0.253'/%3E%3Ccircle cx='399.2' cy='87.7' r='1.80' fill-opacity='0.228'/%3E%3Ccircle cx='391.7' cy='97.3' r='1.77' fill-opacity='0.215'/%3E%3Ccircle cx='383.8' cy='106.5' r='1.74' fill-opacity='0.201'/%3E%3Ccircle cx='375.4' cy='115.4' r='1.70' fill-opacity='0.188'/%3E%3Ccircle cx='366.5' cy='123.8' r='1.67' fill-opacity='0.175'/%3E%3Ccircle cx='357.3' cy='131.7' r='1.63' fill-opacity='0.162'/%3E%3Ccircle cx='347.7' cy='139.2' r='1.59' fill-opacity='0.150'/%3E%3Ccircle cx='337.8' cy='146.2' r='1.55' fill-opacity='0.138'/%3E%3Ccircle cx='327.5' cy='152.7' r='1.51' fill-opacity='0.127'/%3E%3Ccircle cx='316.9' cy='158.7' r='1.47' fill-opacity='0.115'/%3E%3Ccircle cx='306.0' cy='164.2' r='1.42' fill-opacity='0.105'/%3E%3Ccircle cx='294.9' cy='169.1' r='1.38' fill-opacity='0.095'/%3E%3Ccircle cx='283.5' cy='173.5' r='1.33' fill-opacity='0.085'/%3E%3Ccircle cx='272.0' cy='177.3' r='1.29' fill-opacity='0.076'/%3E%3Ccircle cx='260.3' cy='180.6' r='1.24' fill-opacity='0.068'/%3E%3Ccircle cx='248.4' cy='183.2' r='1.19' fill-opacity='0.061'/%3E%3Ccircle cx='151.6' cy='183.2' r='1.19' fill-opacity='0.061'/%3E%3Ccircle cx='139.7' cy='180.6' r='1.24' fill-opacity='0.068'/%3E%3Ccircle cx='128.0' cy='177.3' r='1.29' fill-opacity='0.076'/%3E%3Ccircle cx='116.5' cy='173.5' r='1.33' fill-opacity='0.085'/%3E%3Ccircle cx='105.1' cy='169.1' r='1.38' fill-opacity='0.095'/%3E%3Ccircle cx='94.0' cy='164.2' r='1.42' fill-opacity='0.105'/%3E%3Ccircle cx='83.1' cy='158.7' r='1.47' fill-opacity='0.115'/%3E%3Ccircle cx='72.5' cy='152.7' r='1.51' fill-opacity='0.127'/%3E%3Ccircle cx='62.2' cy='146.2' r='1.55' fill-opacity='0.138'/%3E%3Ccircle cx='52.3' cy='139.2' r='1.59' fill-opacity='0.150'/%3E%3Ccircle cx='42.7' cy='131.7' r='1.63' fill-opacity='0.162'/%3E%3Ccircle cx='33.5' cy='123.8' r='1.67' fill-opacity='0.175'/%3E%3Ccircle cx='24.6' cy='115.4' r='1.70' fill-opacity='0.188'/%3E%3Ccircle cx='16.2' cy='106.5' r='1.74' fill-opacity='0.201'/%3E%3Ccircle cx='8.3' cy='97.3' r='1.77' fill-opacity='0.215'/%3E%3Ccircle cx='0.8' cy='87.7' r='1.80' fill-opacity='0.228'/%3E%3Ccircle cx='400.0' cy='106.1' r='1.80' fill-opacity='0.206'/%3E%3Ccircle cx='392.1' cy='115.2' r='1.77' fill-opacity='0.194'/%3E%3Ccircle cx='383.8' cy='123.8' r='1.74' fill-opacity='0.182'/%3E%3Ccircle cx='375.2' cy='132.1' r='1.70' fill-opacity='0.170'/%3E%3Ccircle cx='366.1' cy='140.0' r='1.66' fill-opacity='0.159'/%3E%3Ccircle cx='356.7' cy='147.5' r='1.63' fill-opacity='0.147'/%3E%3Ccircle cx='346.9' cy='154.5' r='1.59' fill-opacity='0.136'/%3E%3Ccircle cx='336.9' cy='161.1' r='1.55' fill-opacity='0.126'/%3E%3Ccircle cx='326.5' cy='167.1' r='1.51' fill-opacity='0.116'/%3E%3Ccircle cx='315.9' cy='172.7' r='1.46' fill-opacity='0.106'/%3E%3Ccircle cx='305.0' cy='177.8' r='1.42' fill-opacity='0.097'/%3E%3Ccircle cx='293.9' cy='182.4' r='1.38' fill-opacity='0.088'/%3E%3Ccircle cx='282.6' cy='186.5' r='1.33' fill-opacity='0.080'/%3E%3Ccircle cx='271.2' cy='190.1' r='1.28' fill-opacity='0.072'/%3E%3Ccircle cx='259.5' cy='193.1' r='1.24' fill-opacity='0.065'/%3E%3Ccircle cx='140.5' cy='193.1' r='1.24' fill-opacity='0.065'/%3E%3Ccircle cx='128.8' cy='190.1' r='1.28' fill-opacity='0.072'/%3E%3Ccircle cx='117.4' cy='186.5' r='1.33' fill-opacity='0.080'/%3E%3Ccircle cx='106.1' cy='182.4' r='1.38' fill-opacity='0.088'/%3E%3Ccircle cx='95.0' cy='177.8' r='1.42' fill-opacity='0.097'/%3E%3Ccircle cx='84.1' cy='172.7' r='1.46' fill-opacity='0.106'/%3E%3Ccircle cx='73.5' cy='167.1' r='1.51' fill-opacity='0.116'/%3E%3Ccircle cx='63.1' cy='161.1' r='1.55' fill-opacity='0.126'/%3E%3Ccircle cx='53.1' cy='154.5' r='1.59' fill-opacity='0.136'/%3E%3Ccircle cx='43.3' cy='147.5' r='1.63' fill-opacity='0.147'/%3E%3Ccircle cx='33.9' cy='140.0' r='1.66' fill-opacity='0.159'/%3E%3Ccircle cx='24.8' cy='132.1' r='1.70' fill-opacity='0.170'/%3E%3Ccircle cx='16.2' cy='123.8' r='1.74' fill-opacity='0.182'/%3E%3Ccircle cx='7.9' cy='115.2' r='1.77' fill-opacity='0.194'/%3E%3Ccircle cx='-0.0' cy='106.1' r='1.80' fill-opacity='0.206'/%3E%3Ccircle cx='398.6' cy='125.8' r='1.79' fill-opacity='0.183'/%3E%3Ccircle cx='390.2' cy='134.4' r='1.76' fill-opacity='0.172'/%3E%3Ccircle cx='381.4' cy='142.7' r='1.73' fill-opacity='0.161'/%3E%3Ccircle cx='372.3' cy='150.5' r='1.69' fill-opacity='0.151'/%3E%3Ccircle cx='362.8' cy='157.9' r='1.65' fill-opacity='0.140'/%3E%3Ccircle cx='353.0' cy='164.9' r='1.61' fill-opacity='0.130'/%3E%3Ccircle cx='342.9' cy='171.4' r='1.57' fill-opacity='0.121'/%3E%3Ccircle cx='332.5' cy='177.5' r='1.53' fill-opacity='0.111'/%3E%3Ccircle cx='321.9' cy='183.2' r='1.49' fill-opacity='0.103'/%3E%3Ccircle cx='311.0' cy='188.3' r='1.44' fill-opacity='0.094'/%3E%3Ccircle cx='299.9' cy='193.0' r='1.40' fill-opacity='0.086'/%3E%3Ccircle cx='288.6' cy='197.2' r='1.35' fill-opacity='0.078'/%3E%3Ccircle cx='277.2' cy='200.8' r='1.31' fill-opacity='0.071'/%3E%3Ccircle cx='265.5' cy='204.0' r='1.26' fill-opacity='0.065'/%3E%3Ccircle cx='134.5' cy='204.0' r='1.26' fill-opacity='0.065'/%3E%3Ccircle cx='122.8' cy='200.8' r='1.31' fill-opacity='0.071'/%3E%3Ccircle cx='111.4' cy='197.2' r='1.35' fill-opacity='0.078'/%3E%3Ccircle cx='100.1' cy='193.0' r='1.40' fill-opacity='0.086'/%3E%3Ccircle cx='89.0' cy='188.3' r='1.44' fill-opacity='0.094'/%3E%3Ccircle cx='78.1' cy='183.2' r='1.49' fill-opacity='0.103'/%3E%3Ccircle cx='67.5' cy='177.5' r='1.53' fill-opacity='0.111'/%3E%3Ccircle cx='57.1' cy='171.4' r='1.57' fill-opacity='0.121'/%3E%3Ccircle cx='47.0' cy='164.9' r='1.61' fill-opacity='0.130'/%3E%3Ccircle cx='37.2' cy='157.9' r='1.65' fill-opacity='0.140'/%3E%3Ccircle cx='27.7' cy='150.5' r='1.69' fill-opacity='0.151'/%3E%3Ccircle cx='18.6' cy='142.7' r='1.73' fill-opacity='0.161'/%3E%3Ccircle cx='9.8' cy='134.4' r='1.76' fill-opacity='0.172'/%3E%3Ccircle cx='1.4' cy='125.8' r='1.79' fill-opacity='0.183'/%3E%3Ccircle cx='396.5' cy='145.0' r='1.79' fill-opacity='0.161'/%3E%3Ccircle cx='387.6' cy='153.2' r='1.75' fill-opacity='0.151'/%3E%3Ccircle cx='378.4' cy='161.0' r='1.71' fill-opacity='0.142'/%3E%3Ccircle cx='368.9' cy='168.3' r='1.68' fill-opacity='0.132'/%3E%3Ccircle cx='359.0' cy='175.3' r='1.64' fill-opacity='0.123'/%3E%3Ccircle cx='348.9' cy='181.8' r='1.60' fill-opacity='0.115'/%3E%3Ccircle cx='338.5' cy='187.9' r='1.55' fill-opacity='0.106'/%3E%3Ccircle cx='327.9' cy='193.6' r='1.51' fill-opacity='0.098'/%3E%3Ccircle cx='317.0' cy='198.8' r='1.47' fill-opacity='0.091'/%3E%3Ccircle cx='305.9' cy='203.5' r='1.42' fill-opacity='0.084'/%3E%3Ccircle cx='294.6' cy='207.8' r='1.38' fill-opacity='0.077'/%3E%3Ccircle cx='283.2' cy='211.6' r='1.33' fill-opacity='0.070'/%3E%3Ccircle cx='271.6' cy='214.8' r='1.29' fill-opacity='0.064'/%3E%3Ccircle cx='128.4' cy='214.8' r='1.29' fill-opacity='0.064'/%3E%3Ccircle cx='116.8' cy='211.6' r='1.33' fill-opacity='0.070'/%3E%3Ccircle cx='105.4' cy='207.8' r='1.38' fill-opacity='0.077'/%3E%3Ccircle cx='94.1' cy='203.5' r='1.42' fill-opacity='0.084'/%3E%3Ccircle cx='83.0' cy='198.8' r='1.47' fill-opacity='0.091'/%3E%3Ccircle cx='72.1' cy='193.6' r='1.51' fill-opacity='0.098'/%3E%3Ccircle cx='61.5' cy='187.9' r='1.55' fill-opacity='0.106'/%3E%3Ccircle cx='51.1' cy='181.8' r='1.60' fill-opacity='0.115'/%3E%3Ccircle cx='41.0' cy='175.3' r='1.64' fill-opacity='0.123'/%3E%3Ccircle cx='31.1' cy='168.3' r='1.68' fill-opacity='0.132'/%3E%3Ccircle cx='21.6' cy='161.0' r='1.71' fill-opacity='0.142'/%3E%3Ccircle cx='12.4' cy='153.2' r='1.75' fill-opacity='0.151'/%3E%3Ccircle cx='3.5' cy='145.0' r='1.79' fill-opacity='0.161'/%3E%3Ccircle cx='402.8' cy='155.6' r='1.81' fill-opacity='0.150'/%3E%3Ccircle cx='393.8' cy='163.7' r='1.78' fill-opacity='0.141'/%3E%3Ccircle cx='384.6' cy='171.4' r='1.74' fill-opacity='0.132'/%3E%3Ccircle cx='375.0' cy='178.8' r='1.70' fill-opacity='0.124'/%3E%3Ccircle cx='365.1' cy='185.7' r='1.66' fill-opacity='0.116'/%3E%3Ccircle cx='354.9' cy='192.2' r='1.62' fill-opacity='0.108'/%3E%3Ccircle cx='344.5' cy='198.3' r='1.58' fill-opacity='0.101'/%3E%3Ccircle cx='333.8' cy='204.0' r='1.54' fill-opacity='0.094'/%3E%3Ccircle cx='323.0' cy='209.3' r='1.49' fill-opacity='0.087'/%3E%3Ccircle cx='311.9' cy='214.0' r='1.45' fill-opacity='0.081'/%3E%3Ccircle cx='300.6' cy='218.4' r='1.40' fill-opacity='0.075'/%3E%3Ccircle cx='289.2' cy='222.2' r='1.36' fill-opacity='0.069'/%3E%3Ccircle cx='277.6' cy='225.7' r='1.31' fill-opacity='0.063'/%3E%3Ccircle cx='122.4' cy='225.7' r='1.31' fill-opacity='0.063'/%3E%3Ccircle cx='110.8' cy='222.2' r='1.36' fill-opacity='0.069'/%3E%3Ccircle cx='99.4' cy='218.4' r='1.40' fill-opacity='0.075'/%3E%3Ccircle cx='88.1' cy='214.0' r='1.45' fill-opacity='0.081'/%3E%3Ccircle cx='77.0' cy='209.3' r='1.49' fill-opacity='0.087'/%3E%3Ccircle cx='66.2' cy='204.0' r='1.54' fill-opacity='0.094'/%3E%3Ccircle cx='55.5' cy='198.3' r='1.58' fill-opacity='0.101'/%3E%3Ccircle cx='45.1' cy='192.2' r='1.62' fill-opacity='0.108'/%3E%3Ccircle cx='34.9' cy='185.7' r='1.66' fill-opacity='0.116'/%3E%3Ccircle cx='25.0' cy='178.8' r='1.70' fill-opacity='0.124'/%3E%3Ccircle cx='15.4' cy='171.4' r='1.74' fill-opacity='0.132'/%3E%3Ccircle cx='6.2' cy='163.7' r='1.78' fill-opacity='0.141'/%3E%3Ccircle cx='-2.8' cy='155.6' r='1.81' fill-opacity='0.150'/%3E%3Ccircle cx='400.0' cy='174.2' r='1.80' fill-opacity='0.130'/%3E%3Ccircle cx='390.7' cy='181.9' r='1.76' fill-opacity='0.122'/%3E%3Ccircle cx='381.0' cy='189.2' r='1.72' fill-opacity='0.115'/%3E%3Ccircle cx='371.1' cy='196.1' r='1.68' fill-opacity='0.108'/%3E%3Ccircle cx='360.9' cy='202.6' r='1.64' fill-opacity='0.101'/%3E%3Ccircle cx='350.5' cy='208.7' r='1.60' fill-opacity='0.095'/%3E%3Ccircle cx='339.8' cy='214.4' r='1.56' fill-opacity='0.089'/%3E%3Ccircle cx='328.9' cy='219.7' r='1.52' fill-opacity='0.083'/%3E%3Ccircle cx='317.9' cy='224.6' r='1.47' fill-opacity='0.077'/%3E%3Ccircle cx='306.6' cy='229.0' r='1.43' fill-opacity='0.072'/%3E%3Ccircle cx='295.2' cy='232.9' r='1.38' fill-opacity='0.067'/%3E%3Ccircle cx='283.6' cy='236.4' r='1.33' fill-opacity='0.062'/%3E%3Ccircle cx='116.4' cy='236.4' r='1.33' fill-opacity='0.062'/%3E%3Ccircle cx='104.8' cy='232.9' r='1.38' fill-opacity='0.067'/%3E%3Ccircle cx='93.4' cy='229.0' r='1.43' fill-opacity='0.072'/%3E%3Ccircle cx='82.1' cy='224.6' r='1.47' fill-opacity='0.077'/%3E%3Ccircle cx='71.1' cy='219.7' r='1.52' fill-opacity='0.083'/%3E%3Ccircle cx='60.2' cy='214.4' r='1.56' fill-opacity='0.089'/%3E%3Ccircle cx='49.5' cy='208.7' r='1.60' fill-opacity='0.095'/%3E%3Ccircle cx='39.1' cy='202.6' r='1.64' fill-opacity='0.101'/%3E%3Ccircle cx='28.9' cy='196.1' r='1.68' fill-opacity='0.108'/%3E%3Ccircle cx='19.0' cy='189.2' r='1.72' fill-opacity='0.115'/%3E%3Ccircle cx='9.3' cy='181.9' r='1.76' fill-opacity='0.122'/%3E%3Ccircle cx='-0.0' cy='174.2' r='1.80' fill-opacity='0.130'/%3E%3Ccircle cx='396.8' cy='192.3' r='1.79' fill-opacity='0.112'/%3E%3Ccircle cx='387.1' cy='199.6' r='1.75' fill-opacity='0.105'/%3E%3Ccircle cx='377.2' cy='206.5' r='1.71' fill-opacity='0.099'/%3E%3Ccircle cx='366.9' cy='213.0' r='1.67' fill-opacity='0.094'/%3E%3Ccircle cx='356.5' cy='219.1' r='1.63' fill-opacity='0.088'/%3E%3Ccircle cx='345.8' cy='224.8' r='1.58' fill-opacity='0.083'/%3E%3Ccircle cx='334.9' cy='230.2' r='1.54' fill-opacity='0.078'/%3E%3Ccircle cx='323.9' cy='235.1' r='1.50' fill-opacity='0.073'/%3E%3Ccircle cx='312.6' cy='239.5' r='1.45' fill-opacity='0.068'/%3E%3Ccircle cx='301.2' cy='243.6' r='1.40' fill-opacity='0.064'/%3E%3Ccircle cx='289.6' cy='247.2' r='1.36' fill-opacity='0.060'/%3E%3Ccircle cx='110.4' cy='247.2' r='1.36' fill-opacity='0.060'/%3E%3Ccircle cx='98.8' cy='243.6' r='1.40' fill-opacity='0.064'/%3E%3Ccircle cx='87.4' cy='239.5' r='1.45' fill-opacity='0.068'/%3E%3Ccircle cx='76.1' cy='235.1' r='1.50' fill-opacity='0.073'/%3E%3Ccircle cx='65.1' cy='230.2' r='1.54' fill-opacity='0.078'/%3E%3Ccircle cx='54.2' cy='224.8' r='1.58' fill-opacity='0.083'/%3E%3Ccircle cx='43.5' cy='219.1' r='1.63' fill-opacity='0.088'/%3E%3Ccircle cx='33.1' cy='213.0' r='1.67' fill-opacity='0.094'/%3E%3Ccircle cx='22.8' cy='206.5' r='1.71' fill-opacity='0.099'/%3E%3Ccircle cx='12.9' cy='199.6' r='1.75' fill-opacity='0.105'/%3E%3Ccircle cx='3.2' cy='192.3' r='1.79' fill-opacity='0.112'/%3E%3Ccircle cx='402.9' cy='202.8' r='1.81' fill-opacity='0.100'/%3E%3Ccircle cx='393.2' cy='210.0' r='1.77' fill-opacity='0.095'/%3E%3Ccircle cx='383.2' cy='216.9' r='1.73' fill-opacity='0.090'/%3E%3Ccircle cx='373.0' cy='223.4' r='1.69' fill-opacity='0.085'/%3E%3Ccircle cx='362.5' cy='229.5' r='1.65' fill-opacity='0.081'/%3E%3Ccircle cx='351.8' cy='235.3' r='1.61' fill-opacity='0.076'/%3E%3Ccircle cx='340.9' cy='240.6' r='1.56' fill-opacity='0.072'/%3E%3Ccircle cx='329.8' cy='245.6' r='1.52' fill-opacity='0.068'/%3E%3Ccircle cx='318.6' cy='250.1' r='1.47' fill-opacity='0.065'/%3E%3Ccircle cx='307.2' cy='254.2' r='1.43' fill-opacity='0.061'/%3E%3Ccircle cx='92.8' cy='254.2' r='1.43' fill-opacity='0.061'/%3E%3Ccircle cx='81.4' cy='250.1' r='1.47' fill-opacity='0.065'/%3E%3Ccircle cx='70.2' cy='245.6' r='1.52' fill-opacity='0.068'/%3E%3Ccircle cx='59.1' cy='240.6' r='1.56' fill-opacity='0.072'/%3E%3Ccircle cx='48.2' cy='235.3' r='1.61' fill-opacity='0.076'/%3E%3Ccircle cx='37.5' cy='229.5' r='1.65' fill-opacity='0.081'/%3E%3Ccircle cx='27.0' cy='223.4' r='1.69' fill-opacity='0.085'/%3E%3Ccircle cx='16.8' cy='216.9' r='1.73' fill-opacity='0.090'/%3E%3Ccircle cx='6.8' cy='210.0' r='1.77' fill-opacity='0.095'/%3E%3Ccircle cx='-2.9' cy='202.8' r='1.81' fill-opacity='0.100'/%3E%3Ccircle cx='402.2' cy='218.3' r='1.81' fill-opacity='0.086'/%3E%3Ccircle cx='392.4' cy='225.2' r='1.77' fill-opacity='0.082'/%3E%3Ccircle cx='382.3' cy='231.7' r='1.73' fill-opacity='0.078'/%3E%3Ccircle cx='372.0' cy='237.9' r='1.69' fill-opacity='0.074'/%3E%3Ccircle cx='361.5' cy='243.7' r='1.65' fill-opacity='0.071'/%3E%3Ccircle cx='350.8' cy='249.2' r='1.60' fill-opacity='0.068'/%3E%3Ccircle cx='339.9' cy='254.3' r='1.56' fill-opacity='0.064'/%3E%3Ccircle cx='328.9' cy='259.0' r='1.52' fill-opacity='0.061'/%3E%3Ccircle cx='71.1' cy='259.0' r='1.52' fill-opacity='0.061'/%3E%3Ccircle cx='60.1' cy='254.3' r='1.56' fill-opacity='0.064'/%3E%3Ccircle cx='49.2' cy='249.2' r='1.60' fill-opacity='0.068'/%3E%3Ccircle cx='38.5' cy='243.7' r='1.65' fill-opacity='0.071'/%3E%3Ccircle cx='28.0' cy='237.9' r='1.69' fill-opacity='0.074'/%3E%3Ccircle cx='17.7' cy='231.7' r='1.73' fill-opacity='0.078'/%3E%3Ccircle cx='7.6' cy='225.2' r='1.77' fill-opacity='0.082'/%3E%3Ccircle cx='-2.2' cy='218.3' r='1.81' fill-opacity='0.086'/%3E%3Ccircle cx='398.4' cy='235.6' r='1.79' fill-opacity='0.072'/%3E%3Ccircle cx='388.3' cy='242.1' r='1.75' fill-opacity='0.069'/%3E%3Ccircle cx='378.0' cy='248.3' r='1.71' fill-opacity='0.066'/%3E%3Ccircle cx='367.5' cy='254.1' r='1.67' fill-opacity='0.064'/%3E%3Ccircle cx='356.8' cy='259.6' r='1.63' fill-opacity='0.061'/%3E%3Ccircle cx='43.2' cy='259.6' r='1.63' fill-opacity='0.061'/%3E%3Ccircle cx='32.5' cy='254.1' r='1.67' fill-opacity='0.064'/%3E%3Ccircle cx='22.0' cy='248.3' r='1.71' fill-opacity='0.066'/%3E%3Ccircle cx='11.7' cy='242.1' r='1.75' fill-opacity='0.069'/%3E%3Ccircle cx='1.6' cy='235.6' r='1.79' fill-opacity='0.072'/%3E%3C/svg%3E") center top / 100% auto no-repeat; pointer-events:none;}
  .hero .container{position:relative; z-index:1; display:flex; flex-direction:column;}
  /* Section tiếp theo tách rõ khỏi hero: đường kẻ mảnh + nền rất nhạt */
  .proof{border-top:1px solid var(--line); background:linear-gradient(180deg, #FBF9F7, var(--white) 70%);}
  .solution .section-head p:not(.eyebrow){display:none;}

  /* Hero flow → tự trượt từng bước (3s/bước), thẻ đang chạy căn giữa, hé thẻ trước/sau; vuốt tay vẫn được */
  .hero-flow-scroller{
    margin:0 calc(var(--gutter) * -1) -32px;
    padding:4px max(var(--gutter), calc(50vw - 100px)) 56px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .hero-flow-scroller::-webkit-scrollbar{display:none;}
  .hero-flow{grid-template-columns:repeat(5, 200px); width:max-content; gap:14px;}
  .hf-step{scroll-snap-align:center;}
  .hero-flow-rail{left:100px; right:100px; background:var(--line);}
  .hero-flow-rail::before{display:none;}
  .hero-flow-rail::after{content:''; position:absolute; inset:0; border-radius:2px; background:var(--gradient); transform-origin:left center; transform:scaleX(var(--p, 0)); transition:transform .7s var(--ease);}
  .hero-flow-pulse{display:none;}
  .hf-node, .hf-card{animation:none;}
  .hf-node{transition:background-color .35s ease, color .35s ease, box-shadow .35s ease;}
  .hf-card{opacity:.6; transform:scale(.96); box-shadow:0 18px 36px -18px rgba(44,40,40,0.22); transition:opacity .8s cubic-bezier(.22,1,.36,1), border-color .6s ease, transform .9s cubic-bezier(.22,1,.36,1), box-shadow .8s ease;}
  .hf-step.is-done .hf-node, .hf-step.is-active .hf-node{background:var(--orange); color:var(--white);}
  .hf-step.is-active .hf-node{box-shadow:0 0 0 6px rgba(248,104,24,0.15);}
  .hf-step.is-active .hf-card{opacity:1; border-color:rgba(248,104,24,0.75); transform:translateY(-2px) scale(1.04); box-shadow:0 22px 40px -18px rgba(248,104,24,0.30);}
  .hf-row{flex-direction:row; gap:8px;}

  /* Pain cards trên mobile: 1 cột, icon trái — tiêu đề + 1 câu */
  .pain-grid{grid-template-columns:1fr; gap:10px;}
  .pain-card{flex-direction:row; align-items:flex-start; gap:14px; padding:16px 16px 17px; border-radius:14px;}
  .pain-card:hover{transform:none;}
  .pain-card .icon-tile{width:40px; height:40px; border-radius:12px; margin-bottom:0;}
  .pain-card .icon-tile .icon{width:20px; height:20px;}
  .pain-text{flex:1; min-width:0; padding-right:22px;}
  .pain-card h3{font-size:16px; line-height:1.3; margin:1px 0 4px; text-wrap:pretty;}
  .pain-card p{font-size:14px; line-height:1.5;}
  .card-num{top:17px; right:16px; font-size:12px;}
  .root{padding:56px 0;}
  .root .cmp{display:none;} /* carousel Trước → SPS → Sau không dùng trên mobile */
  .root-head h2{font-size:26px;}
  .root-sub{font-size:15.5px; margin-top:14px;}
  .cmp-before, .cmp-after{padding:20px 18px 18px;}
  .cmp-head h3{font-size:15.5px;}
  .cmp-tools{height:258px; margin:16px 0;}
  .cmp-tool{--tw:84px; min-height:78px; padding:10px 6px; font-size:11.5px; gap:7px;}
  .cmp-tool-ico{width:32px; height:32px;}
  .cmp-flow{padding:24px 0;}
  .cmp-step{font-size:11.5px; gap:10px; white-space:normal; padding:0 2px;}
  .cmp-step-ico{width:46px; height:46px;}
  .cmp-step-ico .icon{width:19px; height:19px;}
  .cmp-rail{top:calc(50% - 12px);}
  .cmp-chips li{font-size:12px;}
  .cmp-chips{padding-top:14px; gap:6px;}
  
  
  
  
  
  .why-grid{grid-template-columns:1fr; gap:10px;}
  .why-card{display:grid; grid-template-columns:34px 1fr; column-gap:12px; padding:14px 16px 15px; border-radius:14px;}
  .why-card:hover{transform:none;}
  .why-icon{width:34px; height:34px; border-radius:10px; grid-row:1 / span 2;}
  .why-icon .icon{width:18px; height:18px;}
  .why-card h3{margin:0 0 3px; font-size:16px; line-height:1.3;}
  .why-card p{font-size:13.5px; line-height:1.5;}

  /* Journey → vertical timeline */
  .journey-grid{grid-template-columns:1fr; row-gap:22px;}
  .j-step{flex-direction:row; align-items:flex-start; text-align:left; gap:16px;}
  .j-node{width:42px; height:42px; font-size:13px; margin-bottom:0; flex-shrink:0; box-shadow:0 0 0 5px var(--offwhite);}
  .j-body{padding-top:2px;}
  .j-body h3{font-size:16.5px; margin-bottom:4px;}
  .j-body p{margin:0; max-width:none; font-size:14px; line-height:1.5;}
  .journey-strip{margin-top:36px; gap:14px; padding:18px 20px;}
  .journey-strip-icon{width:40px; height:40px; border-radius:12px;}
  .journey-strip-icon .icon{width:20px; height:20px;}
  .journey-strip-title{font-size:15.5px; line-height:1.35;}
  .journey-strip-sub{font-size:13.5px;}

  /* Budget: headline → 4 metric (2x2) → công thức → screenshot */
  .budget-layout{gap:24px;}
  .metric-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .metric{padding:14px 14px 15px;}
  .metric-icon{width:34px; height:34px; border-radius:10px;}
  .metric-icon .icon{width:18px; height:18px;}
  .metric-label{font-size:12px; margin:10px 0 4px;}
  .metric p{font-size:12.5px; line-height:1.45;}
  .formula{margin-top:10px; padding:16px;}
  .f-term{font-size:12.5px; padding:6px 9px;}
  .f-op{font-size:15px;}
  .formula-eq{gap:6px;}
  .formula-bar{margin-top:14px;}

  /* Tabs → chỉ hiện trải nghiệm đang chọn: tiêu đề + 1 câu → screenshot → trước / sau (vuốt được) */
  .tab-list-wrap{display:none;}
  .tab-stage{margin-top:0;}
  .tab-panel{display:flex; flex-direction:column;}
  .tab-caption{order:-1; text-align:left; margin:0 0 16px; min-height:96px;}
  .tab-caption h3{font-size:18px; margin-bottom:6px;}
  .tab-caption p{font-size:14.5px; line-height:1.55;}
  .tab-controls{margin-top:18px; gap:16px;}
  .round-btn{width:46px; height:46px;}
  .shot-frame{padding:8px; border-radius:16px;}
  .shot-topbar{padding:2px 4px 8px;}
  .shot-ph strong{font-size:11px;}
  .shot-zoom-hint{right:14px; bottom:14px; font-size:11px; padding:5px 10px;}
  .lightbox{padding:56px 0 0; align-items:flex-start;}
  .lightbox-stage{width:100%; height:100%; border-radius:0; -webkit-overflow-scrolling:touch;}
  .lightbox-stage img{max-width:none; max-height:none; width:1100px; border-radius:0;}

  
  
  
  

  /* Implementation → vertical timeline */
  .timeline{grid-template-columns:1fr; gap:20px;}
  .timeline::before{display:none;}
  /* Đoạn nối giữa từng cặp bước — bước cuối (B5) không có đoạn nối */
  .tl-step:not(:last-child)::after{content:''; position:absolute; left:20px; top:42px; bottom:-20px; width:2px; background:var(--orange);}
  .tl-step{text-align:left; padding-left:58px; min-height:42px;}
  .tl-node{position:absolute; left:0; top:0; margin:0; width:42px; height:42px; font-size:13px; box-shadow:0 0 0 5px var(--white);}
  .tl-step h3{padding-top:2px; font-size:16px; margin-bottom:4px;}
  .tl-step p{padding:0; font-size:14px; line-height:1.5;}

  .callout{flex-direction:column; align-items:stretch; gap:14px; padding:20px;}
  .callout .icon-tile{display:none;}
  .callout .btn{width:100%;}
  .fc-left h2{font-size:30px;}
  .fc-form{padding:20px 18px 14px;}
  .fc-form h3{font-size:17px; margin-bottom:12px;}
  /* Mobile 4 hàng: Họ và tên → Công ty → [Email | Số điện thoại] → [Quy mô | Ghi chú] */
  .form-grid{gap:10px; margin-bottom:14px;}
  .fr-name, .fr-company{grid-column:1 / -1;}
  .form-row label{font-size:12px; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  /* 15px; iOS không tự phóng to nhờ maximum-scale=1 trong thẻ viewport */
  .form-row input, .form-row select{font-size:15px; padding:9px 11px; height:42px;}
  .form-row select{padding-right:25px; background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;}
  .fc-form .btn{padding:14px 24px;}
  .form-privacy{font-size:11px; margin-top:8px;}
  .faq-q{font-size:16px; padding:20px 2px;}
  .proof{padding:40px 0 44px;}
  .proof-stat{margin-bottom:24px;}
  .logo-track{--logo-gap:36px; animation-duration:60s;}
  .logo-cell{width:112px; height:48px;}
  .site-footer{padding:48px 0 24px;}
  .footer-top{flex-direction:column; gap:32px; margin-bottom:32px;}
  
}

@media (max-width:560px){
  :root{--gutter:16px; --section-y:56px;}
  h2{font-size:26px;}
  .section-head{margin-bottom:24px;}
  .nav-actions .nav-cta{display:none;}
  .brand{gap:10px;}
  .brand-divider{height:18px;}
  .hero-ctas .btn{width:100%;}
  /* Luồng thẻ gọn trên điện thoại: cả khối (số bước + thẻ) cao khoảng 200px */
  .hf-step::after{height:12px;}
  .hf-card{min-height:136px; padding:14px 14px 12px;}
  .hf-label{margin-bottom:8px;}
  
  .form-row-group{grid-template-columns:1fr;}
  
  
  
  
  
  .formula-bar{font-size:10px; height:28px;}
  .fc-left h2{font-size:26px;}
  .fc-rail li{font-size:10.5px;}
  .proof-stat strong{font-size:30px;}
  .success-modal{padding:40px 24px 28px;}
}

@media (max-width:380px){
  .brand-divider, .brand-product{display:none;}
  .metric{padding:12px 11px 13px;}
  .metric-label{font-size:11px; letter-spacing:0.05em;}
  .f-term{font-size:11.5px; padding:5px 7px;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .js .reveal.animate-in{animation:none;}
  .hero-flow-pulse, .journey-dot, .cmp-pulses, .cmp-rail-dot, .cmp-hub-in{display:none !important;}
  .cmp-waves path, .cmp-hub::after, .cmp-step-ico::after{animation:none;}
  .logo-row{-webkit-mask-image:none; mask-image:none;}
  .logo-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto; padding-right:0; gap:20px 32px;}
  .logo-cell[aria-hidden="true"]{display:none;}
}