@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #071429;
  --muted: #647085;
  --line: rgba(17, 31, 63, 0.12);
  --paper: #ffffff;
  --mist: #f6f8ff;
  --blue: #1528f7;
  --blue-dark: #0718b8;
  --violet: #8b22d6;
  --orange: #ff6413;
  --shadow: 0 24px 70px rgba(7, 20, 41, 0.12);
  font-family: "Plus Jakarta Sans", "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 22px;
  font-size: clamp(2.35rem, 5.2vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: 0;
}
h2 {
  margin-bottom: 16px;
  font-size: clamp(1.75rem, 3.4vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: 0;
}
h3 { margin-bottom: 8px; font-size: 1.06rem; }
p { color: var(--muted); font-size: 0.98rem; line-height: 1.68; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(21, 40, 247, 0.1);
  background:
    radial-gradient(circle at 18% -80%, rgba(21, 40, 247, 0.18), transparent 24rem),
    radial-gradient(circle at 82% -100%, rgba(255, 100, 19, 0.14), transparent 22rem),
    rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 34px rgba(7, 20, 41, 0.07);
  backdrop-filter: blur(20px) saturate(140%);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--violet) 62%, var(--orange) 100%);
}
.nav {
  width: min(1180px, calc(100% - 36px));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  position: relative;
  padding: 6px 10px;
  border-radius: 12px;
  transition: background 180ms ease, transform 180ms ease;
}
.brand:hover {
  background: rgba(255, 255, 255, 0.68);
  transform: translateY(-1px);
}
.brand { width: 140px; }
.brand img { width: 100%; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(21, 40, 247, 0.09);
  border-radius: 999px;
  color: #23304a;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(7, 20, 41, 0.05);
  font-size: 0.88rem;
  font-weight: 750;
}
.nav-menu a {
  position: relative;
  isolation: isolate;
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 220ms ease, background 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
}
.nav-menu a::before {
  content: "";
  position: absolute;
  inset: 4px 8px -7px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(21, 40, 247, 0.32), rgba(139, 34, 214, 0.3), rgba(255, 100, 19, 0.28));
  filter: blur(10px);
  opacity: 0;
  transform: translateY(5px) scale(0.76);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-menu a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 4px;
  left: 50%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--violet), var(--orange));
  opacity: 0;
  transition: left 240ms ease, right 240ms ease, opacity 180ms ease;
}
.nav-menu a:hover {
  color: var(--blue-dark);
  background: rgba(21, 40, 247, 0.07);
}
.nav-menu a.active {
  color: #ffffff;
  background: linear-gradient(110deg, var(--blue) 0%, var(--violet) 68%, var(--orange) 130%);
  box-shadow: 0 8px 20px rgba(21, 40, 247, 0.22);
}
@media (hover: hover) and (pointer: fine) {
  .nav-menu a:hover {
    transform: translateY(-4px) scale(1.025);
    box-shadow: 0 10px 20px rgba(21, 40, 247, 0.11);
  }
  .nav-menu a:hover::before {
    opacity: 1;
    transform: translateY(5px) scale(1);
  }
  .nav-menu a:hover::after {
    right: 18%;
    left: 18%;
    opacity: 1;
  }
  .nav-menu a.active:hover {
    color: #fff;
    box-shadow: 0 12px 26px rgba(21, 40, 247, 0.3);
  }
  .nav-menu a.active:hover::after {
    background: rgba(255, 255, 255, 0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu a,
  .nav-menu a::before,
  .nav-menu a::after { transition: none; }
}
.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 3px;
  border: 1px solid rgba(21, 40, 247, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}
.language-option {
  min-width: 36px;
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #34415c;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.language-option:hover {
  color: var(--blue-dark);
  background: rgba(21, 40, 247, 0.07);
}
.language-option.is-active {
  color: white;
  background: linear-gradient(110deg, var(--blue), var(--violet) 72%, var(--orange));
  box-shadow: 0 6px 16px rgba(21, 40, 247, 0.18);
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 11px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--ink);
  transition: transform 180ms ease, opacity 180ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.section-inner {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 76px 0;
}
.eyebrow {
  margin-bottom: 16px;
  color: var(--blue);
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 20px;
  font-weight: 850;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary {
  color: white;
  background: linear-gradient(95deg, var(--blue), var(--violet) 56%, var(--orange));
  box-shadow: 0 18px 36px rgba(21, 40, 247, 0.22);
}
.btn.ghost {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.hero, .subpage-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(21, 40, 247, 0.12), transparent 24rem),
    radial-gradient(circle at 92% 16%, rgba(255, 100, 19, 0.13), transparent 24rem),
    linear-gradient(115deg, #fff 0%, #f6f8ff 58%, #fff4ee 100%);
}
.hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 34%, rgba(246, 248, 255, 0.56) 62%, rgba(255, 255, 255, 0.12) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(246, 248, 255, 0.44)),
    url("assets/hero-travel-oilgas.png") center right / cover no-repeat;
}
.hero::before, .subpage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(21, 40, 247, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 40, 247, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 82%);
}
.page-hero .section-inner, .subpage-hero .section-inner { position: relative; z-index: 2; }
.hero-grid {
  width: min(1060px, calc(100% - 36px));
  min-height: calc(82vh - 78px);
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(380px, 0.68fr);
  align-items: center;
  gap: 42px;
}
.hero-copy h1 {
  position: relative;
  z-index: 2;
  display: block;
  font-size: clamp(2rem, 4.25vw, 4.1rem);
  font-weight: 800;
  line-height: 1.26;
  margin-bottom: 28px;
  padding-bottom: 0.18em;
  overflow: visible;
  color: #0b1f4d;
  background: linear-gradient(108deg, #071429 0%, #1528f7 45%, #8b22d6 72%, #ff6413 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-copy p:not(.eyebrow) {
  position: relative;
  z-index: 1;
  font-weight: 500;
}
.hero-copy p:not(.eyebrow) { max-width: 600px; font-size: 1.12rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero-visual {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
}
.connection-visual {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 15 / 13;
}
.connection-visual::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border: 1px solid rgba(21, 40, 247, 0.08);
  border-radius: 50%;
  transform: rotate(-8deg);
  transition: opacity 420ms ease;
}
.connection-canvas {
  position: absolute;
  z-index: 2;
  inset: -7%;
  width: 114%;
  height: 114%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms ease;
}
.connection-map {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 420ms ease;
}
.connection-visual.three-ready::before { opacity: 0; }
.connection-visual.three-ready .connection-canvas { opacity: 1; }
.connection-visual.three-ready .connection-map { opacity: 0; }
.network-ring {
  fill: none;
  stroke: rgba(21, 40, 247, 0.11);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-origin: 300px 260px;
}
.ring-outer { stroke-dasharray: 2 11; animation: ringRotate 24s linear infinite; }
.ring-inner { stroke: rgba(139, 34, 214, 0.13); stroke-dasharray: 26 12; animation: ringRotate 20s linear infinite reverse; }
.network-route {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.route-base { stroke: rgba(31, 38, 68, 0.11); stroke-width: 1; }
.route-flow {
  stroke-width: 2;
  stroke-dasharray: 18 34;
  animation: routeFlow 8s linear infinite;
}
.route-blue { stroke: url(#route-blue); }
.route-warm { stroke: url(#route-warm); animation-delay: -2.7s; }
.route-violet { stroke: rgba(139, 34, 214, 0.52); animation-delay: -5.4s; }
.route-particle {
  filter: drop-shadow(0 0 5px currentColor);
  opacity: 0.92;
}
.particle-blue { color: var(--blue); fill: var(--blue); }
.particle-warm { color: var(--orange); fill: var(--orange); }
.particle-violet { color: var(--violet); fill: var(--violet); }
.core-halo {
  fill: rgba(255, 255, 255, 0.28);
  stroke: rgba(21, 40, 247, 0.11);
  stroke-width: 1;
}
.core-ring {
  fill: url(#node-core);
  stroke: rgba(21, 40, 247, 0.2);
  stroke-width: 1;
  filter: drop-shadow(0 18px 28px rgba(21, 40, 247, 0.13));
}
.core-dot { fill: var(--blue); }
.network-core { transform-origin: 303px 257px; animation: coreBreathe 3.8s ease-in-out infinite; }
.node-halo { fill: rgba(255, 255, 255, 0.74); stroke: rgba(21, 40, 247, 0.16); stroke-width: 1; }
.node-dot { fill: var(--blue); }
.node-two .node-dot { fill: var(--violet); }
.node-three .node-dot, .node-four .node-dot { fill: var(--orange); }
.network-node { animation: nodePulse 3.2s ease-in-out infinite; }
.node-two { animation-delay: -1s; }
.node-three { animation-delay: -2s; }
.node-four { animation-delay: -3s; }

.section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 8%, rgba(21, 40, 247, 0.055), transparent 24rem),
    radial-gradient(circle at 90% 18%, rgba(255, 100, 19, 0.06), transparent 22rem),
    linear-gradient(135deg, #ffffff 0%, #f8faff 58%, #fff7f2 100%);
}
#linh-vuc {
  background:
    radial-gradient(circle at 8% 18%, rgba(55, 87, 244, 0.13), transparent 24rem),
    radial-gradient(circle at 92% 72%, rgba(139, 34, 214, 0.09), transparent 25rem),
    linear-gradient(145deg, #eef3ff 0%, #f8faff 52%, #f3efff 100%);
}
#linh-vuc .section-inner,
.why-section .section-inner {
  width: min(1040px, calc(100% - 56px));
  padding-top: 64px;
  padding-bottom: 64px;
}
#linh-vuc::after,
.home-contact::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -170px;
  top: -170px;
  border: 1px solid rgba(21, 40, 247, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(21, 40, 247, 0.025), 0 0 0 108px rgba(139, 34, 214, 0.02);
  pointer-events: none;
}
.section.soft {
  background:
    radial-gradient(circle at 84% 14%, rgba(21, 40, 247, 0.07), transparent 26rem),
    radial-gradient(circle at 14% 78%, rgba(139, 34, 214, 0.05), transparent 22rem),
    linear-gradient(135deg, #f7f9ff 0%, #ffffff 62%, #fff5ef 100%);
}
.section .section-inner {
  position: relative;
  z-index: 1;
}
.section-heading {
  max-width: 760px;
  margin-bottom: 72px;
}
#linh-vuc .section-heading,
.why-section .section-heading {
  max-width: 680px;
  margin-bottom: 50px;
}
.section-heading h2,
.home-contact h2 {
  display: block;
  margin-bottom: 0;
  color: #0b1f4d;
  background: linear-gradient(108deg, #071429 0%, #1528f7 45%, #8b22d6 72%, #ff6413 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.service-card {
  min-height: 278px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 14px 22px;
  background: white;
  box-shadow: 0 18px 44px rgba(7, 20, 41, 0.07);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.service-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--mist);
}
.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}
.service-card h3,
.service-card p {
  margin-left: 10px;
  margin-right: 10px;
}
.service-card:hover,
.service-card.reveal.is-visible:hover {
  transform: translateY(-9px);
  border-color: rgba(21, 40, 247, 0.24);
  box-shadow: 0 30px 70px rgba(7, 20, 41, 0.14);
}
.service-card:hover .service-image img,
.service-card.reveal.is-visible:hover .service-image img {
  transform: scale(1.045);
}
.why-section {
  background:
    linear-gradient(rgba(21, 40, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 40, 247, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 10% 16%, rgba(39, 72, 242, 0.22), transparent 26rem),
    radial-gradient(circle at 88% 76%, rgba(139, 34, 214, 0.18), transparent 25rem),
    linear-gradient(135deg, #e8efff 0%, #f7f9ff 48%, #eee5ff 100%);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
  border-top-color: var(--line);
}
.why-section .eyebrow { color: var(--blue); }
.why-section .section-heading h2 {
  color: #0b1f4d;
  background: linear-gradient(108deg, #071429 0%, #1528f7 45%, #8b22d6 72%, #ff6413 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.why-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.why-list.why-list-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) {
  .why-list.why-list-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .why-list.why-list-5 { grid-template-columns: 1fr; }
}
.why-item {
  min-height: 248px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 22px;
  border: 1px solid rgba(21, 40, 247, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(7, 20, 41, 0.08);
  box-shadow: 0 18px 44px rgba(7, 20, 41, 0.07);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.why-icon {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(21, 40, 247, 0.08);
  transition: transform 220ms ease, background 220ms ease;
}
.why-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-item:nth-child(3) .why-icon {
  background: rgba(139, 34, 214, 0.09);
}
.why-item:nth-child(3) .why-icon svg {
  stroke: var(--violet);
}
.why-item:nth-child(4) .why-icon {
  background: rgba(255, 100, 19, 0.1);
}
.why-item:nth-child(4) .why-icon svg {
  stroke: var(--orange);
}
.why-item:hover,
.why-item.reveal.is-visible:hover {
  transform: translateY(-9px);
  border-color: rgba(21, 40, 247, 0.24);
  box-shadow: 0 30px 70px rgba(7, 20, 41, 0.14);
}
.why-item:hover .why-icon,
.why-item.reveal.is-visible:hover .why-icon {
  transform: translateY(-3px) scale(1.04);
}
.why-item h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 700;
}
.why-item p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}
.info-list article, .contact-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 44px rgba(7, 20, 41, 0.07);
}

.subpage-grid, .contact-page-grid {
  min-height: calc(72vh - 78px);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(360px, 0.75fr);
  align-items: center;
  gap: 60px;
}
.subpage-grid h1, .contact-page-grid h1 { max-width: 720px; }
.subpage-grid p:not(.eyebrow), .contact-page-grid p:not(.eyebrow) { max-width: 560px; font-size: 1.04rem; }
.subpage-grid h1, .contact-page-grid h1 {
  color: #0b1f4d;
  background: linear-gradient(108deg, #071429 0%, #1528f7 45%, #8b22d6 72%, #ff6413 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.travel-page-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.66) 34%, rgba(249, 250, 255, 0.94) 52%, #ffffff 64%, #ffffff 100%),
    linear-gradient(180deg, rgba(236, 247, 255, 0.05), rgba(241, 246, 255, 0.3)),
    url("assets/travel-hero-busan-beach.webp") left 64% / 58% auto no-repeat,
    linear-gradient(115deg, #e8f7ff, #f7f9ff 58%, #ffffff);
}
.travel-page-hero .subpage-grid {
  min-height: calc(56vh - 78px);
  padding-top: 18px;
  padding-bottom: 18px;
}
.travel-page-hero .subpage-grid > * {
  min-width: 0;
}
.travel-page-hero .subpage-grid h1 {
  display: inline-block;
  max-width: 620px;
  margin-bottom: 22px;
  padding-bottom: 0.18em;
  font-size: clamp(2.15rem, 4.25vw, 4.05rem);
  line-height: 1.16;
  overflow: visible;
}
.travel-page-hero .subpage-grid p:not(.eyebrow) {
  position: relative;
  z-index: 1;
  max-width: 610px;
  margin-top: 0;
  margin-bottom: 28px;
  background: transparent;
}
.travel-brand-lockup {
  width: 178px;
  max-width: 48vw;
  margin-bottom: 24px;
}
.travel-brand-lockup img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(80, 28, 170, 0.13));
}
.travel-motion {
  position: relative;
  isolation: isolate;
  justify-self: end;
  width: min(100%, 490px);
  aspect-ratio: 520 / 420;
}
.travel-motion-glow {
  position: absolute;
  inset: 12% 4% 3% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 34, 214, 0.25), rgba(21, 40, 247, 0.08) 48%, transparent 72%);
  filter: blur(18px);
  animation: travelGlow 5s ease-in-out infinite;
}
.travel-flight-route {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.travel-route-base,
.travel-route-flow {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.travel-route-base {
  stroke: rgba(255, 255, 255, 0.52);
  stroke-width: 1.2;
  stroke-dasharray: 3 8;
}
.travel-route-flow {
  stroke: url(#travel-route-gradient);
  stroke-width: 2.4;
  stroke-dasharray: 22 34;
  animation: travelRouteFlow 7s linear infinite;
}
.travel-route-node {
  fill: #fff;
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
}
.travel-route-node.node-start { stroke: rgba(21, 40, 247, 0.38); }
.travel-route-node.node-end { stroke: rgba(255, 100, 19, 0.42); }
.travel-plane {
  filter: drop-shadow(0 4px 7px rgba(59, 24, 136, 0.42));
}
.travel-plane-shape {
  fill: var(--violet);
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 0.8;
}
.travel-passport-card {
  position: absolute;
  left: 0;
  top: 17%;
  width: 37%;
  height: 64%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 25px 22px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 16px;
  color: #f7cf74;
  background:
    radial-gradient(circle at 76% 18%, rgba(204, 76, 177, 0.46), transparent 9rem),
    linear-gradient(145deg, #272065, #592475 66%, #7d285f);
  box-shadow: inset 10px 0 18px rgba(9, 7, 43, 0.2), 0 30px 70px rgba(20, 21, 73, 0.3);
  transform: rotate(-4deg);
  animation: travelPassportFloat 6.4s ease-in-out infinite;
}
.travel-passport-card::before,
.travel-passport-card::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}
.travel-passport-card::before { width: 76%; aspect-ratio: 1; }
.travel-passport-card::after { width: 54%; aspect-ratio: 1; }
.passport-title {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}
.passport-emblem {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  fill: none;
  stroke: #f7cf74;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.travel-passport-card small {
  position: relative;
  z-index: 1;
  color: rgba(255, 226, 157, 0.76);
  font-size: 0.54rem;
  font-weight: 750;
  letter-spacing: 0.13em;
}
.travel-ticket-card {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 31%;
  width: 58%;
  min-height: 45%;
  padding: 20px 22px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 18px;
  color: #121b36;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 26px 66px rgba(7, 20, 41, 0.24);
  backdrop-filter: blur(18px) saturate(135%);
  transform: rotate(2.2deg);
  animation: travelTicketFloat 5.8s ease-in-out infinite;
}
.travel-ticket-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--violet) 62%, var(--orange));
}
.ticket-kicker,
.ticket-route,
.ticket-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ticket-kicker {
  color: #69738a;
  font-size: 0.57rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.ticket-kicker strong { color: var(--violet); }
.ticket-route { margin: 14px 0 13px; }
.ticket-route span {
  display: flex;
  flex-direction: column;
  color: #111d38;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}
.ticket-route span:last-child { align-items: flex-end; }
.ticket-route small {
  margin-top: 5px;
  color: #758096;
  font-size: 0.58rem;
  font-weight: 650;
}
.ticket-route b {
  color: var(--violet);
  font-size: 1.25rem;
}
.ticket-meta {
  padding-top: 12px;
  border-top: 1px dashed rgba(17, 31, 63, 0.16);
}
.ticket-meta span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #8490a5;
  font-size: 0.5rem;
  font-weight: 750;
}
.ticket-meta strong { color: #26324b; font-size: 0.66rem; }
.ticket-barcode {
  height: 14px;
  margin-top: 12px;
  opacity: 0.48;
  background: repeating-linear-gradient(90deg, #17233c 0 2px, transparent 2px 5px, #17233c 5px 6px, transparent 6px 9px);
}
.travel-visa-badge,
.travel-eticket-chip {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 44px rgba(7, 20, 41, 0.2);
  backdrop-filter: blur(16px);
}
.travel-visa-badge {
  right: -1%;
  bottom: 8%;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  animation: travelBadgeFloat 5.2s ease-in-out infinite;
}
.visa-check {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--orange));
  font-size: 1rem;
  font-weight: 900;
}
.travel-visa-badge > span:last-child { display: flex; flex-direction: column; }
.travel-visa-badge strong { color: #2a3150; font-size: 0.78rem; letter-spacing: 0.08em; }
.travel-visa-badge small { color: #748096; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.12em; }
.travel-eticket-chip {
  top: 9%;
  right: 3%;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 999px;
  color: #25304a;
  font-size: 0.7rem;
  animation: travelBadgeFloat 5.8s ease-in-out -2.1s infinite;
}
.travel-eticket-chip span { color: var(--violet); font-size: 0.94rem; }
.travel-services-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(21, 40, 247, 0.09), transparent 24rem),
    radial-gradient(circle at 92% 82%, rgba(255, 100, 19, 0.1), transparent 22rem),
    linear-gradient(135deg, #f7f9ff, #ffffff 54%, #fff8f3);
}
.travel-services-heading {
  max-width: 780px;
  margin-bottom: 42px;
}
.travel-services-heading h2 { margin-bottom: 0; }
.travel-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.travel-service-card {
  --card-accent: var(--blue);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(21, 40, 247, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 54px rgba(7, 20, 41, 0.1);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.travel-service-card:nth-child(2) { --card-accent: var(--violet); }
.travel-service-card:nth-child(3) { --card-accent: var(--orange); }
.travel-service-card:hover,
.travel-service-card.reveal.is-visible:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--card-accent) 34%, transparent);
  box-shadow: 0 30px 70px rgba(7, 20, 41, 0.16);
}
.travel-service-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #edf1fa;
}
.travel-service-media::after {
  content: "";
  position: absolute;
  inset: 46% 0 0;
  background: linear-gradient(180deg, transparent, rgba(7, 20, 41, 0.32));
}
.travel-service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.travel-service-card:hover .travel-service-media img { transform: scale(1.045); }
.oilgas-media-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eef2ff, #f4f8ff 55%, #fdeee2);
  color: #1528f7;
}
.travel-service-card:nth-child(2) .oilgas-media-placeholder { color: #8b22d6; }
.travel-service-card:nth-child(3) .oilgas-media-placeholder { color: #ff6413; }
.travel-service-media > span {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 16px;
  min-width: 44px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--card-accent) 78%, rgba(7, 20, 41, 0.35));
  box-shadow: 0 8px 22px rgba(7, 20, 41, 0.2);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
}
.travel-service-body {
  position: relative;
  min-height: 138px;
  padding: 23px 22px 25px;
}
.travel-service-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--card-accent), transparent);
}
.travel-service-body h3 {
  margin-bottom: 9px;
  color: var(--ink);
  font-size: 1.22rem;
}
.travel-service-body p { margin-bottom: 0; }
.travel-gallery-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 12%, rgba(139, 34, 214, 0.09), transparent 24rem),
    radial-gradient(circle at 6% 88%, rgba(21, 40, 247, 0.08), transparent 22rem),
    linear-gradient(135deg, #fbfaff, #ffffff 54%, #f5f8ff);
}
.travel-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.travel-gallery-card {
  overflow: hidden;
  border: 1px solid rgba(21, 40, 247, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 54px rgba(7, 20, 41, 0.1);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.travel-gallery-card:hover,
.travel-gallery-card.reveal.is-visible:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--blue) 34%, transparent);
  box-shadow: 0 30px 70px rgba(7, 20, 41, 0.16);
}
.travel-gallery-card video,
.travel-gallery-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b1220;
  object-fit: cover;
  border: 0;
}
.travel-gallery-caption {
  padding: 18px 20px 22px;
}
.travel-gallery-caption h3 {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 1.1rem;
}
.travel-gallery-caption p { margin-bottom: 0; }
.visual-panel {
  min-height: 360px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.visual-panel span {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
  color: var(--blue-dark);
  font-weight: 900;
  backdrop-filter: blur(18px);
}
.travel-theme { background: linear-gradient(135deg, #fff, #eef5ff 58%, #fff6ef); }
.supplies-theme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(246, 248, 255, 0.98) 0%, rgba(246, 248, 255, 0.93) 30%, rgba(246, 248, 255, 0.48) 52%, rgba(7, 20, 41, 0.08) 100%),
    url("assets/office-solutions-hero-bg.png") center / cover no-repeat;
}
.supplies-theme::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(7, 20, 41, 0.14));
  pointer-events: none;
}
.supplies-theme .subpage-grid {
  grid-template-columns: minmax(0, 720px);
  min-height: calc(72vh - 78px);
}
.supplies-theme .subpage-grid > .reveal {
  padding: 38px 0;
}
.supplies-theme .subpage-grid h1 {
  max-width: 640px;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.18;
}
.oilgas-theme {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 42%, rgba(255, 250, 246, 0.76) 100%),
    radial-gradient(circle at 84% 18%, rgba(255, 100, 19, 0.12), transparent 24rem),
    radial-gradient(circle at 64% 76%, rgba(21, 40, 247, 0.08), transparent 26rem),
    radial-gradient(circle at 18% 18%, rgba(139, 34, 214, 0.06), transparent 22rem),
    linear-gradient(135deg, #fff, #f4f8ff 50%, #fff6ef);
}
.oilgas-theme::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(160deg, transparent 0 18%, rgba(255, 100, 19, 0.16) 18% 18.22%, transparent 18.22% 42%, rgba(21, 40, 247, 0.1) 42% 42.18%, transparent 42.18% 68%, rgba(255, 100, 19, 0.1) 68% 68.18%, transparent 68.18%),
    linear-gradient(175deg, transparent 0 28%, rgba(7, 20, 41, 0.06) 28% 28.16%, transparent 28.16% 62%, rgba(139, 34, 214, 0.08) 62% 62.16%, transparent 62.16%),
    linear-gradient(rgba(21, 40, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 100, 19, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 86px 86px, 86px 86px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
}
.oilgas-theme::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  pointer-events: none;
  opacity: 0.22;
  background:
    linear-gradient(165deg, transparent 0 15%, rgba(255, 100, 19, 0.22) 15% 15.35%, transparent 15.35% 35%, rgba(21, 40, 247, 0.18) 35% 35.3%, transparent 35.3% 62%, rgba(139, 34, 214, 0.14) 62% 62.28%, transparent 62.28%),
    linear-gradient(175deg, transparent 0 26%, rgba(7, 20, 41, 0.08) 26% 26.2%, transparent 26.2% 58%, rgba(255, 100, 19, 0.12) 58% 58.2%, transparent 58.2%);
}
.oilgas-theme .subpage-grid h1 {
  max-width: 640px;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.22;
  padding-bottom: 0.12em;
}
.oilgas-bridge {
  position: relative;
  justify-self: end;
  width: min(100%, 520px);
  min-height: 440px;
  overflow: visible;
}
.oilgas-bridge::before {
  content: "";
  position: absolute;
  inset: 14% 10%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.62;
  background:
    radial-gradient(circle, rgba(255, 100, 19, 0.13), transparent 58%),
    radial-gradient(circle, rgba(21, 40, 247, 0.08), transparent 70%);
  filter: blur(2px);
}
.oilgas-bridge::after {
  content: "";
  position: absolute;
  inset: 18% 12%;
  pointer-events: none;
  opacity: 0.34;
  border: 1px dashed rgba(255, 100, 19, 0.36);
  border-radius: 50%;
}
.oilgas-bridge-map {
  display: none;
}
.bridge-core,
.bridge-node {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 42px rgba(7, 20, 41, 0.11);
  backdrop-filter: blur(16px);
}
.bridge-core {
  left: 50%;
  top: 50%;
  width: 178px;
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-radius: 22px;
  text-align: center;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #1528f7, #8b22d6 64%, #ff6413);
  color: white;
  box-shadow: 0 24px 54px rgba(21, 40, 247, 0.24);
}
.bridge-core span {
  font-size: 1.28rem;
  font-weight: 900;
}
.bridge-core strong,
.bridge-node strong {
  display: block;
  line-height: 1.35;
}
.bridge-core strong {
  max-width: 130px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
}
.bridge-node {
  width: 170px;
  padding: 14px 16px;
  border-radius: 16px;
  will-change: transform;
}
.bridge-node span {
  display: block;
  margin-bottom: 4px;
  color: var(--orange);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bridge-node strong {
  color: #13213a;
  font-size: 0.92rem;
}
.node-expert { left: 0; top: 32px; animation: oilgas-orbit-a 10s ease-in-out infinite; }
.node-data { right: 0; top: 54px; animation: oilgas-orbit-b 11.5s ease-in-out infinite; }
.node-solution { left: 6px; bottom: 44px; animation: oilgas-orbit-c 12.5s ease-in-out infinite; }
.node-report { right: 0; bottom: 34px; animation: oilgas-orbit-d 10.8s ease-in-out infinite; }
@keyframes oilgas-orbit-a {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(44px, 6px); }
  50% { transform: translate(34px, 280px); }
  75% { transform: translate(6px, 210px); }
}
@keyframes oilgas-orbit-b {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-42px, 4px); }
  50% { transform: translate(-32px, 250px); }
  75% { transform: translate(-4px, 176px); }
}
@keyframes oilgas-orbit-c {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(42px, -6px); }
  50% { transform: translate(30px, -258px); }
  75% { transform: translate(4px, -182px); }
}
@keyframes oilgas-orbit-d {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-42px, -4px); }
  50% { transform: translate(-32px, -272px); }
  75% { transform: translate(-4px, -190px); }
}
.digital-theme {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 38%, rgba(238, 242, 255, 0.3) 62%, rgba(238, 242, 255, 0.15) 100%),
    url("assets/ChatGPT Image Aug 22, 2026, 07_06_47 PM.png") right center / cover no-repeat,
    linear-gradient(135deg, #fff, #f4f8ff 50%, #eef2ff);
}
.digital-theme .subpage-grid { grid-template-columns: 1fr; }
.digital-theme .digital-hero-content { max-width: 640px; }
.digital-theme .subpage-grid h1 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1.22;
  padding-bottom: 0.12em;
}
@media (max-width: 620px) {
  .digital-theme .subpage-grid h1 { white-space: normal; font-size: clamp(1.5rem, 6vw, 2.1rem); }
}
.digital-theme .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Nexus flow (Home) */
.nexus-flow-section .section-inner { width: min(1040px, calc(100% - 36px)); }
.nexus-flow-section .section-heading p:not(.eyebrow) { max-width: 640px; }
.nexus-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 12px;
}
.nexus-node {
  flex: 1 1 120px;
  min-width: 0;
  padding: 20px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 36px rgba(7, 20, 41, 0.07);
  text-align: center;
  animation: nexus-node-bob 5s ease-in-out infinite;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.nexus-node:nth-child(2n) { animation-delay: -1.6s; }
.nexus-node:nth-child(3n) { animation-delay: -3.2s; }
.nexus-node:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 52px rgba(7, 20, 41, 0.14);
  border-color: rgba(21, 40, 247, 0.28);
  animation-play-state: paused;
}
.nexus-node-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(21, 40, 247, 0.08);
}
.nexus-node-icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--blue);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nexus-node h3 { font-size: 0.92rem; margin-bottom: 6px; }
.nexus-node p { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.nexus-hub {
  flex: 1.15 1 150px;
  background: linear-gradient(150deg, #1528f7, #8b22d6);
  border: none;
  box-shadow: 0 22px 48px rgba(21, 40, 247, 0.28);
  color: white;
  animation: nexus-hub-pulse 3.2s ease-in-out infinite;
}
.nexus-hub .nexus-node-icon { background: rgba(255, 255, 255, 0.16); }
.nexus-hub .nexus-node-icon svg { stroke: white; }
.nexus-hub h3 { color: white; }
.nexus-hub p { color: rgba(255, 255, 255, 0.82); }
.nexus-hub:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 30px 60px rgba(21, 40, 247, 0.36);
}
.nexus-arrow {
  flex: none;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.1rem;
}
@keyframes nexus-node-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes nexus-hub-pulse {
  0%, 100% { box-shadow: 0 22px 48px rgba(21, 40, 247, 0.28); }
  50% { box-shadow: 0 26px 58px rgba(139, 34, 214, 0.36); }
}
@media (max-width: 960px) {
  .nexus-flow { flex-direction: column; }
  .nexus-arrow { transform: rotate(90deg); align-self: center; }
  .nexus-hub { flex: 1; }
}

/* Flow steps (data journey) */
.flow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 18px;
}
.flow-steps::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 38px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(21, 40, 247, 0.28), rgba(139, 34, 214, 0.24), rgba(255, 100, 19, 0.28));
}
.flow-step {
  position: relative;
  min-width: 0;
}
.flow-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 247, 241, 0.82)),
    radial-gradient(circle at 14% 18%, rgba(21, 40, 247, 0.12), transparent 22rem),
    radial-gradient(circle at 88% 28%, rgba(255, 100, 19, 0.12), transparent 22rem),
    url("assets/flow-section-bg.png") center / cover no-repeat;
  border-radius: 22px;
  padding: 54px 0;
}
.flow-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(21, 40, 247, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 100, 19, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
}
.flow-section .section-inner {
  position: relative;
  z-index: 1;
}
.flow-index {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  margin: 0 auto -18px;
  display: grid;
  place-items: center;
  border: 8px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: 0 16px 34px rgba(21, 40, 247, 0.24);
  font-weight: 900;
}
.flow-step-card {
  min-height: 218px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 42px 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(21, 40, 247, 0.1);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px rgba(7, 20, 41, 0.08);
  text-align: left;
  backdrop-filter: blur(16px);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.flow-step:nth-child(2) .flow-index { background: linear-gradient(135deg, var(--violet), #c04fef); box-shadow: 0 16px 34px rgba(139, 34, 214, 0.22); }
.flow-step:nth-child(3) .flow-index { background: linear-gradient(135deg, var(--orange), #ff9a4d); box-shadow: 0 16px 34px rgba(255, 100, 19, 0.24); }
.flow-step:nth-child(4) .flow-index { background: linear-gradient(135deg, #0ea5c4, #37d0d9); }
.flow-step:nth-child(5) .flow-index { background: linear-gradient(135deg, #d6228f, #ff6bb0); }
.flow-step:nth-child(6) .flow-index { background: linear-gradient(135deg, #1fa15a, #4fd583); }
.flow-step-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 100, 19, 0.24);
  box-shadow: 0 28px 58px rgba(7, 20, 41, 0.13);
}
.flow-step-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
}
.flow-step-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.58;
}
@media (max-width: 860px) {
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .flow-steps::before { display: none; }
}
@media (max-width: 620px) {
  .flow-steps { grid-template-columns: 1fr; }
  .flow-step-card { min-height: auto; }
}

.capability6-section {
  background:
    linear-gradient(135deg, rgba(3, 10, 33, 0.82), rgba(3, 10, 33, 0.7)),
    url("assets/6 nang luc chinh.png") center / cover no-repeat;
  border-radius: 22px;
  padding: 54px 32px;
}
.capability6-section .eyebrow { color: rgba(255, 255, 255, 0.65); }
.capability6-section h2 { color: white; background: none; -webkit-text-fill-color: white; }
.capability6-section .capability-card6 {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.capability6-section .capability-card6 h3 { color: white; }
.capability6-section .capability-card6 > p { color: rgba(255, 255, 255, 0.72); }
.capability6-section .capability-card6-tags li { background: rgba(255, 255, 255, 0.12); color: white; }
@media (max-width: 620px) {
  .capability6-section { padding: 36px 20px; }
}

/* 6 capability cards */
.capability-grid6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.capability-card6 {
  padding: 26px 24px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 44px rgba(7, 20, 41, 0.07);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.capability-card6:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(7, 20, 41, 0.12); }
.capability-card6-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 16px;
  background: rgba(21, 40, 247, 0.08);
}
.capability-card6-icon svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--blue);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.capability-card6:nth-child(2) .capability-card6-icon { background: rgba(139, 34, 214, 0.09); }
.capability-card6:nth-child(2) .capability-card6-icon svg { stroke: var(--violet); }
.capability-card6:nth-child(3) .capability-card6-icon { background: rgba(255, 100, 19, 0.1); }
.capability-card6:nth-child(3) .capability-card6-icon svg { stroke: var(--orange); }
.capability-card6:nth-child(4) .capability-card6-icon { background: rgba(21, 40, 247, 0.08); }
.capability-card6:nth-child(5) .capability-card6-icon { background: rgba(139, 34, 214, 0.09); }
.capability-card6:nth-child(5) .capability-card6-icon svg { stroke: var(--violet); }
.capability-card6:nth-child(6) .capability-card6-icon { background: rgba(255, 100, 19, 0.1); }
.capability-card6:nth-child(6) .capability-card6-icon svg { stroke: var(--orange); }
.capability-card6 h3 { margin-bottom: 8px; font-size: 1.14rem; }
.capability-card6 > p { margin-bottom: 12px; color: var(--muted); font-size: 0.96rem; }
.capability-card6-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.capability-card6-tags li {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(21, 40, 247, 0.07);
  border-radius: 999px;
  padding: 5px 10px;
  transition: transform 200ms ease;
}
.capability-card6-tags li:hover { transform: translateY(-3px); }
@media (max-width: 960px) {
  .capability-grid6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .capability-grid6 { grid-template-columns: 1fr; }
}

/* Journey (giai phap theo nhu cau) */
.journey-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.journey-card {
  padding: 20px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  text-align: center;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.journey-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(7, 20, 41, 0.1); }
.journey-card h3 { font-size: 0.98rem; margin-bottom: 6px; }
.journey-card p { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 960px) {
  .journey-track { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .journey-track { grid-template-columns: 1fr; }
}

/* Oil & gas digital showcase */
.oilgas-digital-section {
  color: white;
  background: linear-gradient(135deg, #050c22, #0b1f6b 55%, #3a1466);
  border-radius: 18px;
  padding: 54px 44px;
}
.oilgas-digital-section .eyebrow { color: rgba(255, 255, 255, 0.65); }
.oilgas-digital-section h2 {
  color: white;
  background: none;
  -webkit-text-fill-color: white;
}
.oilgas-digital-section > p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 720px;
  margin-bottom: 32px;
}
.oilgas-group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.oilgas-group-card {
  padding: 22px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 220ms ease, background 220ms ease;
}
.oilgas-group-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.1); }
.oilgas-group-card h3 {
  font-size: 1rem;
  margin-bottom: 12px;
  color: white;
}
.oilgas-group-card ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 8px;
}
.oilgas-group-card li {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.75);
  padding-left: 14px;
  position: relative;
}
.oilgas-group-card li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #6ea8ff, #d18bff);
}
@media (max-width: 960px) {
  .oilgas-group-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .oilgas-group-grid { grid-template-columns: 1fr; }
  .oilgas-digital-section { padding: 36px 22px; }
}

/* Implementation timeline */
.timeline-section {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.5)),
    url("assets/Quy trinh tone sang.png") center / cover no-repeat;
  border-radius: 22px;
  padding: 54px 32px;
}
.timeline-section .timeline-step {
  background: rgba(223, 229, 250, 0.88);
  border-color: rgba(21, 40, 247, 0.22);
}
.timeline-section .timeline-step:hover {
  transform: translateY(-6px);
  background: rgba(205, 213, 245, 0.95);
  box-shadow: 0 22px 44px rgba(7, 20, 41, 0.14);
}
@media (max-width: 620px) {
  .timeline-section { padding: 36px 20px; }
}
.timeline-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.timeline-step {
  padding: 20px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.timeline-step:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(7, 20, 41, 0.1); }
