/* ============================================================
   GTV INVESTMENT CONSULTANCY — Design system
   Hướng phong cách: hệ sinh thái năng động, số liệu ấn tượng,
   khối màu mạnh (lấy cảm hứng cấu trúc từ các trang careers/tech
   hiện đại) — dùng trọn bảng màu xanh nhận diện GTV.
   ============================================================ */
:root{
  --c-1:#07C8F9;
  --c-2:#09A6F3;
  --c-3:#0A85ED;
  --c-4:#0C63E7;
  --c-5:#0D41E1;
  --c-6:#0A2DB5;
  --c-7:#06188A;
  --c-8:#03045E;

  --ink:#051041;
  --ink-dim:#4A5578;
  --ink-dimmer:#8792AD;
  --on-dark:#EAF2FF;
  --on-dark-dim:#AFC2EE;

  --bg:#ffffff;
  --bg-tint:#F2F8FF;
  --bg-tint-2:#E5F1FF;
  --line: rgba(10,45,181,0.12);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 24px 60px -26px rgba(6,24,138,0.28);
  --grad-brand: linear-gradient(120deg, var(--c-1), var(--c-4) 55%, var(--c-6));
  --grad-cool: linear-gradient(135deg, var(--c-1), var(--c-5));
  --grad-deep: linear-gradient(140deg, var(--c-7), var(--c-8) 70%);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background: var(--c-1); color:#03045E; }
h1,h2,h3,h4{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.012em; color:var(--ink);}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
/* Tránh tình trạng vài chữ lẻ bị rớt xuống dòng riêng khi wrap — cân dòng văn bản đều, gọn như văn bản hành chính */
p, li, .lead, blockquote{ text-wrap: pretty; }
h1,h2,h3,h4{ text-wrap: balance; }
.wrap{ max-width:1220px; margin:0 auto; padding:0 32px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--c-4); font-weight:800; margin-bottom:16px;
}
.eyebrow::before{ content:''; width:28px; height:3px; border-radius:2px; background: var(--grad-brand); }
.eyebrow.on-dark{ color: var(--c-1); }
.eyebrow.on-dark::before{ background: linear-gradient(90deg, var(--c-1), #fff); }

/* Decorative blobs (dùng chung) */
.blob{ position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; z-index:0; }
.blob-soft{ filter: blur(60px); opacity:.55; }

/* NAV */
header{
  position:sticky; top:0; left:0; right:0; z-index:100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1220px; margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ height:34px; width:auto; display:block; }
.brand-text{ font-family:'Fraunces',serif; font-weight:700; font-size:19px; letter-spacing:-0.01em; color:var(--ink); line-height:1.1; white-space:nowrap; }
@media (max-width:520px){ .brand-logo{ height:28px; } .brand-text{ font-size:15px; } }
nav ul{ list-style:none; display:flex; gap:6px; align-items:center; }
nav ul li a{
  font-size:14px; color:var(--ink-dim); font-weight:700; transition:.2s;
  padding:10px 18px; border-radius:999px; display:inline-block;
}
nav ul li a:hover{ color:var(--c-5); background:var(--bg-tint); }
nav ul li a.active{ color:#fff; background: var(--grad-cool); }
.nav-right{ display:flex; align-items:center; gap:14px;}
.nav-cta{
  padding:12px 24px; border-radius:999px;
  background: var(--grad-brand);
  color:#fff; font-weight:800; font-size:13.5px;
  box-shadow: 0 14px 28px -12px rgba(10,133,237,0.55);
  transition:.2s;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow: 0 18px 34px -12px rgba(10,133,237,0.7); }

/* Mobile nav toggle */
.nav-toggle{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:.25s; }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
@media (max-width:980px){
  nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 20px 40px -20px rgba(10,45,181,0.25); }
  nav.open{ display:block; }
  nav ul{ flex-direction:column; align-items:stretch; padding:14px; gap:4px; }
  nav ul li a{ display:block; padding:13px 16px; }
  .nav-toggle{ display:flex; }
}

/* HERO */
.hero{
  position:relative;
  padding:100px 0 64px;
  background: var(--bg);
  overflow:hidden;
}
.hero .blob-1{ width:640px; height:640px; top:-260px; right:-160px; background: radial-gradient(circle at 35% 30%, rgba(7,200,249,0.35), transparent 68%); }
.hero .blob-2{ width:420px; height:420px; bottom:-180px; left:-140px; background: radial-gradient(circle, rgba(10,45,181,0.18), transparent 70%); }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{
  font-size: clamp(38px, 5.2vw, 64px);
  line-height:1.06;
  margin-bottom:24px;
}
.grad-text{
  background: var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ font-size:17.5px; color:var(--ink-dim); max-width:520px; line-height:1.75; margin-bottom:34px;}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.btn-primary{
  padding:16px 30px; border-radius:999px; font-weight:800; font-size:14.5px;
  background: var(--grad-brand);
  color:#fff; box-shadow: 0 18px 40px -14px rgba(10,133,237,0.55);
  display:inline-flex; align-items:center; gap:8px; transition:.25s;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 22px 46px -12px rgba(10,133,237,0.7); }
.btn-ghost{
  padding:15.5px 28px; border-radius:999px; font-weight:800; font-size:14.5px;
  border:1.5px solid var(--line); color:var(--ink);
  transition:.25s; background:#fff;
}
.btn-ghost:hover{ border-color: var(--c-3); color:var(--c-5); }

/* STAT STRIP — dải số liệu đậm màu (điểm nhấn trang) */
.stat-strip{
  position:relative; overflow:hidden;
  background: var(--grad-deep);
  padding:46px 0;
}
.stat-strip::before{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(7,200,249,0.35), transparent 70%);
  top:-220px; right:-80px;
}
.stat-strip-inner{ position:relative; z-index:1; display:flex; gap:0; flex-wrap:wrap; }
.stat-strip .stat{ flex:1 1 160px; padding:0 28px; border-left:1px solid rgba(255,255,255,0.14); }
.stat-strip .stat:first-child{ border-left:none; padding-left:0; }
.stat-strip .stat b{
  display:block; font-family:'Inter',sans-serif; font-weight:800; font-size:38px;
  letter-spacing:-0.02em; background: linear-gradient(120deg,#fff, var(--c-1) 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.stat-strip .stat-trend{
  display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; letter-spacing:.03em;
  color:#7be8ab; background:rgba(123,232,171,0.13); border:1px solid rgba(123,232,171,0.28);
  padding:3px 10px; border-radius:999px; margin-bottom:9px; animation: statPulse 2.6s ease-in-out infinite;
}
.stat-strip .stat > span:last-child{ display:block; font-size:12px; color: var(--on-dark-dim); text-transform:uppercase; letter-spacing:0.07em; font-weight:700; }
@keyframes statPulse{ 0%,100%{ opacity:1; transform:translateY(0); } 50%{ opacity:.65; transform:translateY(-1px); } }
@media (max-width:760px){ .stat-strip .stat{ border-left:none; border-top:1px solid rgba(255,255,255,0.14); padding:16px 0 0; } .stat-strip .stat:first-child{ border-top:none; padding-top:0; } .stat-strip-inner{ flex-direction:column; gap:16px; } }

.signature{ position:relative; aspect-ratio:1/1; max-width:440px; margin:0 auto; z-index:1; }
.sig-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--line); }
.sig-ring.r2{ inset:12%; border-color: rgba(10,45,181,0.16); }
.sig-ring.r3{ inset:26%; border:1.5px dashed rgba(10,133,237,0.4); animation: spin 40s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.sig-core{
  position:absolute; inset:33%; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--c-1), var(--c-7) 75%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 26px 64px -16px rgba(10,133,237,0.55);
}
.sig-core span{ font-family:'Fraunces',serif; color:#fff; font-weight:700; font-size:14px; text-align:center; line-height:1.35; padding:0 14px;}
.sig-node{
  position:absolute; width:80px; padding:10px 12px; border-radius:14px;
  background: #fff; border:1px solid var(--line); box-shadow: var(--shadow);
  font-size:11px; font-weight:700; text-align:center; color:var(--ink-dim);
}
.sig-node.n1{ top:0%; left:44%; }
.sig-node.n2{ top:44%; right:-6%; }
.sig-node.n3{ bottom:0%; left:4%; }
.sig-node b{ display:block; font-family:'Fraunces',serif; font-size:13px; color:var(--c-5); font-weight:600;}

/* SECTION generic */
section{ position:relative; padding:104px 0; }
.section-head{ max-width:820px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(28px,3.4vw,42px); line-height:1.15; text-wrap:balance; }
.section-head p{ color:var(--ink-dim); margin-top:16px; font-size:15.5px; line-height:1.7; max-width:640px; }
.section-head.center p{ margin-left:auto; margin-right:auto; }
.tint{ background: var(--bg-tint); }

/* ABOUT / OFFICE */
.office-list{ margin-top:26px; display:grid; gap:12px; }
.office-list.office-grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:700px){ .office-list.office-grid-2{ grid-template-columns:1fr; } }
.office-list.office-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:700px){ .office-list.office-grid-3{ grid-template-columns:1fr; } }
.office-list.office-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .office-list.office-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .office-list.office-grid-4{ grid-template-columns:1fr; } }
.office-item{
  display:flex; gap:14px; padding:18px 20px; border-radius:var(--radius-sm);
  background: #fff; border:1px solid var(--line); box-shadow: 0 12px 30px -22px rgba(6,24,138,0.35);
  transition:border-color .2s ease, transform .2s ease;
}
a.office-item:hover{ border-color:rgba(10,133,237,0.35); transform:translateY(-2px); }
.office-item .pin{
  width:38px; height:38px; border-radius:11px; flex:none;
  background: var(--grad-cool);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.office-item b{ display:block; font-size:14px; margin-bottom:3px; color:var(--ink);}
.office-item span{ font-size:13px; color:var(--ink-dimmer); line-height:1.5; }

/* ============ ECOSYSTEM TABS (Ngành nghề) — điểm nhấn riêng ============ */
.eco-tabs{ position:relative; }
.eco-tab-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.eco-tab-nav input{ position:absolute; opacity:0; pointer-events:none; }
.eco-tab-nav label{
  display:flex; align-items:center; gap:10px; padding:14px 22px; border-radius:16px;
  border:1.5px solid var(--line); background:#fff; cursor:pointer; transition:.2s; font-weight:700; font-size:14.5px; color:var(--ink-dim);
}
.eco-tab-nav label img{ height:20px; width:auto; }
.eco-tab-nav label .n{ font-family:'Fraunces',serif; font-size:12px; color:var(--ink-dimmer); }
.eco-tab-nav input:checked + label{ border-color:transparent; background:var(--grad-deep); color:#fff; box-shadow:0 16px 34px -16px rgba(6,24,138,0.5); }
.eco-tab-nav input:checked + label .n{ color: var(--c-1); }

.eco-panel{ display:none; }
#tab-v3m:checked ~ .eco-panels #panel-v3m,
#tab-gzh:checked ~ .eco-panels #panel-gzh{ display:grid; }

.eco-panels{ position:relative; }
.eco-panels-static{ display:grid; gap:28px; }
.eco-panels-static .eco-panel{ display:grid; }
.eco-card{
  display:grid; grid-template-columns:0.55fr 1fr; gap:44px; align-items:center;
  padding:44px; border-radius:28px; background: var(--bg-tint);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
@media (max-width:820px){ .eco-card{ grid-template-columns:1fr; padding:32px 26px; } }
.eco-card::after{
  content:''; position:absolute; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(7,200,249,0.22), transparent 70%);
  top:-100px; right:-90px;
}
.eco-visual{
  position:relative; z-index:1; aspect-ratio:1/1; border-radius:24px;
  background: #fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:12%;
  box-shadow: var(--shadow);
}
.eco-visual img{ width:100%; }
.eco-body{ position:relative; z-index:1; }
.eco-tag{
  display:inline-block; padding:6px 14px; border-radius:999px; font-size:11px; font-weight:800;
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px;
  background: var(--bg-tint-2); color: var(--c-5);
}
.eco-body h3{ font-size:26px; margin-bottom:14px; }
.eco-body p{ color:var(--ink-dim); font-size:15px; line-height:1.75; margin-bottom:20px; }
.eco-body a.link{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:var(--c-5); }

/* VALUE / CULTURE — blob icon cards */
.culture-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .culture-grid{ grid-template-columns:1fr; } }
.culture-cell{
  padding:40px 30px; border-radius:var(--radius); background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow); min-height:240px; display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden; transition:.3s;
}
.culture-cell::before{
  content:''; position:absolute; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, rgba(7,200,249,0.16), transparent 70%);
  top:-80px; right:-70px;
}
.culture-cell:hover{ transform:translateY(-6px); border-color:rgba(10,133,237,0.3); }
.culture-cell:nth-child(2){ background: linear-gradient(160deg, var(--bg-tint-2), #fff); }
.culture-cell h4{ font-size:19.5px; margin-bottom:10px; position:relative; z-index:1;}
.culture-cell p{ font-size:13.5px; color:var(--ink-dim); line-height:1.65; position:relative; z-index:1;}
.culture-icon{
  width:56px; height:56px; border-radius:16px; margin-bottom:22px; position:relative; z-index:1;
  background: var(--grad-cool);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow: 0 16px 32px -14px rgba(10,133,237,0.55);
}

/* BENEFITS */
.benefit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:860px){ .benefit-grid{ grid-template-columns:1fr; } }
.benefit-cell{
  padding:32px 30px; border-radius:20px; background:#fff; border:1px solid var(--line);
  box-shadow: 0 12px 30px -22px rgba(6,24,138,0.35); transition:.3s;
}
.benefit-cell.wide{ grid-column: 1 / -1; }
.benefit-cell:hover{ transform:translateY(-4px); box-shadow: var(--shadow); border-color: rgba(10,133,237,0.3); }
.benefit-icon{
  width:48px; height:48px; border-radius:13px; margin-bottom:16px;
  background: var(--grad-cool);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.benefit-cell h4{ font-size:17.5px; margin-bottom:14px; }
.benefit-list{ list-style:none; display:grid; gap:10px; }
.benefit-list li{
  font-size:13.5px; line-height:1.65; color:var(--ink-dim); padding-left:17px; position:relative;
}
.benefit-list li::before{
  content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%;
  background: var(--grad-cool);
}
.benefit-list.two-col{ column-count:2; column-gap:24px; }
@media (max-width:700px){ .benefit-list.two-col{ column-count:1; } }
.benefit-list.two-col li{ break-inside:avoid; margin-bottom:2px; }

/* LEADERSHIP */
.lead-kicker{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-dimmer); font-weight:800; margin:56px 0 20px; }
.lead-kicker:first-child{ margin-top:0; }
.lead-kicker::before{ content:'— '; color:var(--c-3); }

.exec-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:820px){ .exec-grid{ grid-template-columns:1fr; } }
.exec-card{
  display:grid; grid-template-columns:96px 1fr; gap:24px; align-items:start;
  padding:28px; border-radius:22px; background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow); position:relative; overflow:hidden; transition:.35s;
}
.exec-card:hover{ transform:translateY(-5px); box-shadow: 0 30px 64px -22px rgba(6,24,138,0.4); border-color: rgba(10,133,237,0.35); }
.exec-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin:left; transition:.4s;
}
.exec-card:hover::before{ transform: scaleX(1); }
@media (max-width:560px){ .exec-card{ grid-template-columns:1fr; } }
.exec-avatar{
  width:96px; height:96px; border-radius:50%; flex:none;
  background: var(--grad-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:30px; color:#fff;
  box-shadow: 0 16px 34px -14px rgba(6,24,138,0.55);
  overflow:hidden; border:3px solid #fff; outline:1px solid var(--line);
}
.exec-avatar img{ width:100%; height:100%; object-fit:cover; }
.exec-role{ font-size:11.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-4); margin-bottom:6px; }
.exec-name{ font-family:'Fraunces',serif; font-size:21px; font-weight:600; color:var(--ink); margin-bottom:2px; }
.exec-year{ font-size:12.5px; color:var(--ink-dimmer); margin-bottom:14px; display:block; }
.exec-bio{ list-style:none; display:grid; gap:9px; }
.exec-bio li{
  font-size:13.3px; line-height:1.6; color:var(--ink-dim); padding-left:16px; position:relative;
}
.exec-bio li::before{
  content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%;
  background: var(--grad-cool);
}

