/* =========================================================
   S02C – GIẢI PHÁP TỪ VINACAD   #giai-phap
   Nền xanh đậm (đối lập với section Vấn đề màu đỏ phía trên).
   3 thẻ: con số hook nằm trên cùng, cỡ chữ lớn nhất trong thẻ.
   Hàng CTA 2 tầng: Báo giá (vàng) + Dùng thử (viền trắng).
   ========================================================= */
#giai-phap{position:relative;overflow:hidden;text-align:center;color:#fff;
  background:radial-gradient(900px 420px at 50% -10%,rgba(18,198,79,.35),transparent 70%),linear-gradient(180deg,var(--g-900) 0%,#04503B 100%)}
/* Lưới bản vẽ CAD mờ phía sau */
#giai-phap::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}
#giai-phap > .wrap{position:relative}

#giai-phap .eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g-300);background:rgba(167,232,193,.12);border:1px solid rgba(167,232,193,.35);border-radius:999px;padding:6px 16px;margin-bottom:18px}
/* Tiêu đề: CHUYỂN ĐỔI + "3 KHÔNG" vàng, to hơn */
#giai-phap .sec-title{color:#fff;font-size:clamp(32px,4.6vw,64px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
#giai-phap .sec-title span{display:inline-block;margin-left:.15em;font-size:1.35em;color:var(--gold);white-space:nowrap;letter-spacing:-.02em;text-shadow:0 6px 30px rgba(250,173,20,.35)}

/* Thẻ giải pháp */
#giai-phap .sols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;text-align:left;align-items:stretch}
#giai-phap .sol{display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.22);transition:transform .2s,box-shadow .2s}
#giai-phap .sol:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.3)}

/* Khối HOOK: con số lớn nằm đầu thẻ */
#giai-phap .sol-hook{position:relative;padding:22px 26px 20px;background:linear-gradient(135deg,var(--mint) 0%,var(--g-50) 100%);border-bottom:1px solid var(--g-300)}
/* Nhãn cam kết: huy hiệu "KHÔNG" vàng + tên cam kết */
#giai-phap .sol-tag{display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.25vw,17px);font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--g-900);line-height:1.2}
#giai-phap .sol-tag i{flex:none;font-style:normal;padding:5px 10px;border-radius:8px;background:var(--gold);color:var(--g-900);font-size:.82em;font-weight:800;letter-spacing:.06em;box-shadow:0 4px 12px rgba(250,173,20,.35)}
#giai-phap .hook-num{margin-top:12px;font-size:clamp(44px,4.6vw,60px);font-weight:800;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(90deg,var(--g-800),var(--g-500));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
#giai-phap .sol.hot .hook-num{font-size:clamp(24px,2.7vw,34px);line-height:1.1;letter-spacing:-.04em;white-space:normal}
#giai-phap .hook-num.support-title{font-size:clamp(24px,2.7vw,34px);line-height:1.1;letter-spacing:-.04em;white-space:normal}
#giai-phap .hook-num small{font-size:.5em;font-weight:800;letter-spacing:0;margin-left:2px}
#giai-phap .hook-unit{margin-top:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Thân thẻ */
#giai-phap .sol-body{display:flex;flex-direction:column;flex:1;padding:20px 26px 24px}
#giai-phap .sol-list{list-style:none;display:grid;gap:10px;flex:1;align-content:start}
#giai-phap .sol-list li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.55;color:var(--muted)}
#giai-phap .sol-list li b{color:var(--ink);font-weight:700}
#giai-phap .sol-list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--g-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23098E50' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;border:1px solid var(--g-300)}

/* Dải 2 chỉ số phụ ở đáy thẻ */
#giai-phap .sol-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:20px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
#giai-phap .sol-stats div{padding:10px 14px;line-height:1.25}
#giai-phap .sol-stats div + div{border-left:1px solid var(--line)}
#giai-phap .sol-stats b{display:block;font-size:17px;font-weight:800;color:var(--g-700);white-space:nowrap}
#giai-phap .sol-stats span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#giai-phap .sol:first-child .sol-stats b{font-size:clamp(12px,1.3vw,17px);white-space:normal}
#giai-phap .sol:first-child .sol-stats span{white-space:normal;overflow:visible}
#giai-phap .sol:first-child .sol-stats span b{display:inline;font-size:inherit;color:inherit}

/* Ghi chú nhỏ cạnh đơn vị (quy đổi giá theo tháng) */
#giai-phap .hook-note{margin-left:6px;padding:2px 8px;border-radius:6px;background:#fff;border:1px solid var(--g-300);color:var(--g-800);letter-spacing:.02em;text-transform:none;font-weight:700;white-space:nowrap}

/* Ô chỉ số ưu đãi (-30%+) tô vàng cho nổi */
#giai-phap .sol-stats b.gold{color:#C98A0B}

/* Thẻ giữa nổi bật hơn */
#giai-phap .sol.hot{outline:3px solid var(--gold);outline-offset:-3px}

/* CTA 2 tầng */
#giai-phap .sol-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:40px}
#giai-phap .cta-item{display:flex;flex-direction:column;align-items:center}
#giai-phap .btn-gold{background:var(--gold);color:var(--g-900);font-weight:700;box-shadow:0 10px 24px rgba(250,173,20,.3)}
#giai-phap .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
#giai-phap .btn-ghost:hover{background:rgba(255,255,255,.1)}

@media (min-width:1001px){
  /* Máy tính: gói gọn trong 1 màn hình (trừ thanh menu 72px), co theo chiều cao màn hình */
  #giai-phap{min-height:calc(100vh - 72px);display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,3vh,44px) 0}
  #giai-phap > .wrap{width:100%}
  #giai-phap .eyebrow{margin-bottom:clamp(6px,1.4vh,18px);padding:4px 14px;font-size:clamp(11px,1.5vh,12.5px)}
  #giai-phap .sec-title{font-size:clamp(30px,min(4.6vw,7vh),64px)}
  #giai-phap .sols{margin-top:clamp(14px,3.4vh,44px)}
  #giai-phap .sol-hook{padding:clamp(10px,2vh,22px) 24px clamp(10px,1.8vh,20px)}
  #giai-phap .sols .sol-hook{min-height:clamp(160px,19.35vh,184px)}
  #giai-phap .hook-num{margin-top:clamp(4px,1vh,12px);font-size:clamp(34px,min(4.4vw,6.6vh),60px)}
  #giai-phap .hook-unit{margin-top:clamp(2px,.7vh,8px);font-size:clamp(11px,1.5vh,13px)}
  #giai-phap .sol-body{padding:clamp(10px,2vh,20px) 24px clamp(12px,2.2vh,24px)}
  #giai-phap .sol-list{gap:clamp(5px,1vh,10px)}
  #giai-phap .sol-list li{font-size:clamp(13px,1.75vh,14.5px);line-height:1.45}
  #giai-phap .sol-stats{margin-top:clamp(10px,1.8vh,20px)}
  #giai-phap .sol-stats div{padding:clamp(5px,.9vh,10px) 14px}
  #giai-phap .sol-stats b{font-size:clamp(15px,2vh,17px)}
  #giai-phap .sol-cta{margin-top:clamp(12px,2.8vh,36px)}
  #giai-phap .sol-cta .btn{padding:clamp(9px,1.5vh,14px) 26px}
}
@media (max-width:1000px){
  #giai-phap .sols .sol-hook{min-height:0}
  #giai-phap .sols{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
}
@media (max-width:600px){
  #giai-phap .sol-hook{padding:18px 20px 16px}
  #giai-phap .sol-body{padding:18px 20px 20px}
  #giai-phap .sol-cta,#giai-phap .cta-item{width:100%}
  #giai-phap .cta-item .btn{width:100%;justify-content:center;text-align:center}
}