/* Modal thanh toán khoá học */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.modal__backdrop{position:absolute;inset:0;background:rgba(15,10,5,.55);backdrop-filter:blur(4px)}
.modal__panel{position:relative;background:#fffbeb;border:1px solid #fcd34d;border-radius:20px;box-shadow:0 20px 60px rgba(180,83,9,.2);max-width:520px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:28px}
.modal__close{position:absolute;top:12px;right:14px;background:transparent;border:none;font-size:26px;color:#78350f;cursor:pointer;line-height:1;padding:4px 8px;border-radius:8px}
.modal__close:hover{background:rgba(146,64,14,.1)}
.modal__title{margin:0 0 6px;color:#b45309;font-size:22px}
.modal__desc{margin:0 0 20px;color:#78350f;font-size:14px}
.modal__price{background:white;border:1px solid #fcd34d;border-radius:12px;padding:12px 16px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}
.modal__price-label{color:#78350f;font-size:13px}
.modal__price-value{color:#b45309;font-size:22px;font-weight:700}
.modal__field{margin-bottom:14px}
.modal__field label{display:block;font-size:13px;color:#78350f;margin-bottom:6px;font-weight:500}
.modal__field input{width:100%;padding:11px 14px;border:1px solid #d6d3d1;background:white;border-radius:10px;font-size:15px;font-family:inherit}
.modal__field input:focus{outline:none;border-color:#b45309;box-shadow:0 0 0 3px rgba(180,83,9,.15)}
.modal__submit{width:100%;background:#b45309;color:white;border:none;padding:14px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;margin-top:6px}
.modal__submit:hover{background:#92400e}
.modal__submit:disabled{opacity:.6;cursor:not-allowed}
.modal__error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px}
.modal__hint{font-size:12px;color:#78716c;text-align:center;margin-top:14px}

/* Bước 2 — hiện QR */
.pay-step{text-align:center}
.pay-step h3{margin:0 0 8px;color:#b45309}
.pay-step p{color:#57534e;font-size:14px;margin:0 0 16px}
.pay-qr{background:white;border:1px solid #fcd34d;border-radius:16px;padding:16px;display:inline-block;margin-bottom:16px}
.pay-qr img,.pay-qr canvas{width:220px;height:220px;display:block}
.pay-info{background:white;border:1px solid #e7e5e4;border-radius:12px;padding:14px 16px;text-align:left;margin-bottom:16px;font-size:13px}
.pay-info .row{display:flex;justify-content:space-between;padding:4px 0;color:#44403c}
.pay-info .row strong{color:#1c1917;font-family:monospace}
.pay-status{background:#fef3c7;border:1px solid #fcd34d;border-radius:10px;padding:10px;color:#78350f;font-size:13px;margin-bottom:14px}
.pay-status.paid{background:#dcfce7;border-color:#86efac;color:#166534}

/* Nút "Mua ngay" là <button> — cần trông giống như <a class="btn"> */
button.btn{font:inherit;cursor:pointer}