/* ============================================================
   MERA AI TELECOM — Design System v1.0
   Fonts   : Space Grotesk (headings/numbers) + Plus Jakarta Sans (body)
   Palette : #050505 void · #00F0FF cyan · #00FF66 green
   Theme   : Dark Futuristic · Glassmorphism · Glow
   FORBIDDEN: Inter, Roboto, Arial, system-ui
   ============================================================ */

/* ---- DESIGN TOKENS ---------------------------------------- */
:root {
  /* Core palette */
  --void:       #050505;
  --deep:       #080818;
  --panel:      rgba(255,255,255,0.03);
  --panel-h:    rgba(255,255,255,0.055);
  --border:     rgba(255,255,255,0.07);
  --border-c:   rgba(0,240,255,0.22);
  --border-g:   rgba(0,255,102,0.2);

  --cyan:       #00F0FF;
  --cyan-d:     #00C8D4;
  --cyan-glow:  rgba(0,240,255,0.14);
  --green:      #00FF66;
  --green-d:    #00CC50;
  --green-glow: rgba(0,255,102,0.1);

  --white:  #FFFFFF;
  --g100:   #E6E6F0;
  --g400:   #888898;
  --g600:   #44445A;

  /* Typography — NEVER Inter */
  --fh: 'Space Grotesk', sans-serif;
  --fb: 'Plus Jakarta Sans', sans-serif;

  /* Spacing */
  --sp-xs: 0.5rem;
  --sp-s:  1rem;
  --sp-m:  1.75rem;
  --sp-l:  2.5rem;
  --sp-xl: 4rem;
  --sp-2x: 6rem;
  --sp-3x: 9rem;
  --sec:   clamp(4rem, 8vw, 7.5rem);

  /* Motion */
  --ease:     cubic-bezier(0.4,0,0.2,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --fast:  180ms;
  --mid:   380ms;
  --slow:  580ms;

  /* Radii */
  --r-s:  6px;
  --r-m:  12px;
  --r-l:  20px;
  --r-xl: 32px;
}

/* ---- RESET ------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  background: var(--void);
  color: var(--white);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:var(--fb); border:none; background:none; color:inherit; }
ul,ol { list-style:none; }
input,textarea { font-family:var(--fb); }

/* ---- LANGUAGE SYSTEM -------------------------------------- */
.vi { display:none; }
.en { display:inline; }
body.lang-vi .vi { display:inline; }
body.lang-vi .en { display:none; }
.vi.eyebrow { display:none; }
body.lang-vi .vi.eyebrow { display:block; }

/* ---- SCROLLBAR -------------------------------------------- */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--void); }
::-webkit-scrollbar-thumb { background:var(--g600); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--cyan-d); }

/* ---- SELECTION -------------------------------------------- */
::selection { background:rgba(0,240,255,0.18); color:var(--white); }

/* ---- FOCUS ------------------------------------------------ */
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* ---- CURSOR HALO ------------------------------------------ */
.cursor-halo {
  position:fixed; top:0; left:0;
  width:400px; height:400px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(0,240,255,0.04) 0%, transparent 65%);
  pointer-events:none;
  z-index:9000;
  will-change:transform;
}

/* ---- SHARED TYPOGRAPHY ------------------------------------ */
.eyebrow {
  display:block;
  font-family:var(--fh);
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.22em;
  color:var(--cyan);
  text-transform:uppercase;
  margin-bottom:var(--sp-s);
}
.sec-title {
  font-family:var(--fh);
  font-size:clamp(2.2rem,4.5vw,4.0rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.025em;
  color:var(--white);
}
.sec-sub {
  font-size:1.05rem;
  color:var(--g400);
  margin-top:0.875rem;
  max-width:52ch;
  line-height:1.8;
}
.grad-text {
  background:linear-gradient(130deg, var(--cyan) 0%, var(--green) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-style:normal;
}

/* ---- BUTTONS ---------------------------------------------- */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.8rem 1.6rem;
  background:linear-gradient(135deg, var(--cyan) 0%, var(--cyan-d) 100%);
  color:#000;
  font-family:var(--fh);
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.015em;
  border-radius:var(--r-m);
  border:1px solid transparent;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), filter var(--fast) var(--ease);
  white-space:nowrap;
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,240,255,0.35);
  filter:brightness(1.08);
}
.btn-primary:active { transform:translateY(0); }
.btn-primary.btn-sm  { padding:0.6rem 1.1rem; font-size:0.78rem; }
.btn-primary.btn-lg  { padding:0.95rem 1.9rem; font-size:0.9rem; }
.btn-primary.btn-xl  { padding:1.15rem 2.4rem; font-size:1rem; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.8rem 1.6rem;
  color:var(--g100);
  font-family:var(--fh);
  font-size:0.85rem;
  font-weight:500;
  border:1px solid var(--border);
  border-radius:var(--r-m);
  backdrop-filter:blur(8px);
  transition: border-color 0.3s ease, color 0.3s ease,
              background 0.3s ease, box-shadow 0.3s ease;
  white-space:nowrap;
  position: relative;
  overflow: hidden;
  border-color: rgba(0,240,255,0.3);
color: rgba(0,240,255,0.85);
box-shadow: 0 0 14px rgba(0,240,255,0.08), inset 0 0 10px rgba(0,240,255,0.03);
}
.btn-ghost::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,240,255,0.06),
    transparent
  );
  transition: left 0.55s ease;
}
.btn-ghost:hover::after {
  left: 150%;
}
.btn-ghost:hover {
  border-color: rgba(0,240,255,0.7);
  color: var(--cyan);
  background: rgba(0,240,255,0.06);
  box-shadow: 0 0 28px rgba(0,240,255,0.2), inset 0 0 16px rgba(0,240,255,0.06);
}
.btn-ghost.btn-lg { padding:0.95rem 1.9rem; font-size:0.9rem; }

/* ---- GLASS PANEL ------------------------------------------ */
.glass {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-l);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:border-color var(--mid) var(--ease), background var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.glass:hover {
  border-color:rgba(0,240,255,0.13);
  background:var(--panel-h);
}

/* ---- SCROLL REVEAL ---------------------------------------- */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.vis { opacity:1; transform:translateY(0); }

/* ---- SECTION HEADER --------------------------------------- */
.sec-hdr { max-width:600px; margin-bottom:var(--sp-xl); }

/* ============================================================
   NAVIGATION
   ============================================================ */
#navbar {
  position:fixed; top:0; left:0; right:0;
  z-index:900;
  padding:1.2rem 2rem;
  transition:background var(--mid) var(--ease), border-color var(--mid) var(--ease), padding var(--mid) var(--ease);
}
#navbar.scrolled {
  background:rgba(5,5,5,0.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0.8rem 2rem;
}
.nav-inner {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; gap:1.5rem;
}
.nav-logo { display:flex; align-items:center; gap:0.7rem; flex-shrink:0; }
.logo-mark { flex-shrink:0; }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-name { font-family:var(--fh); font-size:1.15rem; font-weight:700; color:var(--white); letter-spacing:-0.01em; }
.logo-sub  { font-family:var(--fh); font-size:0.55rem; font-weight:500; letter-spacing:0.18em; color:var(--cyan-d); text-transform:uppercase; }

.nav-links {
  display:flex; align-items:center; gap:0.2rem;
  margin-left:auto;
}
.nav-link {
  padding:0.45rem 0.8rem;
  font-size:0.84rem; font-weight:500;
  color:var(--g400);
  border-radius:var(--r-s);
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav-link:hover { color:var(--white); background:rgba(255,255,255,0.05); }

.nav-actions { display:flex; align-items:center; gap:0.75rem; }
.lang-toggle {
  display:flex; align-items:center; gap:0.35rem;
  padding:0.42rem 0.7rem;
  font-family:var(--fh); font-size:0.75rem; font-weight:600; letter-spacing:0.06em;
  color:var(--g400);
  border:1px solid var(--border);
  border-radius:var(--r-s);
  transition:all var(--fast) var(--ease);
}
.lang-toggle:hover { color:var(--cyan); border-color:var(--border-c); }
.lang-sep { color:var(--g600); }

.nav-mob {
  display:none; flex-direction:column; gap:5px;
  padding:0.5rem; margin-left:auto; flex-shrink:0;
}
.nav-mob span { display:block; width:21px; height:1.5px; background:var(--white); border-radius:1px; transition:all var(--fast) var(--ease); }
.nav-mob.active span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-mob.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-mob.active span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
#hero {
  position:relative;
  height:100vh; min-height:680px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#heroCanvas { position:absolute; inset:0; z-index:0; }
#hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;

  background:
   
    /* Lớp 2: vùng tối trung tâm giữ text readable */
    radial-gradient(ellipse 65% 70% at 28% 50%, rgba(5,5,20,0.95) 0%, transparent 75%),
    /* Lớp 3: ánh sáng xanh góc phải (phía globe) */
    radial-gradient(ellipse 55% 60% at 85% 45%, rgba(0,60,160,0.18) 0%, transparent 65%),
    /* Lớp 4: glow xanh lá góc dưới trái */
    radial-gradient(ellipse 40% 35% at 10% 90%, rgba(0,255,102,0.04) 0%, transparent 55%),
    /* Lớp 5: glow cyan góc trên phải */
    radial-gradient(ellipse 35% 30% at 92% 8%, rgba(0,240,255,0.05) 0%, transparent 50%);

  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
.hero-inner {
  position:relative; z-index:2;
  text-align:center;
  max-width:900px;
  padding:0 1.5rem;
  display:flex; flex-direction:column; align-items:center;
  gap:1.6rem;
  margin-top:4rem; /* nav offset */
}

/* Badge */
.hero-badge {
  position:relative;
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.45rem 1.2rem 0.45rem 2rem;
  font-family:var(--fh); font-size:0.72rem; font-weight:500; letter-spacing:0.07em;
  color:var(--cyan);
  border:1px solid rgba(0,240,255,0.18);
  border-radius:100px;
  background:rgba(0,240,255,0.03);
}
.pulse-ring {
  position:absolute; left:0.85rem;
  width:9px; height:9px;
  border-radius:50%;
  border:1.5px solid var(--cyan);
  animation:ring 2.2s ease-out infinite;
}
.pulse-core {
  position:absolute; left:calc(0.85rem + 1.5px);
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan);
  animation:core-pulse 2.2s ease-out infinite;
  top:50%; transform:translateY(-50%);
}
@keyframes ring {
  0%   { transform:scale(0.6); opacity:1; }
  100% { transform:scale(2.4); opacity:0; }
}
@keyframes core-pulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.35; }
}

