/* NX minimal UI (scoped) */
.nx-ui { --bg:#0b0e11; --panel:#1e2329; --border:#2a2e35; --text:#eaecef; --dim:#aeb4bc; --primary:#f0b90b; --danger:#f6465d; }
.nx-container { max-width:1100px; margin:0 auto; padding:16px; }
.nx-container-sm { max-width:720px; margin:16px auto; padding:16px; }
.nx-card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; color:var(--text); margin-bottom:16px; }
.nx-title { margin:0 0 8px; color:var(--text); }
.nx-subtitle { margin:0 0 8px; color:var(--text); font-size:1rem; }
.nx-form { display:grid; gap:10px; }
.nx-form input,.nx-form textarea { background:#0d1115; border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:12px; }
.nx-check { display:flex; align-items:center; gap:8px; color:var(--dim); }
.nx-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border); border-radius:999px; padding:10px 16px; color:var(--text); background:#0d1115; text-decoration:none; cursor:pointer; }
.nx-btn:hover { filter:brightness(1.05); }
.nx-btn-primary { background:var(--primary); color:#111; border-color:transparent; font-weight:600; }
.nx-btn-danger { background:var(--danger); border-color:transparent; color:#fff; }
.nx-alert { background:rgba(240,185,11,.12); border:1px solid #3b2f07; color:var(--primary); padding:10px 12px; border-radius:12px; margin-bottom:8px; }
.nx-meta, .nx-dim { color:var(--dim); font-size:.9rem; }
.nx-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.nx-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 768px){ .nx-grid { grid-template-columns:1fr; } .nx-grid-2 { grid-template-columns:1fr; } }
.nx-stat { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border); }
.nx-progress { height:8px; background:#0d1115; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.nx-bar { height:100%; background:var(--primary); }
.nx-quests .nx-quest-row { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border); }
.nx-quests .nx-quest-label { color:var(--text); }
.nx-list { list-style:none; padding:0; margin:0; }
.nx-list-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px dashed var(--border); }
.nx-list-title { font-weight:600; }
.nx-badge { font-size:12px; padding:2px 8px; background:var(--border); border-radius:6px; color:var(--text); }
.nx-actions { display:flex; gap:8px; }
.nx-hr { border:0; border-top:1px solid var(--border); margin:10px 0; }

.nx-edit-panel textarea{min-height:180px}
.nx-edit-toggle{background:transparent}

