/* Doki – chuông + trung tâm thông báo trong app/web (đợt G, A2). Chữ theo thang type.css: ≥14px; <14px không dùng; 14–16px đậm ≤700. */

/* ---------- Chuông ở thanh đầu trang ---------- */
.bellbtn{position:relative;color:var(--accent-ink)}
.bellbtn:hover{transform:scale(1.08)}
.bellbtn[hidden]{display:none}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#E11D48;color:#fff;font-size:var(--fs-sm);font-weight:700;line-height:22px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.bell-badge[hidden]{display:none}
.sh-bellbtn{position:relative}

/* ---------- Bảng thông báo (trong hộp thoại dùng chung) ---------- */
.nt-sum{width:100%;text-align:left;color:var(--ink2);font-size:var(--fs-sm);font-weight:600;line-height:1.5}
.nt-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px;max-height:min(52vh,420px);overflow:auto;overscroll-behavior:contain;text-align:left}
.nt-list li::before{display:none}
.nt-i{position:relative;display:flex;align-items:stretch;gap:4px;border:1.5px solid var(--line);border-radius:16px;background:var(--bg);padding:0}
.nt-i.un{border-color:var(--accent-ink);background:var(--soft-blue)}
.nt-main{flex:1 1 0;min-width:0;display:flex;align-items:flex-start;gap:10px;padding:12px 2px 12px 10px;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font-family:inherit;border-radius:16px;min-height:56px}
.nt-main:focus-visible,.nt-x:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.nt-ic{flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--soft-blue);color:var(--accent-ink)}
.nt-ic.k-wallet{background:var(--soft-teal);color:var(--teal-ink)}
.nt-ic.k-shop,.nt-ic.k-order{background:var(--soft-blue);color:var(--accent-ink)}
.nt-ic.k-admin{background:#FFF3D1;color:#7A4A00}
:root.dark .nt-ic.k-admin{background:#4A3308;color:#FFE8B0}
.nt-b{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.nt-t{color:var(--ink);font-size:var(--fs-md);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.nt-p{color:var(--ink2);font-size:var(--fs-sm);font-weight:500;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
.nt-m{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted);font-size:var(--fs-sm);font-weight:500;line-height:1.4}
.nt-go{color:var(--accent-ink);font-weight:700}
.nt-tl{display:flex;align-items:flex-start;gap:8px}
.nt-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#E11D48;margin-top:7px}
.nt-x{flex:none;width:44px;min-width:44px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-lg);font-weight:700;border-radius:0 16px 16px 0;padding:0}
.nt-x:hover{color:var(--danger);background:rgba(190,18,60,.08)}
.nt-x:disabled{opacity:.5;pointer-events:none}
.nt-more{width:100%}
/* 3 dòng chờ (chỉ khi chưa có bản lấy sẵn): đúng cỡ một thông báo nên hộp không giật khi dữ liệu về */
.nt-sk{flex:none;height:64px;border-radius:16px;background:linear-gradient(90deg,var(--soft-blue) 0%,var(--bg) 50%,var(--soft-blue) 100%);background-size:200% 100%;animation:ntsk 1.1s ease-in-out infinite}
@keyframes ntsk{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.nt-sk{animation:none}}
.nt-empty{list-style:none;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:26px 14px;color:var(--ink2);font-size:var(--fs-sm);line-height:1.55}
.nt-empty b{color:var(--ink);font-size:var(--fs-lg);font-weight:700}
.nt-empty-ic{width:60px;height:60px;border-radius:50%;background:var(--soft-blue);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
/* hộp thoại thông báo gọn: bỏ biểu tượng lớn, hai nút nằm cạnh nhau, danh sách có nhiều chỗ nhất */
.modal.ntf .modal-body{padding:22px 14px 14px;gap:10px}
.modal.ntf .m-ic{display:none}
.modal.ntf .m-title{font-size:var(--fs-h3)}
.modal.ntf .m-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:0}
.modal.ntf .m-btn{padding:12px 8px;font-size:var(--fs-md)}
.modal.ntf .nt-list{max-height:max(220px,calc(100dvh - 330px))}
.modal.ntf .m-note{font-size:var(--fs-sm)}