/* VINAPHONE-COMMERCE-01 · M4/M5 — lane solution section + capture-first modal.
   Additive over vinaphone.css. Same visual DNA (Be Vietnam Pro, blue #0066B3). */

/* ---------- GIẢI PHÁP section ---------- */
.vp-sol-wrap { }
.vp-solgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.vp-solcard { display: flex; flex-direction: column; background: #fff; border: 1px solid #e4e9f0; border-radius: 16px; padding: 22px 22px 20px; box-shadow: 0 2px 10px rgba(16, 42, 82, .05); }
.vp-solkick { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0066B3; }
.vp-solcard h3 { margin: 8px 0 6px; font-size: 20px; line-height: 1.25; color: #0f2a52; }
.vp-solblurb { margin: 0 0 12px; color: #48576e; font-size: 15px; line-height: 1.5; }
.vp-solpoints { margin: 0 0 12px; padding-left: 0; list-style: none; }
.vp-solpoints li { position: relative; padding-left: 24px; margin-bottom: 7px; color: #33465f; font-size: 14px; line-height: 1.45; }
.vp-solpoints li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #0a8a4a; font-weight: 800; }
.vp-solnote { margin: 0 0 16px; font-size: 12.5px; color: #6b7891; font-style: italic; }
.vp-solcard .vp-btn { margin-top: auto; }

/* ---------- modal ---------- */
body.vp-modal-open { overflow: hidden; }
.vp-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vp-modal[hidden] { display: none; }
.vp-modal-backdrop { position: absolute; inset: 0; background: rgba(9, 22, 45, .55); backdrop-filter: blur(3px); }
.vp-modal-box { position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 18px; padding: 24px 24px 22px; box-shadow: 0 20px 60px rgba(9, 22, 45, .35); animation: vp-pop .16s ease-out; }
@keyframes vp-pop { from { transform: translateY(8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.vp-modal-x { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #8a97ad; cursor: pointer; }
.vp-modal-x:hover { color: #33465f; }
.vp-modal-motion { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #0066B3; background: #eaf3fb; border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.vp-modal-head h3 { margin: 0 0 4px; font-size: 20px; color: #0f2a52; }
.vp-modal-ctx { margin: 0 0 4px; font-size: 13.5px; color: #6b7891; }
.vp-lane-intro { margin: 6px 0 16px; font-size: 14px; line-height: 1.5; color: #48576e; }

/* ---------- form ---------- */
.vp-field { margin-bottom: 14px; }
.vp-field label { display: block; font-size: 13.5px; font-weight: 600; color: #33465f; margin-bottom: 6px; }
.vp-req { color: #d33; }
.vp-field input, .vp-field textarea { width: 100%; box-sizing: border-box; border: 1px solid #cdd6e3; border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 15px; color: #17324f; background: #fbfcfe; }
.vp-field input:focus, .vp-field textarea:focus { outline: none; border-color: #0066B3; box-shadow: 0 0 0 3px rgba(0, 102, 179, .15); background: #fff; }
.vp-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-choice-opt { border: 1px solid #cdd6e3; background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13.5px; color: #33465f; cursor: pointer; transition: .12s; }
.vp-choice-opt:hover { border-color: #0066B3; }
.vp-choice-opt[aria-pressed="true"] { background: #0066B3; border-color: #0066B3; color: #fff; font-weight: 600; }
.vp-form-err { margin: 4px 0 10px; color: #c0392b; font-size: 13.5px; background: #fdecec; border-radius: 8px; padding: 8px 11px; }
.vp-modal-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
.vp-modal-actions .vp-btn { width: 100%; text-align: center; }
.vp-modal-call { font-size: 13.5px; color: #0066B3; text-decoration: none; }
.vp-modal-call:hover { text-decoration: underline; }

/* ---------- success ---------- */
.vp-modal-done { text-align: center; padding: 8px 4px 4px; }
.vp-done-ico { width: 56px; height: 56px; margin: 6px auto 14px; border-radius: 50%; background: #e7f6ee; color: #0a8a4a; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.vp-modal-done h3 { margin: 0 0 8px; color: #0f2a52; }
.vp-modal-done p { margin: 0 0 8px; color: #48576e; font-size: 14.5px; line-height: 1.5; }
.vp-done-id { font-size: 12.5px; color: #8a97ad; font-family: ui-monospace, monospace; }
.vp-modal-done .vp-btn { margin-top: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .vp-solgrid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 480px) {
  .vp-modal { padding: 0; align-items: flex-end; }
  .vp-modal-box { max-width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; padding: 22px 18px 20px; }
}