.nx-editor .wp-editor-wrap{border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.nx-editor .wp-editor-area{background:#0d1115; color:var(--text);}

/* --- Signal Viewer (Binance style) --- */
.nx-signal-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}
.nx-signal-title{margin:0;color:var(--text);font-size:1.25rem}
.nx-signal-meta{display:flex;gap:8px;align-items:center;color:var(--dim);font-size:.9rem}
.nx-signal-symbol{font-weight:700;color:var(--primary);background:rgba(240,185,11,.12);border:1px solid #3b2f07;padding:4px 10px;border-radius:999px;display:inline-block;margin-bottom:6px}
.nx-signal-kpis{display:flex;gap:12px}
.nx-kpi{background:#0d1115;border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-width:120px}
.nx-kpi-label{color:var(--dim);font-size:.85rem}
.nx-kpi-value{font-weight:700;color:var(--text);font-size:1.05rem}
.nx-signal-body .nx-content{background:#0d1115;border:1px solid var(--border);border-radius:16px;padding:16px;color:var(--text)}
.nx-signal-footer{margin-top:12px}
.nx-badge-dim{background:var(--border);color:var(--text);border-radius:8px;padding:2px 8px;font-size:.75rem}

/* Cards in list */
.nx-signal-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.nx-signal-card-title{font-weight:700;margin:0 0 8px}
.nx-signal-card-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.nx-signal-card-kpis > div{background:#0d1115;border:1px solid var(--border);border-radius:10px;padding:8px}
.nx-signal-card-kpis span{color:var(--dim);font-size:.8rem}


/* Filters */
.nx-filter{margin-bottom:12px}
.nx-filter .nx-form input[type="date"], .nx-filter .nx-form input[type="text"]{height:40px}

/* Mini buttons */
.nx-btn-mini{padding:4px 8px;border-radius:8px;margin-left:6px;font-size:.8rem}

/* KPI flex to fit copy button */
.nx-kpi{display:flex;gap:8px;align-items:center;justify-content:space-between}
.nx-kpi .nx-kpi-value{flex:1}
/* Dễ đọc hơn */
.nx-form input::placeholder,
.nx-form textarea::placeholder { color: var(--dim); opacity: .85; }

/* Disabled rõ ràng */
.nx-btn[disabled],
.nx-form input[disabled],
.nx-form select[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* Trường date/text ở filter cao 40px đã có – thêm width đầy đủ cho ô Symbol */
.nx-filter .nx-form input[type="text"] { width: 100%; }


/* Avatar block (dashboard-aligned) */
.nx-ui .nx-avatar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.nx-ui .nx-avatar-img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--border);background:#0d1115}
.nx-ui .nx-avatar-actions{display:flex;gap:8px;align-items:center}
.nx-ui .nx-hint{margin-top:6px;color:var(--dim);font-size:.8rem}
@media (max-width: 480px){.nx-ui .nx-avatar{flex-direction:column;align-items:center}}


/* Center utility */
.nx-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}


/* === Avatar UI enhancements (scoped) === */
.nx-ui .nx-center .nx-avatar{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.nx-ui .nx-avatar-wrap{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.nx-ui .nx-avatar-lg{width:128px;height:128px}
.nx-ui .nx-avatar-img{box-shadow:0 0 0 3px rgba(255,255,255,.06), 0 10px 20px rgba(0,0,0,.25)}
.nx-ui .nx-avatar-actions{gap:12px}
.nx-ui .nx-avatar-actions .nx-btn{min-width:110px}
.nx-ui .nx-hint{max-width:360px;text-align:center}
@media (max-width: 640px){
  .nx-ui .nx-avatar-lg{width:112px;height:112px}
  .nx-ui .nx-hint{max-width:100%}
}


/* Password field toggle */
.nx-pass-wrap{position:relative;display:flex;align-items:center}
.nx-pass-wrap input{flex:1;padding-right:40px}
.nx-pass-toggle{position:absolute;right:10px;background:transparent;border:0;cursor:pointer;font-size:1rem;color:var(--dim)}
.nx-pass-toggle:hover{color:var(--primary)}


/* === Password toggle & strength meter === */
.nx-pass-wrap{position:relative;display:flex;align-items:center}
.nx-pass-wrap input{flex:1;padding-right:44px}
.nx-pass-toggle{position:absolute;right:10px;background:transparent;border:0;cursor:pointer;font-size:1rem;color:var(--dim)}
.nx-pass-toggle:hover{color:var(--primary)}
.nx-pass-strength{margin:6px 0 12px;font-size:.85rem;color:var(--dim)}
.nx-pass-strength.is-weak{color:#ff6b6b}
.nx-pass-strength.is-medium{color:#f5b342}
.nx-pass-strength.is-strong{color:#39d98a}


/* === Password generator button === */
.nx-pass-generate{position:absolute;right:40px;background:transparent;border:0;cursor:pointer;font-size:1rem;color:var(--dim)}
.nx-pass-generate:hover{color:var(--primary)}


/* === Password copy button === */
.nx-pass-copy{position:absolute;right:70px;background:transparent;border:0;cursor:pointer;font-size:1rem;color:var(--dim)}
.nx-pass-copy:hover{color:var(--primary)}

/* Override để đủ chỗ cho 3 nút (📋 ⚡ 👁) */
.nx-pass-wrap input{padding-right:120px}


/* Field error message */
.nx-field-error{color:#ff6b6b;font-size:.85rem;margin-top:6px;display:block}


/* === Custom Tooltip (nx-tooltip) === */
.nx-tooltip{
  position:absolute;z-index:9999;pointer-events:none;
  background:rgba(0,0,0,.85);color:#fff;
  padding:6px 8px;border-radius:6px;font-size:.85rem;line-height:1.2;
  opacity:0;transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
}
.nx-tooltip.show{opacity:1;transform:translateY(0)}



/* === NX Modal (Popup) === */
.nx-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;opacity:0;transition:opacity .15s ease;z-index:9998;
}
.nx-modal-backdrop.show{display:block;opacity:1}
.nx-modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:9999;pointer-events:none;
}
.nx-modal .nx-modal-content{
  pointer-events:auto;
  min-width:300px;max-width:96%;width:420px;
  background:#0f1217;color:#e6e6e6;border:1px solid var(--border, #222);
  border-radius:12px;padding:16px 16px 12px;box-shadow:0 16px 40px rgba(0,0,0,.35);
  transform:translateY(10px);opacity:0;transition:all .15s ease;
}
.nx-modal.show .nx-modal-content{transform:translateY(0);opacity:1}
.nx-modal-title{font-size:1.05rem;margin:0 0 8px;font-weight:600}
.nx-modal-body{font-size:.95rem;line-height:1.5;margin-bottom:12px}
.nx-modal-actions{display:flex;justify-content:flex-end;gap:8px}
.nx-btn-plain{background:transparent;border:1px solid var(--border,#222);padding:6px 10px;border-radius:8px;cursor:pointer}
.nx-btn-plain:hover{border-color:var(--primary,#63b3ff)}
.nx-modal-badge{display:inline-flex;align-items:center;gap:8px}
.nx-badge-dot{width:8px;height:8px;border-radius:50%}
.nx-type-success .nx-badge-dot{background:#39d98a}
.nx-type-error .nx-badge-dot{background:#ff6b6b}
.nx-type-info .nx-badge-dot{background:#63b3ff}
@media (max-width: 480px){
  .nx-modal .nx-modal-content{width:92%}
}



/* === NX Toast (corner notifications) === */
.nx-toast-container{
  position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;
  z-index:10000;pointer-events:none
}
.nx-toast{
  pointer-events:auto;background:#0f1217;color:#e6e6e6;border:1px solid var(--border,#222);
  border-radius:10px;min-width:280px;max-width:420px;padding:10px 12px;box-shadow:0 14px 34px rgba(0,0,0,.3);
  display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(10px);
  transition:opacity .18s ease, transform .18s ease
}
.nx-toast.show{opacity:1;transform:translateY(0)}
.nx-toast .nx-toast-accent{width:4px;align-self:stretch;border-radius:4px}
.nx-toast .nx-toast-content{flex:1}
.nx-toast .nx-toast-title{font-weight:600;margin-bottom:4px;font-size:.95rem}
.nx-toast .nx-toast-msg{font-size:.9rem;line-height:1.4}
.nx-toast .nx-toast-close{background:transparent;border:0;color:#aaa;cursor:pointer;font-size:1rem}
.nx-toast .nx-toast-close:hover{color:#fff}
.nx-type-success .nx-toast-accent{background:#39d98a}
.nx-type-error .nx-toast-accent{background:#ff6b6b}
.nx-type-info .nx-toast-accent{background:#63b3ff}
@media (max-width: 480px){
  .nx-toast-container{right:10px;left:10px}
  .nx-toast{max-width:unset}
}


/* Hide inline field error text (toast-only) */
.nx-field-error{ display:none !important; }


/* === Toast-only mode: hide inline messages === */
.nx-ui .nx-field-error,
.nx-ui .nx-pass-strength,
.nx-ui .nx-alert{ display:none !important; }



/* === Mobile fixes for [nx_profile] === */
@media (max-width: 640px){
  /* Form 2 cột -> 1 cột */
  .nx-ui .nx-form.nx-grid-2{
    display:grid;
    grid-template-columns: 1fr !important;
    gap:12px;
  }
  /* Nút submit full width */
  .nx-ui .nx-form .nx-btn-primary{ width:100%; }

  /* Hàng SĐT (select + input) xếp dọc, full width */
  .nx-ui .nx-form-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap:8px !important;
  }
  .nx-ui .nx-form-row .nx-select,
  .nx-ui .nx-form-row input[type="text"],
  .nx-ui .nx-form-row input[type="tel"]{
    width:100% !important;
    min-width:0 !important;
  }

  /* 3 nút mật khẩu không đè chữ trong input */
  .nx-ui .nx-pass-wrap input{ padding-right:108px !important; }
  .nx-ui .nx-pass-copy{ right:56px !important; }
  .nx-ui .nx-pass-generate{ right:32px !important; }
  .nx-ui .nx-pass-toggle{ right:8px !important; }

  /* Avatar & hint căn giữa gọn */
  .nx-ui .nx-avatar-wrap{ padding:0 0px; }
  .nx-ui .nx-hint{ max-width:100% }
}



/* === Phone block styles (nx_profile) === */
.nx-ui .nx-phone-row{display:flex;align-items:center;gap:12px}
.nx-ui .nx-phone-cc .nx-select{min-width:128px}
.nx-ui .nx-phone-row .nx-input{flex:1;min-width:0}
@media (max-width: 640px){
  .nx-ui .nx-phone-row{flex-direction:column;align-items:stretch}
  .nx-ui .nx-phone-cc .nx-select{width:100%}
  .nx-ui .nx-phone-row .nx-input{width:100%}
}



/* === Unified icon button style (toggle/generate/copy/phone) === */
.nx-ui .nx-icon-btn,
.nx-ui .nx-pass-toggle,
.nx-ui .nx-pass-generate,
.nx-ui .nx-pass-copy,
.nx-ui .nx-phone-reveal{
  width:28px;height:28px;min-width:28px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border,#222);
  background:var(--surface-2, rgba(255,255,255,.04));
  border-radius:9999px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:transform .12s ease, border-color .12s ease, background-color .12s ease, color .12s ease;
  font-size:.9rem; line-height:1;
}
.nx-ui .nx-pass-toggle:hover,
.nx-ui .nx-pass-generate:hover,
.nx-ui .nx-pass-copy:hover,
.nx-ui .nx-phone-reveal:hover{ transform:translateY(-1px); border-color:var(--primary,#63b3ff); }
.nx-ui .nx-pass-toggle:focus,
.nx-ui .nx-pass-generate:focus,
.nx-ui .nx-pass-copy:focus,
.nx-ui .nx-phone-reveal:focus{ outline:2px solid rgba(99,179,255,.35); outline-offset:2px; }

/* Positioning inside phone input */
.nx-ui .nx-phone-input{ position:relative; }
.nx-ui .nx-phone-input .nx-input{ width:100%; padding-right:40px; }
.nx-ui .nx-phone-reveal{ position:absolute; right:8px; top: 10%; /* transform: translateY(0%); */ color: var(--dim,#a7b0c0); }
.nx-ui .nx-phone-reveal:hover{ color:var(--primary,#63b3ff); }
@media (max-width: 640px){
  .nx-ui .nx-phone-input .nx-input{ padding-right:44px; }
}



/* === Mobile hardening for [nx_profile] === */
@media (max-width: 640px){
  /* 2 columns -> 1 column */
  .nx-ui .nx-form.nx-grid-2{
    display:grid;
    grid-template-columns: 1fr !important;
    gap:12px;
  }
  /* Full-width fields */
  .nx-ui .nx-input,
  .nx-ui .nx-select,
  .nx-ui textarea{
    width:100% !important;
    min-width:0 !important;
  }
  /* Button full width */
  .nx-ui .nx-btn-primary{ width:100%; }

  /* Phone input: keep icon centered vertically, avoid overlap */
  .nx-ui .nx-phone-input{ position:relative; }
  .nx-ui .nx-phone-input .nx-input{ padding-right:44px; }
  .nx-ui .nx-phone-reveal{ top: 50% !important; transform: translateY(-50%) !important; right:10px; }

  /* Tab bar / chips wrap to new line if narrow */
  .nx-ui .nx-tabs, .nx-ui .nx-pills{ flex-wrap: wrap; row-gap: 8px; }

  /* Prevent any horizontal overflow */
  .nx-ui{ overflow-x:hidden; }
}

/* Ensure sizing is predictable inside .nx-ui */
.nx-ui *, .nx-ui *::before, .nx-ui *::after{ box-sizing:border-box; }



/* === Mobile overlay avoidance (nx_profile) === */
@media (max-width: 640px){
  /* Tạo khoảng đệm phía dưới để tránh FAB/nút nổi che nội dung cuối trang */
  .nx-ui{ padding-bottom: 96px; overflow-x: hidden; }

  /* Di chuyển các nút nổi thường gặp (CookieYes, v.v.) sang góc phải và nhích xuống 12px */
  .cky-btn-revisit,
  .cky-revisit-bottom-left,
  .cky-floating-bottom-left{
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
  }
  /* Nếu plugin đặt cố định chiều rộng/chiều cao lớn, co lại một chút cho mobile */
  .cky-btn-revisit,
  .cky-revisit-bottom-left,
  .cky-floating-bottom-left{
    transform: scale(.9);
    transform-origin: bottom right;
  }
}



/* === Mobile safe area & overlay fixes for nx_profile === */
@media (max-width: 640px){
  /* Add bottom padding so last content is not covered by floating widgets / safe area */
  .nx-ui{
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }
  /* Ensure cards/sections don't clip children on small screens */
  .nx-ui .nx-card,
  .nx-ui .nx-section,
  .nx-ui .nx-panel,
  .nx-ui .nx-form{
    overflow: visible !important;
  }
  /* Move cookie revisit button (CookieYes) to bottom-right and reduce size */
  .cky-btn-revisit,
  .cky-revisit-bottom-left,
  .cky-floating-bottom-left,
  #cky-btn-revisit{
    left: auto !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    transform: scale(.9);
    transform-origin: bottom right;
    z-index: 9998;
  }
}



/* === NX Responsive Baseline (global) === */
.nx-ui *, .nx-ui *::before, .nx-ui *::after{ box-sizing:border-box; }
.nx-ui img, .nx-ui video{ max-width:100%; height:auto; display:block; }
.nx-ui .nx-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nx-ui table{ width:100%; border-collapse:collapse; }

/* Cards/sections never exceed container */
.nx-ui .nx-card, .nx-ui .nx-section, .nx-ui .nx-panel{ max-width:100%; }

/* Inputs/buttons tap targets */
.nx-ui .nx-input, .nx-ui select, .nx-ui textarea{ min-height:44px; }
.nx-ui .nx-btn, .nx-ui .nx-btn-primary{ min-height:44px; }

/* Toast spacing on small screens */
@media (max-width: 640px){
  .nx-toast-container{ right:10px; left:10px; bottom:12px; }
}

/* Collapse grids/rows on mobile */
@media (max-width: 640px){
  .nx-ui .nx-form.nx-grid-3,
  .nx-ui .nx-form.nx-grid-2,
  .nx-ui .nx-row{ display:grid; grid-template-columns:1fr !important; gap:12px; }
  .nx-ui .nx-actions{ flex-wrap:wrap; row-gap:8px; }

  /* Full width fields/buttons */
  .nx-ui .nx-input,
  .nx-ui select,
  .nx-ui textarea,
  .nx-ui .nx-btn,
  .nx-ui .nx-btn-primary{ width:100% !important; }

  /* Phone input: keep icon vertically centered */
  .nx-ui .nx-phone-input{ position:relative; }
  .nx-ui .nx-phone-input .nx-input{ padding-right:44px; }
  .nx-ui .nx-phone-reveal{ top:50% !important; transform:translateY(-50%) !important; right:10px; }

  /* Prevent hidden content by floating widgets & safe area */
  .nx-ui{ padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); overflow-x:hidden; }
  .nx-ui .nx-card, .nx-ui .nx-section, .nx-ui .nx-panel, .nx-ui .nx-form{ overflow:visible !important; }
}

/* Make any wide table scrollable */
.nx-ui .nx-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }



/* === nx-card mobile hardening === */
@media (max-width: 640px){
  .nx-ui .nx-card{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:16px !important;
    border-radius:12px;
    overflow:visible; /* tránh cắt child như tooltip/button */
    word-wrap:break-word;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  .nx-ui .nx-card .nx-row{ display:grid; grid-template-columns:1fr; gap:12px; }
  .nx-ui .nx-card .nx-actions{ flex-wrap:wrap; row-gap:8px; }
  .nx-ui .nx-card img{ max-width:100%; height:auto; }
  /* Tránh phần tử bên trong kéo rộng card */
  .nx-ui .nx-card [style*="min-width"]{ min-width:0 !important; }
  .nx-ui .nx-card [style*="width: "]{ max-width:100% !important; }
}



/* === nx_profile: Avatar card text & layout fix on mobile === */
@media (max-width: 640px){
  /* Nếu card dùng .nx-row dạng grid, đẩy phần mô tả xuống 1 hàng riêng */
  .nx-ui .nx-card .nx-hint{ 
    grid-column: 1 / -1;
    width:100%;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
    writing-mode: horizontal-tb !important;
    line-height: 1.4;
    margin-top: 8px;
  }
  /* Đảm bảo các cột trong card không có min-width khiến bó hẹp nội dung */
  .nx-ui .nx-card [class*="col"], 
  .nx-ui .nx-card .nx-col{
    min-width: 0 !important;
  }
  /* Nhóm nút chọn/cập nhật wrap đẹp khi hẹp */
  .nx-ui .nx-card .nx-actions{ flex-wrap: wrap; gap:8px; }
}


/* Ensure avatar hint wraps nicely */
.nx-ui .nx-avatar-wrap .nx-hint{
  width:100%;
  max-width:480px;
  white-space:normal;
  overflow-wrap:break-word;
  text-align:center;
  margin-top:8px;
}


/* === Card padding normalization === */
.nx-ui .nx-card{ padding: var(--nx-card-pad, 20px); }
@media (max-width: 640px){
  .nx-ui .nx-card{ --nx-card-pad: 16px; padding: var(--nx-card-pad) !important; }
}



/* === NX Grid System (aligned with nx-ui) === */
.nx-ui{
  --nx-gap: 16px;
  --nx-container-pad: 16px;
  --nx-grid-cols: 12;
}
@media (min-width: 768px){
  .nx-ui{ --nx-gap: 16px; --nx-container-pad: 20px; }
}
@media (min-width: 1024px){
  .nx-ui{ --nx-gap: 20px; --nx-container-pad: 24px; }
}

/* Base grid */
.nx-ui .nx-grid{ display:block; }
.nx-ui .nx-grid.nx--enable{
  display: grid;
  grid-template-columns: repeat(var(--nx-grid-cols), minmax(0, 1fr));
  gap: var(--nx-gap);
  align-items: start;
}

/* Quick grid helpers */
.nx-ui .nx-grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--nx-gap); }
.nx-ui .nx-grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--nx-gap); }

/* Column span utilities */
.nx-ui [class^="nx-col-span-"], .nx-ui [class*=" nx-col-span-"]{ grid-column: span 12 / span 12; }
.nx-ui .nx-col-span-1{ grid-column: span 1 / span 1; }
.nx-ui .nx-col-span-2{ grid-column: span 2 / span 2; }
.nx-ui .nx-col-span-3{ grid-column: span 3 / span 3; }
.nx-ui .nx-col-span-4{ grid-column: span 4 / span 4; }
.nx-ui .nx-col-span-5{ grid-column: span 5 / span 5; }
.nx-ui .nx-col-span-6{ grid-column: span 6 / span 6; }
.nx-ui .nx-col-span-7{ grid-column: span 7 / span 7; }
.nx-ui .nx-col-span-8{ grid-column: span 8 / span 8; }
.nx-ui .nx-col-span-9{ grid-column: span 9 / span 9; }
.nx-ui .nx-col-span-10{ grid-column: span 10 / span 10; }
.nx-ui .nx-col-span-11{ grid-column: span 11 / span 11; }
.nx-ui .nx-col-span-12{ grid-column: span 12 / span 12; }

/* Responsive collapse */
@media (max-width: 640px){
  .nx-ui{ --nx-grid-cols: 1; }
  .nx-ui .nx-grid-2, .nx-ui .nx-grid-3{ grid-template-columns: 1fr; }
  .nx-ui [class^="nx-col-span-"], .nx-ui [class*=" nx-col-span-"]{ grid-column: span 1 / span 1; }
}

/* Container padding alignment (opt-in wrapper if used) */
.nx-ui .nx-wrap{ width:100%; padding-left:var(--nx-container-pad); padding-right:var(--nx-container-pad); }



/* === Card margin normalization (aligned with nx-ui) === */
.nx-ui .nx-card{
  margin-left: var(--nx-card-ml, 0);
  margin-right: var(--nx-card-mr, 0);
}
@media (max-width: 640px){
  .nx-ui .nx-card{ --nx-card-ml: 0; --nx-card-mr: 0; }
}



/* === Mobile left offset for nx-card === */
@media (max-width: 640px){
  .nx-ui .nx-card{ margin-left: -10px !important; }
}



/* === NX Mobile Consistency Pack (forms, inputs, buttons, text across tabs) === */
@media (max-width: 640px){
  /* Base text & wrapping */
  .nx-ui{
    -webkit-text-size-adjust: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .nx-ui p, .nx-ui .nx-text, .nx-ui .nx-hint, .nx-ui .nx-note{
    margin: 0 0 10px;
    white-space: normal;
  }

  /* Form structure */
  .nx-ui .nx-form{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .nx-ui .nx-field{ display:flex; flex-direction:column; gap:6px; }
  .nx-ui .nx-field label{ font-weight:600; line-height:1.3; }

  /* Inputs/selects/textarea */
  .nx-ui input[type="text"],
  .nx-ui input[type="password"],
  .nx-ui input[type="email"],
  .nx-ui input[type="tel"],
  .nx-ui select,
  .nx-ui textarea{
    width: 100% !important;
    min-height: 44px;
    font-size: 16px; /* avoid iOS zoom */
    padding: 10px 12px;
  }
  .nx-ui input::placeholder,
  .nx-ui textarea::placeholder{ opacity:.75; }

  /* Buttons */
  .nx-ui .nx-btn, .nx-ui .nx-btn-primary{
    width: 100%;
    min-height: 44px;
  }
  .nx-ui .nx-actions{ display:flex; flex-wrap:wrap; gap:8px; }

  /* Password control cluster (avoid overlap) */
  .nx-ui .nx-pass-wrap{ position:relative; }
  .nx-ui .nx-pass-wrap input{ padding-right: 116px; }
  .nx-ui .nx-pass-copy{ right: 64px; }
  .nx-ui .nx-pass-generate{ right: 36px; }
  .nx-ui .nx-pass-toggle{ right: 8px; }

  /* Phone field (one input + reveal) */
  .nx-ui .nx-phone-input{ position:relative; }
  .nx-ui .nx-phone-input .nx-input{ padding-right: 44px; }
  .nx-ui .nx-phone-reveal{ top:50% !important; transform: translateY(-50%) !important; right:10px; }

  /* Toast container spacing */
  .nx-toast-container{ right: 10px; left: 10px; bottom: 12px; }

  /* Cards never cut children; unify spacing */
  .nx-ui .nx-card{
    width:100% !important;
    max-width:100% !important;
    overflow: visible !important;
    padding: var(--nx-card-pad, 16px) !important;
    margin-left: var(--nx-card-ml, -10px) !important; /* per request */
    margin-right: var(--nx-card-mr, 0) !important;
    border-radius: 12px;
  }

  /* Prevent horizontal scroll */
  .nx-ui{ overflow-x:hidden; }
}

/* High-contrast focus for accessibility */
.nx-ui .nx-input:focus, .nx-ui select:focus, .nx-ui textarea:focus,
.nx-ui .nx-btn:focus, .nx-ui .nx-btn-primary:focus{
  outline: 2px solid rgba(99,179,255,.35);
  outline-offset: 2px;
}


/* === QR card styles === */
.nx-ui .nx-qr-card{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.nx-ui .nx-qr-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.nx-ui .nx-qr-view{ display:flex; align-items:center; justify-content:center; min-height: 260px; width:100%; }
.nx-ui .nx-qr-img{ width:240px; height:240px; image-rendering:pixelated; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.25); }

/* QR local render (canvas/img) */
.nx-ui .nx-qr-view canvas{ width:240px; height:240px; image-rendering:pixelated; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.25); }

/* === Namecard styles === */
.nx-ui.nx-namecard{ padding: 24px; }
.nx-ui .nx-card--namecard{ max-width: 560px; margin: 0 auto; }
.nx-ui .nx-card--namecard .nx-title{ margin: 0 0 10px; }
.nx-ui .nx-card--namecard .nx-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.nx-ui .nx-card--namecard a{ text-decoration: none; }
@media (max-width: 640px){
  .nx-ui.nx-namecard{ padding: 16px; }
  .nx-ui .nx-card--namecard{ border-radius: 12px; }
}

.nx-inline {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.nx-inline input[type="email"] {
  flex: 1;
  min-width: 0; /* cho phép co */
}

#nx-send-code {
  flex-shrink: 0;
  padding: .6rem 1rem;
  max-width: 120px; /* không để chiếm hết */
  text-align: center;
}


#nx-send-code:hover {
  background-color: #ffcc00; /* vàng sáng hơn khi hover */
}

#nx-send-code:disabled {
  background-color: #333;
  color: #888;
  cursor: not-allowed;
}

@media (max-width: 480px){
  .nx-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .nx-inline input[type="email"] {
    width: 100%;
  }
  #nx-send-code {
    width: 100%;
    max-width: none;
  }
}

/* Vùng 6 ô OTP */
.nx-code-inputs{
  display: grid !important;
  grid-template-columns: repeat(6, 52px) !important;
  gap: .6rem !important;
  justify-content: center !important;  /* căn giữa theo chiều ngang */
  margin: 1rem 0;
}

/* Ô số */
.nx-code-digit{
  width: 52px !important;
  height: 56px !important;
  font-size: 1.6rem;
  text-align: center;
  border: 1px solid #444;
  border-radius: 10px;
  background: #111;
  color: #fff;
  line-height: 56px;
}
.nx-code-digit:focus{
  border-color:#f5b800;
  box-shadow:0 0 6px #f5b800;
  outline:none;
}

/* Responsive mobile: co nhỏ lại */
@media (max-width: 480px){
  .nx-code-inputs{
    grid-template-columns: repeat(6, 44px) !important;
    gap: .5rem !important;
  }
  .nx-code-digit{
    width: 44px !important;
    height: 50px !important;
    font-size: 1.4rem !important;
    line-height: 50px;
  }
}