.timeline-step .list-number { display: block; font-size: 1.3rem; margin-bottom: 8px; }
.timeline-step h3 { font-size: 0.98rem; margin-bottom: 6px; }
.timeline-step p { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 960px) {
  .timeline-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .timeline-steps { grid-template-columns: 1fr; }
}

/* Logo marquee */
.logo-marquee {
  overflow: hidden;
  margin-bottom: 40px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: logo-marquee-scroll 11s linear infinite;
}
.logo-marquee-item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.logo-marquee-item img {
  max-height: 56px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.7);
  transition: filter 220ms ease;
}
.logo-marquee-item:hover img { filter: grayscale(0) opacity(1); }
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.tech-stack-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(21, 40, 247, 0.08), transparent 26rem),
    radial-gradient(circle at 88% 20%, rgba(255, 100, 19, 0.08), transparent 24rem),
    radial-gradient(circle at 54% 92%, rgba(139, 34, 214, 0.07), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #f7f9ff 48%, #ffffff 100%);
}
.tech-stack-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.56;
  background-image:
    linear-gradient(rgba(21, 40, 247, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 40, 247, 0.055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 78%, transparent 100%);
}
.tech-stack-section::after {
  content: "";
  position: absolute;
  inset: 12% 8% auto auto;
  width: min(360px, 46vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(14, 165, 196, 0.12), transparent 68%);
  filter: blur(2px);
}
.tech-stack-section .section-inner {
  position: relative;
  z-index: 1;
}
.tech-stack-section .logo-marquee,
.tech-stack-section .tech-cloud {
  box-shadow: 0 18px 48px rgba(7, 20, 41, 0.08);
}

