.payment-demo-page[data-v-2f5812b5]{background:linear-gradient(135deg,#fb7185,#f43f5e);min-height:100vh;padding:2rem 0}.payment-demo-container[data-v-2f5812b5]{background:#fff;border-radius:1rem;box-shadow:0 10px 30px #0003;overflow:hidden}.demo-header[data-v-2f5812b5]{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;padding:2rem;position:relative;text-align:center}.demo-title[data-v-2f5812b5]{font-size:2rem;font-weight:700;justify-content:center;margin-bottom:1rem}.demo-badge[data-v-2f5812b5],.demo-title[data-v-2f5812b5]{align-items:center;display:flex}.demo-badge[data-v-2f5812b5]{background:#fff3;border-radius:2rem;font-size:.875rem;font-weight:600;padding:.5rem 1rem;position:absolute;right:1rem;top:1rem}.demo-description[data-v-2f5812b5]{font-size:1.125rem;margin:0;opacity:.9}.payment-info-card[data-v-2f5812b5]{border-bottom:1px solid #e5e7eb;padding:2rem}.provider-logo[data-v-2f5812b5]{margin-bottom:2rem;text-align:center}.generic-logo[data-v-2f5812b5],.stripe-logo[data-v-2f5812b5],.vnpay-logo[data-v-2f5812b5]{border-radius:.5rem;color:#fff;display:inline-block;font-size:1.5rem;font-weight:700;padding:1rem 2rem}.vnpay-logo[data-v-2f5812b5]{background:linear-gradient(135deg,#1e40af,#3b82f6)}.stripe-logo[data-v-2f5812b5]{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.generic-logo[data-v-2f5812b5]{background:linear-gradient(135deg,#6b7280,#9ca3af)}.payment-details h3[data-v-2f5812b5]{color:#111827;font-weight:600;margin-bottom:1.5rem}.detail-row[data-v-2f5812b5]{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;padding:.75rem 0}.detail-row[data-v-2f5812b5]:last-child{border-bottom:none}.label[data-v-2f5812b5]{color:#6b7280;font-weight:500}.value[data-v-2f5812b5]{color:#111827;font-weight:600}.value.amount[data-v-2f5812b5]{color:#059669;font-size:1.25rem}.demo-actions[data-v-2f5812b5]{background:#f9fafb;border-bottom:1px solid #e5e7eb;padding:2rem}.demo-actions h4[data-v-2f5812b5]{color:#111827;font-weight:600;margin-bottom:.5rem}.action-buttons[data-v-2f5812b5]{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.action-buttons .btn[data-v-2f5812b5]{align-items:center;border:none;border-radius:.5rem;display:flex;flex:1;font-weight:600;justify-content:center;min-width:200px;padding:1rem 1.5rem;transition:all .2s}.btn[data-v-2f5812b5]:disabled{cursor:not-allowed;opacity:.7}.btn-success[data-v-2f5812b5]{background:linear-gradient(135deg,#059669,#10b981);color:#fff}.btn-success[data-v-2f5812b5]:hover:not(:disabled){background:linear-gradient(135deg,#047857,#059669);box-shadow:0 4px 12px #0596694d;transform:translateY(-2px)}.btn-danger[data-v-2f5812b5]{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff}.btn-danger[data-v-2f5812b5]:hover:not(:disabled){background:linear-gradient(135deg,#b91c1c,#dc2626);box-shadow:0 4px 12px #dc26264d;transform:translateY(-2px)}.btn-secondary[data-v-2f5812b5]{background:linear-gradient(135deg,#6b7280,#9ca3af);color:#fff}.btn-secondary[data-v-2f5812b5]:hover:not(:disabled){background:linear-gradient(135deg,#4b5563,#6b7280);box-shadow:0 4px 12px #6b72804d;transform:translateY(-2px)}.demo-info[data-v-2f5812b5]{background:#fffbeb;border-bottom:1px solid #e5e7eb;padding:2rem}.demo-info h5[data-v-2f5812b5]{color:#92400e;font-weight:600;margin-bottom:1rem}.demo-info ul[data-v-2f5812b5]{color:#78350f;margin:0;padding-left:1.5rem}.demo-info li[data-v-2f5812b5]{margin-bottom:.5rem}.payment-flow[data-v-2f5812b5]{padding:2rem}.payment-flow h5[data-v-2f5812b5]{color:#111827;font-weight:600;margin-bottom:1.5rem}.flow-steps[data-v-2f5812b5]{display:flex;flex-direction:column;gap:1rem}.flow-step[data-v-2f5812b5]{align-items:flex-start;background:#f9fafb;border:2px solid #e5e7eb;border-radius:.5rem;display:flex;gap:1rem;padding:1rem}.flow-step.completed[data-v-2f5812b5]{background:#ecfdf5;border-color:#10b981}.step-number[data-v-2f5812b5]{align-items:center;background:#e5e7eb;border-radius:50%;color:#6b7280;display:flex;flex-shrink:0;font-weight:600;height:2rem;justify-content:center;width:2rem}.flow-step.completed .step-number[data-v-2f5812b5]{background:#10b981;color:#fff}.flow-step.active .step-number[data-v-2f5812b5]{background:#3b82f6;color:#fff}.step-content h6[data-v-2f5812b5]{color:#111827;font-weight:600;margin:0 0 .5rem}.step-content p[data-v-2f5812b5]{color:#6b7280;font-size:.875rem;margin:0}@media (max-width:768px){.payment-demo-page[data-v-2f5812b5]{padding:1rem 0}.demo-header[data-v-2f5812b5]{padding:1.5rem}.demo-title[data-v-2f5812b5]{font-size:1.5rem}.demo-badge[data-v-2f5812b5]{align-self:center;margin-bottom:1rem;position:static}.demo-actions[data-v-2f5812b5],.demo-info[data-v-2f5812b5],.payment-flow[data-v-2f5812b5],.payment-info-card[data-v-2f5812b5]{padding:1.5rem}.action-buttons[data-v-2f5812b5]{flex-direction:column}.action-buttons .btn[data-v-2f5812b5]{min-width:auto}.detail-row[data-v-2f5812b5]{align-items:flex-start;flex-direction:column;gap:.25rem}}