/* OneCAD — Hệ sinh thái · CSS dùng chung cho index.html và nen-tang/*.html */
:root{
 --ink:#0f2236;--ink2:#2b4357;--mute:#5f7488;--line:#dbe8f2;--bg:#f7fbfe;--card:#ffffff;
 --blue:#0b7fd0;--teal:#16a89a;--green:#6db33f;
 --grad:linear-gradient(90deg,#0b7fd0,#16a89a 55%,#6db33f);
 --c-portal:#0b6fc0;--c-academy:#16897d;--c-forma:#4f9a26;--c-nexus:#1b4f9a;--c-fm:#21864e;--c-iot:#e0862c;--c-ai:#16a89a;
 --r:20px;--shadow:0 14px 40px rgba(15,60,100,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mono{font-family:'JetBrains Mono',monospace}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:#3cc0ae;animation:live 1.6s ease-in-out infinite}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(60,192,174,.55)}50%{box-shadow:0 0 0 7px rgba(60,192,174,0)}}
h2{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-top:12px}
.lead{font-size:18px;color:#4d6275;margin-top:14px;max-width:640px}
section{position:relative;padding:110px 0}
.sec-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:56px}
.sec-head .lead{text-align:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:15.5px;transition:transform .2s,box-shadow .2s}
.btn.pri{color:#fff;background:linear-gradient(90deg,#0b7fd0,#16a89a);box-shadow:0 10px 26px rgba(11,127,208,.3)}
.btn.sec{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(247,251,254,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:76px}
.nav .logo img{height:44px}
.nav ul{display:flex;gap:26px;list-style:none;margin-left:auto;font-size:15px;font-weight:600;color:var(--ink2)}
.nav ul a:hover{color:var(--blue)}
.nav .adsk{height:30px;opacity:.9}
.nav .btn{padding:10px 18px;font-size:14.5px}
/* thanh thông báo OneCAD ID (trang chủ) */
.ann{background:linear-gradient(90deg,#0b6fc0,#16897d 55%,#4f9a26);color:#fff;font-size:13.5px;box-shadow:0 1px 0 rgba(255,255,255,.15) inset}
.ann-in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:12px;min-height:38px}
.ann-link{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 0;line-height:1.4;text-align:center}
.ann-link i{width:7px;height:7px;flex:none;border-radius:50%;background:#b9f0a0;animation:live 1.6s ease-in-out infinite}
.ann-link b{font-weight:800}
.ann-link u{text-decoration:none;font-weight:700;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.55)}
.ann-link:hover u{border-bottom-color:#fff}
.ann-link:focus-visible,.ann-x:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
.ann-sep{opacity:.6;margin:0 4px}
.ann-x{flex:none;width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.ann-x:hover{background:rgba(255,255,255,.26)}
.ann-x svg{width:15px;height:15px}
.ann-off .ann{display:none}
html:not(.ann-off) .hero{padding-top:170px}
.burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center}
.burger svg{width:22px;height:22px}

/* hero */
.hero{padding:140px 0 90px;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
 radial-gradient(520px 420px at 68% 34%,rgba(65,179,242,.22),transparent 70%),
 radial-gradient(480px 420px at 82% 72%,rgba(60,192,174,.20),transparent 70%),
 radial-gradient(420px 360px at 88% 22%,rgba(155,211,90,.16),transparent 70%),
 linear-gradient(180deg,#ffffff,#eef6fc)}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(15,90,150,.16) 1px,transparent 1.2px);background-size:22px 22px;
 -webkit-mask-image:radial-gradient(circle 560px at 70% 50%,#000 0%,rgba(0,0,0,.3) 60%,transparent 100%);mask-image:radial-gradient(circle 560px at 70% 50%,#000 0%,rgba(0,0,0,.3) 60%,transparent 100%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:center;width:100%}
.hero h1{font-size:clamp(44px,6vw,72px);font-weight:800;letter-spacing:-.035em;line-height:1.03;margin-top:18px}
.hero h1 span{background:linear-gradient(90deg,#0b7fd0,#16a89a 30%,#6db33f 50%,#16a89a 70%,#0b7fd0);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.hero .lead{font-size:19px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px;max-width:480px}
.stats div{background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 8px 24px rgba(15,60,100,.06)}
.stats b{display:block;font-size:30px;font-weight:700;line-height:1;background:linear-gradient(90deg,#0b7fd0,#16a89a);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stats span{display:block;font-size:12.5px;color:var(--mute);margin-top:7px}
.partner{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:13.5px;color:var(--mute)}
.partner img{height:34px}
.partner span{border-left:1px solid var(--line);padding-left:14px;line-height:1.45}

/* ecosystem diagram (960×960 stage, scaled by JS) */
.eco-box{position:relative;width:100%;aspect-ratio:1/1}
.eco{position:absolute;left:0;top:0;width:960px;height:960px;transform-origin:0 0}
.eco svg.d{position:absolute;inset:0;overflow:visible}
.eco .scan{position:absolute;left:60px;top:60px;width:840px;height:840px;border-radius:50%;
 background:conic-gradient(from 0deg,rgba(65,179,242,0) 0deg,rgba(65,179,242,0) 290deg,rgba(60,192,174,.10) 340deg,rgba(65,179,242,.28) 359.5deg,rgba(65,179,242,0) 360deg);
 -webkit-mask-image:radial-gradient(circle,transparent 19%,#000 20%,#000 70%,transparent 71%);mask-image:radial-gradient(circle,transparent 19%,#000 20%,#000 70%,transparent 71%);animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.eco .rot{transform-box:view-box;transform-origin:480px 480px}
.cw{animation:spin 18s linear infinite}.cw2{animation:spin 30s linear infinite}.ccw{animation:spin 24s linear infinite reverse}.ccw2{animation:spin 60s linear infinite reverse}
.breath{animation:breath 3s ease-in-out infinite}@keyframes breath{0%,100%{opacity:.55}50%{opacity:1}}
.flow{animation:flow 1.2s linear infinite}@keyframes flow{to{stroke-dashoffset:-16}}
.eco .hub{position:absolute;left:480px;top:480px;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;background:#fff;display:grid;place-items:center;
 box-shadow:0 0 0 10px rgba(255,255,255,.7),0 24px 60px rgba(11,127,208,.25);animation:hub 3s ease-in-out infinite}
@keyframes hub{50%{box-shadow:0 0 0 16px rgba(255,255,255,.55),0 24px 70px rgba(22,168,154,.38)}}
.eco .hub img{width:150px}
.eco .aic{position:absolute;left:480px;top:646px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:999px;color:#fff;
 background:linear-gradient(90deg,#0b7fd0,#16a89a,#6db33f,#16a89a,#0b7fd0);background-size:300% 100%;box-shadow:0 8px 20px rgba(22,168,154,.35);white-space:nowrap;animation:shine 5s linear infinite}
.eco .aic svg{width:17px;height:17px}
.eco .p{position:absolute;width:220px;margin-left:-110px;margin-top:-44px;text-align:center}
.eco .p a{display:block}
.eco .fl{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-6px)}}
.eco .ic{width:88px;height:88px;border-radius:28px;margin:0 auto;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--a),var(--b));
 box-shadow:0 0 0 7px rgba(255,255,255,.85),0 14px 30px var(--s);animation:ping 8s linear infinite;animation-delay:var(--d);transition:transform .25s}
.eco .p a:hover .ic,.eco .p a:focus-visible .ic{transform:scale(1.08)}
.eco .p a{border-radius:24px}.eco .p a:focus-visible{outline:4px solid #41b3f2;outline-offset:6px}
.eco .p .hint{position:absolute;left:50%;top:-44px;transform:translate(-50%,8px);opacity:0;pointer-events:none;white-space:nowrap;font-size:17px;font-weight:700;color:#fff;padding:6px 14px;border-radius:999px;background:linear-gradient(90deg,#0b7fd0,#16a89a);box-shadow:0 8px 20px rgba(11,127,208,.3);transition:opacity .2s,transform .2s}
.eco .p a:hover .hint,.eco .p a:focus-visible .hint{opacity:1;transform:translate(-50%,0)}
@keyframes ping{0%{box-shadow:0 0 0 7px rgba(255,255,255,.85),0 0 0 7px var(--s),0 14px 30px var(--s)}8%,100%{box-shadow:0 0 0 7px rgba(255,255,255,.85),0 0 0 26px rgba(255,255,255,0),0 14px 30px var(--s)}}
.eco .ic svg{width:38px;height:38px}
.eco .p h3{font-size:21px;font-weight:700;margin-top:16px;line-height:1.2}
.eco .p span{display:block;font-size:15px;color:#566c80;margin-top:2px}
.eco .p h3,.eco .p span{text-shadow:0 0 4px #f4f9fd,0 0 8px #f4f9fd,0 0 12px #f4f9fd}
.eco .p sup{font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff;background:#f0a63a;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:4px;text-shadow:none}
.eco .t{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;color:#2b4357;background:rgba(255,255,255,.94);
 border:1px solid #d6e5f1;border-radius:999px;padding:7px 15px 7px 12px;white-space:nowrap;box-shadow:0 6px 16px rgba(15,60,100,.07);animation:lit 8s linear infinite;animation-delay:var(--d)}
@keyframes lit{0%{border-color:var(--c);box-shadow:0 0 0 5px rgba(65,179,242,.18),0 6px 16px rgba(15,60,100,.1)}12%,100%{border-color:#d6e5f1;box-shadow:0 6px 16px rgba(15,60,100,.07)}}
.eco .t i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.eco.small .t{display:none}

/* trust strip */
.strip{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.strip img{height:40px}
.strip .it{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink2)}
.strip .it b{font-size:28px;font-weight:800;line-height:1}
.strip .it svg{width:26px;height:26px;color:var(--teal)}

/* platforms */
.plats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);overflow:hidden;transition:transform .25s,box-shadow .25s}
.pc:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(15,60,100,.12)}
.pc::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.pc .ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--a),var(--c));box-shadow:0 10px 22px var(--s)}
.pc .ic svg{width:28px;height:28px}
.pc h3{font-size:22px;font-weight:800;margin-top:18px;letter-spacing:-.01em}
.pc h3 em{font-style:normal;font-weight:500;color:#8a99a8}
.pc .role{font-size:15px;font-weight:600;color:var(--c);margin-top:2px}
.pc ul{list-style:none;margin-top:14px;font-size:15px;color:#4a5e70}
.pc li{position:relative;padding-left:22px;margin-top:7px;line-height:1.5}
.pc li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:3px;background:var(--c);opacity:.8}
.pc .tag{position:absolute;right:20px;top:24px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.pc.ai{grid-column:span 3;display:grid;grid-template-columns:auto 1fr 1.3fr;gap:28px;align-items:center;color:#fff;background:linear-gradient(110deg,#0b6fc0,#16897d 55%,#4f9a26);border:none}
.pc.ai::before{display:none}
.pc.ai .ic{background:rgba(255,255,255,.18);box-shadow:none;width:72px;height:72px}
.pc.ai h3{margin-top:0;font-size:28px}.pc.ai h3 em{color:rgba(255,255,255,.75)}
.pc.ai .role{color:rgba(255,255,255,.85)}
.pc.ai ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;margin-top:0;color:rgba(255,255,255,.92)}
.pc.ai li::before{background:#fff}
/* Thẻ nền tảng: cả thẻ = liên kết «Truy cập» (stretched link .go), «Tìm hiểu thêm» (.more) nằm trên lớp phủ */
.pc:not(.ai){display:flex;flex-direction:column}
.pc .acts{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding-top:16px}
.pc:not(.ai) .acts{margin-top:auto}
.pc .go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--c)}
.pc .go::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.pc .go span{transition:transform .2s}.pc:hover .go span{transform:translateX(4px)}
.pc .go:focus-visible{outline:none}
.pc .go:focus-visible::after{outline:3px solid color-mix(in srgb,var(--c,#0b7fd0) 60%,#fff);outline-offset:-3px}
.pc .more{position:relative;z-index:2;font-size:13px;font-weight:600;color:var(--mute);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--mute) 45%,transparent);text-underline-offset:3px;padding:4px 2px;border-radius:6px}
.pc .more:hover{color:var(--c);text-decoration-color:currentColor}
.pc .more:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.pc.ai .go{color:#fff}
.pc.ai .go:focus-visible::after{outline-color:rgba(255,255,255,.85)}
.tc .to a{transition:filter .2s}.tc .to a:hover{filter:brightness(1.12)}
.card-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--c) 9%,#fff);font-size:13.5px;color:color-mix(in srgb,var(--c) 75%,#0f2236);line-height:1.45}
.card-note svg{width:18px;height:18px;flex:none;margin-top:1px}
.forma-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:12px;background:#f2f8ec;font-size:13.5px;color:#3d6b1f;line-height:1.45}
.forma-note svg{width:18px;height:18px;flex:none;margin-top:1px}

/* lifecycle */
.life{background:linear-gradient(180deg,#eef6fc,#f7fbfe)}
.flowrow{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.st{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);position:relative}
.st .no{font-family:'JetBrains Mono',monospace;font-size:13px;color:#8a99a8}
.st h4{font-size:20px;font-weight:800;margin:4px 0 14px}
.chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#fff;font-weight:700;font-size:14.5px;background:linear-gradient(135deg,var(--a),var(--c))}
.chip+.chip{margin-top:8px}
.chip svg{width:20px;height:20px;flex:none}
a.chip{transition:transform .2s,filter .2s}a.chip:hover{transform:translateX(3px);filter:brightness(1.06)}
.st p{font-size:14px;color:#4a5e70;margin-top:12px;line-height:1.55}
.st:not(:last-child)::after{content:"";position:absolute;right:-15px;top:50%;width:12px;height:12px;background:var(--teal);clip-path:polygon(0 0,100% 50%,0 100%);transform:translateY(-50%)}
.loop{display:flex;align-items:center;gap:14px;margin:22px 0 14px;color:#d9822b;font-weight:700;font-size:15px}
.loop::before,.loop::after{content:"";flex:1;border-top:2px dashed #e7b37c}
.aiband{border-radius:18px;padding:20px 26px;color:#fff;background:linear-gradient(90deg,#0b6fc0,#1f8f82 55%,#5a9e2c);display:flex;align-items:center;gap:22px;flex-wrap:wrap;box-shadow:0 14px 34px rgba(11,111,192,.25)}
.aiband b{font-size:20px;display:flex;align-items:center;gap:10px}
.aiband b svg{width:24px;height:24px}
.aiband span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 13px;font-size:14px;font-weight:600}
.base{margin-top:12px;border-radius:14px;background:#13293f;color:#cfe0ee;padding:14px 24px;display:flex;gap:10px 26px;flex-wrap:wrap;font-size:14.5px;font-weight:600}
.base em{font-style:normal;color:#7fc3ef;font-weight:800;letter-spacing:.12em;font-size:12px;text-transform:uppercase;align-self:center}

/* trends */
.trends{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.tc .n{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#e9f4fc;color:var(--blue)}
.tc .n svg{width:22px;height:22px}
.tc h4{font-size:17.5px;font-weight:800;margin-top:14px;line-height:1.3}
.tc p{font-size:14px;color:#4a5e70;margin-top:6px;flex:1}
.tc .to{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.tc .to b,.tc .to a{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff;background:var(--c)}

/* why */
.why{background:#0f2236;color:#e8f1f8;overflow:hidden}
.why::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 85% 10%,rgba(22,168,154,.25),transparent 70%),radial-gradient(500px 400px at 10% 90%,rgba(11,127,208,.25),transparent 70%)}
.why .wrap{position:relative}
.why .eyebrow{color:#7fc3ef}
.why .lead{color:#a9bccd}
.wgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
.wc{border-radius:20px;padding:26px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.wc h4{font-size:19px;font-weight:700;margin-top:14px}
.wc p{font-size:14.5px;color:#a9bccd;margin-top:6px}
.wc .n{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(127,195,239,.14);color:#7fd3c4}
.wc .n svg{width:23px;height:23px}
.wc.big{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.wc.big .adbox{background:#fff;border-radius:14px;padding:16px 18px;display:inline-block}
.wc.big .adbox img{height:44px}
.wc.big h4{font-size:26px;margin-top:22px}
.wc.big .yrs{font-size:52px;white-space:nowrap;font-weight:900;line-height:1;margin-top:20px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* roadmap */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.road::before{content:"";position:absolute;left:4%;right:4%;top:30px;height:3px;background:var(--grad);border-radius:2px}
.ph{position:relative;padding-top:64px}
.ph::before{content:"";position:absolute;left:28px;top:18px;width:26px;height:26px;border-radius:50%;background:#fff;border:5px solid var(--c);box-shadow:0 0 0 6px var(--bg)}
.ph .in{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow);height:100%}
.ph .y{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;color:var(--c);letter-spacing:.06em}
.ph h4{font-size:20px;font-weight:800;margin-top:4px}
.ph p{font-size:14.5px;color:#4a5e70;margin-top:8px}
.ph p b{color:var(--ink)}
.ph.now::after{content:"Hiện tại";position:absolute;left:66px;top:20px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--c);padding:3px 9px;border-radius:999px}

/* cta */
.cta-sec{padding:0 0 110px}
.cta-box{position:relative;border-radius:28px;padding:56px;overflow:hidden;color:#fff;background:linear-gradient(115deg,#0b6fc0,#16897d 55%,#4f9a26);display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}
.cta-box::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}
.cta-box h2{color:#fff;margin-top:0}
.cta-box p{color:rgba(255,255,255,.88);font-size:17px;margin-top:12px}
.cta-box .btns{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.cta-box .btn.pri{background:#fff;color:#0b5fa8;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.cta-box .btn.sec{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}

footer{background:#fff;border-top:1px solid var(--line);padding:46px 0 34px;font-size:14px;color:var(--mute)}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
footer .brand img{height:46px}
footer .brand .ad{height:32px;margin-top:18px}
footer h5{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
footer ul{list-style:none}
footer li{margin-top:6px}
footer li a:hover{color:var(--blue)}
footer .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin-top:10px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}

/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--dl,0s)}
.js .rv.on{opacity:1;transform:none}

/* responsive */
@media (max-width:1080px){
 .nav ul,.nav .adsk{display:none}.burger{display:flex}.nav .btn{display:none}
 .nav.open ul{display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;background:#fff;padding:18px 24px;gap:14px;box-shadow:0 12px 30px rgba(15,60,100,.1)}
 .hero .wrap{grid-template-columns:minmax(0,1fr)}
 .hero{min-height:auto}
 .eco-box{max-width:680px;margin:0 auto}
 .plats{grid-template-columns:repeat(2,1fr)}
 .pc.ai{grid-column:span 2;grid-template-columns:auto 1fr}.pc.ai ul{grid-column:1/-1}
 .flowrow{grid-template-columns:repeat(2,1fr)}.st::after{display:none}
 .trends{grid-template-columns:repeat(2,1fr)}
 .wgrid{grid-template-columns:1fr 1fr}.wc.big{grid-column:1/-1;grid-row:auto}
 .cta-box{grid-template-columns:1fr;padding:40px}
 footer .wrap{grid-template-columns:1fr 1fr}footer .brand{grid-column:1/-1}
}
@media (max-width:640px){
 .wrap{padding:0 16px}
 .ann-in{padding:0 12px 0 16px;gap:8px}.ann{font-size:12.5px}
 .ann-link{justify-content:flex-start;text-align:left;gap:8px}
 html:not(.ann-off) .hero{padding-top:150px}
 section{padding:76px 0}
 .hero{padding:110px 0 60px}
 .stats b{font-size:24px}
 .plats,.trends,.wgrid,.road{grid-template-columns:1fr}
 .pc.ai{grid-column:auto;grid-template-columns:1fr}.pc.ai ul{grid-template-columns:1fr}
 .flowrow{grid-template-columns:1fr}
 .road::before{display:none}
 .wgrid{grid-template-columns:minmax(0,1fr)}.wc.big .yrs{font-size:clamp(34px,11vw,52px)}
 .cta-box{padding:30px 22px}
 .strip .wrap{justify-content:center}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}

/* ===== Trang giới thiệu từng nền tảng (nen-tang/*.html) ===== */
.nav.sub{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav.sub .wrap{gap:22px}
.crumb{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;min-width:0}
.crumb a{color:#7a8a99}.crumb a:hover{color:var(--blue)}
.crumb .sep{color:#c9d6e2}
.crumb b{color:var(--ink);font-weight:700;white-space:nowrap}
.nav.sub .sp{flex:1}
.nav.sub .btn.idb{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.nav.sub .btn.idb svg{width:17px;height:17px}

.phero{position:relative;padding:150px 0 40px;overflow:hidden}
.phero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.pi{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--a),var(--b));box-shadow:0 0 0 6px rgba(255,255,255,.85),0 16px 32px var(--s)}
.pi svg{width:36px;height:36px}
.ptitle{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.ph1{font-size:clamp(40px,5.4vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.ph1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ptag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);white-space:nowrap}
.prole{font-size:21px;font-weight:600;color:var(--c);margin-top:10px;line-height:1.35}
.phero .lead{font-size:17.5px;max-width:560px}
.pnote{font-size:13px;color:#7a8a99;margin-top:12px;max-width:560px}
.pbox{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.5;max-width:560px;background:color-mix(in srgb,var(--c) 9%,#fff);color:color-mix(in srgb,var(--c) 70%,#0f2236);border:1px solid color-mix(in srgb,var(--c) 22%,#fff)}
.pbox svg{width:19px;height:19px;flex:none;margin-top:2px}
.shot{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:var(--shadow)}
.shot div{aspect-ratio:16/11;border-radius:14px;border:1px dashed #c9d6e2;background:linear-gradient(135deg,#f1f6fb,#e4eef8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#7a8a99;font-weight:600;font-size:15px;text-align:center;padding:20px}
.shot svg{width:34px;height:34px;color:#a9bccd}

.pfeat{padding:40px 0 30px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fc{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);overflow:hidden}
.fc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);opacity:.85}
.fc .no{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--c)}
.fc h3{font-size:17.5px;font-weight:800;margin-top:6px;line-height:1.3}
.fc p{font-size:14.5px;color:#4a5e70;margin-top:6px;line-height:1.55}

.pconn{padding:80px 0}
.phero .hero-bg{-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.cgrid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px}
.cn{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(15,60,100,.05);transition:transform .2s,box-shadow .2s,border-color .2s}
.cn:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 40%,#fff);box-shadow:0 16px 34px rgba(15,60,100,.1)}
.cn .ci{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--a),var(--c))}
.cn .ci svg{width:20px;height:20px}
.cn b{display:block;font-size:15.5px;font-weight:700}
.cn span{display:block;font-size:13.5px;color:#5f7488;margin-top:2px;line-height:1.45}
.cn{position:relative}
.cn .cn-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:6px}
.cn .go{font-weight:700;color:var(--c);font-size:13px}
.cn .go::after{content:"";position:absolute;inset:0;z-index:1;border-radius:16px}
.cn .go:focus-visible{outline:none}.cn .go:focus-visible::after{outline:3px solid color-mix(in srgb,var(--c) 60%,#fff);outline-offset:-3px}
.cn .more{position:relative;z-index:2;font-size:13px;font-weight:600;color:var(--mute);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--mute) 45%,transparent);text-underline-offset:3px;border-radius:5px}
.cn .more:hover{color:var(--c)}.cn .more:focus-visible{outline:2px solid var(--c);outline-offset:2px}

@media (max-width:1080px){
 .nav.sub .btn.idb{display:inline-flex}
 .nav.sub .adsk{display:none}
 .phero .wrap{grid-template-columns:minmax(0,1fr)}
 .shot{max-width:620px;width:100%}
 .fgrid{grid-template-columns:repeat(2,1fr)}
 .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
 .nav.sub .wrap{gap:12px}
 .nav .logo img{height:38px}
 .crumb .home,.crumb .sep{display:none}
 .crumb{font-size:14px}
 .nav.sub .btn.idb{padding:9px 13px;font-size:13.5px}
 .nav.sub .btn.idb .full{display:none}
 .phero{padding:110px 0 24px}
 .prole{font-size:18px}
 .fgrid,.cgrid{grid-template-columns:minmax(0,1fr)}
 .pconn{padding:56px 0}
}
@media (min-width:641px){.nav.sub .btn.idb .short{display:none}}
@media (max-width:400px){.crumb b{font-size:13px}.nav.sub .btn.idb svg{display:none}}
footer li a[aria-current]{color:var(--ink);font-weight:700}