/* Headline */
.hero-h1 {
  font-family:var(--fh);
  font-size:clamp(2.6rem,6.5vw,5.2rem);
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.035em;
  color:var(--white);
}
body.lang-vi .hero-h1 {
  font-size: clamp(2rem, 5vw, 3.8rem);
}
.hero-sub {
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  color: rgba(210, 230, 255, 0.85);
  line-height: 1.75;
  max-width: 50ch;
}

/* Metrics row */
.hero-metrics { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; justify-content:center; }
.m-tag { display:flex; flex-direction:column; align-items:center; gap:2px; }
.m-val {
  font-family: var(--fh);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.02em;
  line-height: 1;
}
.m-lbl {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--g400);
  text-transform: uppercase;
  margin-top: 0.3rem;
}
.m-sep { width: 1px; height: 36px; background: rgba(0,240,255,0.15); }

/* CTAs */
.hero-ctas { display:flex; align-items:center; gap:0.875rem; flex-wrap:wrap; justify-content:center; }

/* Scroll hint */
.hero-scroll {
  position:absolute; bottom:2.25rem; left:50%; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  font-family:var(--fh); font-size:0.65rem; letter-spacing:0.12em; color:var(--g600); text-transform:uppercase;
}
.scroll-bar {
  width:1px; height:38px;
  background:linear-gradient(to bottom, transparent, var(--cyan));
  animation:scroll-bar 2.2s ease-in-out infinite;
}
@keyframes scroll-bar {
  0%   { opacity:0; transform:scaleY(0); transform-origin:top; }
  50%  { opacity:1; transform:scaleY(1); transform-origin:top; }
  51%  { transform-origin:bottom; }
  100% { opacity:0; transform:scaleY(0); transform-origin:bottom; }
}

/* ============================================================
   NETWORK MAP
   ============================================================ */
#map {
  padding:var(--sp-xl) 0 var(--sec);
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(0,240,255,0.04) 0%, transparent 70%),
    var(--deep);
}
#map .eyebrow {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cyan);
  margin-bottom: 0;
}
.map-head {
  max-width:1280px; margin:0 auto var(--sp-xl);
  padding:0 2rem;
}
.map-wrap {
  max-width:1280px; margin:0 auto;
  padding:0 2rem;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.8fr;
  gap:2rem;
  align-items:stretch;
  height:580px;
}
.map-left {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.5rem;
  padding:2rem 0;
  align-self:stretch;
}
.ms-val {
  font-family: var(--fh);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.4rem;
}
.ms-unit {
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0;
}
.ms-name {
  font-family: var(--fh);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.ms-desc {
  font-family: var(--fb);
  font-size: 0.78rem;
  color: var(--g400);
  line-height: 1.5;
}
.map-stats-col {
  display:flex;
  flex-direction:column;
  flex:1;
  gap:0;
  border:1px solid rgba(0,240,255,0.2);
  border-radius:var(--r-l);
  overflow:hidden;
  backdrop-filter:blur(12px);
  background:rgba(5,5,15,0.75);
  justify-content:space-between;
}
.map-stats-col .map-stat {
  padding:1.5rem 1.75rem;
  border-bottom:1px solid rgba(0,240,255,0.1);
  position:relative;
  overflow:hidden;
  cursor:default;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:background var(--mid) var(--ease);
}
.map-stats-col .map-stat:last-child { border-bottom:none; }
.map-stats-col .map-stat:hover { background:rgba(0,240,255,0.06); }
.map-stats-col .map-stat::after {
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,240,255,0.1),transparent);
}
.map-stats-col .map-stat:hover::after {
  left:150%;
  transition:left 1.8s ease;
}
.map-stats-col .ms-val { font-size:2.2rem; }
.map-stats-col .ms-name { font-size:1rem; }
.map-stats-col .ms-desc { font-size:0.8rem; }
#leafletMap {
  height:100%; width:100%;
  border-radius:var(--r-l);
  border:1px solid var(--border);
  overflow:hidden;
  min-height:0;
}
.leaflet-container { background:#080810 !important; }
.leaflet-control-zoom {
  border:1px solid var(--border) !important;
  background:rgba(5,5,5,0.9) !important;
  border-radius:var(--r-s) !important;
  box-shadow:none !important;
}
.leaflet-control-zoom a {
  background:transparent !important; color:var(--g400) !important;
  border-bottom-color:var(--border) !important;
  font-family:var(--fh) !important;
  transition:color var(--fast) var(--ease) !important;
}
.leaflet-control-zoom a:hover { color:var(--cyan) !important; }
.leaflet-control-attribution {
  background:rgba(5,5,5,0.72) !important;
  color:var(--g600) !important;
  font-size:0.62rem !important;
  border-radius:var(--r-s) 0 0 0 !important;
}
.mp-icon { background:transparent !important; border:none !important; }
.mp-ring {
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid;
  animation:map-ring 2.5s ease-out infinite;
}
.mp-dot { position:absolute; inset:4px; border-radius:50%; }
@keyframes map-ring {
  0%   { transform:scale(0.4); opacity:1; }
  100% { transform:scale(1.6); opacity:0; }
}
.map-tip {
  background:rgba(5,5,5,0.92) !important;
  color:var(--white) !important;
  border:1px solid var(--border-c) !important;
  border-radius:var(--r-s) !important;
  font-family:var(--fh) !important;
  font-size:0.78rem !important;
  padding:0.3rem 0.7rem !important;
  box-shadow:0 0 14px var(--cyan-glow) !important;
}
.leaflet-tooltip-top::before { display:none !important; }

/* Legend */
.map-legend {
  position:absolute; bottom:1.25rem; right:1.25rem;
  z-index:800;
  display:flex; flex-direction:column; gap:0.5rem;
  padding:0.875rem 1rem;
  background:rgba(5,5,5,0.82);
  backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:var(--r-l);
}
.leg-txt { font-size:0.65rem; color:var(--g400); line-height:1.3; white-space:nowrap; }
.leg-item { display:flex; align-items:flex-start; gap:0.6rem; }
.leg-line {
  display:block; width:26px; height:2px; border-radius:1px; flex-shrink:0; margin-top:0.55rem;
}
.leg-line.domestic { background:var(--cyan); }
.leg-line.land     { background:#F59E0B; }
.leg-line.intl     { background:#00B4FF; }
.leg-txt { font-size:0.75rem; color:var(--g400); line-height:1.45; }

/* Map sidebar */
.map-sidebar {
  position:absolute; right:2rem; top:0;
  width:300px; height:100%;
  background:rgba(5,5,5,0.96);
  border:1px solid var(--border-c);
  border-radius:var(--r-l);
  backdrop-filter:blur(18px);
  transform:translateX(calc(100% + 1.5rem));
  transition:transform var(--mid) var(--ease);
  z-index:20; overflow-y:auto;
}
.map-sidebar.open { transform:translateX(0); }
.sidebar-x {
  position:absolute; top:1rem; right:1rem;
  color:var(--g400); padding:0.25rem; border-radius:var(--r-s);
  transition:color var(--fast) var(--ease);
}
.sidebar-x:hover { color:var(--white); }
.sidebar-body { padding:1.5rem; padding-top:3rem; }

/* ============================================================
   STATS
   ============================================================ */
#stats {
  padding:var(--sec) 2rem;
  max-width:1280px; margin:0 auto;
}
.stats-eye {
  display:block;
  font-family:var(--fh); font-size:0.67rem; font-weight:500; letter-spacing:0.22em;
  color:var(--g600); text-transform:uppercase; text-align:center;
  margin-bottom:var(--sp-xl);
}
/* .stats-row/.stat-blk removed — replaced by .stats-split (Phase 9) */
.s-counter {
  font-family:var(--fh);
  font-size:clamp(3.5rem,9vw,7.5rem);
  font-weight:700; line-height:1;
  letter-spacing:-0.045em;
  background:linear-gradient(135deg, #ffffff 0%, var(--cyan) 55%, var(--green) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.s-unit {
  font-family:var(--fh);
  font-size:clamp(1.4rem,3vw,2.2rem);
  font-weight:500; color:var(--g400);
  letter-spacing:-0.02em;
}
.s-name { font-family:var(--fh); font-size:0.95rem; font-weight:600; color:var(--white); margin-bottom:0.4rem; }
.s-detail { font-family:var(--fh); font-size:0.7rem; letter-spacing:0.05em; color:var(--g600); }

.s-badge {
  display:flex; flex-direction:column; align-items:center; gap:0.375rem;
  padding:1.2rem 1.75rem; min-width:150px;
  border:1px solid var(--border); border-radius:var(--r-l);
  background:var(--panel);
  transition:border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.s-badge:hover { border-color:var(--border-c); box-shadow:0 0 22px var(--cyan-glow); }
.b-val  { font-family:var(--fh); font-size:1.65rem; font-weight:700; letter-spacing:-0.02em; color:var(--cyan); }
.b-desc { font-size:0.75rem; color:var(--g400); text-align:center; }

/* ============================================================
   CORE SERVICES — BENTO
   ============================================================ */
#services {
  padding:var(--sec) 2rem;
  background:var(--deep);
}
#services .sec-hdr { max-width:1280px; margin:0 auto var(--sp-xl); }
.bento {
  max-width:1280px; margin:0 auto;
  display:grid;
  grid-template-columns:3fr 2fr;
  grid-template-rows:auto auto;
  gap:1.125rem;
}
.bcard {
  padding:2rem; position:relative; overflow:hidden;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease),
              border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.blg { grid-row:1/3; display:flex; flex-direction:column; gap:1.5rem; min-height:400px; }
.bmd { display:flex; flex-direction:column; gap:0.875rem; }

.bicon {
  width:50px; height:50px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,240,255,0.18);
  border-radius:var(--r-m);
  background:rgba(0,240,255,0.04);
}
.bicon-g { border-color:rgba(0,255,102,0.18); background:rgba(0,255,102,0.04); }
.btitle {
  font-family:var(--fh);
  font-size:1.3rem; font-weight:700;
  letter-spacing:-0.02em; color:var(--white); line-height:1.2;
}
.bmd .btitle { font-size:1.05rem; }
.bdesc { font-size:0.875rem; color:var(--g400); line-height:1.72; flex:1; transition: color var(--mid) var(--ease); }
.bspecs {
  display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:auto;
}
.bspecs span {
  padding:0.28rem 0.7rem;
  background:rgba(0,240,255,0.05);
  border:1px solid rgba(0,240,255,0.14);
  border-radius:100px;
  font-family:var(--fh); font-size:0.72rem; font-weight:600;
  color:var(--cyan); letter-spacing:0.04em;
  transition: background var(--mid) var(--ease), 
              border-color var(--mid) var(--ease),
              color var(--mid) var(--ease);
}
.bspecs span:hover {
  background: rgba(0,240,255,0.15);
  border-color: rgba(0,240,255,0.5);
  color: #fff;
  cursor: default;
}
.btags { display:flex; flex-wrap:wrap; gap:0.38rem; margin-top:0.5rem; }
.btags span {
  padding:0.22rem 0.55rem;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:100px;
  font-size:0.68rem; color:var(--g400); letter-spacing:0.04em;
  transition: background var(--mid) var(--ease), 
              border-color var(--mid) var(--ease),
              color var(--mid) var(--ease);
}
.btags span:hover {
  background: rgba(0,240,255,0.15);
  border-color: rgba(0,240,255,0.5);
  color: #fff;
  cursor: default;
}

/* Animated grid lines on large card */
.blines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0, transparent 58px, rgba(0,240,255,0.018) 58px, rgba(0,240,255,0.018) 59px);
}

