/* Nút dùng chung cho QR / Mở rộng (create page + decode page) */
.btn-copy { background: #f0fafe; border: 1px solid #b8e4f5; color: #019acc; padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.btn-copy:hover { background: #d8f0fa; }
.btn-copy.copied { background: #e6f9ef; border-color: #a8dfc4; color: #1a8a50; }
.btn-qr { background: #f5f0ff; border: 1px solid #c8aaff; color: #6c3fff; width: 36px; height: 36px; padding: 0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; }
.btn-qr:hover { background: #e8dcff; }
.btn-expand { background: #fff6e8; border: 1px solid #f5cf87; color: #b8790a; width: 36px; height: 36px; padding: 0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; }
.btn-expand:hover { background: #ffecc7; }

/* QR Modal */
.qr-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; align-items: center; justify-content: center; }
.qr-overlay.show { display: flex; }
.qr-modal { background: #fff; border-radius: 16px; padding: 32px 28px 24px; text-align: center; max-width: 320px; width: 90%; position: relative; }
.qr-close { position: absolute; top: 12px; right: 16px; font-size: 22px; cursor: pointer; color: #999; border: none; background: none; line-height: 1; }
.qr-close:hover { color: #333; }
.qr-canvas-wrap { display: inline-block; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.1); margin-bottom: 14px; }
.qr-code-text { font-size: 22px; font-weight: 700; color: #019acc; letter-spacing: 6px; margin-bottom: 6px; }
.qr-domain { font-size: 11px; color: #bbb; margin-bottom: 18px; }
.btn-save-qr { background: #019acc; color: #fff; border: none; border-radius: 8px; padding: 11px 28px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-save-qr:hover { background: #0180a8; }

.btn-upload-sp { background: #036ac4; color: #fff; border: none; border-radius: 8px; padding: 11px 20px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-upload-sp:hover { background: #024e91; }
.btn-upload-sp:disabled { opacity: 0.6; cursor: default; }

/* Approve + Expand Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.show { display: flex; }
.modal-box { background: #fff; border-radius: 16px; padding: 28px; text-align: center; max-width: 380px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; }
.modal-box.wide { max-width: 620px; }
.modal-close { position: absolute; top: 12px; right: 16px; font-size: 22px; cursor: pointer; color: #999; border: none; background: none; line-height: 1; }
.modal-close:hover { color: #333; }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.modal-sub { font-size: 13px; color: #999; margin-bottom: 20px; }
.approve-input { width: 100%; text-align: center; font-size: 22px; letter-spacing: 4px; font-weight: 700; border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 12px; outline: none; margin-bottom: 14px; }
.approve-input:focus { border-color: #019acc; }
.btn-approve-submit { background: #019acc; color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
.btn-approve-submit:hover { background: #0180a8; }
.modal-error { color: #c0392b; font-size: 13px; margin-top: 10px; display: none; }
.modal-error.show { display: block; }

.source-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.source-tab { flex: 1; padding: 10px 6px; border: 1.5px solid #e0e0e0; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; color: #888; cursor: pointer; transition: all 0.15s; }
.source-tab.active { border-color: #019acc; background: #f0fafe; color: #019acc; }
.expand-input-row { text-align: left; margin-bottom: 16px; }
.expand-input-row label { display: block; font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 600; }
.expand-input-row input { width: 100%; border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 12px 14px; font-size: 14px; outline: none; }
.expand-input-row input:focus { border-color: #019acc; }
.expand-canvas-wrap { max-width: 100%; overflow-x: auto; margin-bottom: 16px; border-radius: 10px; }
.expand-canvas-wrap canvas { max-width: 100%; height: auto; display: block; border-radius: 10px; }
.expand-actions { display: flex; gap: 10px; }
.expand-actions button { flex: 1; }
.btn-secondary { background: #f2f2f2; color: #555; border: none; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-secondary:hover { background: #e6e6e6; }
.expand-loading { font-size: 14px; color: #999; padding: 20px 0; display: none; }
.expand-loading.show { display: block; }