/* =========================================================
   WIFIMEDIA — style.css
   Design tokens: navy "ink" + amber "signal" accent, đặt trên
   nền giấy mát. Type: Space Grotesk (display) / IBM Plex Sans
   (body) / IBM Plex Mono (số liệu, nhãn, eyebrow).
   ========================================================= */

:root{
  /* màu */
  --ink:        #101B2D;   /* navy đậm — header tối, footer, text chính */
  --ink-soft:   #1B2C44;   /* navy nhạt hơn cho card tối / hover */
  --amber:      #E2972E;   /* vàng đồng — accent, CTA, đường nhấn */
  --amber-soft: #F6C879;   /* vàng nhạt — hover, glow nhẹ */
  --paper:      #F5F6F8;   /* nền trang */
  --cloud:      #FFFFFF;   /* nền card */
  --slate:      #5B6675;   /* chữ phụ */
  --line:       #E2E6EC;   /* viền, divider */
  --text:       #16202F;   /* chữ chính */

  /* type */
  --f-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --f-body:    'IBM Plex Sans', 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', 'Consolas', monospace;

  --container: 1180px;
  --radius: 4px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--f-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight:600;
  letter-spacing:-0.01em;
  color: var(--ink);
  line-height:1.18;
}
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3{ font-size: 1.25rem; }
p{ color: var(--slate); }
strong{ color: var(--ink); }

.eyebrow{
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background: var(--amber);
  display:inline-block;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--f-mono);
  font-size:0.85rem;
  letter-spacing:0.04em;
  padding: 13px 26px;
  border-radius: var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition: all .18s ease;
}
.btn-primary{ background: var(--amber); color: var(--ink); }
.btn-primary:hover{ background: var(--amber-soft); }
.btn-ghost{ border-color: rgba(255,255,255,.35); color:#fff; }
.btn-ghost:hover{ border-color: var(--amber); color: var(--amber); }
.btn-line{ border-color: var(--ink); color: var(--ink); }
.btn-line:hover{ border-color: var(--amber); color: var(--amber); background:transparent; }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  background: var(--ink);
  color: rgba(255,255,255,.7);
  font-family: var(--f-mono);
  font-size: 0.78rem;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:36px;
  flex-wrap:wrap;
  gap:6px;
}
.topbar a{ color: var(--amber); }
.topbar .addr{ display:none; }
@media (min-width:760px){ .topbar .addr{ display:inline; } }

/* =========================================================
   HEADER / NAV
   ========================================================= */
header.site-header{
  background:#fff;
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:92px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-display);
  font-weight:800; font-size:1.5rem;
  color: var(--ink);
}
.logo img{ height:58px; width:auto; filter: contrast(1.08) saturate(1.1); }
.logo .dot{ color: var(--amber); }

nav.main-nav{ display:none; }
nav.main-nav > ul{ display:flex; gap:2px; align-items:center; }
nav.main-nav > ul > li{ position:relative; }
nav.main-nav > ul > li > a{
  display:flex; align-items:center; gap:6px;
  padding: 28px 18px;
  font-size:0.95rem; font-weight:500;
  color: var(--ink);
  border-bottom:2px solid transparent;
}
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li.active > a{
  color: var(--amber);
  border-bottom-color: var(--amber);
}
nav.main-nav .caret{ font-size:0.6rem; opacity:.6; }

.dropdown{
  position:absolute; top:100%; left:0;
  min-width:260px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow: 0 18px 40px rgba(16,27,45,.1);
  padding:8px;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: all .15s ease;
}
nav.main-nav > ul > li:hover .dropdown{
  opacity:1; visibility:visible; transform: translateY(0);
}
.dropdown a{
  display:block;
  padding:12px 14px;
  font-size:0.9rem;
  color: var(--text);
  border-radius:3px;
}
.dropdown a:hover{ background: var(--paper); color: var(--amber); }

.nav-cta{ display:none; align-items:center; gap:14px; }
.nav-phone{
  font-family: var(--f-mono); font-size:0.9rem; color: var(--ink);
}
.nav-phone b{ color: var(--amber); }

.burger{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:none; cursor:pointer;
}
.burger span{ display:block; width:18px; height:1px; background:var(--ink); position:relative; }
.burger span::before, .burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1px; background:var(--ink);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

@media (min-width:980px){
  nav.main-nav{ display:block; }
  .nav-cta{ display:flex; }
  .burger{ display:none; }
}