/* ============================================================
   COMPETITIVE EDGE — EXPANDING CARDS
   ============================================================ */
#edge { padding:var(--sec) 2rem; }
#edge .sec-hdr { max-width:1280px; margin:0 auto var(--sp-xl); }

.exp-cards {
  max-width:1280px; margin:0 auto;
  display:flex; gap:0.625rem;
  height:500px;
}
.ecard {
  flex:1; position:relative; overflow:hidden;
  border-radius:var(--r-l); cursor:pointer;
  border:1px solid var(--border);
  transition:flex var(--slow) var(--ease), border-color var(--mid) var(--ease);
  outline:none;
}
.ecard:focus-visible { border-color:var(--cyan); }
.ecard.active { flex:4.2; border-color:rgba(0,240,255,0.18); }

.ecard-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:grayscale(0.75) brightness(0.35);
  transition:filter var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.ecard.active .ecard-bg {
  filter:grayscale(0.1) brightness(0.45);
  transform:scale(1.03);
}
.ecard::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.15) 55%, transparent 100%);
  z-index:1;
}
.ecard-inner {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.625rem;
}
.ecard-num {
  position:absolute; top:1.375rem; left:1.375rem;
  font-family:var(--fh); font-size:0.7rem; font-weight:600;
  letter-spacing:0.12em; color:var(--cyan); opacity:0.65;
  writing-mode:vertical-rl; transform:rotate(180deg);
  transition:writing-mode var(--slow), transform var(--slow), opacity var(--mid);
}
.ecard.active .ecard-num {
  writing-mode:horizontal-tb; transform:none; opacity:1;
}
.ecard-body {
  opacity:0; transform:translateY(14px);
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.ecard.active .ecard-body {
  opacity:1; transform:translateY(0);
  transition-delay:0.14s;
}
.ecard-title {
  font-family:var(--fh);
  font-size:1.2rem; font-weight:700;
  letter-spacing:-0.02em; color:var(--white);
  line-height:1.2; margin-bottom:0.7rem;
}
.ecard-desc { font-size:0.85rem; color:rgba(255,255,255,0.6); line-height:1.72; }

/* #hubs removed — section renamed to #about (Phase 11) */

/* ============================================================
   PRICING CALCULATOR
   ============================================================ */
#pricing { padding:var(--sec) 2rem; }
#pricing .sec-hdr { max-width:1280px; margin:0 auto var(--sp-xl); }

.calc-wrap {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start;
}
.calc-ctrl { padding:2rem; display:flex; flex-direction:column; gap:2rem; }
.cf { display:flex; flex-direction:column; }
.clf {
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--fh); font-size:0.8rem; font-weight:600;
  letter-spacing:0.1em; color:var(--g400); text-transform:uppercase;
  margin-bottom:0.875rem;
}
.clive { font-family:var(--fh); font-size:0.85rem; font-weight:700; color:var(--cyan); text-transform:none; letter-spacing:0; }

/* Route selector */
.route-sel { display:flex; flex-direction:column; gap:0.5rem; }
.rb {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.8rem 1.125rem;
  border:1px solid var(--border); border-radius:var(--r-m);
  font-family:var(--fh); font-size:0.75rem; font-weight:600;
  letter-spacing:0.08em; color:var(--g400);
  transition:all var(--fast) var(--ease);
}
.rb:hover { border-color:var(--border-c); color:var(--white); }
.rb.active { border-color:var(--cyan); background:rgba(0,240,255,0.04); color:var(--white); }
.rb svg { color:var(--cyan); flex-shrink:0; }
.rfrom,.rto { font-size:0.85rem; letter-spacing:0.08em; }

/* Slider */
.slider-wrap { display:flex; flex-direction:column; gap:0.625rem; }
.cslider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px;
  border-radius:2px; outline:none; cursor:pointer;
  background-color:var(--border);
  background-image:linear-gradient(var(--cyan),var(--cyan));
  background-size:0% 100%; background-repeat:no-repeat;
  transition:background-size var(--fast) var(--ease);
}
.cslider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:16px; height:16px;
  background:var(--void); border:2px solid var(--cyan); border-radius:50%;
  box-shadow:0 0 10px var(--cyan-glow); cursor:pointer;
}
.cslider::-moz-range-thumb {
  width:16px; height:16px;
  background:var(--void); border:2px solid var(--cyan); border-radius:50%; cursor:pointer;
}
.slide-lbls {
  display:flex; justify-content:space-between;
  font-family:var(--fh); font-size:0.82rem; font-weight:600;
  color:rgba(0,240,255,0.55); letter-spacing:0.05em;
}

/* Term selector */
.term-sel { display:flex; gap:0.75rem; }
.tb {
  flex:1; padding:0.8rem 1rem;
  border:1px solid var(--border); border-radius:var(--r-m);
  font-family:var(--fh); font-size:1.2rem; font-weight:600;
  color:var(--g400);
  display:flex; flex-direction:column; align-items:center; gap:0.2rem;
  transition:all var(--fast) var(--ease);
}
.tb:hover { border-color:var(--border-c); color:var(--white); }
.tb.active { border-color:var(--cyan); background:rgba(0,240,255,0.04); color:var(--white); }
.save-tag { font-size:0.82rem; color:var(--green); font-weight:500; letter-spacing:0.04em; animation: glow-pulse-g 2.4s ease-in-out infinite; }

