/* =====================================================================================
   Popup thanh toán của trang bán hàng Sheet Music Pro (plugin sheetmusic-sales).

   Khối này mang cả hai class .smp-landing (để dùng chung biến màu và lưới an toàn chống CSS theme)
   và .smp-modal (để định vị toàn màn hình). Mọi class đều có tiền tố smp-.
   ===================================================================================== */
.smp-modal[hidden]{display:none}
/* Thuộc tính hidden phải luôn thắng: nhiều rule bên dưới đặt display:flex/block nên nếu không có luật
   này thì những khối đang ẩn (nút Bỏ mã, ảnh QR chưa tạo, các bước sau) vẫn hiện ra. */
.smp-modal [hidden]{display:none!important}
/* Khoá cuộn trang nền khi popup đang mở (JavaScript gắn class này vào body). */
body.smp-khoa-cuon{overflow:hidden}
.smp-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:20px}
.smp-modal-nen{position:absolute;inset:0;background:#1e2130c4;backdrop-filter:blur(3px)}
.smp-modal-hop{position:relative;width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--smp-be-mat);border:1px solid var(--smp-ke);border-radius:18px;box-shadow:0 30px 70px -20px rgba(20,23,35,.6);padding:26px;text-align:left}
.smp-modal-hop h3{font-size:22px;margin-bottom:6px;color:var(--smp-cham)}
.smp-modal-dong{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--smp-cham-nhat);font-size:19px;line-height:1;cursor:pointer}
.smp-modal-dong:hover{background:#f2efe9;color:var(--smp-cham)}
.smp-modal-dong:focus-visible{outline:3px solid var(--smp-muc);outline-offset:2px}

.smp-truong{display:block;margin:14px 0 0;font-size:14px;font-weight:500;color:var(--smp-cham)}
.smp-truong input{display:block;width:100%;margin-top:6px;min-height:46px;border:1.5px solid var(--smp-ke);border-radius:10px;padding:0 12px;font:16px "Be Vietnam Pro",system-ui,sans-serif;color:var(--smp-cham);background:#fff}
.smp-truong input:focus-visible{border-color:var(--smp-muc);outline:2px solid #f6e9e2;outline-offset:1px}

.smp-ma-giam{display:flex;gap:8px;margin-top:6px}
.smp-ma-giam input{margin:0;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.smp-ma-giam .smp-btn{min-height:46px;padding:0 16px;border-radius:10px;flex:none}

.smp-da-ap{margin-top:10px;font-size:13px;color:var(--smp-xanh);display:flex;justify-content:space-between;align-items:center;gap:10px}
.smp-bo-ma{border:0;background:none;color:var(--smp-muc);text-decoration:underline;cursor:pointer;font-size:13px;padding:4px}

.smp-tong{margin:16px 0;padding:12px 14px;background:#faf9f6;border-radius:10px;font-size:15px}
.smp-tong>div{display:flex;justify-content:space-between;gap:12px}
.smp-tong .smp-goc{color:var(--smp-cham-nhat)}
.smp-tong .smp-giam{color:var(--smp-xanh)}
.smp-tong .smp-cuoi{border-top:1px solid var(--smp-ke);margin-top:8px;padding-top:8px;font-weight:700;font-size:17px}

.smp-rong{width:100%}
.smp-modal-hop .smp-btn-chinh{width:100%}
.smp-giua-nho{text-align:center;margin-top:10px}
.smp-loi{margin-top:12px;padding:10px 12px;border-radius:10px;background:#fdeceb;border:1px solid #f3c9c6;color:#a3221d;font-size:14px}

.smp-anh-qr{display:block;width:220px;max-width:100%;height:auto;margin:16px auto 14px;border:1px solid var(--smp-ke);border-radius:12px;background:#fff}
.smp-ck{font-size:14px;border:1px solid var(--smp-ke);border-radius:10px;overflow:hidden}
.smp-ck>div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--smp-ke)}
.smp-ck>div:last-child{border-bottom:0}
.smp-ck b{font-weight:600;text-align:right}
.smp-ma{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f6e9e2;color:var(--smp-muc);padding:1px 6px;border-radius:6px}
.smp-cho{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:var(--smp-vang)}
.smp-cho i{width:10px;height:10px;border-radius:50%;background:var(--smp-vang);animation:smp-nhay 1.2s infinite;flex:none}
@keyframes smp-nhay{50%{opacity:.25}}

.smp-xong{text-align:center}
.smp-xong .smp-dau{width:64px;height:64px;border-radius:50%;background:#e3f1e8;color:var(--smp-xanh);display:grid;place-items:center;margin:6px auto 12px;font-size:32px}
.smp-xong .smp-btn{width:100%;margin-top:16px}
.smp-xong h3{text-align:center}

@media (prefers-reduced-motion:reduce){
.smp-modal *,.smp-modal *::before,.smp-modal *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media (max-width:560px){
.smp-modal{padding:0;align-items:flex-end}
.smp-modal-hop{width:100%;max-height:92vh;border-radius:18px 18px 0 0;padding:22px 18px 26px}
.smp-ma-giam{flex-wrap:wrap}
.smp-ma-giam input{flex:1 1 100%}
.smp-ma-giam .smp-btn{width:100%}
}