/* Fulfillment Connect — landing page. Navy là nền chính, cam chỉ cho CTA và điểm nhấn. */
.oc{--oc-line:var(--border-default)}
.oc .oc-eyebrow{margin:0 0 20px;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--state-active)}
.oc .oc-h1{font:700 clamp(32px,4.4vw,56px)/1.08 var(--sans);letter-spacing:-.03em;color:#fff;max-width:14em;text-wrap:balance}
.oc .oc-h1 span{display:block;color:var(--state-active)}
.oc .oc-lead{margin:24px 0 32px;max-width:36em;font-size:17px;line-height:1.7;color:var(--on-brand-soft)}
.oc .oc-cta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.oc .oc-link{color:#fff;font:600 15px/1.4 var(--sans);text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.4)}
.oc .oc-link:hover{text-decoration-color:var(--state-active)}

/* Hero */
.oc .oc-hero{background:var(--brand-primary);padding:64px 0 72px}
.oc .oc-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.oc .oc-map{margin:0;display:flex;flex-direction:column;align-items:stretch}
.oc .oc-map-node{border:1px solid var(--on-brand-line);padding:18px 22px;background:rgba(255,255,255,.04)}
.oc .oc-map-node--hub{border-color:var(--state-active);border-left-width:4px;background:rgba(247,148,29,.08)}
.oc .oc-map-k{margin:0 0 10px;font:600 11.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--on-brand-muted)}
.oc .oc-map-node--hub .oc-map-k{margin-bottom:6px}
.oc .oc-map-t{margin:0;font:700 22px/1.25 var(--sans);color:#fff}
.oc .oc-arrow{flex:none;display:block;color:var(--state-active)}
.oc .oc-chips{display:flex;flex-wrap:wrap;gap:8px}
.oc .oc-chips li{padding:6px 12px;border:1px solid var(--on-brand-line);font:600 13px/1.3 var(--sans);color:#fff}
.oc .oc-chips--dark li{border-color:var(--border-strong);color:var(--text-primary);background:#fff}

/* Section frame */
.oc .oc-sec{padding:96px 0;border-top:1px solid var(--text-primary);background:#fff}
.oc .oc-sec--tint{background:var(--surface-base)}
.oc .oc-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:24px;margin-bottom:56px;align-items:start}
.oc .oc-kicker{display:flex;gap:14px;align-items:center;padding-top:12px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.oc .oc-kicker span{color:var(--text-primary)}
.oc .oc-kicker span::after{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-left:14px;opacity:.5}
.oc .oc-h2{font:600 clamp(26px,3.2vw,42px)/1.15 var(--sans);letter-spacing:-.025em;max-width:20em;color:var(--text-primary);text-wrap:balance}

/* Sơ đồ kiến trúc */
.oc .oc-arch{max-width:960px;margin:0 auto 40px}
.oc .oc-arch-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:stretch}
.oc .oc-arch-side{padding-top:22px;font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.oc .oc-arch-box{border:1px solid var(--text-primary);background:#fff;padding:22px 26px}
.oc .oc-arch-box h3{font:700 clamp(18px,1.8vw,22px)/1.3 var(--sans);color:var(--text-primary);margin-bottom:14px}
.oc .oc-arch-box--hub{background:var(--brand-primary);border-color:var(--brand-primary);border-left:4px solid var(--state-active)}
.oc .oc-arch-box--hub h3{margin:0;color:#fff}
.oc .oc-arch-row--link .oc-arch-side{padding-top:0;align-self:center}
.oc .oc-arch-wire{display:flex;align-items:center;gap:20px;min-height:72px;padding-left:28px;color:var(--brand-primary)}
.oc .oc-arch-wire .oc-arrow{height:64px}
.oc .oc-arch-wire div{display:flex;flex-direction:column;gap:2px;max-width:36em}
.oc .oc-arch-wire b{font:700 15px/1.4 var(--sans);color:var(--text-primary)}
.oc .oc-arch-wire span{font:500 14px/1.55 var(--sans);color:var(--text-secondary)}
.oc .oc-ops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--oc-line)}
.oc .oc-ops li{padding:14px 14px 0 0;font:600 14px/1.4 var(--sans);color:var(--text-primary)}
.oc .oc-ops li span{display:block;margin-bottom:6px;font:600 12px/1 var(--sans);color:var(--state-active)}
.oc .oc-note{max-width:960px;margin:0 auto;padding-top:24px;border-top:1px solid var(--oc-line);font:500 15px/1.7 var(--sans);color:var(--text-secondary)}
.oc .oc-note a{color:var(--brand-primary);text-decoration:underline;text-underline-offset:4px}

/* Lợi ích */
.oc .oc-vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.oc .oc-vals li{padding-top:24px;border-top:2px solid var(--brand-primary)}
.oc .oc-vals svg{display:block;margin-bottom:18px;color:var(--brand-primary)}
.oc .oc-vals h3{margin-bottom:10px;font:700 18px/1.3 var(--sans);color:var(--text-primary)}
.oc .oc-vals p{font:500 15px/1.65 var(--sans);color:var(--text-secondary)}

/* Đối tượng */
.oc .oc-who{max-width:1000px;margin-left:auto}
.oc .oc-who li{display:grid;grid-template-columns:56px minmax(0,5fr) minmax(0,6fr);gap:8px 32px;align-items:baseline;padding:26px 0;border-top:1px solid var(--oc-line)}
.oc .oc-who li:last-child{border-bottom:1px solid var(--oc-line)}
.oc .oc-who-n{font:600 13px/1 var(--sans);color:var(--state-active)}
.oc .oc-who h3{font:700 clamp(17px,1.5vw,20px)/1.35 var(--sans);color:var(--text-primary)}
.oc .oc-who p{font:500 15px/1.65 var(--sans);color:var(--text-secondary)}

/* Quy trình */
.oc .oc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;border-top:1px solid var(--text-primary)}
.oc .oc-steps li{position:relative;padding:28px 8px 0 0}
.oc .oc-steps li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--state-active)}
.oc .oc-steps-n{display:block;margin-bottom:10px;font:600 13px/1 var(--sans);color:var(--brand-primary)}
.oc .oc-steps h3{margin-bottom:10px;font:700 clamp(17px,1.5vw,20px)/1.3 var(--sans);color:var(--text-primary)}
.oc .oc-steps p{font:500 15px/1.65 var(--sans);color:var(--text-secondary)}

@media(max-width:1000px){
.oc .oc-hero{padding:44px 0 56px}
.oc .oc-hero-in{grid-template-columns:1fr;gap:44px}
.oc .oc-sec{padding:72px 0}
.oc .oc-head{grid-template-columns:1fr;row-gap:16px;margin-bottom:40px}
.oc .oc-kicker{padding-top:0}
.oc .oc-vals{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.oc .oc-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
.oc .oc-ops{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6px}
.oc .oc-who{max-width:none}
.oc .oc-who li{grid-template-columns:44px minmax(0,1fr)}
.oc .oc-who p{grid-column:2}
}
@media(max-width:640px){
.oc .oc-lead{font-size:16px}
.oc .oc-arch-row{grid-template-columns:1fr;gap:6px}
.oc .oc-arch-side{padding-top:14px}
.oc .oc-arch-row--link .oc-arch-side{display:none}
.oc .oc-arch-wire{padding-left:12px}
.oc .oc-arch-box{padding:18px}
.oc .oc-ops{grid-template-columns:repeat(2,minmax(0,1fr))}
.oc .oc-vals,.oc .oc-steps{grid-template-columns:1fr}
}

/* Hero: sơ đồ chuyển động */
.oc .oc-map-node{position:relative}
.oc .oc-pulse{position:absolute;inset:-1px;border:1px solid var(--state-active);pointer-events:none;animation:oc-pulse 2.6s ease-out infinite}
.oc .oc-wire{display:grid;grid-template-columns:1fr 1fr;gap:0;height:76px;padding:0 22px}
.oc .oc-lane{position:relative;display:flex;align-items:center;overflow:hidden}
.oc .oc-lane::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--on-brand-line)}
.oc .oc-lane i{position:absolute;left:50%;width:7px;height:7px;margin-left:-3px;border-radius:50%;opacity:0;animation:oc-down 2.4s linear infinite}
.oc .oc-lane--down i{background:var(--state-active);box-shadow:0 0 10px 2px rgba(247,148,29,.55)}
.oc .oc-lane--up i{background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.4);animation-name:oc-up}
.oc .oc-lane i:nth-child(2){animation-delay:.8s}
.oc .oc-lane i:nth-child(3){animation-delay:1.6s}
.oc .oc-lane em{position:relative;margin-left:calc(50% + 14px);font:500 12px/1.3 var(--sans);font-style:normal;color:var(--on-brand-muted);background:var(--brand-primary);padding:2px 0}
.oc .oc-lane--up i{animation-delay:.4s}
.oc .oc-lane--up i:nth-child(2){animation-delay:1.2s}
.oc .oc-lane--up i:nth-child(3){animation-delay:2s}
.oc .oc-chips--live li{transition:none;animation:oc-chip 8s ease-in-out infinite;animation-delay:calc(var(--i)*2s)}
.oc .oc-chips--late li{animation-delay:calc(var(--i)*2s + 1.2s)}
@keyframes oc-down{0%{top:-8px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@keyframes oc-up{0%{top:100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:-8px;opacity:0}}
@keyframes oc-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.07,1.25);opacity:0}}
@keyframes oc-chip{0%,22%{background:var(--state-active);border-color:var(--state-active);color:#fff}30%,100%{background:transparent;border-color:var(--on-brand-line);color:#fff}}
@media(max-width:640px){.oc .oc-wire{height:60px;padding:0 12px}.oc .oc-lane em{font-size:11px}}
@media(prefers-reduced-motion:reduce){.oc .oc-pulse,.oc .oc-lane i,.oc .oc-chips--live li{animation:none}.oc .oc-lane i{opacity:1;top:40%}.oc .oc-pulse{display:none}}
.oc .oc-lane::before{width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.38) 0 4px,transparent 4px 9px)}
.oc .oc-lane--down::before{background:repeating-linear-gradient(180deg,rgba(247,148,29,.6) 0 4px,transparent 4px 9px)}
.oc .oc-lane i{width:9px;height:9px;margin-left:-4px}
.oc .oc-lane em{white-space:nowrap;font-weight:600;letter-spacing:.02em}
.oc .oc-lane--down em{color:#ffb878}
.oc .oc-map-node--hub{animation:oc-glow 2.6s ease-in-out infinite}
@keyframes oc-glow{0%,100%{box-shadow:0 0 0 0 rgba(247,148,29,0)}50%{box-shadow:0 0 28px 0 rgba(247,148,29,.28)}}
@media(prefers-reduced-motion:reduce){.oc .oc-map-node--hub{animation:none}}

.oc .oc-wire{padding:0 22px 0 40px}
.oc .oc-lane::before,.oc .oc-lane i{left:6px}
.oc .oc-lane em{margin-left:24px}
@media(max-width:640px){.oc .oc-wire{padding:0 12px 0 24px}.oc .oc-lane em{font-size:11px;margin-left:20px}}

/* Khoảng trống thị trường: nền sáng để tách khỏi hero navy, cột Onflow là khối navy đặc */
.oc .oc-gap{background:var(--surface-base);padding:104px 0;border-top:0;position:relative}
.oc .oc-gap .oh-c{position:relative}
.oc .oc-kicker--dark,.oc .oc-kicker--dark span{color:var(--text-muted)}
.oc .oc-kicker--dark span{color:var(--text-primary)}
.oc .oc-gap-head{max-width:880px;margin-bottom:56px}
.oc .oc-gap-h2{margin:18px 0 22px;font:700 clamp(30px,4vw,54px)/1.1 var(--sans);letter-spacing:-.03em;color:var(--text-primary);text-wrap:balance}
.oc .oc-gap-h2 em{font-style:normal;color:var(--brand-primary);background:linear-gradient(transparent 62%,rgba(247,148,29,.38) 62%)}
.oc .oc-gap-lead{max-width:40em;font-size:17px;line-height:1.7;color:var(--text-secondary)}
.oc .oc-vs{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);border:1px solid var(--border-strong);background:#fff}
.oc .oc-vs-row{display:contents}
.oc .oc-vs-row>*{padding:22px 24px;border-bottom:1px solid var(--oc-line);margin:0}
.oc .oc-vs-row:last-child>*{border-bottom:0}
.oc .oc-vs-row--h span{padding:18px 24px;font:700 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);background:#fff}
.oc .oc-vs-row--h span:last-child{background:var(--brand-primary);color:#fff;padding-left:24px}
.oc .oc-vs-row h3{align-self:stretch;display:flex;align-items:center;font:700 16px/1.35 var(--sans);color:var(--text-primary)}
.oc .oc-vs-old{display:flex;align-items:center;font:500 15px/1.6 var(--sans);color:#6b7280;text-decoration:line-through;text-decoration-color:rgba(107,114,128,.55)}
.oc .oc-vs-new{display:flex;align-items:center;font:600 15.5px/1.6 var(--sans);color:#fff;background:var(--brand-primary);border-bottom-color:rgba(255,255,255,.16)!important}
.oc .oc-vs-row:last-child .oc-vs-new{border-bottom:0}
.oc .oc-gap-end{margin-top:48px;max-width:34em;font:600 clamp(19px,2vw,26px)/1.4 var(--sans);letter-spacing:-.01em;color:var(--text-primary)}
.oc .oc-gap-end b{color:var(--brand-primary);font-weight:700;background:linear-gradient(transparent 70%,rgba(247,148,29,.38) 70%)}
@media(max-width:1000px){.oc .oc-gap{padding:72px 0}}
@media(max-width:760px){
.oc .oc-vs{display:block;border:0;background:transparent}
.oc .oc-vs-row--h{display:none}
.oc .oc-vs-row{display:block;margin-bottom:16px;border:1px solid var(--border-strong);background:#fff}
.oc .oc-vs-row>*{display:block;border:0;padding:0 18px}
.oc .oc-vs-row h3{padding-top:16px;padding-bottom:8px}
.oc .oc-vs-old{padding-bottom:14px}
.oc .oc-vs-old::before{content:"Cách làm phổ biến: ";display:inline-block;text-decoration:none;font-weight:600;color:var(--text-secondary);margin-right:4px}
.oc .oc-vs-new{padding-top:14px;padding-bottom:14px}
.oc .oc-vs-new::before{content:"Onflow: ";color:#ffb878;font-weight:700}
}

/* Điều chỉnh màu: đủ tương phản, cam chỉ làm điểm nhấn */
.oc .oc-eyebrow{color:#ffb878}
@keyframes oc-chip{0%,22%{background:var(--state-active);border-color:var(--state-active);color:var(--brand-primary)}30%,100%{background:transparent;border-color:var(--on-brand-line);color:#fff}}
.oc .oc-who-n,.oc .oc-ops li span{color:var(--brand-primary);font-weight:700}
.oc .oc-steps-n{color:#b45309}
.oc .oc-vals svg{width:52px;height:52px;padding:12px;background:var(--brand-primary);color:#fff;margin-bottom:20px}
.oc .oc-sec--tint .oc-vals li{border-top-color:var(--state-active)}
.oc .oc-sec:not(.oc-sec--tint) .oc-who li:first-child{border-top-color:var(--brand-primary);border-top-width:2px}
@media(prefers-reduced-motion:reduce){.oc .oc-chips--live li{animation:none}}

/* Hero gọn hơn: tiêu đề nhỏ lại, cam chỉ ở cụm then chốt, thêm hàng ý chính */
.oc .oc-h1{font-size:clamp(30px,3.7vw,48px);line-height:1.12;max-width:15em}
.oc .oc-h1 span{display:inline;color:#fff;padding:0 .12em;background-image:radial-gradient(circle closest-side,rgba(247,148,29,.85) 94%,transparent),radial-gradient(circle closest-side,rgba(247,148,29,.85) 94%,transparent),linear-gradient(rgba(247,148,29,.85),rgba(247,148,29,.85));background-repeat:no-repeat;background-size:.2em .2em,.2em .2em,calc(100% - .2em) .2em;background-position:left 90%,right 90%,center 90%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.oc .oc-lead{margin:22px 0 28px;max-width:32em;font-size:17px}
.oc .oc-points{display:flex;flex-wrap:wrap;gap:10px 24px;margin:32px 0 0;padding-top:24px;border-top:1px solid var(--on-brand-line)}
.oc .oc-points li{display:flex;align-items:center;gap:10px;font:600 14px/1.3 var(--sans);color:#fff}
.oc .oc-points li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--state-active) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%230b2d72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* 03 · Cách hoạt động: băng navy, dòng dữ liệu chạy hai chiều giữa hệ thống của khách và Onflow */
.oc .oc-how{background:var(--brand-primary);border-top:0;padding:104px 0;position:relative;overflow:hidden}
.oc .oc-how::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 0,rgba(247,148,29,.16),transparent 70%),radial-gradient(50% 60% at 0 100%,rgba(157,183,234,.14),transparent 70%);pointer-events:none}
.oc .oc-how .oh-c{position:relative}
.oc .oc-how .oc-kicker,.oc .oc-how .oc-kicker span{color:var(--on-brand-muted)}
.oc .oc-how .oc-kicker span{color:#fff}
.oc .oc-how .oc-h2{color:#fff;max-width:18em}
.oc .oc-how .oc-h2 em{font-style:normal;color:#ffb878}
.oc .oc-flow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);grid-template-rows:auto auto;column-gap:0;align-items:center;max-width:1100px;margin:0 auto}
.oc .oc-flow-card{grid-row:1/3;padding:28px 30px;border:1px solid var(--on-brand-line);background:rgba(255,255,255,.06);backdrop-filter:blur(2px)}
.oc .oc-flow-side{margin:0 0 12px;font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--on-brand-muted)}
.oc .oc-flow-card h3{margin:0 0 18px;font:700 clamp(19px,2vw,24px)/1.3 var(--sans);color:#fff}
.oc .oc-flow-card .oc-chips li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.oc .oc-flow-card--hub{border-color:var(--state-active);border-left-width:4px;background:linear-gradient(135deg,rgba(247,148,29,.22),rgba(247,148,29,.06));box-shadow:0 0 40px rgba(247,148,29,.18);animation:oc-glow 2.6s ease-in-out infinite}
.oc .oc-flow-card--hub h3{margin:0;font-size:clamp(20px,2.2vw,28px)}
.oc .oc-flow-wire{grid-row:1;grid-column:2;display:grid;gap:14px;padding:0 14px;align-self:end}
.oc .oc-flow-lane{position:relative;display:block;height:8px;overflow:hidden;background:repeating-linear-gradient(90deg,rgba(247,148,29,.7) 0 6px,transparent 6px 12px);background-size:auto 2px;background-position:0 50%;background-repeat:repeat-x}
.oc .oc-flow-lane--back{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 6px,transparent 6px 12px)}
.oc .oc-flow-lane i{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--state-active);box-shadow:0 0 12px 3px rgba(247,148,29,.6);opacity:0;animation:oc-right 2.4s linear infinite}
.oc .oc-flow-lane--back i{background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.45);animation-name:oc-left;animation-delay:.5s}
.oc .oc-flow-lane i:nth-child(2){animation-delay:.8s}
.oc .oc-flow-lane i:nth-child(3){animation-delay:1.6s}
.oc .oc-flow-lane--back i:nth-child(2){animation-delay:1.3s}
.oc .oc-flow-lane--back i:nth-child(3){animation-delay:2.1s}
@keyframes oc-right{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes oc-left{0%{left:calc(100% - 8px);opacity:0}12%{opacity:1}88%{opacity:1}100%{left:0;opacity:0}}
.oc .oc-flow-link{grid-row:2;grid-column:2;display:flex;flex-direction:column;gap:4px;margin:12px 0 0;padding:0 14px;align-self:start;text-align:center}
.oc .oc-flow-link b{font:700 14px/1.4 var(--sans);color:#ffb878}
.oc .oc-flow-link span{font:500 13px/1.55 var(--sans);color:var(--on-brand-soft)}
.oc .oc-ops-panel{max-width:1100px;margin:40px auto 0;padding:30px 30px 26px;border:1px solid var(--on-brand-line);border-top:3px solid var(--state-active);background:rgba(255,255,255,.06);position:relative}
.oc .oc-ops-panel::before{content:"";position:absolute;left:calc(100% * 10 / 12);top:-41px;height:38px;border-left:2px dashed var(--state-active)}
.oc .oc-ops-panel h3{margin:0 0 22px;font:700 clamp(18px,1.8vw,22px)/1.3 var(--sans);color:#fff}
.oc .oc-how .oc-ops{border-top:0;position:relative}
.oc .oc-how .oc-ops::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:linear-gradient(90deg,var(--state-active),rgba(255,255,255,.35))}
.oc .oc-how .oc-ops li{position:relative;padding:44px 12px 0 0;font:600 15px/1.4 var(--sans);color:#fff}
.oc .oc-how .oc-ops li span{position:absolute;left:0;top:0;display:grid;place-items:center;width:32px;height:32px;margin:0;border-radius:50%;background:var(--state-active);color:var(--brand-primary);font:700 12px/1 var(--sans)}
.oc .oc-how .oc-note{margin-top:44px;border-top-color:var(--on-brand-line);color:var(--on-brand-soft)}
.oc .oc-how .oc-note a{color:#ffb878}
@media(max-width:900px){
.oc .oc-how{padding:72px 0}
.oc .oc-flow{grid-template-columns:1fr;row-gap:0}
.oc .oc-flow-card{grid-row:auto}
.oc .oc-flow-wire{grid-row:auto;grid-column:auto;grid-auto-flow:column;gap:18px;justify-content:center;padding:14px 0 0;height:62px}
.oc .oc-flow-lane{width:8px;height:100%;background-size:2px auto;background-position:50% 0;background-repeat:repeat-y;background-image:repeating-linear-gradient(180deg,rgba(247,148,29,.7) 0 6px,transparent 6px 12px)}
.oc .oc-flow-lane--back{background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 6px,transparent 6px 12px)}
.oc .oc-flow-lane i{left:0;top:0;animation-name:oc-down2}
.oc .oc-flow-lane--back i{animation-name:oc-up2}
.oc .oc-flow-link{grid-row:auto;grid-column:auto;margin:0 0 14px;padding:10px 0 0}
.oc .oc-ops-panel::before{display:none}
.oc .oc-how .oc-ops::before{display:none}
.oc .oc-how .oc-ops li{padding:0 12px 0 44px;min-height:32px}
}
@keyframes oc-down2{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
@keyframes oc-up2{0%{top:calc(100% - 8px);opacity:0}12%{opacity:1}88%{opacity:1}100%{top:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.oc .oc-flow-lane i{animation:none;opacity:1;left:calc(50% - 4px)}.oc .oc-flow-card--hub{animation:none}}

/* 03 · Sơ đồ 4 bước dễ hiểu: số lớn, biểu tượng, câu ngắn */
.oc .oc-how .oc-head{margin-bottom:48px}
.oc .oc-how-lead{grid-column:2;margin:18px 0 0;max-width:34em;font:500 clamp(16px,1.5vw,19px)/1.65 var(--sans);color:var(--on-brand-soft)}
.oc .oc-pipe{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr);align-items:stretch;max-width:1180px;margin:0 auto}
.oc .oc-pipe-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:30px 24px 26px;border:1px solid var(--on-brand-line);background:rgba(255,255,255,.07);border-radius:6px}
.oc .oc-pipe-n{position:absolute;top:-16px;left:20px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--state-active);color:var(--brand-primary);font:800 15px/1 var(--sans)}
.oc .oc-pipe-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.12);color:#fff}
.oc .oc-pipe-step h3{margin:6px 0 0;font:700 clamp(18px,1.7vw,22px)/1.25 var(--sans);color:#fff}
.oc .oc-pipe-step p{margin:0;font:500 15px/1.6 var(--sans);color:var(--on-brand-soft)}
.oc .oc-pipe-step .oc-chips{margin-top:auto;padding-top:6px}
.oc .oc-pipe-step .oc-chips li{padding:4px 10px;font-size:12.5px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.oc .oc-pipe-tag{margin-top:auto;padding:5px 10px;border:1px dashed rgba(255,255,255,.4);border-radius:4px;font:600 12px/1.3 var(--sans);letter-spacing:.04em;color:#ffb878}
.oc .oc-pipe-step--hub{border-color:var(--state-active);background:linear-gradient(160deg,rgba(247,148,29,.28),rgba(247,148,29,.08));box-shadow:0 0 44px rgba(247,148,29,.25);animation:oc-glow 2.6s ease-in-out infinite}
.oc .oc-pipe-step--hub .oc-pipe-ico{background:var(--state-active);color:var(--brand-primary)}
.oc .oc-pipe-arrow{position:relative;display:block;align-self:center;height:20px}
.oc .oc-pipe-arrow i{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4px;border-top:3px solid var(--state-active);border-right:3px solid var(--state-active);transform:rotate(45deg);opacity:0;animation:oc-chev 1.8s ease-in-out infinite}
.oc .oc-pipe-arrow i:nth-child(2){animation-delay:.25s}
.oc .oc-pipe-arrow i:nth-child(3){animation-delay:.5s}
@keyframes oc-chev{0%{left:0;opacity:0}25%{opacity:1}70%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
.oc .oc-return{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:1180px;margin:28px auto 0;padding:18px 24px;border:1px dashed rgba(255,255,255,.45);border-radius:6px;background:rgba(255,255,255,.05)}
.oc .oc-return b{font:700 16px/1.4 var(--sans);color:#fff}
.oc .oc-return>span:last-child{font:500 15px/1.5 var(--sans);color:var(--on-brand-soft)}
.oc .oc-return-ico{position:relative;flex:none;width:72px;height:20px}
.oc .oc-return-ico i{position:absolute;top:50%;right:0;width:9px;height:9px;margin-top:-4px;border-bottom:3px solid #fff;border-left:3px solid #fff;transform:rotate(45deg);opacity:0;animation:oc-chev-b 1.8s ease-in-out infinite}
.oc .oc-return-ico i:nth-child(2){animation-delay:.25s}
.oc .oc-return-ico i:nth-child(3){animation-delay:.5s}
@keyframes oc-chev-b{0%{right:0;opacity:0}25%{opacity:1}70%{opacity:1}100%{right:calc(100% - 12px);opacity:0}}
.oc .oc-ops-panel{max-width:1180px;margin-top:28px}
.oc .oc-ops-panel::before{display:none}
@media(max-width:1000px){
.oc .oc-how-lead{grid-column:auto}
.oc .oc-pipe{grid-template-columns:1fr;row-gap:0;max-width:560px}
.oc .oc-pipe-step{padding:28px 22px 22px}
.oc .oc-pipe-arrow{height:44px}
.oc .oc-pipe-arrow i{left:50%;top:0;margin:0 0 0 -5px;transform:rotate(135deg);animation-name:oc-chev-v}
}
@keyframes oc-chev-v{0%{top:0;opacity:0}25%{opacity:1}70%{opacity:1}100%{top:calc(100% - 12px);opacity:0}}
@media(prefers-reduced-motion:reduce){.oc .oc-pipe-arrow i,.oc .oc-return-ico i{animation:none;opacity:1}.oc .oc-pipe-arrow i:nth-child(n+2),.oc .oc-return-ico i:nth-child(n+2){display:none}.oc .oc-pipe-arrow i{left:calc(50% - 5px)}.oc .oc-return-ico i{right:calc(50% - 5px)}.oc .oc-pipe-step--hub{animation:none}}

/* Onflow Fulfillment Operations: luồng sáng chạy qua 5 bước */
.oc .oc-ops-panel{overflow:hidden;box-shadow:0 18px 50px rgba(5,15,40,.28)}
.oc .oc-ops-panel::after{content:"";position:absolute;left:0;top:-3px;width:100%;height:3px;background:linear-gradient(90deg,transparent,#fff,transparent);background-size:30% 100%;background-repeat:no-repeat;background-position:-40% 0}
.oc .oc-how .oc-ops::after{content:"";position:absolute;left:0;top:11px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px 5px rgba(247,148,29,.85);opacity:0}
.oc .oc-how .oc-ops li{transition:transform .25s ease}
.oc .oc-how .oc-ops li:hover{transform:translateY(-3px)}
.oc .oc-how .oc-ops li span{transition:transform .25s ease}
.oc .oc-how .oc-ops li:hover span{transform:scale(1.12)}
@media(prefers-reduced-motion:no-preference){
.oc .oc-ops-panel::after{animation:oc-ops-sheen 4s ease-in-out infinite}
.oc .oc-how .oc-ops::after{animation:oc-ops-run 8s linear infinite}
.oc .oc-how .oc-ops li span{animation:oc-ops-pulse 8s ease-out infinite}
.oc .oc-how .oc-ops li:nth-child(2) span{animation-delay:1.6s}
.oc .oc-how .oc-ops li:nth-child(3) span{animation-delay:3.2s}
.oc .oc-how .oc-ops li:nth-child(4) span{animation-delay:4.8s}
.oc .oc-how .oc-ops li:nth-child(5) span{animation-delay:6.4s}
}
@keyframes oc-ops-sheen{0%{background-position:-40% 0}60%,100%{background-position:140% 0}}
@keyframes oc-ops-run{0%{left:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
@keyframes oc-ops-pulse{0%{box-shadow:0 0 0 0 rgba(247,148,29,.75),0 0 0 0 rgba(255,255,255,.5);transform:scale(1.18)}18%{box-shadow:0 0 0 14px rgba(247,148,29,0),0 0 0 22px rgba(255,255,255,0);transform:scale(1)}100%{box-shadow:0 0 0 0 rgba(247,148,29,0);transform:scale(1)}}
@media(max-width:900px){.oc .oc-how .oc-ops::after{display:none}}

/* 06 · Quy trình triển khai: dòng thời gian trên nền xanh đậm */
.oc .oc-go{position:relative;overflow:hidden;padding:104px 0;border-top:0;background:radial-gradient(60% 70% at 88% 100%,rgba(247,148,29,.22),transparent 70%),radial-gradient(50% 60% at 10% 0,rgba(61,123,255,.28),transparent 70%),linear-gradient(160deg,#103a8c,#0a255f 60%,#071a46)}
.oc .oc-go::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);pointer-events:none}
.oc .oc-go .oh-c{position:relative}
.oc .oc-go .oc-kicker{color:var(--on-brand-muted,#b4c7f0)}
.oc .oc-go .oc-kicker span{color:#fff}
.oc .oc-go .oc-h2{color:#fff}
.oc .oc-go .oc-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin-top:72px;border:0}
.oc .oc-go .oc-steps::before,.oc .oc-go .oc-steps::after{content:"";position:absolute;top:41px;left:12.5%;height:3px;border-radius:2px}
.oc .oc-go .oc-steps::before{width:75%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 8px,transparent 8px 16px)}
.oc .oc-go .oc-steps::after{width:75%;background:linear-gradient(90deg,var(--state-active),#ffd25a);box-shadow:0 0 14px rgba(247,148,29,.8);transform-origin:left center;transform:scaleX(0)}
.oc .oc-go .oc-steps li{position:relative;display:block;padding:0 6px;border:0;background:none;box-shadow:none;border-radius:0;text-align:center;transform:none}
.oc .oc-go .oc-steps li::before{display:none}
.oc .oc-go .oc-node{position:relative;z-index:1;display:grid;place-items:center;width:84px;height:84px;margin:0 auto 28px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#2b5fc9,#0f3a8e);border:2px solid rgba(255,255,255,.55);color:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.35)}
.oc .oc-go .oc-node b{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--state-active),#ffc65a);color:#0c2d72;font:800 14px/1 var(--sans);box-shadow:0 4px 12px rgba(247,148,29,.5)}
.oc .oc-go .oc-steps h3{margin:0 0 10px;font:700 clamp(17px,1.5vw,20px)/1.35 var(--sans);color:#fff}
.oc .oc-go .oc-steps p{margin:0 auto;max-width:17em;font:500 15px/1.65 var(--sans);color:#c3d3f3}
.oc .oc-go .oc-steps li.oc-steps-last .oc-node{background:radial-gradient(circle at 30% 25%,#ffb04a,var(--state-active));border-color:#fff;color:#0c2d72;box-shadow:0 0 0 8px rgba(247,148,29,.18),0 0 40px rgba(247,148,29,.7)}
.oc .oc-go .oc-steps li.oc-steps-last .oc-node b{background:#fff}
.oc .oc-go .oc-steps li.oc-steps-last h3{color:#ffc27a}
@media(prefers-reduced-motion:no-preference){
.oc .oc-go .oc-steps::after{animation:oc-go-line 7s ease-in-out infinite}
.oc .oc-go .oc-node{animation:oc-go-pop 7s ease-in-out infinite}
.oc .oc-go .oc-steps li:nth-child(2) .oc-node{animation-delay:1.6s}
.oc .oc-go .oc-steps li:nth-child(3) .oc-node{animation-delay:3.2s}
.oc .oc-go .oc-steps li:nth-child(4) .oc-node{animation-delay:4.8s}
}
@media(prefers-reduced-motion:reduce){.oc .oc-go .oc-steps::after{transform:scaleX(1)}}
@keyframes oc-go-line{0%{transform:scaleX(0)}70%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes oc-go-pop{0%,14%,100%{transform:scale(1)}6%{transform:scale(1.14)}}
@media(max-width:900px){
.oc .oc-go{padding:72px 0}
.oc .oc-go .oc-steps{grid-template-columns:1fr;gap:34px;margin-top:44px;padding-left:0}
.oc .oc-go .oc-steps::before,.oc .oc-go .oc-steps::after{top:42px;bottom:42px;left:41px;width:3px;height:auto;right:auto}
.oc .oc-go .oc-steps::before{background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 8px,transparent 8px 16px)}
.oc .oc-go .oc-steps::after{width:3px;transform-origin:center top;transform:scaleY(0);animation-name:oc-go-line-v;background:linear-gradient(180deg,var(--state-active),#ffd25a)}
.oc .oc-go .oc-steps li{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:20px;text-align:left;align-items:center}
.oc .oc-go .oc-node{grid-row:1/3;margin:0}
.oc .oc-go .oc-steps p{margin:0;max-width:none}
}
@keyframes oc-go-line-v{0%{transform:scaleY(0)}70%,92%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* 03 · Cách hoạt động: thẻ kính, dòng dữ liệu phát sáng, trung tâm Onflow nổi bật */
.oc .oc-how{background:linear-gradient(160deg,#0f3585,#0a255f 55%,#071a46)}
.oc .oc-how::before{background:radial-gradient(60% 55% at 85% 0,rgba(247,148,29,.24),transparent 70%),radial-gradient(50% 60% at 5% 100%,rgba(61,123,255,.3),transparent 70%),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:auto,auto,56px 56px,56px 56px}
.oc .oc-pipe{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1.12fr) 56px minmax(0,1fr)}
.oc .oc-pipe-step{border-radius:16px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));backdrop-filter:blur(6px);box-shadow:0 18px 44px rgba(3,12,38,.35),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .3s ease,box-shadow .3s ease}
.oc .oc-pipe-step:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(3,12,38,.5),inset 0 1px 0 rgba(255,255,255,.28)}
.oc .oc-pipe-n{top:-18px;left:22px;width:36px;height:36px;background:linear-gradient(135deg,var(--state-active),#ffc65a);box-shadow:0 6px 16px rgba(247,148,29,.5)}
.oc .oc-pipe-ico{width:60px;height:60px;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.25)}
.oc .oc-pipe-step--hub{margin:-14px 0;padding-top:44px;padding-bottom:40px;border-color:rgba(255,194,90,.9);background:linear-gradient(160deg,rgba(247,148,29,.42),rgba(247,148,29,.1));box-shadow:0 0 0 6px rgba(247,148,29,.1),0 0 60px rgba(247,148,29,.4),0 22px 50px rgba(3,12,38,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.oc .oc-pipe-step--hub .oc-pipe-ico{width:68px;height:68px;border:0;background:linear-gradient(135deg,#ffb04a,var(--state-active));box-shadow:0 0 30px rgba(247,148,29,.8)}
.oc .oc-pipe-step--hub h3{font-size:clamp(20px,1.9vw,25px)}
.oc .oc-pipe-step--hub::before{content:"";position:absolute;inset:-6px;border-radius:20px;border:2px solid rgba(255,194,90,.55);pointer-events:none}
.oc .oc-pipe-arrow::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 5px,transparent 5px 10px)}
.oc .oc-pipe-arrow i{width:9px;height:9px;margin-top:-4.5px;border:0;border-radius:50%;background:#ffd25a;box-shadow:0 0 12px 4px rgba(247,148,29,.85);transform:none}
.oc .oc-return{border:1px solid rgba(255,255,255,.22);border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.04));overflow:hidden}
.oc .oc-return::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);background-size:25% 100%;background-repeat:no-repeat;background-position:100% 0;animation:oc-ret-sheen 4s linear infinite}
.oc .oc-return-ico i{width:9px;height:9px;margin-top:-4.5px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(255,255,255,.7);transform:none}
@keyframes oc-ret-sheen{0%{background-position:100% 0}100%{background-position:-40% 0}}
@media(prefers-reduced-motion:reduce){.oc .oc-return::before{animation:none}}
@media(max-width:1000px){
.oc .oc-pipe{grid-template-columns:1fr}
.oc .oc-pipe-step--hub{margin:0}
.oc .oc-pipe-arrow::before{left:50%;right:auto;top:4px;bottom:4px;width:2px;height:auto;margin:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 5px,transparent 5px 10px)}
.oc .oc-pipe-arrow i{left:50%;margin-left:-4.5px;transform:none}
}

/* 03 · Sơ đồ vòng đầy đủ: nhận đơn, xử lý tại kho, trả thông tin về hệ thống */
.oc .oc-loop{display:block;width:100%;max-width:1180px;height:auto;margin:0 auto;overflow:visible;font-family:var(--sans)}
.oc .oc-n rect{fill:rgba(255,255,255,.09);stroke:rgba(255,255,255,.3);stroke-width:1.2}
.oc .oc-n--hub rect{fill:url(#oc-hubg);stroke:#ffc65a;stroke-width:2}
.oc .oc-n--ret rect{fill:rgba(255,255,255,.16);stroke:#fff;stroke-width:1.6}
.oc .oc-n-t{font-size:15px;font-weight:700;fill:#fff}
.oc .oc-n-s{font-size:12.5px;font-weight:500;fill:#c3d3f3}
.oc .oc-n-b{fill:#f7941d}
.oc .oc-n-bt{font-size:12px;font-weight:800;fill:#0c2d72}
.oc .oc-n--hub .oc-n-t{font-size:16px}
.oc .oc-zone{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.28);stroke-width:1.2;stroke-dasharray:6 6}
.oc .oc-cap{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:#9db7ea}
.oc .oc-cap--o{fill:#ffc65a}
.oc .oc-ln{fill:none;stroke:#ffc65a;stroke-width:2;stroke-dasharray:5 6;stroke-opacity:.85}
.oc .oc-ln--b{stroke:#fff;stroke-opacity:.8}
.oc .oc-lbl{font-size:12.5px;font-weight:600;fill:#fff}
.oc .oc-lbl--o{fill:#ffc65a;text-anchor:middle}
.oc .oc-lg{font-size:12.5px;font-weight:500;fill:#c3d3f3}
.oc .oc-dot{fill:#ffd25a}
.oc .oc-dot--w{fill:#fff}
@media(prefers-reduced-motion:no-preference){.oc .oc-ln{animation:oc-loop-dash 1.2s linear infinite}.oc .oc-n--hub rect{animation:oc-loop-hub 2.6s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.oc .oc-dot{display:none}}
@keyframes oc-loop-dash{to{stroke-dashoffset:-11}}
@keyframes oc-loop-hub{0%,100%{stroke-opacity:1}50%{stroke-opacity:.45}}
@media(min-width:1001px){.oc .oc-alt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(max-width:1000px){.oc .oc-loop{display:none}}