.dir-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:920px){ .dir-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .dir-grid{ grid-template-columns:1fr; } }
.dir-card{
  padding:24px; border-radius:20px; border:1px solid var(--line); background:#fff;
  box-shadow: 0 12px 30px -22px rgba(6,24,138,0.35); transition:.3s; position:relative; overflow:hidden;
}
.dir-card:hover{ transform:translateY(-5px); box-shadow: var(--shadow); border-color: rgba(10,133,237,0.3); }
.dir-avatar{
  width:64px; height:64px; border-radius:50%; margin-bottom:16px;
  background: var(--grad-cool);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:20px; color:#fff;
  box-shadow: 0 12px 26px -12px rgba(6,24,138,0.5);
  overflow:hidden; border:2.5px solid #fff; outline:1px solid var(--line);
}
.dir-avatar img{ width:100%; height:100%; object-fit:cover; }
.dir-avatar.dir-avatar-lg{ width:96px; height:96px; border-width:3px; box-shadow:0 16px 34px -14px rgba(6,24,138,0.55); }
.dir-role{ font-size:11px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:var(--c-4); margin-bottom:5px; }
.dir-name{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:var(--ink); }
.dir-year{ font-size:12px; color:var(--ink-dimmer); margin-bottom:12px; display:block; }
.dir-bio{ list-style:none; display:grid; gap:7px; }
.dir-bio li{ font-size:12.8px; line-height:1.55; color:var(--ink-dim); padding-left:14px; position:relative; }
.dir-bio li::before{
  content:''; position:absolute; left:0; top:6px; width:5px; height:5px; border-radius:50%;
  background: var(--grad-cool);
}

