/* =========================================================
   GODA — Giải pháp Quảng cáo Xanh & Đô thị Thông minh
   Redesigned interface, layout inspired by quangcaongoaitroi.com
   ========================================================= */

:root{
  --primary:#246BFD;
  --primary-dark:#0846C6;
  --primary-light:#E9F0FF;
  --eco:#1FAE6B;
  --eco-light:#E6F8EF;
  --dark:#0C1830;
  --dark-2:#12213F;
  --heading:#0B1526;
  --text:#5B6472;
  --text-light:#8992A3;
  --bg-gray:#F4F7FC;
  --white:#FFFFFF;
  --border:#E6EBF3;
  --radius-sm:8px;
  --radius:16px;
  --radius-lg:26px;
  --shadow-sm:0 4px 16px rgba(12,24,48,.06);
  --shadow:0 14px 40px rgba(12,24,48,.10);
  --shadow-lg:0 24px 60px rgba(12,24,48,.16);
  --container:1240px;
  --font:'Be Vietnam Pro', 'Segoe UI', Roboto, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
[id]{scroll-margin-top:100px;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--white);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5{color:var(--heading);font-weight:700;line-height:1.25;margin:0 0 16px;}
p{margin:0 0 16px;}
button{font-family:inherit;cursor:pointer;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}

/* ---------- utility ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--primary);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--primary);display:inline-block;border-radius:2px;}
.section{padding:96px 0;}
.section-sm{padding:64px 0;}
.section-title{max-width:660px;margin:0 auto 56px;text-align:center;}
.section-title h2{font-size:38px;margin-bottom:14px;}
.section-title p{font-size:16.5px;margin:0;}
.section-title.left{margin:0 0 40px;text-align:left;}
.bg-gray{background:var(--bg-gray);}
.text-center{text-align:center;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-weight:600;font-size:15px;
  border:2px solid transparent;transition:.25s ease;white-space:nowrap;
}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 24px rgba(36,107,253,.28);}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 16px 30px rgba(36,107,253,.35);}
.btn-outline{border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px);}
.btn-dark{background:var(--heading);color:#fff;}
.btn-dark:hover{background:var(--primary);transform:translateY(-2px);}
.btn-sm{padding:10px 22px;font-size:13.5px;}
.btn svg{width:16px;height:16px;flex:none;}

/* ---------- topbar ---------- */
.topbar{background:var(--dark);color:rgba(255,255,255,.78);font-size:13.5px;}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:44px;}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:22px;}
.topbar a{transition:.2s;}
.topbar-left a:hover{color:#fff;}
.topbar-left span{display:inline-flex;align-items:center;gap:8px;}
.topbar-left svg{width:14px;height:14px;color:var(--primary);flex:none;}
.topbar-right .socials{display:flex;gap:10px;}
.topbar-right .socials a{
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
}
.topbar-right .socials svg{width:13px;height:13px;}
.topbar-right .socials a:hover{background:var(--primary);}
.topbar-eco{display:inline-flex;align-items:center;gap:6px;color:#5BD69B;font-weight:600;}
.topbar-eco svg{width:14px;height:14px;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:200;background:#fff;
  box-shadow:0 1px 0 var(--border);
}
.site-header .head-inner{display:flex;align-items:center;justify-content:space-between;height:88px;gap:24px;}
.brand{display:flex;align-items:center;flex:none;}
.brand img{height:36px;width:auto;}
.main-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.main-nav > ul{display:flex;align-items:center;gap:4px;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li > a{
  display:flex;align-items:center;gap:5px;padding:14px 11px;font-weight:600;font-size:14px;
  color:var(--heading);border-radius:8px;transition:.2s;white-space:nowrap;
}
.main-nav > ul > li > a:hover,.main-nav > ul > li.active > a{color:var(--primary);}
.main-nav > ul > li.has-dd > a svg{width:10px;height:10px;transition:.2s;}
.dropdown{
  position:absolute;top:100%;left:0;background:#fff;min-width:250px;
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);border:1px solid var(--border);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;
}
.main-nav li.has-dd:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown li a{display:block;padding:10px 14px;border-radius:6px;font-size:14.5px;font-weight:500;color:var(--text);}
.dropdown li a:hover{background:var(--primary-light);color:var(--primary);}

/* mega dropdown (multi-column, quangcaongoaitroi.com-style dense flyout) */
.dropdown.mega{
  display:flex;gap:6px;min-width:520px;padding:18px;left:50%;transform:translate(-50%,8px);
}
.dropdown.mega.cols-3{min-width:740px;}
.main-nav li.has-dd:hover .dropdown.mega{transform:translate(-50%,0);}
.dropdown.mega .dd-col{flex:1;padding:0 8px;}
.dropdown.mega .dd-col + .dd-col{border-left:1px solid var(--border);}
.dropdown.mega .dd-col h5{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);
  font-weight:700;margin:2px 14px 10px;
}
.dropdown.mega .dd-col li a{display:flex;align-items:center;gap:10px;padding:10px 14px;}
.dropdown.mega .dd-col li a svg{width:16px;height:16px;color:var(--primary);flex:none;}
.dropdown.mega .dd-foot{
  grid-column:1/-1;margin-top:8px;padding:14px;border-radius:var(--radius-sm);
  background:var(--primary-light);display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.head-actions{display:flex;align-items:center;gap:18px;flex:none;}
.head-phone{display:flex;align-items:center;gap:10px;}
.head-phone .ico{
  width:42px;height:42px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.head-phone .ico svg{width:18px;height:18px;}
.head-phone small{display:block;color:var(--text-light);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;}
.head-phone strong{display:block;font-size:15.5px;color:var(--heading);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px;}
.nav-toggle span{width:24px;height:2px;background:var(--heading);border-radius:2px;}

/* ---------- page header (inner pages) ---------- */
.page-header{
  position:relative;padding:150px 0 80px;background:var(--dark);color:#fff;overflow:hidden;
  background-size:cover;background-position:center;
}
.page-header::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(6,16,36,.94) 10%,rgba(15,45,110,.72));
}
.page-header .container{position:relative;z-index:2;}
.page-header h1{color:#fff;font-size:42px;margin-bottom:10px;}
.breadcrumb{display:flex;gap:8px;align-items:center;color:rgba(255,255,255,.65);font-size:14px;font-weight:500;}
.breadcrumb a:hover{color:#fff;}
.page-header .shape{
  position:absolute;right:-80px;top:-80px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(36,107,253,.5),transparent 70%);z-index:1;
}

/* ---------- banner slider (pure image, nivoSlider-style) ---------- */
.banner-slider{position:relative;width:100%;aspect-ratio:2560/933;background:var(--dark);overflow:hidden;}
.banner-slider .hero-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease;
}
.banner-slider .hero-slide.active{opacity:1;}

/* ---------- hero intro (headline / CTA / stats) ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(115deg,#060e20 20%,#0b2a66 65%,#246BFD 130%);}
.hero-inner{position:relative;z-index:3;padding:88px 0 96px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .8fr;gap:40px;align-items:center;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);padding:8px 18px;border-radius:100px;
  font-size:13px;font-weight:600;letter-spacing:.05em;margin-bottom:24px;color:#BFD4FF;
}
.hero-eyebrow svg{width:14px;height:14px;color:#5BD69B;}
.hero h1{
  color:#fff;font-size:54px;line-height:1.16;margin-bottom:22px;letter-spacing:-.5px;
}
.hero h1 .hl-green{color:#5BD69B;}
.hero h1 .hl-blue{color:#7EA6FF;}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.78);max-width:540px;margin-bottom:34px;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}
.hero-stats{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:28px;max-width:560px;}
.hero-stats div{flex:1;min-width:120px;padding-right:20px;}
.hero-stats strong{display:block;font-size:28px;color:#fff;font-weight:800;}
.hero-stats span{font-size:13px;color:rgba(255,255,255,.6);}
.hero-visual{position:relative;display:flex;justify-content:center;}
.hero-visual .card{
  position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:28px;padding:22px;backdrop-filter:blur(6px);max-width:340px;
}
.hero-visual img{border-radius:18px;}
.hero-visual .badge{
  position:absolute;background:#fff;color:var(--heading);border-radius:16px;padding:14px 18px;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;font-size:13px;
}
.hero-visual .badge strong{display:block;font-size:17px;color:var(--heading);}
.hero-visual .badge span{color:var(--text-light);font-size:12px;}
.hero-visual .badge-1{top:8%;left:-14%;}
.hero-visual .badge-2{bottom:6%;right:-16%;}
.hero-visual .badge-icon{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;
}
.badge-1 .badge-icon{background:var(--eco-light);color:var(--eco);}
.badge-2 .badge-icon{background:var(--primary-light);color:var(--primary);}
.hero-visual .badge-icon svg{width:20px;height:20px;}
.hero-dots{position:absolute;z-index:4;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
.hero-dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(12,24,48,.25);border:0;padding:0;transition:.2s;}
.hero-dots button.active{width:26px;border-radius:6px;background:#fff;}

/* prev/next slider arrows (nivoSlider-style manual navigation) */
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(8,16,34,.35);color:#fff;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:.25s;
}
.hero-arrow:hover{background:var(--primary);border-color:var(--primary);}
.hero-arrow svg{width:20px;height:20px;}
.hero-arrow.prev{left:22px;}
.hero-arrow.next{right:22px;}
@media (max-width:860px){
  .hero-arrow{width:40px;height:40px;}
  .hero-arrow.prev{left:10px;}
  .hero-arrow.next{right:10px;}
}
@media (max-width:600px){.hero-arrow{display:none;}}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.86fr 1fr;gap:64px;align-items:center;}
.about-media{position:relative;}
.about-media .stack{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.about-media img{border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover;width:100%;height:100%;}
.about-media .tall{grid-row:span 2;height:100%;}
.about-media .col-a img{height:220px;}
.about-media .col-b img{height:150px;}
.about-media .exp-badge{
  position:absolute;left:-26px;bottom:-26px;background:var(--primary);color:#fff;
  border-radius:var(--radius);padding:22px 26px;box-shadow:0 20px 40px rgba(36,107,253,.35);
  text-align:center;
}
.about-media .exp-badge strong{display:block;font-size:36px;font-weight:800;line-height:1;}
.about-media .exp-badge span{font-size:12.5px;opacity:.85;}
.about-list{display:grid;gap:16px;margin:28px 0 32px;}
.about-list li{display:flex;gap:14px;align-items:flex-start;}
.about-list .chk{
  width:26px;height:26px;border-radius:50%;background:var(--eco-light);color:var(--eco);
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px;
}
.about-list .chk svg{width:14px;height:14px;}
.about-list strong{color:var(--heading);display:block;font-size:15.5px;}
.about-list p{margin:2px 0 0;font-size:14.5px;}

/* ---------- products / services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.svc-card{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--dark);
  min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
  box-shadow:var(--shadow-sm);isolation:isolate;
}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s ease;}
.svc-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(6,14,32,.95) 18%,rgba(6,14,32,.78) 52%,rgba(6,14,32,.3) 100%);
}
.svc-card:hover img{transform:scale(1.08);}
.svc-card .num{position:relative;z-index:2;color:rgba(255,255,255,.55);font-weight:700;font-size:13px;margin-bottom:auto;}
.svc-card .body{position:relative;z-index:2;color:#fff;}
.svc-card h3{color:#fff;font-size:19px;margin-bottom:8px;}
.svc-card p{color:rgba(255,255,255,.72);font-size:13.8px;margin-bottom:14px;}
.svc-card .more{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:13.5px;}
.svc-card .more svg{width:14px;height:14px;transition:.2s;}
.svc-card:hover .more svg{transform:translateX(4px);}
.svc-card.solid{background:var(--primary-light);display:block;padding:30px;}
.svc-card.solid .icon{
  width:56px;height:56px;border-radius:14px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.svc-card.solid .icon svg{width:26px;height:26px;}
.svc-card.solid h3{font-size:19px;color:var(--heading);}
.svc-card.solid p{color:var(--text);font-size:14px;}
.svc-card.solid .more{color:var(--primary);}

/* ---------- cta band ---------- */
.cta-band{
  position:relative;background:var(--dark);color:#fff;padding:90px 0;overflow:hidden;
  background-size:cover;background-position:center;
}
.cta-band::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,14,32,.95),rgba(15,45,110,.78));}
.cta-band .container{position:relative;z-index:2;}
.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.cta-grid h2{color:#fff;font-size:32px;max-width:560px;margin-bottom:10px;}
.cta-grid p{color:rgba(255,255,255,.72);max-width:520px;margin:0;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- stats strip ---------- */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.stats-strip div{background:#fff;padding:34px 20px;text-align:center;border-right:1px solid var(--border);}
.stats-strip div:last-child{border-right:0;}
.stats-strip strong{display:block;font-size:34px;font-weight:800;color:var(--primary);}
.stats-strip span{font-size:13.5px;color:var(--text-light);}

/* ---------- projects gallery ---------- */
.filter-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;}
.filter-bar button{
  padding:10px 20px;border-radius:100px;border:1px solid var(--border);background:#fff;
  font-weight:600;font-size:13.5px;color:var(--text);transition:.2s;
}
.filter-bar button:hover{border-color:var(--primary);color:var(--primary);}
.filter-bar button.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.gallery-grid.compact{grid-template-columns:repeat(3,1fr);}
.gallery-item{
  position:relative;border-radius:var(--radius);overflow:hidden;cursor:zoom-in;
  box-shadow:var(--shadow-sm);aspect-ratio:4/3;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.07);}
.gallery-item .tag{
  position:absolute;left:14px;top:14px;background:rgba(255,255,255,.92);color:var(--heading);
  font-size:12px;font-weight:700;padding:6px 12px;border-radius:100px;z-index:2;
}
.gallery-item .ov{
  position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,14,32,.85),transparent 55%);
  display:flex;align-items:flex-end;padding:16px;opacity:0;transition:.25s;
}
.gallery-item:hover .ov{opacity:1;}
.gallery-item .ov span{color:#fff;font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px;}
.gallery-item .ov svg{width:16px;height:16px;}
.gallery-more{text-align:center;margin-top:44px;}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(6,10,20,.92);z-index:999;display:none;align-items:center;justify-content:center;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(1100px,92vw);max-height:86vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.lightbox .lb-close,.lightbox .lb-nav{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.lightbox .lb-close{top:26px;right:26px;}
.lightbox .lb-close svg,.lightbox .lb-nav svg{width:20px;height:20px;}
.lightbox .lb-prev{left:26px;top:50%;transform:translateY(-50%);}
.lightbox .lb-next{right:26px;top:50%;transform:translateY(-50%);}
.lightbox .lb-close:hover,.lightbox .lb-nav:hover{background:var(--primary);border-color:var(--primary);}

/* ---------- why choose us ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.why-card{text-align:center;padding:38px 26px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:.25s;}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent;}
.why-card .icon{
  width:66px;height:66px;border-radius:18px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;
  background:var(--primary-light);color:var(--primary);
}
.why-card:nth-child(2) .icon{background:var(--eco-light);color:var(--eco);}
.why-card:nth-child(4) .icon{background:#FFF1E3;color:#F2994A;}
.why-card .icon svg{width:30px;height:30px;}
.why-card h3{font-size:18px;margin-bottom:10px;}
.why-card p{font-size:14px;margin:0;}

/* ---------- clients ---------- */
.clients-wrap{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:44px 0;}
.clients-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;}
.client-logo{
  display:flex;align-items:center;justify-content:center;height:84px;width:168px;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;
  padding:18px 22px;transition:.25s;
}
.client-logo img{
  max-height:100%;max-width:100%;object-fit:contain;
  filter:grayscale(1) opacity(.55);transition:.25s;
}
.client-logo:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);transform:translateY(-3px);}
.client-logo:hover img{filter:grayscale(0) opacity(1);}
.client-logo span{font-size:11px;font-weight:700;color:var(--text-light);text-align:center;letter-spacing:.02em;}

