.cbkp-qr[hidden]{display:none}
.cbkp-qr{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}
.cbkp-qr *,.cbkp-qr *::before,.cbkp-qr *::after{box-sizing:border-box}
.cbkp-qr-backdrop{position:absolute;inset:0;background:rgba(10,24,16,.62);backdrop-filter:blur(3px)}
.cbkp-qr-dialog{
	position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;
	padding:24px 22px 20px;border-radius:22px;background:#fff;color:#12301d;text-align:center;outline:0;
	box-shadow:0 30px 70px -20px rgba(0,0,0,.5);animation:cbkp-qr-in .22s ease;
}
@keyframes cbkp-qr-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.cbkp-qr-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:#f1f5f2;color:#44524a;cursor:pointer}
.cbkp-qr-x:hover{background:#e2f0e6}
.cbkp-qr-eyebrow{display:inline-block;padding:3px 12px;border-radius:999px;background:#eaf7ed;color:#1f7f38;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cbkp-qr-dialog h2{margin:10px 0 2px;font-size:1.25rem;font-weight:800;line-height:1.3;color:#12301d}
.cbkp-qr-sub{margin:0 0 14px;color:#68736b;font-size:.88rem;overflow-wrap:anywhere}
.cbkp-qr-stage{position:relative;border:1px solid #dce9df;border-radius:16px;overflow:hidden;background:#fff}
.cbkp-qr-canvas{display:block;width:100%;height:auto;-webkit-touch-callout:default;user-select:none}
.cbkp-qr-loading{position:absolute;inset:0;display:grid;place-items:center;background:#fff;color:#29a349;font-size:1.6rem}
.cbkp-qr-loading[hidden]{display:none}
.cbkp-qr-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.cbkp-qr-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 12px;
	border:1px solid #dce9df;border-radius:12px;background:#fff;color:#12301d;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;
	transition:background .15s,border-color .15s;
}
.cbkp-qr-btn[hidden]{display:none}
.cbkp-qr-btn i{color:#29a349}
.cbkp-qr-btn:hover{background:#eaf7ed;border-color:#29a349}
.cbkp-qr-btn.is-primary{background:#29a349;border-color:#29a349;color:#fff}
.cbkp-qr-btn.is-primary i{color:#fff}
.cbkp-qr-btn.is-primary:hover{background:#1f7f38}
.cbkp-qr-status{min-height:22px;margin:12px 0 0;font-size:.85rem;font-weight:600;color:#1f7f38}
.cbkp-qr-status.is-error{color:#b42318}
html.cbkp-qr-lock{overflow:hidden}

/* Nút mở QR dùng chung (trang không có style riêng) */
.cbkp-qr-trigger{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid #29a349;border-radius:10px;background:#fff;color:#1f7f38;font-weight:700;cursor:pointer}
.cbkp-qr-trigger:hover{background:#eaf7ed}

@media (max-width:480px){
	.cbkp-qr{align-items:flex-end;padding:0}
	.cbkp-qr-dialog{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;padding:22px 16px calc(16px + env(safe-area-inset-bottom))}
	.cbkp-qr-btn{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){.cbkp-qr-dialog{animation:none}}

body.admin-bar .cbkp-qr { top: 32px; }
@media (max-width: 782px) { body.admin-bar .cbkp-qr { top: 46px; } }