/* LED Display */
.led-wrap { position:sticky; top:5.5rem; }
.led-screen {
  border:1px solid rgba(0,240,255,0.28);
  border-radius:var(--r-xl);
  background:#020610;
  padding:2.25rem;
  position:relative; overflow:hidden;
  box-shadow:0 0 55px rgba(0,240,255,0.07), inset 0 0 35px rgba(0,240,255,0.025);
}
/* Scan lines effect */
.led-lines {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(
    0deg, transparent 0px, transparent 3px,
    rgba(0,240,255,0.011) 3px, rgba(0,240,255,0.011) 4px
  );
}
.led-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.375rem; position:relative; z-index:1;
}
.led-lbl {
  font-family:var(--fh); font-size:0.7rem; font-weight:600;
  letter-spacing:0.22em; color:rgba(0,240,255,0.8); text-transform:uppercase;
}
.led-live {
  display:flex; align-items:center; gap:0.4rem;
  font-family:var(--fh); font-size:0.62rem; letter-spacing:0.14em; color:var(--green);
}
.led-dot {
  width:6px; height:6px; background:var(--green); border-radius:50%;
  animation:led-blink 1.6s ease-in-out infinite;
}
@keyframes led-blink { 0%,100%{opacity:1;} 50%{opacity:0.15;} }
.led-usd {
  font-family:var(--fh); font-size:0.7rem; font-weight:600;
  letter-spacing:0.16em; color:rgba(0,240,255,0.35);
  position:relative; z-index:1; margin-bottom:0.2rem;
}
.led-price {
  font-family:var(--fh);
  font-size:clamp(2.8rem,5.5vw,4.2rem);
  font-weight:700; line-height:1; letter-spacing:-0.04em;
  color:var(--cyan);
  text-shadow:0 0 28px rgba(0,240,255,0.38);
  margin-bottom:1.5rem;
  position:relative; z-index:1;
  transition:color var(--fast) var(--ease);
}
.led-brk {
  display:flex; flex-direction:column; gap:0.5rem;
  padding:1.125rem;
  background:rgba(0,240,255,0.028); border:1px solid rgba(0,240,255,0.07);
  border-radius:var(--r-m); margin-bottom:1.5rem;
  position:relative; z-index:1;
}
.brk-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.brk-l { font-family:var(--fh); font-size:0.75rem; letter-spacing:0.04em; color:var(--g600); }
.brk-v { font-family:var(--fh); font-size:0.8rem; font-weight:600; color:var(--white); }
.calc-cta-btn { width:100%; justify-content:center; position:relative; z-index:1; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer { background:var(--void); border-top:1px solid var(--border); }

/* B1 — eyebrow override */
#footer .eyebrow {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cyan);
  margin-bottom: 0;
}
.ft-cta {
  text-align:center;
  padding:var(--sp-3x) 2rem var(--sp-2x);
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
  position:relative; overflow:hidden;
}
.ft-cta::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(520px,100%); height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:0.25;
}
.ft-cta::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 80% 55% at 50% 0%, rgba(0,240,255,0.07) 0%, transparent 70%);
}
.ft-cta > * { position:relative; z-index:1; }
#ftCtaCanvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* B2 — ft-h2 reduced size */
.ft-h2 {
  font-family:var(--fh);
  font-size:clamp(1.75rem,3.2vw,2.8rem);
  font-weight:700; letter-spacing:-0.03em; line-height:1.1;
  color:var(--white);
}

/* B3 — Metric stat blocks (redesigned từ pills → hero-style) */
.ft-cta-metrics {
  display:flex; gap:0; align-items:stretch;
  border:1px solid var(--border-c); border-radius:var(--r-l);
  overflow:hidden; flex-wrap:wrap;
}
.ft-cta-pill {
  display:flex; flex-direction:column; align-items:center; gap:0.2rem;
  padding:0.875rem 1.75rem;
  border-right:1px solid var(--border-c);
  background:rgba(0,240,255,0.03);
  transition:background var(--fast) var(--ease);
}
.ft-cta-pill:last-child { border-right:none; }
.ft-cta-pill:hover { background:rgba(0,240,255,0.07); }
.ft-cta-pill .pill-val {
  font-family:var(--fh); font-size:1.35rem; font-weight:700;
  color:var(--cyan); letter-spacing:-0.02em; line-height:1;
}
.ft-cta-pill .pill-lbl {
  font-family:var(--fh); font-size:0.65rem; font-weight:500;
  letter-spacing:0.12em; color:var(--g400); text-transform:uppercase;
}

/* B5 — TextHoverEffect SVG container */
.ft-hover-wrap {
  width:100%; max-width:640px; height:100px;
  cursor:crosshair; margin-top:0.5rem; overflow:visible;
}
@keyframes ft-draw {
  to { stroke-dashoffset:0; }
}
.ft-wm-stroke {
  stroke-dasharray:3000; stroke-dashoffset:3000;
}
.ft-wm-stroke.playing {
  animation:ft-draw 2.8s cubic-bezier(0,0,0.2,1) forwards;
}

.ft-main {
  max-width:1280px; margin:0 auto;
  padding:var(--sp-xl) 2rem;
  display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem;
  border-top:1px solid var(--border);
}
.ft-brand { display:flex; flex-direction:column; gap:1rem; }
.ft-brand .logo-mark { height:110px !important; width:auto !important; max-width:240px; }
.ft-tag { font-size:0.875rem; color:var(--g400); line-height:1.75; }

.ft-main { position:relative; overflow:hidden; }

.ft-wordmark-wrap {
  position:absolute;
  bottom:-17.5%; left:0; right:0;
  pointer-events:none; user-select:none;
  z-index:0;
}
.ft-wordmark-wrap svg { width:100%; display:block; }

.ft-brand, .ft-links, .ft-contact, .ft-nl {
  position:relative; z-index:1;
}

@keyframes ft-stroke-draw {
  to { stroke-dashoffset:0; }
}
#ftWmText {
  stroke-dasharray:4000;
  stroke-dashoffset:4000;
}
#ftWmText.drawing {
  animation:ft-stroke-draw 4s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* T5 — Social links */
.ft-social { display:flex; gap:0.625rem; margin-top:0.25rem; }
.ft-social-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem;
  border:1px solid var(--border); border-radius:var(--r-m);
  color:var(--g400); background:transparent;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.ft-social-link:hover {
  color:var(--cyan); border-color:var(--border-c);
  background:var(--cyan-glow);
}

/* T4 — Quick links column */
.ft-links { display:flex; flex-direction:column; gap:0.5rem; }
.ft-links h4 { font-family:var(--fh); font-size:0.95rem; font-weight:600; letter-spacing:0.14em; color:var(--white); text-transform:uppercase; margin-bottom:0.5rem; }
.ft-links a { font-size:0.875rem; color:var(--g400); transition:color var(--fast) var(--ease); text-decoration:none; }
.ft-links a:hover { color:var(--cyan); }

.ft-contact { display:flex; flex-direction:column; gap:0.5rem; }
.ft-contact h4 { font-family:var(--fh); font-size:0.95rem; font-weight:600; letter-spacing:0.14em; color:var(--white); text-transform:uppercase; margin-bottom:0.5rem; }
.ft-contact a { font-size:0.875rem; color:var(--g400); transition:color var(--fast) var(--ease); }
.ft-contact a:hover { color:var(--cyan); }

/* T6 — NOC pill + sub-text */
.noc-pill {
  display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.35rem 0.8rem; width:fit-content; margin-top:0.375rem;
  font-family:var(--fh); font-size:0.72rem; font-weight:600; letter-spacing:0.08em;
  color:var(--green); border:1px solid var(--border-g); border-radius:100px;
  background:rgba(0,255,102,0.035);
}
.noc-dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:led-blink 1.6s ease-in-out infinite; }
.noc-sub { font-size:0.72rem; color:var(--g400); margin-top:0.25rem; }

.ft-nl { display:flex; flex-direction:column; gap:0.625rem; }
.ft-nl h4 { font-family:var(--fh); font-size:0.95rem; font-weight:600; letter-spacing:0.14em; color:var(--white); text-transform:uppercase; }
.ft-nl p { font-size:0.84rem; color:var(--g400); }
.nl-form { display:flex; }
.nl-inp {
  flex:1; padding:0.7rem 0.9rem;
  background:rgba(255,255,255,0.04); border:1px solid var(--border); border-right:none;
  border-radius:var(--r-m) 0 0 var(--r-m);
  color:var(--white); font-family:var(--fb); font-size:0.84rem;
  outline:none; transition:border-color var(--fast) var(--ease);
}
.nl-inp::placeholder { color:var(--g600); }
.nl-inp:focus { border-color:var(--border-c); }
.nl-btn {
  padding:0.7rem 1rem;
  background:linear-gradient(135deg, var(--cyan), var(--cyan-d));
  border-radius:0 var(--r-m) var(--r-m) 0;
  color:#000; transition:opacity var(--fast) var(--ease);
}
.nl-btn:hover { opacity:0.82; }

.ft-bot {
  max-width:1280px; margin:0 auto;
  padding:1.375rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border); gap:1rem; flex-wrap:wrap;
}
.ft-copy { font-size:0.78rem; color:var(--g400); }
.ft-legal { display:flex; gap:1.5rem; flex-wrap:wrap; }
.ft-legal a { font-size:0.78rem; color:var(--g400); transition:color var(--fast) var(--ease); }
.ft-legal a:hover { color:var(--white); }