/* Tech cloud (floating connected nodes) */
.tech-cloud {
  position: relative;
  height: 460px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 100, 19, 0.16), transparent 17rem),
    radial-gradient(circle at 86% 24%, rgba(255, 154, 77, 0.16), transparent 19rem),
    radial-gradient(circle at 54% 82%, rgba(21, 40, 247, 0.07), transparent 23rem),
    linear-gradient(135deg, #fffdfb 0%, #fff4ec 48%, #fffaf6 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tech-cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.74;
  background-image:
    linear-gradient(rgba(255, 100, 19, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 100, 19, 0.11) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 100, 19, 0.18) 1.5px, transparent 2px);
  background-size: 64px 64px, 64px 64px, 128px 128px;
  mask-image: radial-gradient(ellipse at center, #000 0%, #000 58%, transparent 86%);
}
.tech-cloud::after {
  content: "";
  position: absolute;
  inset: 34px;
  pointer-events: none;
  opacity: 0.48;
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(255, 100, 19, 0.28) 11% 11.2%, transparent 11.2% 38%, rgba(255, 100, 19, 0.22) 38% 38.2%, transparent 38.2% 64%, rgba(255, 100, 19, 0.18) 64% 64.2%, transparent 64.2%),
    linear-gradient(0deg, transparent 0 22%, rgba(255, 100, 19, 0.18) 22% 22.2%, transparent 22.2% 52%, rgba(255, 100, 19, 0.24) 52% 52.2%, transparent 52.2% 78%, rgba(255, 100, 19, 0.16) 78% 78.2%, transparent 78.2%);
}
.tech-node {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: 0.84rem;
  font-weight: 800;
  color: white;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(7, 20, 41, 0.14);
  animation: tech-node-float-a 7s ease-in-out infinite;
  transition: box-shadow 220ms ease, z-index 0s;
}
.tech-node.c1 { background: linear-gradient(135deg, #1528f7, #4a5bff); }
.tech-node.c2 { background: linear-gradient(135deg, #8b22d6, #c04fef); }
.tech-node.c3 { background: linear-gradient(135deg, #ff6413, #ff9a4d); }
.tech-node.c4 { background: linear-gradient(135deg, #0ea5c4, #37d0d9); }
.tech-node.c5 { background: linear-gradient(135deg, #d6228f, #ff6bb0); }
.tech-node.c6 { background: linear-gradient(135deg, #1fa15a, #4fd583); }
.tech-node:nth-child(2n) { animation-name: tech-node-float-b; animation-duration: 8.4s; }
.tech-node:nth-child(3n) { animation-name: tech-node-float-c; animation-duration: 6.2s; animation-delay: -1.4s; }
.tech-node:nth-child(4n) { animation-name: tech-node-float-a; animation-duration: 9.2s; animation-delay: -2.8s; }
.tech-node:nth-child(5n) { animation-name: tech-node-float-b; animation-duration: 10s; animation-delay: -4s; }
.tech-node:nth-child(6n) { animation-name: tech-node-float-c; animation-duration: 7.6s; animation-delay: -2s; }
.tech-node:hover {
  animation-play-state: paused;
  box-shadow: 0 18px 34px rgba(7, 20, 41, 0.22);
  z-index: 2;
  transform: translate(-50%, -50%) scale(1.1) !important;
}
@keyframes tech-node-float-a {
  0% { transform: translate(-50%, -50%) translate(0, 0); }
  25% { transform: translate(-50%, -50%) translate(40px, -16px); }
  50% { transform: translate(-50%, -50%) translate(-24px, -8px); }
  75% { transform: translate(-50%, -50%) translate(-42px, 14px); }
  100% { transform: translate(-50%, -50%) translate(0, 0); }
}
@keyframes tech-node-float-b {
  0% { transform: translate(-50%, -50%) translate(0, 0); }
  30% { transform: translate(-50%, -50%) translate(-46px, 10px); }
  60% { transform: translate(-50%, -50%) translate(30px, 16px); }
  85% { transform: translate(-50%, -50%) translate(44px, -10px); }
  100% { transform: translate(-50%, -50%) translate(0, 0); }
}
@keyframes tech-node-float-c {
  0% { transform: translate(-50%, -50%) translate(0, 0); }
  20% { transform: translate(-50%, -50%) translate(32px, 14px); }
  50% { transform: translate(-50%, -50%) translate(-40px, -12px); }
  80% { transform: translate(-50%, -50%) translate(24px, -16px); }
  100% { transform: translate(-50%, -50%) translate(0, 0); }
}
@media (max-width: 760px) {
  .tech-cloud { height: 620px; }
  .tech-node { font-size: 0.74rem; padding: 6px 12px; }
}

/* Case study cards */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.case-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 44px rgba(7, 20, 41, 0.07);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.case-card:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(7, 20, 41, 0.12); }
.case-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #eef2ff, #f4f8ff 55%, #fdeee2);
  position: relative;
  overflow: hidden;
}
.case-card-media.has-video { cursor: pointer; }
.case-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms ease, filter 360ms ease;
}
.case-card-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.case-card-media.has-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 20, 41, 0.04), rgba(7, 20, 41, 0.18)),
    radial-gradient(circle at center, transparent 0 22%, rgba(7, 20, 41, 0.16) 100%);
  opacity: 0.8;
  transition: opacity 220ms ease;
}
.case-card-media.has-video:hover img {
  transform: scale(1.045);
  filter: saturate(1.06);
}
.case-card-media.has-video:hover::after { opacity: 0.62; }
.case-play-icon {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: 0 14px 30px rgba(21, 40, 247, 0.28);
  transition: transform 220ms ease;
}
.case-play-icon svg { width: 24px; height: 24px; fill: white; margin-left: 3px; }
.case-card-media.has-video:hover .case-play-icon { transform: scale(1.1); }
.case-card-body { padding: 22px 24px; }
.case-card-body h3 { font-size: 1.14rem; margin-bottom: 8px; }
.case-card-body p { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
@media (max-width: 760px) {
  .case-grid { grid-template-columns: 1fr; }
}

/* Final CTA banner */
.final-cta {
  text-align: center;
  color: white;
  background: linear-gradient(120deg, #0718b8, #6424cc 58%, #f05a16);
  border-radius: 18px;
  padding: 64px 32px;
}
.final-cta h2 {
  color: white;
  background: none;
  -webkit-text-fill-color: white;
  max-width: 760px;
  margin: 0 auto 16px;
}
.final-cta p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin: 0 auto 28px;
}
.contact-theme { background: linear-gradient(135deg, #fff, #f6f8ff 55%, #fff4ee); }
.content-layout {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 54px;
  align-items: start;
}
.capability-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.capability-overview-card {
  position: relative;
  display: block;
  padding: 30px 26px 26px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(7, 20, 41, 0.07);
  text-decoration: none;
  cursor: pointer;
  transition: transform 320ms ease, box-shadow 320ms ease;
}
.capability-overview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(7, 20, 41, 0.12);
}
.capability-overview-bar {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, #1528f7, #8b22d6);
}
.capability-overview-card:nth-child(2) .capability-overview-bar { background: linear-gradient(90deg, #8b22d6, #c928a8); }
.capability-overview-card:nth-child(3) .capability-overview-bar { background: linear-gradient(90deg, #ff6413, #ff9a2e); }
.capability-overview-card h3 {
  margin-bottom: 12px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0b1f4d;
}
.capability-overview-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .capability-overview-grid { grid-template-columns: 1fr; }
}
.capability-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 54px;
  align-items: center;
}
.capability-detail.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.capability-detail.reverse .capability-media { order: 2; }
.capability-detail.reverse .capability-text { order: 1; }
.capability-media {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eef2ff, #f4f8ff 55%, #fdeee2);
  color: #1528f7;
  overflow: hidden;
}
.capability-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.capability-detail.accent-violet .capability-media { color: #8b22d6; }
.capability-detail.accent-orange .capability-media { color: #ff6413; }
.capability-text h2 {
  margin-bottom: 14px;
  display: inline-block;
  color: #0b1f4d;
  background: linear-gradient(108deg, #071429 0%, #1528f7 45%, #8b22d6 72%, #ff6413 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.capability-text p { color: var(--muted); font-size: 1.04rem; line-height: 1.7; max-width: 620px; }
.capability-topics {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  max-width: 620px;
}
.capability-topics li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
  color: #0b1f4d;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(21, 40, 247, 0.05);
  border: 1px solid rgba(21, 40, 247, 0.1);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.capability-topics li:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(7, 20, 41, 0.1);
  background: rgba(21, 40, 247, 0.09);
}
.capability-detail.accent-violet .capability-topics li:hover { background: rgba(139, 34, 214, 0.1); }
.capability-detail.accent-orange .capability-topics li:hover { background: rgba(255, 100, 19, 0.1); }
.capability-detail.accent-violet .capability-topics li {
  background: rgba(139, 34, 214, 0.06);
  border-color: rgba(139, 34, 214, 0.14);
}
.capability-detail.accent-orange .capability-topics li {
  background: rgba(255, 100, 19, 0.06);
  border-color: rgba(255, 100, 19, 0.14);
}
.capability-topics li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
  background: linear-gradient(108deg, #1528f7 0%, #8b22d6 60%, #ff6413 100%);
}
@media (max-width: 860px) {
  .capability-detail, .capability-detail.reverse { grid-template-columns: 1fr; gap: 26px; }
  .capability-detail.reverse .capability-media, .capability-detail.reverse .capability-text { order: initial; }
}
.info-list { display: grid; gap: 14px; }
.supplies-theme + .section .info-list article {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  color: #fff;
  box-shadow: 0 18px 38px rgba(7, 20, 41, 0.14);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.supplies-theme + .section .info-list article::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  top: -72px;
  right: -48px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.055);
}
.supplies-theme + .section .info-list article:nth-child(1) {
  background: linear-gradient(135deg, #1026d8 0%, #2748f2 62%, #5571ff 100%);
}
.supplies-theme + .section .info-list article:nth-child(2) {
  background: linear-gradient(135deg, #6520ad 0%, #8b22d6 58%, #aa4be4 100%);
}
.supplies-theme + .section .info-list article:nth-child(3) {
  background: linear-gradient(135deg, #df4906 0%, #ff6413 58%, #ff914d 100%);
}
.supplies-theme + .section .info-list article:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(7, 20, 41, 0.2);
}
.supplies-theme + .section .info-list h3 {
  margin: 0 0 8px;
  color: #fff;
}
.supplies-theme + .section .info-list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}
.info-list.numbered-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.info-list.numbered-list article {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.list-number {
  font-weight: 800;
  font-size: 1.6rem;
  background: linear-gradient(108deg, #1528f7 0%, #8b22d6 60%, #ff6413 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 860px) {
  .info-list.numbered-list { grid-template-columns: 1fr; }
}
.contact-card {
  display: grid;
  gap: 14px;
  font-style: normal;
}
.contact-card strong { font-size: 1.18rem; }
.contact-card span { color: var(--muted); line-height: 1.65; }
.contact-card a { width: fit-content; color: var(--blue); font-weight: 850; }

.home-contact {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 78px;
  background:
    radial-gradient(circle at 88% 18%, rgba(21, 40, 247, 0.14), transparent 25rem),
    radial-gradient(circle at 10% 82%, rgba(139, 34, 214, 0.1), transparent 23rem),
    linear-gradient(140deg, #f8faff 0%, #edf3ff 55%, #f4edff 100%);
}
.home-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.8fr);
  align-items: start;
  gap: 70px;
  padding-top: 70px;
  padding-bottom: 70px;
}
.home-contact h2 { margin-bottom: 28px; }
.contact-company {
  max-width: 540px;
  margin: 0 0 28px;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.4;
}
.contact-details {
  display: grid;
  gap: 15px;
  max-width: 620px;
  font-style: normal;
}
.contact-details p {
  margin: 0;
  color: #23304a;
  font-size: 1rem;
  line-height: 1.6;
}
.contact-details strong { color: var(--ink); }
.contact-details a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-decoration-color: rgba(21, 40, 247, 0.28);
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.contact-details a:hover {
  color: var(--blue);
  text-decoration-color: currentColor;
}
.home-connect > p:not(.eyebrow) {
  max-width: 500px;
  margin-bottom: 26px;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.contact-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  border: none;
  background: none;
  box-shadow: none;
  color: #23304a;
  font-size: 0.9rem;
  font-weight: 800;
  transition: transform 220ms ease, opacity 220ms ease;
}
.contact-action:hover {
  transform: translateY(-4px);
  opacity: 0.85;
}
.contact-action-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  background: var(--blue);
}
.contact-action-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: none;
}
.contact-action.facebook .contact-action-icon svg {
  width: 32px;
  height: 32px;
  transform: translateY(1px);
}
.contact-action.email .contact-action-icon {
  background: linear-gradient(135deg, var(--violet), var(--orange));
}
.contact-action.email .contact-action-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zalo-mark {
  background: #0b8ff7;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.footer {
  position: relative;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin: 0 auto;
  padding: 0 max(18px, calc((100% - 1180px) / 2));
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 16% 0%, rgba(21, 40, 247, 0.38), transparent 24rem),
    radial-gradient(circle at 86% 20%, rgba(255, 100, 19, 0.28), transparent 22rem),
    linear-gradient(120deg, #071429 0%, #111f46 48%, #1b1542 100%);
  font-size: 0.94rem;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  pointer-events: none;
}
.footer span {
  position: relative;
  z-index: 1;
}
.footer span:first-child {
  color: #ffffff;
  font-weight: 800;
}
.footer span:last-child {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 700;
}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms ease, transform 640ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.section-heading.reveal {
  transform: none;
  transition: opacity 520ms ease;
}
.section-heading.reveal.is-visible {
  transform: none;
}

@keyframes routeFlow { to { stroke-dashoffset: -104; } }
@keyframes ringRotate { to { transform: rotate(360deg); } }
@keyframes travelRouteFlow { to { stroke-dashoffset: -112; } }
@keyframes travelGlow {
  0%, 100% { opacity: 0.72; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes travelPassportFloat {
  0%, 100% { transform: rotate(-4deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-3deg) translate3d(0, -8px, 0); }
}
@keyframes travelTicketFloat {
  0%, 100% { transform: rotate(2.2deg) translate3d(0, 0, 0); }
  50% { transform: rotate(1deg) translate3d(0, -10px, 0); }
}
@keyframes travelBadgeFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
@keyframes coreBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes nodePulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue) 8%, var(--violet) 62%, var(--orange) 100%);
  box-shadow: 0 14px 34px rgba(21, 40, 247, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(21, 40, 247, 0.36);
}
.back-to-top svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .route-particles { display: none; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
@media (max-width: 1060px) {
  .nav-menu { gap: 2px; font-size: 0.82rem; }
  .nav-menu a { padding-inline: 10px; }
  .brand { width: 132px; }
  .section-heading { margin-bottom: 62px; }
}
@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed;
    inset: 78px 18px auto;
    display: grid;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .nav-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-menu a { padding: 13px 12px; }
  .language-toggle {
    width: 100%;
    margin: 4px 0 0;
    justify-content: stretch;
  }
  .language-option { flex: 1; }
  .hero-grid, .subpage-grid, .contact-page-grid, .content-layout, .home-contact-grid { grid-template-columns: 1fr; gap: 42px; }
  .oilgas-bridge {
    justify-self: center;
    width: min(100%, 560px);
  }
  .travel-page-hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.8) 42%, rgba(249, 250, 255, 0.96) 68%, #ffffff 100%),
      url("assets/travel-hero-busan-beach.webp") center 62% / cover no-repeat;
  }
  .travel-motion {
    justify-self: center;
    width: min(100%, 520px);
  }
  .travel-service-grid { grid-template-columns: 1fr; }
  .travel-gallery-grid { grid-template-columns: 1fr; }
  .travel-service-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) 1fr;
  }
  .travel-service-media { aspect-ratio: 4 / 3; }
  .travel-service-body { align-self: center; }
  #linh-vuc .section-inner,
  .why-section .section-inner {
    width: min(100% - 36px, 1040px);
  }
  .hero-grid { min-height: auto; }
  .hero-visual { min-height: 380px; }
  .service-grid, .why-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
  .nav, .section-inner { width: min(100% - 28px, 1180px); }
  .contact-actions { gap: 18px; justify-content: center; }
  .contact-action {
    padding: 6px;
    font-size: 0.72rem;
  }
  .contact-action[href^="tel:"] {
    font-size: 0.56rem;
    padding-left: 4px;
    padding-right: 4px;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .footer {
    width: 100%;
    padding: 28px 18px;
  }
  .brand { width: 138px; }
  .section-inner { padding: 58px 0; }
  #linh-vuc .section-inner,
  .why-section .section-inner {
    width: min(100% - 28px, 1040px);
    padding-top: 52px;
    padding-bottom: 52px;
  }
  h1 { font-size: 3.05rem; }
  h2 { font-size: 2.05rem; line-height: 1.16; }
  .section-heading { margin-bottom: 52px; }
  #linh-vuc .section-heading,
  .why-section .section-heading {
    margin-bottom: 38px;
  }
  .hero-copy h1 {
    font-size: 2.5rem;
    line-height: 1.34;
    margin-bottom: 22px;
    padding-bottom: 0.22em;
  }
  .hero-visual { min-height: 300px; }
  .connection-visual { width: min(112%, 480px); }
  .travel-brand-lockup {
    width: 150px;
    max-width: 52vw;
    margin-bottom: 20px;
  }
  .travel-page-hero .subpage-grid h1 {
    width: min(100%, 340px);
    margin-bottom: 20px;
    padding-bottom: 0.2em;
    font-size: 2.02rem;
    line-height: 1.24;
    overflow-wrap: normal;
  }
  .travel-page-hero .subpage-grid p:not(.eyebrow) {
    width: min(100%, 340px);
    margin-bottom: 24px;
    font-size: 0.98rem;
    line-height: 1.72;
  }
  .travel-motion {
    width: min(100%, 430px);
    margin-left: 0;
  }
  .travel-ticket-card { padding: 17px 17px 13px; }
  .travel-visa-badge { right: 1%; padding: 9px 11px; }
  .travel-eticket-chip { right: 1%; }
  .ticket-route span { font-size: 1.4rem; }
  .travel-passport-card { border-radius: 17px; }
  .travel-services-heading { margin-bottom: 34px; }
  .travel-service-card { display: block; }
  .travel-service-body { min-height: auto; }
  .travel-visa-badge strong { font-size: 0.7rem; }
  .travel-visa-badge small { font-size: 0.46rem; }
  .visa-check {
    width: 30px;
    height: 30px;
  }
  .service-grid, .why-list, .visual-panel { grid-template-columns: 1fr; }
  .oilgas-theme {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 52%, rgba(255, 250, 246, 0.9) 100%),
      radial-gradient(circle at 72% 16%, rgba(255, 100, 19, 0.12), transparent 18rem),
      radial-gradient(circle at 18% 70%, rgba(21, 40, 247, 0.08), transparent 18rem),
      linear-gradient(135deg, #fff, #f4f8ff 50%, #fff6ef);
  }
  .oilgas-theme::before { opacity: 0.26; background-size: auto, auto, 68px 68px, 68px 68px; }
  .oilgas-bridge {
    min-height: 520px;
    width: min(100%, 380px);
  }
  .bridge-core {
    width: 154px;
    min-height: 118px;
  }
  .bridge-core span { font-size: 1.08rem; }
  .bridge-node {
    width: min(45%, 178px);
    padding: 12px 13px;
  }
  .bridge-node strong { font-size: 0.82rem; }
  .node-expert { left: 0; top: 28px; }
  .node-data { right: 0; top: 98px; }
  .node-solution { left: 0; bottom: 98px; }
  .node-report { right: 0; bottom: 28px; }
  .node-expert { animation-name: oilgas-orbit-mobile-a; }
  .node-data { animation-name: oilgas-orbit-mobile-b; }
  .node-solution { animation-name: oilgas-orbit-mobile-c; }
  .node-report { animation-name: oilgas-orbit-mobile-d; }
  @keyframes oilgas-orbit-mobile-a {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(16px, 76px); }
    66% { transform: translate(4px, 190px); }
  }
  @keyframes oilgas-orbit-mobile-b {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-16px, 72px); }
    66% { transform: translate(-4px, 176px); }
  }
  @keyframes oilgas-orbit-mobile-c {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(16px, -72px); }
    66% { transform: translate(4px, -176px); }
  }
  @keyframes oilgas-orbit-mobile-d {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-16px, -76px); }
    66% { transform: translate(-4px, -190px); }
  }
  .footer { align-items: flex-start; flex-direction: column; }
}