/* NHIP v2.98h — Hộp thoại nằm GIỮA màn hình, gọn và chuyên nghiệp.
   Áp dụng cho: chi tiết tin tức (#nd), Thêm khách hàng, chi tiết mã trong danh mục (#pd).
   Chỉ đổi cách đặt vị trí + bề mặt hộp; màu nền/chữ vẫn do theme (sáng/tối/skin) quyết định. */
.nd{
  align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:rgba(14,22,30,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  overscroll-behavior:contain;box-sizing:border-box;
  animation:nmc-fade .16s ease-out both}
html[data-theme="dark"] .nd{background:rgba(0,0,0,.62)}
html:has(.nd:not([hidden])){overflow:hidden}

.nd .nd-box{
  width:min(600px,100%);height:auto;max-height:min(88dvh,780px);
  padding:22px 24px 24px;border-radius:18px;
  border:1px solid var(--line,#e3e8ed);border-top:3px solid var(--brand,#16845b);
  box-shadow:0 28px 70px rgba(10,20,30,.34);
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  animation:nmc-pop .2s cubic-bezier(.2,.9,.3,1.1) both}
.nd .nd-box.cu-box{width:min(560px,100%)}

/* Nút Đóng gọn, luôn thấy khi cuộn */
.nd .nd-x{position:sticky;top:0;float:right;z-index:3;min-height:34px;padding:0 14px;margin:-4px -6px 8px 12px;
  border-radius:999px;font-size:13px;font-weight:700}

/* Tiêu đề + dải thông tin nguồn */
.nd .nd-box h2{font-size:19px;line-height:1.4;margin:6px 0 12px;letter-spacing:-.2px;overflow-wrap:anywhere}
.nd .nd-box .nw-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px}
.nd .nd-box .nw-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.nd .nd-box .eyebrow{letter-spacing:.06em}
.nd .nd-box p{line-height:1.65;overflow-wrap:anywhere}
.nd .nd-box .wl-row{width:100%;text-align:left}

/* Form Thêm khách hàng */
.cu-box h2{padding-bottom:12px;border-bottom:1px solid var(--line,#e3e8ed);margin-bottom:16px}
.cu-box .fl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin-bottom:14px}
.cu-box .fl-grid .fld2:nth-child(3){grid-column:1/-1}
.cu-box .fld2{display:flex;flex-direction:column;gap:5px;min-width:0}
.cu-box .fld2>span{font-size:12.5px;font-weight:700;color:var(--text2,var(--muted,#5f6f82))}
.cu-box .fld2 input{width:100%;min-height:42px;box-sizing:border-box;border-radius:10px}
.cu-box .chk{display:flex;align-items:center;gap:9px;margin:2px 0 12px;font-size:14px;cursor:pointer}
.cu-box .source-note{margin:0 0 16px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.55;
  background:color-mix(in srgb,var(--brand,#16845b) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--brand,#16845b) 22%,transparent)}
.cu-box .row{display:flex;justify-content:flex-end;gap:10px}
.cu-box .row .btn{min-height:42px;padding:0 20px;border-radius:10px}

@media(max-width:560px){
  .nd{padding:12px}
  .nd .nd-box{padding:18px 16px 20px;border-radius:16px;max-height:90dvh}
  .cu-box .fl-grid{grid-template-columns:minmax(0,1fr)}
  .cu-box .row .btn{width:100%}
}
@keyframes nmc-fade{from{opacity:0}to{opacity:1}}
@keyframes nmc-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nd,.nd .nd-box{animation:none}}