.led-main-row { display:block; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
  .bento { grid-template-columns:1fr 1fr; }
  .blg   { grid-row:auto; grid-column:1/3; }
  .calc-wrap { grid-template-columns:1fr; }
  .led-wrap { position:static; }
  .map-wrap { grid-template-columns:1fr; height:460px; }
  .map-legend { display:none; }
  .ft-main { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  :root { --sec: clamp(3rem,7vw,5rem); }

  .nav-links {
    display:none; position:fixed;
    top:58px; left:0; right:0;
    background:rgba(5,5,5,0.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    flex-direction:column; padding:0.875rem; gap:0.25rem;
  }
  .nav-links.open { display:flex; }
  .nav-link { padding:0.8rem 1rem; }
  .nav-actions .btn-primary { display:none; }
  .nav-mob { display:flex; }

  .nav-logo img { height: 64px !important; }
  .hero-h1 { letter-spacing:-0.025em; }
  .hero-scroll { display:none; }

  /* Map */
  .map-wrap { grid-template-columns:1fr !important; height:auto !important; display:flex !important; flex-direction:column !important; gap:1rem !important; }
  .map-left { order:2; padding:0 !important; }
  #leafletMap { order:1; height:300px !important; min-height:300px !important; }
  .map-stats-col { flex-direction:row !important; }
  .map-stats-col .map-stat { flex:1 !important; padding:1rem 0.75rem !important; border-bottom:none !important; border-right:1px solid rgba(0,240,255,0.1) !important; align-items:center !important; text-align:center !important; }
  .map-stats-col .map-stat:last-child { border-right:none !important; }
  .map-stats-col .ms-val { font-size:1.4rem !important; }
  .map-stats-col .ms-name { font-size:0.75rem !important; }
  .map-stats-col .ms-desc { display:none; }

  /* Stats */
  #stats { padding-top:2.5rem !important; }
  .stats-head { margin-bottom:1rem !important; }
  .stats-split { grid-template-columns:1fr !important; gap:1.5rem !important; }
  .stats-right { min-height:320px !important; }
  .stats-badges { grid-template-columns:1fr 1fr !important; }
  .stats-desc { max-width:100% !important; }
  .sl-num .s-counter { font-size:2.8rem !important; }

  /* Services */
  .bcard { padding:1.25rem !important; }
  .blg { min-height:auto !important; }
  .bcard .bttl { font-size:1.05rem !important; }
  .bcard .bdesc { font-size:0.8rem !important; line-height:1.5 !important; }
  .bicon { width:36px !important; height:36px !important; }

  /* Bento + Footer */
  .bento { grid-template-columns:1fr; }
  .blg  { grid-column:auto; }
  .exp-cards { flex-direction:column; height:auto; }
  .ecard { height:180px; flex:none; }
  .ecard.active { height:360px; }
  .ft-main { grid-template-columns:1fr; gap:2rem; }
  .ft-bot  { flex-direction:column; align-items:flex-start; }
  .ft-cta-metrics { gap:0.5rem; }
  .ft-wordmark { opacity:0.05; }
  .cursor-halo { display:none; }

/* Footer mobile fix */
#footer { padding-left:1.25rem !important; padding-right:1.25rem !important; }
.ft-cta { padding:2rem 1.25rem !important; text-align:center !important; }
.ft-cta-metrics { display:grid !important; grid-template-columns:1fr 1fr 1fr !important; }
.ft-metric { text-align:center !important; }
.pill-val { font-size:1rem !important; white-space:nowrap !important; }
.ft-cta .btn-primary { width:100% !important; text-align:center !important; justify-content:center !important; }
.ft-bot { gap:1rem !important; }
.ft-legal { justify-content:center !important; }
.ft-main { grid-template-columns:1fr 1fr !important; gap:1.5rem !important; }
.ft-col:first-child { grid-column:1/-1 !important; }
/* Edge — mobile: vertical expand, auto-advance giữ nguyên */
.exp-cards { flex-direction:column !important; height:auto !important; gap:0.5rem !important; }
.ecard { flex:none !important; overflow:hidden !important; max-height:64px !important; transition:max-height 0.4s ease !important; }
.ecard.active { max-height:400px !important; }
.ecard-num {
  writing-mode:horizontal-tb !important;
  transform:translateY(-50%) !important;
  position:absolute !important;
  top:50% !important; left:1rem !important;
  opacity:1 !important;
  font-size:0.72rem !important;
}
.ecard.active .ecard-num {
  position:relative !important;
  top:auto !important; left:auto !important;
  transform:none !important;
  margin-bottom:0.5rem !important;
}
/* Team grid — mobile layout */
.team-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
/* Team overlay — bottom gradient cố định, chỉ show tên + role */
.tmember-overlay {
  opacity:1 !important;
  background:linear-gradient(to top, rgba(5,5,18,0.92) 0%, rgba(5,5,18,0.4) 50%, transparent 100%) !important;
  align-items:flex-end !important;
  padding:0.875rem !important;
}
.tmember-info { transform:none !important; }
.tmember-email,
.tmember-linkedin { display:none !important; }
.tmember-name { font-size:0.85rem !important; margin-bottom:0.1rem !important; }
.tmember-role { font-size:0.62rem !important; margin-bottom:0 !important; }
.tmember { max-width:100% !important; flex:none !important; }
.tmember:nth-child(1) { order:4 !important; margin-bottom:0 !important; } /* CSO → row 3 */
.tmember:nth-child(2) { order:3 !important; margin-bottom:0 !important; } /* CMO → row 2 */
.tmember:nth-child(3) { order:1 !important; grid-column:1/-1 !important; margin-bottom:0 !important; } /* CEO → row 1 full */
.tmember:nth-child(4) { order:2 !important; margin-bottom:0 !important; } /* CTO → row 2 */
.tmember:nth-child(5) { order:5 !important; margin-bottom:0 !important; } /* DCTO → row 3 */

/* Pricing — 1 unified frame */
.calc-wrap {
  display:flex !important; flex-direction:column !important;
  gap:0 !important;
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(0,240,255,0.15) !important;
  border-radius:var(--r-l) !important;
  overflow:hidden !important;
  padding:0 !important;
}
.led-wrap { order:1 !important; position:static !important; width:100% !important; }
.led-screen {
  border-radius:0 !important;
  border:none !important;
  border-bottom:1px solid rgba(0,240,255,0.1) !important;
  padding:1.25rem !important;
}
.calc-ctrl { order:2 !important; padding:1.25rem !important; }
.led-price { font-size:2.8rem !important; }
.led-brk { margin:0.75rem 0 !important; }
.rb { padding:0.6rem 0.875rem !important; font-size:0.75rem !important; }
.calc-ctrl .cf { gap:0.5rem !important; }
.calc-custom { margin-top:1rem !important; padding:1.25rem !important; }

.led-main-row { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:1rem !important; }
.led-price { font-size:2.2rem !important; flex-shrink:0 !important; }
.led-brk { margin:0 !important; font-size:0.72rem !important; }
.term-sel { flex-direction:row !important; gap:0.5rem !important; }
.tb { flex:1 !important; padding:0.75rem 0.5rem !important; }
.led-screen .calc-cta-btn { display:none !important; }
.led-screen .led-note-subtle { display:none !important; }

/* LED compact */
.led-screen { padding:1.25rem !important; border-radius:var(--r-l) var(--r-l) 0 0 !important; border-bottom:none !important; }
.led-price { font-size:2.8rem !important; }
.led-top { margin-bottom:0.5rem !important; }
.led-brk { margin:0.75rem 0 !important; }

/* Controls compact */
.rb { padding:0.6rem 0.875rem !important; font-size:0.75rem !important; }
.calc-ctrl .cf { gap:0.5rem !important; }

/* Custom Quote — frame riêng */
.calc-custom { margin-top:1rem !important; padding:1.25rem !important; border-radius:var(--r-l) !important; }

/* Photo heights mobile */
.tmember-sm .tmember-photo { height:200px !important; min-height:200px !important; }
.tmember-lg .tmember-photo { height:240px !important; min-height:240px !important; }

#stickyRoute { font-family:var(--fh); font-size:0.75rem; color:var(--g400); }
#stickyBw { font-family:var(--fh); font-size:0.75rem; color:var(--g400); }
#stickyPrice { font-family:var(--fh); font-size:1.1rem; font-weight:700; color:var(--cyan); }
#stickyPrice small { font-size:0.65rem; color:var(--g400); margin-left:2px; }

.led-main-row {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1rem !important;
}
.led-price { font-size:2.2rem !important; }
.led-brk {
  margin:0 !important;
  flex-shrink:0 !important;
  font-size:0.72rem !important;
}
.calc-cta-mobile { width:100% !important; margin-top:0.75rem !important; }
/* Overlay luôn hiện trên mobile (không có hover) */
.tmember-overlay { opacity:1 !important; }
.tmember-info { transform:none !important; }
.ecard-inner { flex-direction:column !important; justify-content:center !important; padding:0 1rem !important; align-items:flex-start !important; min-height:64px !important; }
.ecard.active .ecard-inner { justify-content:flex-end !important; padding:1.25rem !important; min-height:220px !important; }
.ecard.active .ecard-body { opacity:1 !important; transform:none !important; transition-delay:0s !important; }
.ecard:not(.active) .ecard-body { opacity:0 !important; pointer-events:none !important; }
.tmember-photo img { filter:grayscale(0) brightness(0.85) !important; }
}
@media (max-width:480px) {
  .hero-metrics { gap:0.875rem; }
  .m-sep { display:none; }
  .hero-ctas { flex-direction:column; width:100%; }
  .btn-lg { width:100%; justify-content:center; }
  .s-badge { min-width:130px; padding:1rem 1.25rem; }
  .term-sel { flex-direction:column; }
  .ft-h2 { font-size:2rem; }
}


/* Ẩn body khi collapsed — đã có opacity:0 nhưng đảm bảo */
.ecard:not(.active) .ecard-body { display: none !important; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  #heroCanvas,.cursor-halo,#navbar,.hero-scroll { display:none; }
  body { background:#fff; color:#000; }
  .glass { border:1px solid #ccc; background:#f8f8f8; }
}
/* ============================================================
   STATS — Phase 9 redesign (Split Editorial Layout)
   ============================================================ */

.stats-split {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3rem;
  align-items: center;
}

/* LEFT column */
.stats-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stats-title {
  font-family: var(--fh);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--white);
}
.stats-desc {
  font-family: var(--fb);
  font-size: 0.9rem;
  color: var(--g100);
  line-height: 1.75;
  max-width: 38ch;
}
.stats-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.stats-badges .s-badge {
  flex-direction: column;
  align-items: center;
  text-align: center; 
  justify-content: flex-start;
  min-width: unset;
  padding: 0.875rem 1rem;
  gap: 0.3rem;
  background: rgba(0,240,255,0.025);
  border-top: 2px solid rgba(0,240,255,0.3);
  border-left: 1px solid rgba(0,240,255,0.1);
  border-right: 1px solid rgba(0,240,255,0.06);
  border-bottom: 1px solid rgba(0,240,255,0.06);
  border-radius: var(--r-s);
  transition: background var(--mid) var(--ease),
              border-top-color var(--mid) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.stats-badges .s-badge:hover {
  background: rgba(0,240,255,0.06);
  border-top-color: var(--cyan);
  box-shadow: 0 0 24px rgba(0,240,255,0.1);
}
.stats-badges .b-val {
  font-family: var(--fh);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
  text-align: center;
}
.stats-badges .b-desc {
  font-size: 0.7rem;
  color: var(--g400);
  text-align: center;
  line-height: 1.3;
}

/* RIGHT column */
.stats-right {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--r-m);
  overflow: hidden;
  background-image: url('https://images.unsplash.com/photo-1638715928530-511b6f24e5b3?w=1000&q=80');
  background-size: cover;
  background-position: center top;
  background-attachment: scroll;
}
.stats-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5,5,15,0.82) 0%,
    rgba(4,8,22,0.73) 60%,
    rgba(0,15,28,0.65) 100%
  );
  z-index: 0;
}
.stat-line {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  padding: 1.5rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease),
              transform 0.55s var(--ease),
              background var(--mid) var(--ease);
}
.stat-line:last-child { border-bottom: none; }
.stat-line:hover { background: rgba(0,240,255,0.015); }

