/* THIΞURINO — Harry Potter payOS checkout. Only applied to merch.html. */
button.promo{width:100%;margin:0;padding:0;border:0;color:inherit;font:inherit;text-align:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.hp-pay-modal{z-index:160}
.hp-pay-modal .hp-card{position:relative;width:min(850px,100%);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.32);border-radius:22px;background:linear-gradient(150deg,rgba(28,87,131,.96),rgba(4,27,55,.98));color:#fff;box-shadow:0 30px 90px rgba(1,15,35,.6);padding:clamp(22px,4vw,38px);text-align:center;transform:translateY(14px) scale(.98);transition:transform .3s ease}
.hp-pay-modal.open .hp-card{transform:none}
.hp-pay-modal .hp-x{position:absolute;right:12px;top:12px;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(255,255,255,.12);color:white;font-size:28px;line-height:36px;cursor:pointer}
.hp-pay-modal .hp-x:hover,.hp-pay-modal .hp-x:focus-visible{background:rgba(255,255,255,.24);outline:2px solid #00ffff;outline-offset:2px}
.hp-pay-modal .hp-mark{font-size:12px;letter-spacing:.24em;opacity:.75;margin:0 40px 6px}
.hp-pay-modal h2{font-family:var(--f-head);font-size:clamp(22px,3vw,32px);line-height:1.2;margin:0 30px 10px;font-weight:400}
.hp-pay-modal .hp-desc{font-size:clamp(13px,1.5vw,16px);line-height:1.6;color:rgba(255,255,255,.78);margin:0 auto 22px;max-width:670px}
.hp-pay-modal .hp-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 auto}
.hp-pay-modal .hp-opt{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.09);border-radius:16px;padding:clamp(16px,2.8vw,27px);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;min-height:195px;transition:transform .25s,background .25s,border-color .25s;justify-content:center}
.hp-pay-modal .hp-opt:hover,.hp-pay-modal .hp-opt:focus-visible{transform:translateY(-3px);border-color:#00ffff;background:rgba(0,255,255,.12);outline:none}
.hp-pay-modal .hp-opt-name{font-family:var(--f-head);font-size:clamp(17px,2.4vw,24px);line-height:1.35}
.hp-pay-modal .hp-opt-detail{opacity:.72;font-size:13px;line-height:1.5}
.hp-pay-modal .hp-price{font-family:var(--f-head);font-size:26px;color:#ffff00;letter-spacing:.03em}
.hp-pay-modal .hp-opt-buy{display:inline-flex;align-items:center;justify-content:center;padding:9px 17px;background:#fff;color:#123b5b;border-radius:99px;font-size:13px;font-weight:700}
.hp-pay-modal .hp-stage[hidden],.hp-pay-modal [hidden]{display:none!important}
.hp-pay-modal .hp-info{margin:0 0 14px;font-size:16px;line-height:1.6}
.hp-pay-modal .hp-info b{color:#ffff00}
.hp-pay-modal .hp-status{font-size:14px;line-height:1.5;margin:12px auto;min-height:24px;color:#d9f5ff}
.hp-pay-modal .hp-status.error{color:#ffd6d6}
.hp-pay-modal .hp-status.success{color:#c5ffde}
.hp-pay-modal .hp-embedded{width:100%;min-height:120px;background:#fff;border-radius:14px;margin:10px auto;position:relative;color:#173450;padding:clamp(16px,3vw,24px);overflow:hidden}
/* VietQR tự vẽ tại trình duyệt, không phụ thuộc payOS iframe. */
.hp-pay-modal .hp-qr-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.hp-pay-modal .hp-qr-svg{display:block;width:min(270px,100%);height:auto;aspect-ratio:1;background:#fff;border-radius:7px;image-rendering:pixelated;margin:4px auto 6px}
.hp-pay-modal .hp-qr-heading{margin:0;color:#173450;font-size:16px;font-weight:800}
.hp-pay-modal .hp-qr-bank{margin:0;font-size:14px;color:#173450;line-height:1.35;word-break:break-word}
.hp-pay-modal .hp-qr-note{font-size:13px;line-height:1.5;color:#42637e;margin:4px auto 0;max-width:460px}
.hp-pay-modal .hp-embedded.no-qr{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.hp-pay-modal .hp-embedded.no-qr p{margin:0}

.hp-pay-modal .hp-tools{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.hp-pay-modal .hp-action{display:inline-flex;justify-content:center;align-items:center;min-height:42px;padding:10px 20px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(255,255,255,.13);color:#fff;text-decoration:none;font-size:14px;cursor:pointer;transition:background .2s}
.hp-pay-modal .hp-action:hover,.hp-pay-modal .hp-action:focus-visible{background:rgba(255,255,255,.27);outline:2px solid #00ffff;outline-offset:2px}
.hp-pay-modal .hp-action.main{background:#fff;color:#123b5b;border:0;font-weight:700}
.hp-pay-modal .hp-action.main:hover{background:#daffff}
.hp-pay-modal .hp-action:disabled{opacity:.55;cursor:wait}
.hp-pay-modal .hp-download{display:inline-flex;margin:10px auto;padding:13px 25px;text-decoration:none;border-radius:999px;background:#bfffde;color:#123b5b;font-weight:700}
.hp-pay-modal .hp-small{font-size:12px;opacity:.7;line-height:1.6;margin:12px auto 0}
@media(max-width:580px){.hp-pay-modal{padding:12px}.hp-pay-modal .hp-card{max-height:calc(100dvh - 24px);padding:24px 15px;border-radius:16px}.hp-pay-modal .hp-options{grid-template-columns:1fr;gap:10px}.hp-pay-modal .hp-opt{min-height:140px;gap:6px;padding:14px}.hp-pay-modal .hp-embedded{min-height:120px}.hp-pay-modal .hp-mark{margin-left:28px;margin-right:28px}}
@media(prefers-reduced-motion:reduce){.hp-pay-modal .hp-card,.hp-pay-modal .hp-opt{transition:none}}

/* QR/payment modal: fluid to viewport, no inner scrollbar. */
.hp-pay-modal{padding:8px}
.hp-pay-modal .hp-card{box-sizing:border-box;width:min(710px,calc(100vw - 16px));max-height:none;overflow:visible;padding:clamp(10px,2vh,20px) clamp(11px,3vw,24px)}
.hp-pay-modal .hp-mark{font-size:10px;margin:0 32px 3px}
.hp-pay-modal h2{font-size:clamp(19px,3vh,28px);margin:0 24px 3px}
.hp-pay-modal .hp-desc{font-size:clamp(11px,1.7vh,13px);margin:0 auto 8px;line-height:1.3}
.hp-pay-modal .hp-info{font-size:clamp(12px,1.9vh,15px);line-height:1.35;margin:0 0 5px}
.hp-pay-modal .hp-embedded{padding:clamp(7px,1.2vh,12px);margin:5px auto;min-height:0}
.hp-pay-modal .hp-qr-content{gap:3px}
.hp-pay-modal .hp-qr-svg,.hp-pay-modal .hp-qr-content svg{width:min(100%,clamp(110px,28dvh,230px))!important;height:auto!important;aspect-ratio:1}
.hp-pay-modal .hp-qr-heading{font-size:clamp(12px,1.8vh,15px)}
.hp-pay-modal .hp-qr-bank,.hp-pay-modal .hp-qr-note{font-size:clamp(10px,1.5vh,12px);line-height:1.25;margin:1px 0}
.hp-pay-modal .hp-tools{margin-top:5px;gap:6px}
.hp-pay-modal .hp-action{min-height:34px;padding:6px 11px;font-size:12px}
.hp-pay-modal .hp-status{margin:4px auto;min-height:0;font-size:clamp(11px,1.7vh,13px)}
.hp-pay-modal .hp-small{margin:5px auto 0;font-size:11px}
.hp-pay-modal .hp-options{gap:9px}.hp-pay-modal .hp-opt{min-height:115px;padding:12px;gap:5px}.hp-pay-modal .hp-opt-name{font-size:clamp(16px,2.4vh,22px)}.hp-pay-modal .hp-price{font-size:clamp(18px,3vh,24px)}
@media(max-height:590px){.hp-pay-modal .hp-card{padding:8px 12px}.hp-pay-modal .hp-qr-svg,.hp-pay-modal .hp-qr-content svg{width:min(100%,24dvh,168px)!important}.hp-pay-modal .hp-qr-note:last-child{display:none}}