/* CAREERS */
.pos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .pos-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .pos-grid{ grid-template-columns:1fr; } }
.pos-card{
  padding:30px; border-radius:20px; border:1px solid var(--line); background:#fff;
  box-shadow: var(--shadow); display:flex; flex-direction:column; gap:14px; transition:.25s;
}
.pos-card:hover{ border-color: var(--c-3); transform:translateY(-4px);}
.pos-icon{
  width:46px; height:46px; border-radius:13px;
  background: var(--grad-cool);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.pos-card h4{ font-size:17.5px; }
.pos-card .stage{
  align-self:flex-start; font-size:11px; font-weight:800; padding:5px 12px; border-radius:999px;
  background: var(--bg-tint-2); color: var(--c-5);
}
.pos-card p{ color:var(--ink-dim); font-size:13.5px; line-height:1.6; }
.pos-card .apply{ font-size:13.5px; font-weight:800; color:var(--c-5); display:inline-flex; align-items:center; gap:6px; margin-top:auto;}

/* Danh sách tuyển dụng theo phòng ban */
.dept-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:860px){ .dept-grid{ grid-template-columns:1fr; } }
.dept-card{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px 26px 24px; box-shadow:0 12px 30px -24px rgba(6,24,138,0.3); display:flex; flex-direction:column; }
.dept-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.dept-icon{ width:42px; height:42px; border-radius:13px; background:var(--grad-cool); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.dept-card h4{ font-size:17px; }
.dept-count{ font-size:11px; font-weight:800; color:var(--c-5); background:var(--bg-tint); padding:3px 10px; border-radius:999px; margin-left:auto; white-space:nowrap; }
.dept-roles{ list-style:none; display:grid; gap:0; margin-bottom:18px; }
.dept-roles li{ display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:8px 10px; font-size:13.3px; color:var(--ink); font-weight:600; padding:9px 0; border-bottom:1px dashed var(--line); }
.dept-roles li:last-child{ border-bottom:none; padding-bottom:0; }
.dept-roles .role-loc{ font-size:11px; font-weight:700; color:var(--ink-dimmer); white-space:nowrap; }
.dept-roles .role-left{ display:flex; align-items:center; gap:8px; }
a.role-left{ text-decoration:none; color:inherit; transition:.15s; }
a.role-left:hover{ color:var(--c-5); }
.role-badge{
  font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#0a9a4a; background:rgba(16,185,90,0.13); padding:3px 9px; border-radius:999px;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.role-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:#16c168; box-shadow:0 0 0 3px rgba(22,193,104,0.2); }
.dept-card .apply{ font-size:13.5px; font-weight:800; color:var(--c-5); display:inline-flex; align-items:center; gap:6px; margin-top:auto; }
.dept-card .apply-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:auto; }
.dept-card .apply-row .apply{ margin-top:0; }
.dept-card .zalo-link{ font-size:12.5px; font-weight:700; color:var(--ink-dimmer); display:inline-flex; align-items:center; gap:5px; text-decoration:none; }
.dept-card .zalo-link:hover{ color:var(--c-5); }

/* CTA BAND */
.cta-band{
  border-radius:30px; padding:72px 60px; position:relative; overflow:hidden;
  background: var(--grad-deep);
}
.cta-band::before{
  content:''; position:absolute; width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, var(--c-1), transparent 70%); opacity:0.4;
  top:-170px; right:-110px;
}
.cta-band::after{
  content:''; position:absolute; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, var(--c-2), transparent 72%); opacity:0.25;
  bottom:-140px; left:-80px;
}
.cta-band-inner{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
.cta-band h2{ font-size:clamp(27px,3.4vw,40px); max-width:480px; line-height:1.18; color:#fff;}
.cta-band p{ color:rgba(255,255,255,0.78); margin-top:14px; max-width:420px; font-size:15px;}
.cta-band p.cta-address{ max-width:none;}

/* PAGE HERO (banner cho các trang con) — khối màu đậm */
.page-hero{
  position:relative; overflow:hidden;
  padding:64px 0 46px;
  background: var(--grad-deep);
}
.page-hero::before{
  content:''; position:absolute; width:480px; height:480px; border-radius:50%;
  background: radial-gradient(circle, rgba(7,200,249,0.3), transparent 70%);
  top:-260px; right:-100px;
}
.breadcrumb{ position:relative; z-index:1; display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--on-dark-dim); margin-bottom:18px; font-weight:700; }
.breadcrumb a{ color:#fff; }
.breadcrumb .sep{ opacity:.5; }
.page-hero h1{ position:relative; z-index:1; font-size:clamp(32px,4.2vw,48px); line-height:1.14; margin-bottom:14px; color:#fff; }
.page-hero p.lead{ position:relative; z-index:1; color: var(--on-dark-dim); font-size:15.5px; max-width:620px; line-height:1.75; margin-bottom:0; }

/* ============ TRANG MÔ TẢ CÔNG VIỆC (JD) ============ */
.jd-badge-row{ position:relative; z-index:1; display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.jd-tag{ font-size:11px; font-weight:800; letter-spacing:.03em; color:#fff; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28); padding:5px 13px; border-radius:999px; }
.jd-quickfacts{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 28px; }
.jd-quickfacts div{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:16px; padding:14px 20px; min-width:190px; }
.jd-quickfacts b{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c-1); margin-bottom:6px; }
.jd-quickfacts span{ display:block; font-size:14px; font-weight:700; color:#fff; line-height:1.4; }
.jd-cta{ position:relative; z-index:1; display:flex; gap:14px; flex-wrap:wrap; }

.jd-intro{ font-size:15.5px; color:var(--ink-dim); line-height:1.8; max-width:820px; }
.jd-intro p{ margin-bottom:14px; }
.jd-intro p:last-child{ margin-bottom:0; }

.jd-list{ list-style:none; display:grid; gap:13px; max-width:820px; }
.jd-list li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-dim); line-height:1.7; }
.jd-list li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--c-4); font-weight:800; }

.jd-req-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:800px){ .jd-req-grid{ grid-template-columns:1fr; } }
.jd-req-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 26px 22px; box-shadow:0 12px 30px -24px rgba(6,24,138,0.3); }
.jd-req-card h4{ font-size:16px; margin-bottom:12px; color:var(--c-6); }
.jd-req-card p{ font-size:14px; color:var(--ink-dim); line-height:1.7; }
.jd-req-card ul{ list-style:none; display:grid; gap:8px; }
.jd-req-card ul li{ position:relative; padding-left:18px; font-size:13.8px; color:var(--ink-dim); line-height:1.65; }
.jd-req-card ul li::before{ content:'–'; position:absolute; left:0; color:var(--ink-dimmer); }
.jd-req-card ul.requirement-list{ gap:14px; }
.jd-req-card ul.requirement-list > li{ padding-left:24px; }
.jd-req-card ul.requirement-list > li::before{
  content:'–'; width:auto; height:auto; border-radius:0; top:0;
  background:none; box-shadow:none; color:var(--c-4); font-weight:800;
}
.jd-req-card ul.requirement-list > li > ul{ margin-top:8px; gap:6px; }
.jd-req-card ul.requirement-list > li > ul > li{ padding-left:20px; }
.jd-req-card ul.requirement-list > li > ul > li::before{
  content:'+'; width:auto; height:auto; border-radius:0; top:0;
  background:none; box-shadow:none; color:var(--c-4); font-weight:800;
}

