:root{color:#10243d;--shell-bg:linear-gradient(180deg, #eef3f9 0%, #dfeaf6 100%);--card-border:#dbe5f0;--muted:#6f7e92;--primary:#13438f;--danger:#ff6a42;background:#e8eef6;font-family:Be Vietnam Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--shell-bg);color:#10243d;margin:0}button,textarea{font:inherit}img{max-width:100%;display:block}.desktop-only{display:none}.page-shell{background:radial-gradient(circle at top,#aac8ff66,#0000 28%),linear-gradient(#eef3f9 0%,#dfeaf6 100%);min-height:100dvh;padding:24px 12px 40px}.page-shell--center,.page-shell--success{justify-content:center;align-items:center;display:flex}.vietqr-screen{max-width:560px;margin:0 auto}.vietqr-card{background:#fff;border:1px solid #c6d3e2f2;border-radius:30px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 26px 70px #0c234424}.vietqr-card__panel{border-bottom:1px solid var(--card-border);padding:22px 24px}.vietqr-card__panel:last-child{border-bottom:0}.vietqr-card__panel--brand{order:1}.vietqr-card__panel--headline{order:2}.vietqr-card__panel--qr{order:3}.vietqr-card__panel--details{order:4}.vietqr-card__panel--actions{order:5}.vietqr-card__panel--wallets{background:linear-gradient(#162c4f 0%,#112542 100%);border-top:1px solid #1a3154e6;border-bottom:1px solid #1a3154e6;order:6;padding:22px 18px 24px}.vietqr-card__panel--notice{order:7}.vietqr-card__panel--footer{order:8}.vietqr-card__panel--transfer{order:9;display:none}.vietqr-card__panel--brand{padding-top:26px;padding-bottom:20px}.vietqr-card__brand{justify-content:center;display:flex}.vietqr-card__brand-image{object-fit:contain;image-rendering:auto;filter:drop-shadow(0 4px 10px #13438f14);width:min(100%,250px);transform:translateZ(0)}.vietqr-card__instruction{text-align:center;color:#445468;margin:0;font-size:18px;font-weight:500;line-height:1.45}.vietqr-card__timer{flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-top:16px;display:flex}.vietqr-card__timer span{color:var(--muted);font-size:13px;font-weight:600}.vietqr-card__timer strong{color:var(--primary);letter-spacing:.06em;font-size:30px}.vietqr-card__timer strong.is-warning{color:#d9481b}.vietqr-card__qr-frame{justify-content:center;align-items:center;display:flex}.vietqr-card__qr-image{object-fit:contain;width:min(100%,350px)}.vietqr-card__qr-empty{text-align:center;min-height:280px;color:var(--muted);place-items:center;display:grid}.vietqr-card__amount-block{text-align:center;margin-top:20px}.vietqr-card__amount-label{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:12px;font-weight:700;display:block}.vietqr-card__amount-value{color:#163052;margin-top:10px;font-size:34px;font-weight:800;line-height:1.1;display:block}.vietqr-card__amount-value span{color:#627489;font-size:20px}.vietqr-card__amount-words{color:#66788e;margin-top:10px;font-size:14px;display:block}.wallet-strip{grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:14px;display:grid}.wallet-strip__item{background:#fff;border:1px solid #13243f29;border-radius:24px;place-items:center;min-height:92px;padding:0 2px;display:grid;overflow:hidden;box-shadow:0 10px 24px #050e1d38,inset 0 1px #fffffff2}.wallet-strip__item img{object-fit:contain;image-rendering:auto;filter:none;width:auto}.wallet-strip__image{max-width:84%;max-height:30px;margin:0 auto}.wallet-strip__image--momo{width:auto;max-width:72%;height:44px;max-height:44px}.wallet-strip__image--zalopay{width:auto;max-width:90%;height:44px;max-height:44px}.wallet-strip__image--viettel{width:auto;max-width:92%;height:44px;max-height:44px}.wallet-strip__image--vnpt{width:auto;max-width:78%;height:44px;max-height:44px}.bank-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px;display:grid}.bank-grid__item{background:#fff;border:1px solid #13243f29;border-radius:24px;place-items:center;min-height:86px;padding:0 10px;display:grid;overflow:hidden;box-shadow:0 12px 28px #050e1d38,inset 0 1px #fffffff2}.bank-grid__item:last-child:nth-child(3n+1){grid-column:2}.bank-grid__item.is-active{border-color:#759fde8c;box-shadow:0 12px 28px #050e1d38,0 0 0 3px #5d8fdc2e,inset 0 1px #fffffff2}.bank-grid__item img{object-fit:contain;image-rendering:auto;filter:none;width:auto}.bank-grid__image{max-width:74%;max-height:28px;margin:0 auto}.bank-grid__image--bidv,.bank-grid__image--vpb,.bank-grid__image--shb,.bank-grid__image--acb,.bank-grid__image--scb,.bank-grid__image--stb,.bank-grid__image--tpb{max-width:66%}.bank-grid__image--vpb{max-width:90%;max-height:36px}.bank-grid__image--vcb{max-width:94%;max-height:38px}.bank-grid__image--vtb,.bank-grid__image--msb,.bank-grid__image--ocb{max-width:72%;max-height:26px}.bank-grid__image--vtb,.bank-grid__image--hdb{max-width:94%;max-height:37px}.bank-grid__image--mb{max-width:64%;max-height:26px}.bank-grid__image--tcb{max-width:94%;max-height:37px}.bank-grid__image--stb{max-width:96%;max-height:37px}.bank-grid__image--vib{max-width:72%;max-height:29px}.bank-grid__image--tpb{max-width:92%;max-height:36px}.bank-grid__image--sea{max-width:94%;max-height:36px}.vietqr-card__panel--notice p,.vietqr-card__secondary-note{text-align:center;color:#5f6f83;margin:0;font-size:16px;line-height:1.5}.vietqr-card__panel--details{flex-direction:column;gap:12px;display:flex}.detail-row{border-bottom:1px solid #dfe8f0f2;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;display:grid}.detail-row:last-child{border-bottom:0}.detail-row span{color:var(--muted);font-size:14px;font-weight:600}.detail-row strong{color:#132d4d;overflow-wrap:anywhere;font-size:16px;font-weight:700;line-height:1.45}.detail-row__bank{justify-content:flex-start;align-items:center;gap:10px;display:inline-flex}.detail-row__bank img{width:auto;height:20px}.detail-row button,.vietqr-card__confirm,.overlay__panel button,.success-card__home{cursor:pointer;border:0}.detail-row button{color:#fff;letter-spacing:.01em;background:linear-gradient(#2f85ef 0%,#1a66cb 100%);border-radius:999px;min-width:132px;height:40px;padding:0 18px;font-size:13px;font-weight:800;transition:transform .14s,box-shadow .14s,filter .14s;box-shadow:0 10px 22px #1c65c633,inset 0 1px #ffffff47}.detail-row button:hover{filter:brightness(1.04);box-shadow:0 12px 24px #1c65c63d,inset 0 1px #ffffff52}.detail-row button:active{transform:translateY(1px)}.detail-row button:focus-visible{outline-offset:2px;outline:3px solid #438fff3d}.detail-row--note{align-items:flex-start}.vietqr-card__panel--actions{flex-direction:column;gap:16px;display:flex}.turnstile-box{background:#f7fbff;border:1px solid #d0dcebf5;border-radius:20px;padding:18px}.turnstile-box__title{color:#183458;font-size:14px;font-weight:800}.turnstile-box__hint{color:var(--muted);margin-top:10px;font-size:13px;line-height:1.45}.vietqr-card__confirm{color:#fff;letter-spacing:.01em;height:52px;box-shadow:none;background:#215aa3;border:1px solid #215aa3;border-radius:10px;font-size:17px;font-weight:800;transition:background-color .16s,border-color .16s,transform .16s}.vietqr-card__confirm:hover{background:#1d4f91;border-color:#1d4f91}.vietqr-card__confirm:active{transform:translateY(1px)}.vietqr-card__confirm:disabled{opacity:.65;cursor:default}.vietqr-card__panel--footer{background:radial-gradient(circle at 50% -20%,#ffffff9e,#0000 48%),linear-gradient(#d6e2f1 0%,#bfd1e6 100%);position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffffb3}.vietqr-card__panel--footer:before{content:"";pointer-events:none;background:linear-gradient(90deg,#fff0,#ffffff3d,#fff0);position:absolute;inset:0}.footer-strip{z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:10px;display:grid;position:relative}.footer-pill{border:1px solid #7c95bafa;border-radius:18px;justify-content:flex-start;align-items:center;gap:10px;width:100%;min-height:54px;padding:0 16px;display:flex;position:relative;overflow:hidden;box-shadow:0 12px 24px #12234224,inset 0 1px #ffffff94,inset 0 -10px 18px #4a69981f}.footer-pill:before,.footer-pill:after{content:"";pointer-events:none;position:absolute}.footer-pill:before{background:linear-gradient(#ffffff6b,#ffffff0a);border-radius:17px;inset:1px}.footer-pill:after{opacity:.92;height:4px;top:0;left:0;right:0}.footer-pill--safe{background:linear-gradient(#d0e1f8fa,#a6c2eaf7);border-color:#4974bae6}.footer-pill--safe:after{background:linear-gradient(90deg,#4f82cf 0%,#255ea8 100%)}.footer-pill--napas{background:linear-gradient(#d8dffbfa,#b1bdeff7);border-color:#5463bee0}.footer-pill--napas:after{background:linear-gradient(90deg,#586dd2 0%,#354a9e 100%)}.footer-pill--vietqr{background:linear-gradient(#d4ecf7fa,#a9d2e6f7);border-color:#4591b8db}.footer-pill--vietqr:after{background:linear-gradient(90deg,#49a9cf 0%,#276f93 100%)}.footer-pill__label{z-index:1;color:#234162;letter-spacing:0;text-shadow:0 1px #ffffff2e;white-space:nowrap;font-size:12px;font-weight:800;line-height:1;position:relative}.footer-pill__icon{z-index:1;color:#4a78b2;background:#ffffff4d;border:1px solid #ffffff70;border-radius:999px;flex:none;width:24px;height:24px;position:relative;box-shadow:inset 0 1px #ffffff85,0 3px 6px #223a5f14}.footer-pill--safe .footer-pill__icon,.footer-pill--safe .footer-pill__label{color:#1f5599}.footer-pill--napas .footer-pill__icon,.footer-pill--napas .footer-pill__label{color:#344895}.footer-pill--vietqr .footer-pill__icon,.footer-pill--vietqr .footer-pill__label{color:#245f7f}@media (width>=1024px){.page-shell{background:radial-gradient(circle at 50% 0,#2762be4d,#0000 34%),linear-gradient(#0c1730 0%,#102648 48%,#0b1830 100%);justify-content:center;align-items:center;height:100dvh;min-height:100dvh;padding:12px 16px;display:flex;overflow:hidden}.vietqr-screen{align-items:center;width:100%;max-width:min(980px,100vw - 32px);height:100%;display:flex}.vietqr-card{background:linear-gradient(135deg,#070f22eb,#0f2242f5),linear-gradient(#ffffff0a,#fff0);border:1px solid #4f6fa74d;border-radius:22px;grid-template-columns:minmax(205px,.82fr) minmax(250px,.88fr) minmax(215px,.76fr);grid-template-areas:"brand qr wallets""headline qr wallets""headline details wallets""headline details actions";gap:10px;width:100%;max-height:calc(100dvh - 24px);padding:12px;display:grid;overflow:hidden;box-shadow:0 30px 80px #00000073,inset 0 1px #ffffff0f}.vietqr-card__panel{background:linear-gradient(#1a2a4cf5,#0f1c38f5);border:1px solid #617dae33;border-radius:18px;min-width:0;padding:15px;box-shadow:inset 0 1px #ffffff0a}.vietqr-card__panel:last-child{border-bottom:1px solid #617dae33}.mobile-only{display:none!important}.desktop-only{display:block}.vietqr-card__panel--brand{background:radial-gradient(circle at 50% -10%,#ffc76733,#0000 38%),linear-gradient(135deg,#7d1f27 0%,#9b2d2d 38%,#3d1732 100%);border-color:#d67a4b52;grid-area:brand;min-height:124px;padding:0;overflow:hidden}.vietqr-card__desktop-banner{background:radial-gradient(circle at 50% 8%,#ffd67e33,#0000 24%),linear-gradient(#ffffff05,#fff0);justify-content:center;align-items:flex-start;height:100%;padding:18px 14px;display:flex;position:relative}.vietqr-card__desktop-banner:before{content:"";opacity:.14;background-image:radial-gradient(circle,#ffd67ea6 0 1px,#0000 1px);background-size:34px 34px;position:absolute;inset:0}.vietqr-card__desktop-banner:after{content:"";opacity:.92;border-bottom:5px solid #ffc767f2;border-radius:0 0 50% 50%;height:82px;position:absolute;bottom:14px;left:-6%;right:-6%}.vietqr-card__desktop-banner-mark{z-index:1;position:relative}.vietqr-card__desktop-banner .vietqr-card__brand-image{filter:drop-shadow(0 10px 18px #0000002e);width:min(100%,142px)}.vietqr-card__desktop-banner-line{border-bottom:2px solid #ffd075b8;border-radius:0 0 100% 100%;width:32%;height:34px;position:absolute;bottom:28px}.vietqr-card__desktop-banner-line--left{left:0}.vietqr-card__desktop-banner-line--right{right:0}.vietqr-card__panel--headline{color:#f7fbff;flex-direction:column;grid-area:headline;justify-content:space-between;padding:16px 16px 18px;display:flex}.desktop-summary{flex-direction:column;height:100%;display:flex}.desktop-summary__kicker,.desktop-scan__eyebrow,.payment-methods__section-title{color:#73b7ff;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:13px;font-weight:700}.desktop-summary h1,.desktop-scan h2,.payment-methods__title{color:#fff;margin:10px 0 0;font-size:26px;font-weight:800;line-height:1.08}.desktop-summary__meta{flex-direction:column;gap:4px;margin-top:11px;display:flex}.desktop-summary__meta span,.desktop-summary__timer span{color:#ccddffad;letter-spacing:.03em;font-size:13px;font-weight:600}.desktop-summary__meta strong{color:#fff;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.desktop-summary__amount{border-top:1px solid #89a9df38;flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;display:flex}.desktop-summary__amount strong{color:#ffcc6b;font-size:25px;font-weight:900;line-height:1.1}.desktop-summary__amount em{font-size:16px;font-style:normal}.desktop-summary__amount small{color:#dce8ffbf;font-size:14px}.desktop-summary__timer{flex-direction:column;gap:8px;margin-top:18px;display:flex}.desktop-summary__timer strong{color:#ffb03b;letter-spacing:.04em;text-shadow:0 0 24px #ffb03b38;font-size:46px;line-height:1}.desktop-summary__timer strong.is-warning{color:#ff8d68;text-shadow:0 0 24px #ff8d683d}.desktop-summary__hint{display:none}.vietqr-card__panel--qr{text-align:center;flex-direction:column;grid-area:qr;align-items:center;padding:16px 16px 18px;display:flex}.desktop-scan{width:100%;margin-bottom:12px}.desktop-scan h2{font-size:17px}.vietqr-card__qr-frame{background:#fff;border-radius:16px;padding:8px;box-shadow:0 16px 34px #00000029,inset 0 1px #fffffff0}.vietqr-card__qr-image{width:min(100%,212px)}.vietqr-card__qr-empty{min-height:190px}.vietqr-card__amount-block{display:none}.desktop-scan__hint{color:#dae6ffd1;margin:10px 0 0;font-size:11px;line-height:1.45}.vietqr-card__panel--details{grid-area:details;gap:0;padding:16px 16px 14px}.desktop-detail-title{color:#fff;margin:0 0 10px;font-size:16px;font-weight:800;line-height:1.2}.detail-row{border-bottom-color:#87a4d62e;grid-template-columns:82px minmax(0,1fr) auto;gap:8px;padding:9px 0}.detail-row span{color:#cddcf6b8;font-size:13px}.detail-row strong{color:#fff;font-size:13px;font-weight:700}.detail-row__bank{gap:8px}.detail-row__bank img{height:18px}.detail-row button{border-radius:999px;min-width:72px;height:28px;padding:0 9px;font-size:12px;box-shadow:0 8px 18px #1b62c633,inset 0 1px #ffffff47}.vietqr-card__panel--wallets{background:linear-gradient(#182747fa,#0f1b34fa);flex-direction:column;grid-area:wallets;gap:12px;padding:14px;display:flex}.payment-methods__header{border-bottom:1px solid #88a4d62e;padding-bottom:8px}.payment-methods__title{font-size:15px}.payment-methods__tabs{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.payment-methods__tabs span{color:#cedcf6ad;border-bottom:2px solid #0000;padding-bottom:8px;font-size:13px;font-weight:700}.payment-methods__tabs .is-active{color:#73b7ff;border-bottom-color:#3f95ff}.payment-methods__section{flex-direction:column;gap:8px;display:flex}.payment-methods__section--banks{order:1}.payment-methods__section--wallets{order:2}.wallet-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.wallet-strip__item,.bank-grid__item{background:linear-gradient(#fdfefe 0%,#edf3fb 100%);border-color:#7997cc38;border-radius:12px;min-height:58px;box-shadow:0 12px 24px #00000024,inset 0 1px #fffffff2}.wallet-strip__image{max-width:78%}.wallet-strip__image--momo,.wallet-strip__image--zalopay,.wallet-strip__image--viettel,.wallet-strip__image--vnpt{height:22px;max-height:22px}.bank-grid{gap:7px;margin-top:0}.bank-grid__item{border-radius:12px;min-height:52px}.bank-grid__item.is-active{border-color:#5595ffe6;box-shadow:0 14px 28px #00000029,0 0 0 3px #468bff38,inset 0 1px #fffffff5}.vietqr-card__panel--actions{flex-wrap:wrap;grid-area:actions;align-self:end;align-items:stretch;gap:8px;padding:12px 14px 14px;display:flex}.turnstile-box{background:#ffffff0f;border-color:#7997cc38;border-radius:12px;width:100%;padding:12px}.turnstile-box__title{color:#fff}.turnstile-box__hint{color:#cedcf6b8}.vietqr-card__confirm,.vietqr-card__cancel{letter-spacing:.01em;border-radius:10px;flex:1 1 0;min-width:0;height:40px;font-size:15px;font-weight:800}.vietqr-card__confirm{background:linear-gradient(#2fbe64 0%,#179446 100%);border-color:#1a9d4d}.vietqr-card__confirm:hover{background:linear-gradient(#38c86b 0%,#159240 100%);border-color:#159240}.vietqr-card__cancel{color:#31210a;cursor:pointer;background:linear-gradient(#ffcf47 0%,#f4b225 100%);border:1px solid #d3a526;transition:transform .16s,filter .16s;box-shadow:0 12px 24px #1116242e,inset 0 1px #ffffff57}.vietqr-card__cancel:hover{filter:brightness(1.03)}.vietqr-card__cancel:active{transform:translateY(1px)}.vietqr-card__panel--notice,.vietqr-card__panel--notice *{display:none!important}.vietqr-card__panel--footer{display:none}}@media (width>=1024px) and (height<=900px){.page-shell{padding:10px 14px}.vietqr-screen{max-width:920px}.vietqr-card{grid-template-columns:minmax(196px,.8fr) minmax(236px,.88fr) minmax(205px,.74fr);gap:8px;max-height:calc(100dvh - 20px);padding:10px}.vietqr-card__panel{border-radius:16px;padding:13px}.vietqr-card__panel--brand{min-height:112px}.vietqr-card__desktop-banner{padding:16px 12px}.vietqr-card__desktop-banner:after{height:72px;bottom:12px}.vietqr-card__desktop-banner .vietqr-card__brand-image{width:min(100%,132px)}.vietqr-card__panel--headline,.vietqr-card__panel--qr,.vietqr-card__panel--details{padding:14px}.desktop-summary h1{font-size:24px}.desktop-summary__meta{margin-top:9px}.desktop-summary__amount{margin-top:14px;padding-top:12px}.desktop-summary__amount strong{font-size:23px}.desktop-summary__timer{margin-top:14px}.desktop-summary__timer strong{font-size:40px}.desktop-scan{margin-bottom:10px}.desktop-scan h2{font-size:16px}.vietqr-card__qr-image{width:min(100%,196px)}.desktop-scan__hint{margin-top:8px;font-size:10px}.desktop-detail-title,.payment-methods__title{font-size:15px}.detail-row{grid-template-columns:76px minmax(0,1fr) auto;gap:7px;padding:8px 0}.detail-row span,.detail-row strong,.payment-methods__tabs span,.payment-methods__section-title{font-size:12px}.detail-row button{min-width:68px;height:26px;font-size:11px}.vietqr-card__panel--wallets{gap:10px;padding:12px}.payment-methods__header{padding-bottom:6px}.payment-methods__tabs{gap:6px;margin-top:6px}.payment-methods__section,.wallet-strip,.bank-grid{gap:6px}.wallet-strip__item,.bank-grid__item{border-radius:10px;min-height:48px}.wallet-strip__image--momo,.wallet-strip__image--zalopay,.wallet-strip__image--viettel,.wallet-strip__image--vnpt{height:20px;max-height:20px}.bank-grid__image{max-height:22px}.vietqr-card__panel--actions{gap:6px;padding:10px 12px 12px}.vietqr-card__confirm,.vietqr-card__cancel{height:36px;font-size:14px}}@media (width>=1024px) and (width<=1440px) and (height<=900px){.vietqr-screen{max-width:880px}.vietqr-card{grid-template-columns:minmax(186px,.78fr) minmax(226px,.88fr) minmax(194px,.72fr)}}@media (width>=1024px) and (width<=1366px) and (height<=768px){.page-shell{padding:6px 10px}.vietqr-screen{max-width:792px}.vietqr-card{grid-template-columns:minmax(170px,.77fr) minmax(204px,.88fr) minmax(178px,.69fr);gap:6px;max-height:calc(100dvh - 12px);padding:7px}.vietqr-card__panel{border-radius:13px;padding:10px}.vietqr-card__panel--brand{min-height:92px}.vietqr-card__desktop-banner{padding:12px 10px}.vietqr-card__desktop-banner:after{border-bottom-width:4px;height:58px;bottom:10px}.vietqr-card__desktop-banner .vietqr-card__brand-image{width:min(100%,118px)}.vietqr-card__panel--headline,.vietqr-card__panel--qr,.vietqr-card__panel--details{padding:12px}.desktop-summary h1{margin-top:8px;font-size:19px}.desktop-summary__meta{gap:3px;margin-top:8px}.desktop-summary__meta span,.desktop-summary__timer span,.detail-row span,.detail-row strong,.payment-methods__tabs span,.payment-methods__section-title{font-size:11px}.desktop-summary__meta strong{font-size:12px}.desktop-summary__amount{gap:5px;margin-top:10px;padding-top:10px}.desktop-summary__amount strong{font-size:19px}.desktop-summary__amount em,.desktop-summary__amount small{font-size:12px}.desktop-summary__timer{gap:6px;margin-top:10px}.desktop-summary__timer strong{font-size:30px}.desktop-scan{margin-bottom:8px}.desktop-scan__eyebrow{font-size:11px}.desktop-scan h2,.desktop-detail-title,.payment-methods__title{margin-top:8px;font-size:14px}.vietqr-card__qr-image{width:min(100%,168px)}.desktop-scan__hint{margin-top:7px;font-size:9px;line-height:1.35}.detail-row{grid-template-columns:66px minmax(0,1fr) auto;gap:6px;padding:6px 0}.detail-row button{min-width:60px;height:24px;font-size:10px}.detail-row__bank img{height:16px}.vietqr-card__panel--wallets{gap:8px;padding:10px}.payment-methods__header{padding-bottom:5px}.payment-methods__tabs{gap:5px;margin-top:5px}.payment-methods__section,.wallet-strip,.bank-grid{gap:5px}.wallet-strip__item,.bank-grid__item{border-radius:9px;min-height:40px}.wallet-strip__image--momo,.wallet-strip__image--zalopay,.wallet-strip__image--viettel,.wallet-strip__image--vnpt{height:18px;max-height:18px}.bank-grid__image{max-height:19px}.vietqr-card__panel--actions{gap:5px;padding:8px 10px 10px}.vietqr-card__confirm,.vietqr-card__cancel{height:32px;font-size:12px}}@media (width>=1920px) and (height>=980px){.vietqr-screen{max-width:1040px}.vietqr-card{max-height:min(860px,100dvh - 36px)}}.footer-pill__icon--shield:before{content:"";clip-path:polygon(50% 0%,100% 15%,100% 58%,50% 100%,0% 58%,0% 15%);border:2px solid;border-radius:5px 5px 8px 8px;position:absolute;inset:1px 2px 2px}.footer-pill__icon--dot:before,.footer-pill__icon--dot:after{content:"";background:currentColor;border-radius:999px;position:absolute}.footer-pill__icon--dot:before{width:6px;height:6px;top:4px;left:1px;box-shadow:7px 0}.footer-pill__icon--dot:after{opacity:.36;width:13px;height:2px;top:7px;left:1px}.footer-pill__icon--spark:before,.footer-pill__icon--spark:after{content:"";background:currentColor;border-radius:999px;margin:auto;position:absolute;inset:0}.footer-pill__icon--spark:before{width:3px;height:13px}.footer-pill__icon--spark:after{width:13px;height:3px}.page-shell--result{background:radial-gradient(circle at top,#ffe8e59e,#0000 26%),linear-gradient(#fff8f7 0%,#fffdf9 100%);min-height:100dvh;padding:8px 12px 24px}.page-shell--result-expired{background:radial-gradient(circle at top,#ffeccd9e,#0000 26%),linear-gradient(#fff9ef 0%,#fffdf8 100%)}.page-shell--result-success{background:radial-gradient(circle at top,#e5fce894,#0000 26%),linear-gradient(#f8fff8 0%,#fcfff9 100%)}.result-page{background:#ffffffeb;border:1px solid #f4f6faf2;border-radius:20px;width:min(100%,408px);padding:20px 16px 22px;box-shadow:0 18px 48px #cc464614}.result-page--expired{box-shadow:0 18px 48px #e5850c1a}.result-page--success{box-shadow:0 18px 48px #36984c1a}.result-page__hero{text-align:center}.result-page__glyph{color:#e35762;width:118px;height:118px;margin:4px auto 8px;position:relative}.result-page__glyph--expired{color:#ff8e12}.result-page__glyph--success{color:#33ab4d}.result-page__glyph svg{width:100%;height:100%}.result-page__spark{opacity:.3;border-radius:999px;width:22px;height:22px;position:absolute;top:18px}.result-page__spark:before,.result-page__spark:after{content:"";background:currentColor;border-radius:999px;margin:auto;position:absolute;inset:0}.result-page__spark:before{width:4px;height:14px;transform:rotate(28deg)}.result-page__spark:after{width:14px;height:4px;transform:rotate(28deg)}.result-page__spark--left{left:4px}.result-page__spark--right{right:4px}.result-page h1{color:#1a1f2e;margin:2px 0 0;font-size:24px;font-weight:800;line-height:1.15}.result-page__amount{letter-spacing:-.03em;margin-top:14px;font-size:31px;font-weight:900;line-height:1}.result-page__amount.is-failed{color:#db1d33}.result-page__amount.is-expired{color:#ff8b00}.result-page__amount.is-success{color:#34a64c}.result-page__reference-top{color:#505463;margin-top:12px;font-size:13px;line-height:1.4}.result-page__alert{text-align:left;background:#fffffff5;border-radius:14px;grid-template-columns:auto 1fr;align-items:start;gap:12px;min-height:70px;margin-top:18px;padding:15px 16px;display:grid}.result-page__alert--failed{border:1px solid #ec616a73}.result-page__alert--expired{border:1px solid #ff9c1c73}.result-page__alert-badge{color:#fff;background:#ef314a;border-radius:999px;place-items:center;width:28px;height:28px;font-weight:800;display:grid}.result-page__alert--expired .result-page__alert-badge{background:#ff9a11}.result-page__alert strong{color:#202332;font-size:14px;font-weight:800;display:block}.result-page__alert p{color:#585d6d;margin:4px 0 0;font-size:14px;line-height:1.4}.result-page__sheet{background:#fffffffa;border:1px solid #ecf0f5f5;border-radius:18px;margin-top:16px;padding:12px 16px;box-shadow:0 8px 22px #1422360f}.result-page__sheet-row{grid-template-columns:22px 110px minmax(0,1fr);align-items:start;gap:10px;padding:12px 0;display:grid}.result-page__sheet-row+.result-page__sheet-row{border-top:1px solid #eaeef3f2}.result-page__sheet-icon{color:#ef314a}.result-page__sheet-icon--expired{color:#ff9308}.result-page__sheet-icon--success{color:#33ab4d}.result-page__sheet-icon svg{width:20px;height:20px}.result-page__sheet-label{color:#5a5f70;font-size:13px;line-height:1.45}.result-page__sheet-value{color:#1c2231;white-space:pre-line;font-size:13px;font-weight:600;line-height:1.45}.result-page__actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;display:grid}.result-page__button{cursor:pointer;border:0;border-radius:10px;justify-content:center;align-items:center;gap:8px;min-height:46px;font-size:15px;font-weight:800;display:inline-flex}.result-page__button svg,.result-page__home svg{width:18px;height:18px}.result-page__button--ghost.result-page__button--failed{color:#d61d37;background:#fff;border:1px solid #e43b52}.result-page__button--solid.result-page__button--failed{color:#fff;background:linear-gradient(#f02743,#db1732)}.result-page__button--solid.result-page__button--expired{color:#fff;background:linear-gradient(#ff9d0c,#ff8700);grid-column:1/-1}.result-page__button--solid.result-page__button--success{color:#fff;background:linear-gradient(#3fbd55,#2fa745);grid-column:1/-1}.result-page__home{color:#db1d33;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:8px;margin:18px auto 0;font-size:15px;font-weight:800;display:inline-flex}.result-page__home--expired{color:#ff8b00}.result-page__home--success{color:#2fa745}.overlay{z-index:50;place-items:center;display:grid;position:fixed;inset:0}.overlay__backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172a52;border:0;position:absolute;inset:0}.overlay__panel{z-index:1;background:#fff;border-radius:26px;width:min(92vw,420px);padding:24px;position:relative;box-shadow:0 24px 50px #0f172a3d}.overlay__panel h2{color:#142e50;margin:0;font-size:24px;font-weight:800}.overlay__panel p{color:#66788e;margin:10px 0 0;line-height:1.5}.overlay__panel label{color:#506378;margin-top:18px;font-size:13px;font-weight:700;display:block}.overlay__panel textarea{color:#173154;resize:none;background:#f8fbff;border:1px solid #cdd9e6fa;border-radius:18px;width:100%;min-height:120px;margin-top:10px;padding:14px}.overlay__summary{background:#f8fbff;border:1px solid #cdd9e6fa;border-radius:18px;margin-top:18px;padding:14px 16px}.overlay__summary div+div{border-top:1px solid #dce4eef5;margin-top:12px;padding-top:12px}.overlay__summary span{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:700;display:block}.overlay__summary strong{color:#173154;overflow-wrap:anywhere;margin-top:6px;display:block}.overlay__panel button{color:#fff;background:linear-gradient(#194e9f,#113f82);border-radius:16px;width:100%;height:50px;margin-top:18px;font-size:16px;font-weight:800}.copy-toast{z-index:60;color:#fff;text-align:center;background:#13438ff5;border-radius:999px;max-width:min(92vw,360px);padding:12px 16px;font-size:13px;font-weight:700;line-height:1.3;position:fixed;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #13438f3d}.status-card,.success-card{text-align:center;background:#fffffff7;border-radius:28px;width:min(92vw,520px);box-shadow:0 24px 54px #0f172a24}.status-card{padding:30px 28px}.status-card__icon,.success-card__mark-check{color:#fff;background:linear-gradient(#194e9f,#113f82);border-radius:999px;place-items:center;width:78px;height:78px;font-size:40px;font-weight:800;display:grid}.status-card__spinner{border:4px solid #113f8224;border-top-color:#113f82;border-radius:999px;width:52px;height:52px;margin:0 auto 18px;animation:.9s linear infinite spin}.status-card h1,.success-card h1{color:#143055;margin:0;font-size:30px;font-weight:800}.status-card p{color:#67798f;margin:12px 0 0;line-height:1.55}.success-card{padding:0;overflow:hidden}.success-card__brand{border-bottom:1px solid var(--card-border);background:#fff;justify-content:center;padding:24px 24px 18px;display:flex}.success-card__brand-image{object-fit:contain;width:min(100%,220px)}.success-card__mark{width:92px;height:92px;margin:22px auto 10px;position:relative}.success-card__mark-ring{background:radial-gradient(circle at top,#daffe7e6,#f0faffeb);border:2px solid #37b36e52;border-radius:999px;position:absolute;inset:9px}.success-card__mark-check{box-shadow:none;background:linear-gradient(#2cbc73,#239864);margin:auto;position:absolute;inset:0}.success-card h1{margin-top:4px;font-size:22px}.success-card__amount{margin-top:14px;padding:0 24px}.success-card__amount strong{color:#143055;font-size:42px;line-height:1.05;display:block}.success-card__amount span{color:#6b7d92;margin-top:10px;font-size:16px;font-weight:600;display:block}.success-card__sheet{text-align:left;background:#fff;border:1px solid #dfe8f0f2;border-radius:24px;margin:22px 18px 0;padding:18px 18px 10px;box-shadow:0 10px 24px #0f172a0f}.success-card__detail-list{text-align:left;margin-top:0}.success-card__detail-list div{border-bottom:1px solid #dde5effa;grid-template-columns:150px minmax(0,1fr);align-items:start;gap:16px;padding:14px 0;display:grid}.success-card__detail-list div:last-child{border-bottom:0}.success-card__detail-list span{color:#6b7d92;line-height:1.6}.success-card__detail-list strong{color:#153152;text-align:left;overflow-wrap:anywhere;line-height:1.55}.success-card__actions{grid-template-columns:1fr;gap:14px;padding:22px 18px 24px;display:grid}.success-card__home{width:100%;height:52px;box-shadow:none;color:#fff;background:#215aa3;border:1px solid #215aa3;border-radius:10px;margin-top:0;font-size:17px;font-weight:800}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=640px){.page-shell{padding:12px 8px 28px}.vietqr-card{border-radius:22px}.vietqr-card__panel{padding:18px 16px}.vietqr-card__instruction{font-size:16px}.vietqr-card__panel--headline{padding-bottom:14px}.vietqr-card__timer strong{font-size:25px}.vietqr-card__qr-image{width:min(100%,286px)}.vietqr-card__amount-block{margin-top:14px}.vietqr-card__amount-value{margin-top:8px;font-size:30px}.vietqr-card__amount-words{margin-top:8px;font-size:13px}.vietqr-card__panel--details{gap:8px;padding-top:14px}.detail-row{grid-template-columns:1fr;gap:8px;padding:10px 0}.detail-row button{width:100%;height:38px;font-size:13px}.vietqr-card__confirm{border-radius:8px;height:50px;font-size:16px}.success-card__brand{padding:20px 18px 16px}.success-card__mark{width:84px;height:84px;margin-top:20px}.success-card h1{font-size:20px}.success-card__amount{padding:0 18px}.success-card__amount strong{font-size:34px}.success-card__amount span{font-size:14px}.success-card__sheet{border-radius:20px;margin:18px 12px 0;padding:14px 14px 8px}.success-card__detail-list div{grid-template-columns:1fr;gap:6px;padding:12px 0}.success-card__actions{grid-template-columns:1fr;gap:10px;padding:18px 12px 20px}.success-card__home{border-radius:8px;height:50px;font-size:16px}.footer-strip{text-align:center;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.footer-pill{border-radius:16px;gap:8px;min-height:50px;padding:0 12px}.footer-pill:before{border-radius:15px}.footer-pill__icon{width:21px;height:21px}.footer-pill__label{font-size:11px}}

/* Footer pill refinement: cleaner bottom trust badges without touching checkout logic. */
.vietqr-card__panel--footer{
  background:linear-gradient(180deg,#edf4fb 0%,#d9e7f5 100%);
  padding:14px 12px 12px;
  box-shadow:inset 0 1px rgba(255,255,255,.92);
}
.vietqr-card__panel--footer:before{
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2),rgba(255,255,255,0));
}
.footer-strip{
  gap:10px;
}
.footer-pill{
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:0 10px;
  border-radius:15px;
  border:1px solid rgba(91,119,166,.28);
  box-shadow:0 6px 14px rgba(17,39,73,.12),inset 0 1px rgba(255,255,255,.82);
}
.footer-pill:before{
  inset:1px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.12));
}
.footer-pill:after{
  height:3px;
  opacity:.88;
}
.footer-pill--safe{
  background:linear-gradient(180deg,#e8f1ff 0%,#cfdfff 100%);
  border-color:rgba(64,111,186,.42);
}
.footer-pill--safe:after{
  background:linear-gradient(90deg,#5b8ee9 0%,#2d67c6 100%);
}
.footer-pill--napas{
  background:linear-gradient(180deg,#edeaff 0%,#d9d7ff 100%);
  border-color:rgba(88,96,195,.42);
}
.footer-pill--napas:after{
  background:linear-gradient(90deg,#6b7af0 0%,#4e59c8 100%);
}
.footer-pill--vietqr{
  background:linear-gradient(180deg,#e8f7ff 0%,#d2f0ff 100%);
  border-color:rgba(48,142,183,.42);
}
.footer-pill--vietqr:after{
  background:linear-gradient(90deg,#57b9df 0%,#2e92b9 100%);
}
.footer-pill__icon{
  width:22px;
  height:22px;
  border:0;
  background:rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(20,47,87,.14);
}
.footer-pill__label{
  font-size:11px;
  font-weight:800;
  letter-spacing:0;
  text-shadow:none;
}
.footer-pill__icon--shield:before{
  inset:1px 3px 2px;
  border-width:1.6px;
  border-radius:4px 4px 7px 7px;
}
.footer-pill__icon--dot:before{
  width:5px;
  height:5px;
  top:4px;
  left:2px;
  box-shadow:7px 0 0 currentColor;
}
.footer-pill__icon--dot:after{
  width:14px;
  height:2px;
  top:9px;
  left:4px;
  opacity:.34;
}
.footer-pill__icon--spark:before{
  width:3px;
  height:12px;
}
.footer-pill__icon--spark:after{
  width:12px;
  height:3px;
}
@media (width<=640px){
  .vietqr-card__panel--footer{
    padding:12px 10px 10px;
  }
  .footer-strip{
    gap:8px;
  }
  .footer-pill{
    min-height:46px;
    padding:0 8px;
    border-radius:13px;
  }
  .footer-pill:before{
    border-radius:12px;
  }
  .footer-pill__icon{
    width:20px;
    height:20px;
  }
  .footer-pill__label{
    font-size:10.5px;
  }
}