/* ---------- news / press ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.news-card{border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:.25s;display:flex;flex-direction:column;}
.news-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);}
.news-thumb{position:relative;height:210px;overflow:hidden;}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.news-card:hover .news-thumb img{transform:scale(1.08);}
.news-thumb .src{
  position:absolute;left:14px;bottom:14px;background:var(--primary);color:#fff;
  font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:100px;letter-spacing:.03em;
}
.news-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1;}
.news-date{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-light);font-weight:600;margin-bottom:10px;}
.news-date svg{width:14px;height:14px;}
.news-body h3{font-size:17.5px;line-height:1.4;margin-bottom:10px;}
.news-body p{font-size:14px;margin-bottom:16px;flex:1;}
.news-link{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:700;font-size:13.5px;}
.news-link svg{width:14px;height:14px;}

/* ---------- newsletter ---------- */
.newsletter{background:linear-gradient(120deg,var(--primary),#123a9e);border-radius:var(--radius-lg);padding:48px 56px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;color:#fff;}
.newsletter h3{color:#fff;font-size:24px;margin-bottom:6px;}
.newsletter p{color:rgba(255,255,255,.8);margin:0;}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap;}
.newsletter input{
  border:0;padding:15px 20px;border-radius:100px;min-width:260px;font-family:inherit;font-size:14.5px;
}
.newsletter button{border:0;background:var(--heading);color:#fff;padding:15px 26px;border-radius:100px;font-weight:600;}
.newsletter button:hover{background:#000;}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:rgba(255,255,255,.68);padding-top:90px;}
.footer-grid{display:grid;grid-template-columns:1.3fr .9fr .9fr 1.1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-logo{display:inline-block;background:#fff;padding:10px 16px;border-radius:10px;margin-bottom:20px;}
.footer-logo img{height:30px;}
.site-footer p{font-size:14.5px;line-height:1.75;}
.footer-socials{display:flex;gap:10px;margin-top:22px;}
.footer-socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;}
.footer-socials svg{width:16px;height:16px;}
.footer-socials a:hover{background:var(--primary);}
.site-footer h4{color:#fff;font-size:16px;margin-bottom:22px;}
.footer-links li{margin-bottom:13px;}
.footer-links a{font-size:14.5px;transition:.2s;display:inline-flex;align-items:center;gap:8px;}
.footer-links a:hover{color:#fff;padding-left:4px;}
.footer-contact li{display:flex;gap:14px;margin-bottom:18px;font-size:14.5px;}
.footer-contact .ico{width:36px;height:36px;border-radius:9px;background:rgba(36,107,253,.18);color:#7EA6FF;display:flex;align-items:center;justify-content:center;flex:none;}
.footer-contact .ico svg{width:16px;height:16px;}
.footer-contact strong{display:block;color:#fff;font-size:14px;margin-bottom:2px;}
.footer-bottom{padding:26px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13.5px;}
.footer-bottom a:hover{color:#fff;}
.footer-bottom-links{display:flex;gap:22px;}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start;}
.contact-info-card{background:var(--dark);color:#fff;border-radius:var(--radius);padding:40px;}
.contact-info-card h3{color:#fff;font-size:22px;margin-bottom:8px;}
.contact-info-card > p{color:rgba(255,255,255,.65);margin-bottom:30px;font-size:14.5px;}
.contact-info-card ul{display:grid;gap:22px;}
.contact-info-card li{display:flex;gap:16px;}
.contact-info-card .ico{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex:none;color:#7EA6FF;}
.contact-info-card .ico svg{width:20px;height:20px;}
.contact-info-card strong{display:block;color:#fff;font-size:14.5px;margin-bottom:3px;}
.contact-info-card span,.contact-info-card a{font-size:14px;color:rgba(255,255,255,.7);}
.map-embed{border-radius:var(--radius);overflow:hidden;margin-top:26px;box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.08);}
.map-embed iframe{width:100%;height:220px;border:0;display:block;filter:grayscale(.2);}
.contact-form-card{background:#fff;border-radius:var(--radius);padding:44px;box-shadow:var(--shadow);border:1px solid var(--border);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group.full{grid-column:1/-1;}
.form-group label{font-size:13.5px;font-weight:600;color:var(--heading);}
.form-group input,.form-group select,.form-group textarea{
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 16px;font-family:inherit;
  font-size:14.5px;color:var(--heading);background:var(--bg-gray);transition:.2s;resize:vertical;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px var(--primary-light);}
.form-note{font-size:12.5px;color:var(--text-light);margin-top:14px;}

/* ---------- about page timeline / values ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.timeline{position:relative;margin-left:6px;padding-left:34px;border-left:2px dashed var(--border);}
.timeline li{position:relative;padding-bottom:34px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{
  content:"";position:absolute;left:-42px;top:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--primary);
}
.timeline strong{display:block;color:var(--primary);font-size:13.5px;font-weight:800;letter-spacing:.04em;margin-bottom:4px;}
.timeline h4{font-size:16.5px;margin-bottom:6px;}
.timeline p{font-size:14px;margin:0;}
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:10px;}
.value-card{padding:26px;border-radius:var(--radius);background:var(--bg-gray);}
.value-card .icon{width:48px;height:48px;border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;color:var(--primary);margin-bottom:14px;}
.value-card .icon svg{width:22px;height:22px;}
.value-card h4{font-size:16px;margin-bottom:6px;}
.value-card p{font-size:13.6px;margin:0;}

/* ---------- back to top ---------- */
.back-top{
  position:fixed;right:26px;bottom:26px;width:48px;height:48px;border-radius:50%;
  background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);z-index:150;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;border:0;
}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-top svg{width:20px;height:20px;}

/* ---------- floating online support ---------- */
.online-support{
  position:fixed;right:20px;bottom:22px;z-index:170;display:flex;flex-direction:column;gap:12px;
  align-items:flex-end;
}
.online-support a{
  position:relative;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 10px 24px rgba(12,24,48,.22);transition:.2s;flex:none;
}
.online-support a:hover{transform:scale(1.08);}
.online-support a svg{width:24px;height:24px;}
.online-support a img{width:26px;height:26px;}
.online-support .os-fb{background:#1877F2;}
.online-support .os-messenger{background:linear-gradient(135deg,#00B2FF,#006AFF 50%,#B900E8);}
.online-support .os-zalo{background:#0068FF;}
.online-support .os-phone{background:#F53D3D;}
.online-support .os-phone::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:#F53D3D;opacity:.55;
  animation:os-pulse 1.8s ease-out infinite;
}
@keyframes os-pulse{
  0%{transform:scale(1);opacity:.55;}
  100%{transform:scale(1.9);opacity:0;}
}
.online-support .os-tip{
  position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--heading);color:#fff;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:8px;
  white-space:nowrap;opacity:0;visibility:hidden;transition:.2s;pointer-events:none;
}
.online-support .os-tip::before{
  content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--heading);
}
.online-support a:hover .os-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);}
.back-top{right:88px;}
@media (max-width:600px){
  .online-support{right:12px;bottom:16px;gap:10px;}
  .online-support a{width:46px;height:46px;}
  .online-support a svg{width:21px;height:21px;}
  .online-support .os-tip{display:none;}
  .back-top{right:76px;}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .about-grid{grid-template-columns:1fr;}
  .story-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .main-nav,.head-phone{display:none;}
  .nav-toggle{display:flex;}
  .topbar-left span:not(:first-child){display:none;}
  .hero h1{font-size:38px;}
  .section{padding:70px 0;}
  .news-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .stats-strip div{border-bottom:1px solid var(--border);}
  .cta-grid{flex-direction:column;align-items:flex-start;}
  .newsletter{padding:34px;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .svc-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-stats div{min-width:45%;}
  .section-title h2{font-size:28px;}
  .hero h1{font-size:30px;}
  .lightbox .lb-prev{left:8px;}
  .lightbox .lb-next{right:8px;}
}

/* mobile nav panel */
.mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:#fff;z-index:300;
  transform:translateX(100%);transition:transform .3s ease,box-shadow .3s ease,visibility 0s .3s;box-shadow:none;visibility:hidden;
  padding:26px;overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0);box-shadow:-10px 0 40px rgba(0,0,0,.2);visibility:visible;transition:transform .3s ease,box-shadow .3s ease,visibility 0s;}
.mobile-nav .mn-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.mobile-nav .mn-close{background:var(--bg-gray);border:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.mobile-nav .mn-close svg{width:18px;height:18px;}
.mobile-nav ul li{border-bottom:1px solid var(--border);}
.mobile-nav ul li a{display:block;padding:14px 4px;font-weight:600;color:var(--heading);}
.mobile-nav .sub-menu{padding-left:14px;}
.mobile-nav .sub-menu li{border-bottom:0;}
.mobile-nav .sub-menu a{font-weight:500;font-size:14px;color:var(--text);padding:9px 4px;}
.nav-scrim{position:fixed;inset:0;background:rgba(6,10,20,.5);z-index:280;opacity:0;visibility:hidden;transition:.25s;}
.nav-scrim.open{opacity:1;visibility:visible;}

/* animations */
[data-aos]{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
[data-aos].aos-in{opacity:1;transform:translateY(0);}

/* =========================================================
   Detail pages (sub-menu pages): media frame, feature cards,
   steps, FAQ, related cards, spec table, product rows
   ========================================================= */
.media-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--primary-light);}
.media-frame img{width:100%;height:100%;display:block;object-fit:cover;}
.media-frame.soft{padding:44px 30px;background:linear-gradient(135deg,#E9F0FF,#C9DCFF);display:flex;justify-content:center;align-items:center;}
.media-frame.soft img{width:auto;max-width:100%;max-height:600px;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(8,30,90,.28));}
.media-frame .m-tag{position:absolute;left:22px;bottom:22px;background:#fff;color:var(--heading);font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:100px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:8px;}
.media-frame .m-tag i{width:9px;height:9px;border-radius:50%;background:var(--eco);display:block;}
.detail-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}
.detail-lead{font-size:17.5px;}

.svc-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.svc-detail-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.svc-detail-card{padding:30px;border-radius:var(--radius);background:#fff;border:1px solid var(--border);transition:.25s;}
.svc-detail-card:hover{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-4px);}
.svc-detail-card .icon{width:52px;height:52px;border-radius:14px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.svc-detail-card .icon svg{width:24px;height:24px;}
.svc-detail-card h3{font-size:18px;margin-bottom:10px;}
.svc-detail-card p{font-size:14px;margin:0;}
.svc-detail-card .more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--primary);font-weight:700;font-size:14px;}
.svc-detail-card .more svg{width:14px;height:14px;transition:.2s;}
.svc-detail-card:hover .more svg{transform:translateX(4px);}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.steps.n3{grid-template-columns:repeat(3,1fr);}
.steps.n5{grid-template-columns:repeat(5,1fr);}
.step{position:relative;padding:32px 26px 28px;border-radius:var(--radius);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.step .no{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 10px 22px rgba(36,107,253,.3);}
.step h4{font-size:17px;margin-bottom:8px;}
.step p{font-size:14px;margin:0;}
.bg-gray .step{box-shadow:none;}

.faq{max-width:860px;margin:0 auto;}
.faq details{border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;margin-bottom:14px;transition:.2s;}
.faq details[open]{border-color:var(--primary);box-shadow:var(--shadow-sm);}
.faq summary{cursor:pointer;padding:20px 26px;font-weight:700;font-size:16.5px;color:var(--heading);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:28px;line-height:1;color:var(--primary);font-weight:500;flex:none;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{padding:0 26px 22px;margin:0;font-size:15px;}

.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.rel-card{border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--border);transition:.25s;display:flex;flex-direction:column;}
.rel-card:hover{box-shadow:var(--shadow);transform:translateY(-5px);border-color:transparent;}
.rel-card .th{aspect-ratio:3/2;background:var(--primary-light);overflow:hidden;}
.rel-card .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.rel-card:hover .th img{transform:scale(1.06);}
.rel-card .bd{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.rel-card h3{font-size:18px;margin-bottom:8px;}
.rel-card p{font-size:14px;margin-bottom:14px;flex:1;}
.rel-card .go{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:700;font-size:13.5px;}
.rel-card .go svg{width:14px;height:14px;}

.spec-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;}
.spec-table th,.spec-table td{padding:18px 26px;text-align:left;font-size:15px;border-bottom:1px solid var(--border);}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0;}
.spec-table th{width:34%;background:var(--bg-gray);color:var(--heading);font-weight:700;}
.spec-table td{color:var(--text);}

.prod-row{display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch;border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-bottom:34px;}
.prod-row.rev{grid-template-columns:1.1fr .9fr;}
.prod-row.rev .pr-media{order:2;}
.pr-media{position:relative;min-height:340px;background:linear-gradient(135deg,#E9F0FF,#C9DCFF);display:flex;align-items:center;justify-content:center;}
.pr-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.pr-media.soft img{position:static;width:auto;max-height:420px;object-fit:contain;padding:26px 0;filter:drop-shadow(0 26px 34px rgba(8,30,90,.25));}
.pr-body{padding:44px;display:flex;flex-direction:column;justify-content:center;}
.pr-body .pr-no{font-weight:800;color:var(--primary);letter-spacing:.14em;font-size:13px;margin-bottom:10px;}
.pr-body h3{font-size:24px;margin-bottom:12px;}
.pr-body p{font-size:15px;}
.pr-body ul{display:grid;gap:9px;margin:6px 0 24px;}
.pr-body li{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--heading);font-weight:500;}
.pr-body li svg{width:16px;height:16px;color:var(--eco);flex:none;}

@media (max-width:1100px){
  .steps,.steps.n5{grid-template-columns:repeat(2,1fr);}
  .svc-detail-grid.cols-3,.rel-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .prod-row,.prod-row.rev{grid-template-columns:1fr;}
  .prod-row.rev .pr-media{order:0;}
  .pr-media{min-height:260px;}
  .pr-body{padding:28px;}
}
@media (max-width:640px){
  .steps,.steps.n3,.steps.n5,.svc-detail-grid,.svc-detail-grid.cols-3,.rel-grid{grid-template-columns:1fr;}
  .spec-table th{width:42%;}
  .spec-table th,.spec-table td{padding:14px 16px;font-size:14px;}
  .media-frame.soft{padding:28px 16px;}
}

/* ---------- Be Vietnam Pro is wider than the previous font: keep the 10-item nav on one line ---------- */
@media (max-width:1280px){
  .main-nav > ul{gap:2px;}
  .main-nav > ul > li > a{padding:14px 9px;font-size:13.5px;gap:4px;}
  .site-header .head-inner{gap:16px;}
}
@media (max-width:1140px){
  .main-nav,.head-phone{display:none;}
  .nav-toggle{display:flex;}
}
.hero-stats{max-width:680px;}
.hero-stats div{padding-right:12px;}

/* light "solid" service cards must not get the dark image-overlay gradient */
.svc-card.solid::after{display:none;}

/* =========================================================
   Case-study article pages
   ========================================================= */
.case-layout{display:grid;grid-template-columns:1.55fr .9fr;gap:52px;align-items:start;}
.case-article h2{font-size:34px;}
.case-article p{font-size:16px;line-height:1.85;}
.case-photo{margin:34px 0 0;}
.case-photo figcaption{margin-top:14px;font-size:13.5px;color:var(--text-light);text-align:center;}
.case-info{position:sticky;top:112px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:34px;}
.case-info .logo-box{display:flex;align-items:center;min-height:64px;padding-bottom:22px;border-bottom:1px solid var(--border);}
.case-info .logo-box img{height:auto;max-height:46px;width:auto;max-width:230px;object-fit:contain;}
.case-info h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);margin:22px 0 4px;}
.info-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:14px 0;border-bottom:1px solid var(--border);font-size:14px;}
.info-row:last-of-type{border-bottom:0;}
.info-row span{color:var(--text-light);flex:none;}
.info-row strong{color:var(--heading);text-align:right;font-weight:600;}
.case-info .btn{width:100%;margin-top:18px;}
.two-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.ctx-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:34px;}
.ctx-card .ci{width:50px;height:50px;border-radius:14px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.ctx-card .ci svg{width:24px;height:24px;}
.ctx-card h3{font-size:20px;margin-bottom:14px;}
.ctx-card ul{display:grid;gap:12px;}
.ctx-card li{display:flex;gap:12px;align-items:flex-start;font-size:15px;}
.ctx-card li svg{width:18px;height:18px;color:var(--eco);flex:none;margin-top:4px;}
.msg-card{background:linear-gradient(135deg,#0B2A66,#246BFD);color:#fff;border-radius:var(--radius-lg);padding:38px;}
.msg-card h3{color:#fff;font-size:22px;margin-bottom:6px;}
.msg-card > p{color:rgba(255,255,255,.75);font-size:14px;margin-bottom:22px;}
.msg-card ul{display:grid;gap:12px;}
.msg-card li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px 18px;font-weight:600;font-size:15px;}
.hl-list{display:grid;gap:18px;}
.hl{display:flex;gap:18px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.hl .ci{width:48px;height:48px;border-radius:14px;background:var(--eco-light);color:var(--eco);display:flex;align-items:center;justify-content:center;flex:none;}
.hl .ci svg{width:22px;height:22px;}
.hl h4{font-size:17px;margin-bottom:6px;}
.hl p{font-size:14px;margin:0;}
.cs-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--primary);font-weight:700;font-size:14.5px;}
.cs-more svg{width:15px;height:15px;transition:.2s;}
.cs-card:hover .cs-more svg{transform:translateX(5px);}
@media (max-width:1000px){
  .case-layout{grid-template-columns:1fr;}
  .case-info{position:static;}
  .two-cards{grid-template-columns:1fr;}
}

/* =========================================================
   METALLIC THEME (ánh kim)
   Multi-stop gradients + a diagonal specular sheen, layered
   on top of the existing flat colours. Pure CSS, no images.
   ========================================================= */
:root{
  /* base metals */
  --metal-navy:linear-gradient(135deg,#040b1c 0%,#0b2358 30%,#06153a 52%,#123a8f 78%,#0a2260 100%);
  --metal-navy-soft:linear-gradient(135deg,#071433 0%,#10327a 40%,#0a1f52 65%,#1a4bb5 100%);
  --metal-blue:linear-gradient(180deg,#6FA6FF 0%,#3A7BFF 22%,#246BFD 48%,#0F52DA 78%,#0846C6 100%);
  --metal-blue-h:linear-gradient(180deg,#8AB8FF 0%,#4B87FF 22%,#2F74FF 48%,#1259E6 78%,#0A4CCF 100%);
  --metal-steel:linear-gradient(180deg,#2B3A57 0%,#131E36 45%,#0B1526 100%);
  --metal-silver:linear-gradient(135deg,#F9FBFE 0%,#E9EFF9 28%,#FBFCFF 46%,#DCE5F3 72%,#F1F5FB 100%);
  --metal-pearl:linear-gradient(135deg,#F2F7FF 0%,#D9E7FF 35%,#F6FAFF 52%,#BFD5FB 100%);
  --sheen:linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.13) 42%,rgba(255,255,255,.03) 50%,rgba(255,255,255,0) 62%);
  --sheen-strong:linear-gradient(115deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.28) 40%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 64%);
  --edge-light:inset 0 1px 0 rgba(255,255,255,.55);
}

/* ---- dark surfaces: brushed navy steel with a light streak ---- */
.topbar{background:var(--sheen),var(--metal-navy);border-bottom:1px solid rgba(126,166,255,.18);}
.site-footer{background:var(--sheen),var(--metal-navy);position:relative;}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#7EA6FF 20%,#fff 50%,#7EA6FF 80%,transparent);opacity:.75;}
.hero{background:var(--sheen-strong),var(--metal-navy-soft);}
.page-header::before{background:var(--sheen),linear-gradient(120deg,rgba(4,11,28,.93) 8%,rgba(11,35,88,.82) 46%,rgba(18,58,143,.66) 100%);}
.cta-band::before{background:var(--sheen-strong),linear-gradient(100deg,rgba(4,11,28,.94) 6%,rgba(11,35,88,.86) 50%,rgba(18,58,143,.7) 100%);}
.msg-card{background:var(--sheen-strong),var(--metal-navy-soft);box-shadow:var(--edge-light),0 24px 50px rgba(8,30,90,.25);}
.contact-info-card{background:var(--sheen),var(--metal-navy);box-shadow:var(--edge-light),var(--shadow);}
.newsletter{background:var(--sheen-strong),var(--metal-navy-soft);box-shadow:var(--edge-light);}
.mobile-nav .btn-primary{margin-top:24px;}

/* ---- silver / pearl light surfaces ---- */
.bg-gray{background:var(--metal-silver);}
.value-card,.spec-table th{background:var(--metal-silver);}
.media-frame.soft,.pr-media{background:var(--sheen),var(--metal-pearl);}
.svc-card.solid{background:var(--sheen),var(--metal-pearl);border:1px solid rgba(255,255,255,.7);box-shadow:var(--edge-light),var(--shadow-sm);}
.section-title + .why-grid .why-card,.why-card{box-shadow:var(--edge-light),var(--shadow-sm);}
.stats-strip div{background:linear-gradient(180deg,#fff 0%,#F3F7FD 100%);}
.contact-form-card,.step,.svc-detail-card,.rel-card,.news-card,.ctx-card,.hl{box-shadow:var(--edge-light),var(--shadow-sm);}

/* ---- icon tiles: pearl-blue chips with a glossy top edge ---- */
.svc-detail-card .icon,.ctx-card .ci,.head-phone .ico{background:var(--metal-pearl);box-shadow:var(--edge-light),0 6px 14px rgba(36,107,253,.14);}
.hl .ci{background:linear-gradient(135deg,#F0FBF6,#BFEBD6);box-shadow:var(--edge-light);}
.svc-card.solid .icon,.step .no,.about-media .exp-badge{background:var(--sheen-strong),var(--metal-blue);box-shadow:var(--edge-light),0 10px 22px rgba(36,107,253,.32);}

/* ---- buttons: chrome-blue and gunmetal ---- */
.btn-primary{background:var(--sheen),var(--metal-blue);background-size:220% 100%,100% 100%;background-position:120% 0,0 0;
  box-shadow:var(--edge-light),inset 0 -2px 0 rgba(0,20,80,.22),0 12px 24px rgba(36,107,253,.32);
  text-shadow:0 1px 0 rgba(0,25,90,.35);transition:background-position .7s ease,transform .25s ease,box-shadow .25s ease;}
.btn-primary:hover{background:var(--sheen),var(--metal-blue-h);background-size:220% 100%,100% 100%;background-position:-20% 0,0 0;
  box-shadow:var(--edge-light),inset 0 -2px 0 rgba(0,20,80,.22),0 16px 32px rgba(36,107,253,.42);}
.btn-dark{background:var(--sheen),var(--metal-steel);background-size:220% 100%,100% 100%;background-position:120% 0,0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.35),0 10px 22px rgba(11,21,38,.28);
  transition:background-position .7s ease,transform .25s ease,box-shadow .25s ease;}
.btn-dark:hover{background:var(--sheen),var(--metal-blue);background-size:220% 100%,100% 100%;background-position:-20% 0,0 0;}
.btn-outline{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.hero-arrow{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(8,16,34,.45));box-shadow:var(--edge-light);}
.hero-arrow:hover{background:var(--metal-blue);}
.online-support .os-fb{background:linear-gradient(180deg,#5CA0FF,#1877F2 50%,#0E5BD0);box-shadow:var(--edge-light),0 10px 24px rgba(12,24,48,.28);}
.online-support .os-zalo{background:linear-gradient(180deg,#4F9BFF,#0068FF 50%,#0050C8);box-shadow:var(--edge-light),0 10px 24px rgba(12,24,48,.28);}
.online-support .os-phone{background:linear-gradient(180deg,#FF7A7A,#F53D3D 50%,#C92626);box-shadow:var(--edge-light),0 10px 24px rgba(12,24,48,.28);}
.back-top{background:var(--metal-blue);box-shadow:var(--edge-light),var(--shadow);}

/* ---- metallic type for headline highlights and big numbers ---- */
.hero h1 .hl-blue,.stats-strip strong{background:linear-gradient(180deg,#9DBFFF 0%,#5B95FF 45%,#246BFD 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.stats-strip strong{background:linear-gradient(180deg,#5B95FF 0%,#246BFD 50%,#0846C6 100%);-webkit-background-clip:text;background-clip:text;}
.hero h1 .hl-green{background:linear-gradient(180deg,#9BF0C6 0%,#4BD38E 50%,#1FAE6B 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.hero-stats strong{background:linear-gradient(180deg,#FFFFFF 0%,#C9DBFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}

/* ---- header keeps a clean chrome edge ---- */
.site-header{background:linear-gradient(180deg,#fff 0%,#F6F9FF 100%);}

/* =========================================================
   SPARKLE / GLITTER (lấp lánh)
   - twinkling stars injected by main.js on dark surfaces
   - slow moving light streak, button glints, shining numbers
   All animation only runs while the element is on screen
   (main.js toggles .in-view) and is off for reduced motion.
   ========================================================= */
.fx{--play:paused;}
.fx.in-view{--play:running;}

.sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.spark{position:absolute;width:var(--s,10px);height:var(--s,10px);opacity:0;
  animation:twinkle var(--t,3.6s) ease-in-out var(--d,0s) infinite;animation-play-state:var(--play,running);will-change:transform,opacity;}
.spark::before{content:"";position:absolute;inset:-160%;border-radius:50%;
  background:radial-gradient(circle,rgba(190,220,255,.85) 0%,rgba(150,195,255,.32) 34%,transparent 66%);}
.spark::after{content:"";position:absolute;inset:0;background:#fff;
  clip-path:polygon(50% 0,58% 38%,100% 50%,58% 62%,50% 100%,42% 62%,0 50%,42% 38%);}
.spark.gold::before{background:radial-gradient(circle,rgba(255,226,150,.6) 0%,rgba(255,226,150,.2) 38%,transparent 68%);}
.spark.gold::after{background:#FFF3CC;}
.spark.dot{--s:5px !important;}
.spark.dot::after{clip-path:none;border-radius:50%;}
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.2) rotate(0deg);}
  45%{opacity:1;transform:scale(1) rotate(45deg);}
  60%{opacity:.85;transform:scale(.8) rotate(60deg);}
}

/* content must stay above the stars */
.hero-inner,.page-header .container,.cta-band .container,.site-footer .container{position:relative;z-index:3;}
.site-footer,.msg-card,.newsletter,.contact-info-card{overflow:hidden;}
.msg-card > *,.newsletter > *,.contact-info-card > *{position:relative;z-index:2;}

/* slow moving light streak on the metallic dark surfaces */
@keyframes sheenSlide{0%{background-position:160% 0,0 0;}100%{background-position:-60% 0,0 0;}}
.hero,.site-footer,.msg-card,.newsletter,.contact-info-card{background-size:260% 100%,100% 100%;animation:sheenSlide 11s linear infinite;animation-play-state:var(--play,running);}
.page-header::before,.cta-band::before{background-size:260% 100%,100% 100%;animation:sheenSlide 11s linear infinite;animation-play-state:var(--play,running);}

/* periodic glint across primary buttons */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-70%;width:38%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:btnGlint 5.5s ease-in-out infinite;animation-play-state:var(--play,running);pointer-events:none;}
@keyframes btnGlint{0%,62%{left:-70%;}100%{left:150%;}}
.head-actions .btn-primary::after,.detail-cta .btn-primary::after{animation-delay:1.2s;}

/* numbers: light travels across the metallic digits */
.stats-strip strong{background-image:linear-gradient(100deg,#0846C6 0%,#246BFD 32%,#9EC4FF 46%,#EAF3FF 50%,#9EC4FF 54%,#246BFD 68%,#0846C6 100%);
  background-size:260% 100%;animation:digitShine 5s ease-in-out infinite;animation-play-state:var(--play,running);}
@keyframes digitShine{0%,30%{background-position:120% 0;}100%{background-position:-60% 0;}}
.hero-stats strong{background-image:linear-gradient(100deg,#B7CFFF 0%,#fff 40%,#fff 50%,#B7CFFF 100%);background-size:260% 100%;animation:digitShine 5s ease-in-out infinite;animation-play-state:var(--play,running);}

/* glint sweep when a card is hovered */
.svc-detail-card,.why-card,.rel-card,.svc-card,.prod-row{position:relative;}
.svc-detail-card,.why-card{overflow:hidden;}
.svc-detail-card::after,.why-card::after,.rel-card::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:36%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);opacity:0;pointer-events:none;}
.svc-detail-card:hover::after,.why-card:hover::after,.rel-card:hover::after{opacity:1;left:140%;transition:left .9s ease,opacity .2s ease;}

/* glossy shimmer on the logo card in the footer */
.footer-logo{position:relative;overflow:hidden;}
.footer-logo::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:45%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(120,170,255,.45),transparent);animation:btnGlint 6.5s ease-in-out infinite;animation-play-state:var(--play,running);}

@media (prefers-reduced-motion:reduce){
  .spark,.hero,.site-footer,.msg-card,.newsletter,.contact-info-card,.page-header::before,.cta-band::before,
  .btn-primary::after,.stats-strip strong,.hero-stats strong,.footer-logo::after{animation:none !important;}
  .sparkles{display:none;}
}

/* =========================================================
   OCEAN BLUE (xanh nước biển theo màu logo) — brighter dark surfaces
   Overrides the deep-navy metals above; logo blue is #246BFD.
   ========================================================= */
:root{
  --metal-navy:linear-gradient(135deg,#0B55DC 0%,#1B6CFF 30%,#0F5AE6 54%,#3D8DFF 80%,#1663F2 100%);
  --metal-navy-soft:linear-gradient(135deg,#0A50D2 0%,#1E6FFF 40%,#1259E0 66%,#4A97FF 100%);
  --dark:#0D5AE8;          /* was #0C1830; used as fallback behind photos */
  --sheen:linear-gradient(115deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.20) 41%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 63%);
  --sheen-strong:linear-gradient(115deg,rgba(255,255,255,0) 24%,rgba(255,255,255,.34) 40%,rgba(255,255,255,.07) 51%,rgba(255,255,255,0) 66%);
}
.topbar{border-bottom:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.92);}
.topbar-left svg{color:#CFE2FF;}
.topbar-eco{color:#B6F5D4;}
.topbar-right .socials a{background:rgba(255,255,255,.18);}
.topbar-right .socials a:hover{background:#fff;color:var(--primary);}

.page-header{background-color:#0D5AE8;}
.page-header::before{background:var(--sheen),linear-gradient(120deg,rgba(6,58,176,.88) 6%,rgba(20,96,240,.72) 50%,rgba(52,140,255,.5) 100%);}
.cta-band{background-color:#0D5AE8;}
.cta-band::before{background:var(--sheen-strong),linear-gradient(100deg,rgba(6,58,176,.9) 6%,rgba(20,96,240,.78) 50%,rgba(52,140,255,.55) 100%);}
.page-header .shape{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 70%);}

.hero{background:var(--sheen-strong),var(--metal-navy-soft);}
.hero-eyebrow{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff;}
.hero p.lead{color:rgba(255,255,255,.92);}
.hero-stats{border-top-color:rgba(255,255,255,.32);}
.hero-stats span{color:rgba(255,255,255,.85);}
.hero h1 .hl-blue{background:linear-gradient(180deg,#FFFFFF 0%,#D6E8FF 55%,#A9CCFF 100%);-webkit-background-clip:text;background-clip:text;}
.hero h1 .hl-green{background:linear-gradient(180deg,#D9FFEA 0%,#8CF0BE 50%,#4BD38E 100%);-webkit-background-clip:text;background-clip:text;}
.hero-visual .card{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);}

.site-footer{color:rgba(255,255,255,.88);}
.site-footer p,.footer-links a,.footer-contact li{color:rgba(255,255,255,.88);}
.site-footer h4{color:#fff;}
.footer-grid{border-bottom-color:rgba(255,255,255,.28);}
.footer-socials a{background:rgba(255,255,255,.2);}
.footer-socials a:hover{background:#fff;color:var(--primary);}
.footer-contact .ico{background:rgba(255,255,255,.2);color:#fff;}
.footer-contact strong{color:#fff;}
.footer-bottom{color:rgba(255,255,255,.85);}
.site-footer::before{background:linear-gradient(90deg,transparent,#CFE2FF 20%,#fff 50%,#CFE2FF 80%,transparent);}

.msg-card,.newsletter,.contact-info-card{background:var(--sheen-strong),var(--metal-navy-soft);}
.msg-card > p,.contact-info-card > p{color:rgba(255,255,255,.88);}
.contact-info-card .ico{background:rgba(255,255,255,.2);color:#fff;}
.contact-info-card span,.contact-info-card a{color:rgba(255,255,255,.9);}
.msg-card li{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.38);}
.cta-grid p{color:rgba(255,255,255,.92);}
.page-header p{color:rgba(255,255,255,.92) !important;}
.breadcrumb{color:rgba(255,255,255,.85);}

/* image-cards keep a dark scrim only behind the text so it stays readable, but bluer */
.svc-card::after{background:linear-gradient(0deg,rgba(6,52,160,.94) 16%,rgba(10,78,205,.72) 50%,rgba(20,100,240,.18) 100%);}
.banner-slider{background:#1B6CFF;}
.btn-dark{background:var(--sheen),linear-gradient(180deg,#2A66D8 0%,#0E43AE 55%,#082F86 100%);background-size:220% 100%,100% 100%;background-position:120% 0,0 0;}
.btn-dark:hover{background:var(--sheen),var(--metal-blue);background-size:220% 100%,100% 100%;background-position:-20% 0,0 0;}

/* on the bright-blue surfaces the primary button turns white-silver so it stays visible */
.hero .btn-primary,.cta-band .btn-primary,.page-header .btn-primary,.msg-card .btn-primary,.contact-info-card .btn-primary,.newsletter button{
  background:var(--sheen),linear-gradient(180deg,#FFFFFF 0%,#EAF2FF 55%,#CFE0FF 100%);background-size:220% 100%,100% 100%;background-position:120% 0,0 0;
  color:#0A47C4;text-shadow:none;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(10,71,196,.18),0 12px 26px rgba(4,40,140,.35);}
.hero .btn-primary:hover,.cta-band .btn-primary:hover,.page-header .btn-primary:hover{background:var(--sheen),linear-gradient(180deg,#FFFFFF,#F4F8FF 55%,#DCE9FF);background-size:220% 100%,100% 100%;background-position:-20% 0,0 0;}
.newsletter button{color:#0A47C4;border:0;}
.hero .btn-primary::after,.cta-band .btn-primary::after{background:linear-gradient(90deg,transparent,rgba(36,107,253,.35),transparent);}
.mobile-nav .mn-close{background:#EAF2FF;}

/* =========================================================
   BUTTON SYSTEM (unified, replaces the stacked overrides above)
   primary  = bright ocean gradient        (on white)
   dark     = deep ocean gradient          (secondary, on white)
   light    = white pill with blue outline (neutral, on white)
   outline  = frosted glass                (on blue / photos)
   on blue  = primary turns white-silver
   ========================================================= */
.btn{position:relative;overflow:hidden;isolation:isolate;gap:12px;padding:16px 30px;border:0;border-radius:999px;
  font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.01em;text-shadow:none;
  transition:transform .25s ease,box-shadow .3s ease,background .3s ease,color .25s ease;-webkit-tap-highlight-color:transparent;}
.btn:active{transform:translateY(0) scale(.98);}
.btn:focus-visible{outline:3px solid rgba(36,107,253,.4);outline-offset:3px;}
.btn-sm{padding:11px 22px;font-size:13.5px;}
.btn > svg{width:26px;height:26px;padding:6px;border-radius:50%;flex:none;margin:0 -12px 0 0;transition:transform .25s ease;}
.btn > svg:first-child{margin:0 0 0 -12px;}
.btn-sm > svg{width:22px;height:22px;padding:5px;margin-right:-10px;}
.btn-sm > svg:first-child{margin:0 0 0 -10px;}
.btn:hover > svg:last-child:not(:first-child){transform:translateX(3px);}

/* primary */
.btn-primary,.btn-primary:hover{background:linear-gradient(135deg,#3D88FF 0%,#246BFD 46%,#1256E0 100%);background-size:auto;background-position:0 0;color:#fff;}
.btn-primary{box-shadow:0 10px 22px -8px rgba(36,107,253,.7),inset 0 1px 0 rgba(255,255,255,.4);}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#66A2FF 0%,#3A80FF 46%,#1B63F0 100%);opacity:0;transition:opacity .3s ease;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(36,107,253,.75),inset 0 1px 0 rgba(255,255,255,.5);}
.btn-primary:hover::before{opacity:1;}
.btn-primary > svg{background:rgba(255,255,255,.24);}

/* dark (secondary) */
.btn-dark,.btn-dark:hover{background-size:auto;background-position:0 0;color:#fff;}
.btn-dark{background:linear-gradient(135deg,#2568E6 0%,#0F48BC 55%,#0A3391 100%);box-shadow:0 10px 20px -8px rgba(10,51,145,.7),inset 0 1px 0 rgba(255,255,255,.28);}
.btn-dark:hover{background:linear-gradient(135deg,#3577F2 0%,#1653CE 55%,#0D3BA5 100%);transform:translateY(-2px);box-shadow:0 16px 28px -8px rgba(10,51,145,.75),inset 0 1px 0 rgba(255,255,255,.4);}
.btn-dark > svg{background:rgba(255,255,255,.22);}

/* light (neutral) */
.btn-light{background:linear-gradient(180deg,#FFFFFF,#F1F6FF);color:#0A47C4;box-shadow:inset 0 0 0 1.5px #C4D8FB,0 8px 18px -10px rgba(36,107,253,.45);}
.btn-light:hover{background:linear-gradient(180deg,#FFFFFF,#E4EEFF);box-shadow:inset 0 0 0 1.5px #7FAAF5,0 12px 22px -10px rgba(36,107,253,.55);transform:translateY(-2px);}
.btn-light > svg{background:rgba(36,107,253,.12);}

/* outline = frosted glass on blue / photos */
.btn-outline{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.btn-outline:hover{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1.5px #fff;transform:translateY(-2px);}
.btn-outline > svg{background:rgba(255,255,255,.24);}

/* primary on bright-blue surfaces -> white silver */
.hero .btn-primary,.cta-band .btn-primary,.page-header .btn-primary,.msg-card .btn-primary,.contact-info-card .btn-primary,
.hero .btn-primary:hover,.cta-band .btn-primary:hover,.page-header .btn-primary:hover{background:linear-gradient(180deg,#FFFFFF 0%,#EAF2FF 100%);background-size:auto;color:#0A47C4;}
.hero .btn-primary,.cta-band .btn-primary,.page-header .btn-primary,.msg-card .btn-primary,.contact-info-card .btn-primary{
  box-shadow:0 12px 26px -10px rgba(3,30,110,.6),inset 0 -2px 0 rgba(10,71,196,.10);}
.hero .btn-primary::before,.cta-band .btn-primary::before,.page-header .btn-primary::before{background:#fff;}
.hero .btn-primary > svg,.cta-band .btn-primary > svg,.page-header .btn-primary > svg{background:rgba(36,107,253,.14);color:#0A47C4;}
.hero .btn-primary::after,.cta-band .btn-primary::after{background:linear-gradient(90deg,transparent,rgba(36,107,253,.28),transparent);}

/* newsletter submit + form submit */
.newsletter button{border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;padding:16px 30px;border-radius:999px;color:#0A47C4;
  background:linear-gradient(180deg,#fff,#EAF2FF);box-shadow:0 12px 26px -10px rgba(3,30,110,.6);transition:transform .25s ease,box-shadow .25s ease;}
.newsletter button:hover{background:linear-gradient(180deg,#fff,#F4F8FF);transform:translateY(-2px);}
button.btn{cursor:pointer;}

/* =========================================================
   PROJECTS BY CLIENT: cards, filter, gallery & video blocks
   ========================================================= */
.pj-filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 auto 44px;}
.pj-filter button{padding:11px 22px;border-radius:999px;border:1.5px solid #C4D8FB;background:linear-gradient(180deg,#fff,#F1F6FF);color:#0A47C4;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:.25s;}
.pj-filter button:hover{border-color:#7FAAF5;transform:translateY(-1px);}
.pj-filter button.active{background:linear-gradient(135deg,#3D88FF,#1256E0);border-color:transparent;color:#fff;box-shadow:0 10px 20px -8px rgba(36,107,253,.7);}
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.pj-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:var(--edge-light),var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease;}
.pj-card:hover{transform:translateY(-6px);box-shadow:var(--edge-light),var(--shadow);}
.pj-card .pj-img{position:relative;aspect-ratio:4/4.4;overflow:hidden;background:var(--metal-pearl);}
.pj-card .pj-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .6s ease;}
.pj-card:hover .pj-img img{transform:scale(1.06);}
.pj-card .pj-img::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(0deg,rgba(6,52,160,.55),transparent);}
.pj-cat{position:absolute;left:16px;top:16px;z-index:2;background:rgba(255,255,255,.94);color:#0A47C4;font-weight:700;font-size:12px;padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-sm);}
.pj-count{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;gap:8px;}
.pj-count span{display:inline-flex;align-items:center;gap:6px;background:rgba(6,30,100,.72);backdrop-filter:blur(4px);color:#fff;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;}
.pj-count svg{width:13px;height:13px;}
.pj-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1;}
.pj-logo{height:34px;display:flex;align-items:center;margin-bottom:14px;}
.pj-logo img{height:auto;max-height:34px;width:auto;max-width:150px;object-fit:contain;}
.pj-logo .name-mark{font-weight:800;font-size:19px;color:#0A47C4;letter-spacing:-.01em;}
.pj-body h3{font-size:19px;line-height:1.35;margin-bottom:10px;}
.pj-body h3 a:hover{color:var(--primary);}
.pj-body p{font-size:14px;margin-bottom:18px;flex:1;}
.pj-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--text-light);margin-bottom:16px;}
.pj-meta span{display:inline-flex;align-items:center;gap:6px;}
.pj-meta svg{width:14px;height:14px;color:var(--primary);}
.pj-go{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:700;font-size:14.5px;}
.pj-go svg{width:16px;height:16px;transition:transform .25s;}
.pj-card:hover .pj-go svg{transform:translateX(5px);}
.pj-card.is-hidden{display:none;}
.name-mark-lg{font-weight:800;font-size:24px;color:#0A47C4;line-height:1.2;}

/* project detail: photo + video blocks */
.gallery-grid.pj{grid-template-columns:repeat(3,1fr);}
.gallery-grid.pj .gallery-item{aspect-ratio:4/5;}
.gallery-grid.pj.one{grid-template-columns:minmax(0,420px);justify-content:center;}
.gallery-grid.pj.two{grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;}
.vid-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;}
.vid-grid>.vid-card{flex:0 1 calc((100% - 52px)/3);min-width:260px;}
.vid-grid.one>.vid-card{flex-basis:760px;max-width:100%;}
.vid-grid.two>.vid-card{flex-basis:420px;max-width:100%;}
.vid-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--edge-light),var(--shadow-sm);}
.vid-card video{display:block;width:100%;max-height:560px;background:#061a4a;object-fit:contain;}
.vid-card figcaption{padding:16px 20px 20px;font-size:14px;color:var(--text);display:flex;gap:10px;align-items:flex-start;}
.vid-card figcaption svg{width:18px;height:18px;color:var(--primary);flex:none;margin-top:2px;}
.vid-note{max-width:760px;margin:0 auto 34px;text-align:center;font-size:15px;color:var(--text);}
.case-info .logo-box .name-mark-lg{display:block;}

@media (max-width:1000px){.pj-grid{grid-template-columns:repeat(2,1fr);} .gallery-grid.pj{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.pj-grid,.gallery-grid.pj,.gallery-grid.pj.two,.vid-grid.two{grid-template-columns:1fr;} .vid-grid>.vid-card{flex-basis:100%;} .pj-card .pj-img{aspect-ratio:4/3.6;}}

/* ---------- PARTNER LOGOS — full colour, prominent ---------- */
.clients-wrap{border:0;padding:84px 0;background:var(--metal-pearl);position:relative;}
.clients-wrap .section-title{margin-bottom:44px;}
.clients-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1040px;margin:0 auto;}
.clients-row .client-logo{width:auto;height:132px;padding:26px 34px;border-radius:20px;border:1px solid rgba(36,107,253,.14);
  background:linear-gradient(145deg,#fff 0%,#F6F9FF 100%);box-shadow:var(--edge-light),0 10px 28px rgba(15,82,218,.10);position:relative;overflow:hidden;}
.clients-row .client-logo img{filter:none;opacity:1;max-height:68px;transition:transform .35s ease;}
.clients-row .client-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(120,170,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s ease;pointer-events:none;}
.clients-row .client-logo:hover{transform:translateY(-6px);border-color:var(--primary);box-shadow:0 18px 40px rgba(15,82,218,.22);}
.clients-row .client-logo:hover img{transform:scale(1.07);}
.clients-row .client-logo:hover::after{transform:translateX(120%);}
@media (min-width:1001px){.clients-row{grid-template-columns:repeat(8,1fr);}.clients-row .client-logo{grid-column:span 2;}
  .clients-row .client-logo:nth-child(5){grid-column:2/4;}}
@media (max-width:1000px){.clients-row{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.clients-wrap{padding:60px 0;}.clients-row{grid-template-columns:repeat(2,1fr);gap:14px;}.clients-row .client-logo{height:104px;padding:18px 20px;}.clients-row .client-logo img{max-height:52px;}}
@media (max-width:640px){.clients-row .client-logo:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px);}}

/* ---------- WHY CARDS — real photos ---------- */
.why-card.photo{padding:0;text-align:left;overflow:hidden;display:flex;flex-direction:column;}
.why-card.photo .why-photo{position:relative;aspect-ratio:4/3.4;overflow:hidden;}
.why-card.photo .why-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease;}
.why-card.photo:hover .why-photo img{transform:scale(1.06);}
.why-card.photo .why-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(6,26,74,.55));pointer-events:none;}
.why-badge{position:absolute;left:18px;bottom:-1px;z-index:2;width:48px;height:48px;border-radius:14px 14px 0 0;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--primary);}
.why-badge svg{width:24px;height:24px;}
.why-card.photo .why-body{padding:22px 24px 28px;}
.why-card.photo h3{font-size:18px;margin-bottom:8px;}
.why-card.photo p{font-size:14px;margin:0;}
.section-title h2{text-wrap:balance;}

/* ---------- REVIEW FIXES: mobile polish ---------- */
.hero-inner{padding-left:24px;padding-right:24px;}
@media (max-width:860px){
  .topbar .container{height:auto;min-height:40px;padding-top:6px;padding-bottom:6px;gap:10px;}
  .topbar-left a,.topbar-left span{white-space:nowrap;}
  .topbar-right span:first-child{display:none;}
  .page-header h1{font-size:clamp(26px,7.4vw,36px);line-height:1.2;}
  .page-header{padding-top:56px;padding-bottom:56px;}
}
@media (max-width:640px){
  .online-support{right:12px;bottom:14px;gap:8px;}
  .online-support a{width:44px;height:44px;}
  .online-support a svg{width:20px;height:20px;}
  .online-support a:nth-child(-n+2){display:none;}
  .back-top{display:none;}
  .hero-inner{padding-top:56px;padding-bottom:64px;}
}

/* ---------- REVIEW FIXES: hierarchy, contrast, consistency ---------- */
/* hero intro: calmer so the banner slider stays the lead */
.hero-inner{padding-top:64px;padding-bottom:72px;}
.hero h1{font-size:46px;letter-spacing:-.4px;margin-bottom:18px;}
.hero p.lead{font-size:17px;margin-bottom:28px;}
.hero h1 .hl-blue{background:linear-gradient(180deg,#FFFFFF 0%,#EAF3FF 60%,#CFE3FF 100%);-webkit-background-clip:text;background-clip:text;}
.spark{filter:drop-shadow(0 0 6px rgba(255,255,255,.55));}
/* secondary button next to a primary one: quiet outline, no glow */
.prod-row .btn-dark,.detail-cta .btn-dark{background:#fff;color:var(--primary);border:1.5px solid rgba(36,107,253,.35);box-shadow:none;text-shadow:none;}
.prod-row .btn-dark::before,.prod-row .btn-dark::after,.detail-cta .btn-dark::before,.detail-cta .btn-dark::after{display:none;}
.prod-row .btn-dark:hover,.detail-cta .btn-dark:hover{background:rgba(36,107,253,.08);border-color:var(--primary);transform:none;box-shadow:none;}
/* project cards: identical rhythm */
.pj-meta{flex-direction:column;flex-wrap:nowrap;gap:6px;}
.pj-meta span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;}
.pj-body h3{min-height:2.7em;}
@media (max-width:1100px){.hero h1{font-size:40px;}}
@media (max-width:600px){.hero h1{font-size:30px;}}
.svc-card{min-height:420px;}
.svc-card::after{background:linear-gradient(0deg,rgba(6,48,150,.96) 0%,rgba(8,66,190,.9) 36%,rgba(12,86,220,.5) 60%,rgba(20,100,240,0) 88%);}

/* ---------- HERO INTRO merged into a compact band under the slider ---------- */
.hero-inner{padding-top:52px;padding-bottom:56px;}
.hero-grid{grid-template-columns:1.3fr .7fr;gap:56px;align-items:center;}
.hero h1{font-size:40px;line-height:1.2;margin-bottom:14px;}
.hero p.lead{font-size:16.5px;max-width:600px;margin-bottom:26px;}
.hero-eyebrow{margin-bottom:18px;}
.hero-panel{position:relative;padding:26px 26px 22px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 24px 50px rgba(6,40,130,.28);backdrop-filter:blur(6px);}
.hero-panel-tag{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#CFE0FF;margin-bottom:16px;}
.hero-panel .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;border:0;padding:0;max-width:none;}
.hero-panel .hero-stats div{min-width:0;padding:0;}
.hero-panel .hero-stats strong{font-size:30px;}
@media (max-width:1100px){.hero-grid{grid-template-columns:1fr;gap:32px;}.hero-panel{max-width:520px;}.hero h1{font-size:36px;}}
@media (max-width:600px){.hero-inner{padding-top:40px;padding-bottom:44px;}.hero h1{font-size:28px;}.hero-panel{padding:20px;}.hero-panel .hero-stats strong{font-size:26px;}}

/* ---------- LOGO: larger ---------- */
.brand img{height:52px;}
.footer-logo{padding:12px 20px;}
.footer-logo img{height:44px;}
@media (max-width:1280px){.brand img{height:46px;}}
@media (max-width:860px){.brand img{height:42px;}}
@media (max-width:420px){.brand img{height:38px;}}
@media (min-width:1141px) and (max-width:1240px){.brand img{height:40px;}.main-nav > ul > li > a{padding:14px 6px;}.site-header .head-inner{gap:12px;}}