.jd-loc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .jd-loc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .jd-loc-grid{ grid-template-columns:1fr; } }
.jd-loc-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 20px 18px; }
.jd-loc-card h4{ font-size:14.5px; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.jd-loc-card .dept-count{ margin-left:0; }
.jd-loc-card p, .jd-loc-card ul{ font-size:12.5px; color:var(--ink-dim); line-height:1.6; list-style:none; }
.jd-loc-card ul li{ margin-bottom:6px; }
.map-link{
  display:inline-flex; align-items:center; gap:5px; margin-top:9px; font-size:11.5px; font-weight:800;
  color:var(--c-5); text-decoration:none;
}
.map-link:hover{ text-decoration:underline; }
.office-item .map-link{ margin-top:8px; }

/* ============ SLIDESHOW VĂN PHÒNG (ảnh chuyển crossfade) ============ */
.office-slideshow{ position:relative; width:100%; aspect-ratio:16/9; border-radius:26px; overflow:hidden; box-shadow:0 24px 60px -30px rgba(6,24,138,0.4); background:var(--ink); }
.office-slideshow .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:officeFade 15s infinite; }
.office-slideshow .slide:nth-child(1){ animation-delay:0s; }
.office-slideshow .slide:nth-child(2){ animation-delay:5s; }
.office-slideshow .slide:nth-child(3){ animation-delay:10s; }
.office-slideshow::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,10,40,0.55) 0%, rgba(6,10,40,0) 32%); pointer-events:none; }
.office-slideshow-caption{ position:absolute; left:24px; bottom:20px; z-index:2; color:#fff; font-size:13.5px; font-weight:700; letter-spacing:.01em; text-shadow:0 2px 10px rgba(0,0,0,0.35); }
@keyframes officeFade{
  0%{ opacity:0; transform:scale(1.03); }
  3%{ opacity:1; }
  30%{ opacity:1; transform:scale(1.08); }
  33%{ opacity:0; }
  100%{ opacity:0; }
}
@media (max-width:640px){ .office-slideshow{ aspect-ratio:4/3; border-radius:20px; } }

/* SUBNAV (điều hướng mục trong từng trang) */
.subnav{ position:sticky; top:65px; z-index:60; background:rgba(255,255,255,0.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.subnav-inner{ max-width:1220px; margin:0 auto; padding:14px 32px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar{ display:none; }
.subnav a{ flex:none; font-size:13px; font-weight:800; color:var(--ink-dim); padding:9px 16px; border-radius:999px; border:1px solid var(--line); white-space:nowrap; transition:.2s; }
.subnav a:hover, .subnav a.active{ color:#fff; background: var(--grad-cool); border-color:transparent; }

/* PARTNER LOGO STRIP */
.logo-strip{ padding:44px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.logo-strip-inner{ display:flex; align-items:center; gap:48px; flex-wrap:wrap; justify-content:center; }
.logo-strip-label{ font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-dimmer); font-weight:800; flex:none; }
.logo-strip img{ height:32px; width:auto; opacity:0.85; transition:.2s; }
.logo-strip img:hover{ opacity:1; }

/* QUICK LINK CARDS */
.quicklink-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .quicklink-grid{ grid-template-columns:1fr; } }
.quicklink-card{
  padding:32px 28px; border-radius:var(--radius); background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow); transition:.3s; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
}
.quicklink-card::before{
  content:''; position:absolute; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle, rgba(7,200,249,0.14), transparent 70%);
  top:-70px; right:-60px;
}
.quicklink-card:hover{ transform:translateY(-6px); border-color:rgba(10,133,237,0.35); }
.quicklink-icon{
  width:50px; height:50px; border-radius:14px; position:relative; z-index:1;
  background: var(--grad-cool);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.quicklink-card h4{ font-size:18.5px; position:relative; z-index:1; }
.quicklink-card p{ font-size:13.5px; color:var(--ink-dim); line-height:1.65; position:relative; z-index:1; }
.quicklink-card .go{ font-size:13px; font-weight:800; color:var(--c-5); margin-top:auto; position:relative; z-index:1; }

/* FOOTER */
footer{ padding:70px 0 40px; background: var(--grad-deep); border-top:1px solid rgba(255,255,255,0.08); color: var(--on-dark-dim); }
.foot-brand{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.foot-logo-icon{ height:26px; width:auto; display:block; }
.foot-logo-text{ font-family:'Fraunces',serif; font-weight:700; font-size:16.5px; letter-spacing:-0.01em; color:#fff; white-space:nowrap; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:28px;}
@media (max-width:800px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-grid h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.1em; color:#fff; margin-bottom:16px; font-weight:800;}
.foot-grid ul{ list-style:none; display:grid; gap:10px; }
.foot-grid a{ font-size:13.5px; color: var(--on-dark-dim); }
.foot-grid a:hover{ color: var(--c-1); }
.foot-office b{ display:block; font-size:13.5px; color:#fff; margin-bottom:2px;}
.foot-office span{ font-size:12.5px; color: var(--on-dark-dim); display:block; line-height:1.5; margin-bottom:14px;}
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12.5px; color: var(--on-dark-dim); }

.fade-up{ animation: fadeUp .9s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

/* ============ DẤU ẤN — zigzag ảnh/chữ xen kẽ ============ */
.moment-list{ display:flex; flex-direction:column; gap:64px; }
.moment-row{
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
  opacity:0; transform:translateY(34px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
}
.moment-row.in-view{ opacity:1; transform:translateY(0); }
.moment-row.rev .moment-media{ order:2; }
.moment-row.rev .moment-text{ order:1; }

.moment-media{ position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 30px 60px -34px rgba(6,24,138,0.4); }
.moment-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.16,.8,.3,1); }
.moment-media:hover img{ transform:scale(1.07); }
.moment-media::after{ content:''; position:absolute; inset:0; border-radius:26px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14); pointer-events:none; }
.moment-num{
  position:absolute; top:18px; left:18px; z-index:2; font-family:'Fraunces',serif; font-weight:700; font-size:13px;
  color:#fff; background:rgba(10,14,60,0.45); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.25);
  padding:5px 13px; border-radius:999px; letter-spacing:.03em;
}

.moment-text{ padding:6px 4px; }
.moment-idiom{
  position:relative; font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:22px;
  line-height:1.4; color:var(--ink); padding-left:22px; margin-bottom:16px; border-left:3px solid var(--c-3);
}
.moment-idiom::before{ content:'“'; position:absolute; left:-6px; top:-14px; font-size:46px; font-family:'Fraunces',serif; color:var(--c-1); opacity:.6; }
.moment-title{ font-size:19px; margin-bottom:10px; line-height:1.35; }
.moment-text p.moment-desc{ font-size:14.5px; color:var(--ink-dim); line-height:1.8; }

@media (max-width:820px){
  .moment-row{ grid-template-columns:1fr; gap:24px; }
  .moment-row.rev .moment-media{ order:1; }
  .moment-row.rev .moment-text{ order:2; }
  .moment-idiom{ font-size:19px; }
}

/* PARTNER PILL WALL (trong eco-panel) */
.partner-wall{ margin-top:26px; padding-top:22px; border-top:1px dashed var(--line); }
.partner-wall .lbl{ font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dimmer); margin-bottom:10px; }
.pill-row{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ font-size:12px; font-weight:700; padding:6px 13px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink-dim); }

/* TIMELINE */
.timeline-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; }
@media (max-width:920px){ .timeline-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .timeline-grid{ grid-template-columns:1fr; } }
.tl-item{
  padding:26px 22px; border-radius:18px; background:#fff; border:1px solid var(--line);
  box-shadow: 0 12px 30px -22px rgba(6,24,138,0.35); position:relative; transition:.3s;
}
.tl-item:hover{ transform:translateY(-4px); box-shadow: var(--shadow); border-color:rgba(10,133,237,0.3); }
.tl-item .dot{
  width:14px; height:14px; border-radius:50%; background: var(--grad-cool); margin-bottom:14px;
  box-shadow: 0 0 0 5px var(--bg-tint-2);
}
.tl-item .yr{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; color:var(--c-6); margin-bottom:12px; display:block; }
.tl-item ul{ list-style:none; display:grid; gap:8px; }
.tl-item li{ font-size:12.8px; line-height:1.55; color:var(--ink-dim); padding-left:14px; position:relative; }
.tl-item li::before{ content:''; position:absolute; left:0; top:6px; width:5px; height:5px; border-radius:50%; background: var(--grad-cool); }

/* HERO PHOTO COLLAGE — thay cho sơ đồ trừu tượng, dùng ảnh thật */
.hero-collage{ position:relative; aspect-ratio:1/1; max-width:460px; margin:0 auto; z-index:1; }
.hc-photo{
  position:absolute; border-radius:20px; overflow:hidden; box-shadow: var(--shadow);
  border:5px solid #fff; background:var(--bg-tint);
}
.hc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hc-1{ width:64%; aspect-ratio:4/5; top:0; left:2%; z-index:3; transform:rotate(-3deg); }
.hc-2{ width:52%; aspect-ratio:1/1; bottom:4%; right:0; z-index:2; transform:rotate(4deg); }
.hc-3{ width:42%; aspect-ratio:1/1; top:8%; right:4%; z-index:1; transform:rotate(6deg); }
.hc-badge{
  position:absolute; left:6%; bottom:-4%; z-index:4;
  background:#fff; border-radius:16px; padding:14px 18px;
  box-shadow: var(--shadow); display:flex; align-items:center; gap:10px;
  font-family:'Fraunces',serif; font-weight:600; font-size:13px; color:var(--c-7);
}
.hc-badge .dot3{ width:34px; height:34px; border-radius:50%; background: var(--grad-cool); flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; }
@media (max-width:960px){ .hero-collage{ max-width:340px; margin-top:24px; } }

/* HERO MAP — bản đồ hoạt động GTV với hiệu ứng kết nối Hà Nội → Bắc Ninh, Nghệ An & ba miền */
.hero-map{ position:relative; max-width:270px; margin:0 auto; z-index:1; }
.hmap-glow{
  position:absolute; inset:-14% -30%; z-index:0;
  background: radial-gradient(circle at 50% 30%, rgba(7,200,249,0.38), transparent 65%);
  filter: blur(46px);
  animation: hmapGlow 4.5s ease-in-out infinite;
}
@keyframes hmapGlow{ 0%,100%{ opacity:.55; transform:scale(1);} 50%{ opacity:1; transform:scale(1.1);} }

.hmap-stage{ position:relative; z-index:1; animation: hmapFloat 5s ease-in-out infinite; }
@keyframes hmapFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

.hmap-img{
  position:relative; z-index:1; width:100%; height:auto; display:block;
  filter: drop-shadow(0 24px 40px rgba(10,45,181,0.28));
}

.hmap-pulse{
  position:absolute; z-index:3; width:16px; height:16px; border-radius:50%;
  transform:translate(-50%,-50%); background:transparent;
  box-shadow:0 0 0 0 rgba(7,200,249,0.65);
  animation: hmapPulse 2.4s ease-out infinite;
}
.hmap-pulse.p1{ left:38.3%; top:19.3%; }
.hmap-pulse.p2{ left:47.7%; top:19.9%; animation-delay:.6s; }
.hmap-pulse.p3{ left:33.8%; top:32.5%; animation-delay:1.2s; }
@keyframes hmapPulse{
  0%{ box-shadow:0 0 0 0 rgba(7,200,249,0.65); }
  70%{ box-shadow:0 0 0 16px rgba(7,200,249,0); }
  100%{ box-shadow:0 0 0 0 rgba(7,200,249,0); }
}

@media (max-width:960px){ .hero-map{ max-width:210px; margin-top:20px; } }

/* ============ TẦM NHÌN & GIÁ TRỊ CỐT LÕI ============ */
.vision-band{
  position:relative; overflow:hidden; border-radius:28px;
  background: var(--grad-deep);
  padding:44px 48px; text-align:center; margin-bottom:48px;
}
.vision-band::before{
  content:''; position:absolute; width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(7,200,249,0.32), transparent 70%);
  top:-180px; left:-100px;
}
.vision-band::after{
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, var(--c-2), transparent 72%); opacity:.22;
  bottom:-150px; right:-90px;
}
.vision-band .vb-label{
  position:relative; z-index:1; font-size:11.5px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--c-1); margin-bottom:14px;
}
.vision-band .vb-text{
  position:relative; z-index:1; font-family:'Fraunces',serif; font-weight:600; font-size:clamp(19px,2.4vw,27px);
  line-height:1.4; color:#fff; max-width:820px; margin:0 auto;
}

