/* Backend premium design layer — loaded last on every page. */
:root {
  --ink: #050c1a;
  --ink-2: #0a1628;
  --ink-3: #101f36;
  --blue: #2563ff;
  --blue-2: #4f7dff;
  --indigo: #5b4dff;
  --mint: #3fe0c5;
  --paper: #f7f9fc;
  --muted: #5d6b82;
  --line: #e3e9f2;
  --soft: #eef3ff;
  --brand-grad: linear-gradient(120deg, #2563ff 0%, #5b6bff 45%, #3fe0c5 100%);
  --shadow-sm: 0 1px 2px rgb(5 12 26 / 4%), 0 4px 14px rgb(5 12 26 / 5%);
  --shadow-md: 0 2px 4px rgb(5 12 26 / 4%), 0 18px 40px -12px rgb(5 12 26 / 14%);
  --shadow-lg: 0 30px 80px -24px rgb(5 12 26 / 35%);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Be Vietnam Pro", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

html { scroll-padding-top: 96px; }
body { font-family: var(--font); background: var(--paper); color: var(--ink); text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
::selection { background: #2563ff2e; color: inherit; }
:focus-visible { outline: 3px solid #3fe0c5; outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; }

/* Typography: open up tracking so Vietnamese diacritics never collide. */
h1, h2, h3, h4 { font-family: var(--font); text-wrap: balance; }
.hero h1, .page-hero h1 { font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.hero h1 { font-size: clamp(46px, 5.6vw, 76px); }
.page-hero h1 { font-size: clamp(42px, 5vw, 66px); }
h2, .section h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
h3 { letter-spacing: -.015em; }
.lede, .section-copy, .prose { text-wrap: pretty; }
.kicker, .eyebrow { font-family: var(--font); font-weight: 700; letter-spacing: .16em; }
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--brand-grad); }
.num, .panel small, .step b, .delivery-top { font-family: var(--mono) !important; }

/* Gradient accent text */
.hero h1 span, .ai-showcase-copy h2 span {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ai-showcase-copy h2 span { background: linear-gradient(120deg, #6fa1ff, #3fe0c5); -webkit-background-clip: text; background-clip: text; }

.dot { position: relative; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }

/* Header */
.header { background: rgb(247 249 252 / 72%); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.header.is-scrolled { background: rgb(255 255 255 / 86%); border-bottom-color: var(--line); box-shadow: 0 8px 30px -18px rgb(5 12 26 / 25%); }
nav { transition: height .3s var(--ease); }
.header.is-scrolled nav { height: 66px; }
.brand { font-family: var(--font); font-weight: 800; letter-spacing: -.04em; }
.brand img { transition: transform .5s var(--ease); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.navlinks { gap: 6px; color: #3d4b62; font-weight: 600; font-size: 13.5px; }
.navlinks > a:not(.btn) { position: relative; padding: 9px 13px; border-radius: 10px; transition: color .2s, background .2s; }
.navlinks > a:not(.btn):hover { color: var(--ink); background: #0a16280a; }
.navlinks > a:not(.btn)::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--brand-grad); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.navlinks > a:not(.btn):hover::after { transform: scaleX(1); }
.navlinks .btn { margin-left: 8px; }
.language-switch { margin: 0 4px; box-shadow: var(--shadow-sm); }
.menu { width: 42px; height: 42px; border-radius: 12px; color: var(--ink); cursor: pointer; }
.menu:hover { background: #0a16280d; }

/* Buttons */
.btn {
  position: relative; overflow: hidden; isolation: isolate; gap: 8px;
  padding: 14px 22px; font-family: var(--font); font-weight: 700; letter-spacing: -.005em;
  background: linear-gradient(135deg, #2563ff, #4a5cff); color: #fff !important;
  box-shadow: 0 1px 0 #ffffff33 inset, 0 10px 26px -8px #2563ffa0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, #ffffff40 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 #ffffff33 inset, 0 16px 34px -10px #2563ffb8; }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn.alt { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.btn.alt:hover { border-color: #c9d5e8; box-shadow: var(--shadow-md); }

/* ---------- Home hero ---------- */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(48% 60% at 85% 18%, #2563ff1f, transparent 70%),
    radial-gradient(40% 50% at 8% 90%, #3fe0c51c, transparent 70%),
    radial-gradient(30% 40% at 55% 0%, #5b4dff14, transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#0a162810 1px, transparent 1px), linear-gradient(90deg, #0a162810 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 20%, transparent 80%);
}
.home-hero { padding: 104px 0 112px; }
.eyebrow { background: #ffffffb3; border-color: #d7e2fb; box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); color: #1d4fd8; }
.hero .lede { color: #4f5e76; font-size: 18.5px; }
.promise { color: #5d6b82; }

/* Hero panel — glassy dark console with animated gradient border */
.panel.system-panel { position: relative; isolation: isolate; border-radius: 28px; background: linear-gradient(160deg, #0d1c33 0%, #060e1d 100%); box-shadow: var(--shadow-lg), 0 0 0 1px #ffffff12 inset; overflow: hidden; }
.panel.system-panel::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, #2563ff55, transparent 65%); z-index: -1; animation: float 9s ease-in-out infinite; }
.panel.system-panel::after { content: ""; position: absolute; width: 300px; height: 300px; left: -120px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, #3fe0c533, transparent 65%); z-index: -1; animation: float 11s ease-in-out infinite reverse; }
.panel h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.map-node { background: #0e1d33cc; transition: transform .3s var(--ease), border-color .3s; }
.map-node:hover { transform: translateY(-3px); border-color: #3fe0c5aa; }
.map-line { overflow: hidden; }
.map-line::before { content: ""; position: absolute; top: -1px; width: 30%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #3fe0c5, transparent); animation: travel 2.6s linear infinite; }
.metric { background: #ffffff08; border-color: #ffffff17; backdrop-filter: blur(6px); transition: border-color .3s, background .3s; }
.metric:hover { border-color: #3fe0c566; background: #ffffff0d; }
@keyframes travel { from { left: -30%; } to { left: 100%; } }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-24px, 18px); } }

/* Reference-led home hero */
.home-hero{min-height:680px;padding:72px 0 78px;background:linear-gradient(112deg,#fff 0%,#f8fbff 45%,#e9f3ff 100%)}
.home-hero .hero-grid{grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);gap:48px;position:relative;z-index:2}
.home-hero .hero-grid-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#5a8bc00d 1px,transparent 1px),linear-gradient(90deg,#5a8bc00d 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to right,transparent 2%,#000 55%,#000);-webkit-mask-image:linear-gradient(to right,transparent 2%,#000 55%,#000)}
.home-hero .hero-copy{padding-top:4px}
.home-hero .eyebrow{padding:9px 14px;font-size:10px;letter-spacing:.14em;background:#fff;color:#164bd4;box-shadow:0 9px 25px #2262bd14}
.home-hero .eyebrow b{font-size:18px;line-height:0;color:#2b6fff}
.home-hero h1{font-size:clamp(58px,5.7vw,82px);line-height:.98;margin:27px 0 22px;max-width:650px}
.home-hero h1 span{background:linear-gradient(100deg,#2854ff 8%,#176cff 48%,#06b8bd 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-hero .lede{font-size:16px;line-height:1.65;max-width:570px}
.home-hero .actions .btn{min-width:190px;padding:15px 22px}
.home-hero .actions .btn:first-child{background:linear-gradient(110deg,#2448f5,#1777ff);box-shadow:0 14px 34px #1f61ed42}
.hero-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;max-width:590px}
.hero-promises>div{display:flex;align-items:center;gap:10px;min-width:0;padding-right:13px}
.hero-promises>div+div{border-left:1px solid #dce5f2;padding-left:15px}
.hero-promises i{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border:1px solid #cfe2ff;border-radius:50%;background:#f8fbff;color:#1469fb;font-style:normal;font-weight:800}
.hero-promises b,.hero-promises small{display:block}.hero-promises b{font-size:11px}.hero-promises small{margin-top:3px;color:#75859b;font-size:9px}
.hero-visual-wrap{position:relative;padding:26px 0 34px}
.hero-visual-wrap:before{content:"";position:absolute;inset:-60px -100px -60px -40px;background:radial-gradient(circle at 60% 50%,#2784ff25,transparent 56%);filter:blur(2px)}
.hero-orbit{position:absolute;border:1px dashed #5d9eff78;border-radius:50%;pointer-events:none}.orbit-one{width:520px;height:380px;right:-90px;top:13px;transform:rotate(14deg)}.orbit-two{width:440px;height:270px;left:-45px;bottom:0;transform:rotate(-25deg)}
.home-hero .panel.system-panel{min-height:510px;padding:38px 35px 28px;border:1px solid #5ba2ff;border-radius:30px;background:linear-gradient(145deg,#0a2348,#041226 78%);box-shadow:0 30px 70px #1556af37,0 0 0 3px #ffffff60 inset}
.home-hero .panel.system-panel:before{width:430px;height:430px;right:-80px;top:-80px;background:radial-gradient(circle,#1568df66,transparent 67%)}
.home-hero .panel-top{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:2}
.home-hero .panel-top span{display:flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #2b72b8;border-radius:99px;color:#bcd9f7;font-size:9px;background:#12345a99}.home-hero .panel-top span i{width:6px;height:6px;border-radius:50%;background:#2fe2cf;box-shadow:0 0 10px #2fe2cf}
.home-hero .system-panel h2{position:relative;z-index:2;width:70%;margin:39px 0 36px;font-size:32px;line-height:1.15}
.system-globe{position:absolute;right:-38px;top:62px;width:270px;height:210px;border-radius:50%;opacity:.8;background:radial-gradient(circle at 62% 45%,#1189ff 0 1px,transparent 2px),radial-gradient(ellipse,#0b5cc344,transparent 66%)}
.system-globe:before,.system-globe:after{content:"";position:absolute;inset:28px;border:1px solid #1a6fd16b;border-radius:50%;transform:rotate(20deg)}.system-globe:after{inset:53px 24px;transform:rotate(-10deg)}.system-globe span{position:absolute;right:39px;bottom:50px;width:7px;height:7px;border-radius:50%;background:#2cf4df;box-shadow:0 0 14px #2cf4df}
.home-hero .system-map{position:relative;z-index:2;display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr;align-items:start;margin:0 0 22px}
.home-hero .map-node{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:0;border:0;background:transparent}.home-hero .map-node>i{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;border:1px solid #238fff;border-radius:12px;background:linear-gradient(145deg,#11355f,#0a1b36);box-shadow:0 0 20px #1179ff3d;color:#d5edff;font-style:normal;font-size:17px}.home-hero .map-node.active>i{border-color:#26ddcf;box-shadow:0 0 22px #19cfbd4a}.home-hero .map-node div{display:flex;gap:7px;align-items:center}.home-hero .map-node b{color:#27bfe5;font-size:9px}.home-hero .map-node strong{font-size:11px}.home-hero .map-node small{grid-column:1/3;padding-top:9px;color:#91a8c3;font:9px/1.45 "Be Vietnam Pro",sans-serif;letter-spacing:0}.home-hero .map-line{height:1px;margin-top:22px;background:#2178c9;position:relative}
.home-hero .map-line:after{content:"";right:-1px;top:-4px;width:7px;height:7px;border-top:2px solid #45d9bc;border-right:2px solid #45d9bc;transform:rotate(45deg)}
.home-hero .metrics{position:relative;z-index:2;grid-template-columns:1fr 1fr;gap:9px;margin-top:0}.home-hero .metric{display:flex;align-items:center;gap:12px;min-height:66px;padding:11px 13px;border-radius:12px;background:#0c2849c7}.home-hero .metric i{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#174c86,#0b2850);color:#e7f4ff;font-style:normal;box-shadow:0 0 18px #1776ff3b}.home-hero .metric b{font-size:11px}.home-hero .metric small{display:block;margin-top:3px;color:#90a7c0;font-size:8px}
.hero-stack{position:absolute;right:-24px;bottom:0;width:86px;height:82px;transform:rotate(-2deg)}.hero-stack i{position:absolute;left:10px;width:70px;height:48px;border:1px solid #71c8ff;border-radius:9px;background:linear-gradient(145deg,#eafaffbb,#49cfff88);transform:rotate(30deg) skew(-8deg);box-shadow:0 10px 20px #1674d829}.hero-stack i:nth-child(1){top:0}.hero-stack i:nth-child(2){top:12px;left:4px}.hero-stack i:nth-child(3){top:24px;left:-2px}
/* Font-independent icons for the home hero */
.hero-benefit-icon,.system-icon,.metric-icon{position:relative;font-size:0!important}
.hero-benefit-icon:before,.hero-benefit-icon:after,.system-icon:before,.system-icon:after,.metric-icon:before,.metric-icon:after{content:"";position:absolute;box-sizing:border-box}
.benefit-scope:before{width:15px;height:9px;left:8px;top:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.benefit-architecture:before{width:10px;height:10px;left:10px;top:10px;border:2px solid currentColor;transform:rotate(45deg)}
.benefit-handover:before{width:16px;height:18px;left:7px;top:6px;border:2px solid currentColor;border-radius:8px 8px 5px 5px}.benefit-handover:after{width:6px;height:6px;left:12px;top:3px;border:2px solid currentColor;border-radius:50%;background:#f8fbff}
.system-discovery:before{width:17px;height:17px;left:11px;top:10px;border:3px solid currentColor;border-radius:50%}.system-discovery:after{width:14px;height:3px;left:25px;top:27px;border-radius:3px;background:currentColor;transform:rotate(45deg);transform-origin:left center}
.system-build:before{content:"</>";inset:0;display:grid;place-items:center;color:currentColor;font:800 17px/1 var(--mono)}
.system-operate:before,.metric-cloud:before{width:18px;height:10px;left:10px;top:17px;border-radius:8px;background:currentColor;box-shadow:-4px 2px 0 -1px currentColor,4px -4px 0 -1px currentColor}.system-operate:after,.metric-cloud:after{width:22px;height:4px;left:8px;top:23px;border-radius:4px;background:currentColor}
.metric-foundation:before{width:17px;height:9px;left:11px;top:11px;border:2px solid currentColor;transform:skewY(-25deg)}.metric-foundation:after{width:17px;height:9px;left:11px;top:18px;border:2px solid currentColor;border-top:0;box-shadow:0 5px 0 -1px currentColor;transform:skewY(-25deg)}
.metric-api:before{content:"</>";inset:0;display:grid;place-items:center;color:currentColor;font:800 14px/1 var(--mono)}
.metric-handover:before{width:18px;height:21px;left:10px;top:8px;background:currentColor;clip-path:polygon(50% 0,100% 18%,90% 70%,50% 100%,10% 70%,0 18%)}.metric-handover:after{width:9px;height:12px;left:14px;top:12px;background:#123b70;clip-path:polygon(50% 0,100% 18%,88% 68%,50% 100%,12% 68%,0 18%)}
@media(max-width:1080px){.home-hero .hero-grid{grid-template-columns:1fr;max-width:820px}.home-hero .hero-copy{max-width:680px}.home-hero .system-panel{max-width:720px}.hero-visual-wrap{width:100%}}
@media(max-width:680px){.home-hero{padding:48px 0 58px}.home-hero h1{font-size:48px}.hero-promises{grid-template-columns:1fr;gap:12px}.hero-promises>div+div{border-left:0;padding-left:0}.home-hero .panel.system-panel{min-height:0;padding:27px 20px}.home-hero .system-panel h2{width:100%;font-size:25px;margin:28px 0}.system-globe{opacity:.35}.home-hero .system-map{grid-template-columns:1fr;gap:14px}.home-hero .map-line{display:none}.home-hero .metrics{grid-template-columns:1fr}.hero-stack{right:-4px}.home-hero .panel-top span{display:none}}

/* ---------- Sections ---------- */
.section { position: relative; padding: 112px 0; }
.section-top h2, #dich-vu .section-top h2 { max-width: 760px; letter-spacing: -.035em; line-height: 1.1; }
.dark, #dich-vu, .trends.ai-showcase { background-color: var(--ink); }
.dark { background-image: radial-gradient(50% 40% at 90% 0%, #2563ff24, transparent 70%), radial-gradient(40% 30% at 0% 100%, #3fe0c514, transparent 70%); }
#dich-vu { background: radial-gradient(45% 35% at 100% 0%, #2563ff2a, transparent 70%), radial-gradient(35% 30% at 0% 100%, #5b4dff1f, transparent 70%), var(--ink); }
.soft { background: linear-gradient(180deg, #eef3fa, #f4f7fc); }

/* Service cards */
#dich-vu .services { gap: 22px; }
#dich-vu .service { position: relative; border: 1px solid #ffffff1a; border-radius: 22px; box-shadow: 0 1px 0 #ffffff14 inset, 0 24px 50px -20px rgb(0 0 0 / 55%); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
#dich-vu .service .service-visual { background: linear-gradient(180deg, #f7f9fd, #fff) !important; }
#dich-vu .service img { transition: transform .7s var(--ease); }
#dich-vu .service h3 { font-weight: 700; }
#dich-vu .service .num { color: var(--blue); }
#dich-vu .service-more { color: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  #dich-vu .service:hover { transform: translateY(-6px); border-color: #ffffff40; box-shadow: 0 1px 0 #ffffff14 inset, 0 40px 70px -24px rgb(0 0 0 / 70%), 0 0 0 1px #2563ff66; }
  #dich-vu .service:hover img { transform: scale(1.05); }
}
@media (min-width: 1025px) {
  #dich-vu .service:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; }
  #dich-vu .service:last-child .service-visual { position: relative; height: 100% !important; min-height: 300px; border-bottom: 0 !important; border-right: 1px solid #e4eaf2; }
  #dich-vu .service:last-child .service-visual img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
  #dich-vu .service:last-child .service-body { justify-content: center; padding: 40px 44px; }
  #dich-vu .service:last-child h3 { font-size: 28px; }
  #dich-vu .service:last-child p { font-size: 15px; max-width: 460px; }
  #dich-vu .service:last-child .tags { margin-top: 0; }
}

/* Spotlight effect (set by premium.js) */
.spot { --mx: 50%; --my: 50%; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx) var(--my), #2563ff14, transparent 45%); }
.spot:hover::after { opacity: 1; }
.dark .spot::after, .trends .spot::after, #dich-vu .spot::after { background: radial-gradient(420px circle at var(--mx) var(--my), #3fe0c51a, transparent 45%); }

/* Value list */
.value { transition: padding .35s var(--ease), background .35s; border-radius: 0; }
.value:hover { padding-left: 14px; background: linear-gradient(90deg, #2563ff0a, transparent); }
.icon, .icon-mark, .card-icon, .check {
  background: linear-gradient(145deg, #eef3ff, #e3ebff); color: var(--blue);
  border: 1px solid #d5e0fb; box-shadow: 0 1px 0 #fff inset, 0 6px 14px -8px #2563ff66;
}
.value-copy h3 { font-size: 28px; font-weight: 700; letter-spacing: -.025em; }

/* Delivery visual */
.delivery-visual { border-radius: 28px; background: linear-gradient(160deg, #0b1a30, #050c1a); box-shadow: var(--shadow-lg), 0 0 0 1px #ffffff10 inset; }
.delivery-node i { transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.delivery-node:hover i { transform: translateY(-6px); border-color: #3fe0c5; box-shadow: 0 0 0 6px #3fe0c50d, 0 24px 40px #0007; }
.delivery-node.active i { animation: glow 3s ease-in-out infinite; }
.delivery-link { overflow: visible; }
.delivery-link::before { content: ""; position: absolute; top: -1px; width: 26px; height: 3px; border-radius: 3px; background: #3fe0c5; box-shadow: 0 0 12px #3fe0c5; animation: travel 3s linear infinite; }

/* Reference-led delivery system */
.delivery-section{overflow:hidden;background:radial-gradient(circle at 93% 8%,#dcecff 0,transparent 23%),linear-gradient(180deg,#f7faff,#edf4fc)}
.delivery-section:before{content:"";position:absolute;right:3%;top:28px;width:240px;height:240px;border:1px solid #92bfff80;border-radius:50%;background-image:radial-gradient(#6da8ff 1px,transparent 1px);background-size:18px 18px;background-position:center;mask-image:radial-gradient(circle,#000 0 28%,transparent 29%);-webkit-mask-image:radial-gradient(circle,#000 0 28%,transparent 29%)}
.delivery-heading{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end;position:relative;z-index:1}
.delivery-heading .kicker{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.16em}.delivery-heading .kicker:before{content:"";width:24px;height:2px;background:linear-gradient(90deg,#155eef,#39dbd0)}
.delivery-heading h2{max-width:780px;margin:20px 0 0;font-size:clamp(48px,5.2vw,72px);line-height:1.02;letter-spacing:-.06em}.delivery-heading h2 span{background:linear-gradient(100deg,#234cff,#126cff);-webkit-background-clip:text;background-clip:text;color:transparent}.delivery-heading .section-copy{max-width:440px;margin:0 0 8px;font-size:17px;line-height:1.65;color:#53647e}
.delivery-section .delivery-visual{min-height:450px;margin-top:44px;padding:28px 24px 18px;border:1px solid #197ee9;border-radius:28px;background:linear-gradient(145deg,#09264a,#03142d 72%);box-shadow:0 28px 55px #165eae26,0 0 0 3px #65bdff1c inset}
.delivery-section .delivery-visual:before{background-image:linear-gradient(#4da1ff12 1px,transparent 1px),linear-gradient(90deg,#4da1ff12 1px,transparent 1px);background-size:32px 32px;mask-image:none;-webkit-mask-image:none}
.delivery-section .delivery-visual:after{width:420px;height:310px;left:35%;top:9%;background:#0f9fd62e;filter:blur(70px)}
.delivery-section .delivery-top{align-items:center;padding:0 4px;color:#a5bad2;font-size:9px}.delivery-section .delivery-top span,.delivery-section .delivery-top b{display:flex;align-items:center;gap:10px}.delivery-section .delivery-top span>i{display:grid;place-items:center;width:22px;height:22px;border:1px solid #2889e9;border-radius:6px;color:#4fcaff;font-style:normal}.delivery-section .delivery-top b>i{font-size:30px;color:#39b7ff;font-style:normal;line-height:.5}
.delivery-section .delivery-orbit{margin:45px auto 34px;align-items:start}
.delivery-section .delivery-node{width:165px}.delivery-section .delivery-node>span{position:relative;display:table;right:auto;top:auto;margin:0 auto -3px;padding:7px 15px;border:1px solid #225b95;border-bottom:0;border-radius:9px 9px 0 0;background:#0c315d;color:#52c7ff;font-size:11px;font-weight:800}.delivery-section .delivery-node>i{width:92px;height:92px;border-color:#51aaff;border-radius:21px;background:linear-gradient(145deg,#1457a0,#092858);color:#a8ceff;font-size:25px;box-shadow:0 0 26px #147cff33,0 16px 30px #0005}.delivery-section .delivery-node.active>i{width:100px;height:100px;border-color:#38e2dd;background:linear-gradient(145deg,#0d6f9d,#063958);color:#50f2e8;box-shadow:0 0 0 7px #33dcd90d,0 0 28px #24d9e16b}.delivery-section .delivery-node h3{margin:15px 0 5px;font-size:16px}.delivery-section .delivery-node p{font-size:10px;color:#a5b8cf;white-space:nowrap}.delivery-section .delivery-link{margin-top:88px;background:repeating-linear-gradient(90deg,#47dfe7 0 3px,transparent 3px 8px)}.delivery-section .delivery-link:after{right:-4px;top:-16px;font-size:26px;color:#43cfff}.delivery-section .delivery-link:before{top:-3px;width:13px;height:13px;border-radius:50%;background:#47e4e5;box-shadow:0 0 12px #47e4e5}
.delivery-assurances{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #1c568b;border-radius:16px;background:#071c38c7}.delivery-assurances>div{display:flex;align-items:center;gap:14px;padding:14px 28px}.delivery-assurances>div+div{border-left:1px solid #245684}.delivery-assurances i{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid #2099ee;border-radius:50%;color:#45e1e1;font-size:19px;font-style:normal}.delivery-assurances b,.delivery-assurances small{display:block}.delivery-assurances b{font-size:12px}.delivery-assurances small{margin-top:4px;color:#92aac3;font-size:10px}
/* Font-independent delivery icons */
.delivery-icon,.delivery-mark,.loop-mark,.assurance-icon{position:relative;font-size:0!important}
.delivery-mark:before{content:"";width:9px;height:9px;border:2px solid currentColor;transform:rotate(45deg)}
.loop-mark{display:block;width:34px;height:18px}.loop-mark:before,.loop-mark:after{content:"";position:absolute;top:2px;width:14px;height:10px;border:3px solid currentColor;border-radius:50%}.loop-mark:before{left:1px;transform:rotate(28deg)}.loop-mark:after{right:1px;transform:rotate(-28deg)}
.delivery-icon:before,.delivery-icon:after,.assurance-icon:before,.assurance-icon:after{content:"";position:absolute;box-sizing:border-box}
.icon-discovery:before{width:30px;height:30px;border:4px solid currentColor;border-radius:50%;left:24px;top:23px}.icon-discovery:after{width:25px;height:4px;border-radius:3px;background:currentColor;left:49px;top:53px;transform:rotate(45deg);transform-origin:left center}
.icon-proposal:before{width:35px;height:43px;border:4px solid currentColor;border-radius:5px;left:28px;top:22px}.icon-proposal:after{width:17px;height:3px;border-radius:2px;background:currentColor;left:38px;top:35px;box-shadow:0 10px 0 currentColor,0 20px 0 currentColor}
.icon-design:before{width:50px;height:39px;border:4px solid currentColor;border-radius:5px;left:21px;top:26px}.icon-design:after{width:42px;height:4px;background:currentColor;left:25px;top:37px;box-shadow:14px 13px 0 -1px currentColor}
.icon-build:before{content:"</>";inset:0;display:grid;place-items:center;color:currentColor;font:800 24px/1 var(--mono)}
.icon-operate:before{width:7px;height:17px;border-radius:2px 2px 0 0;background:currentColor;left:27px;top:49px;box-shadow:13px -10px 0 currentColor,26px -24px 0 currentColor}.icon-operate:after{width:42px;height:24px;border-top:4px solid currentColor;left:26px;top:31px;transform:rotate(-27deg)}
.delivery-section .delivery-link:after{content:"";right:-2px;top:-5px;width:10px;height:10px;border-top:3px solid #43cfff;border-right:3px solid #43cfff;transform:rotate(45deg)}
.assurance-flow:before{width:22px;height:22px;border:3px solid currentColor;border-radius:50%;left:9px;top:9px}.assurance-flow:after{width:7px;height:7px;border-radius:50%;background:currentColor;left:17px;top:17px}
.assurance-output:before{width:4px;height:12px;border-radius:3px;background:currentColor;left:11px;top:20px;box-shadow:8px -7px 0 currentColor,16px -15px 0 currentColor}.assurance-output:after{width:26px;height:2px;background:currentColor;left:8px;top:33px}
.assurance-control:before{width:23px;height:27px;left:9px;top:7px;background:currentColor;clip-path:polygon(50% 0,100% 18%,90% 70%,50% 100%,10% 70%,0 18%)}.assurance-control:after{width:13px;height:16px;left:14px;top:11px;background:#071c38;clip-path:polygon(50% 0,100% 18%,88% 68%,50% 100%,12% 68%,0 18%)}
@media(max-width:980px){.delivery-heading{grid-template-columns:1fr;gap:20px}.delivery-heading .section-copy{max-width:620px}.delivery-section .delivery-node{width:auto}.delivery-section .delivery-node p{white-space:normal}.delivery-assurances>div{padding:14px}}
@media(max-width:720px){.delivery-heading h2{font-size:42px}.delivery-section .delivery-visual{padding:22px 18px}.delivery-section .delivery-top b{display:none}.delivery-section .delivery-orbit{margin:25px 0}.delivery-section .delivery-node>span{position:absolute;right:0;top:21px;margin:0;padding:5px 9px;border:1px solid #225b95;border-radius:7px}.delivery-section .delivery-node>i,.delivery-section .delivery-node.active>i{width:58px;height:58px}.delivery-section .delivery-node p{white-space:normal}.delivery-assurances{grid-template-columns:1fr}.delivery-assurances>div+div{border-left:0;border-top:1px solid #245684}}
@media(max-width:720px){.delivery-section .delivery-node{grid-template-columns:92px 1fr}.delivery-section .delivery-node>i.delivery-icon,.delivery-section .delivery-node.active>i.delivery-icon{width:82px;height:82px;transform:scale(.88);transform-origin:left center}.delivery-section .delivery-node:hover>i.delivery-icon{transform:scale(.88) translateY(-4px)}}
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 8px #3fe0c50b, 0 20px 45px #0005; } 50% { box-shadow: 0 0 0 14px #3fe0c514, 0 0 50px #3fe0c533; } }

/* Tech chips */
.tech span, .logo-tech span { transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.logo-tech span:hover { transform: translateY(-2px); border-color: #c7d5ee; box-shadow: var(--shadow-md); }

/* AI showcase */
.ai-showcase .trend-card { transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.ai-showcase .trend-card:hover { transform: translateY(-5px); border-color: #3a6fae; box-shadow: 0 30px 60px -28px #000; }
.ai-showcase-visual { box-shadow: 0 40px 90px -30px #000, 0 0 0 1px #ffffff10 inset; }

/* Generic cards */
.card, .deliverable, .icon-card, .contact-panel, .fact, .step {
  position: relative; border-color: var(--line); box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.card:hover, .deliverable:hover, .icon-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #cfdbef;
}
.dark .card, .expect .icon-card { background: linear-gradient(160deg, #102038, #0b182b); border-color: #ffffff14; box-shadow: none; }
.dark .card:hover, .expect .icon-card:hover { border-color: #3fe0c555; box-shadow: 0 30px 60px -30px #000; }
.card h3, .icon-card h3 { font-weight: 700; }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 26px; box-shadow: var(--shadow-sm); transition: border-color .3s, box-shadow .3s; }
.faq details:hover { border-color: #cdd9ee; }
.faq details[open] { border-color: #bfd0f5; box-shadow: var(--shadow-md); }
.faq summary { font-weight: 700; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; top: 50%; right: 0; width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); font-size: 18px; line-height: 1; transition: transform .35s var(--ease), background .3s, color .3s; }
.faq details[open] summary:after { content: "+"; transform: rotate(45deg); background: var(--blue); color: #fff; }
.faq details[open] p { animation: fadeDown .4s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* CTA blocks */
.contact-box, .cta-box {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 32px;
  background: linear-gradient(135deg, #1d4fff 0%, #4a3fff 55%, #2a1fb8 100%);
  box-shadow: 0 40px 90px -30px #2563ffaa;
}
.contact-box::before, .cta-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(60% 80% at 80% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(60% 80% at 80% 50%, #000, transparent);
}
.contact-box::after, .cta-box::after { content: ""; position: absolute; width: 460px; height: 460px; right: -140px; bottom: -220px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, #3fe0c566, transparent 65%); animation: float 10s ease-in-out infinite; }
.contact-box .kicker { color: #c9f7ee; }
.contact-box .kicker::before { background: #3fe0c5; }
.contact-actions .btn, .cta-actions .btn { box-shadow: 0 14px 30px -12px #0008; }
.contact-actions .btn.alt, .cta-actions .btn.alt { background: #ffffff14; backdrop-filter: blur(6px); }
.contact-actions .btn.alt:hover, .cta-actions .btn.alt:hover { background: #ffffff24; }
.mini-cta { position: relative; overflow: hidden; border-radius: 24px; box-shadow: var(--shadow-md); background: linear-gradient(120deg, #fff 55%, #eef3ff); }

/* ---------- Inner pages ---------- */
.page-hero { position: relative; isolation: isolate; }
.page-hero { background: radial-gradient(50% 70% at 90% 10%, #2563ff40, transparent 70%), radial-gradient(40% 60% at 0% 100%, #3fe0c522, transparent 70%), linear-gradient(160deg, #050c1a 0%, #0c1f3d 100%); padding: 64px 0 96px; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#ffffff0b 1px, transparent 1px), linear-gradient(90deg, #ffffff0b 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(#000, transparent 85%); -webkit-mask-image: linear-gradient(#000, transparent 85%); }
.page-hero .kicker { color: var(--mint); }
.page-hero .kicker::before { background: var(--mint); }
.hero-note { backdrop-filter: blur(10px); background: linear-gradient(160deg, #ffffff12, #ffffff06); border-color: #ffffff1f; box-shadow: 0 30px 60px -30px #000; }
.crumb { font-size: 12.5px; }
.crumb a { transition: opacity .2s; }
.crumb a:hover { opacity: .75; }
.hero-image { border-radius: 28px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.facts .fact { border-radius: 14px; }
.step { border-radius: 18px; }
.dark .step { box-shadow: none; border-radius: 0; }

/* ---------- Footer ---------- */
footer { position: relative; background: var(--ink); color: #c9d4e5; border-top: 0; overflow: hidden; }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #2563ff, #3fe0c5, transparent); }
footer::after { content: ""; position: absolute; width: 600px; height: 400px; left: 50%; top: -260px; transform: translateX(-50%); background: radial-gradient(circle, #2563ff22, transparent 65%); pointer-events: none; }
footer .brand { color: #fff; }

/* Scroll progress (premium.js) */
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 100; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--brand-grad); pointer-events: none; }

/* Reveal-on-scroll (premium.js) */
.reveal { opacity: 0; transform: translateY(26px) !important; transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s) !important; }
.reveal.in { opacity: 1; transform: none !important; }

/* Shared chrome rendered by the Go templates */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 8px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); }
.language-switch { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px; }
.language-switch a { border-radius: 99px; padding: 6px 8px; color: #7b889a; font: 800 10px/1 var(--font); transition: color .2s, background .2s; }
.language-switch a:hover { color: var(--ink); }
.language-switch a.active { background: var(--ink); color: #fff; }
.language-switch span { color: #b4bfce; font-size: 9px; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }

/* Services dropdown (mega menu) */
.nav-menu { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: color .2s, background .2s; }
.nav-trigger svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.nav-trigger:hover, .nav-trigger.is-active, .nav-menu.open .nav-trigger { color: var(--ink); background: #0a16280a; }
.nav-menu.open .nav-trigger svg { transform: rotate(180deg); }
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 40; width: min(700px, calc(100vw - 48px));
  padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-menu.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .nav-menu:hover .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .nav-menu:hover .nav-trigger svg { transform: rotate(180deg); }
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-link { display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: start; padding: 12px; border-radius: 14px; transition: background .2s; }
.mega-link:hover, .mega-link:focus-visible, .mega-link[aria-current="page"] { background: var(--soft); }
.mega-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid #d5e0fb; background: linear-gradient(145deg, #eef3ff, #e3ebff); color: var(--blue); font-size: 17px; transition: transform .3s var(--ease), background .3s, color .3s; }
.service-glyph{--icon-surface:#e8eeff;position:relative;font-size:0!important}
.service-glyph:before,.service-glyph:after{content:"";position:absolute;box-sizing:border-box;color:inherit}
.service-icon-phan-mem-theo-yeu-cau:before{width:21px;height:17px;border:2px solid currentColor;border-radius:3px;left:9px;top:10px;box-shadow:4px 4px 0 -1px var(--icon-surface),4px 4px 0 1px currentColor}
.service-icon-phan-mem-theo-yeu-cau:after{width:11px;height:2px;background:currentColor;left:14px;top:16px;box-shadow:0 5px 0 currentColor}
.service-icon-web-mobile:before{width:22px;height:16px;border:2px solid currentColor;border-radius:3px;left:7px;top:9px}
.service-icon-web-mobile:after{width:9px;height:16px;border:2px solid currentColor;border-radius:3px;left:24px;top:15px;background:inherit;box-shadow:-11px 9px 0 -4px currentColor}
.service-icon-backend-api:before{content:"</>";inset:0;display:grid;place-items:center;font:800 13px/1 var(--mono);color:currentColor}
.service-icon-backend-api:after{width:5px;height:5px;border-radius:50%;background:currentColor;left:5px;top:18px;box-shadow:25px 0 0 currentColor}
.service-icon-cloud-devops:before{width:24px;height:11px;border:2px solid currentColor;border-radius:10px;left:8px;top:18px}
.service-icon-cloud-devops:after{width:12px;height:12px;border:2px solid currentColor;border-bottom-color:transparent;border-radius:50%;left:14px;top:10px;background:var(--icon-surface)}
.service-icon-ai-automation:before{width:7px;height:7px;border:2px solid currentColor;border-radius:50%;left:17px;top:16px;box-shadow:-10px -8px 0 -2px var(--icon-surface),-10px -8px 0 0 currentColor,10px -8px 0 -2px var(--icon-surface),10px -8px 0 0 currentColor,-10px 9px 0 -2px var(--icon-surface),-10px 9px 0 0 currentColor,10px 9px 0 -2px var(--icon-surface),10px 9px 0 0 currentColor}
.service-icon-ai-automation:after{width:22px;height:18px;left:9px;top:11px;background:linear-gradient(35deg,transparent 46%,currentColor 47% 53%,transparent 54%),linear-gradient(-35deg,transparent 46%,currentColor 47% 53%,transparent 54%);opacity:.8}
.service-icon-bao-tri-toi-uu:before{width:19px;height:19px;border:2px dashed currentColor;border-radius:50%;left:10px;top:10px}
.service-icon-bao-tri-toi-uu:after{width:7px;height:7px;border:2px solid currentColor;border-radius:50%;left:16px;top:16px;box-shadow:9px 9px 0 -2px var(--icon-surface),9px 9px 0 0 currentColor}
.service-icon-chuyen-doi-so:before{width:22px;height:22px;border:2px solid currentColor;border-radius:50%;left:9px;top:9px}
.service-icon-chuyen-doi-so:after{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;left:17px;top:12px;transform:rotate(45deg);box-shadow:5px 5px 0 -4px currentColor}
.service-icon-help:before{width:21px;height:16px;border:2px solid currentColor;border-radius:8px;left:9px;top:9px}
.service-icon-help:after{width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;left:14px;top:21px;transform:skewY(-35deg)}
.mega-link:hover .mega-icon { transform: scale(1.06); background: var(--blue); color: #fff; }
.mega-link:hover .service-glyph,.related-card:hover .service-glyph{--icon-surface:var(--blue)}
.mega-text b { display: block; color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.mega-text small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 14px 14px 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 500; }
.mega-foot a { color: var(--blue); font-weight: 700; }
.mega-foot .mega-all { color: var(--ink); white-space: nowrap; }
.mega-foot .mega-all:hover, .mega-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Service detail sections */
.signals { margin-top: 44px; padding: 30px 32px; border: 1px solid #f3dcc4; border-radius: 22px; background: linear-gradient(135deg, #fff8f1, #fff); }
.signals h3 { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b45309; }
.signals ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.signals li { position: relative; padding-left: 32px; color: #3d4b62; font-size: 15px; font-weight: 500; line-height: 1.55; }
.signals li::before { content: "!"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #fde7cf; color: #c2410c; font-size: 12px; font-weight: 800; }
.sub-label { margin: 48px 0 -22px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.outcome-band { position: relative; overflow: hidden; background: radial-gradient(50% 80% at 100% 0%, #2563ff33, transparent 70%), radial-gradient(40% 60% at 0% 100%, #3fe0c51f, transparent 70%), var(--ink); color: #fff; }
.outcome-band .kicker { color: var(--mint); }
.outcome-band .kicker::before { background: var(--mint); }
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.outcome { padding: 30px 28px; border: 1px solid #ffffff17; border-radius: 22px; background: linear-gradient(160deg, #ffffff0d, #ffffff04); transition: transform .4s var(--ease), border-color .3s; }
.outcome:hover { transform: translateY(-4px); border-color: #3fe0c566; }
.outcome-num { display: block; font: 800 46px/1 var(--font); letter-spacing: -.04em; background: linear-gradient(120deg, #6fa1ff, #3fe0c5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.outcome h3 { margin: 22px 0 10px; font-size: 20px; }
.outcome p { margin: 0; color: #aebbd0; font-size: 14px; line-height: 1.7; }

.receive { margin-top: 18px; padding: 28px 30px; border: 1px solid #cfdcfb; border-radius: 20px; background: linear-gradient(135deg, #eef3ff, #fff); }
.receive h3 { margin: 0 0 18px; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.receive ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.receive li { position: relative; padding-left: 28px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.receive li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 11px; }

.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; counter-reset: engage; }
.engage { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.engage:hover { transform: translateY(-4px); border-color: #c7d5f5; box-shadow: var(--shadow-md); }
.engage:not(:last-child)::after { content: "→"; position: absolute; right: -15px; top: 38px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--blue); font-size: 13px; }
.engage-num { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-grad); color: #fff; font: 700 14px var(--mono); }
.engage h3 { margin: 22px 0 10px; font-size: 20px; font-weight: 700; }
.engage p { flex: 1; margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.engage a { color: var(--blue); font-size: 13px; font-weight: 700; }
.engage a:hover { text-decoration: underline; text-underline-offset: 3px; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.related-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s, background .3s; }
.related-card:hover { transform: translateY(-4px); border-color: #c7d5f5; background: #fff; box-shadow: var(--shadow-md); }
.related-card:hover .mega-icon { background: var(--blue); color: #fff; }
.related-card h3 { margin: 18px 0 8px; font-size: 18px; font-weight: 700; }
.related-card p { flex: 1; margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.related-more { color: var(--blue); font-size: 13px; font-weight: 700; }

/* About page */
.about-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 56px 0 0; border: 1px solid #ffffff1f; border-radius: 22px; background: #ffffff0a; backdrop-filter: blur(10px); }
.about-facts div { padding: 22px 26px; }
.about-facts div + div { border-left: 1px solid #ffffff1a; }
.about-facts dt { font-size: 26px; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(120deg, #fff, #9fc2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-facts dd { margin: 6px 0 0; color: #9fb0c8; font-size: 12.5px; font-weight: 500; }
.story { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.story .prose { margin: 18px 0 0; }
.story h2 { margin-bottom: 8px; }
.story-quote { position: relative; margin: 0; padding: 44px 40px; border-radius: 28px; background: linear-gradient(150deg, #0d1c33, #050c1a); color: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.story-quote::before { content: "“"; position: absolute; right: 24px; top: -30px; font: 800 180px/1 var(--font); color: #2563ff33; }
.story-quote blockquote { position: relative; margin: 0; font-size: 22px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
.story-quote figcaption { margin-top: 24px; color: var(--mint); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mv-card { padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }
.mv-card p { margin: 18px 0 0; font-size: 20px; font-weight: 600; line-height: 1.55; letter-spacing: -.01em; }
.mv-card.dark-card { border-color: transparent; background: linear-gradient(135deg, #1d4fff, #4a3fff); color: #fff; box-shadow: 0 30px 60px -30px #2563ffaa; }
.mv-card.dark-card .kicker { color: #c9f7ee; }
.mv-card.dark-card .kicker::before { background: #3fe0c5; }
.values-head { margin-top: 72px; }
.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 36px; }
.values article { padding: 24px 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.values article:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.values span { font: 700 12px var(--mono); color: var(--blue); }
.values h3 { margin: 16px 0 8px; font-size: 17px; font-weight: 700; }
.values p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.cap-grid { grid-template-columns: repeat(4, 1fr); }
.cap-cta { border-style: dashed; border-color: #b9cbf3; background: var(--soft); }
.fit { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid #ffffff1a; color: var(--mint) !important; font-weight: 600; }

/* Legal pages */
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal-layout .legal { max-width: 820px; }
.toc { position: sticky; top: 96px; display: block; height: auto; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.toc b { display: block; margin-bottom: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 8px; color: #4a5870; font-size: 13px; line-height: 1.4; transition: background .2s, color .2s; }
.toc a::before { content: counter(toc, decimal-leading-zero); min-width: 18px; color: #9aa7bb; font: 600 11px/1.6 var(--mono); }
.toc a:hover, .toc a.active { background: #fff; color: var(--blue); }
.toc a.active::before { color: var(--blue); }
.legal h2 { scroll-margin-top: 96px; }
.legal h2:first-of-type { margin-top: 36px; }
.legal strong { color: var(--ink); }
.legal a { color: var(--blue); font-weight: 600; }
.legal-contact { display: grid; gap: 0; margin: 18px 0 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.legal-contact div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 20px; }
.legal-contact div + div { border-top: 1px solid var(--line); }
.legal-contact dt { color: var(--muted); font-size: 13px; }
.legal-contact dd { margin: 0; font-size: 14px; font-weight: 600; }

/* Contact map */
.office { padding-top: 0 !important; }
.map-card { display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow-md); }
.map-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 48px; }
.map-info h2 { margin: 14px 0 22px; font-size: clamp(30px, 3.2vw, 42px); }
.map-address { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; margin: 0 0 12px; font-size: 15px; font-weight: 600; line-height: 1.55; }
.map-address .icon-mark { width: 42px; height: 42px; margin: 0; font-size: 18px; }
.map-note { margin: 0 0 26px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.map-frame { position: relative; min-height: 440px; background: #e8eef7; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Zalo floating button */
.zalo-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px 15px 10px 10px; border-radius: 999px; background: linear-gradient(135deg, #0a6cff, #2563ff); color: #fff !important; box-shadow: 0 18px 40px -12px #2563ffaa; font: 700 13px/1 var(--font); transition: transform .2s ease, box-shadow .2s ease; }
.zalo-float b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0868ff; font-size: 16px; }
.zalo-float:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -12px #2563ffcc; }
@media (max-width: 600px) {
  .zalo-float { right: 14px; bottom: 14px; padding: 9px; }
  .zalo-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .home-hero { padding: 72px 0 84px; }
  .map-card { grid-template-columns: 1fr; }
  .map-frame { min-height: 360px; }
  .outcomes, .engagements { grid-template-columns: 1fr; }
  .story, .legal-layout { grid-template-columns: 1fr; gap: 36px; }
  .toc { position: static; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .about-facts { grid-template-columns: repeat(2, 1fr); }
  .about-facts div:nth-child(3) { border-left: 0; }
  .about-facts div:nth-child(n+3) { border-top: 1px solid #ffffff1a; }
  .engage:not(:last-child)::after { display: none; }
  .receive ul, .related { grid-template-columns: 1fr 1fr; }
  .section { padding: 88px 0; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: clamp(38px, 11vw, 48px); letter-spacing: -.035em; }
  .page-hero h1 { font-size: clamp(36px, 10vw, 44px); }
  .section { padding: 72px 0; }
  .navlinks { gap: 2px; background: #fff; box-shadow: var(--shadow-lg); border-radius: 20px; }
  .navlinks .btn { margin: 8px 0 0; }
  .navlinks { max-height: calc(100vh - 100px); overflow-y: auto; }
  .nav-trigger { width: 100%; justify-content: space-between; }
  .mega { position: static; display: none; width: auto; margin: 4px 0 6px; padding: 6px; border: 0; border-radius: 14px; background: var(--paper); box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .mega::before { display: none; }
  .nav-menu.open .mega { display: block; transform: none; }
  .mega-grid { grid-template-columns: 1fr; }
  .mega-link { grid-template-columns: 34px 1fr; align-items: center; padding: 9px 10px; }
  .mega-icon { width: 34px; height: 34px; font-size: 15px; }
  .mega-text small { display: none; }
  .mega-foot { padding: 10px 10px 4px; }
  .mega-foot > span { display: none; }
  .signals, .receive { padding: 24px 20px; }
  .signals ul, .receive ul, .related, .cap-grid, .values, .mv-grid { grid-template-columns: 1fr; }
  .mv-card { padding: 26px 22px; }
  .mv-card p, .story-quote blockquote { font-size: 18px; }
  .story-quote { padding: 32px 26px; }
  .legal-contact div { grid-template-columns: 1fr; gap: 4px; }
  .sub-label { margin-top: 40px; }
  .map-card { grid-template-columns: 1fr; border-radius: 22px; }
  .map-info { padding: 28px 22px; }
  .map-info .btn { width: 100%; }
  .map-frame { min-height: 320px; }
  .language-switch { justify-content: center; margin: 6px 0 0; }
  .language-switch a { padding: 8px 14px; }
  .navlinks > a:not(.btn)::after { display: none; }
  .header.is-scrolled nav { height: 76px; }
  .faq details { padding: 0 18px; }
  .contact-box, .cta-box { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Keep detail-page content separated even when translated copy grows. */
.be-hero-grid, .ai-hero-grid { padding-block: 40px; }
.be-principles, .ai-principles { margin-top: 24px; row-gap: 24px; }
.be-hero, .ai-hero { padding-bottom: 40px; }
.actions { flex-wrap: wrap; }
.be-hero-grid > *, .ai-hero-grid > *, .section-head > *,
.be-heading > *, .ai-section-heading > * { min-width: 0; }
.be-diagram { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.be-cta, .ai-cta { margin-block: 40px 56px; }
.ai-cta > .shell { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.be-cta .btn, .ai-cta .btn { flex-shrink: 0; }
.be-architecture > .shell { grid-column: 1 / -1; display: grid; grid-template-columns: .7fr 1.3fr; gap: 38px; align-items: center; width: 100%; }
.be-architecture-map footer { background: transparent; }
@media (max-width: 900px) {
  .be-hero-grid, .ai-hero-grid { gap: 32px; }
  .be-architecture > .shell { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .be-hero-grid, .ai-hero-grid { padding-block: 32px; }
  .be-principles, .ai-principles { margin-top: 16px; }
  .be-cta, .ai-cta { margin-block: 32px 40px; }
  .ai-cta > .shell { flex-direction: column; align-items: stretch; gap: 20px; }
  .ai-cta .btn { margin-top: 0; }
}
@media (max-width: 600px) {
  .be-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Site-wide font-independent utility icons */
.icon-css,.be-card-icon,.ai-float-pattern{position:relative;font-size:0!important}
.icon-css:before,.icon-css:after,.be-card-icon:before,.be-card-icon:after,.ai-float-pattern:before,.ai-float-pattern:after{content:"";position:absolute;box-sizing:border-box}
.icon-discovery-mini:before,.icon-architecture-mini:before{width:18px;height:18px;left:12px;top:12px;border:2px solid currentColor;border-radius:50%}.icon-discovery-mini:after{width:10px;height:2px;left:27px;top:29px;background:currentColor;transform:rotate(45deg)}
.icon-engineering-mini:before{content:"</>";inset:0;display:grid;place-items:center;font:800 14px/1 var(--mono);color:currentColor}
.icon-handover-mini:before,.icon-launch-mini:before{width:18px;height:18px;left:11px;top:14px;border-top:2px solid currentColor;border-right:2px solid currentColor}.icon-handover-mini:after,.icon-launch-mini:after{width:20px;height:2px;left:10px;top:22px;background:currentColor;transform:rotate(-45deg)}
.icon-advisory-mini:before{width:16px;height:16px;left:13px;top:13px;border:2px solid currentColor;transform:rotate(45deg)}
.icon-project-mini:before{width:20px;height:17px;left:12px;top:14px;border:2px solid currentColor;border-radius:3px;box-shadow:4px -4px 0 -2px var(--soft),4px -4px 0 0 currentColor}
.icon-project-mini:after{width:8px;height:2px;left:18px;top:21px;background:currentColor;box-shadow:0 5px 0 currentColor}
.icon-team-mini:before{width:10px;height:10px;left:17px;top:10px;border:2px solid currentColor;border-radius:50%;box-shadow:-9px 5px 0 -2px var(--soft),-9px 5px 0 0 currentColor,9px 5px 0 -2px var(--soft),9px 5px 0 0 currentColor}
.icon-team-mini:after{width:20px;height:10px;left:12px;top:25px;border:2px solid currentColor;border-bottom:0;border-radius:12px 12px 0 0}
.icon-startup-mini:before{width:15px;height:21px;left:15px;top:10px;border:2px solid currentColor;border-radius:50% 50% 45% 45%;transform:rotate(45deg)}
.icon-startup-mini:after{width:7px;height:7px;left:20px;top:15px;border:2px solid currentColor;border-radius:50%;box-shadow:-8px 17px 0 -2px var(--soft),-8px 17px 0 0 currentColor}
.icon-sme-mini:before{width:23px;height:20px;left:11px;top:13px;border:2px solid currentColor;border-radius:3px;background:linear-gradient(90deg,transparent 28%,currentColor 29% 35%,transparent 36% 64%,currentColor 65% 71%,transparent 72%),linear-gradient(transparent 42%,currentColor 43% 51%,transparent 52%)}
.icon-sme-mini:after{width:9px;height:7px;left:18px;top:26px;border:2px solid currentColor;border-bottom:0}
.icon-it-team-mini:before{width:24px;height:17px;left:10px;top:11px;border:2px solid currentColor;border-radius:3px}
.icon-it-team-mini:after{content:"</>";width:28px;left:8px;top:16px;text-align:center;font:800 10px/1 var(--mono);color:currentColor;border-bottom:2px solid currentColor;padding-bottom:11px}
.icon-email-mini:before{width:23px;height:16px;left:9px;top:12px;border:2px solid currentColor;border-radius:3px}.icon-email-mini:after{width:15px;height:15px;left:13px;top:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.icon-phone-mini:before{width:12px;height:25px;left:14px;top:8px;border:3px solid currentColor;border-top-color:transparent;border-radius:4px 4px 9px 9px;transform:rotate(-38deg)}
.icon-location-mini:before{width:19px;height:24px;left:11px;top:7px;border:2px solid currentColor;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.icon-location-mini:after{width:5px;height:5px;left:18px;top:14px;border:2px solid currentColor;border-radius:50%}
.icon-architecture-mini:before{border-radius:2px;transform:rotate(45deg)}.icon-architecture-mini:after{width:8px;height:8px;left:17px;top:17px;border:2px solid currentColor;transform:rotate(45deg)}
.icon-quality-mini:before{width:18px;height:21px;left:11px;top:9px;background:currentColor;clip-path:polygon(50% 0,100% 18%,90% 70%,50% 100%,10% 70%,0 18%)}.icon-quality-mini:after{width:9px;height:12px;left:15px;top:13px;background:#fff;clip-path:polygon(50% 0,100% 18%,88% 68%,50% 100%,12% 68%,0 18%)}
.icon-transfer-mini:before{width:20px;height:2px;left:10px;top:20px;background:currentColor}.icon-transfer-mini:after{width:9px;height:9px;left:20px;top:15px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.be-card-icon{display:block;width:28px;height:28px;flex:0 0 28px;color:#1768fa}.be-card-core:before{width:17px;height:17px;left:5px;top:5px;border:2px solid currentColor;transform:rotate(45deg)}.be-card-performance:before{width:6px;height:8px;left:3px;top:17px;background:currentColor;box-shadow:8px -6px 0 currentColor,16px -15px 0 currentColor}.be-card-performance:after{width:22px;height:15px;left:3px;top:5px;border-top:2px solid currentColor;transform:rotate(-27deg)}
.be-card-cloud:before{width:18px;height:9px;left:6px;top:13px;border-radius:8px;background:currentColor;box-shadow:-3px 2px 0 -1px currentColor,4px -4px 0 -1px currentColor}.be-card-cloud:after{width:21px;height:4px;left:4px;top:19px;border-radius:4px;background:currentColor}
.be-card-operations:before{width:21px;height:21px;left:3px;top:3px;border:3px solid currentColor;border-radius:50%;background:repeating-conic-gradient(currentColor 0 8deg,transparent 8deg 45deg)}.be-card-operations:after{width:7px;height:7px;left:10px;top:10px;border:2px solid currentColor;border-radius:50%;background:#fff}
.choice-title:before{content:"";display:inline-block;width:8px;height:8px;margin:0 9px 1px 2px;border:2px solid currentColor;transform:rotate(45deg)}
.ai-float-pattern{display:block!important;width:70px;height:24px;margin-top:7px!important}.data-pattern:before{width:16px;height:16px;left:4px;top:4px;border:2px solid currentColor;box-shadow:23px 0 0 -2px transparent,23px 0 0 0 currentColor,46px 0 0 -2px transparent,46px 0 0 0 currentColor}.approval-pattern:before{width:12px;height:12px;left:13px;top:6px;border-radius:50%;background:currentColor}.approval-pattern:after{width:18px;height:10px;left:40px;top:4px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(-45deg)}.report-pattern:before{width:4px;height:8px;left:14px;bottom:3px;background:currentColor;box-shadow:10px -5px 0 currentColor,20px -11px 0 currentColor,30px -17px 0 currentColor}.report-pattern:after{width:50px;height:2px;left:10px;bottom:2px;background:currentColor}

/* Final typography pass: keep supporting copy readable across service pages. */
.design-solution-card p,.design-problem-grid p,.design-values p,.design-steps p,.design-delivery-grid p,.design-engagement-grid p,.ext-card p,.ext-step-grid p,.ext-band-grid p,.ext-small-grid p,.ext-plan-title p{font-size:11.5px;line-height:1.62}
.design-principles p,.design-tags span,.design-delivery-grid h3,.ext-principles b,.ext-small-grid h3{font-size:10.5px}
.be-service-grid p,.be-problems p,.be-value p,.be-process p{font-size:11.5px;line-height:1.55}.be-service-grid h3,.be-problems h3,.be-process h3{font-size:13px}.be-heading p,.be-choice>div>p,.be-architecture p{font-size:13px}.be-choice ul{font-size:11.5px}
.ai-use-card p,.ai-timeline p,.ai-value-grid p,.ai-deep-steps p{font-size:11.5px}.ai-use-card h3,.ai-value-grid h3,.ai-deep-steps h3{font-size:13px}