.pay-layer{position:fixed;inset:0;z-index:100;pointer-events:none}.pay-layer.show{pointer-events:auto}.pay-backdrop{position:absolute;inset:0;background:#07152b9c;backdrop-filter:blur(6px);opacity:0;transition:.25s}.pay-layer.show .pay-backdrop{opacity:1}.pay-dialog{position:absolute;left:50%;top:50%;width:min(1050px,calc(100% - 28px));max-height:94vh;overflow:auto;background:#f8fafc;border-radius:24px;box-shadow:0 30px 90px #0006;transform:translate(-50%,-46%) scale(.97);opacity:0;transition:.25s}.pay-layer.show .pay-dialog{transform:translate(-50%,-50%) scale(1);opacity:1}.pay-close{position:absolute;right:16px;top:16px;z-index:2;width:40px;height:40px;border:0;border-radius:12px;background:#fff;color:#243750;font-size:23px;box-shadow:0 8px 22px #1a35551f;cursor:pointer}.pay-progress{height:76px;padding:0 70px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid #e4eaf2}.pay-progress span{display:flex;align-items:center;gap:8px;color:#8491a2;font-size:11px;font-weight:800;white-space:nowrap}.pay-progress span i{width:28px;height:28px;border-radius:50%;background:#e8edf4;display:grid;place-items:center;font-style:normal}.pay-progress span.active,.pay-progress span.done{color:#2563eb}.pay-progress span.active i,.pay-progress span.done i{background:#2563eb;color:#fff}.pay-progress>b{width:80px;height:2px;background:#dfe5ec;margin:0 13px}.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:28px}.qr-side,.order-side{background:#fff;border:1px solid #e5eaf1;border-radius:18px;padding:25px}.qr-side{text-align:center}.pay-tag{display:inline-block;background:#e9f1ff;color:#2563eb;padding:6px 11px;border-radius:99px;font-size:9px;font-weight:800;letter-spacing:1px}.qr-side h2{font-size:25px;margin:11px 0 6px}.qr-side>p{font-size:11px;color:#6d7b8e}.qr-frame{width:285px;height:330px;margin:15px auto;border:1px solid #cce0ff;border-radius:17px;padding:10px;background:#fff;box-shadow:0 15px 40px #183c7016;overflow:hidden}.qr-frame img{width:100%;height:100%;object-fit:contain;object-position:center}.bank-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}.bank-info>div{background:#f5f7fa;border-radius:9px;padding:9px}.bank-info>div:last-child{grid-column:1/-1}.bank-info small{display:block;color:#8290a2;font-size:8px}.bank-info b{font-size:11px}.order-side h3{font-size:19px;margin:0 0 13px}.pay-items{max-height:190px;overflow:auto}.pay-items>div{display:grid;grid-template-columns:45px 1fr auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid #edf0f4}.pay-items img{width:45px;height:45px;object-fit:contain;padding:7px;border-radius:10px;background:#f2f5f9}.pay-items span{display:flex;flex-direction:column}.pay-items span b{font-size:11px}.pay-items span small{font-size:7px;color:#7f8c9d;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pay-items strong{font-size:11px;color:#ef3448}.order-code{margin-top:14px;padding:12px;background:#eef4ff;border:1px dashed #8db4ff;border-radius:10px;display:grid;grid-template-columns:1fr auto;gap:3px 10px;text-align:left}.order-code span{font-size:8px;color:#63738a}.order-code b{font-size:18px;color:#2563eb;letter-spacing:1px}.order-code button{grid-column:2;grid-row:1/3;border:0;background:#fff;color:#2563eb;border-radius:8px;padding:0 11px;font-size:9px;font-weight:800;cursor:pointer}.pay-total{display:flex;align-items:center;justify-content:space-between;padding:15px 0}.pay-total span{font-size:12px}.pay-total strong{font-size:25px;color:#ef3448}.pay-warning{background:#fff8e8;border:1px solid #ffdc8a;border-radius:10px;padding:11px;color:#6a5424}.pay-warning>b{font-size:10px}.pay-warning p{font-size:9px;line-height:1.5;margin:5px 0 0}.paid-button{width:100%;margin-top:13px;border:0;background:#2563eb;color:#fff;padding:14px;border-radius:11px;font-size:12px;font-weight:800;cursor:pointer}.manual-note{text-align:center;color:#8793a4;font-size:8px;line-height:1.5}.success-step{padding:65px 45px;text-align:center}.success-step>i{width:78px;height:78px;border-radius:50%;background:#ddf8ec;color:#0aa56c;display:grid;place-items:center;margin:auto;font-style:normal;font-size:40px}.success-step h2{font-size:30px;margin:16px 0 9px}.success-step>p{max-width:630px;margin:0 auto;color:#68778b;font-size:13px;line-height:1.7}.zalo-contact{width:min(420px,100%);margin:25px auto 14px;padding:18px;background:#eef5ff;border-radius:14px;display:flex;flex-direction:column}.zalo-contact b{font-size:10px;color:#2869ea}.zalo-contact strong{font-size:25px;margin:3px}.zalo-contact small{font-size:9px;color:#6e7e93}.success-step>a{display:block;width:min(420px,100%);margin:auto;background:#1677ed;color:#fff;border-radius:12px;padding:15px;font-size:13px;font-weight:800}.back-pay{margin-top:11px;border:0;background:none;color:#607087;font-size:10px;cursor:pointer}@media(max-width:800px){.pay-grid{grid-template-columns:1fr}.pay-progress{padding:0 20px}.pay-progress>b{width:30px}.qr-frame{width:min(285px,100%)}.pay-dialog{max-height:96vh}.success-step{padding:55px 24px}}@media(max-width:480px){.pay-progress span{font-size:8px}.pay-progress span i{width:24px;height:24px}.pay-progress>b{width:12px;margin:0 5px}.pay-grid{padding:14px;gap:14px}.qr-side,.order-side{padding:17px}.qr-side h2{font-size:21px}.success-step h2{font-size:25px}}