/* ============================================================
   SmartTest – Solutions cluster (Giải pháp) shared stylesheet
   Scoped under .sol so it never clashes with global site CSS.
   Linked from /pages/{lang}/giai-phap.html and every spoke page.
   ============================================================ */
.sol{
  --p:#1a4fa0; --pl:#2563eb; --pd:#0d2d6a;
  --a:#f59e0b; --a2:#10b981; --re:#ef4444;
  --dk:#0f172a; --tx:#1e293b; --mu:#64748b;
  --li:#f8fafc; --bd:#e2e8f0; --ca:#ffffff;
  --s1:#eff6ff; --s2:#ecfdf5; --s3:#fffbeb;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--tx); line-height:1.75; font-size:15px;
}
.sol *{box-sizing:border-box}
.sol h1,.sol h2,.sol h3,.sol h4,.sol p,.sol ul,.sol ol{margin:0}

/* ---------- HERO ---------- */
.sol-hero{position:relative;overflow:hidden;color:#fff;padding:74px 0 64px;
  background:linear-gradient(135deg,#0d1f4a 0%,#1a4fa0 55%,#1e64d8 100%)}
.sol-hero.green{background:linear-gradient(135deg,#0d2d1a 0%,#065f46 55%,#059669 100%)}
.sol-hero.amber{background:linear-gradient(135deg,#3a2606 0%,#b45309 55%,#f59e0b 100%)}
.sol-hero.purple{background:linear-gradient(135deg,#2a1065 0%,#6d28d9 55%,#8b5cf6 100%)}
.sol-hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:54px;
  background:var(--li);clip-path:ellipse(60% 100% at 50% 100%)}
.sol-hero .in{position:relative;max-width:920px;margin:0 auto;padding:0 28px}
.sol-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:6px 16px;
  font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:rgba(255,255,255,.92);margin-bottom:18px}
.sol-hero h1{font-size:clamp(28px,4.4vw,46px);font-weight:800;line-height:1.18;margin-bottom:16px}
.sol-hero h1 em{font-style:normal;color:#fcd34d}
.sol-lead{font-size:16px;color:rgba(255,255,255,.85);max-width:680px;line-height:1.7}
.sol-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sol-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;
  font-weight:700;font-size:14.5px;text-decoration:none;transition:.15s}
.sol-btn-primary{background:#fff;color:var(--pd)}
.sol-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.sol-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35)}
.sol-btn-ghost:hover{background:rgba(255,255,255,.18)}

/* ---------- BODY LAYOUT ---------- */
.sol-body{background:var(--li);padding:48px 0 16px}
.sol-wrap{max-width:920px;margin:0 auto;padding:0 28px}
.sol-sec{margin-top:46px}
.sol-sec:first-child{margin-top:0}
.sol-sec h2{font-size:23px;font-weight:800;color:var(--dk);line-height:1.25;margin-bottom:14px}
.sol-sec h3{font-size:17px;font-weight:700;color:var(--dk);margin:24px 0 8px}
.sol-sec p{font-size:15px;color:var(--tx);margin-bottom:14px;line-height:1.8}
.sol-sec p strong,.sol-sec li strong{color:var(--dk)}
.sol-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--pl);margin-bottom:8px}

/* ---------- PAIN / GAIN CARDS ---------- */
.sol-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.sol-grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:18px 0}
@media(max-width:640px){.sol-grid2{grid-template-columns:1fr}}
.sol-card{background:var(--ca);border:1px solid var(--bd);border-radius:12px;padding:20px 22px;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.sol-card .ic{font-size:22px;margin-bottom:10px;display:block}
.sol-card h4{font-size:15.5px;font-weight:700;color:var(--dk);margin-bottom:6px}
.sol-card p{font-size:13.5px;color:var(--mu);margin:0;line-height:1.65}
.sol-card.pain{border-left:4px solid var(--re);background:#fff6f6}
.sol-card.gain{border-left:4px solid var(--a2);background:#f3fdf8}

/* ---------- FEATURE LIST ---------- */
.sol-feats{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:14px}
.sol-feats li{display:flex;gap:14px}
.sol-feats li::before{content:'✓';flex-shrink:0;width:26px;height:26px;border-radius:8px;
  background:#dbeafe;color:var(--pl);font-weight:800;display:grid;place-items:center;font-size:13px}
.sol-feats li b{display:block;color:var(--dk);font-size:15px;margin-bottom:2px}
.sol-feats li span{color:var(--mu);font-size:13.5px}

/* ---------- STEP STRIP ---------- */
.sol-steps{display:flex;flex-wrap:wrap;background:var(--ca);border:1px solid var(--bd);
  border-radius:14px;overflow:hidden;margin:20px 0}
.sol-steps .st{flex:1;min-width:130px;padding:18px 14px;text-align:center;
  border-right:1px solid var(--bd);position:relative}
.sol-steps .st:last-child{border-right:none}
.sol-steps .st .n{background:var(--p);color:#fff;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:800;margin:0 auto 8px}
.sol-steps .st h5{font-size:13px;font-weight:700;color:var(--dk);margin:0 0 3px}
.sol-steps .st p{font-size:11.5px;color:var(--mu);margin:0;line-height:1.45}
@media(max-width:580px){.sol-steps{flex-direction:column}.sol-steps .st{border-right:none;border-bottom:1px solid var(--bd)}.sol-steps .st:last-child{border-bottom:none}}

/* ---------- CALLOUT BOXES ---------- */
.sol-box{border-radius:10px;padding:16px 20px;margin:18px 0;font-size:14.5px;line-height:1.7}
.sol-box b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.sol-box.blue{background:var(--s1);border:1px solid #bfdbfe;border-left:4px solid var(--pl)}
.sol-box.green{background:var(--s2);border:1px solid #a7f3d0;border-left:4px solid var(--a2)}
.sol-box.amber{background:var(--s3);border:1px solid #fde68a;border-left:4px solid var(--a)}

/* ---------- TABLE ---------- */
.sol-tw{overflow-x:auto;border-radius:10px;border:1px solid var(--bd);margin:18px 0}
.sol table{width:100%;border-collapse:collapse;font-size:13.5px}
.sol thead th{background:var(--p);color:#fff;padding:11px 14px;font-weight:600;font-size:12.5px;text-align:left}
.sol tbody td{padding:10px 14px;border-bottom:1px solid var(--bd)}
.sol tbody tr:last-child td{border-bottom:none}
.sol tbody tr:nth-child(even){background:#f8fafc}

/* ---------- FAQ ---------- */
.sol-faq{margin:14px 0}
.sol-faq details{border:1px solid var(--bd);border-radius:10px;padding:0;margin-bottom:10px;background:var(--ca);overflow:hidden}
.sol-faq summary{padding:15px 18px;font-weight:700;color:var(--dk);cursor:pointer;font-size:14.5px;list-style:none}
.sol-faq summary::-webkit-details-marker{display:none}
.sol-faq summary::after{content:'+';float:right;color:var(--pl);font-weight:800}
.sol-faq details[open] summary::after{content:'–'}
.sol-faq details[open] summary{border-bottom:1px solid var(--bd)}
.sol-faq .ans{padding:14px 18px;font-size:14px;color:var(--mu);line-height:1.7}

/* ---------- RELATED CLUSTER LINKS ---------- */
.sol-related{background:var(--ca);border-top:1px solid var(--bd);padding:40px 0}
.sol-related h2{font-size:19px;font-weight:800;color:var(--dk);margin-bottom:6px}
.sol-related .sub{font-size:13.5px;color:var(--mu);margin-bottom:18px}
.sol-relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.sol-rel{display:block;text-decoration:none;border:1px solid var(--bd);border-radius:10px;
  padding:14px 16px;background:var(--li);transition:.15s}
.sol-rel:hover{border-color:var(--pl);box-shadow:0 4px 12px rgba(37,99,235,.1);transform:translateY(-1px)}
.sol-rel .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pl);margin-right:8px;vertical-align:middle}
.sol-rel b{color:var(--dk);font-size:14px}
.sol-rel p{font-size:12.5px;color:var(--mu);margin:4px 0 0;line-height:1.5}

/* ---------- FINAL CTA BAND ---------- */
.sol-band{background:linear-gradient(135deg,var(--pd),var(--pl));color:#fff;text-align:center;padding:54px 24px}
.sol-band h2{font-size:26px;font-weight:800;margin-bottom:10px;color:#fff}
.sol-band p{font-size:15px;color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 22px}

/* ---------- BREADCRUMB ---------- */
.sol-bc{max-width:920px;margin:0 auto;padding:14px 28px 0;font-size:12.5px;color:var(--mu)}
.sol-bc a{color:var(--mu);text-decoration:none}
.sol-bc a:hover{color:var(--pl)}
.sol-bc span{color:var(--bd);margin:0 6px}

/* ---------- HUB AUDIENCE CARDS ---------- */
.sol-hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:22px 0}
.sol-hubcard{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--bd);
  border-radius:14px;padding:20px;background:var(--ca);transition:.16s;position:relative;overflow:hidden}
.sol-hubcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pl)}
.sol-hubcard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.1);border-color:var(--pl)}
.sol-hubcard .ic{font-size:26px;margin-bottom:10px}
.sol-hubcard b{font-size:16px;color:var(--dk);margin-bottom:5px}
.sol-hubcard p{font-size:13px;color:var(--mu);line-height:1.6;margin:0 0 10px}
.sol-hubcard .go{margin-top:auto;font-size:13px;font-weight:700;color:var(--pl)}