/* mobile panel */
.mobile-panel{
  display:none;
  background:#fff;
  border-top:1px solid var(--line);
}
.mobile-panel.open{ display:block; }
.mobile-panel ul{ padding:10px 24px 18px; }
.mobile-panel > ul > li > a{
  display:flex; justify-content:space-between;
  padding:14px 0; font-size:1rem; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-panel .sub{ padding-left:14px; display:none; }
.mobile-panel .sub.open{ display:block; }
.mobile-panel .sub a{ padding:10px 0; color:var(--slate); border-bottom:none; font-size:0.92rem; }
.mobile-panel .phone-cta{
  margin-top:16px; display:block; text-align:center;
  background:var(--ink); color:#fff; padding:14px; font-family:var(--f-mono);
}
@media (min-width:980px){ .mobile-panel{ display:none !important; } }

/* =========================================================
   MESH MOTIF (signature element) — đường lưới mạng trừu tượng
   ========================================================= */
.mesh-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.mesh-bg svg{ position:absolute; }

/* =========================================================
   HERO (mỗi trang)
   ========================================================= */
.hero{
  position:relative;
  background: var(--ink);
  color:#fff;
  overflow:hidden;
  padding: 64px 0 76px;
}
.hero .container{ position:relative; z-index:2; }
.hero-tag{ color:var(--amber); }
.hero h1{ color:#fff; max-width:760px; }
.hero p.lead{
  color: rgba(255,255,255,.7);
  max-width:600px;
  font-size:1.08rem;
  margin-top:18px;
}
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-crumb{
  font-family:var(--f-mono); font-size:0.8rem; color:rgba(255,255,255,.5);
  margin-bottom:22px; display:flex; gap:8px;
}
.hero-crumb a{ color:rgba(255,255,255,.8); }
.hero-crumb a:hover{ color:var(--amber); }
.hero.compact{ padding:48px 0 56px; }

/* =========================================================
   STATS BAND
   ========================================================= */
.stats{
  background: linear-gradient(155deg, var(--ink) 0%, var(--ink-soft) 100%);
  color:#fff;
  position:relative;
}
.stats .container{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:16px;
}
@media (min-width:760px){ .stats .container{ grid-template-columns: repeat(4,1fr); gap:20px; } }
.stat{
  padding: 34px 26px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-top:3px solid var(--amber);
  border-radius:12px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.stat:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.08);
  border-top-color: var(--amber-soft);
}
.stat .num{
  font-family: var(--f-mono);
  font-weight:600;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  color: var(--amber);
  display:block;
  letter-spacing:-0.01em;
}
.stat .label{
  font-size:0.8rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color: rgba(255,255,255,.7);
  margin-top:10px;
}

/* =========================================================
   SECTIONS
   ========================================================= */
section{ padding: 72px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-inline:auto; text-align:center; }
section.alt{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* grid helpers */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }
@media (min-width:680px){
  .grid-2{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width:980px){
  .grid-3{ grid-template-columns: repeat(3,1fr); }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
}

/* =========================================================
   CARDS
   ========================================================= */
.card{
  background: var(--cloud);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover{ border-color: var(--amber); transform: translateY(-3px); }
.card .thumb{ aspect-ratio: 4/3; overflow:hidden; background:#eceff3; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding:22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-tag{
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--amber);
}
.card h3{ font-size:1.1rem; }
.card p{ font-size:0.92rem; }
.card-link{
  margin-top:auto; padding-top:10px;
  font-family:var(--f-mono); font-size:0.82rem; color:var(--ink);
  display:flex; align-items:center; gap:6px;
}
.card:hover .card-link{ color: var(--amber); }

/* feature block (3 banner gốc gộp lại) */
.feature{
  background:#fff; border:1px solid var(--line); padding:30px;
}
.feature .eyebrow{ margin-bottom:18px; }
.feature h3{ margin-bottom:10px; }

/* service detail list */
.detail-list{ margin:18px 0 28px; }
.detail-list li{
  position:relative;
  padding: 12px 0 12px 28px;
  border-bottom:1px solid var(--line);
  color: var(--text);
}
.detail-list li::before{
  content:"→";
  position:absolute; left:0; top:12px;
  color: var(--amber); font-family:var(--f-mono);
}
.step{
  display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line);
}
.step .n{
  font-family:var(--f-mono); color:var(--amber); font-size:1.4rem; min-width:42px;
}
.step h4{ font-family:var(--f-display); color:var(--ink); margin-bottom:6px; }
.step ul{ margin-top:8px; }
.step ul li{ font-size:0.92rem; color:var(--slate); padding:4px 0; }

/* tag list cho danh sách khách hàng / dự án dài (bệnh viện, trường học...) */
.taglist{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.taglist span{
  font-size:0.85rem; padding:8px 14px;
  background:#fff; border:1px solid var(--line); border-radius: 999px;
  color: var(--text);
}
.client-group{ margin-bottom:34px; }
.client-group h4{
  font-family:var(--f-mono); font-size:0.85rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}

/* partner logos */
.partners{ background:#fff; }
.partner-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (min-width:760px){ .partner-row{ grid-template-columns:repeat(4,1fr); } }
.partner-row > div{
  background:#fff; aspect-ratio:3/2;
  display:flex; align-items:center; justify-content:center; padding:22px;
}
.partner-row img{ max-height:42px; width:auto; filter:grayscale(1); opacity:.7; transition:.18s; }
.partner-row > div:hover img{ filter:none; opacity:1; }

/* khách hàng (case study) chi tiết */
.case-block{
  display:grid; gap:28px; padding:40px 0; border-bottom:1px solid var(--line);
}
@media (min-width:760px){ .case-block{ grid-template-columns: 320px 1fr; } }
.case-block .thumb{ aspect-ratio:4/3; overflow:hidden; background:#eceff3; border:1px solid var(--line); }
.case-block .thumb img{ width:100%; height:100%; object-fit:cover; }
.case-meta{ font-family:var(--f-mono); font-size:0.78rem; color:var(--slate); margin:10px 0 14px; }
.case-meta span{ margin-right:14px; }

/* CTA band */
.cta-band{
  background: var(--ink);
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.7); max-width:540px; margin:14px auto 28px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* contact */
.contact-grid{ display:grid; gap:40px; }
@media (min-width:860px){ .contact-grid{ grid-template-columns: 1fr 1.1fr; } }
.contact-info-card{
  background:var(--ink); color:#fff; padding:36px; border-radius:var(--radius);
}
.contact-info-card h3{ color:#fff; }
.contact-info-card .item{ margin-top:22px; }
.contact-info-card .item .lbl{ font-family:var(--f-mono); font-size:0.75rem; letter-spacing:.08em; color:var(--amber); text-transform:uppercase; }
.contact-info-card .item .val{ margin-top:6px; font-size:1.02rem; }
.contact-info-card .socials{ display:flex; gap:12px; margin-top:28px; }
.contact-info-card .socials a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  font-family:var(--f-mono); font-size:0.8rem;
}
.contact-info-card .socials a:hover{ border-color:var(--amber); color:var(--amber); }

.form-card{ background:#fff; border:1px solid var(--line); padding:36px; }
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:0.85rem; margin-bottom:8px; color:var(--ink); font-weight:500; }
.form-row input, .form-row textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line);
  font-family:var(--f-body); font-size:0.95rem; background:var(--paper);
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--amber); background:#fff; }
.form-note{ font-size:0.82rem; color:var(--slate); margin-top:10px; }
.map-embed{ margin-top:30px; border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:320px; border:0; display:block; }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{ background: var(--ink); color: rgba(255,255,255,.7); }
.footer-top{ border-top:3px solid var(--amber); }
.footer-grid{
  display:grid; gap:36px; padding: 56px 0 40px;
}
@media (min-width:760px){ .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-grid h4{ color:#fff; font-size:1rem; margin-bottom:18px; font-family:var(--f-display); }
.footer-brand .logo{ color:#fff; margin-bottom:14px; }
.footer-grid p{ font-size:0.9rem; color:rgba(255,255,255,.6); }
.footer-grid ul li{ margin-bottom:10px; font-size:0.9rem; }
.footer-grid ul a:hover{ color: var(--amber); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding: 20px 0; font-size:0.82rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color: rgba(255,255,255,.5);
  font-family:var(--f-mono);
}

/* =========================================================
   utility
   ========================================================= */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.muted{ color:var(--slate); }
.small{ font-size:0.88rem; }
.warn-box{
  background:#fff8ec; border:1px solid var(--amber); padding:16px 18px;
  font-size:0.88rem; color:var(--ink); margin:18px 0;
}