.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{
  position:relative; padding:34px 28px 30px; border-radius:22px; background:#fff;
  border:1px solid var(--line); box-shadow: 0 12px 30px -22px rgba(6,24,138,0.35);
  overflow:hidden; transition:.35s;
}
.value-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background: var(--grad-brand); transform:scaleX(0); transform-origin:left; transition:.4s;
}
.value-card:hover{ transform:translateY(-7px); box-shadow: var(--shadow); border-color:rgba(10,133,237,0.32); }
.value-card:hover::before{ transform:scaleX(1); }
.value-num{
  width:44px; height:44px; border-radius:50%; margin-bottom:20px;
  background: var(--grad-cool); color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 28px -12px rgba(10,133,237,0.55);
}
.value-card h4{ font-size:19px; margin-bottom:12px; line-height:1.3; }
.value-card p{ font-size:13.8px; color:var(--ink-dim); line-height:1.7; }

/* ============ CÂU CHUYỆN GTV (story flow) ============ */
.story-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; position:relative; }
@media (max-width:900px){ .story-flow{ grid-template-columns:1fr; gap:40px; } }
.story-step{
  position:relative; padding:20px; margin:-20px; border-radius:20px;
  transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.story-step:hover{
  background:#fff; transform:translateY(-6px);
  box-shadow: var(--shadow);
}
@media (max-width:900px){ .story-step{ margin:-12px; padding:12px; } .story-step:hover{ transform:translateY(-3px); } }

.story-arrow{
  position:absolute; top:30px; right:-13px; width:32px; height:32px; border-radius:50%;
  background:#fff; border:1.5px solid var(--line); box-shadow:0 6px 16px -8px rgba(6,24,138,0.28);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--c-3);
  z-index:2; transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.story-step:hover .story-arrow{
  background:var(--c-3); color:#fff; transform:translateX(5px) scale(1.12);
  box-shadow:0 12px 26px -8px rgba(37,99,235,0.55);
}
@media (max-width:900px){
  .story-arrow{ top:auto; bottom:-24px; right:auto; left:32px; transform:rotate(90deg); }
  .story-step:hover .story-arrow{ transform:rotate(90deg) translateX(4px) scale(1.12); }
}

.story-yr{
  display:inline-block; font-family:'Fraunces',serif; font-weight:700; font-size:13px; letter-spacing:0.02em;
  color:var(--c-6); background:var(--bg-tint-2); padding:5px 14px; border-radius:999px; margin-bottom:14px;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.story-step:hover .story-yr{ background:var(--c-3); color:#fff; box-shadow:0 10px 22px -10px rgba(37,99,235,.55); }
.story-step h4{ font-size:16.5px; margin-bottom:8px; line-height:1.35; transition:color .2s ease; }
.story-step:hover h4{ color:var(--c-5); }
.story-step p{ font-size:13px; color:var(--ink-dim); line-height:1.65; }

/* nhóm nhãn phụ trong eco-panel (hành trình, công nghệ, sức mạnh cốt lõi) */
.journey-row{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.journey-row .arrow{ font-size:11px; color:var(--ink-dimmer); }
.eco-soft{ color:var(--ink-dim); font-size:15px; line-height:1.75; margin-bottom:20px; padding:16px 18px; background:var(--bg-tint); border-radius:14px; border-left:3px solid var(--c-3); }

/* Giới thiệu GZH trên trang JD */
.gzh-about{ display:grid; grid-template-columns:150px 1fr; gap:28px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.gzh-about-logo{ display:flex; align-items:center; justify-content:center; background:var(--bg-tint); border-radius:var(--radius-sm); padding:18px; }
.gzh-about-logo img{ width:100%; max-width:110px; height:auto; display:block; }
.gzh-about-tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--c-4); margin-bottom:6px; }
.gzh-about-body h3{ font-size:20px; line-height:1.3; color:var(--c-8); margin-bottom:10px; }
.gzh-about-body p{ font-size:15px; line-height:1.75; color:var(--ink-dim); margin-bottom:12px; }
.gzh-about-body .pill-row{ margin-top:16px; }
@media (max-width:640px){ .gzh-about{ grid-template-columns:1fr; padding:22px; } .gzh-about-logo{ max-width:150px; } }