.sl-accent {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 60px;
}
.sl-body { flex: 1; }
.sl-num {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.375rem;
}
.sl-num .s-counter {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  font-family: var(--fh);
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, var(--cyan) 55%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sl-num .s-unit {
  font-family: var(--fh);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 500;
  color: var(--g400);
  letter-spacing: -0.01em;
}
.sl-name {
  font-family: var(--fh);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.25rem;
}
.sl-detail {
  font-family: var(--fh);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
  color: var(--g600);
}
/* Shimmer sweep on stat-line hover */
.stat-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,240,255,0.06) 40%,
    rgba(0,240,255,0.12) 50%,
    rgba(0,240,255,0.06) 60%,
    transparent 100%
  );
  transform: translateX(-100%);
  z-index: 2;
  pointer-events: none;
}
.stat-line:hover::after {
  transform: translateX(220%);
  transition: transform 1.8s ease;
}
.stats-head {
  max-width: 1280px;
  margin: 0 auto var(--sp-xl);
}
#stats .eyebrow {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cyan);
  margin-bottom: 0;
}
/* ============================================================
   DEPTH EFFECTS — Phase 9 (A + B + C)
   ============================================================ */

/* A — Staggered reveal */
.stat-line.revealed {
  opacity: 1;
  transform: translateY(0);
}

.stats-badges .s-badge {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease),
              transform 0.45s var(--ease),
              background var(--mid) var(--ease),
              border-top-color var(--mid) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.stats-badges .s-badge.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* C — Accent bar glow pulse: mạnh hơn, visible hơn */
@keyframes accentPulseCyan {
  0%, 100% {
    opacity: 0.6;
    filter: drop-shadow(0 0 3px rgba(0,240,255,0.3));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(0,240,255,0.95)) drop-shadow(0 0 24px rgba(0,240,255,0.5));
  }
}
@keyframes accentPulseGreen {
  0%, 100% {
    opacity: 0.6;
    filter: drop-shadow(0 0 3px rgba(0,255,102,0.3));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(0,255,102,0.95)) drop-shadow(0 0 24px rgba(0,255,102,0.5));
  }
}
.stat-line:nth-child(1) .sl-accent { animation: accentPulseCyan  2.6s ease-in-out infinite 0s; }
.stat-line:nth-child(2) .sl-accent { animation: accentPulseGreen 2.6s ease-in-out infinite 0.65s; }
.stat-line:nth-child(3) .sl-accent { animation: accentPulseCyan  2.6s ease-in-out infinite 1.3s; }

/* ============================================================
   SERVICES — Phase 10 Redesign
   ============================================================ */

/* 1. Eyebrow — pattern chuẩn từ lessons learned Phase 9 */
#services .eyebrow {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}

/* 2. Section background — dot grid texture */
#services {
  position: relative;
  overflow: hidden;
}
#services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,240,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}
#services .sec-hdr,
#services .bento,
#services .svc-metrics { position: relative; z-index: 1; }

/* 3. Icon upgrade — glassmorphism box */
.bicon {
  width: 60px;
  height: 60px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 20px rgba(0,240,255,0.05);
  transition: box-shadow var(--mid) var(--ease),
              border-color var(--mid) var(--ease),
              transform var(--mid) var(--ease);
}
.bicon-g {
  box-shadow: inset 0 0 20px rgba(0,255,102,0.05);
}
.bcard:hover .bicon {
  box-shadow: 0 0 0 1px rgba(0,240,255,0.5),
              inset 0 0 24px rgba(0,240,255,0.12),
              0 4px 20px rgba(0,240,255,0.1);
  transform: translateY(-2px);
}
.bcard:hover .bicon-g {
  box-shadow: 0 0 0 1px rgba(0,255,102,0.5),
              inset 0 0 24px rgba(0,255,102,0.12),
              0 4px 20px rgba(0,255,102,0.1);
}

/* 4. Bcard hover border glow */
.bcard:hover {
  border-color: rgba(0,240,255,0.2);
  box-shadow: 0 0 48px rgba(0,240,255,0.06), 0 2px 12px rgba(0,0,0,0.3);
}

/* 5. Scan line animation on large card */
@keyframes scanLine {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.blg::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,240,255,0.0) 10%,
    rgba(0,240,255,0.3) 50%,
    rgba(0,240,255,0.0) 90%,
    transparent 100%
  );
  animation: scanLine 5s ease-in-out infinite 1.5s;
  pointer-events: none;
  z-index: 3;
}

/* 6. Stagger entrance */
.bcard.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 7. Metrics strip */
.svc-metrics {
  max-width: 1280px;
  margin: 1.25rem auto 0;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.svc-m-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.375rem 1rem;
  border-left: 1px solid var(--border);
  transition: background var(--mid) var(--ease);
}
.svc-m-item:first-child { border-left: none; }
.svc-m-item:hover { background: var(--panel-h); }
.svc-m-val {
  font-family: var(--fh);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.svc-m-item:nth-child(odd)  .svc-m-val { color: var(--cyan); }
.svc-m-item:nth-child(even) .svc-m-val { color: var(--green); }
.svc-m-lbl {
  font-size: 0.68rem;
  color: var(--g400);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   SERVICES — Phase 10.1 Fixes (compact + visual upgrades)
   ============================================================ */

/* Fix 1: sec-title nhỏ lại, chỉ scope trong #services */
#services .sec-title {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  margin-top: 0.5rem;
}

/* Fix 2: Giảm padding section + margin header */
#services {
  padding: clamp(3rem, 5vw, 4.5rem) 2rem;
}
#services .sec-hdr {
  margin-bottom: 2rem;
}

/* Fix 3: blg background image fiber optic + compact height */
#services .blg {
  min-height: 0;
  position: relative;
  background-image:
    linear-gradient(rgba(5,5,18,0.75), rgba(5,5,18,0.75)),
    url('thietbitruyendan2.jpg');
  background-size: cover;
  background-position: 30% 86%;
}

/* Fix 4: bento compact — giảm min-height bmd cards */
#services .bmd {
  min-height: 0;
}

/* Fix 5: bento gap nhỏ lại */
#services .bento {
  gap: 0.875rem;
}
#services .blg .btitle { display: block; margin-bottom: 0.5rem; }

#services .blg .bdesc.en { display: block; margin-bottom: 0.75rem; }
#services .blg .bdesc.vi { display: none; }
body.lang-vi #services .blg .bdesc.vi { display: block; }
body.lang-vi #services .blg .bdesc.en { display: none; }

#services .blg .bspecs span {
  background: rgba(0,240,255,0.15);
  border-color: rgba(0,240,255,0.5);
  color: #fff;
  font-size: 0.8rem;
}

