/* UTIL-010 Tạo mã QR — bổ sung cho bộ UI utilities.css. Font kế thừa Arial; không ghi đè FontAwesome. */
.qrg{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.qrg>*{min-width:0}
.sou-page .qrg-heading{font-size:17px;margin:0 0 10px}
.qrg-types{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:2px}
.qrg-types [role=tab]{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--sou-line);border-radius:999px;background:var(--sou-soft);color:var(--sou-ink);font:700 14px Arial,"Helvetica Neue",Helvetica,sans-serif;white-space:nowrap;cursor:pointer}
.qrg-types [role=tab][aria-selected=true]{background:var(--sou-primary);border-color:var(--sou-primary);color:#fff}
.qrg-types [role=tab]:hover{border-color:#9db6f3}
.qrg-panel{margin:0 0 4px}
.qrg output{display:inline;padding:0;font:inherit;color:inherit}
.qrg-short{min-height:96px!important}
.qrg-inline,.qrg-color{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qrg-inline input{flex:1 1 160px;min-width:0}
.qrg-inline .sou-button{flex:none;min-height:46px;padding:8px 14px;font-size:15px}
.qrg-color input[type=text]{flex:1 1 90px;min-width:0;text-transform:lowercase}
.qrg-inline .sou-field-error,.qrg-color .sou-field-error{flex-basis:100%;order:3;margin-top:0}
.sou-row>.sou-field.qrg-cc{flex:0 1 190px}
.qrg-conflict p{margin:0 0 10px}
.qrg-conflict .sou-actions{margin:0}
.qrg-note{margin:8px 0 0;font-size:14px;color:var(--sou-muted);min-height:1px}
.qrg-main-actions{margin:18px 0 0}
.qrg-output{padding:18px;border:1px solid var(--sou-line);border-radius:16px;background:#f7f9fd}
.qrg-preview{position:relative;display:flex;align-items:center;justify-content:center;min-height:220px;padding:16px;border-radius:14px;border:1px solid var(--sou-line);background:repeating-conic-gradient(#eef1f7 0% 25%,#fff 0% 50%) 50%/20px 20px}
.qrg-canvas{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:1/1}
.qrg-empty{margin:0;max-width:260px;text-align:center;color:var(--sou-muted);font-weight:700}
.qrg-preview.is-stale .qrg-canvas{opacity:.25}
.qrg-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)}
.qrg-badge{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;padding:6px 14px;border-radius:999px;font-weight:700;font-size:14px}
.qrg-badge.good{background:var(--sou-ok-bg);color:var(--sou-ok)}
.qrg-badge.warn{background:var(--sou-warn-bg);color:var(--sou-warn)}
.qrg-notes{margin:10px 0 0;padding-left:20px;font-size:14px;color:var(--sou-text)}
.qrg-notes li{margin:4px 0}
.qrg-verify.ok{color:var(--sou-ok);font-weight:700}
.qrg-verify.warn{color:var(--sou-warn);font-weight:700}
.qrg-meta{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:6px 12px;margin:14px 0 0;font-size:14px}
.qrg-meta dt{color:var(--sou-muted)}
.qrg-meta dd{margin:0;color:var(--sou-ink);font-weight:700;overflow-wrap:anywhere}
.qrg-tools .sou-button[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.qrg-device{margin:14px 0 0;font-size:14px;font-weight:700;color:var(--sou-ok)}
.qrg-settings{border:1px solid var(--sou-line);border-radius:16px;background:#fbfcff}
.qrg-settings>summary{min-height:48px;padding:13px 16px;font-weight:700;color:var(--sou-ink);cursor:pointer}
.qrg-settings>summary:focus-visible{outline:2px solid #3869ed;outline-offset:2px;border-radius:16px}
.qrg-settings-body{padding:4px 16px 16px}
.qrg-fieldset{border:0;padding:0;margin:0 0 14px;min-width:0}
.qrg-fieldset .sou-presets{margin:0}
.qrg-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}
.qrg-radio input{width:18px;height:18px;margin:0;accent-color:var(--sou-primary)}
.qrg-radio:has(input:checked){border-color:var(--sou-primary);background:#e8efff}
.qrg-radio:focus-within{outline:2px solid #3869ed;outline-offset:2px}
.qrg-logo-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qrg-file{position:relative;overflow:hidden}
.qrg-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.qrg-file:focus-within{outline:2px solid #3869ed;outline-offset:2px}
.qrg-logo-thumb{width:46px;height:46px;object-fit:contain;border:1px solid var(--sou-line);border-radius:10px;background:#fff}
.qrg-print{display:none}
@media(min-width:861px){
 .qrg{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"form output" "settings output";align-items:start;column-gap:24px}
 .qrg-form{grid-area:form}
 .qrg-output{grid-area:output;position:sticky;top:16px}
 .qrg-settings{grid-area:settings}
}
@media(max-width:600px){
 .qrg-types{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:2px 2px 8px}
 .qrg-types [role=tab]{scroll-snap-align:start}
 .qrg-output{padding:14px}
 .qrg-tools .sou-button{flex:1 1 calc(50% - 8px)}
 .qrg-main-actions .sou-button{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.qrg *{transition:none!important;scroll-behavior:auto!important}}
@media print{
 html.qrg-printing body>*:not(.qrg-print){display:none!important}
 html.qrg-printing body{background:#fff!important;margin:0!important}
 html.qrg-printing .qrg-print{display:flex!important;justify-content:center;padding-top:15mm}
 html.qrg-printing .qrg-print img{width:80mm;height:80mm}
}