/* ==========================================================================================================
   POPUP UNIFY — 28/09/2026, chủ web: "rà bên user.mu.world, thống nhất toàn bộ thông báo, popup theo chung 1 style".
   Nạp CUỐI vỏ V2 (empire-v2-index.tpl, sau member-standard/captcha) → đè các biến thể riêng của trang về đúng hợp đồng
   popup trong shared-ui.css (hộp #1b2227 viền #9b7e50 bo 10 / tấm đáy 13px 13px 0 0 ở dọc ≤700px; X mảnh vàng 40px;
   nút chính vàng chuyển sắc, nút phụ #292f31 viền #665438, bo 6; thông báo = .mu-v2-notice viền trái 3px).
   Mọi luật mở đầu bằng "html body[data-mu-preview]" (+1 phần tử) để thắng luật trang cùng độ ưu tiên mà không cần sửa file
   của nhóm khác (Chợ / Chợ nhân vật / Sàn / Nạp đang có phiên khác làm). GỠ = xoá 1 dòng <link> trong empire-v2-index.tpl.
   Phần JS đi kèm: popup-gesture.js (Swal.fire gọi thẳng → lớp swal-neo; SPAY.confirm/data-confirm → muV2.confirm).
   Trang NẠP là mẫu của chủ web (VietQR) nên ở đó CHỈ sửa lỗi rõ: X Tazapay bị đảo màu, nền mờ iOS.
   ========================================================================================================== */

