/* vi/nap-widget.css — khối "nạp điểm" DÙNG CHUNG cho trang Ví (vi/index.php) và cửa sổ nổi "thiếu điểm"
   ở trang ướm thử (uom-thu/index.php). Chỉ dùng các biến màu --ground/--panel/.../--danger đã có sẵn
   ở CẢ HAI trang gọi nó (không dùng biến --radius-* vì uom-thu không khai báo biến đó). */
/* VIEC-045: số mốc do API quyết (4 mốc 50/100/200/500 nghìn từ 30/09) — cột tự xếp theo số mốc, không khoá 3 cột */
.vinap-moc { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 4px; }
@media (max-width: 420px) { .vinap-moc { grid-template-columns: 1fr 1fr; } }
.vinap-moc .moc-btn { background: var(--panel-2); border: 1.5px solid var(--border-soft); border-radius: 12px; padding: 12px 6px; cursor: pointer; color: var(--ink); font-family: inherit; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.vinap-moc .moc-btn b { font-size: .92rem; }
.vinap-moc .moc-btn span { font-size: .68rem; color: var(--ink-faint); }
.vinap-moc .moc-btn.selected { border-color: var(--amber); background: rgba(229, 161, 58, .1); }

.vinap-khac-row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.vinap-khac-row input { flex: 1; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 11px 13px; color: var(--ink); font-family: inherit; font-size: .9rem; }
.vinap-khac-row input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.vinap-khac-err { font-size: .78rem; color: #f0b3a4; margin-top: 6px; display: none; }
.vinap-khac-err.show { display: block; }

.vinap-han-dung { background: rgba(229, 161, 58, .08); border: 1px solid rgba(229, 161, 58, .35); border-radius: 12px; padding: 11px 13px; font-size: .82rem; line-height: 1.55; color: var(--ink); margin-top: 14px; }
.vinap-han-dung b { color: var(--amber); }

.vinap-chk-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; cursor: pointer; }
.vinap-chk-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--amber); flex-shrink: 0; }
.vinap-chk-row span { font-size: .82rem; line-height: 1.5; color: var(--ink-dim); }
.vinap-chk-row a { color: var(--amber); }

.vinap-qr-wrap { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.vinap-qr-img { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 8px; }
.vinap-qr-info { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.vinap-qr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; }
.vinap-k { font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.vinap-v { font-weight: 700; font-size: .95rem; }
.vinap-copy-btn { background: var(--panel); border: 1px solid var(--border-soft); color: var(--ink-dim); font-family: inherit; font-size: .72rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.vinap-copy-btn:hover { border-color: var(--amber); color: var(--amber); }
.vinap-copy-btn.done { color: var(--teal); border-color: var(--teal); }
.vinap-cho-nhan { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink-dim); margin-top: 4px; }
.vinap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(229, 161, 58, .6); animation: vinapPulse 1.8s infinite; }
@keyframes vinapPulse { 0% { box-shadow: 0 0 0 0 rgba(229, 161, 58, .55); } 70% { box-shadow: 0 0 0 8px rgba(229, 161, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 161, 58, 0); } }
.vinap-nhan-banner { background: rgba(74, 168, 159, .14); border: 1px solid rgba(74, 168, 159, .5); border-radius: 12px; padding: 11px 13px; font-size: .86rem; color: var(--ink); margin-top: 10px; display: none; }
.vinap-nhan-banner.show { display: block; }
.vinap-nhan-banner b { color: var(--teal); }

/* Bẫy CSS đã bắt được khi thử K2 (VIEC-016, 21/09/2026): thuộc tính HTML `hidden` chỉ ẩn được nhờ luật
   mặc định của trình duyệt `[hidden]{display:none}` (KHÔNG có !important) — một luật `display:flex`
   trên CÙNG selector lớp (độ ưu tiên bằng nhau) đứng SAU trong cascade sẽ thắng và làm `hidden` vô tác
   dụng. Trang gọi widget này có thể không tự có sẵn lớp phòng vệ `[hidden]{display:none!important}`
   (index.php và vi/index.php có, uom-thu/index.php thì KHÔNG) — nên bản thân file này phải tự đủ, không
   dựa vào trang gọi. `.vinap-qr-wrap[hidden]` có độ ưu tiên cao hơn `.vinap-qr-wrap` nên luôn thắng, bất
   kể thứ tự nạp CSS. */
.vinap-qr-wrap[hidden] { display: none; }