/* Khách hàng (Customers / case studies) page — page-specific components (sang.css holds shared generics) */

/* Breadcrumb */
.crumb{display:flex;align-items:center;gap:9px;padding-block:20px 4px;font-size:.86rem;font-weight:600;color:var(--slate)}
.crumb a{color:var(--slate);transition:color .15s}
.crumb a:hover{color:var(--flame-700)}
.crumb .sep{color:var(--slate2)}
.crumb b{color:var(--navy);font-weight:800}

/* Hero */
.chero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,84px) clamp(52px,7vw,96px);background:radial-gradient(90% 120% at 100% 0%,#FFEDDD 0,transparent 46%),radial-gradient(80% 100% at 0% 30%,#EAF0FF 0,transparent 42%),var(--bg)}
.chero__mesh{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none}
.chero__mesh.m1{width:520px;height:520px;right:-140px;top:-150px;background:radial-gradient(circle,rgba(243,112,6,.22),transparent 62%)}
.chero__mesh.m2{width:400px;height:400px;left:-150px;bottom:-140px;background:radial-gradient(circle,rgba(19,46,120,.16),transparent 64%)}
.chero__in{position:relative;width:min(100% - 44px,830px);margin-inline:auto;text-align:center}
.chero__in h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:900;line-height:1.03;letter-spacing:-.04em;color:var(--navy);margin-top:20px}
.chero__in p{margin-top:20px;font-size:clamp(1.06rem,1.5vw,1.28rem);color:var(--slate);max-width:640px;margin-inline:auto;line-height:1.62}
.chero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.chero>.wrap{position:relative;margin-top:clamp(40px,5vw,60px)}

/* Distribution map */
.maprow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px);align-items:center;margin-top:50px}
.mpanel-l{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-2xl);padding:clamp(24px,3vw,38px);box-shadow:var(--sh)}
.mpanel-l h3{display:flex;align-items:center;gap:10px;font-size:1.16rem;font-weight:800;color:var(--navy)}
.mpanel-l h3 svg{width:22px;height:22px;color:var(--flame);flex:0 0 auto}
.bigstats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 26px}
.bigstat{background:var(--flame-tint);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;text-align:center}
.bigstat b{display:block;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;color:var(--navy);letter-spacing:-.03em;line-height:1}
.bigstat b i{color:var(--flame);font-style:normal}
.bigstat span{font-size:.84rem;color:var(--slate);font-weight:500;margin-top:5px;display:block}
.regions{display:flex;flex-direction:column;gap:16px}
.region__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.region__top b{font-size:.92rem;font-weight:700;color:var(--navy)}
.region .pct{font-size:.9rem;font-weight:800;color:var(--flame-700)}
.region__bar{height:9px;border-radius:var(--pill);background:var(--line2);overflow:hidden}
.region__fill{height:100%;width:0;border-radius:var(--pill);background:var(--grad-flame);transition:width 1s cubic-bezier(.2,.6,.2,1)}

/* Map visual */
.mapwrap{position:relative;background:linear-gradient(160deg,var(--surface),var(--cream));border:1px solid var(--line);border-radius:var(--r-2xl);padding:22px;box-shadow:var(--sh);max-width:430px;margin-inline:auto}
.mapwrap svg{width:100%;height:auto;max-height:480px;margin-inline:auto}
#vndots circle{transform-box:fill-box;transform-origin:center}
.maplabel{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 13px;box-shadow:var(--sh-s);text-align:center;z-index:2}
.maplabel b{display:block;font-size:1.06rem;font-weight:900;color:var(--flame);line-height:1}
.maplabel span{font-size:.72rem;color:var(--slate);font-weight:600}
.maplabel .u{display:block;width:22px;height:3px;border-radius:2px;background:var(--grad-flame);margin:6px auto 0}
.isle{position:absolute;font-size:.62rem;font-style:italic;font-weight:600;color:var(--slate2);white-space:nowrap;transform:translate(-50%,-50%);z-index:1}
@keyframes dotin{from{opacity:0;transform:scale(.2)}to{opacity:.9;transform:none}}

/* Brand logos */
.logos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.logo-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);height:112px;display:grid;place-items:center;padding:20px;box-shadow:var(--sh-s);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.logo-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:transparent}
.logo-card img{max-height:60px;max-width:86%;width:auto;height:auto;object-fit:contain;filter:none;opacity:1}
.logo-card--fill{overflow:hidden}
.logo-card--fill img{max-height:58px;max-width:72%;height:auto;width:auto;object-fit:contain}
.logo-card .fallback{font-weight:800;font-size:.9rem;line-height:1.3;color:var(--navy);text-align:center}