/* ---------- 1. Modal Bootstrap ngoài #modal-popup (vd. Tazapay #enteremail): đầu/chân trong suốt + X mảnh vàng ---------- */
html body[data-mu-preview] .modal:not(#modal-popup) :is(.modal-header, .modal-footer) { background: transparent !important; border-color: #3a3f45 !important; }
html body[data-mu-preview] .modal .btn-close,
html body[data-mu-preview] #index_content.mu-tazapay-page #enteremail .btn-close {
  position: relative !important; flex: none; width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important;
  margin: 0 0 0 auto !important; opacity: 1 !important; filter: none !important; background: #2b302e none !important;
  border: 1px solid #796444 !important; border-radius: 7px !important; box-shadow: none !important; cursor: pointer;
}
html body[data-mu-preview] .modal .btn-close::before, html body[data-mu-preview] .modal .btn-close::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 2px; background: #e7c78d;
  transform: translate(-50%, -50%) rotate(45deg);
}
html body[data-mu-preview] .modal .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
html body[data-mu-preview] .modal .btn-close:is(:hover, :focus-visible) { border-color: var(--mu-popup-gold) !important; background-color: #3b3326 !important; }

/* ---------- 2. Thành phần V1 lọt vào popup gắn ở body (legacy-shell: nút xanh #3b82f6 bo 14, thẻ kính trắng mờ) ---------- */
html body[data-mu-preview] :is(.mu-v2-popup-layer, .mu-dialog-layer, .modal, .swal2-container) .btn-primary {
  border: 1px solid #f0d5a0 !important; border-radius: 6px !important; background: linear-gradient(110deg, #f2d7a2, #c9a468) !important;
  color: #251d12 !important; box-shadow: none !important; font-family: var(--mu-font-body) !important; letter-spacing: 0 !important;
}
html body[data-mu-preview] :is(.mu-v2-popup-layer, .mu-dialog-layer, .modal, .swal2-container) .btn:not(.btn-primary):not(.btn-close):not(.nav-btn) {
  border-radius: 6px !important; font-family: var(--mu-font-body) !important; letter-spacing: 0 !important;
}
html body[data-mu-preview] :is(.mu-v2-popup-layer, .mu-dialog-layer, .modal, .swal2-container) :is(.list-group-item, .box, .panel, .card) {
  background: #1a2026 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid #3a3f45 !important; border-radius: 7px !important; box-shadow: none !important; color: var(--mu-popup-text);
}

/* ---------- 3. Hộp .alert bên trong popup/tấm/SweetAlert (shared-ui chỉ tô trong #index_content) = .mu-v2-notice ---------- */
html body[data-mu-preview] :is(.mu-v2-popup-layer, .mu-dialog-layer, .swal2-container) .alert {
  --mu-notice-accent: var(--mu-popup-border);
  margin: 0 0 10px !important; padding: 10px 12px !important; border: 1px solid #3a3f45 !important;
  border-left: 3px solid var(--mu-notice-accent) !important; border-radius: 7px !important; background: #1a2026 !important;
  color: #eee7d8 !important; font: 400 13px/1.5 var(--mu-font-body) !important; text-align: left; box-shadow: none !important;
}
html body[data-mu-preview] :is(.mu-v2-popup-layer, .mu-dialog-layer, .swal2-container) .alert-success { --mu-notice-accent: #5f9a72; }
html body[data-mu-preview] :is(.mu-v2-popup-layer, .mu-dialog-layer, .swal2-container) .alert-danger { --mu-notice-accent: var(--mu-danger); }
html body[data-mu-preview] :is(.mu-v2-popup-layer, .mu-dialog-layer, .swal2-container) .alert-warning { --mu-notice-accent: #d5b77a; }
/* Trang Tài khoản: .alert-info đang viền xanh #7ea3c4 (account.css) — V2 không dùng xanh */
html body[data-mu-preview] #index_content .alert-info { --mu-notice-accent: var(--mu-popup-border) !important; }

/* ---------- 4. Chợ vật phẩm — popup mua (#modal-popup.mk-shop-popup): bo 14/16 → 10/13, đầu/chân cùng nền hộp ---------- */
html body[data-mu-preview][data-mu-page="mall-shop"] #modal-popup.mk-shop-popup .modal-content { border-radius: 10px !important; }
html body[data-mu-preview][data-mu-page="mall-shop"] #modal-popup.mk-shop-popup .mkb-hd { background: transparent !important; border-bottom: 1px solid #3a3f45 !important; }
html body[data-mu-preview][data-mu-page="mall-shop"] #modal-popup.mk-shop-popup .mkb-form { background: var(--mu-popup-bg) !important; border-top-color: #3a3f45 !important; }
html body[data-mu-preview][data-mu-page="mall-shop"] #modal-popup.mk-shop-popup .mkb-submit-wrap .mk-r-cancel {
  border: 1px solid #665438 !important; border-radius: 6px !important; background: #292f31 !important; color: var(--mu-popup-text) !important;
}
@media (max-width: 700px) and (orientation: portrait) {
  html body[data-mu-preview][data-mu-page="mall-shop"] #modal-popup.mk-shop-popup .modal-content { border-radius: 13px 13px 0 0 !important; }
}

/* ---------- 5. Chợ nhân vật — popup mua (#modal-popup.mu-cm-buy): viền/nền/bo về token ---------- */
html body[data-mu-preview][data-mu-page="mall-shopchar"] #modal-popup.mu-cm-buy .modal-content {
  border-color: var(--mu-popup-border) !important; border-radius: 10px !important; background: var(--mu-popup-bg) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55) !important;
}
@media (max-width: 700px) and (orientation: portrait) {
  html body[data-mu-preview][data-mu-page="mall-shopchar"] #modal-popup.mu-cm-buy .modal-content { border-radius: 13px 13px 0 0 !important; }
}

