/* UTIL-011 Tạo VietQR chuyển khoản — bổ sung cho bộ UI utilities.css. Font kế thừa Arial; không ghi đè FontAwesome. */
.vqr{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.vqr>*{min-width:0}
.sou-page .vqr-heading{font-size:17px;margin:0 0 12px}
.sou-page .vqr input[type=search]{width:100%;min-height:46px;padding:10px 12px;border:1px solid #cfdcf2;border-radius:10px;background:#fff;font:inherit;font-size:16px;color:var(--sou-text);-webkit-appearance:none;appearance:none}
.sou-row>.sou-field.vqr-kind{flex:0 1 200px}
.vqr-fieldset{border:0;padding:0;margin:0 0 6px;min-width:0}
.vqr-fieldset .sou-presets{margin:0}
.vqr-radio{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;border:1px solid var(--sou-line);border-radius:999px;background:var(--sou-soft);color:var(--sou-ink);font-weight:700;font-size:14px;cursor:pointer}
.vqr-radio input{width:18px;height:18px;margin:0;accent-color:var(--sou-primary)}
.vqr-radio:has(input:checked){border-color:var(--sou-primary);background:#e8efff}
.vqr-radio:focus-within{outline:2px solid #3869ed;outline-offset:2px}
.vqr-main-actions{margin:16px 0 0}
.vqr-output{padding:18px;border:1px solid var(--sou-line);border-radius:16px;background:#f7f9fd}
.vqr-warning{margin:0 0 12px;font-size:15px}
.vqr-preview{position:relative;display:flex;align-items:center;justify-content:center;min-height:240px;padding:16px;border-radius:14px;border:1px solid var(--sou-line);background:#fff}
.vqr-canvas{display:block;width:100%;max-width:340px;height:auto;border-radius:10px;box-shadow:0 6px 20px rgba(16,36,94,.08)}
.vqr-empty{margin:0;max-width:260px;text-align:center;color:var(--sou-muted);font-weight:700}
.vqr-preview.is-stale .vqr-canvas{opacity:.25}
.vqr-stale{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);margin:0;padding:12px;border-radius:12px;background:#fff;border:1px solid #f0d39a;color:var(--sou-warn);font-weight:700;text-align:center;box-shadow:0 6px 18px rgba(16,36,94,.08)}
.vqr-mask-note{margin:10px 0 0;font-size:14px;color:var(--sou-muted)}
.vqr-mask-note .fa{margin-right:4px}
.vqr-check{margin:12px 0 0;font-size:14px;color:var(--sou-text)}
.vqr-check.ok{color:var(--sou-ok);font-weight:700}
.vqr-check.warn{color:var(--sou-err);font-weight:700}
.vqr-summary{display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:8px 12px;margin:14px 0 0;font-size:15px;align-items:baseline}
.vqr-summary dt{color:var(--sou-muted)}
.vqr-summary dd{margin:0;color:var(--sou-ink);font-weight:700;overflow-wrap:anywhere}
.vqr-summary .sou-link-button{min-height:44px;font-size:14px;vertical-align:baseline}
.vqr-unverified{display:block;margin-top:2px;color:var(--sou-warn);font-weight:700;font-size:13px}
.vqr-notes{margin:10px 0 0;padding-left:20px;font-size:14px}
.vqr-notes li{margin:4px 0}
.vqr-tools .sou-button[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.vqr-disclaimer{margin:14px 0 0;font-size:14px;color:var(--sou-muted)}
.vqr-print{display:none}
@media(min-width:861px){
 .vqr{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;column-gap:24px}
 .vqr-output{position:sticky;top:16px}
}
@media(max-width:600px){
 .vqr-output{padding:14px}
 .vqr-tools .sou-button{flex:1 1 calc(50% - 8px)}
 .vqr-main-actions .sou-button,.vqr-tools .sou-button.vqr-primary{flex:1 1 100%}
 .vqr-summary{grid-template-columns:1fr;gap:2px}
 .vqr-summary dd{margin-bottom:8px}
}
@media(prefers-reduced-motion:reduce){.vqr *{transition:none!important;scroll-behavior:auto!important}}
@media print{
 html.vqr-printing body>*:not(.vqr-print){display:none!important}
 html.vqr-printing body{background:#fff!important;margin:0!important}
 html.vqr-printing .vqr-print{display:flex!important;justify-content:center;padding-top:10mm}
 html.vqr-printing .vqr-print img{width:100mm;height:auto}
 html.vqr-printing .vqr-print.is-compact img{width:70mm}
}