#services .blg .btitle,
#services .blg .bdesc {
  text-shadow: 0 1px 12px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,1);
  color: #ffffff;
}
#services .blg .btitle.en { display: block; }
#services .blg .btitle.vi { display: none; }
body.lang-vi #services .blg .btitle.vi { display: block; }
body.lang-vi #services .blg .btitle.en { display: none; }
/* A — Gradient mesh */
#services .bcard:nth-child(2) {
  background: radial-gradient(ellipse at top right, rgba(0,255,102,0.15) 0%, transparent 65%),
              var(--panel);
}
#services .bcard:nth-child(3) {
  background: radial-gradient(ellipse at top right, rgba(0,240,255,0.15) 0%, transparent 65%),
              var(--panel);
}
#services .bcard:nth-child(2) .bicon { position: relative; }
#services .bcard:nth-child(2) .bicon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(0,255,102,0.3);
  animation: iconPing 2s ease-out infinite;
}
#services .bcard:nth-child(3) .bicon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(0,240,255,0.3);
  animation: iconPing 2s ease-out infinite;
}
/* Internet card — green tags */
#services .bcard:nth-child(2) .btags span:hover {
  background: rgba(0,255,102,0.15);
  border-color: rgba(0,255,102,0.5);
  color: #fff;
}

/* Cloud card — cyan tags */
#services .bcard:nth-child(3) .btags span:hover {
  background: rgba(0,240,255,0.15);
  border-color: rgba(0,240,255,0.5);
  color: #fff;
}
#services .bcard:nth-child(2):hover .btags span {
  background: rgba(0,255,102,0.15);
  border-color: rgba(0,255,102,0.5);
  color: #fff;
}

#services .bcard:nth-child(3):hover .btags span {
  background: rgba(0,240,255,0.15);
  border-color: rgba(0,240,255,0.5);
  color: #fff;
}
#services .bcard:nth-child(2):hover .bdesc {
  color: rgba(255,255,255,0.85);
}

#services .bcard:nth-child(3):hover .bdesc {
  color: rgba(255,255,255,0.85);
}
/* ============================================================
   EDGE — Phase 11 Upgrades
   ============================================================ */

#edge .sec-hdr {
  margin-bottom: 2.5rem;
}

/* 2. Vertical slug label — hiển thị khi card collapsed */
.ecard-slug {
  position: absolute;
  top: 3.2rem;
  left: 1.375rem;
  font-family: var(--fh);
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--mid) var(--ease);
  z-index: 3;
}
.ecard.active .ecard-slug {
  opacity: 0;
  pointer-events: none;
}

/* 3. Larger, clearer typography khi expanded */
#edge .ecard-title {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--white);
}
#edge .ecard-desc {
  font-size: 0.925rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.82;
}

/* 4. Ảnh sáng hơn */
#edge .ecard-bg {
  filter: grayscale(0.55) brightness(0.5);
}
#edge .ecard.active .ecard-bg {
  filter: grayscale(0.05) brightness(0.62);
  transform: scale(1.03);
}

/* 5. Depth: glow border + top accent line khi active */
#edge .ecard.active {
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.18),
    0 24px 64px rgba(0,0,0,0.55),
    inset 0 0 40px rgba(0,0,0,0.3);
}
#edge .ecard.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--cyan) 40%, var(--green) 70%, transparent 100%);
  z-index: 4;
  opacity: 0.75;
}

/* 6. Hover trên card collapsed — số sáng nhẹ */
#edge .ecard:not(.active):hover {
  border-color: rgba(0,240,255,0.12);
}
#edge .ecard:not(.active):hover .ecard-num {
  opacity: 1;
  color: var(--cyan);
}
#edge .ecard:not(.active):hover .ecard-slug {
  color: rgba(255,255,255,0.7);
}
#edge .ecard:not(.active):hover .ecard-bg {
  filter: grayscale(0.35) brightness(0.58);
}
/* Fix eyebrow + title + slug + typography — Phase 11 */
#edge .eyebrow {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}
#edge .sec-title {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  margin-top: 0.5rem;
}
.ecard-slug {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.14em;
}
#edge .ecard-title {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  margin-bottom: 0.75rem;
}
#edge .ecard-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.85;
}
.ecard-headline { margin-bottom: 0.75rem; }
.ecard-detail {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 0.75rem;
}
#edge .ecard-num {
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.9;
}
#edge .ecard.active .ecard-num {
  font-size: 1.1rem;
  opacity: 1;
}
/* ecard-num i18n */
.vi.ecard-num { display: none; }
body.lang-vi .vi.ecard-num { display: block; }
body.lang-vi .en.ecard-num { display: none; }
/* EDGE DEPTH — Phase 11 */

/* B: Dot grid background */
#edge {
  position: relative;
  overflow: hidden;
}
#edge::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,240,255,0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}
#edge .sec-hdr,
#edge .exp-cards { position: relative; z-index: 1; }

/* C: Scan line trên active card */
#edge .ecard.active::after {
  background: linear-gradient(
    to top,
    rgba(5,5,5,0.95) 0%,
    rgba(5,5,5,0.1) 55%,
    transparent 100%
  );
}
#edge .ecard.active .ecard-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,240,255,0.012) 3px,
    rgba(0,240,255,0.012) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* D: Bottom fade */
#edge::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--void));
  pointer-events: none;
  z-index: 2;
}

/* E: Number glow khi active */
#edge .ecard.active .ecard-num {
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(0,240,255,0.6);
  opacity: 1;
}

/* A: Progress bar */
.ecard-progress {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  z-index: 5;
  transition: width linear;
}
/* ============================================================
   ABOUT / TEAM — Phase 11
   ============================================================ */
#about { padding: var(--sec) 2rem; }
#about .sec-hdr { max-width: 1280px; margin: 0 auto 3rem; }
#about .eyebrow {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.team-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  justify-content: center;
}

.tmember { flex: 1; max-width: 260px; }

.tmember-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  border: 1px solid var(--border);
  cursor: pointer;
}

.tmember-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.7);
  transition: filter var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.tmember-photo:hover img {
  filter: grayscale(0) brightness(0.85);
  transform: scale(1.04);
}

/* Overlay info */
.tmember-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,18,0.95) 0%, rgba(5,5,18,0.3) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
}
.tmember-photo:hover .tmember-overlay { opacity: 1; }

.tmember-info {
  transform: translateY(10px);
  transition: transform var(--mid) var(--ease);
}
.tmember-photo:hover .tmember-info { transform: translateY(0); }

.tmember-name {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.2rem;
}
.tmember-role {
  display: block;
  font-size: 0.7rem;
  color: var(--cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.tmember-email {
  display: block;
  font-size: 0.72rem;
  color: var(--g400);
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color var(--fast) var(--ease);
}
.tmember-email:hover { color: var(--cyan); }

.tmember-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: var(--g400);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.tmember-linkedin:hover { color: var(--cyan); }

/* Dim others on any hover */
.team-grid:has(.tmember-photo:hover) .tmember-photo:not(:hover) img {
  filter: grayscale(1) brightness(0.4);
}

/* Partners */
.partners-wrap {
  max-width: 1280px;
  margin: 4rem auto 0;
}
.partners-hdr {
  text-align: center;
  margin-bottom: 1.5rem;
}
.partners-marquee {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.partners-marquee::before,
.partners-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.partners-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--void), transparent);
}
.partners-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--void), transparent);
}

.partners-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
}
.track-fwd { animation: marquee-fwd 35s linear infinite; }
.track-rev { animation: marquee-rev 35s linear infinite; }

@keyframes marquee-fwd {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-rev {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

#about .sec-title {
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  margin-top: 0.5rem;
  white-space: nowrap;
}
/* Team photo heights with min-height fallback */
.tmember-sm .tmember-photo { height: 300px; min-height: 300px; }
.tmember-lg .tmember-photo { height: 480px; min-height: 480px; }

.tmember-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Team stagger layout override */
.team-grid {
  align-items: center;
  flex-wrap: nowrap;
}
.tmember:nth-child(1) { margin-bottom: 3rem; }
.tmember:nth-child(2) { margin-bottom: 5rem; }
.tmember:nth-child(3) { margin-bottom: 0; }
.tmember:nth-child(4) { margin-bottom: 5rem; }
.tmember:nth-child(5) { margin-bottom: 3rem; }

/* Logo partners — màu + no grayscale + no text */
.plogo-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: none;
  opacity: 0.85;
}
.plogo-item:hover img {
  filter: none;
  opacity: 1;
}
.plogo-item {
  min-width: 80px;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
}
.plogo-item span { display: none !important; }
.partners-hdr .eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--g400);
}
#map .sec-sub {
  max-width: 72ch;
  font-size: 1.05rem;
}
#map .sec-title {
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  margin-bottom: 0.75rem;
}
/* ============================================================
   PRICING — Phase 12 enhancements
   ============================================================ */

/* 1. Sync sec-title với Phase 11 pattern */
#pricing .sec-title {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  margin-top: 0.5rem;
}

/* 2. Route button — left-border active indicator */
.rb { position: relative; overflow: hidden; }
.rb.active::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 2px;
  background: var(--cyan);
  border-radius: 2px;
}

/* 3. Bandwidth overflow note */
.bw-note {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.5rem;
  font-family: var(--fh); font-size: 0.72rem; color: var(--g400);
}
.bw-note-link {
  color: var(--cyan); font-weight: 600; cursor: pointer;
  transition: opacity var(--fast) var(--ease);
}
.bw-note-link:hover { opacity: 0.7; }