/* ---------- 6. Chọn nhân vật / lớp / vật phẩm (Chợ nhân vật, đăng bán): hộp + X mảnh ---------- */
html body[data-mu-preview] :is(.sc-class-dialog, .sc-rules-dialog, .sc-picker-dialog, .scbp-charpicker-dialog, .scbp-carry-dialog, .scbp-item-dialog) {
  border-color: var(--mu-popup-border) !important; border-radius: 10px !important; background: var(--mu-popup-bg) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55) !important;
}
html body[data-mu-preview] :is(.sc-class-close, .sc-rules-close, .sc-picker-close, .scbp-charpicker-close, .scbp-carry-close, .scbp-item-close, .scbp-top-close) {
  position: relative !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important;
  border: 1px solid #796444 !important; border-radius: 7px !important; background: #2b302e !important; color: var(--mu-popup-gold) !important;
  font-size: 0 !important; line-height: 0 !important; box-shadow: none !important;
}
html body[data-mu-preview] :is(.sc-class-close, .sc-rules-close, .sc-picker-close, .scbp-charpicker-close, .scbp-carry-close, .scbp-item-close, .scbp-top-close) :is(i, svg) { display: none !important; }
html body[data-mu-preview] :is(.sc-class-close, .sc-rules-close, .sc-picker-close, .scbp-charpicker-close, .scbp-carry-close, .scbp-item-close, .scbp-top-close)::before,
html body[data-mu-preview] :is(.sc-class-close, .sc-rules-close, .sc-picker-close, .scbp-charpicker-close, .scbp-carry-close, .scbp-item-close, .scbp-top-close)::after {
  content: '' !important; position: absolute !important; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 2px; background: #e7c78d !important;
  transform: translate(-50%, -50%) rotate(45deg);
}
html body[data-mu-preview] :is(.sc-class-close, .sc-rules-close, .sc-picker-close, .scbp-charpicker-close, .scbp-carry-close, .scbp-item-close, .scbp-top-close)::after { transform: translate(-50%, -50%) rotate(-45deg); }
html body[data-mu-preview] .scbp-alert {
  border: 1px solid #3a3f45 !important; border-left: 3px solid #d5b77a !important; border-radius: 7px !important; background: #1a2026 !important; color: #eee7d8 !important;
}
@media (max-width: 700px) and (orientation: portrait) {
  html body[data-mu-preview] :is(.sc-class-dialog, .sc-rules-dialog, .sc-picker-dialog, .scbp-charpicker-dialog, .scbp-carry-dialog, .scbp-item-dialog) { border-radius: 13px 13px 0 0 !important; }
}

/* ---------- 7. Sàn chứng khoán (gem.css): ô thông báo có viền trái theo loại, lỗi màu đỏ trầm; nút đóng lệnh = nút nguy hiểm V2 ---------- */
html body[data-mu-preview] .smk-page :is(.smt-calc-result .alert, .smt-notice, .smt-err) {
  border: 1px solid #3a3f45 !important; border-left: 3px solid var(--mu-popup-border) !important; border-radius: 7px !important; background: #1a2026 !important; color: #eee7d8 !important;
}
html body[data-mu-preview] .smk-page .smt-err { border-left-color: var(--mu-danger) !important; }
html body[data-mu-preview] .smk-page .smt-btn { border-radius: 6px !important; background: linear-gradient(110deg, #f2d7a2, #c9a468) !important; border-color: #f0d5a0 !important; }
html body[data-mu-preview] .smk-page .smt-btn-close { border-color: var(--mu-danger) !important; background: rgba(180, 82, 82, .16) !important; color: #f3d9d9 !important; }

/* ---------- 8. Lỗi rõ ở trang NẠP (giữ thiết kế của chủ web, chỉ sửa lỗi) ---------- */
/* nền mờ 3px vẫn còn trên Safari iOS (recharge-channels chỉ tắt bản không tiền tố) — hợp đồng V2 là KHÔNG mờ */
html body[data-mu-preview] #index_content .rc-neo :is(.rc-lucky-modal, .rc-server-modal, .vq-overlay) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* (X Tazapay #enteremail bị filter:invert thành ô xám sáng → mục 1) */

/* ---------- 9. Nhóm/bang hội: cảnh báo trong popup đúng nền thông báo ---------- */
html body[data-mu-preview] #modal-popup .bfd-warn { background: #1a2026 !important; }

/* ---------- 10. Chợ vật phẩm: gợi ý "đồ của tôi" dùng đúng màu cảnh báo của thông báo V2 ---------- */
html body[data-mu-preview] .mk-v2-mine-hint { --mu-notice-accent: #d5b77a !important; }

/* ---------- 11. Nạp tiền — nhắc "nạp vào Ví gia đình" (recharge/_fw_notice.tpl, style viết thẳng xanh lá nền sáng V1) = .mu-v2-notice.is-success ---------- */
html body[data-mu-preview] .mu-fw-notice {
  display: block; margin: 0 0 12px !important; padding: 10px 12px !important; border: 1px solid #3a3f45 !important; border-left: 3px solid #5f9a72 !important;
  border-radius: 7px !important; background: #1a2026 !important; color: #eee7d8 !important; font: 500 13px/1.5 var(--mu-font-body) !important;
}
html body[data-mu-preview] .mu-fw-notice > i { color: #5f9a72; margin-right: 4px; }
html body[data-mu-preview] .mu-fw-notice a { color: var(--mu-popup-gold) !important; font-weight: 700 !important; text-decoration: underline; text-underline-offset: 2px; }