/* Responsive */
@media (max-width:900px){
  .maprow{grid-template-columns:1fr}
  .logos-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .logos-grid{grid-template-columns:repeat(2,1fr)}
  .bigstats{grid-template-columns:1fr}
  .chero__cta{flex-direction:column;align-items:stretch}
  .chero__cta .btn{width:100%}
  .logo-card{height:96px;padding:16px}
}

.sg { overflow-x: clip; }

/* ============ Coverage map — premium redesign (2026-08) ============ */
.mpanel-l{background:linear-gradient(155deg,#fff,#FFF8F0);border-color:#F1E6D6;box-shadow:0 34px 66px -36px rgba(120,80,30,.34),0 2px 10px -5px rgba(120,80,30,.1)}
.mpanel-l h3{font-size:1.22rem;letter-spacing:-.01em;padding-bottom:18px;border-bottom:1px solid #F0E7DA;margin-bottom:22px}
.mpanel-l h3 svg{width:20px;height:20px}
/* stat cards */
.bigstats{gap:14px;margin:0 0 26px}
.bigstat{position:relative;background:#fff;border:1px solid #F0E7DA;border-radius:16px;padding:20px 18px;box-shadow:0 12px 26px -18px rgba(120,80,30,.4);overflow:hidden;transition:transform .2s,box-shadow .2s}
.bigstat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-flame)}
.bigstat:hover{transform:translateY(-3px);box-shadow:0 20px 38px -18px rgba(120,80,30,.46)}
.bigstat b{display:flex;align-items:baseline;justify-content:center;gap:2px;font-size:clamp(2.1rem,3.6vw,2.9rem);color:var(--navy);letter-spacing:-.03em;line-height:1}
.bigstat b span{font-size:1em;color:var(--navy)}
.bigstat b i{font-size:.6em;color:var(--flame);font-style:normal;font-weight:900}
.bigstat span{font-size:.82rem;margin-top:7px;font-weight:600}
/* region bars — colour-matched to the dot map (north/central navy, south flame) */
.regions{gap:19px}
.region__top{margin-bottom:9px}
.region__top b{font-size:.95rem;display:inline-flex;align-items:center;gap:9px}
.region__top b::before{content:"";width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(0,0,0,.03)}
.region .pct{font-size:1.02rem;font-weight:900}
.region__bar{height:12px;background:#F1E8DB;box-shadow:inset 0 1px 3px rgba(120,80,30,.14);border-radius:99px}
.region__fill{border-radius:99px;box-shadow:0 3px 9px -2px rgba(0,0,0,.28)}
.region:nth-child(1) .region__top b::before{background:#2F5FC4}
.region:nth-child(1) .region__fill{background:linear-gradient(90deg,#5b8be8,#2f5fc4)}
.region:nth-child(1) .pct{color:#2f5fc4}
.region:nth-child(2) .region__top b::before{background:#3E6FD6}
.region:nth-child(2) .region__fill{background:linear-gradient(90deg,#6f9af0,#3E6FD6)}
.region:nth-child(2) .pct{color:#3E6FD6}
.region:nth-child(3) .region__top b::before{background:var(--flame)}
.region:nth-child(3) .region__fill{background:var(--grad-flame)}
.region:nth-child(3) .pct{color:var(--flame-700)}
/* map card */
.mapwrap{background:radial-gradient(120% 90% at 82% 0%,#FFF1E1 0%,transparent 48%),radial-gradient(100% 90% at 0% 100%,#EAF0FF 0%,transparent 44%),linear-gradient(160deg,#fff,#FFFBF4);border-color:#F1E6D6;box-shadow:0 34px 66px -36px rgba(120,80,30,.34)}
/* floating map labels — premium pills */
.maplabel{background:#fff;border:1px solid #EFE7DA;border-radius:13px;padding:9px 15px;box-shadow:0 16px 34px -14px rgba(20,30,60,.42),0 2px 7px -3px rgba(20,30,60,.2)}
.maplabel b{font-size:1.14rem}
.maplabel span{font-size:.7rem;letter-spacing:.03em;font-weight:700;color:var(--slate)}
.maplabel .u{width:26px;height:3px;margin-top:7px}
.l-bac b{color:#2f5fc4}.l-bac .u{background:linear-gradient(90deg,#5b8be8,#2f5fc4)}
.l-trung b{color:#3E6FD6}.l-trung .u{background:linear-gradient(90deg,#6f9af0,#3E6FD6)}
.l-nam b{color:var(--flame)}.l-nam .u{background:var(--grad-flame)}