/* 4. Discount callout trong LED screen */
.led-discount {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: rgba(0,255,102,0.05);
  border: 1px solid rgba(0,255,102,0.15);
  border-radius: var(--r-m);
  margin-bottom: 1.25rem;
  cursor: pointer; position: relative; z-index: 1;
  text-decoration: none;
  transition: background var(--fast) var(--ease);
}
.led-discount:hover { background: rgba(0,255,102,0.1); }
.led-disc-icon { font-size: 0.9rem; flex-shrink: 0; }
.led-disc-text {
  font-family: var(--fh); font-size: 0.72rem; font-weight: 600;
  color: var(--green); flex: 1; line-height: 1.4;
}
.led-disc-arr { font-size: 0.75rem; color: rgba(0,255,102,0.45); flex-shrink: 0; }

/* 5. Custom quote card */
.calc-custom {
  max-width: 1280px;
  margin: 1.5rem auto 0;
  padding: 1.5rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column; gap: 0.75rem;
  position: relative; z-index: 1;
}
.cq-hdr { display: flex; align-items: flex-start; gap: 0.625rem; }
.cq-icon { font-size: 1rem; margin-top: 0.1rem; flex-shrink: 0; }
.cq-title {
  font-family: var(--fh); font-size: 0.875rem; font-weight: 600; color: var(--white);
}
.cq-desc { font-size: 0.78rem; color: var(--g400); line-height: 1.6; }
.cq-toggle {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border-c); border-radius: var(--r-m);
  color: var(--cyan);
  font-family: var(--fh); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--fast) var(--ease);
  width: 100%;
}
.cq-toggle:hover { background: rgba(0,240,255,0.06); }
.cq-toggle .cq-arr { transition: transform var(--fast) var(--ease); }
.cq-toggle.open .cq-arr { transform: rotate(180deg); }

/* 6. Inline contact form */
.cq-form {
  display: none; flex-direction: column; gap: 0.5rem;
}
.cq-form.open { display: flex; }
.cq-inp {
  padding: 0.65rem 0.875rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border); border-radius: var(--r-m);
  color: var(--white);
  font-size: 0.8rem; font-family: var(--fb);
  outline: none; transition: border-color var(--fast) var(--ease);
}
.cq-inp::placeholder { color: var(--g600); }
.cq-inp:focus { border-color: var(--border-c); }
.cq-submit {
  padding: 0.7rem;
  background: rgba(0,240,255,0.08);
  border: 1px solid var(--border-c); border-radius: var(--r-m);
  color: var(--cyan);
  font-family: var(--fh); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--fast) var(--ease);
}
.cq-submit:hover { background: rgba(0,240,255,0.14); }
.cq-fine { font-size: 0.65rem; color: var(--g600); text-align: center; line-height: 1.5; }
.cq-success {
  display: none; text-align: center;
  font-family: var(--fh); font-size: 0.78rem; color: var(--green); padding: 0.25rem 0;
}

/* 7. Price flip animation */
@keyframes price-in {
  from { opacity: 0; transform: translateY(20%); }
  to   { opacity: 1; transform: translateY(0); }
}
.led-price.flipping {
  animation: price-in 220ms var(--ease-out) both;
}
#pricing .eyebrow {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}
/* ============================================================
   PRICING — Phase 12 Design Depth
   ============================================================ */

/* Section dot grid background + cyan accent glow */
#pricing { position: relative; overflow: hidden; }
#pricing::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
}
#pricing::after {
  content: '';
  position: absolute; top: -30%; right: -10%;
  width: 55%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(0,240,255,0.05) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
#pricing .sec-hdr,
#pricing .calc-wrap { position: relative; z-index: 1; }

/* LED screen scan line animation */
.led-screen { position: relative; overflow: hidden; }
.led-screen::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,240,255,0.12) 50%, transparent 100%);
  animation: led-scan 6s linear infinite;
  pointer-events: none; z-index: 10;
}
@keyframes led-scan {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Route button active — subtle glow */
.rb.active {
  background: rgba(0,240,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(0,240,255,0.35), 0 0 18px rgba(0,240,255,0.07);
}

/* Subtle discount note below CTA */
.led-note-subtle {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.85rem; color: var(--g400);
  line-height: 1.6; text-align: center;
  position: relative; z-index: 1;
}
.led-note-subtle strong { color: var(--green); font-weight: 600; animation: glow-pulse-g 2.4s ease-in-out infinite; }
.led-note-subtle a { color: var(--cyan); transition: opacity var(--fast) var(--ease); }
.led-note-subtle a:hover { opacity: 0.7; }
.note-cta-pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border: 1px solid rgba(0,240,255,0.35);
  border-radius: 999px;
  background: rgba(0,240,255,0.07);
  color: var(--cyan) !important;
  font-family: var(--fh);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  opacity: 1 !important;
}
.note-cta-pill:hover {
  background: rgba(0,240,255,0.14) !important;
  box-shadow: 0 0 10px rgba(0,240,255,0.2);
  opacity: 1 !important;
}

/* Custom quote card — larger text */
.calc-custom .cq-title { font-size: 1rem; }
.calc-custom .cq-desc  { font-size: 0.875rem; line-height: 1.7; }
.calc-custom .cq-form .cq-inp { padding: 0.8rem 1rem; font-size: 0.875rem; }
.calc-custom .cq-toggle { font-size: 0.78rem; padding: 0.75rem 1rem; }

/* ============================================================
   PRICING — Custom Quote Form Visual Enhancement
   ============================================================ */

/* Card: elevated border + subtle top-accent */
.calc-custom {
  border-color: rgba(0,240,255,0.15) !important;
  background: rgba(0,240,255,0.02) !important;
  position: relative;
  overflow: hidden;
}
.calc-custom::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,240,255,0.4) 50%, transparent 100%);
}

/* Form area backdrop when open */
.cq-form.open {
  padding: 1rem;
  background: rgba(0,240,255,0.03);
  border: 1px solid rgba(0,240,255,0.08);
  border-radius: var(--r-m);
  margin-top: 0.25rem;
}

/* Inputs — brighter, more contrast */
.cq-inp {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--white) !important;
  font-size: 0.875rem !important;
  padding: 0.85rem 1rem !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
.cq-inp::placeholder {
  color: rgba(255,255,255,0.35) !important;
}
.cq-inp:focus {
  border-color: rgba(0,240,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(0,240,255,0.08), inset 0 0 12px rgba(0,240,255,0.03) !important;
  background: rgba(0,240,255,0.05) !important;
}

/* Staggered slide-in animation for inputs */
@keyframes inp-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cq-form.open .cq-inp:nth-child(1) { animation: inp-in 220ms 60ms  ease both; }
.cq-form.open .cq-inp:nth-child(2) { animation: inp-in 220ms 110ms ease both; }
.cq-form.open .cq-inp:nth-child(3) { animation: inp-in 220ms 160ms ease both; }
.cq-form.open .cq-inp:nth-child(4) { animation: inp-in 220ms 210ms ease both; }
.cq-form.open .cq-inp:nth-child(5) { animation: inp-in 220ms 260ms ease both; }
.cq-form.open .cq-submit           { animation: inp-in 220ms 310ms ease both; }

/* Submit button — more prominent */
.cq-submit {
  background: rgba(0,240,255,0.1) !important;
  border-color: rgba(0,240,255,0.4) !important;
  font-size: 0.8rem !important;
  padding: 0.85rem !important;
  letter-spacing: 0.1em !important;
  transition: all 200ms ease !important;
}
.cq-submit:hover {
  background: rgba(0,240,255,0.18) !important;
  box-shadow: 0 0 16px rgba(0,240,255,0.12) !important;
}
/* ============================================================
   PRICING — Custom Quote Form 2-col layout (Phase 12b)
   ============================================================ */
.cq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.cq-inputs {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.cq-trust {
  display: flex; flex-direction: column; gap: 0.875rem;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 1px solid rgba(0,240,255,0.1);
}
.cq-trust-item {
  display: flex; align-items: flex-start; gap: 0.625rem;
  opacity: 0; transform: translateX(8px);
  transition: opacity 280ms ease, transform 280ms ease;
}
.cq-form.open .cq-trust-item:nth-child(1) { animation: inp-in 240ms 180ms ease both; }
.cq-form.open .cq-trust-item:nth-child(2) { animation: inp-in 240ms 240ms ease both; }
.cq-form.open .cq-trust-item:nth-child(3) { animation: inp-in 240ms 300ms ease both; }
.cq-form.open .cq-trust-item:nth-child(4) { animation: inp-in 240ms 360ms ease both; }
.cq-trust-icon {
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0,240,255,0.2);
  border-radius: var(--r-m);
  background: rgba(0,240,255,0.05);
  color: var(--cyan);
}
.cq-trust-title {
  font-family: var(--fh); font-size: 0.9rem; font-weight: 600;
  color: var(--white); line-height: 1.3;
}
.cq-trust-sub {
  font-size: 0.78rem; color: var(--g400); line-height: 1.4; margin-top: 0.15rem;
}
@keyframes glow-pulse-g {
  0%, 100% { 
    text-shadow: 0 0 4px rgba(0,255,102,0);
    color: var(--green);
  }
  50% { 
    text-shadow: 0 0 8px rgba(0,255,102,1), 0 0 20px rgba(0,255,102,0.8), 0 0 40px rgba(0,255,102,0.4);
    color: #7dffb3;
  }
}
.cq-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }